import React from "react"; // ─── TUNABLES ──────────────────────────────────────────────────────────────── // Distances are CSS px of finger travel; times are ms. Tweak these for feel. const TUNE = { deadZone: 8, // finger offset (px) below which the stick reads zero fullSpeedAt: 60, // finger offset (px) that gives 100% throttle leash: 74, // beyond this offset the ghost base drifts after the thumb curve: 1.35, // throttle response exponent (>1 = finer control near centre) maxSpeed: 340, // ship top speed, world px / s accelMs: 85, // time constant for velocity to chase stick (lower = snappier) coastMs: 520, // time constant for the coast-to-stop after release (momentum) turnMs: 60, // time constant for nose to swing toward travel direction fireMs: 105, // auto-fire interval spreadFireMs: 85, // auto-fire interval while spread pickup is active bulletSpeed: 820, // world px / s trailMs: 450, // finger-trail fade time (long enough to stay visible while the thumb rests) stickFadeMs: 170, // ghost stick fade-out after release camMs: 170, // camera follow time constant camLead: 0.32, // camera looks ahead of the ship by velocity * this (s) spawnStartMs: 1100, // enemy spawn interval at start spawnMinMs: 230, // fastest spawn interval spawnRampPerSec: 13, //ms shaved off the interval per second survived warnMs: 520, // spawn-warning flash before an enemy goes live spawnGraceMs: 150, // after the warning, an enemy materializes this long: it can't hit you or be hit dropChance: 0.11, // chance a kill drops a pickup powerMs: 7000, // spread / shield duration worldW: 1000, worldH: 1500, }; const COL = { bg: "#05010f", grid: "#2a0f5c", wall: "#7b2cff", ship: "#00f0ff", bullet: "#d9fbff", seeker: "#ff2bd6", grunt: "#ff9d00", dart: "#39ff88", spread: "#ffe600", shield: "#3d8bff", nova: "#ffffff", stick: "#00f0ff", }; const rand = (a, b) => a + Math.random() * (b - a); const clamp = (v, a, b) => (v < a ? a : v > b ? b : v); const ease = (dt, ms) => 1 - Math.exp((-dt * 1000) / ms); function makeGame() { return { mode: "attract", // attract | play | over ship: { x: TUNE.worldW / 2, y: TUNE.worldH / 2, vx: 0, vy: 0, ang: -Math.PI / 2, alive: true }, cam: { x: TUNE.worldW / 2, y: TUNE.worldH / 2 }, bullets: [], enemies: [], parts: [], pickups: [], rings: [], score: 0, kills: 0, streak: 0, t: 0, fireT: 0, spawnT: 0.6, spread: 0, shield: 0, shake: 0, slowmo: 0, overT: 0, }; } export default function App() { const wrapRef = React.useRef(null); const canvasRef = React.useRef(null); const hudRef = React.useRef(null); const msgRef = React.useRef(null); const [coach, setCoach] = React.useState(true); const [menu, setMenu] = React.useState(false); const [bestUi, setBestUi] = React.useState(0); const pausedRef = React.useRef(false); pausedRef.current = menu; const apiRef = React.useRef({}); React.useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); let W = 0, H = 0, dpr = 1; let raf = 0; let last = performance.now(); let g = makeGame(); let best = 0; apiRef.current.restart = () => { g = makeGame(); // back to attract: the next touch flies stick.id = null; stick.active = false; }; let audio = null; // input state (screen CSS px) const stick = { id: null, active: false, bx: 0, by: 0, px: 0, py: 0, ix: 0, // normalized output vector, magnitude 0..1 iy: 0, releasedAt: -1e9, trail: [], }; const resize = () => { const r = wrap.getBoundingClientRect(); W = Math.max(1, r.width); H = Math.max(1, r.height); dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); }; resize(); const ro = new ResizeObserver(resize); ro.observe(wrap); // ── sound (only after first gesture) ── const beep = (freq, dur = 0.06, type = "square", vol = 0.04, slide = 0) => { if (!audio) return; const t = audio.currentTime; const o = audio.createOscillator(); const gn = audio.createGain(); o.type = type; o.frequency.setValueAtTime(freq, t); if (slide) o.frequency.exponentialRampToValueAtTime(Math.max(30, freq * slide), t + dur); gn.gain.setValueAtTime(vol, t); gn.gain.exponentialRampToValueAtTime(0.0001, t + dur); o.connect(gn).connect(audio.destination); o.start(t); o.stop(t + dur + 0.02); }; const buzz = (ms) => { try { navigator.vibrate?.(ms); } catch (e) { /* ignore */ } }; // ── stick math ── const updateStick = (x, y) => { stick.px = x; stick.py = y; let dx = x - stick.bx, dy = y - stick.by; let d = Math.hypot(dx, dy); if (d > TUNE.leash) { // base drifts to follow the thumb so you never run out of stick const k = (d - TUNE.leash) / d; stick.bx += dx * k; stick.by += dy * k; dx = x - stick.bx; dy = y - stick.by; d = TUNE.leash; } if (d < TUNE.deadZone) { stick.ix = 0; stick.iy = 0; } else { const lin = clamp((d - TUNE.deadZone) / (TUNE.fullSpeedAt - TUNE.deadZone), 0, 1); const m = Math.pow(lin, TUNE.curve); stick.ix = (dx / d) * m; stick.iy = (dy / d) * m; } const now = performance.now(); stick.trail.push({ x, y, t: now }); if (stick.trail.length > 60) stick.trail.shift(); }; const local = (e) => { const r = canvas.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; }; const onDown = (e) => { e.preventDefault(); if (stick.id !== null) return; if (!audio) { try { const AC = window.AudioContext || window.webkitAudioContext; if (AC) audio = new AC(); } catch (err) { audio = null; } } else if (audio.state === "suspended") audio.resume(); if (g.mode === "over") { if (g.overT < 0.55) return; g = makeGame(); } if (g.mode === "attract") { g.mode = "play"; beep(220, 0.18, "sawtooth", 0.05, 3); } stick.id = e.pointerId; try { canvas.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ } const [x, y] = local(e); stick.active = true; stick.bx = x; stick.by = y; stick.trail = []; updateStick(x, y); buzz(10); }; const onMove = (e) => { if (e.pointerId !== stick.id) return; e.preventDefault(); const [x, y] = local(e); updateStick(x, y); }; const onUp = (e) => { if (e.pointerId !== stick.id) return; stick.id = null; stick.active = false; stick.ix = 0; stick.iy = 0; stick.releasedAt = performance.now(); try { canvas.releasePointerCapture(e.pointerId); } catch (err) { /* ignore */ } }; canvas.addEventListener("pointerdown", onDown); canvas.addEventListener("pointermove", onMove); canvas.addEventListener("pointerup", onUp); canvas.addEventListener("pointercancel", onUp); canvas.addEventListener("lostpointercapture", onUp); // ── game helpers ── const burst = (x, y, color, n, speed = 260, life = 0.6, size = 2.2) => { for (let i = 0; i < n; i++) { const a = Math.random() * Math.PI * 2; const s = rand(0.2, 1) * speed; g.parts.push({ x, y, vx: Math.cos(a) * s, vy: Math.sin(a) * s, life, max: life, color, size: rand(0.6, 1.4) * size }); } if (g.parts.length > 900) g.parts.splice(0, g.parts.length - 900); }; const spawnEnemy = () => { const s = g.ship; let x, y; for (let k = 0; k < 12; k++) { x = rand(40, TUNE.worldW - 40); y = rand(40, TUNE.worldH - 40); if (Math.hypot(x - s.x, y - s.y) > 360) break; } const r = Math.random(); const lvl = g.t; let kind = "seeker"; if (lvl > 12 && r < 0.22) kind = "grunt"; else if (lvl > 6 && r < 0.45) kind = "dart"; const e = { kind, x, y, vx: 0, vy: 0, warn: TUNE.warnMs / 1000, rot: rand(0, 6.28), hit: 0 }; if (kind === "seeker") Object.assign(e, { hp: 1, r: 13, sp: rand(105, 145) + lvl * 1.2, pts: 50 }); if (kind === "grunt") Object.assign(e, { hp: 4, r: 19, sp: rand(60, 80), pts: 150 }); if (kind === "dart") { Object.assign(e, { hp: 1, r: 11, sp: rand(250, 300), pts: 80 }); } g.enemies.push(e); }; const killEnemy = (e) => { const col = COL[e.kind]; burst(e.x, e.y, col, e.kind === "grunt" ? 46 : 26, e.kind === "grunt" ? 360 : 280); g.rings.push({ x: e.x, y: e.y, r: e.r, life: 0.35, max: 0.35, color: col }); g.streak++; g.kills++; const mult = 1 + Math.floor(g.streak / 12); g.score += e.pts * mult; g.shake = Math.min(14, g.shake + (e.kind === "grunt" ? 7 : 3)); beep(rand(500, 760), 0.07, "square", 0.03, 0.4); buzz(e.kind === "grunt" ? 18 : 6); if (Math.random() < TUNE.dropChance) { const kinds = ["spread", "shield", "nova"]; const kind = kinds[Math.floor(Math.random() * (g.t > 20 ? 3 : 2))]; g.pickups.push({ kind, x: e.x, y: e.y, life: 9, bob: rand(0, 6) }); } }; const nova = () => { const s = g.ship; g.rings.push({ x: s.x, y: s.y, r: 10, life: 0.6, max: 0.6, color: COL.nova, grow: 1400 }); for (const e of g.enemies) { if (e.warn <= 0 && Math.hypot(e.x - s.x, e.y - s.y) < 520) { e.hp = 0; } } g.shake = 22; beep(90, 0.5, "sawtooth", 0.08, 0.3); buzz(40); }; const die = () => { const s = g.ship; s.alive = false; g.mode = "over"; g.overT = 0; if (g.score > best) setBestUi((best = g.score)); g.slowmo = 0.9; g.shake = 28; burst(s.x, s.y, COL.ship, 120, 520, 1.2, 3); burst(s.x, s.y, "#ffffff", 50, 300, 0.9, 2); g.rings.push({ x: s.x, y: s.y, r: 12, life: 0.8, max: 0.8, color: COL.ship, grow: 700 }); beep(140, 0.6, "sawtooth", 0.09, 0.2); buzz([40, 30, 60]); }; // ── update ── const update = (dt) => { const s = g.ship; if (g.mode === "over") g.overT += dt; if (g.slowmo > 0) { g.slowmo -= dt; dt *= 0.3; } if (g.mode === "play") g.t += dt; // ship physics: velocity eases toward stick target; coasts on release if (s.alive) { const tx = stick.ix * TUNE.maxSpeed; const ty = stick.iy * TUNE.maxSpeed; const steering = stick.active && (stick.ix || stick.iy); const k = ease(dt, steering ? TUNE.accelMs : TUNE.coastMs); s.vx += (tx - s.vx) * k; s.vy += (ty - s.vy) * k; s.x += s.vx * dt; s.y += s.vy * dt; if (s.x < 16) (s.x = 16), (s.vx = Math.abs(s.vx) * 0.4); if (s.x > TUNE.worldW - 16) (s.x = TUNE.worldW - 16), (s.vx = -Math.abs(s.vx) * 0.4); if (s.y < 16) (s.y = 16), (s.vy = Math.abs(s.vy) * 0.4); if (s.y > TUNE.worldH - 16) (s.y = TUNE.worldH - 16), (s.vy = -Math.abs(s.vy) * 0.4); // nose follows stick direction while steering, else travel direction let want = null; if (steering) want = Math.atan2(stick.iy, stick.ix); else if (Math.hypot(s.vx, s.vy) > 40) want = Math.atan2(s.vy, s.vx); if (want !== null) { let da = want - s.ang; da = Math.atan2(Math.sin(da), Math.cos(da)); s.ang += da * ease(dt, TUNE.turnMs); } // engine exhaust const spd = Math.hypot(s.vx, s.vy); if (spd > 60 && Math.random() < 0.9) { const bx = s.x - Math.cos(s.ang) * 12, by = s.y - Math.sin(s.ang) * 12; g.parts.push({ x: bx, y: by, vx: -Math.cos(s.ang) * rand(60, 140) + rand(-30, 30), vy: -Math.sin(s.ang) * rand(60, 140) + rand(-30, 30), life: 0.28, max: 0.28, color: spd > 250 ? "#ff2bd6" : COL.ship, size: 2, }); } } // auto-fire if (g.mode === "play" && s.alive) { g.fireT -= dt; if (g.fireT <= 0) { g.fireT = (g.spread > 0 ? TUNE.spreadFireMs : TUNE.fireMs) / 1000; const angs = g.spread > 0 ? [-0.2, -0.07, 0.07, 0.2] : [0]; for (const off of angs) { const a = s.ang + off + rand(-0.025, 0.025); g.bullets.push({ x: s.x + Math.cos(s.ang) * 16, y: s.y + Math.sin(s.ang) * 16, vx: Math.cos(a) * TUNE.bulletSpeed + s.vx * 0.5, vy: Math.sin(a) * TUNE.bulletSpeed + s.vy * 0.5, life: 0.9, }); } } g.spread = Math.max(0, g.spread - dt); g.shield = Math.max(0, g.shield - dt); g.spawnT -= dt; if (g.spawnT <= 0) { const ms = Math.max(TUNE.spawnMinMs, TUNE.spawnStartMs - g.t * TUNE.spawnRampPerSec); g.spawnT = ms / 1000; spawnEnemy(); if (g.t > 25 && Math.random() < 0.3) spawnEnemy(); } } // bullets for (const b of g.bullets) { b.x += b.vx * dt; b.y += b.vy * dt; b.life -= dt; if (b.x < 0 || b.y < 0 || b.x > TUNE.worldW || b.y > TUNE.worldH) { if (b.life > 0) burst(clamp(b.x, 0, TUNE.worldW), clamp(b.y, 0, TUNE.worldH), COL.wall, 3, 120, 0.25, 1.5); b.life = 0; } } // enemies for (const e of g.enemies) { if (e.warn > 0) { e.warn -= dt; if (e.warn <= 0) e.grace = TUNE.spawnGraceMs / 1000; if (e.warn <= 0 && e.kind === "dart") { const a = Math.atan2(s.y - e.y, s.x - e.x); e.vx = Math.cos(a) * e.sp; e.vy = Math.sin(a) * e.sp; } continue; } e.rot += dt * (e.kind === "grunt" ? 1.5 : 4); e.hit = Math.max(0, e.hit - dt); e.grace = Math.max(0, (e.grace || 0) - dt); if (e.kind === "dart") { if (e.x < e.r || e.x > TUNE.worldW - e.r) e.vx *= -1; if (e.y < e.r || e.y > TUNE.worldH - e.r) e.vy *= -1; e.x = clamp(e.x, e.r, TUNE.worldW - e.r); e.y = clamp(e.y, e.r, TUNE.worldH - e.r); } else if (s.alive) { const a = Math.atan2(s.y - e.y, s.x - e.x); const wob = e.kind === "seeker" ? Math.sin(g.t * 5 + e.rot) * 0.5 : 0; const k = ease(dt, e.kind === "seeker" ? 260 : 500); e.vx += (Math.cos(a + wob) * e.sp - e.vx) * k; e.vy += (Math.sin(a + wob) * e.sp - e.vy) * k; } else { e.vx *= 0.97; e.vy *= 0.97; } e.x += e.vx * dt; e.y += e.vy * dt; for (const b of g.bullets) { if (b.life <= 0 || e.grace > 0) continue; if (Math.hypot(b.x - e.x, b.y - e.y) < e.r + 4) { b.life = 0; e.hp--; e.hit = 0.08; e.vx += b.vx * 0.06; e.vy += b.vy * 0.06; burst(b.x, b.y, "#ffffff", 3, 160, 0.2, 1.4); if (e.hp <= 0) break; } } if (s.alive && e.hp > 0 && !(e.grace > 0) && Math.hypot(s.x - e.x, s.y - e.y) < e.r + 10) { if (g.shield > 0) { e.hp = 0; g.shake += 6; } else die(); } } for (const e of g.enemies) if (e.hp <= 0 && !e.dead) (e.dead = true), killEnemy(e); g.enemies = g.enemies.filter((e) => !e.dead); g.bullets = g.bullets.filter((b) => b.life > 0); // pickups for (const p of g.pickups) { p.life -= dt; p.bob += dt * 4; if (s.alive && Math.hypot(p.x - s.x, p.y - s.y) < 26) { p.life = 0; g.rings.push({ x: p.x, y: p.y, r: 10, life: 0.4, max: 0.4, color: COL[p.kind], grow: 260 }); beep(880, 0.12, "triangle", 0.06, 2); buzz(15); if (p.kind === "spread") g.spread = TUNE.powerMs / 1000; if (p.kind === "shield") g.shield = TUNE.powerMs / 1000; if (p.kind === "nova") nova(); } } g.pickups = g.pickups.filter((p) => p.life > 0); for (const p of g.parts) { p.x += p.vx * dt; p.y += p.vy * dt; p.vx *= 1 - 2.2 * dt; p.vy *= 1 - 2.2 * dt; p.life -= dt; } g.parts = g.parts.filter((p) => p.life > 0); for (const r of g.rings) { r.life -= dt; r.r += (r.grow || 180) * dt; } g.rings = g.rings.filter((r) => r.life > 0); // camera: follow with look-ahead, clamp to world (centre if world smaller) const tx = s.x + s.vx * TUNE.camLead; const ty = s.y + s.vy * TUNE.camLead; const ck = ease(dt, TUNE.camMs); g.cam.x += (tx - g.cam.x) * ck; g.cam.y += (ty - g.cam.y) * ck; const mx = W / 2 - 60, my = H / 2 - 60; g.cam.x = TUNE.worldW < W ? TUNE.worldW / 2 : clamp(g.cam.x, mx, TUNE.worldW - mx); g.cam.y = TUNE.worldH < H ? TUNE.worldH / 2 : clamp(g.cam.y, my, TUNE.worldH - my); g.shake *= Math.pow(0.0025, dt); }; // ── draw ── let neonA = 1; // alpha multiplier for neonStroke (spawn-grace fade-in) const neonStroke = (color, width) => { ctx.strokeStyle = color; ctx.globalAlpha = 0.25 * neonA; ctx.lineWidth = width * 3.2; ctx.stroke(); ctx.globalAlpha = neonA; ctx.lineWidth = width; ctx.stroke(); }; const draw = (now) => { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = COL.bg; ctx.fillRect(0, 0, W, H); const shk = pausedRef.current ? 0 : g.shake; // no jitter on a paused frame const sx = (Math.random() - 0.5) * shk; const sy = (Math.random() - 0.5) * shk; const ox = W / 2 - g.cam.x + sx; const oy = H / 2 - g.cam.y + sy; ctx.save(); ctx.translate(ox, oy); // grid const step = 50; const x0 = Math.max(0, Math.floor((g.cam.x - W / 2) / step) * step); const x1 = Math.min(TUNE.worldW, g.cam.x + W / 2 + step); const y0 = Math.max(0, Math.floor((g.cam.y - H / 2) / step) * step); const y1 = Math.min(TUNE.worldH, g.cam.y + H / 2 + step); ctx.lineWidth = 1; ctx.strokeStyle = COL.grid; ctx.globalAlpha = 0.7; ctx.beginPath(); for (let x = x0; x <= x1; x += step) { ctx.moveTo(x, y0); ctx.lineTo(x, y1); } for (let y = y0; y <= y1; y += step) { ctx.moveTo(x0, y); ctx.lineTo(x1, y); } ctx.stroke(); ctx.globalAlpha = 1; ctx.globalCompositeOperation = "lighter"; // arena wall ctx.beginPath(); ctx.rect(2, 2, TUNE.worldW - 4, TUNE.worldH - 4); neonStroke(COL.wall, 2.5); // pickups for (const p of g.pickups) { if (p.life < 2 && Math.floor(p.life * 10) % 2) continue; const r = 11 + Math.sin(p.bob) * 2; ctx.beginPath(); ctx.arc(p.x, p.y, r, 0, Math.PI * 2); neonStroke(COL[p.kind], 2); ctx.fillStyle = COL[p.kind]; ctx.font = "bold 11px ui-monospace, monospace"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(p.kind === "spread" ? "W" : p.kind === "shield" ? "S" : "N", p.x, p.y + 0.5); } // enemies for (const e of g.enemies) { const col = e.hit > 0 ? "#ffffff" : COL[e.kind]; if (e.warn > 0) { const k = e.warn / (TUNE.warnMs / 1000); ctx.beginPath(); ctx.arc(e.x, e.y, e.r + k * 26, 0, Math.PI * 2); ctx.globalAlpha = 0.4 + 0.4 * Math.sin(now / 40); ctx.strokeStyle = COL[e.kind]; ctx.lineWidth = 1.5; ctx.stroke(); ctx.globalAlpha = 1; continue; } ctx.save(); neonA = e.grace > 0 ? 0.3 + 0.7 * (1 - e.grace / (TUNE.spawnGraceMs / 1000)) : 1; // materializing ctx.translate(e.x, e.y); ctx.rotate(e.kind === "dart" ? Math.atan2(e.vy, e.vx) : e.rot); ctx.beginPath(); if (e.kind === "seeker") { ctx.moveTo(e.r, 0); ctx.lineTo(0, e.r * 0.7); ctx.lineTo(-e.r, 0); ctx.lineTo(0, -e.r * 0.7); ctx.closePath(); } else if (e.kind === "grunt") { ctx.rect(-e.r * 0.75, -e.r * 0.75, e.r * 1.5, e.r * 1.5); ctx.moveTo(-e.r * 0.75, -e.r * 0.75); ctx.lineTo(e.r * 0.75, e.r * 0.75); ctx.moveTo(e.r * 0.75, -e.r * 0.75); ctx.lineTo(-e.r * 0.75, e.r * 0.75); } else { ctx.moveTo(e.r * 1.2, 0); ctx.lineTo(-e.r, e.r * 0.7); ctx.lineTo(-e.r * 0.5, 0); ctx.lineTo(-e.r, -e.r * 0.7); ctx.closePath(); } neonStroke(col, 2); neonA = 1; ctx.restore(); } // bullets ctx.lineCap = "round"; for (const b of g.bullets) { ctx.beginPath(); ctx.moveTo(b.x, b.y); ctx.lineTo(b.x - b.vx * 0.018, b.y - b.vy * 0.018); neonStroke(g.spread > 0 ? COL.spread : COL.bullet, 2); } // particles for (const p of g.parts) { const a = p.life / p.max; ctx.globalAlpha = a; ctx.fillStyle = p.color; const sz = p.size * (0.5 + a); ctx.fillRect(p.x - sz / 2, p.y - sz / 2, sz, sz); } ctx.globalAlpha = 1; for (const r of g.rings) { ctx.beginPath(); ctx.arc(r.x, r.y, r.r, 0, Math.PI * 2); ctx.globalAlpha = r.life / r.max; ctx.strokeStyle = r.color; ctx.lineWidth = 3; ctx.stroke(); } ctx.globalAlpha = 1; // ship const s = g.ship; if (s.alive) { ctx.save(); ctx.translate(s.x, s.y); ctx.rotate(s.ang); ctx.beginPath(); ctx.moveTo(16, 0); ctx.lineTo(-10, 11); ctx.lineTo(-5, 0); ctx.lineTo(-10, -11); ctx.closePath(); neonStroke(COL.ship, 2.4); ctx.restore(); if (g.shield > 0) { if (g.shield > 1.5 || Math.floor(now / 90) % 2) { ctx.beginPath(); ctx.arc(s.x, s.y, 24 + Math.sin(now / 80) * 1.5, 0, Math.PI * 2); neonStroke(COL.shield, 1.6); } } } ctx.restore(); // off-screen enemy indicators for (const e of g.enemies) { if (e.warn > 0) continue; const ex = e.x + ox, ey = e.y + oy; if (ex > -5 && ex < W + 5 && ey > -5 && ey < H + 5) continue; const ix = clamp(ex, 8, W - 8), iy = clamp(ey, 8, H - 8); const a = Math.atan2(ey - iy, ex - ix); ctx.save(); ctx.translate(ix, iy); ctx.rotate(a); ctx.beginPath(); ctx.moveTo(6, 0); ctx.lineTo(-4, 5); ctx.lineTo(-4, -5); ctx.closePath(); ctx.fillStyle = COL[e.kind]; ctx.globalAlpha = 0.7; ctx.fill(); ctx.restore(); } ctx.globalAlpha = 1; // ── finger trail (screen space) ── const tr = stick.trail; while (tr.length && now - tr[0].t > TUNE.trailMs) tr.shift(); for (let i = 1; i < tr.length; i++) { const a = 1 - (now - tr[i].t) / TUNE.trailMs; ctx.beginPath(); ctx.moveTo(tr[i - 1].x, tr[i - 1].y); ctx.lineTo(tr[i].x, tr[i].y); ctx.strokeStyle = "#ff2bd6"; ctx.globalAlpha = a * 0.75; ctx.lineWidth = 2 + a * 5; ctx.lineCap = "round"; ctx.stroke(); } ctx.globalAlpha = 1; // ── ghost stick ── const fade = stick.active ? 1 : 1 - (now - stick.releasedAt) / TUNE.stickFadeMs; if (fade > 0) { const { bx, by } = stick; const mag = Math.hypot(stick.ix, stick.iy); ctx.globalAlpha = 0.16 * fade; ctx.fillStyle = COL.stick; ctx.beginPath(); ctx.arc(bx, by, TUNE.leash, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 0.5 * fade; ctx.strokeStyle = COL.stick; ctx.lineWidth = 1.5; ctx.stroke(); // full-speed ring + dead zone ctx.globalAlpha = 0.28 * fade; ctx.setLineDash([4, 5]); ctx.beginPath(); ctx.arc(bx, by, TUNE.fullSpeedAt, 0, Math.PI * 2); ctx.stroke(); ctx.setLineDash([]); ctx.beginPath(); ctx.arc(bx, by, TUNE.deadZone, 0, Math.PI * 2); ctx.stroke(); // throttle arc if (mag > 0) { const a = Math.atan2(stick.iy, stick.ix); ctx.globalAlpha = 0.9 * fade; ctx.strokeStyle = mag > 0.98 ? "#ff2bd6" : COL.stick; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(bx, by, TUNE.leash + 6, a - mag * 0.9, a + mag * 0.9); ctx.stroke(); // direction chevron ctx.save(); ctx.translate(bx + Math.cos(a) * (TUNE.leash + 18), by + Math.sin(a) * (TUNE.leash + 18)); ctx.rotate(a); ctx.beginPath(); ctx.moveTo(7, 0); ctx.lineTo(-5, 7); ctx.lineTo(-5, -7); ctx.closePath(); ctx.fillStyle = ctx.strokeStyle; ctx.fill(); ctx.restore(); } // knob let kx = stick.px - bx, ky = stick.py - by; const kd = Math.hypot(kx, ky); if (kd > TUNE.leash) (kx *= TUNE.leash / kd), (ky *= TUNE.leash / kd); const kcx = bx + kx, kcy = by + ky; // knob: additive glow halo + bright rim, so a resting thumb still reads clearly ctx.globalCompositeOperation = "lighter"; const halo = ctx.createRadialGradient(kcx, kcy, 6, kcx, kcy, 46); halo.addColorStop(0, "rgba(0,240,255,0.55)"); halo.addColorStop(0.45, "rgba(0,240,255,0.18)"); halo.addColorStop(1, "rgba(0,240,255,0)"); ctx.globalAlpha = fade; ctx.fillStyle = halo; ctx.beginPath(); ctx.arc(kcx, kcy, 46, 0, Math.PI * 2); ctx.fill(); ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = COL.stick; ctx.beginPath(); ctx.arc(kcx, kcy, 20, 0, Math.PI * 2); ctx.globalAlpha = 0.5 * fade; ctx.fill(); ctx.globalAlpha = fade; ctx.strokeStyle = "#bffcff"; ctx.shadowColor = COL.stick; ctx.shadowBlur = 18; ctx.lineWidth = 2.5; ctx.stroke(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; } ctx.globalCompositeOperation = "source-over"; }; let hudCache = ""; let msgCache = ""; const hud = () => { const mult = 1 + Math.floor(g.streak / 12); const pow = (g.spread > 0 ? " · WIDE" : "") + (g.shield > 0 ? " · SHIELD" : ""); const h = `${g.score.toLocaleString()} ×${mult}${pow}`; if (h !== hudCache && hudRef.current) hudRef.current.textContent = hudCache = h; let m = "drag anywhere to steer · it fires for you"; if (g.mode === "attract") m = "touch anywhere & drag to fly"; else if (g.mode === "over") m = `game over at ${g.score.toLocaleString()}` + (g.overT > 0.55 ? " · tap to fly again" : ""); if (m !== msgCache && msgRef.current) { msgRef.current.textContent = msgCache = m; msgRef.current.className = g.mode === "over" ? "text-fuchsia-300" : "opacity-70"; } }; const frame = (now) => { const dt = Math.min((now - last) / 1000, 1 / 30); last = now; if (!pausedRef.current) update(dt); // menu open: freeze the arena draw(now); hud(); raf = requestAnimationFrame(frame); }; raf = requestAnimationFrame(frame); // test/debug hook (read-only peek at state) window.__thumbStick = () => ({ mode: g.mode, x: Math.round(g.ship.x), y: Math.round(g.ship.y), vx: Math.round(g.ship.vx), vy: Math.round(g.ship.vy), score: g.score, enemies: g.enemies.length, materializing: g.enemies.filter((e) => e.grace > 0).length, stick: { active: stick.active, ix: +stick.ix.toFixed(2), iy: +stick.iy.toFixed(2), bx: Math.round(stick.bx), by: Math.round(stick.by) }, }); return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener("pointerdown", onDown); canvas.removeEventListener("pointermove", onMove); canvas.removeEventListener("pointerup", onUp); canvas.removeEventListener("pointercancel", onUp); canvas.removeEventListener("lostpointercapture", onUp); delete window.__thumbStick; if (audio) audio.close?.(); }; }, []); 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" /> ))}

)} ); }