Build a complete, polished Snakes & Ladders board game (web, ...

{"name":"Snakes & Ladders","kind":"web","entry":"src/App.tsx"}

// Board geometry: boustrophedon (zigzag) numbering 1..100.// Row 0 is the BOTTOM row (cells 1-10, left->right), row 9 is the TOP row (cell 100 top-left).export const GRID = 10;export const TOTAL = 100;export interface Cell {  n: number;        // 1..100  row: number;      // 0 (bottom) .. 9 (top)  col: number;      // 0 (left) .. 9 (right)}const cellMap = new Map<number, Cell>();for (let row = 0; row < GRID; row++) {  const base = row * GRID;  for (let c = 0; c < GRID; c++) {    const n = base + 1 + (row % 2 === 0 ? c : GRID - 1 - c);    cellMap.set(n, { n, row, col: c });  }}export function cellOf(n: number): Cell {  const c = cellMap.get(n);  if (!c) throw new Error(`no cell for ${n}`);  return c;}// CSS grid is laid out top-row-first, so convert (row,col) to a grid index.export function gridIndex(n: number): number {  const { row, col } = cellOf(n);  return (GRID - 1 - row) * GRID + col;}export const LADDERS: Array<[number, number]> = [  [1, 38], [4, 14], [9, 31], [21, 42],  [28, 84], [36, 44], [51, 67], [71, 91],];export const SNAKES: Array<[number, number]> = [  [16, 6], [47, 26], [49, 11], [56, 53],  [62, 19], [64, 60], [87, 24], [99, 41],];export const LADDER_FROM = new Map(LADDERS.map(([a, b]) => [a, b]));export const SNAKE_FROM = new Map(SNAKES.map(([a, b]) => [a, b]));export type Special = { type: 'ladder' | 'snake'; from: number; to: number };export function specialAt(n: number): Special | null {  const up = LADDER_FROM.get(n);  if (up) return { type: 'ladder', from: n, to: up };  const down = SNAKE_FROM.get(n);  if (down) return { type: 'snake', from: n, to: down };  return null;}export function isLadderBase(n: number): boolean {  return LADDER_FROM.has(n);}export function isSnakeHead(n: number): boolean {  return SNAKE_FROM.has(n);}export const PALETTE = [  { name: 'Crimson', color: '#ff3d6e', dark: '#c1123f' },  { name: 'Cyan', color: '#12c2e9', dark: '#0580a3' },  { name: 'Lime', color: '#8bd92b', dark: '#5a9c0d' },  { name: 'Amber', color: '#ffb020', dark: '#c67c00' },];

import { TOTAL, specialAt } from './board';export type Overshoot = 'bounce' | 'stay';export interface Settings {  needSixToStart: boolean;  overshoot: Overshoot;  extraTurnOnSix: boolean;  threeSixesForfeit: boolean;  knockOff: boolean;}export const DEFAULT_SETTINGS: Settings = {  needSixToStart: false,  overshoot: 'bounce',  extraTurnOnSix: true,  threeSixesForfeit: true,  knockOff: false,};export interface Player {  id: number;  name: string;  color: string;  dark: string;  pos: number; // 0 = off-board (start lane); 1..100 on board  sixesInRow: number;}export type Phase = 'idle' | 'rolling' | 'moving' | 'special' | 'over';export interface LogEntry {  id: number;  text: string;  color?: string;}export interface GameState {  players: Player[];  turn: number;  dice: number | null;  phase: Phase;  settings: Settings;  log: LogEntry[];  winner: number | null;  logSeq: number;}export type GameEvent =  | { type: 'roll'; value: number }  | { type: 'step'; to: number }  | { type: 'special'; from: number; to: number; kind: 'ladder' | 'snake' }  | { type: 'knock'; victim: number; from: number }  | { type: 'pass'; to: number }  | { type: 'forfeit' }  | { type: 'stay' }  | { type: 'win'; player: number };export function createGame(names: string[], settings: Settings, colors: Array<{ color: string; dark: string }>): GameState {  const players: Player[] = names.map((name, i) => ({    id: i,    name,    color: colors[i].color,    dark: colors[i].dark,    pos: 0,    sixesInRow: 0,  }));  return {    players,    turn: 0,    dice: null,    phase: 'idle',    settings,    log: [{ id: 0, text: 'Game on! ' + players[0].name + ' rolls first.' }],    winner: null,    logSeq: 1,  };}function pushLog(s: GameState, text: string, color?: string): void {  s.log.push({ id: s.logSeq++, text, color });  if (s.log.length > 60) s.log.splice(0, s.log.length - 60);}// Resolve where a token ends up after landing on `land` (ladders/snakes/knock-off).export function resolveLanding(s: GameState, land: number): { final: number; events: GameEvent[] } {  const events: GameEvent[] = [];  let pos = land;  const me = s.players[s.turn];  const sp = specialAt(pos);  if (sp) {    pos = sp.to;    events.push({ type: 'special', from: sp.from, to: sp.to, kind: sp.type });  }  if (s.settings.knockOff && pos > 0) {    for (const p of s.players) {      if (p.id !== me.id && p.pos === pos) {        events.push({ type: 'knock', victim: p.id, from: pos });        p.pos = 0;        p.sixesInRow = 0;        pushLog(s, p.name + ' was knocked back to start!', p.color);      }    }  }  me.pos = pos;  return { final: pos, events };}// Advance the current player by `value`. Mutates `s` and returns the event sequence// the UI should animate, in order.export function applyRoll(s: GameState, value: number): GameEvent[] {  const events: GameEvent[] = [];  const me = s.players[s.turn];  const st = s.settings;  events.push({ type: 'roll', value });  s.dice = value;  // Off-board start rule  if (me.pos === 0) {    if (st.needSixToStart) {      if (value !== 6) {        me.sixesInRow = 0;        pushLog(s, me.name + ' rolled ' + value + ' — needs a 6 to enter the board.', me.color);        events.push({ type: 'pass', to: (s.turn + 1) % s.players.length });        return events;      }      me.sixesInRow = 1;      const { events: ev } = resolveLanding(s, 1);      events.push(...ev);      pushLog(s, me.name + ' rolled a 6 and enters at 1!', me.color);      finishTurn(s, events, value, true);      return events;    }    // No six needed: enter and advance from 1    me.sixesInRow = value === 6 ? 1 : 0;    let land = 1 + (value - 1);    if (land > TOTAL) {      if (st.overshoot === 'bounce') land = TOTAL - (land - TOTAL);      else {        pushLog(s, me.name + ' can\'t move past 100, stays off.', me.color);        events.push({ type: 'stay' });        finishTurn(s, events, value, false);        return events;      }    }    const { events: ev } = resolveLanding(s, land);    events.push(...ev);    pushLog(s, me.name + ' rolled ' + value + ' and enters at ' + land + '.', me.color);    finishTurn(s, events, value, true);    return events;  }  // On the board  me.sixesInRow = value === 6 ? me.sixesInRow + 1 : 0;  // Three-sixes forfeit (checked on the roll, before moving)  if (st.threeSixesForfeit && me.sixesInRow >= 3) {    pushLog(s, me.name + ' rolled three 6s in a row — turn forfeited!', me.color);    events.push({ type: 'forfeit' });    const next = (s.turn + 1) % s.players.length;    s.turn = next;    events.push({ type: 'pass', to: next });    return events;  }  const target = me.pos + value;  if (target > TOTAL) {    if (st.overshoot === 'bounce') {      const land = TOTAL - (target - TOTAL);      const { events: ev } = resolveLanding(s, land);      events.push(...ev);      pushLog(s, me.name + ' rolled ' + value + ', bounces back to ' + land + '.', me.color);    } else {      pushLog(s, me.name + ' rolled ' + value + ', stays put (can\'t pass 100).', me.color);      events.push({ type: 'stay' });    }  } else {    const { events: ev } = resolveLanding(s, target);    events.push(...ev);    pushLog(s, me.name + ' rolled ' + value + ' and lands on ' + me.pos + '.', me.color);  }  finishTurn(s, events, value, true);  return events;}function finishTurn(s: GameState, events: GameEvent[], value: number, moved: boolean): void {  const me = s.players[s.turn];  const st = s.settings;  if (me.pos === TOTAL) {    s.winner = me.id;    s.phase = 'over';    pushLog(s, '🏆 ' + me.name + ' wins the game!', me.color);    events.push({ type: 'win', player: me.id });    return;  }  const extra = moved && value === 6 && st.extraTurnOnSix && me.sixesInRow < 3;  if (extra) {    pushLog(s, me.name + ' rolled a 6 — extra turn!', me.color);  } else {    const next = (s.turn + 1) % s.players.length;    s.turn = next;    events.push({ type: 'pass', to: next });  }}export function canRoll(s: GameState): boolean {  return s.phase === 'idle';}

// Tiny WebAudio synth — no external files. Safe no-op if audio is unavailable.let ctx: AudioContext | null = null;let muted = false;function ac(): AudioContext | null {  try {    if (!ctx) {      const AC = (window.AudioContext || (window as any).webkitAudioContext);      if (!AC) return null;      ctx = new AC();    }    if (ctx.state === 'suspended') ctx.resume();    return ctx;  } catch {    return null;  }}function tone(freq: number, dur: number, type: OscillatorType = 'sine', gain = 0.15, when = 0) {  const c = ac();  if (!c || muted) return;  const o = c.createOscillator();  const g = c.createGain();  o.type = type;  o.frequency.value = freq;  o.connect(g);  g.connect(c.destination);  const t = c.currentTime + when;  g.gain.setValueAtTime(0.0001, t);  g.gain.exponentialRampToValueAtTime(gain, t + 0.02);  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);  o.start(t);  o.stop(t + dur + 0.02);}export const Sound = {  setMuted(m: boolean) { muted = m; },  isMuted() { return muted; },  roll() { tone(220, 0.08, 'square', 0.12); tone(330, 0.08, 'square', 0.12, 0.09); tone(440, 0.1, 'square', 0.12, 0.18); },  step() { tone(520, 0.06, 'triangle', 0.1); },  climb() { [440, 554, 659, 880].forEach((f, i) => tone(f, 0.12, 'sine', 0.14, i * 0.09)); },  slide() { [660, 520, 392, 262].forEach((f, i) => tone(f, 0.14, 'sawtooth', 0.1, i * 0.1)); },  knock() { tone(160, 0.2, 'square', 0.18); tone(110, 0.25, 'square', 0.15, 0.05); },  win() { [523, 659, 784, 1047, 1319].forEach((f, i) => tone(f, 0.25, 'triangle', 0.16, i * 0.13)); },};

import { GRID, gridIndex, cellOf, LADDERS, SNAKES, isLadderBase, isSnakeHead } from '../game/board';import type { Player } from '../game/logic';interface Props {  players: Player[];  animPos: number; // position of the actively-moving token (for the hop)  animPlayer: number; // id of the moving player}const START_LANES = 4;export default function Board({ players, animPos, animPlayer }: Props) {  const cells = Array.from({ length: GRID * GRID }, (_, i) => i);  return (    <div className="board-wrap">      <div className="board">        {/* start lane */}        <div className="start-lane" aria-label="Start lane">          <span className="start-label">START</span>          {Array.from({ length: START_LANES }, (_, i) => (            <div key={i} className="start-slot" style={{ order: i }} />          ))}        </div>        <div className="grid" role="grid" aria-label="Snakes and ladders board">          {cells.map((gi) => {            const n = 100 - gi; // gi 0 = top-left = 100            const { row, col } = cellOf(n);            const light = (row + col) % 2 === 0;            const ladder = isLadderBase(n);            const snake = isSnakeHead(n);            return (              <div                key={gi}                className={`cell ${light ? 'light' : 'dark'} ${ladder ? 'ladder-cell' : ''} ${snake ? 'snake-cell' : ''}`}                role="gridcell"                aria-label={n}              >                <span className="cell-num">{n}</span>                {ladder && <span className="badge up">▲</span>}                {snake && <span className="badge down">▼</span>}              </div>            );          })}          {/* ladders */}          <svg className="overlay" viewBox={`0 0 ${GRID} ${GRID}`} preserveAspectRatio="none" aria-hidden="true">            {LADDERS.map(([a, b]) => {              const ca = cellOf(a), cb = cellOf(b);              const x1 = ca.col + 0.5, y1 = GRID - 1 - ca.row + 0.5;              const x2 = cb.col + 0.5, y2 = GRID - 1 - cb.row + 0.5;              return <LadderLine key={a} x1={x1} y1={y1} x2={x2} y2={y2} />;            })}            {SNAKES.map(([a, b]) => {              const ca = cellOf(a), cb = cellOf(b);              const x1 = ca.col + 0.5, y1 = GRID - 1 - ca.row + 0.5;              const x2 = cb.col + 0.5, y2 = GRID - 1 - cb.row + 0.5;              return <SnakePath key={a} x1={x1} y1={y1} x2={x2} y2={y2} />;            })}          </svg>          {/* tokens */}          {players.map((p) => {            const off = p.pos === 0;            const isMoving = p.id === animPlayer && p.pos > 0;            const n = isMoving ? animPos : p.pos;            const idx = off ? -1 : gridIndex(n);            const { row, col } = off ? { row: -1, col: 0 } : cellOf(n);            // multiple tokens in same cell: offset slightly            const peers = players.filter((q) => q.pos === p.pos && q.id <= p.id).length;            const posHere = players.filter((q) => q.pos === p.pos);            const k = posHere.findIndex((q) => q.id === p.id);            const offX = (k - (posHere.length - 1) / 2) * 0.32;            const offY = (k % 2 === 0 ? -1 : 1) * 0.12;            const left = off ? -1 : col + 0.5 + offX;            const top = off ? -1 : GRID - 1 - row + 0.5 + offY;            return (              <div                key={p.id}                className={`token ${off ? 'token-off' : ''} ${isMoving ? 'token-anim' : ''}`}                style={{                  left: off ? undefined : `${left * 10}%`,                  top: off ? undefined : `${top * 10}%`,                  background: p.color,                  borderColor: p.dark,                  zIndex: isMoving ? 30 : 10,                }}                title={p.name}                aria-label={`${p.name} at ${p.pos}`}              >                <span className="token-name">{p.name}</span>              </div>            );          })}        </div>      </div>    </div>  );}function LadderLine({ x1, y1, x2, y2 }: { x1: number; y1: number; x2: number; y2: number }) {  const dx = x2 - x1, dy = y2 - y1;  const len = Math.hypot(dx, dy);  const rungs = Math.max(2, Math.floor(len / 0.5));  const nx = -dy / len, ny = dx / len;  const w = 0.09;  return (    <g className="ladder">      <line x1={x1 + nx * w} y1={y1 + ny * w} x2={x2 + nx * w} y2={y2 + ny * w} />      <line x1={x1 - nx * w} y1={y1 - ny * w} x2={x2 - nx * w} y2={y2 - ny * w} />      {Array.from({ length: rungs }, (_, i) => {        const t = (i + 0.5) / rungs;        const cx = x1 + dx * t, cy = y1 + dy * t;        return <line key={i} x1={cx + nx * w} y1={cy + ny * w} x2={cx - nx * w} y2={cy - ny * w} />;      })}    </g>  );}function SnakePath({ x1, y1, x2, y2 }: { x1: number; y1: number; x2: number; y2: number }) {  const dx = x2 - x1, dy = y2 - y1;  const len = Math.hypot(dx, dy);  const nx = -dy / len, ny = dx / len;  const amp = Math.min(0.35, len * 0.18);  const mx = (x1 + x2) / 2 + nx * amp;  const my = (y1 + y2) / 2 + ny * amp;  const d = `M ${x1} ${y1} Q ${mx} ${my} ${x2} ${y2}`;  return (    <g className="snake">      <path d={d} className="snake-body" />      <circle cx={x1} cy={y1} r={0.16} className="snake-head" />      <circle cx={x1} cy={y1} r={0.05} className="snake-eye" />    </g>  );}

import { useEffect, useRef, useState } from 'react';interface Props {  value: number | null;  rolling: boolean;  onRolled: (v: number) => void;  disabled: boolean;}const FACES: Record<number, number[]> = {  1: [4],  2: [0, 8],  3: [0, 4, 8],  4: [0, 2, 6, 8],  5: [0, 2, 4, 6, 8],  6: [0, 2, 3, 5, 6, 8],};export default function Dice({ value, rolling, onRolled, disabled }: Props) {  const [face, setFace] = useState<number>(value ?? 1);  const [spin, setSpin] = useState(0);  const timer = useRef<number | null>(null);  useEffect(() => {    if (rolling) {      let ticks = 0;      const id = window.setInterval(() => {        setFace(1 + Math.floor(Math.random() * 6));        setSpin((s) => s + 180);        ticks++;      }, 70);      timer.current = id as unknown as number;      return () => window.clearInterval(id);    }  }, [rolling]);  useEffect(() => {    if (value != null) setFace(value);  }, [value]);  const pips = FACES[face] ?? [];  const canRoll = !disabled && !rolling;  return (    <button      className={`die ${rolling ? 'die-rolling' : ''} ${canRoll ? 'die-ready' : ''}`}      onClick={() => canRoll && onRolled(0)}      disabled={!canRoll}      aria-label={rolling ? 'Rolling' : `Roll the die (current ${face})`}      style={{ transform: `rotate(${spin}deg)` }}    >      <div className="die-face">        {Array.from({ length: 9 }, (_, i) => (          <span key={i} className={`pip ${pips.includes(i) ? 'on' : ''}`} />        ))}      </div>    </button>  );}

import type { Player, Phase } from '../game/logic';interface Props {  players: Player[];  turn: number;  phase: Phase;}export default function PlayerPanel({ players, turn, phase }: Props) {  return (    <div className="players" role="list" aria-label="Players">      {players.map((p) => {        const active = p.id === turn && phase !== 'over';        return (          <div key={p.id} className={`player ${active ? 'active' : ''}`} role="listitem"            style={{ borderColor: p.color }}>            <span className="player-dot" style={{ background: p.color, borderColor: p.dark }} />            <span className="player-name">{p.name}</span>            <span className="player-pos">{p.pos === 0 ? 'START' : p.pos}</span>            {active && <span className="turn-chip">turn</span>}          </div>        );      })}    </div>  );}

import type { Settings as S } from '../game/logic';import { PALETTE } from '../game/board';interface Props {  open: boolean;  onClose: () => void;  playerCount: number;  names: string[];  onCount: (n: number) => void;  onName: (i: number, v: string) => void;  settings: S;  onSettings: (s: S) => void;  muted: boolean;  onMute: (m: boolean) => void;  onNewGame: () => void;}export default function Settings({ open, onClose, playerCount, names, onCount, onName, settings, onSettings, muted, onMute, onNewGame }: Props) {  if (!open) return null;  const set = (patch: Partial<S>) => onSettings({ ...settings, ...patch });  return (    <div className="modal-backdrop" onClick={onClose}>      <div className="modal settings" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Settings">        <div className="modal-head">          <h2>Setup &amp; Rules</h2>          <button className="icon-btn" onClick={onClose} aria-label="Close">✕</button>        </div>        <label className="field">          <span>Players</span>          <div className="seg">            {[2, 3, 4].map((n) => (              <button key={n} className={playerCount === n ? 'on' : ''} onClick={() => onCount(n)}>{n}</button>            ))}          </div>        </label>        <div className="names">          {names.slice(0, playerCount).map((name, i) => (            <label key={i} className="name-row">              <span className="swatch" style={{ background: PALETTE[i].color }} />              <input value={name} maxLength={14} onChange={(e) => onName(i, e.target.value)} aria-label={`Player ${i + 1} name`} />            </label>          ))}        </div>        <Toggle label="Need a 6 to start" checked={settings.needSixToStart} onChange={(v) => set({ needSixToStart: v })} />        <Toggle label="Extra turn on a 6" checked={settings.extraTurnOnSix} onChange={(v) => set({ extraTurnOnSix: v })} />        <Toggle label="Three 6s forfeit turn" checked={settings.threeSixesForfeit} onChange={(v) => set({ threeSixesForfeit: v })} />        <Toggle label="Knock opponent off" checked={settings.knockOff} onChange={(v) => set({ knockOff: v })} />        <label className="field">          <span>Overshoot 100</span>          <div className="seg">            <button className={settings.overshoot === 'bounce' ? 'on' : ''} onClick={() => set({ overshoot: 'bounce' })}>Bounce back</button>            <button className={settings.overshoot === 'stay' ? 'on' : ''} onClick={() => set({ overshoot: 'stay' })}>Stay put</button>          </div>        </label>        <Toggle label="Sound effects" checked={!muted} onChange={(v) => onMute(!v)} />        <div className="modal-actions">          <button className="btn ghost" onClick={onClose}>Cancel</button>          <button className="btn primary" onClick={onNewGame}>Start / Restart</button>        </div>      </div>    </div>  );}function Toggle({ label, checked, onChange }: { label: string; checked: boolean; onChange: (v: boolean) => void }) {  return (    <label className="toggle-row">      <span>{label}</span>      <button        className={`switch ${checked ? 'on' : ''}`}        role="switch"        aria-checked={checked}        aria-label={label}        onClick={() => onChange(!checked)}      >        <span className="knob" />      </button>    </label>  );}

import { useEffect, useRef } from 'react';import type { Player } from '../game/logic';interface Props {  winner: Player | null;  onPlayAgain: () => void;}export default function WinModal({ winner, onPlayAgain }: Props) {  const ref = useRef<HTMLCanvasElement>(null);  useEffect(() => {    if (!winner) return;    const canvas = ref.current;    if (!canvas) return;    const ctx = canvas.getContext('2d');    if (!ctx) return;    const dpr = window.devicePixelRatio || 1;    const W = (canvas.width = canvas.clientWidth * dpr);    const H = (canvas.height = canvas.clientHeight * dpr);    const colors = ['#ff3d6e', '#12c2e9', '#8bd92b', '#ffb020', '#ffffff', '#b14bff'];    const parts = Array.from({ length: 160 }, () => ({      x: Math.random() * W,      y: -20 - Math.random() * H,      r: (4 + Math.random() * 6) * dpr,      c: colors[(Math.random() * colors.length) | 0],      vy: (2 + Math.random() * 4) * dpr,      vx: (-1 + Math.random() * 2) * dpr,      rot: Math.random() * Math.PI,      vr: (-0.1 + Math.random() * 0.2),    }));    let raf = 0;    const tick = () => {      ctx.clearRect(0, 0, W, H);      for (const p of parts) {        p.y += p.vy; p.x += p.vx; p.rot += p.vr;        if (p.y > H + 20) { p.y = -20; p.x = Math.random() * W; }        ctx.save();        ctx.translate(p.x, p.y);        ctx.rotate(p.rot);        ctx.fillStyle = p.c;        ctx.fillRect(-p.r / 2, -p.r / 2, p.r, p.r * 0.6);        ctx.restore();      }      raf = requestAnimationFrame(tick);    };    tick();    return () => cancelAnimationFrame(raf);  }, [winner]);  if (!winner) return null;  return (    <div className="modal-backdrop win-backdrop">      <canvas ref={ref} className="confetti" aria-hidden="true" />      <div className="modal win" role="dialog" aria-label="Winner">        <div className="trophy">🏆</div>        <h1 style={{ color: winner.color }}>{winner.name} wins!</h1>        <p>Reached square 100 first.</p>        <button className="btn primary big" onClick={onPlayAgain}>Play Again</button>      </div>    </div>  );}

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';import Board from './components/Board';import Dice from './components/Dice';import PlayerPanel from './components/PlayerPanel';import Settings from './components/Settings';import WinModal from './components/WinModal';import { PALETTE, cellOf } from './game/board';import {  applyRoll, canRoll, createGame, DEFAULT_SETTINGS,  type GameState, type GameEvent, type Settings,} from './game/logic';import { Sound } from './game/sound';const STEP_MS = 170;const SPECIAL_MS = 650;export default function App() {  const [playerCount, setPlayerCount] = useState(2);  const [names, setNames] = useState(['Player 1', 'Player 2', 'Player 3', 'Player 4']);  const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS);  const [muted, setMuted] = useState(false);  const [game, setGame] = useState<GameState>(() => createGame(    ['Player 1', 'Player 2', 'Player 3', 'Player 4'].slice(0, 2),    DEFAULT_SETTINGS,    PALETTE,  ));  const [rolling, setRolling] = useState(false);  const [showSettings, setShowSettings] = useState(false);  const [animPos, setAnimPos] = useState(0);  const [animPlayer, setAnimPlayer] = useState(-1);  const busy = useRef(false);  const logRef = useRef<HTMLDivElement>(null);  const startGame = useCallback((count: number, nm: string[], st: Settings) => {    const colors = PALETTE.slice(0, count).map((p) => ({ color: p.color, dark: p.dark }));    const g = createGame(nm.slice(0, count), st, colors);    busy.current = false;    setRolling(false);    setAnimPlayer(-1);    setGame(g);  }, []);  const runEvents = useCallback((events: GameEvent[], g: GameState) => {    busy.current = true;    const me = g.players[g.turn];    setAnimPlayer(me.id);    const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));    const pos = { current: me.pos };    (async () => {      for (const ev of events) {        if (ev.type === 'roll') {          Sound.roll();        } else if (ev.type === 'step') {          pos.current = ev.to;          setAnimPos(ev.to);          Sound.step();          await sleep(STEP_MS);        } else if (ev.type === 'special') {          setAnimPos(ev.to);          if (ev.kind === 'ladder') Sound.climb(); else Sound.slide();          await sleep(SPECIAL_MS);        } else if (ev.type === 'knock') {          Sound.knock();          await sleep(300);        } else if (ev.type === 'win') {          Sound.win();        } else {          await sleep(120);        }      }      setAnimPlayer(-1);      busy.current = false;    })();  }, []);  const roll = useCallback((v: number) => {    if (busy.current || !canRoll(game)) return;    const value = v === 0 ? 1 + Math.floor(Math.random() * 6) : v;    setRolling(true);    const snapshot = { ...game, players: game.players.map((p) => ({ ...p })), log: [...game.log] };    const events = applyRoll(snapshot, value);    setGame(snapshot);    // let the die spin a beat before the token moves    setTimeout(() => {      setRolling(false);      runEvents(events, snapshot);    }, 520);  }, [game, runEvents]);  // keyboard: Space / Enter to roll  useEffect(() => {    const onKey = (e: KeyboardEvent) => {      if ((e.code === 'Space' || e.code === 'Enter') && canRoll(game) && !busy.current && !showSettings) {        e.preventDefault();        roll(0);      }    };    window.addEventListener('keydown', onKey);    return () => window.removeEventListener('keydown', onKey);  }, [game, roll, showSettings]);  // auto-scroll log  useEffect(() => {    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;  }, [game.log]);  useEffect(() => { Sound.setMuted(muted); }, [muted]);  const current = game.players[game.turn];  const winner = game.winner != null ? game.players[game.winner] : null;  const onCount = (n: number) => {    setPlayerCount(n);    setNames((prev) => prev.map((name, i) => (i < n && !name.trim() ? `Player ${i + 1}` : name)));  };  const onName = (i: number, v: string) => setNames((prev) => prev.map((n, j) => (j === i ? v : n)));  return (    <div className="app">      <header className="topbar">        <h1 className="logo">Snakes <span>&amp;</span> Ladders</h1>        <button className="btn ghost" onClick={() => setShowSettings(true)} aria-label="Open settings">⚙ Settings</button>      </header>      <main className="layout">        <section className="board-col">          <Board players={game.players} animPos={animPos} animPlayer={animPlayer} />        </section>        <aside className="side">          <div className="card dice-card">            <div className="turn-banner" style={{ background: current.color, color: '#fff' }}>              {game.phase === 'over' ? 'Game over' : `${current.name}'s turn`}            </div>            <Dice value={game.dice} rolling={rolling} onRolled={roll} disabled={!canRoll(game) || busy.current} />            <p className="hint">Click the die or press <kbd>Space</kbd></p>          </div>          <PlayerPanel players={game.players} turn={game.turn} phase={game.phase} />          <div className="card log-card">            <h3>Turn log</h3>            <div className="log" ref={logRef} role="log" aria-live="polite">              {game.log.map((e) => (                <div key={e.id} className="log-line" style={e.color ? { borderLeftColor: e.color } : undefined}>                  {e.text}                </div>              ))}            </div>          </div>        </aside>      </main>      <Settings        open={showSettings}        onClose={() => setShowSettings(false)}        playerCount={playerCount}        names={names}        onCount={onCount}        onName={onName}        settings={settings}        onSettings={setSettings}        muted={muted}        onMute={setMuted}        onNewGame={() => { startGame(playerCount, names, settings); setShowSettings(false); }}      />      <WinModal winner={winner} onPlayAgain={() => startGame(playerCount, names, settings)} />    </div>  );}