Implement controller and viewer communication using WebSockets

controller/controller.js

@@ -10,10 +10,12 @@ document.onmouseup = function(e) {
     if (e.button === 0) {
         mouseDown = false;
         document.getElementById("slingshot").classList.add("ungrabbed");
+        sendNudge(-Math.floor(e.pageX - window.innerWidth / 2), Math.floor(e.pageY - window.innerHeight / 2));
     }
 };
 document.ontouchend = function(e) {
     document.getElementById("slingshot").classList.add("ungrabbed");
+    sendNudge(-Math.floor(e.touches[0].clientX - window.innerWidth / 2), Math.floor(e.touches[0].clientY - (window.innerHeight / 2)));
 };
 document.ontouchstart = function(e) {
     e.preventDefault();
@@ -47,4 +49,21 @@ document.addEventListener("touchmove", (e) => {
     slingshot.style.width = distance({x: cursorX, y: cursorY}, {x: window.innerWidth/2, y: window.innerHeight/2}) + "px";
     const angle = cursorX >= window.innerWidth/2 ? -Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) : (-Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) - Math.PI);
     slingshot.style.transform = "rotate(" + angle + "rad)";
-});
+});
+
+function sendNudge(x, y) {
+    fetch("http://localhost:8080", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        referrer: "no-referrer",
+        body: JSON.stringify([x, y])
+    })
+        .then((response) => {
+            if (![200, 201, 204].includes(response.status)) {
+                throw new Error("Nudge request failed with http status: " + response.status)
+            }
+        })
+        .catch((e) => {
+            console.log("Failed to send nudge request " + e)
+        });
+}