From 2f21143d31759882d6700f3223f16b9840b91871 Mon Sep 17 00:00:00 2001
From: Rose Hogenson <rosehogenson@posteo.net>
Date: Fri, 18 Oct 2024 18:08:52 -0700
Subject: Add touchscreen support.

---
 static/pong.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

(limited to 'static/pong.js')

diff --git a/static/pong.js b/static/pong.js
index 583585b..c51bb7b 100644
--- a/static/pong.js
+++ b/static/pong.js
@@ -181,13 +181,29 @@ function main() {
   const paddle2 = new Paddle('right');
 
   const keys = {};
-  let mousePressed = false;
-  let mouseY = 0;
   window.addEventListener('keydown', (e) => keys[e.key] = true);
   window.addEventListener('keyup', (e) => delete keys[e.key]);
+  let mousePressed = false;
+  let mouseY = 0;
   window.addEventListener('mousedown', () => mousePressed = true);
   window.addEventListener('mouseup', () => mousePressed = false);
   window.addEventListener('mousemove', (e) => mouseY = e.y);
+  let touchPressed = false;
+  let touchY = 0;
+  window.addEventListener('touchstart', (e) => {
+    touchPressed = true;
+    if (e.changedTouches.length > 0) {
+      touchY = e.changedTouches[0].clientY;
+    }
+  });
+  window.addEventListener('touchmove', (e) => {
+    touchPressed = true;
+    if (e.changedTouches.length > 0) {
+      touchY = e.changedTouches[0].clientY;
+    }
+  });
+  window.addEventListener('touchend', () => touchPressed = false);
+  window.addEventListener('touchcancel', () => touchPressed = false);
 
   let lastFrameTime = performance.now();
   let accumulator = 0;
@@ -202,9 +218,9 @@ function main() {
 
     const simulationSpeed = 1000 / ticksPerSecond;
     for (; accumulator >= simulationSpeed; accumulator -= simulationSpeed) {
-      if ((keys["w"] || keys["ArrowUp"] || mousePressed && paddle1.pos >= mouseY + paddleSpeed) && paddle1.bounds().y >= 0) {
+      if ((keys["w"] || keys["ArrowUp"] || mousePressed && paddle1.pos >= mouseY + paddleSpeed || touchPressed && paddle1.pos >= touchY + paddleSpeed) && paddle1.bounds().y >= 0) {
         paddle1.pos -= paddleSpeed;
-      } else if ((keys["s"] || keys["ArrowDown"] || mousePressed && paddle1.pos <= mouseY - paddleSpeed) && paddle1.bounds().bottom() <= canvas.height) {
+      } else if ((keys["s"] || keys["ArrowDown"] || mousePressed && paddle1.pos <= mouseY - paddleSpeed || touchPressed && paddle1.pos <= touchY - paddleSpeed) && paddle1.bounds().bottom() <= canvas.height) {
         paddle1.pos += paddleSpeed;
       }
 
@@ -260,7 +276,7 @@ function main() {
     paddle2.bounds().fill();
     ball.bounds().fill();
     drawNumber(playerScore, 150, 30)
-    drawNumber(aiScore, canvas.width - 600, 30);
+    drawNumber(aiScore, canvas.width / 2 + 150, canvas.height - 130);
 
     requestAnimationFrame(gameLoop);
   }
-- 
cgit v1.3.1