);
};
// ------------------------------------------------------------
// DemoTour — a mini looping animation of the gameplay loop. Replaces
// the four static rule cards. Three phases on a single ~10s cycle:
// 1. memorize — walls + diamonds are visible
// 2. plan — walls hide, the path draws bottom-to-top
// 3. execute — walls reveal, runner dot traces the path,
// collects diamonds, and breaches the top row
// Reuses the in-game .cell / .wall / .star / .ghost / .start-mark
// classes so the demo reads as a faithful preview of the real game.
// ------------------------------------------------------------
const DEMO_BOARD = [
[0,0,0,0,0],
[0,0,0,3,0], // diamond on row 1
[1,0,0,0,1], // walls flank row 2
[0,0,3,0,0], // diamond mid-board
[0,0,1,0,0], // wall blocks middle column
[1,0,0,0,0], // wall in start row neighbourhood
[0,0,0,0,0],
];
const DEMO_PATH = [
{x:1,y:6},{x:1,y:5},{x:1,y:4},{x:1,y:3},{x:2,y:3},
{x:2,y:2},{x:2,y:1},{x:3,y:1},{x:3,y:0},
];
// `dur` is the total time the phase occupies in the loop; `hold` is the
// trailing window where the within-phase animation has already finished and
// the frame is held still before transitioning. localT below saturates at 1
// during that hold, so consumers (planRevealCount, runnerIdx) naturally rest
// at their end-state without each needing its own pause logic.
const DEMO_PHASES = [
{ key: 'memorize', dur: 4000, hold: 1, caption: 'Memorize the red bricks — They disappear' },
{ key: 'plan', dur: 4000, hold: 1000, caption: 'The maze fades to empty — plot a path up, dodge bricks, grab diamonds' },
{ key: 'execute', dur: 4000, hold: 1000, caption: 'Run your path — Don\'t crash!' },
{ key: 'won', dur: 4000, hold: 200, caption: 'You made it — here\'s how it scored' },
];
const DEMO_TOTAL = DEMO_PHASES.reduce((s, p) => s + p.dur, 0);
// Sample run points for the won-phase breakdown. Mirrors the live scoring
// rules in app.jsx (`executeRun` → +50 breach, +25/star, −3/move, −20/back),
// so changing the demo path or board recomputes the totals automatically.
const DEMO_MOVES = DEMO_PATH.length - 1;
const DEMO_STARS = DEMO_PATH.filter(p => DEMO_BOARD[p.y][p.x] === 3).length;
const DEMO_BREACH_PTS = 50;
const DEMO_STAR_PTS = DEMO_STARS * 25;
const DEMO_MOVE_PEN = DEMO_MOVES * 3;
const DEMO_TOTAL_PTS = Math.max(0, DEMO_BREACH_PTS + DEMO_STAR_PTS - DEMO_MOVE_PEN);
const DemoTour = () => {
const reduced = typeof window !== 'undefined' &&
window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
const [elapsed, setElapsed] = useState(0);
// pin.idx == null → auto-loop; otherwise we hold on that phase. `key` bumps
// every click so re-clicking the same pip replays the phase from t=0.
const [pin, setPin] = useState({ idx: null, key: 0 });
const stateRef = useRef({ autoStart: 0, pinned: null, pinStart: 0 });
// Mirror pin → ref so the long-lived rAF loop sees the latest pin without
// having to be torn down and rebuilt on every click.
useEffect(() => {
stateRef.current.pinned = pin.idx;
stateRef.current.pinStart = performance.now();
}, [pin.key]);
// rAF loop drives the whole demo from a single elapsed counter so phase
// transitions and intra-phase progress (path drawing, runner steps) stay
// in lockstep without overlapping timeouts. When pinned, `elapsed` is
// clamped to the pinned phase so the within-phase animation plays once
// and rests at its final state.
useEffect(() => {
if (reduced) return;
stateRef.current.autoStart = performance.now();
let raf;
const tick = (now) => {
const s = stateRef.current;
let e;
if (s.pinned != null) {
let phaseStart = 0;
for (let i = 0; i < s.pinned; i++) phaseStart += DEMO_PHASES[i].dur;
// Clamp to dur-1 (not dur) so we stay strictly within the pinned
// phase. The phase resolver uses `elapsed < phaseStart + dur`, so
// hitting `dur` exactly would tip us into the next phase at t=0.
const local = Math.min(now - s.pinStart, DEMO_PHASES[s.pinned].dur - 1);
e = phaseStart + local;
} else {
e = (now - s.autoStart) % DEMO_TOTAL;
}
setElapsed(e);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [reduced]);
let phaseIdx = 0, phaseStart = 0;
for (let i = 0; i < DEMO_PHASES.length; i++) {
if (elapsed < phaseStart + DEMO_PHASES[i].dur) { phaseIdx = i; break; }
phaseStart += DEMO_PHASES[i].dur;
}
const phase = DEMO_PHASES[phaseIdx];
const animDur = Math.max(1, phase.dur - (phase.hold || 0));
const localT = Math.min(1, (elapsed - phaseStart) / animDur);
const showWalls = phase.key === 'memorize' || phase.key === 'execute' || phase.key === 'won';
// Pad the divisor so the last cell finishes ~85% through the plan phase
// and rests for a beat before walls reveal.
const planRevealCount = phase.key === 'plan'
? Math.min(DEMO_PATH.length, Math.floor(localT * (DEMO_PATH.length + 1)))
: (phase.key === 'execute' || phase.key === 'won' ? DEMO_PATH.length : 0);
const runnerIdx = phase.key === 'execute'
? Math.min(DEMO_PATH.length - 1, Math.floor(localT * DEMO_PATH.length))
: phase.key === 'won' ? DEMO_PATH.length - 1 : -1;
// Trail catch-up: cells light up the moment the runner-dot's CSS transition
// completes (i.e. the dot has visually landed). animDur/DEMO_PATH.length is
// the per-cell window; 280ms matches the .demo-runner CSS transition. Same
// model as the real game's `setRunStep(i + 1)` post-arrival.
const cellProgress = phase.key === 'execute' ? localT * DEMO_PATH.length : 0;
const transitionRatio = 280 / (animDur / DEMO_PATH.length);
const ghostUpTo = phase.key === 'execute'
? Math.floor(cellProgress - transitionRatio)
: -1;
const collectedStars = new Set();
if (runnerIdx >= 0) {
for (let i = 0; i <= runnerIdx; i++) {
const c = DEMO_PATH[i];
if (DEMO_BOARD[c.y][c.x] === 3) collectedStars.add(`${c.x},${c.y}`);
}
}
const lastCell = DEMO_PATH[DEMO_PATH.length - 1];
const won = phase.key === 'won' ||
(phase.key === 'execute' && runnerIdx === DEMO_PATH.length - 1);
const runnerCell = runnerIdx >= 0 ? DEMO_PATH[runnerIdx] : null;
// Each of the 4 phases now has its own pip — direct mapping, no collapse.
const pipIdx = phaseIdx;
// Tapping the board acts as a "next" link — advance one phase from
// wherever we are (whether auto-playing or already pinned). Wraps from
// the last phase back to memorize so the user can re-walk the loop manually.
const advance = () => {
const next = (phaseIdx + 1) % DEMO_PHASES.length;
setPin(p => ({ idx: next, key: p.key + 1 }));
};
return (
How to play
{phase.key === 'won' ? (
// Won phase replaces the board entirely with a sample score tally.
// Same advance() click handler so tapping the card still cycles to
// the next phase (memorize) like the board does on other phases.
+{DEMO_BREACH_PTS}breach
+{DEMO_STAR_PTS}diamonds ×{DEMO_STARS}
−{DEMO_MOVE_PEN}moves ×{DEMO_MOVES}
+{DEMO_TOTAL_PTS}total
) : (
{Array.from({length: 7}).map((_, y) =>
Array.from({length: 5}).map((_, x) => {
const val = DEMO_BOARD[y][x];
const cls = ['cell'];
if (y === 0) cls.push('row-top');
if (y === 6) cls.push('row-bottom');
if (val === 1 && showWalls) cls.push('wall');
const pathIdx = DEMO_PATH.findIndex(p => p.x === x && p.y === y);
if (pathIdx >= 0) {
if (phase.key === 'plan' && pathIdx < planRevealCount) {
if (pathIdx === 0) cls.push('start-mark');
else if (pathIdx === planRevealCount - 1) cls.push('ghost-end');
else cls.push('ghost');
} else if (phase.key === 'execute') {
// Trail catches up behind the runner — cells go ghost only
// after the dot has visually landed on them. Matches the
// real game's "draw your path as you run" feel instead of
// pre-painting the whole route. Start cell stays unmarked
// since the dot already occupies it.
if (pathIdx > 0 && pathIdx <= ghostUpTo) cls.push('ghost');
}
}
const showStar = val === 3 && !collectedStars.has(`${x},${y}`);
if (showStar) cls.push('star');
return (
{showStar && }
);
})
)}
{runnerCell && (
)}
)}
{phase.caption}
{DEMO_PHASES.map((_, i) => (
);
};
// ------------------------------------------------------------
// Main Menu
// ------------------------------------------------------------
// Randomize generates a fresh 6-digit seed for one-off gauntlet runs.
// FRIENDS_SEED comes from window (game-logic.js) and matches the canonical
// permanent-leaderboard seed so the seed input defaults to it.
const randomGauntletSeed = () =>
String(Math.floor(Math.random() * 900000) + 100000);
// Friendly "3d 4h" / "2h 14m" / "8m" countdown for the weekly board.
// Drops to "ending soon" under a minute. Always accurate to the minute since
// the board only re-renders that often.
const formatCountdown = (msLeft) => {
if (msLeft <= 0) return 'rotating now';
const mins = Math.floor(msLeft / 60000);
if (mins < 1) return 'ending soon';
if (mins < 60) return `${mins}m`;
const hours = Math.floor(mins / 60);
if (hours < 24) {
const m = mins % 60;
return m > 0 ? `${hours}h ${m}m` : `${hours}h`;
}
const days = Math.floor(hours / 24);
const h = hours % 24;
return h > 0 ? `${days}d ${h}h` : `${days}d`;
};
// Single pinned-board card. Renders top 5 from `entries` (sorted desc by
// points), highlights the player's own row, and shows a full-width
// "Play this seed" CTA at the bottom. If the player isn't in the top 5
// their row is appended below as a "you" footer.
const PinnedBoard = ({ title, seed, entries, alias, onPlay, meta }) => {
const list = Array.isArray(entries) ? entries : [];
const top = list.slice(0, 5);
const userIdx = alias ? list.findIndex(e => e.name === alias) : -1;
const userInTop = userIdx >= 0 && userIdx < 5;
const userBelow = userIdx >= 5 ? list[userIdx] : null;
return (
);
// Match (head-to-head) history — rendered inside both Host and Join tabs since
// either route lands you in the same competitive flow.
const MatchLeaderboard = ({ entries }) => (
);
};
// ------------------------------------------------------------
// Mover controls — memorize + execute
// ------------------------------------------------------------
// Memorize phase: just the ready button. Countdown lives in the top status
// pill (which goes urgent in the last 5s) so we don't double up timers.
const MoverMemorize = ({ onReady, competitive }) => (
);
// No Run button — the blob auto-launches as soon as the path reaches the top.
// Undo stays as the single, deliberate way to step the path back.
const MoverExecute = ({ onUndo, canUndo }) => (
Drag or use arrow keys · sketch to the top to launch