diff --git a/src/App.css b/src/App.css index ac0da5a..3aba519 100644 --- a/src/App.css +++ b/src/App.css @@ -220,3 +220,44 @@ html, body, #root { border-radius: 2px; transition: width 0.05s linear; } + +/* Mobile responsive: full-screen overlays */ +@media (max-width: 768px) { + .overlay-box { + width: 100%; + height: 100%; + border-radius: 0; + padding: 24px 20px; + justify-content: center; + } + + .menu-title { + font-size: 48px; + letter-spacing: 16px; + } + + .menu-subtitle { + font-size: 13px; + letter-spacing: 6px; + margin-bottom: 32px; + } + + .menu-control { + font-size: 11px; + letter-spacing: 2px; + } + + .gameover-score { + font-size: 48px; + } + + .gameover-label { + font-size: 28px; + letter-spacing: 8px; + } +} + +/* Prevent default touch behaviors on the game canvas */ +.game-wrapper { + touch-action: none; +} diff --git a/src/DitherGame.tsx b/src/DitherGame.tsx index e68c140..790e3ea 100644 --- a/src/DitherGame.tsx +++ b/src/DitherGame.tsx @@ -426,24 +426,37 @@ export default function DitherGame() { const onPointerMove = (e: PointerEvent) => { const st = stateRef.current; - if (!st || e.pointerType !== "mouse") return; + if (!st) return; const { x, y } = getLocalPos(e); st.mouseX = x; st.mouseY = y; - st.mouseActive = true; + // Mouse always sets active on move; touch is managed by down/up + if (e.pointerType === "mouse") { + st.mouseActive = true; + } if (!raf) raf = requestAnimationFrame(tick); }; const onPointerLeave = (e: PointerEvent) => { const st = stateRef.current; - if (st && e.pointerType === "mouse") { + if (st) { st.mouseActive = false; if (!raf) raf = requestAnimationFrame(tick); } }; const onPointerDown = (e: PointerEvent) => { + const st = stateRef.current; const game = gameRef.current; + + // Touch: activate tracking and update position on finger down + if (e.pointerType === "touch" && st) { + const { x, y } = getLocalPos(e); + st.mouseX = x; + st.mouseY = y; + st.mouseActive = true; + } + if (game.phase === "playing") { game.charging = true; game.chargeStart = performance.now(); @@ -459,6 +472,11 @@ export default function DitherGame() { const game = gameRef.current; const { x, y } = getLocalPos(e); + // Touch: deactivate tracking on finger lift (pause, like mouse leaving) + if (e.pointerType === "touch") { + st.mouseActive = false; + } + if (game.phase === "menu" && freshClickRef.current) { freshClickRef.current = false; gameRef.current = createGameState();