Add touch controls and nginx Dockerfile for Coolify deploy

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Dockerfile

@@ -0,0 +1,3 @@
+FROM nginx:alpine
+COPY index.html game.js /usr/share/nginx/html/
+COPY assets /usr/share/nginx/html/assets

game.js

@@ -44,8 +44,42 @@ addEventListener('keydown', e => {
   keys[e.code] = true;
 });
 addEventListener('keyup', e => keys[e.code] = false);
-const axisX = () => (keys.ArrowRight || keys.KeyD ? 1 : 0) - (keys.ArrowLeft || keys.KeyA ? 1 : 0);
-const axisZ = () => (keys.ArrowUp || keys.KeyW ? -1 : 0) + (keys.ArrowDown || keys.KeyS ? 1 : 0);
+const touchAxis = { x: 0, z: 0 };
+const axisX = () => touchAxis.x || (keys.ArrowRight || keys.KeyD ? 1 : 0) - (keys.ArrowLeft || keys.KeyA ? 1 : 0);
+const axisZ = () => touchAxis.z || (keys.ArrowUp || keys.KeyW ? -1 : 0) + (keys.ArrowDown || keys.KeyS ? 1 : 0);
+
+// touch: left/first finger drags to move (also sets aim), any extra finger tap = swing/serve.
+// A quick tap of the first finger swings too, so one-handed play works.
+let stick = null; // {id, x0, y0, t0, moved}
+const DEAD = 14;
+cv.addEventListener('touchstart', e => {
+  e.preventDefault(); audio();
+  for (const t of e.changedTouches) {
+    if (!stick) stick = { id: t.identifier, x0: t.clientX, y0: t.clientY, t0: performance.now(), moved: false };
+    else keyPressed('Space'); // second finger = swing
+  }
+}, { passive: false });
+cv.addEventListener('touchmove', e => {
+  e.preventDefault();
+  if (!stick) return;
+  for (const t of e.changedTouches) {
+    if (t.identifier !== stick.id) continue;
+    const dx = t.clientX - stick.x0, dy = t.clientY - stick.y0;
+    if (Math.hypot(dx, dy) > DEAD) stick.moved = true;
+    touchAxis.x = Math.abs(dx) > DEAD ? Math.sign(dx) : 0;
+    touchAxis.z = Math.abs(dy) > DEAD ? Math.sign(dy) : 0;
+  }
+}, { passive: false });
+const endTouch = e => {
+  e.preventDefault();
+  for (const t of e.changedTouches) {
+    if (!stick || t.identifier !== stick.id) continue;
+    if (!stick.moved && performance.now() - stick.t0 < 250) keyPressed('Space'); // tap = swing
+    stick = null; touchAxis.x = 0; touchAxis.z = 0;
+  }
+};
+cv.addEventListener('touchend', endTouch, { passive: false });
+cv.addEventListener('touchcancel', endTouch, { passive: false });
 
 // ----------------------------------------------------------------- audio ----
 let AC = null;

index.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
   html, body { margin: 0; height: 100%; background: #10141c; display: grid; place-items: center; }
-  canvas { image-rendering: pixelated; width: min(96vw, calc(96vh * 16 / 9)); aspect-ratio: 16/9; }
+  canvas { image-rendering: pixelated; width: min(96vw, calc(96vh * 16 / 9)); aspect-ratio: 16/9; touch-action: none; }
   #hint { position: fixed; bottom: 8px; width: 100%; text-align: center;
           font: 12px monospace; color: #6b7688; }
 </style>