@nayan-ui/games 1.20.0 → 1.21.0

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

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

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

@@ -1,69 +0,0 @@
-// 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;
-}