@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/tank-1990/Tank1990Scene.ts

@@ -0,0 +1,434 @@
+// Everything Tank 1990 draws: a battlefield (themed, as the original board, with its faint grid) seen from a
+// little in front of straight down (shared/EngineTilt: an orthographic camera leaning back, one world
+// unit per point) inside a thick riveted steel frame, brick walls that crumble a layer at a time, riveted steel blocks, the golden base,
+// and tanks with tracks, turret and barrel that swing round to face where they drive. Shells are
+// glowing tracers; muzzle flashes and explosions are particle bursts. Every wall, tank and shell kind
+// is one shared mesh, so each is one instanced draw.
+//
+// Board points (x right, y down, from the board's top-left; as the rules use) map to the world with the
+// board centred on the origin, y up and z up off the field.
+import {
+  type Color,
+  effects,
+  type Entity,
+  extrude,
+  type GeometryPart,
+  lathe,
+  merge,
+  type Model,
+  Path,
+  quat,
+  shapeGeometry,
+  tube,
+  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';
+import { toColor } from '../shared/EngineUtils';
+import {
+  CLASSIC_FIELD,
+  type Direction,
+  EXPLOSION_TIME,
+  FRAME,
+  GRID_HEIGHT,
+  GRID_LINE,
+  GRID_WIDTH,
+  type Layout,
+  TANK_RATIO,
+  TURN_TIME
+} from './Tank1990Constants';
+import type { Bullet, Tank, Tile } from './Tank1990Rules';
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('tank-1990/Tank1990Scene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+type RGB = [number, number, number];
+const rgb = (css: string): RGB => {
+  const [r, g, b] = toColor(css);
+  return [r, g, b];
+};
+const c4 = (css: string): Color => toColor(css);
+const cube = () => shapeGeometry('cube');
+const sphere = () => shapeGeometry('sphere');
+const STAND_UP = quat.x(Math.PI / 2);
+const HEADING: Record<Direction, number> = { up: 0, left: Math.PI / 2, down: Math.PI, right: -Math.PI / 2 };
+export const heading = (d: Direction) => quat.z(HEADING[d]);
+const FIELD_DEPTH = 8;
+const BACKDROP_DEPTH = 25;
+
+/** Board points to the world, at height z. */
+export const toWorld = (l: Layout, x: number, y: number, z = 0): Vec3 => [x - l.boardWidth / 2, l.boardHeight / 2 - y, z];
+
+// ── Meshes (walls in cells, tanks in tank lengths) ────────────────────
+
+/** A brick wall one cell square: brick-red sides, a running bond of bricks on top over dark mortar. Damaged, it's one layer lower and darker. */
+const brickMesh = (damaged: boolean) =>
+  cached(`t90-brick-${damaged ? 1 : 2}`, () => {
+    const h = damaged ? 0.34 : 0.56;
+    const face = rgb(damaged ? '#7A3F1E' : '#A0522D');
+    const top = rgb(damaged ? '#9A6040' : '#C0764A');
+    const parts: GeometryPart[] = [
+      { geometry: cube(), position: [0, 0, h / 2], scale: [0.96, 0.96, h], color: [...rgb('#2E1A0C'), 1] },
+      { geometry: cube(), position: [0, 0, (h - 0.04) / 2], scale: [0.98, 0.98, h - 0.04], color: [...face, 1] }
+    ];
+    // A running bond: half-cell bricks, every other row shifted by a quarter
+    const rows = 4;
+    for (let r = 0; r < rows; r++) {
+      const y = -0.5 + (r + 0.5) / rows;
+      const shift = r % 2 ? -0.25 : 0;
+      for (let k = 0; k < 3; k++) {
+        const x0 = Math.max(-0.48, -0.5 + shift + k * 0.5 + 0.02);
+        const x1 = Math.min(0.48, -0.5 + shift + (k + 1) * 0.5 - 0.02);
+        if (x1 - x0 < 0.06) continue;
+        if (damaged && (r + k) % 3 === 0) continue; // chunks knocked out
+        const tint = 0.9 + ((r * 7 + k * 3) % 5) * 0.04;
+        parts.push({
+          geometry: cube(),
+          position: [(x0 + x1) / 2, y, h + 0.025],
+          scale: [x1 - x0, 1 / rows - 0.05, 0.05],
+          color: [top[0] * tint, top[1] * tint, top[2] * tint, 1]
+        });
+      }
+    }
+    return createShape(merge(parts), { center: false, shine: 0.1 });
+  });
+
+/** Gunmetal steel, for the blocks and the frame. */
+const STEEL = { edge: '#252B33', body: '#5F6B7A', plate: '#9AA6B4', rivet: '#E6EBF1' };
+
+/** A steel block one cell square: polished sides, a raised plate and four rivets on top. */
+const steelMesh = () =>
+  cached('t90-steel-v2', () => {
+    const h = 0.6;
+    const parts: GeometryPart[] = [
+      // A dark outline under gunmetal sides: it reads against a light field and a dark one alike
+      { geometry: cube(), position: [0, 0, (h - 0.02) / 2], scale: [0.98, 0.98, h - 0.02], color: [...rgb(STEEL.edge), 1] },
+      { geometry: cube(), position: [0, 0, h / 2], scale: [0.9, 0.9, h], color: [...rgb(STEEL.body), 1] },
+      { geometry: cube(), position: [0, 0, h + 0.02], scale: [0.62, 0.62, 0.04], color: [...rgb(STEEL.plate), 1] },
+      { geometry: cube(), position: [0, 0, h + 0.045], scale: [0.5, 0.5, 0.01], color: [...rgb(STEEL.body), 1] }
+    ];
+    for (const [x, y] of [
+      [-0.36, -0.36],
+      [0.36, -0.36],
+      [-0.36, 0.36],
+      [0.36, 0.36]
+    ])
+      parts.push({ geometry: sphere(), position: [x!, y!, h], scale: [0.12, 0.12, 0.08], color: [...rgb(STEEL.rivet), 1] });
+    return createShape(merge(parts), { center: false, shine: 0.85 });
+  });
+
+/** The base: a golden plinth with a star standing proud on it. */
+const baseMesh = () =>
+  cached('t90-base', () =>
+    createShape(
+      merge([
+        { geometry: shapeGeometry('roundedBox'), position: [0, 0, 0.14], scale: [0.92, 0.92, 0.28], color: [...rgb('#FFC107'), 1] },
+        { geometry: cube(), position: [0, 0, 0.29], scale: [0.7, 0.7, 0.03], color: [...rgb('#FF8F00'), 1] },
+        { geometry: extrude(new Path().addStar(0, 0, 0.32, 0.14), { depth: 0.12 }), position: [0, 0, 0.36], color: [...rgb('#FFE082'), 1] }
+      ]),
+      { center: false, shine: 0.7 }
+    )
+  );
+
+const PLAYER_PAINT = { hull: '#FFD700', top: '#FFE44D', track: '#8B7209', turret: '#FFF176', barrel: '#B8860B' };
+const ENEMY_PAINT = { hull: '#6B7D94', top: '#8A9AAE', track: '#2E3C4E', turret: '#7A8EA4', barrel: '#4A5E74' };
+
+/** A tank one unit long, facing +y: hull on two tracks with tread bars, a domed turret, and a barrel reaching past its nose. */
+const tankMesh = (player: boolean) =>
+  cached(`t90-tank-${player ? 'player' : 'enemy'}`, () => {
+    const p = player ? PLAYER_PAINT : ENEMY_PAINT;
+    const parts: GeometryPart[] = [];
+    for (const side of [1, -1]) {
+      parts.push({ geometry: shapeGeometry('roundedBox'), position: [side * 0.37, 0, 0.13], scale: [0.24, 1, 0.26], color: c4(p.track) });
+      for (let i = 0; i < 6; i++)
+        parts.push({ geometry: cube(), position: [side * 0.37, -0.42 + i * 0.168, 0.265], scale: [0.25, 0.06, 0.02], color: [0.12, 0.12, 0.12, 1] });
+    }
+    parts.push(
+      { geometry: shapeGeometry('roundedBox'), position: [0, 0, 0.22], scale: [0.56, 0.84, 0.24], color: c4(p.hull) },
+      { geometry: cube(), position: [0, -0.08, 0.345], scale: [0.46, 0.5, 0.02], color: c4(p.top) },
+      {
+        geometry: lathe(
+          [
+            [0.001, 0.2],
+            [0.12, 0.19],
+            [0.2, 0.14],
+            [0.23, 0.06],
+            [0.23, 0]
+          ],
+          { segments: 24 }
+        ),
+        position: [0, -0.04, 0.34],
+        rotation: STAND_UP,
+        color: c4(p.turret)
+      },
+      {
+        geometry: tube(
+          [
+            [0, 0.12, 0.43],
+            [0, 0.66, 0.43]
+          ],
+          { radius: 0.055, sides: 12 }
+        ),
+        color: c4(p.barrel)
+      },
+      {
+        geometry: tube(
+          [
+            [0, 0.6, 0.43],
+            [0, 0.68, 0.43]
+          ],
+          { radius: 0.075, sides: 12 }
+        ),
+        color: c4(p.barrel)
+      }
+    );
+    return createShape(merge(parts), { center: false, shine: player ? 0.55 : 0.4 });
+  });
+
+/** The field: a slab (themed) with the faint grid between cells. */
+const fieldMesh = (l: Layout, radius: number) =>
+  cached(`t90-field:${l.boardWidth}x${l.boardHeight}:${radius}`, () =>
+    createShape(
+      extrude(new Path().addRoundedRect(-l.boardWidth / 2, -l.boardHeight / 2, l.boardWidth, l.boardHeight, radius), { depth: FIELD_DEPTH }),
+      {
+        shine: 0.1
+      }
+    )
+  );
+const gridMesh = (l: Layout) =>
+  cached(`t90-grid:${l.cell}`, () => {
+    const parts: GeometryPart[] = [];
+    for (let x = 1; x < GRID_WIDTH; x++)
+      parts.push({ geometry: cube(), position: [x * l.cell - l.boardWidth / 2, 0, 0], scale: [1, l.boardHeight, 0.2] });
+    for (let y = 1; y < GRID_HEIGHT; y++)
+      parts.push({ geometry: cube(), position: [0, l.boardHeight / 2 - y * l.cell, 0], scale: [l.boardWidth, 1, 0.2] });
+    return createShape(merge(parts), { center: false });
+  });
+
+const frameWidth = (l: Layout) => Math.min(FRAME, l.cell * 0.5);
+/**
+ * A thick steel frame round the field, as the steel blocks: a raised polished band hugging the board's
+ * edge, a lighter plate along its top, and a rivet at every cell.
+ */
+const frameMesh = (l: Layout) =>
+  cached(`t90-frame:${l.boardWidth}x${l.boardHeight}`, () => {
+    const f = frameWidth(l);
+    const h = l.cell * 0.6;
+    const w = l.boardWidth;
+    const H = l.boardHeight;
+    const ring = (inset: number, depth: number, color: string, z: number): GeometryPart => ({
+      geometry: extrude(
+        new Path()
+          .addRoundedRect(-w / 2 - f + inset, -H / 2 - f + inset, w + (f - inset) * 2, H + (f - inset) * 2, Math.max(1, f * 0.5 - inset))
+          .addRect(-w / 2 - inset * 0.2, -H / 2 - inset * 0.2, w + inset * 0.4, H + inset * 0.4),
+        { depth, fillRule: 'evenodd' }
+      ),
+      position: [0, 0, z],
+      color: [...rgb(color), 1]
+    });
+    const parts: GeometryPart[] = [ring(0, h, STEEL.body, h / 2), ring(f * 0.22, h * 0.06, STEEL.plate, h + h * 0.03)];
+    const rivet = (x: number, y: number) =>
+      parts.push({ geometry: sphere(), position: [x, y, h + h * 0.06], scale: [f * 0.3, f * 0.3, f * 0.2], color: [...rgb(STEEL.rivet), 1] });
+    const mid = f / 2;
+    for (let i = 0; i <= GRID_WIDTH; i++) {
+      const x = -w / 2 + i * l.cell;
+      rivet(x, H / 2 + mid);
+      rivet(x, -H / 2 - mid);
+    }
+    for (let j = 1; j < GRID_HEIGHT; j++) {
+      const y = -H / 2 + j * l.cell;
+      rivet(-w / 2 - mid, y);
+      rivet(w / 2 + mid, y);
+    }
+    return createShape(merge(parts), { center: false, shine: 0.85 });
+  });
+
+// ── Spawning ──────────────────────────────────────────────────────────
+
+export type TankView = { body: Entity; shield: Entity; direction: Direction; shielded: boolean; x: number; y: number };
+export type Scene = {
+  backdrop: Entity;
+  field: Entity;
+  frame: Entity;
+  grid: Entity;
+  /** Each tile's wall, row by row (null where it's open ground). */
+  walls: (Entity | null)[][];
+  tanks: Map<number, TankView>;
+  bullets: Map<number, Entity>;
+};
+
+const fieldColor = (theme: GameTheme) => toColor(theme.mode === 'classic' ? CLASSIC_FIELD : theme.BOARD.SURFACE);
+const wallMesh = (t: Tile) =>
+  t.type === 'brick' ? brickMesh(t.health < 2) : t.type === 'steel' ? steelMesh() : t.type === 'base' ? baseMesh() : null;
+
+export function buildScene(world: World, l: Layout, theme: GameTheme, tiles: Tile[][]): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
+  const field = world.spawn({
+    mesh: fieldMesh(l, theme.mode === 'classic' ? 10 : 6),
+    position: [0, 0, -FIELD_DEPTH / 2],
+    color: fieldColor(theme),
+    pickable: false
+  });
+  const frame = world.spawn({ mesh: frameMesh(l), position: [0, 0, 0], pickable: false });
+  const grid = world.spawn({ mesh: gridMesh(l), position: [0, 0, 0.15], color: toColor(GRID_LINE), pickable: false });
+  const walls = tiles.map((row, y) => row.map((t, x) => spawnWall(world, l, t, x, y)));
+  return { backdrop, field, frame, grid, walls, tanks: new Map(), bullets: new Map() };
+}
+
+function spawnWall(world: World, l: Layout, t: Tile, x: number, y: number): Entity | null {
+  const mesh = wallMesh(t);
+  return mesh ? world.spawn({ mesh, position: toWorld(l, (x + 0.5) * l.cell, (y + 0.5) * l.cell), scale: l.cell, pickable: false }) : null;
+}
+
+export function removeScene(world: World, s: Scene) {
+  const units = [...Array.from(s.tanks.values(), (t) => t.body), ...Array.from(s.bullets.values())];
+  for (const e of [s.backdrop, s.field, s.frame, s.grid, ...units, ...s.walls.flat()]) if (e != null) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, l: Layout, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+  world.set(s.field, { mesh: fieldMesh(l, theme.mode === 'classic' ? 10 : 6), color: fieldColor(theme) });
+}
+
+/** A tile's wall after a hit: a layer down, or gone in a shower of rubble. */
+export function updateWall(world: World, l: Layout, s: Scene, x: number, y: number, t: Tile, was: Tile['type']) {
+  const e = s.walls[y]![x];
+  const mesh = wallMesh(t);
+  if (e != null && mesh) world.set(e, { mesh });
+  else if (e != null) {
+    world.despawn(e);
+    s.walls[y]![x] = null;
+  }
+  effects.shatter(world, {
+    position: toWorld(l, (x + 0.5) * l.cell, (y + 0.5) * l.cell, l.cell * 0.5),
+    count: mesh ? 6 : 12,
+    size: l.cell * 0.14,
+    speed: l.cell * 3,
+    direction: [0, 0, 1],
+    spread: 1.2,
+    lifetime: 0.5,
+    gravity: -l.cell * 9,
+    colors: was === 'base' ? [c4('#FFC107'), c4('#FF8F00'), c4('#5A5A5A')] : [c4('#A0522D'), c4('#6B3410'), c4('#C0764A')],
+    flash: false
+  });
+}
+
+/** Builds a fresh map's walls (a new board). */
+export function rebuildWalls(world: World, l: Layout, s: Scene, tiles: Tile[][]) {
+  for (const e of s.walls.flat()) if (e != null) world.despawn(e);
+  s.walls = tiles.map((row, y) => row.map((t, x) => spawnWall(world, l, t, x, y)));
+}
+
+// ── Tanks and shells ──────────────────────────────────────────────────
+
+const SHIELD: Color = [0.12, 0.55, 1, 0.28];
+const SHELL: Color = [2.4, 1.5, 0.45, 1];
+const SHELL_GLOW: Color = [2.2, 1.1, 0.3, 0.45];
+
+/** Puts every live tank and shell where the battle has them (spawning newcomers, clearing the gone). */
+export function syncUnits(world: World, l: Layout, s: Scene, tanks: Tank[], bullets: Bullet[], now: number) {
+  const size = l.cell * TANK_RATIO;
+  const seen = new Set<number>();
+  for (const t of tanks) {
+    if (!t.isAlive) continue;
+    seen.add(t.id);
+    let view = s.tanks.get(t.id);
+    const at = toWorld(l, t.x, t.y);
+    if (!view) {
+      const body = world.spawn({ mesh: tankMesh(t.isPlayer), position: at, rotation: heading(t.direction), scale: size, pickable: false });
+      const shield = world.spawn({ mesh: 'sphere', parent: body, position: [0, 0, 0.3], scale: 0, color: SHIELD, pickable: false });
+      view = { body, shield, direction: t.direction, shielded: false, x: t.x, y: t.y };
+      s.tanks.set(t.id, view);
+      // A new tank grows in
+      world.set(body, { scale: size * 0.3 });
+      world.animate(body, { scale: size }, { duration: 0.25, easing: 'back' });
+    }
+    if (view.x !== t.x || view.y !== t.y) {
+      world.set(view.body, { position: at });
+      view.x = t.x;
+      view.y = t.y;
+    }
+    if (view.direction !== t.direction) {
+      view.direction = t.direction;
+      world.animate(view.body, { rotation: heading(t.direction) }, { duration: TURN_TIME, easing: 'easeOut' });
+    }
+    const shielded = now < t.spawnProtectionEndTime;
+    if (shielded !== view.shielded) {
+      view.shielded = shielded;
+      world.stopAnimation(view.shield);
+      world.set(view.shield, { scale: shielded ? 1.45 : 0 });
+      if (shielded) world.animate(view.shield, { scale: 1.6 }, { duration: 0.35, repeat: 'forever', yoyo: true, easing: 'easeInOut' });
+    }
+  }
+  for (const [id, view] of s.tanks)
+    if (!seen.has(id)) {
+      world.despawn(view.body);
+      s.tanks.delete(id);
+    }
+
+  const live = new Set<number>();
+  const updates = world.transforms;
+  for (const b of bullets) {
+    live.add(b.id);
+    const at = toWorld(l, b.x, b.y, l.cell * 0.34);
+    const e = s.bullets.get(b.id);
+    if (e == null) {
+      const shell = world.spawn({ mesh: 'sphere', position: at, scale: l.cell * 0.24, color: SHELL, pickable: false });
+      world.spawn({ mesh: 'puff', parent: shell, scale: 2.4, color: SHELL_GLOW, pickable: false });
+      s.bullets.set(b.id, shell);
+    } else updates.position(e, at[0], at[1], at[2]);
+  }
+  updates.flush();
+  for (const [id, e] of s.bullets)
+    if (!live.has(id)) {
+      world.despawn(e);
+      s.bullets.delete(id);
+    }
+}
+
+/** A muzzle flash at the end of a tank's barrel. */
+export function muzzleFlash(world: World, l: Layout, t: Tank) {
+  const size = l.cell * TANK_RATIO;
+  const reach = size / 2 + size * 0.5;
+  const [sx, sy] = t.direction === 'up' ? [0, -1] : t.direction === 'down' ? [0, 1] : t.direction === 'left' ? [-1, 0] : [1, 0];
+  effects.dust(world, {
+    position: toWorld(l, t.x + sx * reach, t.y + sy * reach, size * 0.43),
+    count: 3,
+    size: size * 0.35,
+    speed: size * 1.5,
+    direction: [sx, -sy, 0.3],
+    spread: 0.5,
+    lifetime: 0.1,
+    color: [
+      [2.6, 2.6, 2.2, 0.95],
+      [2.4, 2, 0.8, 0.8]
+    ],
+    endSize: 1.8
+  });
+}
+
+/** An explosion at a board point: a fireball and smoke, bigger for a tank. */
+export function explode(world: World, l: Layout, x: number, y: number, big: boolean) {
+  const size = l.cell * (big ? 0.9 : 0.5);
+  effects.explosion(world, {
+    position: toWorld(l, x, y, l.cell * 0.4),
+    count: big ? 22 : 10,
+    size,
+    speed: size * (big ? 3 : 2),
+    lifetime: EXPLOSION_TIME,
+    direction: [0, 0, 1],
+    spread: 1.3,
+    gravity: -l.cell * 10,
+    debris: big ? [c4('#3E4A58'), c4('#FFB74D'), c4('#5A5A5A')] : undefined
+  });
+}

package/src/games/tic-tac-toe/TicTacToe.tsx

@@ -0,0 +1,98 @@
+// Tic Tac Toe's screen, on the Nayan engine: the board and pieces are one 3D scene (an orthographic
+// camera leaning back over the board), under Playtura's scoreboard (you, the turn and the clock, the
+// robot), controls and modals. The play is in TicTacToeGame.ts (the rules and the robot in
+// TicTacToeRules.ts), what it draws in TicTacToeScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again clear the board in place and a theme
+// change rebuilds just the board, so the GPU view is never rebuilt. Pieces drop and the win bar glows in
+// the engine's Rust core; JS reads the finger and steps the clock and the world once a frame.
+import { useMemo } from 'react';
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS, isTablet } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { textColumn, timerColumn } from '../shared/EngineHud';
+import { toRgb } from '../shared/EngineUtils';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { COLORS, getLayout, LIGHT, TIME_LIMIT } from './TicTacToeConstants';
+import { createGame, dispose, drag, type GameEvent, reset, type Result, setLayout, setTheme, shownScore, start, tick } from './TicTacToeGame';
+import type { Player } from './TicTacToeRules';
+
+const SOUNDS = GAME_SOUNDS.TIC_TAC_TOE;
+const LOW_TIME = 30;
+
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
+  place: { sound: SOUNDS.PLACE, haptic: HapticType.LIGHT },
+  robot: { sound: SOUNDS.ROBOT, haptic: HapticType.LIGHT },
+  win: { sound: SOUNDS.WIN, haptic: HapticType.SUCCESS },
+  lose: { sound: SOUNDS.LOSE, haptic: HapticType.ERROR },
+  draw: { sound: SOUNDS.DRAW, haptic: HapticType.MEDIUM }
+};
+
+const TITLES: Record<Result, [string, string]> = {
+  win: ['YOU WON!', 'You beat the robot!'],
+  lose: ['YOU LOST!', 'The robot wins!'],
+  draw: ['DRAW!', 'Nobody wins this round!'],
+  timeout: ['TIME UP!', 'You ran out of time!']
+};
+
+export const TicTacToe = engineGame(GAME_IDS.TIC_TAC_TOE, (props) => {
+  const [turn, setTurn] = useLiveState<Player>('O');
+  const [time, setTime] = useLiveState(TIME_LIMIT);
+
+  // As the original game did: a win 10,000; a loss or a timeout 0; a draw (and a stop) as a cancel
+  const { game, theme, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.TIC_TAC_TOE,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset, isTablet);
+      setLayout(g, l);
+      return l.size + l.pad * 2;
+    },
+    drag,
+    outcome: (g) => (g.result === 'win' ? 'win' : g.result === 'draw' ? 'draw' : 'lose'),
+    reportScore: (g, s) => (s === 'win' ? g.finalScore : 0),
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
+    onOver: (fx, _status, g) => {
+      if (g.result === 'timeout') fx(SOUNDS.TIME_UP, HapticType.ERROR);
+    },
+    wire: (g, fx) => {
+      g.onTurn = setTurn;
+      g.onTime = setTime;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  const background = useMemo(() => toRgb(theme.BACKGROUND), [theme.BACKGROUND]);
+  const [title, message] = TITLES[game.result ?? 'timeout'];
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      background={background}
+      // You, whose turn it is and the clock, the robot (as the original scoreboard)
+      columns={[
+        textColumn('YOU', 'O', COLORS.O_BADGE),
+        timerColumn(time, theme, LOW_TIME, turn === 'O' ? 'YOUR TURN' : 'AI THINKING...'),
+        textColumn('AI', 'X', COLORS.X_BADGE)
+      ]}
+      subtext="Play vs Robot!"
+      gameOver={gameOver({
+        title,
+        message,
+        scoreLabel: 'Final Score',
+        score: shownScore(game),
+        buttonText: 'Play Again!'
+      })}
+    />
+  );
+});

package/src/games/tic-tac-toe/TicTacToeConstants.ts

@@ -0,0 +1,69 @@
+// Tic Tac Toe's scores, timings, colors and layout. Rules and scores match the original version
+// (games/tic-tac-toe), so scores carry over.
+import { getScoreBoardTop } from '../shared/EngineHud';
+import type { TiltView } from '../shared/EngineTilt';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+
+// ── Rules and scoring ─────────────────────────────────────────────────
+
+export const TIME_LIMIT = 120; // seconds
+export const WIN_SCORE = 10000;
+export const DRAW_SCORE = 5000;
+export const LOSE_SCORE = 0;
+/** Points for every second still on the clock when a game is won (half this for a draw). */
+export const TIME_BONUS = 50;
+export const ROBOT_DELAY = 0.5; // the robot "thinks" this long
+
+// ── Colors ────────────────────────────────────────────────────────────
+
+export const COLORS = {
+  X: '#E53935',
+  O: '#2E7D32',
+  WIN: '#FFC107',
+  // The wooden board (classic), as the original board
+  FRAME: '#5c4033',
+  WELL: '#3a2518',
+  SURFACE: '#6b4c3b',
+  SURFACE_ALT: '#735342',
+  GRID: '#8d6e5a',
+  // The scoreboard's badges
+  X_BADGE: '#F44336',
+  O_BADGE: '#4CAF50'
+} as const;
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** The camera leans back from straight down, so the board's depth and the pieces stand up. */
+export const TILT = 0.42;
+/** Lit from the upper left; surfaces facing up off the board (+z) keep their exact color. */
+export const LIGHT = frontLight([-0.4, 0.5, 1], 0.45);
+
+// ── Layout (view points) ──────────────────────────────────────────────
+
+const SCOREBOARD_HEIGHT = 92;
+const CONTROLS_HEIGHT = 120;
+
+export type Layout = TiltView & { cell: number; size: number; pad: number };
+
+/** The board as big as the original board (85% of the width, at most 350 points, 420 on a tablet), smaller if the screen is short. */
+export function getLayout(width: number, height: number, offset: number, tablet: boolean): Layout {
+  const pad = tablet ? 10 : 8;
+  const top = getScoreBoardTop(offset) + SCOREBOARD_HEIGHT;
+  const room = Math.max(180, height - top - CONTROLS_HEIGHT);
+  const fromHeight = room / Math.cos(TILT) - pad * 2 - 30;
+  // The board, frame included, as wide as the game area (30 narrower than the screen, at most 500), shorter if the screen is
+  const size = Math.floor(Math.max(150, Math.min(gameWidthFor(width) - pad * 2, fromHeight)) / 3) * 3;
+  return { width, height, tilt: TILT, centerY: top + room / 2, cell: size / 3, size, pad };
+}
+
+/** A cell's centre (0 top left, row by row), in world units. */
+export function cellCentre(l: Layout, i: number): [number, number] {
+  return [((i % 3) - 1) * l.cell, (1 - Math.floor(i / 3)) * l.cell];
+}
+
+/** The cell under a board point, or -1. */
+export function cellAt(l: Layout, x: number, y: number): number {
+  const col = Math.floor((x + l.size / 2) / l.cell);
+  const row = Math.floor((l.size / 2 - y) / l.cell);
+  return col < 0 || col > 2 || row < 0 || row > 2 ? -1 : row * 3 + col;
+}