80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
const socket = io();
|
|
let px = 0;
|
|
let py = 0;
|
|
|
|
|
|
socket.on('connect', function() {
|
|
console.log("Websocket connected...");
|
|
});
|
|
|
|
|
|
$(function () {
|
|
$.mousedirection();
|
|
$("#canvas").on("mousedirection", function (e) {
|
|
if (e.direction == "up") {
|
|
px = 0;
|
|
py = -1;
|
|
} else if (e.direction == "down") {
|
|
px = 0;
|
|
py = 1;
|
|
} else if (e.direction == "left") {
|
|
px = -1;
|
|
py = 0;
|
|
} else if (e.direction == "right") {
|
|
px = 1;
|
|
py = 0;
|
|
} else if (e.direction == "top-left") {
|
|
px = -1;
|
|
py = -1;
|
|
} else if (e.direction == "top-right") {
|
|
px = 1;
|
|
py = -1;
|
|
} else if (e.direction == "bottom-left") {
|
|
px = -1;
|
|
py = 1;
|
|
} else if (e.direction == "bottom-right") {
|
|
px = 1;
|
|
py = 1;
|
|
}
|
|
|
|
updateText (px, py);
|
|
});
|
|
});
|
|
|
|
|
|
|
|
function updateText (px, py) {
|
|
const coordsTxt = "X coords: " + px + ", Y coords: " + py;
|
|
document.getElementById("cordsText").innerText = coordsTxt;
|
|
// doAjax("/update-coords/xy/" + px + "/" + py, "" , "update-coords", "GET");
|
|
socket.emit('update_coords', px + "," + py);
|
|
}
|
|
|
|
// Touch events converted to mouse events
|
|
function touchHandler(event) {
|
|
let touches = event.changedTouches,
|
|
first = touches[0],
|
|
type = "";
|
|
|
|
switch(event.type) {
|
|
case "touchstart": type = "mousedown"; break;
|
|
case "touchmove": type = "mousemove"; break;
|
|
case "touchend": type = "mouseup"; break;
|
|
default: return;
|
|
}
|
|
|
|
let simulatedEvent = document.createEvent("MouseEvent");
|
|
simulatedEvent.initMouseEvent(type, true, true, window, 1,
|
|
first.screenX, first.screenY,
|
|
first.clientX, first.clientY, false,
|
|
false, false, false, 0/*left*/, null);
|
|
|
|
first.target.dispatchEvent(simulatedEvent);
|
|
event.preventDefault();
|
|
}
|
|
|
|
document.addEventListener("touchstart", touchHandler, true);
|
|
document.addEventListener("touchmove", touchHandler, true);
|
|
document.addEventListener("touchend", touchHandler, true);
|
|
document.addEventListener("touchcancel", touchHandler, true);
|