@nayan-ui/games 1.19.0 → 1.20.0

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

@@ -0,0 +1,329 @@
+// 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

@@ -0,0 +1,220 @@
+// 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

@@ -0,0 +1,82 @@
+// 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!'
+      })}
+    />
+  );
+});