added touch compatibility

noel-friedrich · Apr 27, 2024 · 8d1fdf4 · 8d1fdf4
1 parent 53fda7a
commit 8d1fdf4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 13 deletions.
diff --git a/js/commands/simulate.js b/js/commands/simulate.js
@@ -26,6 +26,7 @@ terminal.addCommand("simulate", async function(args) {
             const RPath = [R()]
 
             const viewCentre = new Vector2d(0, 0)
+            const viewCentreTarget = new Vector2d(0, 0)
 
             let friction = 0.001
 
@@ -96,18 +97,26 @@ terminal.addCommand("simulate", async function(args) {
 
             function mousePos(clickEvent) {
                 const middle = new Vector2d(canvas.width / 2, canvas.height / 2)
-                const rect = canvas.getBoundingClientRect()
-                return new Vector2d(
-                    clickEvent.clientX - rect.left,
-                    clickEvent.clientY - rect.top
-                ).sub(viewCentre).sub(middle)
+                return Vector2d.fromEvent(clickEvent, canvas).sub(viewCentre).sub(middle)
             }
 
             let cameraFollowing = true
 
             addEventListener("keydown", event => {
                 if (event.key == " ") {
                     cameraFollowing = !cameraFollowing
+                    viewCentreTarget.set(viewCentre)
+                }
+
+                const cameraSpeed = 100
+                if (event.key == "ArrowUp") {
+                    viewCentreTarget.iadd(new Vector2d(0, 1).scale(cameraSpeed))
+                } else if (event.key == "ArrowDown") {
+                    viewCentreTarget.iadd(new Vector2d(0, 1).scale(-cameraSpeed))
+                } else if (event.key == "ArrowLeft") {
+                    viewCentreTarget.iadd(new Vector2d(1, 0).scale(cameraSpeed))
+                } else if (event.key == "ArrowRight") {
+                    viewCentreTarget.iadd(new Vector2d(1, 0).scale(-cameraSpeed))
                 }
 
                 if (event.key == "f") {
@@ -155,15 +164,19 @@ terminal.addCommand("simulate", async function(args) {
             canvas.onmouseup = event => {
                 if (focusedBallPos && currMousePos) {
                     if (focusedBallPos == r1) {
-                        v1.set(currMousePos.sub(r1).scale(0.05))
+                        v1.iadd(currMousePos.sub(r1).scale(0.03))
                     } else {
-                        v2.set(currMousePos.sub(r2).scale(0.05))
+                        v2.iadd(currMousePos.sub(r2).scale(0.03))
                     }
                 }
 
                 focusedBallPos = null
             }
 
+            canvas.ontouchstart = event => canvas.onmousedown(event)
+            canvas.ontouchmove = event => canvas.onmousemove(event)
+            canvas.ontouchend = event => canvas.onmouseup(event)
+
             function drawArrow(headPos, tailPos, color) {
                 const delta = headPos.sub(tailPos)
 
@@ -197,19 +210,23 @@ terminal.addCommand("simulate", async function(args) {
                     "m     : change mass ratio",
                     "l     : change spring length",
                     "k     : change spring constant",
-                    "space : (un)follow mass",
+                    "space : toggle camera",
                     "",
                     `friction=${friction}`,
                     `mass_ratio=${m1}`,
                     `spring_length=${springLength / 10}`,
                     `spring_const=${k}`
                 ]
 
-                context.font = "20px monospace"
+                if (!cameraFollowing) {
+                    lines.splice(6, 0, "arrow : move camera")
+                }
+
+                context.font = "15px monospace"
                 context.fillStyle = "black"
                 context.textBaseline = "top"
                 for (let i = 0; i < lines.length; i++) {
-                    context.fillText(lines[i], 10, i * 30 + 10)
+                    context.fillText(lines[i], 10, i * 20 + 10)
                 }
             }
 
@@ -240,11 +257,11 @@ terminal.addCommand("simulate", async function(args) {
                 addToPath(p2Path, r2)
                 addToPath(RPath, R())
 
-                // update view centre
                 if (cameraFollowing) {
-                    const idealPos = R().scale(-1)
-                    viewCentre.iadd(idealPos.sub(viewCentre).scale(0.05))
+                    viewCentreTarget.set(R().scale(-1))
                 }
+
+                viewCentre.iadd(viewCentreTarget.sub(viewCentre).scale(0.05))
             }
 
             function drawBall(pos, color, radius) {

diff --git a/js/modules/game.js b/js/modules/game.js
@@ -184,6 +184,27 @@ class Vector2d {
         return [this.x, this.y]
     }
 
+    static fromEvent(event, element) {
+        let x = 0, y = 0
+
+        if (event.touches && event.touches[0]) {
+            x = event.touches[0].clientX
+            y = event.touches[0].clientY
+        } else if (event.originalEvent && event.originalEvent.changedTouches[0]) {
+            x = event.originalEvent.changedTouches[0].clientX
+            y = event.originalEvent.changedTouches[0].clientY
+        } else if (event.clientX !== undefined && event.clientY !== undefined) {
+            x = event.clientX
+            y = event.clientY
+        } else if (event.changedTouches && event.changedTouches.length > 0) {
+            x = event.changedTouches[0].clientX
+            y = event.changedTouches[0].clientY
+        }
+
+        const rect = element.getBoundingClientRect()
+        return new Vector2d(x - rect.left, y - rect.top)
+    }
+
 }
 
 class Vector3d {