import React from "react"; // ── Tunables (CSS px / ms) ───────────────────────────────────────────── const TUNE = { swipeMinPx: 22, // finger travel from the current anchor before a swipe turn fires tapMaxPx: 12, // total travel allowed for a TAP (12..22px is a dead zone: neither fires) tapMaxMs: 220, // a press longer than this is never a tap axisBias: 1.25, // dominant axis must beat the other by this ratio to count (kills diagonal misfires) turnBuffer: 2, // queued turns kept so fast players never lose one cols: 17, // grid columns across the screen width baseStepMs: 150, // ms per cell at the start minStepMs: 70, // fastest ms per cell after the speed ramp rampPerFood: 4, // ms shaved off per food eaten dashMs: 700, // boost duration dashSpeedMul: 2.6, // speed multiplier while dashing dashCooldownMs: 2200, // meter refill time after a dash dashScore: 2, // food eaten during a dash scores this multiplier startLen: 4, trailMs: 260, // finger trail fade time restartGraceMs: 450, // ignore taps this long after dying wrapEdges: true, // light-cycle portals: exit one edge, enter the opposite one (only self-hits kill) bottomReservePx: 76, // board stays clear of the bottom strip (the platform's Vibes logo pill lives bottom-right) }; const DIRS = { up: [0, -1], down: [0, 1], left: [-1, 0], right: [1, 0] }; const OPP = { up: "down", down: "up", left: "right", right: "left" }; const ARROW = { up: "↑", down: "↓", left: "←", right: "→" }; export default function App() { const wrapRef = React.useRef(null); const canvasRef = React.useRef(null); const [hud, setHud] = React.useState({ score: 0, best: 0, last: "", mode: "ready" }); const [coach, setCoach] = React.useState(true); const [menu, setMenu] = React.useState(false); const pausedRef = React.useRef(false); pausedRef.current = menu; const apiRef = React.useRef({}); React.useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); let W = 0, H = 0, dpr = 1, cell = 20, cols = TUNE.cols, rows = 30, ox = 0, oy = 0; const S = { mode: "ready", // ready | play | over body: [], prev: [], dir: "right", queue: [], food: null, acc: 0, eaten: 0, score: 0, best: 0, dashUntil: 0, cooldownUntil: 0, diedAt: 0, shake: 0, particles: [], fx: [], trail: [], last: "", turns: 0, taps: 0, now: 0, }; window.__snake = S; // verification hook apiRef.current.restart = () => { reset(false); S.particles = []; S.fx = []; setHud((h) => ({ ...h, score: 0, mode: "ready", last: "" })); }; let audio = null; const beep = (f, d = 0.06, type = "square", v = 0.04) => { try { if (!audio) audio = new (window.AudioContext || window.webkitAudioContext)(); const o = audio.createOscillator(), g = audio.createGain(); o.type = type; o.frequency.value = f; g.gain.value = v; g.gain.exponentialRampToValueAtTime(0.0001, audio.currentTime + d); o.connect(g).connect(audio.destination); o.start(); o.stop(audio.currentTime + d); } catch (e) { /* audio optional */ } }; const buzz = (ms) => { try { navigator.vibrate?.(ms); } catch (e) { /* noop */ } }; const resize = () => { dpr = Math.min(2, window.devicePixelRatio || 1); W = wrapRef.current.clientWidth; H = wrapRef.current.clientHeight; canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.width = W + "px"; canvas.style.height = H + "px"; cols = TUNE.cols; cell = Math.floor(W / cols); const avail = H - 56 - TUNE.bottomReservePx; rows = Math.max(10, Math.floor(avail / cell)); ox = Math.floor((W - cols * cell) / 2); oy = Math.floor(56 + Math.max(0, avail - rows * cell) / 2); S.board = { ox, oy, w: cols * cell, h: rows * cell, W, H }; // debug: board rect in CSS px if (S.mode !== "play") reset(false); else { // keep the snake on the board after a rotation if (S.body.some(([x, y]) => x >= cols || y >= rows)) reset(false); } }; const placeFood = () => { for (let i = 0; i < 500; i++) { const f = [Math.floor(Math.random() * cols), Math.floor(Math.random() * rows)]; if (!S.body.some(([x, y]) => x === f[0] && y === f[1])) { S.food = f; return; } } }; function reset(keepMode) { const cy = Math.floor(rows / 2), cx = Math.floor(cols / 3); S.body = []; for (let i = 0; i < TUNE.startLen; i++) S.body.push([cx - i, cy]); S.prev = S.body.map((p) => [p[0] - 1, p[1]]); S.dir = "right"; S.queue = []; S.acc = 0; S.eaten = 0; S.score = 0; S.dashUntil = 0; S.cooldownUntil = 0; if (!keepMode) S.mode = "ready"; placeFood(); } const stepMs = () => { const base = Math.max(TUNE.minStepMs, TUNE.baseStepMs - S.eaten * TUNE.rampPerFood); return S.now < S.dashUntil ? base / TUNE.dashSpeedMul : base; }; const toPx = (gx, gy) => [ox + gx * cell + cell / 2, oy + gy * cell + cell / 2]; const burst = (x, y, color, n = 18, sp = 220) => { for (let i = 0; i < n; i++) { const a = Math.random() * Math.PI * 2, v = sp * (0.3 + Math.random()); S.particles.push({ x, y, vx: Math.cos(a) * v, vy: Math.sin(a) * v, life: 1, color }); } }; const die = () => { S.mode = "over"; S.diedAt = S.now; S.shake = 14; S.best = Math.max(S.best, S.score); const [hx, hy] = toPx(...S.body[0]); burst(hx, hy, "#ff2e88", 40, 340); beep(110, 0.35, "sawtooth", 0.06); buzz([30, 40, 30]); setHud((h) => ({ ...h, score: S.score, best: S.best, mode: "over" })); }; const tick = () => { if (S.queue.length) S.dir = S.queue.shift(); const [dx, dy] = DIRS[S.dir]; const head = S.body[0]; const nh = [head[0] + dx, head[1] + dy]; S.prev = S.body.map((p) => [p[0], p[1]]); const grow = S.food && nh[0] === S.food[0] && nh[1] === S.food[1]; if (TUNE.wrapEdges) { nh[0] = (nh[0] + cols) % cols; nh[1] = (nh[1] + rows) % rows; } else if (nh[0] < 0 || nh[1] < 0 || nh[0] >= cols || nh[1] >= rows) return die(); const bodyCheck = grow ? S.body : S.body.slice(0, -1); if (bodyCheck.some(([x, y]) => x === nh[0] && y === nh[1])) return die(); S.body.unshift(nh); if (grow) { S.prev.push(S.prev[S.prev.length - 1]); // new tail segment appears in place S.eaten++; S.score += S.now < S.dashUntil ? TUNE.dashScore : 1; const [fx, fy] = toPx(...nh); burst(fx, fy, "#ffe14d", 22, 260); S.shake = Math.max(S.shake, 4); beep(660 + S.eaten * 20, 0.08, "triangle"); buzz(10); placeFood(); setHud((h) => ({ ...h, score: S.score })); } else S.body.pop(); }; // ── input: one pointer, classify tap vs swipe ── const g = { id: null, sx: 0, sy: 0, ax: 0, ay: 0, t0: 0, maxD: 0, swiped: false, lastDir: null }; const enqueue = (d) => { const ref = S.queue.length ? S.queue[S.queue.length - 1] : S.dir; if (d === ref || d === OPP[ref]) return false; // same way or 180° reversal: ignore if (S.queue.length >= TUNE.turnBuffer) S.queue.shift(); S.queue.push(d); return true; }; const local = (e) => { const r = canvas.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; }; const onDown = (e) => { if (g.id !== null) return; g.id = e.pointerId; try { canvas.setPointerCapture(e.pointerId); } catch (err) { /* noop */ } const [x, y] = local(e); Object.assign(g, { starter: false, sx: x, sy: y, ax: x, ay: y, t0: performance.now(), maxD: 0, swiped: false, lastDir: null }); S.trail = [{ x, y, t: performance.now() }]; g.starter = false; if (S.mode === "ready") { g.starter = true; // the touch that starts the run never counts as a dash tap S.mode = "play"; S.acc = 0; setHud((h) => ({ ...h, mode: "play" })); } }; const onMove = (e) => { if (e.pointerId !== g.id) return; const [x, y] = local(e); S.trail.push({ x, y, t: performance.now() }); g.maxD = Math.max(g.maxD, Math.hypot(x - g.sx, y - g.sy)); const dx = x - g.ax, dy = y - g.ay; const adx = Math.abs(dx), ady = Math.abs(dy); if (Math.max(adx, ady) < TUNE.swipeMinPx) return; let d = null; if (adx > ady * TUNE.axisBias) d = dx > 0 ? "right" : "left"; else if (ady > adx * TUNE.axisBias) d = dy > 0 ? "down" : "up"; if (!d) return; // ambiguous diagonal: wait for more travel g.ax = x; g.ay = y; // re-anchor so a bend in the same gesture can turn again g.swiped = true; if (d === g.lastDir) return; // still dragging the same way g.lastDir = d; if (S.mode !== "play") return; const ok = enqueue(d); S.fx.push({ kind: "arrow", x, y, dir: d, t: S.now, ok }); if (ok) { S.turns++; S.last = "SWIPE " + ARROW[d]; beep(320, 0.04, "square", 0.025); buzz(8); setHud((h) => ({ ...h, last: S.last })); } }; const onUp = (e) => { if (e.pointerId !== g.id) return; g.id = null; const [x, y] = local(e); const dt = performance.now() - g.t0; const isTap = !g.swiped && dt <= TUNE.tapMaxMs && g.maxD <= TUNE.tapMaxPx; if (!isTap || g.starter) return; if (S.mode === "over") { if (S.now - S.diedAt > TUNE.restartGraceMs) { reset(true); S.mode = "play"; setHud((h) => ({ ...h, score: 0, mode: "play", last: "" })); } return; } if (S.mode !== "play") return; S.taps++; if (S.now >= S.cooldownUntil) { S.dashUntil = S.now + TUNE.dashMs; S.cooldownUntil = S.now + TUNE.dashMs + TUNE.dashCooldownMs; S.fx.push({ kind: "ring", x, y, t: S.now, ok: true }); S.shake = Math.max(S.shake, 5); beep(880, 0.12, "sawtooth", 0.035); buzz(15); S.last = "TAP ⚡ DASH"; } else { S.fx.push({ kind: "ring", x, y, t: S.now, ok: false }); S.last = "TAP (cooling)"; } setHud((h) => ({ ...h, last: S.last })); }; const onCancel = (e) => { if (e.pointerId === g.id) g.id = null; }; canvas.addEventListener("pointerdown", onDown); canvas.addEventListener("pointermove", onMove); canvas.addEventListener("pointerup", onUp); canvas.addEventListener("pointercancel", onCancel); window.addEventListener("resize", resize); resize(); // ── render ── const lerp = (a, b, t) => a + (b - a) * t; let raf = 0, lastT = performance.now(); const frame = (t) => { raf = requestAnimationFrame(frame); const dt = Math.min(1 / 30, (t - lastT) / 1000); lastT = t; const paused = pausedRef.current; if (!paused) S.now += dt * 1000; if (S.mode === "play" && !paused) { S.acc += dt * 1000; let guard = 0; while (S.acc >= stepMs() && S.mode === "play" && guard++ < 6) { S.acc -= stepMs(); tick(); } } const alpha = S.mode === "play" ? Math.min(1, S.acc / stepMs()) : 1; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.fillStyle = "#05030f"; ctx.fillRect(0, 0, W, H); S.shake *= Math.pow(0.002, dt); const sx = (Math.random() - 0.5) * S.shake, sy = (Math.random() - 0.5) * S.shake; ctx.save(); ctx.translate(sx, sy); // grid ctx.strokeStyle = "rgba(80,60,200,0.18)"; ctx.lineWidth = 1; ctx.beginPath(); for (let i = 0; i <= cols; i++) { ctx.moveTo(ox + i * cell + 0.5, oy); ctx.lineTo(ox + i * cell + 0.5, oy + rows * cell); } for (let j = 0; j <= rows; j++) { ctx.moveTo(ox, oy + j * cell + 0.5); ctx.lineTo(ox + cols * cell, oy + j * cell + 0.5); } ctx.stroke(); ctx.strokeStyle = "rgba(140,90,255,0.7)"; ctx.lineWidth = 2; ctx.shadowColor = "#8c5aff"; ctx.shadowBlur = 12; ctx.strokeRect(ox, oy, cols * cell, rows * cell); // food if (S.food) { const [fx, fy] = toPx(...S.food); const pulse = 1 + Math.sin(S.now / 140) * 0.15; ctx.fillStyle = "#ffe14d"; ctx.shadowColor = "#ffe14d"; ctx.shadowBlur = 20; ctx.beginPath(); ctx.arc(fx, fy, cell * 0.28 * pulse, 0, Math.PI * 2); ctx.fill(); } // snake (interpolated) const dashing = S.now < S.dashUntil; const unwrap = (q, p, n) => (Math.abs(p - q) > 1 ? q + Math.sign(p - q) * n : q); const gpts = S.body.map((p, i) => { const q = S.prev[i] || p; const qx = unwrap(q[0], p[0], cols), qy = unwrap(q[1], p[1], rows); return [lerp(qx, p[0], alpha), lerp(qy, p[1], alpha)]; }); // insert actual corner cells so the interpolated line bends on grid corners const gpath = []; for (let i = 0; i < gpts.length; i++) { gpath.push(gpts[i]); if (i < S.body.length - 1) gpath.push(S.body[i + 1]); } // one continuous (unwrapped) path, drawn once per board tile it touches and clipped to the // board: a segment crossing a portal shows on BOTH edges, so the wrap reads seamless const cont = []; for (const p of gpath) { const u = cont[cont.length - 1]; if (!u) cont.push([p[0], p[1]]); else cont.push([p[0] + Math.round((u[0] - p[0]) / cols) * cols, p[1] + Math.round((u[1] - p[1]) / rows) * rows]); } let mnx = Infinity, mxx = -Infinity, mny = Infinity, mxy = -Infinity; for (const [x, y] of cont) { mnx = Math.min(mnx, x); mxx = Math.max(mxx, x); mny = Math.min(mny, y); mxy = Math.max(mxy, y); } const tiles = []; for (let kx = Math.floor((mnx + 0.1) / cols); kx <= Math.floor((mxx + 0.9) / cols); kx++) for (let ky = Math.floor((mny + 0.1) / rows); ky <= Math.floor((mxy + 0.9) / rows); ky++) tiles.push([kx * cols * cell, ky * rows * cell]); S.tiles = tiles.length; // debug: >1 while a segment straddles a portal const path = cont.map((p) => toPx(p[0], p[1])); ctx.save(); ctx.beginPath(); ctx.rect(ox, oy, cols * cell, rows * cell); ctx.clip(); const col = S.mode === "over" ? "#ff2e88" : dashing ? "#ffffff" : "#22f3ff"; ctx.lineCap = "round"; ctx.lineJoin = "round"; const strokePath = (tx, ty) => { ctx.beginPath(); path.forEach(([x, y], i) => (i ? ctx.lineTo(x - tx, y - ty) : ctx.moveTo(x - tx, y - ty))); ctx.stroke(); }; ctx.shadowColor = dashing ? "#ff2e88" : "#22f3ff"; ctx.shadowBlur = dashing ? 30 : 18; ctx.strokeStyle = col; ctx.lineWidth = cell * 0.55; for (const [tx, ty] of tiles) strokePath(tx, ty); ctx.shadowBlur = 0; ctx.strokeStyle = "rgba(255,255,255,0.55)"; ctx.lineWidth = cell * 0.16; for (const [tx, ty] of tiles) strokePath(tx, ty); if (path[0]) { ctx.fillStyle = "#fff"; ctx.shadowColor = col; ctx.shadowBlur = 24; for (const [tx, ty] of tiles) { ctx.beginPath(); ctx.arc(path[0][0] - tx, path[0][1] - ty, cell * 0.34, 0, Math.PI * 2); ctx.fill(); } } ctx.restore(); ctx.shadowBlur = 0; // particles S.particles = S.particles.filter((p) => (p.life -= dt * 1.6) > 0); for (const p of S.particles) { p.x += p.vx * dt; p.y += p.vy * dt; p.vx *= 0.94; p.vy *= 0.94; ctx.globalAlpha = p.life; ctx.fillStyle = p.color; ctx.fillRect(p.x - 2, p.y - 2, 4, 4); } ctx.globalAlpha = 1; ctx.restore(); // finger trail const nowP = performance.now(); S.trail = S.trail.filter((p) => nowP - p.t < TUNE.trailMs); for (let i = 1; i < S.trail.length; i++) { const a = S.trail[i - 1], b = S.trail[i]; const k = 1 - (nowP - b.t) / TUNE.trailMs; ctx.strokeStyle = `rgba(255,255,255,${0.7 * k})`; ctx.lineWidth = 2 + 8 * k; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } // gesture verdict FX: arrow (swipe) vs pulse ring (tap) S.fx = S.fx.filter((f) => S.now - f.t < 500); for (const f of S.fx) { const k = (S.now - f.t) / 500; ctx.globalAlpha = 1 - k; if (f.kind === "ring") { ctx.strokeStyle = f.ok ? "#ff2e88" : "#666"; ctx.lineWidth = 4 * (1 - k) + 1; ctx.shadowColor = "#ff2e88"; ctx.shadowBlur = f.ok ? 20 : 0; ctx.beginPath(); ctx.arc(f.x, f.y, 12 + k * 60, 0, Math.PI * 2); ctx.stroke(); } else { const [dx, dy] = DIRS[f.dir]; const L = 34, x = f.x + dx * k * 20, y = f.y + dy * k * 20; ctx.strokeStyle = f.ok ? "#22f3ff" : "#555"; ctx.lineWidth = 5; ctx.shadowColor = "#22f3ff"; ctx.shadowBlur = f.ok ? 16 : 0; ctx.beginPath(); ctx.moveTo(x - dx * L / 2, y - dy * L / 2); ctx.lineTo(x + dx * L / 2, y + dy * L / 2); const hx = x + dx * L / 2, hy = y + dy * L / 2, px = -dy, py = dx; ctx.moveTo(hx - dx * 12 + px * 10, hy - dy * 12 + py * 10); ctx.lineTo(hx, hy); ctx.lineTo(hx - dx * 12 - px * 10, hy - dy * 12 - py * 10); ctx.stroke(); } ctx.shadowBlur = 0; } ctx.globalAlpha = 1; // dash cooldown meter (top row, just left of the ☰ button; bottom-right is the platform logo) const mw = 90, mx = W - 56 - mw, my = 14; // left of the ☰ button const ready = S.now >= S.cooldownUntil; const frac = ready ? 1 : dashing ? (S.dashUntil - S.now) / TUNE.dashMs : 1 - (S.cooldownUntil - S.now) / TUNE.dashCooldownMs; ctx.fillStyle = "rgba(255,255,255,0.12)"; ctx.fillRect(mx, my, mw, 8); ctx.fillStyle = dashing ? "#fff" : ready ? "#ff2e88" : "#7a3a5c"; if (ready) { ctx.shadowColor = "#ff2e88"; ctx.shadowBlur = 12; } ctx.fillRect(mx, my, mw * Math.max(0, Math.min(1, frac)), 8); ctx.shadowBlur = 0; ctx.fillStyle = "rgba(255,255,255,0.7)"; ctx.font = "10px ui-monospace, monospace"; ctx.fillText(dashing ? "DASH!" : ready ? "DASH READY" : "charging", mx, my + 22); }; raf = requestAnimationFrame(frame); return () => { cancelAnimationFrame(raf); canvas.removeEventListener("pointerdown", onDown); canvas.removeEventListener("pointermove", onMove); canvas.removeEventListener("pointerup", onUp); canvas.removeEventListener("pointercancel", onCancel); window.removeEventListener("resize", resize); try { audio?.close(); } catch (e) { /* noop */ } if (window.__snake === S) delete window.__snake; }; }, []); return (

e.preventDefault()} onPointerDownCapture={(e) => { if (!e.target.closest?.("[data-menu]")) setCoach(false); }} >

); } // ── first-run coach: a ghost thumb shows the gesture until the first touch ── // path rows: [x%, y%, scale, opacity, offset 0..1] — scale < 1 reads as "pressed" function GhostCoach({ show, path, caption, captionY = 60, ms = 2600 }) { const refs = [React.useRef(null), React.useRef(null), React.useRef(null)]; React.useEffect(() => { if (!show) return undefined; const frames = path.map(([x, y, sc, op, offset]) => ({ left: x + "%", top: y + "%", transform: `translate(-50%, -50%) scale(${sc})`, opacity: op, offset, })); const anims = refs.map((r, i) => r.current?.animate ? r.current.animate(frames, { duration: ms, iterations: Infinity, easing: "ease-in-out", delay: i * 70 }) : null ); return () => anims.forEach((a) => a?.cancel()); }, [show]); if (!show) return null; const start = { left: path[0][0] + "%", top: path[0][1] + "%", opacity: 0 }; return (

{caption}

); } // ── menu: the only chrome besides the quiet HUD. Top-right ☰ toggles a card; the game pauses while open. // Pointer events are handled NATIVELY on the button + card (stopPropagation) so a menu tap never reaches // the game's listeners; actions fire on pointerup rather than click, which a captured pointer can retarget. function GameMenu({ open, onToggle, title, howto, best, onRestart, tune, knobs }) { const btnRef = React.useRef(null); const cardRef = React.useRef(null); const actRef = React.useRef({}); actRef.current = { onToggle, onRestart }; const [, bump] = React.useState(0); React.useEffect(() => { const stop = (e) => e.stopPropagation(); const up = (e) => { e.stopPropagation(); const t = e.target; const act = t.closest?.("[data-act]")?.dataset.act; if (act === "toggle") actRef.current.onToggle(); else if (act === "restart") actRef.current.onRestart(); else if (t === cardRef.current) actRef.current.onToggle(); // tap outside the card closes }; const els = [btnRef.current, cardRef.current].filter(Boolean); els.forEach((el) => { ["pointerdown", "pointermove", "pointercancel"].forEach((ty) => el.addEventListener(ty, stop)); el.addEventListener("pointerup", up); }); return () => els.forEach((el) => { ["pointerdown", "pointermove", "pointercancel"].forEach((ty) => el.removeEventListener(ty, stop)); el.removeEventListener("pointerup", up); }); }, [open]); const key = (fn) => (e) => { if (e.detail === 0) fn(); // keyboard activation only; pointer taps are handled on pointerup }; return ( <> {open && (

{title}

{howto}

best {best}

feel

{knobs.map((k) => ( {k.label} {tune[k.key]} {k.unit || ""} { tune[k.key] = +e.target.value; bump((n) => n + 1); }} className="w-full accent-cyan-400" /> ))}

)} ); }