@nayan-ui/games 1.20.0 → 1.21.0

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

@@ -1,329 +0,0 @@
-// Color Switch's play, with no React: build a game with `createGame`, give it a layout, `start` it and
-// `tick` it every frame. Tap to hop the ball up through spinning rings; it may only cross a ring
-// through the quarter of its own colour. Stars between the rings change its colour. Each ring passed
-// scores 1,000; surviving two minutes wins, touching the wrong colour or dropping off the screen loses.
-//
-// Ported step for step from the original version's UI-thread physics and service (games/color-switch), at
-// the same fixed 60 Hz steps: the ball falls, the camera follows, the rings turn (from one shared
-// tick), crossings and stars are checked, new rings spawn above and old ones are dropped below.
-import { type Camera, World } from '@nayan-ui/engine';
-import type { GameTheme } from '../../services/ThemeService';
-import {
-  FORGIVENESS,
-  GAME_COLORS,
-  GRAVITY,
-  JUMP_VELOCITY,
-  type Layout,
-  MAX_PENDING_MS,
-  MAX_VELOCITY,
-  POINTS_PER_PASS,
-  ROTATION_SPEED,
-  SPAWN_MARGIN,
-  STEP_MS,
-  STEP_TOLERANCE_MS,
-  TIME_LIMIT
-} from './ColorSwitchConstants';
-import {
-  buildScene,
-  frame,
-  hop,
-  placeBall,
-  recolor,
-  removeScene,
-  resetBall,
-  type Scene,
-  setSceneTheme,
-  shatter,
-  syncField,
-  turnRing
-} from './ColorSwitchScene';
-
-export type Phase = 'ready' | 'playing' | 'over';
-/** jump: a hop; pass: a ring cleared; color: a star caught; crash: the wrong colour, or off the screen. */
-export type GameEvent = 'jump' | 'pass' | 'color' | 'crash';
-
-export type Ring = { id: string; y: number; rotationSpeed: number; rotationBase: number; passed: boolean };
-export type Star = { id: string; y: number; colorIndex: number };
-
-const WORLD_CAPACITY = 300; // the rings and stars on screen, the ball, the backdrop, and bursts
-const COLORS = GAME_COLORS.length;
-const TWO_PI = Math.PI * 2;
-const QUADRANT = Math.PI / 2;
-
-let ids = 0;
-const ring = (y: number): Ring => ({
-  id: `r${ids++}`,
-  y,
-  rotationSpeed: ROTATION_SPEED * (Math.random() < 0.5 ? 1 : -1),
-  rotationBase: Math.random() * TWO_PI,
-  passed: false
-});
-/** A star of any colour but the ball's. */
-const star = (y: number, ballColor: number): Star => {
-  let colorIndex = ballColor;
-  while (colorIndex === ballColor) colorIndex = Math.floor(Math.random() * COLORS);
-  return { id: `s${ids++}`, y, colorIndex };
-};
-export const ringRotation = (r: Ring, tick: number) => r.rotationBase + r.rotationSpeed * tick;
-const quarterAt = (angle: number, rotation: number) => {
-  let a = (angle - rotation) % TWO_PI;
-  if (a < 0) a += TWO_PI;
-  return Math.floor(a / QUADRANT) % 4;
-};
-/** Whether the ring's colour at an angle is the ball's (forgiving the boundaries a little). */
-const safeAt = (angle: number, rotation: number, color: number) =>
-  quarterAt(angle, rotation) === color || quarterAt(angle + FORGIVENESS, rotation) === color || quarterAt(angle - FORGIVENESS, rotation) === color;
-
-export function createGame(theme: GameTheme) {
-  const world = new World(WORLD_CAPACITY);
-  const camera: Camera = { eye: [0, 0, 240], target: [0, 0, 0], fov: 1, ortho: 1 };
-  const g = {
-    world,
-    camera,
-    theme,
-    layout: null as Layout | null,
-    scene: null as Scene | null,
-    phase: 'ready' as Phase,
-    rings: [] as Ring[],
-    stars: [] as Star[],
-    ballY: 0,
-    velocity: 0,
-    /** The ball's burst: play stops and the round ends a moment later. */
-    crashed: false,
-    color: 0,
-    cameraY: 0,
-    /** Physics steps taken; every ring's rotation follows from it. */
-    tick: 0,
-    highestY: Infinity,
-    passed: 0,
-    /** Score and the countdown live in the engine (Rust), advanced by world.update. */
-    get score() {
-      return world.scoreboard.score;
-    },
-    get timeLeft() {
-      return world.scoreboard.shownSeconds;
-    },
-    won: false,
-    pending: 0,
-    // UI hooks, set by the screen.
-    onPhase: (_p: Phase) => {},
-    onScore: (_s: number) => {},
-    onTime: (_t: number) => {},
-    onEvent: (_e: GameEvent) => {}
-  };
-  world.scoreboard.reset(0, TIME_LIMIT);
-  world.scoreboard.handlers = {
-    onSecond: (t) => g.onTime(t),
-    // Two minutes survived is a win
-    onTimeUp: () => g.phase === 'playing' && end(g, true)
-  };
-  return g;
-}
-export type Game = ReturnType<typeof createGame>;
-
-// ── Scene ─────────────────────────────────────────────────────────────
-
-/** Lays the field out for the view (first layout, header height, rotation); a fresh preview if nothing's laid out yet. */
-export function setLayout(g: Game, l: Layout) {
-  const first = !g.layout;
-  if (g.scene) removeScene(g.world, g.scene);
-  g.layout = l;
-  g.scene = buildScene(g.world, l, g.theme);
-  if (first) preview(g);
-  else resetBall(g.world, l, g.scene, g.color);
-  draw(g);
-}
-
-export function setTheme(g: Game, theme: GameTheme) {
-  g.theme = theme;
-  if (g.scene) setSceneTheme(g.world, g.scene, theme);
-}
-
-function draw(g: Game) {
-  const { layout: l, scene: s } = g;
-  if (!l || !s) return;
-  syncField(g.world, l, s, g.rings, g.stars);
-  for (const r of g.rings) turnRing(g.world, s, r.id, ringRotation(r, g.tick));
-  placeBall(g.world, l, s, g.ballY);
-  frame(g.world, l, s, g.camera, g.cameraY);
-}
-
-/** The ball and camera where a game starts. */
-function home(g: Game, l: Layout) {
-  g.ballY = l.ballStartY;
-  g.cameraY = l.ballStartY - l.fieldHeight * 0.65;
-  g.pending = 0;
-  g.crashed = false;
-  g.passed = 0;
-}
-
-/** Three rings waiting above the ball, with stars between them (the idle screen). */
-function preview(g: Game) {
-  const l = g.layout;
-  if (!l) return;
-  home(g, l);
-  g.velocity = 0;
-  g.color = 0;
-  g.rings = [];
-  g.stars = [];
-  g.highestY = Infinity;
-  const first = l.ballStartY - l.gap * 0.8;
-  for (let i = 0; i < 3; i++) {
-    const y = first - i * l.gap;
-    g.rings.push(ring(y));
-    g.highestY = Math.min(g.highestY, y);
-    if (i > 0) g.stars.push(star(y + l.gap / 2, 0));
-  }
-  if (g.scene) resetBall(g.world, l, g.scene, 0);
-}
-
-// ── Run ───────────────────────────────────────────────────────────────
-
-/** Starts from the preview: a random colour, the waiting rings kept (extended to five), the ball already hopping. */
-export function start(g: Game) {
-  const l = g.layout;
-  if (g.phase !== 'ready' || !l) return;
-  home(g, l);
-  g.color = Math.floor(Math.random() * COLORS);
-  g.rings = g.rings.map((r) => ({ ...r, passed: false }));
-  g.highestY = g.rings.reduce((h, r) => Math.min(h, r.y), Infinity);
-  const first = l.ballStartY - l.gap * 0.8;
-  for (let i = g.rings.length; i < 5; i++) {
-    const y = first - i * l.gap;
-    g.rings.push(ring(y));
-    g.highestY = Math.min(g.highestY, y);
-    if (i > 0 && g.stars.length < i) g.stars.push(star(y + l.gap / 2, g.color));
-  }
-  g.velocity = JUMP_VELOCITY;
-  g.world.scoreboard.reset();
-  g.world.scoreboard.startCountdown(TIME_LIMIT);
-  g.won = false;
-  g.phase = 'playing';
-  if (g.scene) resetBall(g.world, l, g.scene, g.color);
-  draw(g);
-  g.onScore(0);
-  g.onTime(TIME_LIMIT);
-  g.onPhase('playing');
-}
-
-/** Back to the idle preview (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
-export function reset(g: Game) {
-  g.world.scoreboard.reset(0, TIME_LIMIT);
-  g.won = false;
-  g.phase = 'ready';
-  preview(g);
-  draw(g);
-  g.onScore(0);
-  g.onTime(TIME_LIMIT);
-  g.onPhase('ready');
-}
-
-export function dispose(g: Game) {
-  g.world.dispose();
-}
-
-export function tick(g: Game, dt: number) {
-  if (g.world.isDisposed) return;
-  if (g.phase === 'playing') {
-    // Fixed 60 Hz steps; a long frame catches up at most a few
-    let pending = Math.min(g.pending + dt * 1000, MAX_PENDING_MS);
-    while (g.phase === 'playing' && !g.crashed && pending >= STEP_MS - STEP_TOLERANCE_MS) {
-      pending -= STEP_MS;
-      step(g);
-    }
-    g.pending = pending;
-    draw(g);
-  }
-  g.world.update(dt);
-}
-
-function end(g: Game, won: boolean) {
-  g.world.scoreboard.stop();
-  g.won = won;
-  g.phase = 'over';
-  g.onPhase('over');
-}
-
-/** One 60 Hz tick, in the original loop's order. */
-function step(g: Game) {
-  const l = g.layout!;
-  g.velocity += GRAVITY;
-  const ny = g.ballY + g.velocity;
-  g.velocity = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, g.velocity));
-  // The camera rises to keep the ball 65% of the way down, and never follows it back down
-  const delta = ny - l.fieldHeight * 0.65 - g.cameraY;
-  const camera = delta < 0 ? g.cameraY + delta * 0.12 : g.cameraY;
-  g.tick += 1;
-
-  // Hit the ground (the bottom of the screen): it blasts and the round ends
-  const ground = camera + l.fieldHeight - l.top;
-  if (ny + l.ballRadius >= ground) {
-    g.ballY = ground - l.ballRadius;
-    return crash(g);
-  }
-
-  const outer = l.ringRadius + l.ringThickness / 2;
-  const inner = l.ringRadius - l.ringThickness / 2;
-  for (const r of g.rings) {
-    // Every ring collides, passed or not: falling back down through one is as deadly as jumping up
-    const dy = ny - r.y;
-    const dist = Math.abs(dy);
-    // The ball's edge in the ring's band: only the colour straight above or below it counts
-    if (dist + l.ballRadius >= inner && Math.max(0, dist - l.ballRadius) <= outer) {
-      if (!safeAt(Math.atan2(dy, 0), ringRotation(r, g.tick), g.color)) return crash(g);
-    }
-    if (!r.passed && ny < r.y - outer - l.ballRadius * 2) {
-      r.passed = true;
-      g.passed += 1;
-      g.onScore(g.world.scoreboard.add(POINTS_PER_PASS));
-      g.onEvent('pass');
-    }
-  }
-
-  g.ballY = ny;
-  g.cameraY = camera;
-  const below = camera + l.fieldHeight + SPAWN_MARGIN;
-
-  // A star caught changes the ball's colour; stars well below the screen go
-  g.stars = g.stars.filter((st) => {
-    if (Math.abs(g.ballY - st.y) < l.ballRadius + l.starRadius) {
-      g.color = st.colorIndex;
-      if (g.scene) recolor(g.world, l, g.scene, st.colorIndex, g.ballY, st.id);
-      g.onEvent('color');
-      return false;
-    }
-    return st.y < below;
-  });
-
-  // A new ring (and star) above the screen, and rings well below it dropped
-  if (g.highestY > camera - SPAWN_MARGIN) {
-    const y = g.highestY - l.gap;
-    g.rings.push(ring(y));
-    g.stars.push(star(y + l.gap / 2, g.color));
-    g.highestY = y;
-  }
-  if (g.rings.some((r) => r.y >= below)) g.rings = g.rings.filter((r) => r.y < below);
-}
-
-/** How long the blast plays before the round ends (and the game-over card covers it). */
-const CRASH_DELAY = 0.7;
-
-function crash(g: Game) {
-  const { layout: l, scene: s } = g;
-  if (g.crashed) return;
-  g.crashed = true;
-  g.world.scoreboard.stop();
-  if (l && s) shatter(g.world, l, s, g.ballY, g.color);
-  g.onEvent('crash');
-  g.world.after(CRASH_DELAY, () => g.phase === 'playing' && g.crashed && end(g, false));
-}
-
-// ── The tap ───────────────────────────────────────────────────────────
-
-/** A finger down hops the ball up. */
-export function jump(g: Game) {
-  if (g.phase !== 'playing' || g.crashed) return;
-  g.velocity = JUMP_VELOCITY;
-  if (g.layout && g.scene) hop(g.world, g.layout, g.scene);
-  g.onEvent('jump');
-}

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

@@ -1,220 +0,0 @@
-// Everything Color Switch draws: glossy rings (real tori, a quarter in each of the four colors) spinning
-// up the screen, a spinning colour-changer star between each pair, and the bouncing ball, under an
-// orthographic camera looking straight at the field (one world unit per point) that follows the ball
-// up. The ball pops on a hop, a halo bursts from it when it changes colour, and it shatters on a crash.
-// Every ring is one mesh, and so is every star.
-//
-// The field's points (x right, y down, as the rules use) map to the world with y flipped; the camera
-// rises with the rules' camera, the backdrop staying fixed behind.
-import {
-  type Camera,
-  type Color,
-  type Entity,
-  extrude,
-  merge,
-  type Model,
-  type MutableQuat,
-  Path,
-  quat,
-  tube,
-  type Vec3,
-  type World
-} from '@nayan-ui/engine';
-import type { GameTheme } from '../../services/ThemeService';
-import { setBackdropTheme, spawnBackdrop } from '../shared/EngineBackdrop';
-import { popAndBurst } from '../shared/EngineBlasts';
-import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
-import { toColor } from '../shared/EngineUtils';
-import { GAME_COLORS, type Layout } from './ColorSwitchConstants';
-
-const meshes = new Map<string, Model>();
-const cached = (key: string, build: () => Model) => {
-  let m = meshes.get(key);
-  if (!m) {
-    m = cacheGameAsset('color-switch/ColorSwitchScene:' + key, build);
-    meshes.set(key, m);
-  }
-  return m;
-};
-const BACKDROP_DEPTH = 60;
-const EYE_DISTANCE = 240;
-
-/** A circle's points from angle `from` to `to` (world radians), radius 1. */
-const arc = (from: number, to: number, n = 14): Vec3[] =>
-  Array.from({ length: n + 1 }, (_, i) => {
-    const a = from + ((to - from) * i) / n;
-    return [Math.cos(a), Math.sin(a), 0] as Vec3;
-  });
-
-/**
- * A ring of radius 1 whose tube is `thickness` across: quarter k in GAME_COLORS[k], running clockwise
- * on screen from k x 90 degrees (the screen's angles run clockwise, the world's the other way).
- */
-const ringMesh = (thickness: number) =>
-  cached(`cs-ring:${thickness.toFixed(3)}`, () =>
-    createShape(
-      merge(
-        GAME_COLORS.map((c, k) => ({
-          geometry: tube(arc((-k * Math.PI) / 2, (-(k + 1) * Math.PI) / 2), { radius: thickness / 2, sides: 16, smoothness: 3, caps: false }),
-          color: toColor(c)
-        }))
-      ),
-      { center: false, shine: 0.65 }
-    )
-  );
-/** A thin white circle, radius 1, tinted to the ball's new colour as it bursts out. */
-const haloMesh = () =>
-  cached('cs-halo', () => createShape(tube(arc(0, Math.PI * 2, 32), { radius: 0.06, sides: 10, smoothness: 2, caps: false }), { center: false }));
-/** A five-pointed star one unit across with some depth. */
-const starMesh = () => cached('cs-star', () => createShape(extrude(new Path().addStar(0, 0, 0.5, 0.22), { depth: 0.3 }), { shine: 0.6 }));
-
-// ── Spawning ──────────────────────────────────────────────────────────
-
-export type Scene = {
-  syncedRings?: object;
-  syncedStars?: object;
-  ringCount?: number;
-  starCount?: number;
-  backdrop: Entity;
-  ball: Entity;
-  halo: Entity;
-  rings: Map<string, Entity>;
-  stars: Map<string, Entity>;
-};
-
-/** A field point (y down) in the world. */
-export const toWorld = (l: Layout, x: number, y: number, z = 0): Vec3 => [x - l.width / 2, -y, z];
-export const colorOf = (i: number): Color => toColor(GAME_COLORS[i] ?? GAME_COLORS[0]!);
-
-export function buildScene(world: World, l: Layout, theme: GameTheme): Scene {
-  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
-  const ball = world.spawn({ mesh: 'sphere', scale: l.ballRadius * 2, color: colorOf(0), pickable: false });
-  const halo = world.spawn({ mesh: haloMesh(), scale: 0, color: [1, 1, 1, 0], pickable: false });
-  return { backdrop, ball, halo, rings: new Map(), stars: new Map() };
-}
-
-export function removeScene(world: World, s: Scene) {
-  for (const e of [s.backdrop, s.ball, s.halo, ...Array.from(s.rings.values()), ...Array.from(s.stars.values())]) world.despawn(e);
-}
-
-export function setSceneTheme(world: World, s: Scene, theme: GameTheme) {
-  setBackdropTheme(world, s.backdrop, theme);
-}
-
-/** Frames the field with the rules' camera (its top edge's field y), the backdrop kept fixed on screen. */
-export function frame(world: World, l: Layout, s: Scene, camera: Camera, cameraY: number) {
-  // A field point shows at view y = top + (y - cameraY): the view's centre is field y (cameraY + height / 2 - top)
-  const centre = -(cameraY + l.height / 2 - l.top);
-  camera.eye = [0, centre, EYE_DISTANCE];
-  camera.target = [0, centre, 0];
-  camera.ortho = l.height / 2;
-  world.set(s.backdrop, { position: [-l.width / 2, centre + l.height / 2, -BACKDROP_DEPTH] });
-}
-
-/** Keeps the rings and stars in step with the rules' lists: new ones appear, gone ones go. */
-export function syncField(
-  world: World,
-  l: Layout,
-  s: Scene,
-  rings: { id: string; y: number }[],
-  stars: { id: string; y: number; colorIndex: number }[]
-) {
-  if (s.syncedRings === rings && s.syncedStars === stars && s.ringCount === rings.length && s.starCount === stars.length) return;
-  s.syncedRings = rings;
-  s.syncedStars = stars;
-  s.ringCount = rings.length;
-  s.starCount = stars.length;
-  const live = new Set<string>();
-  for (const r of rings) {
-    live.add(r.id);
-    if (!s.rings.has(r.id))
-      s.rings.set(
-        r.id,
-        world.spawn({ mesh: ringMesh(l.ringThickness / l.ringRadius), position: toWorld(l, l.width / 2, r.y), scale: l.ringRadius, pickable: false })
-      );
-  }
-  for (const [id, e] of s.rings)
-    if (!live.has(id)) {
-      world.despawn(e);
-      s.rings.delete(id);
-    }
-  live.clear();
-  for (const st of stars) {
-    live.add(st.id);
-    if (!s.stars.has(st.id))
-      s.stars.set(
-        st.id,
-        world.spawn({
-          mesh: starMesh(),
-          position: toWorld(l, l.width / 2, st.y, 4),
-          scale: l.starRadius * 2.4,
-          color: colorOf(st.colorIndex),
-          spin: [0, 2.2, 0],
-          pickable: false
-        })
-      );
-  }
-  for (const [id, e] of s.stars)
-    if (!live.has(id)) {
-      world.despawn(e);
-      s.stars.delete(id);
-    }
-}
-
-// Scratch for the per-frame turn (world.set copies it).
-const TURN: MutableQuat = [0, 0, 0, 1];
-
-/** A ring turned to `rotation` (radians, clockwise on screen). */
-export function turnRing(world: World, s: Scene, id: string, rotation: number) {
-  const e = s.rings.get(id);
-  if (e != null) world.set(e, { rotation: quat.z(-rotation, TURN) });
-}
-
-export function placeBall(world: World, l: Layout, s: Scene, y: number) {
-  world.set(s.ball, { position: toWorld(l, l.width / 2, y, 6) });
-}
-
-// ── Feedback ──────────────────────────────────────────────────────────
-
-/** A little squash on every hop. */
-export function hop(world: World, l: Layout, s: Scene) {
-  const d = l.ballRadius * 2;
-  world.animate(s.ball, [{ scale: d * 1.14, at: 0.3 }, { scale: d }], { duration: 0.22 });
-}
-
-/** A star caught: the ball takes its colour with a pop, and a halo of it bursts out and fades. */
-export function recolor(world: World, l: Layout, s: Scene, colorIndex: number, y: number, starId: string | null) {
-  const c = colorOf(colorIndex);
-  const d = l.ballRadius * 2;
-  world.set(s.ball, { color: c });
-  world.animate(s.ball, [{ scale: d * 1.3, at: 0.25 }, { scale: d }], { duration: 0.3 });
-  world.stopAnimation(s.halo);
-  world.set(s.halo, { position: toWorld(l, l.width / 2, y, 5), scale: l.ballRadius, color: [c[0], c[1], c[2], 0.9] });
-  world.animate(s.halo, { scale: l.ballRadius * 2.6, color: [c[0], c[1], c[2], 0] }, { duration: 0.42, easing: 'easeOut' });
-  if (starId) {
-    const star = s.stars.get(starId);
-    if (star != null) world.set(star, { scale: 0 });
-  }
-}
-
-/** A crash: the ball bursts into its colour and fades where it was caught. */
-/** The ball's crash, as Block Blast's cleared blocks go: it swells, flashes white and shrinks away in a burst of its colour. */
-export function shatter(world: World, l: Layout, s: Scene, y: number, colorIndex: number) {
-  const c = colorOf(colorIndex);
-  const size = l.ballRadius * 2;
-  world.stopAnimation(s.ball);
-  popAndBurst(
-    world,
-    s.ball,
-    { scale: size, color: c, duration: 0.45 },
-    { position: toWorld(l, l.width / 2, y, 10), size: size * 1.6, color: c, count: 14 }
-  );
-}
-
-/** Back to a whole ball of a colour (a new game or the preview). */
-export function resetBall(world: World, l: Layout, s: Scene, colorIndex: number) {
-  world.stopAnimation(s.ball);
-  world.stopAnimation(s.halo);
-  world.set(s.ball, { scale: l.ballRadius * 2, color: colorOf(colorIndex) });
-  world.set(s.halo, { scale: 0 });
-}

package/src/games/colors-sort/ColorsSort.tsx

@@ -1,82 +0,0 @@
-// Colors Sort's screen, on the Nayan engine: the glass tubes and pucks are one 3D scene (an
-// orthographic camera looking down a little from in front), under Playtura's scoreboard, controls and
-// modals. The rules are in ColorsSortGame.ts, what it draws in ColorsSortScene.ts.
-//
-// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
-// repaints the glass and backdrop, so the GPU view is never rebuilt. Lifts, moves and corks animate in
-// the engine's Rust core; JS hit-tests taps and steps the clock and the world once a frame.
-import { HapticType } from '../../services/HapticsService';
-import { calculateTimeBasedScore } from '../../services/ScoringService';
-import { GAME_SOUNDS } from '../../services/SoundsService';
-import { formatTime, GAME_IDS } from '../../services/UtilsService';
-import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
-import { timerColumn } from '../shared/EngineHud';
-import { useEngineGame } from '../shared/useEngineGame';
-import { useLiveState } from '../shared/useLiveState';
-import { getLayout, LIGHT, SCORE_BASE, TIME_LIMIT } from './ColorsSortConstants';
-import { createGame, dispose, type GameEvent, reset, setLayout, setTheme, start, tap, tick } from './ColorsSortGame';
-
-const SOUNDS = GAME_SOUNDS.COLORS_SORT;
-
-/** Each event's sound and haptic, as the original version played them. */
-const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
-  pick: { sound: SOUNDS.PICK, haptic: HapticType.LIGHT },
-  drop: { sound: SOUNDS.DESELECT, haptic: HapticType.LIGHT },
-  refuse: { sound: SOUNDS.MISS, haptic: HapticType.LIGHT },
-  move: { sound: SOUNDS.MATCH, haptic: HapticType.MEDIUM },
-  complete: { sound: SOUNDS.COMPLETE, haptic: HapticType.SUCCESS }
-};
-
-const timedOutFormatter = () => formatTime(TIME_LIMIT);
-
-export const ColorsSort = engineGame(GAME_IDS.COLORS_SORT, (props) => {
-  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
-
-  // A win scores by how fast it was sorted; a time-out or cancel scores 0 (a win's sound already
-  // played with its last move)
-  const { game, theme, screen, gameOver } = useEngineGame(props, {
-    gameId: GAME_IDS.COLORS_SORT,
-    create: createGame,
-    start,
-    reset,
-    dispose,
-    tick,
-    setTheme,
-    resize: (g, width, height, offset) => {
-      const l = getLayout(width, height, offset);
-      setLayout(g, l);
-      return l.shelves[0]?.width;
-    },
-    tap,
-    outcome: (g) => (g.timedOut ? 'lose' : 'win'),
-    reportScore: (g, status) => (status === 'win' ? calculateTimeBasedScore(g.time, TIME_LIMIT, SCORE_BASE) : 0),
-    sounds: SOUNDS,
-    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
-    onOver: (fx, status) => {
-      if (status !== 'win') fx(SOUNDS.GAME_OVER, HapticType.ERROR);
-    },
-    wire: (g, fx) => {
-      g.onTime = setTimeLeft;
-      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
-    }
-  });
-
-  const timedOut = game.timedOut;
-
-  return (
-    <EngineGameScreen
-      {...screen}
-      light={LIGHT}
-      columns={[timerColumn(timeLeft, theme)]}
-      subtext="Sort colors!"
-      gameOver={gameOver({
-        title: timedOut ? 'TIME UP!' : 'SORTED!',
-        message: timedOut ? 'You ran out of time!' : 'All colors sorted!',
-        scoreLabel: timedOut ? "Time's Up!" : 'Completion Time',
-        score: game.time,
-        formatter: timedOut ? timedOutFormatter : formatTime,
-        buttonText: 'Sort Again!'
-      })}
-    />
-  );
-});