);
// ------------------------------------------------------------
// Splash screen — slim hero + looping gameplay demo
// ------------------------------------------------------------
const Splash = ({ onStart }) => {
// Rotating quip — first one is random so a returning player doesn't always
// see the same line on cold load. Cycles forward every ~5.5s while they
// linger on the splash. ANDRE_QUOTES is defined further down; hoisting
// wouldn't change behavior since this component runs at render time.
const [quoteIdx, setQuoteIdx] = useState(
() => Math.floor(Math.random() * ANDRE_QUOTES.length)
);
useEffect(() => {
const id = setInterval(() => {
setQuoteIdx(i => (i + 1) % ANDRE_QUOTES.length);
}, 5500);
return () => clearInterval(id);
}, []);
return (
ANDRE
Trace a path. Save Andre.
);
};
// ------------------------------------------------------------
// 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
// ------------------------------------------------------------
const ANDRE_QUOTES = [
// Andre personality — establishes him as chill, lucky, self-aware
"Andre likes to chill. The maze does not.",
"Andre's been lucky so far. Don't ruin it.",
"Andre's smart. Andre's also wrong sometimes.",
"Andre's secret: stay calm, click less.",
"Andre believes in you. Mostly.",
"Andre's chill until the timer hits five.",
"Andre would skip the diamond. Then regret it.",
"Andre's hat hides a planning spreadsheet.",
"Andre vibes. You optimize. Both work.",
"Andre's only rule: don't crash. The rest is style.",
"Andre's smart enough to know when to back off. Are you?",
"Andre's seen worse mazes. Once. Maybe twice.",
"Andre took the long way once. Got there. Less stylish.",
"Andre rates this maze: aggressive.",
"Andre prefers the scenic route. He'll never admit it.",
// Maze wisdom — generic aphorisms, still good
"Memorize twice. Move once.",
"Walls don't move. Unfortunately, neither does your memory.",
"A shortest path walked slowly is still a shortest path.",
"If in doubt, go up. It's where the exit lives.",
"The maze forgets you the second you look away. Harsh, but fair.",
"Speedrunning the maze is just confident guessing.",
"Diamonds are optional. Dignity is negotiable.",
"Dead ends are just paths with commitment issues.",
"If you can't see the wall, it can still see you.",
"Plan like a chess master. Run like you forgot the plan.",
"Wrong turn? Call it a scenic route.",
"The bottom row is friendly. The top row is earned.",
"You miss 100% of the diamonds you don't step on.",
"A good run is quiet. A great run is quieter.",
"Blind mode is just trust-falling into geometry.",
"Hesitation costs points. So does confidence, sometimes.",
"There's no prize for the longest path. I checked.",
"The maze is a suggestion. Your queue is a commitment.",
];
// 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 }) => (
);
// Stacked rather than side-by-side so each button is full-width / thumb-sized
// on phones. Run lands closest to the bottom of the screen for one-handed use.
// "arrows" + "Enter" in the hint refer to keyboard input — the on-screen
// controls are drag-on-board + the buttons below.
const MoverExecute = ({ onUndo, onExecute, executeEnabled, canUndo }) => (
Drag or use arrow keys · tap the path tip to retract · Enter to run