@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/checkers/CheckersRules.ts

@@ -0,0 +1,167 @@
+// Checkers' rules, with no React or engine: the board, moves (captures are forced, multi-jumps chain,
+// a man reaching the far row is crowned and that ends its move), and the robot's pick. Ported from the
+// original store (games/checkers/CheckersStore.ts), so every position plays out as it did.
+import { bestAIMoves } from './CheckersAI';
+
+export const BOARD_N = 8;
+export const PIECES_PER_SIDE = 12;
+export const AI_DEPTH = 5;
+
+/** You play red (bottom rows, moving up); the robot plays black (top, moving down). */
+export type CheckerPlayer = 'red' | 'black';
+export type Piece = { player: CheckerPlayer; king: boolean };
+export type Cell = Piece | null;
+export type CheckersBoard = Cell[]; // 64 squares, index = row * 8 + col
+/** One hop: where it lands, and the square it jumps (null for a slide). */
+export type Step = { to: number; captured: number | null };
+/** A whole move: a slide, or a full (maybe multi-) jump. */
+export type FullMove = { from: number; steps: Step[] };
+
+export const HUMAN: CheckerPlayer = 'red';
+export const AI: CheckerPlayer = 'black';
+
+export const rc = (index: number) => ({ row: Math.floor(index / BOARD_N), col: index % BOARD_N });
+export const idx = (row: number, col: number) => row * BOARD_N + col;
+export const inBounds = (row: number, col: number) => row >= 0 && row < BOARD_N && col >= 0 && col < BOARD_N;
+/** Pieces live on the dark squares. */
+export const isPlayable = (row: number, col: number) => (row + col) % 2 === 1;
+
+export function createInitialBoard(): CheckersBoard {
+  const board: CheckersBoard = new Array(BOARD_N * BOARD_N).fill(null);
+  for (let row = 0; row < BOARD_N; row++)
+    for (let col = 0; col < BOARD_N; col++) {
+      if (!isPlayable(row, col)) continue;
+      if (row < 3) board[idx(row, col)] = { player: AI, king: false };
+      else if (row > BOARD_N - 4) board[idx(row, col)] = { player: HUMAN, king: false };
+    }
+  return board;
+}
+
+const KING_DIRS: readonly (readonly [number, number])[] = [
+  [-1, -1],
+  [-1, 1],
+  [1, -1],
+  [1, 1]
+];
+const HUMAN_DIRS: readonly (readonly [number, number])[] = [
+  [-1, -1],
+  [-1, 1]
+];
+const AI_DIRS: readonly (readonly [number, number])[] = [
+  [1, -1],
+  [1, 1]
+];
+const dirsFor = (player: CheckerPlayer, king: boolean) => (king ? KING_DIRS : player === HUMAN ? HUMAN_DIRS : AI_DIRS);
+
+export function singleJumps(board: CheckersBoard, from: number, player: CheckerPlayer, king: boolean): Step[] {
+  const { row, col } = rc(from);
+  const steps: Step[] = [];
+  for (const [dr, dc] of dirsFor(player, king)) {
+    const landR = row + dr * 2;
+    const landC = col + dc * 2;
+    if (!inBounds(landR, landC)) continue;
+    const landIdx = idx(landR, landC);
+    if (board[landIdx] !== null) continue;
+    const midIdx = idx(row + dr, col + dc);
+    const mid = board[midIdx];
+    if (mid && mid.player !== player) steps.push({ to: landIdx, captured: midIdx });
+  }
+  return steps;
+}
+
+export function singleSlides(board: CheckersBoard, from: number, player: CheckerPlayer, king: boolean): Step[] {
+  const { row, col } = rc(from);
+  const steps: Step[] = [];
+  for (const [dr, dc] of dirsFor(player, king)) {
+    const r = row + dr;
+    const c = col + dc;
+    if (!inBounds(r, c)) continue;
+    const to = idx(r, c);
+    if (board[to] === null) steps.push({ to, captured: null });
+  }
+  return steps;
+}
+
+/** One hop on a copy of the board; says whether the mover was crowned. */
+export function applyStep(board: CheckersBoard, from: number, step: Step, player: CheckerPlayer): { board: CheckersBoard; promoted: boolean } {
+  const nb = board.slice();
+  const p = nb[from]!;
+  nb[from] = null;
+  if (step.captured !== null) nb[step.captured] = null;
+  const { row } = rc(step.to);
+  const promotes = !p.king && ((player === HUMAN && row === 0) || (player === AI && row === BOARD_N - 1));
+  nb[step.to] = promotes ? { player, king: true } : p;
+  return { board: nb, promoted: promotes };
+}
+
+export function playerHasCapture(board: CheckersBoard, player: CheckerPlayer): boolean {
+  for (let i = 0; i < board.length; i++) {
+    const p = board[i];
+    if (p && p.player === player && singleJumps(board, i, p.player, p.king).length > 0) return true;
+  }
+  return false;
+}
+
+function captureSequences(board: CheckersBoard, origin: number, cur: number, player: CheckerPlayer, king: boolean, steps: Step[]): FullMove[] {
+  const jumps = singleJumps(board, cur, player, king);
+  if (jumps.length === 0) return steps.length ? [{ from: origin, steps }] : [];
+  const results: FullMove[] = [];
+  for (const j of jumps) {
+    const applied = applyStep(board, cur, j, player);
+    const newSteps = [...steps, j];
+    if (applied.promoted) results.push({ from: origin, steps: newSteps });
+    else results.push(...captureSequences(applied.board, origin, j.to, player, king, newSteps));
+  }
+  return results;
+}
+
+/** Every legal whole move for a side (captures forced when there are any). */
+export function generateMoves(board: CheckersBoard, player: CheckerPlayer): FullMove[] {
+  const captures: FullMove[] = [];
+  for (let i = 0; i < board.length; i++) {
+    const p = board[i];
+    if (!p || p.player !== player) continue;
+    const seqs = captureSequences(board, i, i, player, p.king, []);
+    if (seqs.length) captures.push(...seqs);
+  }
+  if (captures.length) return captures;
+  const slides: FullMove[] = [];
+  for (let i = 0; i < board.length; i++) {
+    const p = board[i];
+    if (!p || p.player !== player) continue;
+    for (const s of singleSlides(board, i, player, p.king)) slides.push({ from: i, steps: [s] });
+  }
+  return slides;
+}
+
+export function applyFullMove(board: CheckersBoard, move: FullMove): CheckersBoard {
+  const player = board[move.from]!.player;
+  let b = board;
+  let cur = move.from;
+  for (const s of move.steps) {
+    b = applyStep(b, cur, s, player).board;
+    cur = s.to;
+  }
+  return b;
+}
+
+/** A piece's single hops when it isn't forced to capture: jumps first, then slides. */
+export const allSteps = (board: CheckersBoard, index: number, player: CheckerPlayer, king: boolean): Step[] => [
+  ...singleJumps(board, index, player, king),
+  ...singleSlides(board, index, player, king)
+];
+
+export function countPieces(board: CheckersBoard, player: CheckerPlayer): number {
+  let n = 0;
+  for (const c of board) if (c && c.player === player) n++;
+  return n;
+}
+
+/** The robot's move: the only one, or a random one of the best its search finds. */
+export function chooseAIMove(board: CheckersBoard): FullMove | null {
+  const moves = generateMoves(board, AI);
+  if (moves.length === 0) return null;
+  if (moves.length === 1) return moves[0]!;
+  const best = bestAIMoves(board, moves, AI_DEPTH);
+  return best[Math.floor(Math.random() * best.length)]!;
+}

package/src/games/checkers/CheckersScene.ts

@@ -0,0 +1,308 @@
+import { type Color, effects, type Entity, extrude, lathe, merge, type Model, Path, quat, type Vec3, type World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { setBackdropTheme, spawnBackdrop } from '../shared/EngineBackdrop';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { placeTiltedBackdrop } from '../shared/EngineTilt';
+// Everything Checkers draws: a flat board of 64 squares with a thin outer border, turned checker pieces
+// (a lathe profile: a rounded rim and grooved top) in red and slate, kings as two stacked with a gold
+// crown, and the hints: the picked piece's square glows gold, slides show green dots, jumps red rings.
+// A flat board seen directly from above, with only the checker pieces raised in 3D. Every piece is
+// one entity sharing one mesh; a king carries its crown.
+import { toColor } from '../shared/EngineUtils';
+import { BOARD_BORDER_WIDTH, COLORS, HOP_TIME, type Layout, PIECE_HEIGHT, SLIDE_TIME, squareCentre } from './CheckersConstants';
+import type { CheckersBoard, Piece } from './CheckersRules';
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('checkers/CheckersScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+const STAND_UP = quat.x(Math.PI / 2);
+const BACKDROP_DEPTH = 30;
+const SURFACE = 0.2; // the flat squares' plane
+const HINTS = 4; // a piece has at most four places to go
+
+// ── Meshes (one square across) ────────────────────────────────────────
+
+/** A checker: a turned disc, rounded at the rim, two grooves on top, standing on z = 0. */
+const pieceMesh = () =>
+  cached('ck-piece', () => {
+    const h = PIECE_HEIGHT;
+    const profile: [number, number][] = [
+      [0.001, h],
+      [0.14, h],
+      [0.155, h - 0.012],
+      [0.17, h],
+      [0.27, h],
+      [0.285, h - 0.014],
+      [0.3, h],
+      [0.36, h],
+      [0.395, h - 0.02],
+      [0.41, h * 0.55],
+      [0.4, h * 0.18],
+      [0.37, 0],
+      [0.001, 0]
+    ];
+    const g = lathe(profile, {
+      segments: 36,
+      // The grooves and the rim a little darker than the face
+      color: ({ position: [x, y, z] }) => {
+        const r = Math.hypot(x, z);
+        const k = y < h - 0.004 ? (r > 0.38 ? 0.78 : 0.88) : 1;
+        return [k, k, k, 1];
+      }
+    });
+    return createShape(merge([{ geometry: g, rotation: STAND_UP }]), { center: false, shine: 0.55 });
+  });
+
+/** A king's crown: a gold three-pointed crown, standing on top of the stack. */
+const crownMesh = () =>
+  cached('ck-crown', () => {
+    const p = new Path().addPolygon([
+      [-0.2, 0.1],
+      [-0.2, -0.06],
+      [-0.12, 0.02],
+      [-0.06, -0.12],
+      [0, 0.0],
+      [0.06, -0.12],
+      [0.12, 0.02],
+      [0.2, -0.06],
+      [0.2, 0.1]
+    ]);
+    return createShape(extrude(p, { depth: 0.04 }), { center: false, shine: 0.8 });
+  });
+
+/** A hint ring (a capture target): flat, lying on a square. */
+const ringMesh = () =>
+  cached('ck-ring', () =>
+    createShape(extrude(new Path().addCircle(0, 0, 0.4).addCircle(0, 0, 0.33), { depth: 0, fillRule: 'evenodd' }), { center: false })
+  );
+const discMesh = () => cached('ck-disc', () => createShape(extrude(new Path().addCircle(0, 0, 0.5), { depth: 0 }), { center: false }));
+const panelMesh = (w: number, radius: number) =>
+  cached(`ck-flat-panel:${w}:${radius}`, () => createShape(extrude(new Path().addRoundedRect(-w / 2, -w / 2, w, w, radius), { depth: 0 })));
+
+// ── Spawning ──────────────────────────────────────────────────────────
+
+type PieceView = { root: Entity; crown: Entity | null };
+export type Scene = {
+  backdrop: Entity;
+  board: Entity[];
+  pieces: Map<number, PieceView>;
+  select: Entity;
+  dots: Entity[];
+  rings: Entity[];
+  /** Bursts waiting for their moment (a burst can't be delayed), and the scene's clock. */
+  queue: { at: number; run: () => void }[];
+  time: number;
+};
+
+const pieceColor = (p: Piece): Color => toColor(p.player === 'red' ? COLORS.RED : COLORS.BLACK);
+const at = (l: Layout, index: number, z = SURFACE): Vec3 => {
+  const [x, y] = squareCentre(l, index);
+  return [x, y, z];
+};
+
+function spawnBoard(world: World, l: Layout): Entity[] {
+  const out: Entity[] = [];
+  const add = (o: Parameters<World['spawn']>[0]) => out.push(world.spawn({ pickable: false, ...o }));
+  for (let i = 0; i < 64; i++) {
+    const dark = (Math.floor(i / 8) + i) % 2 === 1;
+    const [x, y] = squareCentre(l, i);
+    add({
+      mesh: panelMesh(1, 0),
+      position: [x, y, SURFACE],
+      scale: [l.cell, l.cell, 1],
+      color: toColor(dark ? COLORS.DARK_SQ : COLORS.LIGHT_SQ)
+    });
+  }
+  const edge = BOARD_BORDER_WIDTH;
+  const border = toColor(COLORS.BOARD_BORDER);
+  for (const side of [-1, 1]) {
+    add({ mesh: panelMesh(1, 0), position: [0, (side * (l.size + edge)) / 2, SURFACE], scale: [l.size + edge * 2, edge, 1], color: border });
+    add({ mesh: panelMesh(1, 0), position: [(side * (l.size + edge)) / 2, 0, SURFACE], scale: [edge, l.size, 1], color: border });
+  }
+  return out;
+}
+
+function spawnPiece(world: World, l: Layout, s: Scene, index: number, p: Piece) {
+  const root = world.spawn({ mesh: pieceMesh(), position: at(l, index), scale: l.cell, color: pieceColor(p), pickable: false });
+  const view: PieceView = { root, crown: null };
+  s.pieces.set(index, view);
+  if (p.king) crown(world, view, p, false);
+}
+
+/** A king: a second piece stacked on the first, a gold crown on top. */
+function crown(world: World, v: PieceView, p: Piece, animate: boolean) {
+  if (v.crown != null) return;
+  const stack = world.spawn({ mesh: pieceMesh(), parent: v.root, position: [0, 0, PIECE_HEIGHT * 0.95], color: pieceColor(p), pickable: false });
+  world.spawn({
+    mesh: crownMesh(),
+    parent: stack,
+    position: [0, 0.02, PIECE_HEIGHT + 0.025],
+    color: toColor(COLORS.GOLD),
+    pickable: false
+  });
+  v.crown = stack;
+  if (animate) {
+    world.set(stack, { position: [0, 0, PIECE_HEIGHT * 4] });
+    world.animate(stack, { position: [0, 0, PIECE_HEIGHT * 0.95] }, { duration: 0.35, delay: SLIDE_TIME, easing: 'bounce' });
+  }
+}
+
+export function buildScene(world: World, l: Layout, theme: GameTheme, board: CheckersBoard): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
+  const hint = (mesh: Model, color: string, alpha: number) => world.spawn({ mesh, scale: 0, color: toColor(color, alpha), pickable: false });
+  const s: Scene = {
+    backdrop,
+    board: spawnBoard(world, l),
+    pieces: new Map(),
+    select: world.spawn({ mesh: panelMesh(1, 0), scale: 0, color: toColor(COLORS.SELECT, 0.55), pickable: false }),
+    dots: Array.from({ length: HINTS }, () => hint(discMesh(), COLORS.MOVE, 0.9)),
+    rings: Array.from({ length: HINTS }, () => hint(ringMesh(), COLORS.CAPTURE, 0.95)),
+    queue: [],
+    time: 0
+  };
+  board.forEach((p, i) => p && spawnPiece(world, l, s, i, p));
+  return s;
+}
+
+export function removeScene(world: World, s: Scene) {
+  for (const e of [s.backdrop, ...s.board, ...Array.from(s.pieces.values(), (v) => v.root), s.select, ...s.dots, ...s.rings]) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, l: Layout, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+  for (const e of s.board) world.despawn(e);
+  s.board = spawnBoard(world, l);
+}
+
+/** Puts every piece back where the board has it (a new game): the old ones go, fresh ones are set down. */
+export function resetPieces(world: World, l: Layout, s: Scene, board: CheckersBoard) {
+  for (const v of s.pieces.values()) world.despawn(v.root);
+  s.pieces.clear();
+  s.queue = [];
+  board.forEach((p, i) => p && spawnPiece(world, l, s, i, p));
+}
+
+// ── Hints ─────────────────────────────────────────────────────────────
+
+/** The picked piece's square glows; where it may go shows a green dot (a slide) or a red ring (a jump). */
+export function showHints(world: World, l: Layout, s: Scene, selected: number, targets: number[], captures: number[]) {
+  const updates = world.transforms;
+  if (selected >= 0) {
+    const [x, y] = squareCentre(l, selected);
+    updates.position(s.select, x, y, SURFACE + 0.05);
+    updates.scale(s.select, l.cell, l.cell, 1);
+  } else updates.scale(s.select, 0);
+  let d = 0;
+  let r = 0;
+  for (const t of targets) {
+    const capture = captures.includes(t);
+    const e = capture ? s.rings[r++] : s.dots[d++];
+    if (e == null) continue;
+    const [x, y] = squareCentre(l, t);
+    updates.position(e, x, y, SURFACE + 0.12);
+    updates.scale(e, capture ? l.cell : l.cell * 0.32);
+  }
+  for (; d < HINTS; d++) updates.scale(s.dots[d]!, 0);
+  for (; r < HINTS; r++) updates.scale(s.rings[r]!, 0);
+  updates.flush();
+}
+
+/** The picked piece lifts a little off the board. */
+export function lift(world: World, l: Layout, s: Scene, index: number, up: boolean) {
+  const v = s.pieces.get(index);
+  if (v) world.animate(v.root, { position: at(l, index, SURFACE + (up ? l.cell * 0.12 : 0)) }, { duration: 0.12 });
+}
+
+// ── Moves ─────────────────────────────────────────────────────────────
+
+/**
+ * A piece goes from `from` along `path` (its landing squares), sliding or hopping over the pieces it
+ * takes (which pop and go as it clears them), and is crowned if it becomes a king. `delay` starts it later.
+ */
+export function movePiece(world: World, l: Layout, s: Scene, from: number, path: number[], captured: number[], king: Piece | null, delay = 0) {
+  const v = s.pieces.get(from);
+  if (!v) return;
+  s.pieces.delete(from);
+  const jump = captured.length > 0;
+  const per = jump ? HOP_TIME : SLIDE_TIME;
+  const keys: { position: Vec3; at: number }[] = [];
+  let prev = from;
+  path.forEach((to, k) => {
+    const [ax, ay] = squareCentre(l, prev);
+    const [bx, by] = squareCentre(l, to);
+    if (jump) keys.push({ position: [(ax + bx) / 2, (ay + by) / 2, SURFACE + l.cell * 0.55], at: (k + 0.5) / path.length });
+    keys.push({ position: [bx, by, SURFACE], at: (k + 1) / path.length });
+    prev = to;
+  });
+  world.stopAnimation(v.root);
+  world.animate(v.root, keys, { duration: per * path.length, delay, path: jump ? 'smooth' : 'linear', easing: 'easeInOut' });
+  captured.forEach((sq, k) => {
+    const c = s.pieces.get(sq);
+    if (!c) return;
+    s.pieces.delete(sq);
+    const when = delay + per * (k + 0.55);
+    world.animate(c.root, [{ scale: l.cell * 1.15, at: 0.3 }, { scale: 0.01 }], { duration: 0.22, delay: when, easing: 'easeIn' });
+    world.set(c.root, { lifetime: when + 0.3 });
+    const [x, y] = squareCentre(l, sq);
+    queueBurst(world, l, s, [x, y, SURFACE + l.cell * 0.15], when);
+  });
+  const dest = path[path.length - 1]!;
+  s.pieces.set(dest, v);
+  if (king) crown(world, v, king, true);
+}
+
+/** Splinters where a piece is taken, at its moment. */
+function queueBurst(world: World, l: Layout, s: Scene, position: Vec3, delay: number) {
+  s.queue.push({
+    at: s.time + delay,
+    run: () =>
+      effects.sparkle(world, {
+        position,
+        count: 16,
+        size: l.cell * 0.07,
+        speed: l.cell * 2.5,
+        lifetime: 0.55,
+        gravity: -l.cell * 4,
+        colors: [toColor('#FFFFFF'), toColor(COLORS.GOLD)]
+      })
+  });
+}
+
+/** Runs the scene's queued bursts; called once a frame. */
+export function stepScene(s: Scene, dt: number) {
+  s.time += dt;
+  for (let i = s.queue.length - 1; i >= 0; i--)
+    if (s.queue[i]!.at <= s.time) {
+      const [q] = s.queue.splice(i, 1);
+      q!.run();
+    }
+}
+
+/** The game won: confetti over the board, the red pieces hop. */
+export function celebrate(world: World, l: Layout, s: Scene, board: CheckersBoard) {
+  for (const [i, v] of s.pieces) {
+    if (board[i]?.player !== 'red') continue;
+    const [x, y] = squareCentre(l, i);
+    world.animate(v.root, [{ position: [x, y, SURFACE + l.cell * 0.5], at: 0.4 }, { position: [x, y, SURFACE] }], {
+      duration: 0.45,
+      delay: 0.3 + (Math.floor(i / 8) + (i % 8)) * 0.04,
+      easing: 'easeOut'
+    });
+  }
+  effects.confetti(world, {
+    position: [0, 0, l.cell],
+    count: 70,
+    size: l.cell * 0.12,
+    speed: l.size * 1.3,
+    lifetime: 1.3,
+    gravity: -l.size * 2.4,
+    colors: ['#FFD700', '#E53935', '#4CAF50', '#2196F3'].map((c) => toColor(c))
+  });
+}

package/src/games/color-switch/ColorSwitch.tsx

@@ -0,0 +1,75 @@
+// Color Switch's screen, on the Nayan engine: the rings, stars and ball are one 3D scene (an
+// orthographic camera following the ball up the field), under Playtura's scoreboard, controls and
+// modals. The play is in ColorSwitchGame.ts, what it draws in ColorSwitchScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place, so the GPU view is
+// never rebuilt. JS steps the ball and the rings (a few numbers) and the world once a frame; hops,
+// colour changes and the crash animate in the engine's Rust core.
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { scoreColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, LIGHT, TIME_LIMIT } from './ColorSwitchConstants';
+import { createGame, dispose, type GameEvent, jump, reset, setLayout, setTheme, start, tick } from './ColorSwitchGame';
+
+const SOUNDS = GAME_SOUNDS.COLOR_SWITCH;
+
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
+  jump: { sound: SOUNDS.JUMP, haptic: HapticType.LIGHT },
+  pass: { sound: SOUNDS.PASS, haptic: HapticType.MEDIUM },
+  color: { sound: SOUNDS.COLOR_CHANGE, haptic: HapticType.SUCCESS },
+  crash: { sound: SOUNDS.GAME_OVER, haptic: HapticType.ERROR }
+};
+
+export const ColorSwitch = engineGame(GAME_IDS.COLOR_SWITCH, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [time, setTime] = useLiveState(TIME_LIMIT);
+
+  // A win after two minutes, a loss on a crash
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.COLOR_SWITCH,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => setLayout(g, getLayout(width, height, offset)),
+    // Hops on touch-down, as the original game did
+    drag: (g, e) => {
+      if (e.phase === 'start') jump(g);
+    },
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.SUCCESS),
+    onStop: (fx) => fx(null, HapticType.MEDIUM),
+    // A win's sound and haptic (a crash's played as it happened)
+    onOver: (fx, s) => {
+      if (s === 'win') fx(GAME_SOUNDS.WELL_DONE, HapticType.SUCCESS);
+    },
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onTime = setTime;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), timerColumn(time, theme, 0)]}
+      subtext="Tap to jump through!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU WON!' : 'GAME OVER',
+        message: status === 'win' ? 'You survived 2 minutes!' : 'Wrong color!',
+        scoreLabel: 'Final Score',
+        score,
+        buttonText: 'Switch Again!'
+      })}
+    />
+  );
+});

package/src/games/color-switch/ColorSwitchConstants.ts

@@ -0,0 +1,61 @@
+// Color Switch's rules, physics, timings and layout. Rules, physics (per 60 Hz tick, in points) and
+// scoring match the original version (games/color-switch), so scores and feel carry over.
+import { frontLight } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+/** The four colors, one per quarter of every ring (quarter k from k x 90 degrees, clockwise on screen). */
+export const GAME_COLORS = ['#FF6B6B', '#FFE66D', '#4ECDC4', '#A855F7'] as const;
+export const TIME_LIMIT = 120; // seconds; surviving them wins
+export const POINTS_PER_PASS = 1000;
+
+// ── Physics (per 60 Hz tick) ──────────────────────────────────────────
+
+export const STEP_MS = 1000 / 60;
+export const STEP_TOLERANCE_MS = 2;
+export const MAX_PENDING_MS = 50;
+export const GRAVITY = 0.2;
+export const JUMP_VELOCITY = -4.5;
+export const MAX_VELOCITY = 12;
+export const ROTATION_SPEED = 0.017; // every ring keeps this speed for the entire run
+export const FORGIVENESS = Math.PI / 15; // a ring's colour boundaries forgive this much either side
+export const SPAWN_MARGIN = 100;
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** Lit from the upper left; faces toward the camera (+z) keep their exact color. */
+export const LIGHT = frontLight([-0.45, 0.55, 1], 0.45);
+
+// ── Layout (view points; the field's y runs down and the camera follows the ball up it) ──
+
+const TABLET_WIDTH = 640;
+
+export type Layout = {
+  width: number;
+  height: number;
+  /** The field's top edge in the view (the original canvas sat centred under the header, as tall as the window). */
+  top: number;
+  fieldHeight: number;
+  ballRadius: number;
+  ringRadius: number;
+  ringThickness: number;
+  gap: number;
+  starRadius: number;
+  ballStartY: number;
+};
+
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const tablet = width > TABLET_WIDTH;
+  return {
+    width,
+    height,
+    top: offset / 2,
+    fieldHeight: height,
+    ballRadius: tablet ? 14 : 11,
+    ringRadius: tablet ? 150 : 120,
+    ringThickness: tablet ? 16 : 13,
+    gap: tablet ? 550 : 450,
+    starRadius: tablet ? 10 : 8,
+    ballStartY: height * 0.9
+  };
+}