<html>
<head>
</head>
<body>
<div id="map" byondclass="map" skinparams="zoom=1"></div>
<div id="touchControls" byondclass="touchControls"></div>
</body>
</html>
<byondclass name="touchControls">
<script>
(function() {
var touchable = 'createTouch' in document;
return {
fn: {
create: function() {
function onTouchStart(e) {
byond.fn.topic("touch=test");
}
byond.map.canvas.addEventListener( 'touchStart', onTouchStart, true);
},
winset: function(props, sub) {
if(touchable) {
byond.fn.topic("status=touchable");
} else {
byond.fn.topic("status=no_touch");
}
}
}
};
})()
</script>
</byondclass>
Problem description:
I'm trying to create touch controls, I've been testing with my iPad. I'm not sure how to add an event listener to the canvas. It causes the map not to load or the byond.fc.topic(...)s to not be sent by the web client and/or received by client/Topic()
I've also attempted to add the event listener to document, byond.map, byond.map.ui, byond.map.ui.map.
You can also use the command console.log(msg) to send output to the console. It will also print objects, so it's very handy for debugging.
According to the WebClient docs, the proper way to get the map canvas would be something like this:
var mapControl = byond(null, "map");
var mapCanvas = mapControl.ui.map;
This worked for me:
Where dump is a debug verb:
Took me a minute to realize that mouse clicks don't trigger touch events, which is why I added a simple click event to test it. Also, not sure if it matters, but event names are usually all lower-case.
Also, it's probably worth mentioning that this introduces a load-order dependency. The touchControls class must always be listed after the map in the skin, or the canvas won't be created before you try to attach listeners to it.