@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/nuts-and-bolts/NutsAndBoltsScene.ts

@@ -0,0 +1,498 @@
+// Everything Nuts and Bolts draws: a board (themed, as the original board) with a socket at each bolt's
+// home and three green swap sockets below a separator, wooden and metal planks stacked across it (each
+// with a hole at every grid point), and bolts with a washer, a domed head with a cross slot and a
+// threaded shank. Seen from a little in front of straight down (shared/EngineTilt: an orthographic
+// camera leaning back, one world unit per point). A picked-up bolt unscrews and hovers in gold; a move
+// flies it over and screws it in; a freed plank swings down off the board.
+import {
+  type Color,
+  effects,
+  type Entity,
+  extrude,
+  type Geometry,
+  type GeometryPart,
+  lathe,
+  merge,
+  type Model,
+  Path,
+  quat,
+  recolor,
+  shapeGeometry,
+  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_BOARD, CLASSIC_SEPARATOR, FALL_TIME, type Layout, LIFT_TIME, MOVE_TIME, pointAt, separatorY, swapAt } from './NutsAndBoltsConstants';
+import { getPlankPositions, type Plank } from './NutsAndBoltsRules';
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('nuts-and-bolts/NutsAndBoltsScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+const STAND_UP = quat.x(Math.PI / 2);
+const ACROSS = quat.z(0);
+const DOWN = quat.z(Math.PI / 2);
+const BOARD_DEPTH = 10;
+const BACKDROP_DEPTH = 25;
+const PLANK_PAD = 10; // past the end points, as the original planks
+const PLANK_WIDTH = 26;
+const PLANK_DEPTH = 10; // the plank's body
+const PLANK_CAP = 1.6; // the raised, bevelled top on it
+const PLANK_TOP = PLANK_DEPTH + PLANK_CAP;
+const PLANK_STEP = 4; // each plank in the stack sits this much above the one before
+const WOOD = toColor('#8B4513');
+const METAL = toColor('#B8BEC6');
+const SILVER: Color = [0.78, 0.8, 0.84, 1];
+const GOLD = toColor('#FFD700');
+
+export const holeRadius = (l: Layout) => Math.min(18, l.cell * 0.3);
+export const boltRadius = (l: Layout) => Math.min(16, l.cell * 0.27);
+const plankZ = (p: Plank) => (p.zIndex - 1) * PLANK_STEP;
+/** Where a bolt sits: on top of the highest plank at its point (or the board). */
+export const boltRest = (planks: Plank[], row: number, col: number) =>
+  planks.reduce((z, p) => (getPlankPositions(p).some((q) => q.row === row && q.col === col) ? Math.max(z, plankZ(p) + PLANK_TOP) : z), 0);
+
+// ── Meshes ────────────────────────────────────────────────────────────
+
+const panelMesh = (w: number, h: number, radius: number) =>
+  cached(`nb-panel:${w.toFixed(1)}x${h.toFixed(1)}:${radius}`, () =>
+    createShape(extrude(new Path().addRoundedRect(-w / 2, -h / 2, w, h, radius), { depth: BOARD_DEPTH }), { shine: 0.2 })
+  );
+
+/** A plank `length` points long along x, rounded at its ends, with a hole at each of its grid points. */
+const cube = () => shapeGeometry('cube');
+
+/** Shades a plank's faces: tops full, sides darker, the underside darkest, so its thickness reads. */
+const faceShade = (top: number, side: number) => (g: Geometry) =>
+  recolor(g, ({ normal: n }) => {
+    const k = n[2] > 0.6 ? top : n[2] < -0.6 ? side * 0.6 : side;
+    return [k, k, k, 1];
+  });
+
+/**
+ * A plank `length` points long (along x, its top at z = PLANK_DEPTH / 2 + PLANK_CAP): a thick body with
+ * shaded sides, a bevelled top a little inset on it, round bolt holes through both, and its surface:
+ * wood grain running between the holes, or brushed streaks on metal. Tinted by the entity (wood or metal).
+ */
+const plankMesh = (length: number, cell: number, holeR: number, metal: boolean) =>
+  cached(`nb-plank-v2:${metal ? 'm' : 'w'}:${length}:${cell.toFixed(2)}:${holeR.toFixed(1)}`, () => {
+    const span = (length - 1) * cell;
+    const W = PLANK_WIDTH;
+    const w = span + PLANK_PAD * 2 + W;
+    const hole = holeR * 0.62;
+    const outline = (inset: number) => {
+      const path = new Path().addRoundedRect(-w / 2 + inset, -W / 2 + inset, w - inset * 2, W - inset * 2, W / 2 - inset);
+      for (let i = 0; i < length; i++) path.addCircle(-span / 2 + i * cell, 0, hole + inset);
+      return path;
+    };
+    const holes = Array.from({ length }, (_, i) => -span / 2 + i * cell);
+    const parts: GeometryPart[] = [
+      { geometry: faceShade(0.82, 0.62)(extrude(outline(0), { depth: PLANK_DEPTH, fillRule: 'evenodd' })) },
+      {
+        geometry: faceShade(1, 0.8)(extrude(outline(1.6), { depth: PLANK_CAP, fillRule: 'evenodd' })),
+        position: [0, 0, PLANK_DEPTH / 2 + PLANK_CAP / 2]
+      }
+    ];
+    // Lines along the top, broken where they'd cross a hole or run off the rounded ends
+    const z = PLANK_DEPTH / 2 + PLANK_CAP + 0.05;
+    const lines = metal ? [-7.5, -3, 4, 8.5] : [-8.5, -5.5, -2.5, 3, 6, 9];
+    lines.forEach((y, li) => {
+      const end = w / 2 - W / 2 + Math.sqrt(Math.max(0, (W / 2 - 2) ** 2 - y * y));
+      const cuts: [number, number][] = [];
+      for (const x of holes)
+        if (Math.abs(y) < hole + 3) {
+          const c = Math.sqrt((hole + 3) ** 2 - y * y);
+          cuts.push([x - c, x + c]);
+        }
+      let from = -end;
+      for (const [a, b] of [...cuts, [end, end] as [number, number]]) {
+        if (a - from > 2) {
+          const k = metal ? 1.18 : 0.62 + (li % 3) * 0.06;
+          // Wood grain wanders a little in width along the plank
+          parts.push({
+            geometry: cube(),
+            position: [(from + a) / 2, y, z],
+            scale: [a - from, metal ? 0.35 : 0.6 + (li % 2) * 0.4, 0.1],
+            color: [k, k, k, 1]
+          });
+        }
+        from = b;
+      }
+    });
+    return createShape(merge(parts), { center: false, shine: metal ? 0.8 : 0.2 });
+  });
+
+/**
+ * A swap hole one unit across, as a real bolt's seat: a green anodised hex nut set into the board, its
+ * top edges chamfered, and a dark threaded bore going down through it.
+ */
+const nutSocketMesh = () =>
+  cached('nb-socket-nut', () => {
+    const hex = new Path();
+    for (let k = 0; k < 6; k++) {
+      const a = (k / 6) * Math.PI * 2 + Math.PI / 6;
+      if (k === 0) hex.moveTo(0.48 * Math.cos(a), 0.48 * Math.sin(a));
+      else hex.lineTo(0.48 * Math.cos(a), 0.48 * Math.sin(a));
+    }
+    hex.close().addCircle(0, 0, 0.24);
+    const green = toColor('#2E9E5B');
+    const chamfer = toColor('#6FD39A');
+    const bore = toColor('#16301F');
+    return createShape(
+      merge([
+        // The nut: a hex ring standing on the board (extruded along z, stood up into the lathe's +y)
+        {
+          geometry: extrude(hex, { depth: 0.18, fillRule: 'evenodd' }),
+          rotation: quat.x(-Math.PI / 2),
+          position: [0, 0.09, 0],
+          color: [green[0], green[1], green[2], 1]
+        },
+        // A bright chamfered collar round the hole's mouth
+        {
+          geometry: lathe(
+            [
+              [0.24, 0.17],
+              [0.3, 0.181]
+            ],
+            { segments: 48 }
+          ),
+          color: [chamfer[0], chamfer[1], chamfer[2], 1]
+        },
+        // The bore, its thread spiralling down (run from the centre out, so its inside faces up)
+        {
+          geometry: lathe(
+            [
+              [0.001, -0.06],
+              [0.24, -0.06],
+              [0.24, 0.17]
+            ],
+            { segments: 40, displace: (u, v) => (v > 0.5 ? 0.02 * Math.sin((u + v * 5) * Math.PI * 2) : 0) }
+          ),
+          color: [bore[0], bore[1], bore[2], 1]
+        }
+      ]),
+      { center: false, shine: 0.6 }
+    );
+  });
+
+/** A socket one unit across: a sunken dish in a raised lip (`swap` sockets are green, the bolts' homes tan). */
+const socketMesh = (swap: boolean) =>
+  swap
+    ? nutSocketMesh()
+    : cached(`nb-socket-${swap ? 'swap' : 'grid'}`, () => {
+        const [rim, depth, inner] = swap ? ['#3CB371', '#228B22', '#90EE90'] : ['#D2B48C', '#B8956A', '#F5DEB3'];
+        const r = toColor(rim);
+        const d = toColor(depth);
+        const i = toColor(inner);
+        return createShape(
+          lathe(
+            [
+              [0.001, 0.04],
+              [0.26, 0.05],
+              [0.38, 0.1],
+              [0.46, 0.2],
+              [0.5, 0.24],
+              [0.56, 0.18],
+              [0.6, 0]
+            ],
+            {
+              segments: 28,
+              color: ({ position: p }) => {
+                const radius = Math.hypot(p[0], p[2]);
+                const c = radius < 0.3 ? i : radius < 0.45 ? d : r;
+                return [c[0], c[1], c[2]];
+              }
+            }
+          ),
+          { center: false, shine: 0.3 }
+        );
+      });
+
+/**
+ * A hex bolt one unit across its flange: a round flange washer, a chamfered hex head (a six-sided
+ * lathe), and a shank with a real helical thread running down to a chamfered tip.
+ */
+const boltMesh = () =>
+  cached('nb-bolt-v2', () => {
+    const head = lathe(
+      [
+        [0.001, 0.4],
+        [0.3, 0.4],
+        [0.38, 0.35],
+        [0.38, 0.12],
+        [0.36, 0.1]
+      ],
+      { segments: 6 }
+    );
+    const flange = lathe(
+      [
+        [0.36, 0.12],
+        [0.48, 0.1],
+        [0.5, 0.06],
+        [0.5, 0.02],
+        [0.47, 0],
+        [0.14, 0]
+      ],
+      { segments: 48 }
+    );
+    // The thread: the shank's surface pushed out along a helix, seven turns down its length
+    const shank = lathe(
+      [
+        [0.15, 0],
+        [0.15, -0.62],
+        [0.1, -0.7],
+        [0.001, -0.7]
+      ],
+      { segments: 32, displace: (u, v) => (v < 0.85 ? 0.03 * Math.sin((u + v * 7) * Math.PI * 2) : 0) }
+    );
+    return createShape(
+      merge([{ geometry: shank, color: [0.62, 0.64, 0.68, 1] }, { geometry: flange, color: [0.92, 0.93, 0.95, 1] }, { geometry: head }]),
+      { center: false, shine: 0.9 }
+    );
+  });
+
+// ── Spawning ──────────────────────────────────────────────────────────
+
+export type Scene = {
+  backdrop: Entity;
+  panel: Entity;
+  rim: Entity | null;
+  separator: Entity;
+  sockets: Entity[];
+  swaps: Entity[];
+  planks: Map<string, Entity>;
+  /** Each bolt: an unturned pivot (position and spin about z) carrying the standing bolt (its color). */
+  bolts: Map<string, { pivot: Entity; body: Entity }>;
+};
+
+const panelColor = (theme: GameTheme) => toColor(theme.mode === 'classic' ? CLASSIC_BOARD : theme.BOARD.SURFACE);
+const separatorColor = (theme: GameTheme) => toColor(theme.mode === 'classic' ? CLASSIC_SEPARATOR : theme.BOARD.BORDER);
+
+export function buildScene(world: World, l: Layout, theme: GameTheme, homes: { row: number; col: number }[]): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
+  const classic = theme.mode === 'classic';
+  const radius = classic ? 16 : 8;
+  const panel = world.spawn({
+    mesh: panelMesh(l.boardWidth, l.boardHeight, radius),
+    position: [0, 0, -BOARD_DEPTH / 2],
+    color: panelColor(theme),
+    pickable: false
+  });
+  const border = toColor(theme.BOARD.BORDER);
+  const rim =
+    !classic && border[3]! > 0
+      ? world.spawn({
+          mesh: cached(`nb-rim:${l.boardWidth.toFixed(1)}x${l.boardHeight.toFixed(1)}`, () =>
+            createShape(
+              extrude(
+                new Path()
+                  .addRoundedRect(-l.boardWidth / 2, -l.boardHeight / 2, l.boardWidth, l.boardHeight, 8)
+                  .addRoundedRect(-l.boardWidth / 2 + 1, -l.boardHeight / 2 + 1, l.boardWidth - 2, l.boardHeight - 2, 7),
+                { depth: 0, fillRule: 'evenodd' }
+              )
+            )
+          ),
+          position: [0, 0, 0.3],
+          color: border,
+          pickable: false
+        })
+      : null;
+  const separator = world.spawn({
+    mesh: 'cube',
+    position: [0, separatorY(l), 0.2],
+    scale: [l.boardWidth - l.padding * 2, 1.5, 0.3],
+    color: separatorColor(theme),
+    pickable: false
+  });
+  const hr = holeRadius(l);
+  const sockets = homes.map(({ row, col }) => {
+    const [x, y] = pointAt(l, row, col);
+    return world.spawn({ mesh: socketMesh(false), position: [x, y, 0], rotation: STAND_UP, scale: hr * 2, pickable: false });
+  });
+  const swaps = [0, 1, 2].map((i) => {
+    const [x, y] = swapAt(l, i);
+    return world.spawn({ mesh: socketMesh(true), position: [x, y, 0], rotation: STAND_UP, scale: hr * 2, pickable: false });
+  });
+  return { backdrop, panel, rim, separator, sockets, swaps, planks: new Map(), bolts: new Map() };
+}
+
+export function removeScene(world: World, s: Scene) {
+  const all = [
+    s.backdrop,
+    s.panel,
+    s.separator,
+    ...s.sockets,
+    ...s.swaps,
+    ...Array.from(s.planks.values()),
+    ...Array.from(s.bolts.values(), (b) => b.pivot)
+  ];
+  for (const e of s.rim != null ? [...all, s.rim] : all) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, l: Layout, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+  world.set(s.panel, { mesh: panelMesh(l.boardWidth, l.boardHeight, theme.mode === 'classic' ? 16 : 8), color: panelColor(theme) });
+  world.set(s.separator, { color: separatorColor(theme) });
+}
+
+/** The sockets at the bolts' homes (a new puzzle). */
+export function placeSockets(world: World, l: Layout, s: Scene, homes: { row: number; col: number }[]) {
+  for (const e of s.sockets) world.despawn(e);
+  const hr = holeRadius(l);
+  s.sockets = homes.map(({ row, col }) => {
+    const [x, y] = pointAt(l, row, col);
+    return world.spawn({ mesh: socketMesh(false), position: [x, y, 0], rotation: STAND_UP, scale: hr * 2, pickable: false });
+  });
+}
+
+// ── Planks ────────────────────────────────────────────────────────────
+
+const plankCentre = (l: Layout, p: Plank): Vec3 => {
+  const [ax, ay] = pointAt(l, p.startRow, p.startCol);
+  const [bx, by] =
+    p.orientation === 'horizontal' ? pointAt(l, p.startRow, p.startCol + p.length - 1) : pointAt(l, p.startRow + p.length - 1, p.startCol);
+  return [(ax + bx) / 2, (ay + by) / 2, plankZ(p) + PLANK_DEPTH / 2];
+};
+
+export function spawnPlank(world: World, l: Layout, s: Scene, p: Plank) {
+  s.planks.set(
+    p.id,
+    world.spawn({
+      mesh: plankMesh(p.length, l.cell, holeRadius(l), p.orientation !== 'horizontal'),
+      position: plankCentre(l, p),
+      rotation: p.orientation === 'horizontal' ? ACROSS : DOWN,
+      color: p.orientation === 'horizontal' ? WOOD : METAL,
+      pickable: false
+    })
+  );
+}
+
+/** A freed plank swings down off the board and fades, then goes. Returns how long that takes. */
+export function dropPlank(world: World, l: Layout, s: Scene, p: Plank): number {
+  const e = s.planks.get(p.id);
+  if (e == null) return 0;
+  s.planks.delete(p.id);
+  const [x, y, z] = plankCentre(l, p);
+  const swing = (p.zIndex % 2 ? 1 : -1) * 0.5;
+  const [r, g, b] = p.orientation === 'horizontal' ? WOOD : METAL;
+  world.animate(e, { position: [x + swing * l.cell * 0.4, y - l.cell * 2.5, z - 30] }, { duration: FALL_TIME, easing: 'easeIn' });
+  world.animate(e, { turn: [0.4 * swing, 0, swing] }, { duration: FALL_TIME, easing: 'easeIn' });
+  world.animate(e, { color: [r, g, b, 0] }, { duration: FALL_TIME, easing: 'easeIn' });
+  return FALL_TIME;
+}
+
+// ── Bolts ─────────────────────────────────────────────────────────────
+
+export function spawnBolt(world: World, l: Layout, s: Scene, id: string, at: Vec3) {
+  const pivot = world.spawn({ mesh: 'none', position: at, pickable: false });
+  const body = world.spawn({ mesh: boltMesh(), parent: pivot, rotation: STAND_UP, scale: boltRadius(l) * 2, color: SILVER, pickable: false });
+  s.bolts.set(id, { pivot, body });
+}
+
+export function removeBolts(world: World, s: Scene) {
+  for (const b of s.bolts.values()) world.despawn(b.pivot);
+  s.bolts.clear();
+}
+
+const lifted = (l: Layout, at: Vec3): Vec3 => [at[0], at[1], at[2] + boltRadius(l) * 1.6];
+/** Turns of the thread a bolt makes while it rises or sinks its own height (counterclockwise is out). */
+const SCREW_TURNS = 2.5;
+
+/** Hovering once picked up: a gentle bob and a slow idle turn, as if held loosely between fingers. */
+function hover(world: World, l: Layout, b: { pivot: Entity }, at: Vec3, delay: number) {
+  const up = lifted(l, at);
+  world.animate(
+    b.pivot,
+    { position: [up[0], up[1], up[2] + boltRadius(l) * 0.25] },
+    { duration: 0.7, delay, repeat: 'forever', yoyo: true, easing: 'easeInOut' }
+  );
+  world.animate(b.pivot, { turn: [0, 0, Math.PI * 0.3] }, { duration: 1.1, delay, repeat: 'forever', yoyo: true, easing: 'easeInOut' });
+}
+
+/** Picked up: the bolt turns gold and unscrews up out of its hole (turning as it rises), then hovers. */
+export function liftBolt(world: World, l: Layout, s: Scene, id: string, at: Vec3) {
+  const b = s.bolts.get(id);
+  if (!b) return;
+  world.stopAnimation(b.pivot);
+  world.animate(b.pivot, { position: lifted(l, at) }, { duration: LIFT_TIME, easing: 'easeOut' });
+  world.animate(b.pivot, { turn: [0, 0, Math.PI * 2 * SCREW_TURNS] }, { duration: LIFT_TIME, easing: 'easeOut' });
+  world.animate(b.body, { color: GOLD }, { duration: LIFT_TIME });
+  hover(world, l, b, at, LIFT_TIME);
+}
+
+/** The last moment of screwing in: a little sink and spring as it seats tight against the plank. */
+function seat(world: World, l: Layout, b: { pivot: Entity }, at: Vec3, delay: number) {
+  const d = boltRadius(l) * 0.12;
+  world.animate(
+    b.pivot,
+    [
+      { position: [at[0], at[1], at[2] - d], at: 0.4 },
+      { position: at, at: 1 }
+    ],
+    { duration: 0.14, delay, easing: 'easeOut' }
+  );
+}
+
+/** Put back where it was: it screws back down (turning clockwise as it sinks) and seats, in silver. */
+export function lowerBolt(world: World, l: Layout, s: Scene, id: string, at: Vec3) {
+  const b = s.bolts.get(id);
+  if (!b) return;
+  world.stopAnimation(b.pivot);
+  world.animate(b.pivot, { position: at }, { duration: LIFT_TIME, easing: 'easeIn' });
+  world.animate(b.pivot, { turn: [0, 0, -Math.PI * 2 * SCREW_TURNS] }, { duration: LIFT_TIME, easing: 'easeIn' });
+  world.animate(b.body, { color: SILVER }, { duration: LIFT_TIME });
+  seat(world, l, b, at, LIFT_TIME);
+}
+
+/** A bolt whose plank underneath fell: it drops onto the next one down. */
+export function settleBolt(world: World, s: Scene, id: string, at: Vec3) {
+  const b = s.bolts.get(id);
+  if (b) world.animate(b.pivot, { position: at }, { duration: 0.25, delay: 0.1, easing: 'bounce' });
+}
+
+/** Moved: it lifts clear, arcs over above the planks, then screws down into its new hole and seats. */
+export function moveBolt(world: World, l: Layout, s: Scene, id: string, from: Vec3, to: Vec3) {
+  const b = s.bolts.get(id);
+  if (!b) return;
+  const high = Math.max(from[2], to[2]) + boltRadius(l) * 2.4;
+  const above = lifted(l, to);
+  const fly = MOVE_TIME * 0.55;
+  const screw = MOVE_TIME - fly;
+  world.stopAnimation(b.pivot);
+  world.animate(
+    b.pivot,
+    [
+      { position: [from[0], from[1], high], at: 0.3 },
+      { position: [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2, high + boltRadius(l) * 0.6], at: 0.6 },
+      { position: [above[0], above[1], above[2]], at: 1 }
+    ],
+    { duration: fly, path: 'smooth', easing: 'easeInOut' }
+  );
+  world.animate(b.pivot, { position: to }, { duration: screw, delay: fly, easing: 'easeIn' });
+  world.animate(b.pivot, { turn: [0, 0, -Math.PI * 2 * SCREW_TURNS] }, { duration: screw, delay: fly, easing: 'easeIn' });
+  world.animate(b.body, { color: SILVER }, { duration: MOVE_TIME });
+  seat(world, l, b, to, MOVE_TIME);
+}
+
+/** Confetti over the board when every plank's down. */
+export function celebrate(world: World, l: Layout) {
+  effects.confetti(world, {
+    position: [0, l.cell, l.cell],
+    count: 60,
+    size: l.cell * 0.12,
+    speed: l.boardWidth * 1.4,
+    lifetime: 1.3,
+    gravity: -l.boardWidth * 2.4,
+    colors: ['#FFD700', '#3CB371', '#C4733B', '#4DA6FF'].map((c) => toColor(c))
+  });
+}

package/src/games/pac-man/PacMan.tsx

@@ -0,0 +1,86 @@
+// Pac-Man's screen, on the Nayan engine: the maze, Pac-Man, the ghosts and the fruit are one 3D scene
+// (an orthographic camera leaning back over the board), under Playtura's scoreboard, controls and
+// modals. The play is in PacManGame.ts (the rules in PacManRules.ts), what it draws in PacManScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
+// repaints the backdrop, so the GPU view is never rebuilt. JS steps Pac-Man and the ghosts on the
+// game's own clock and glides them; chomps, frights and bursts animate in the Rust core.
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { livesColumn, scoreColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, INITIAL_LIVES, LIGHT, TIME_LIMIT } from './PacManConstants';
+import { createGame, dispose, drag, type GameEvent, reset, setLayout, setTheme, start, tick } from './PacManGame';
+
+const SOUNDS = GAME_SOUNDS.PAC_MAN;
+
+/** Each in-play event's sound and haptic. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic?: HapticType }> = {
+  chomp: { sound: SOUNDS.CHOMP },
+  pellet: { sound: SOUNDS.POWER_PELLET, haptic: HapticType.MEDIUM },
+  fruit: { sound: SOUNDS.FRUIT, haptic: HapticType.MEDIUM },
+  eatGhost: { sound: SOUNDS.EAT_GHOST, haptic: HapticType.HEAVY },
+  eatGhostCombo: { sound: SOUNDS.EAT_GHOST_COMBO, haptic: HapticType.HEAVY },
+  lifeLost: { sound: SOUNDS.LIFE_LOST, haptic: HapticType.ERROR }
+};
+
+const scoreText = (s: number) => `${s}`;
+
+export const PacMan = engineGame(GAME_IDS.PAC_MAN, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [lives, setLives] = useLiveState(INITIAL_LIVES);
+  const [time, setTime] = useLiveState(TIME_LIMIT);
+
+  // Win on clearing the maze, lose on a death or time up
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.PAC_MAN,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.sizeX;
+    },
+    drag,
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START),
+    onStop: (fx) => fx(null, HapticType.LIGHT),
+    onOver: (fx, s) => fx(s === 'win' ? SOUNDS.LEVEL_COMPLETE : SOUNDS.DEATH, s === 'win' ? HapticType.SUCCESS : HapticType.HEAVY),
+    wire: (g, fx) => {
+      let alternate = false;
+      g.onScore = setScore;
+      g.onLives = setLives;
+      g.onTime = setTime;
+      g.onEvent = (event) => {
+        if (event === 'chomp') {
+          alternate = !alternate;
+          fx(alternate ? SOUNDS.CHOMP : SOUNDS.CHOMP_ALT);
+        } else fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+      };
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), livesColumn(lives, INITIAL_LIVES), timerColumn(time, theme, 0)]}
+      subtext="Eat dots, dodge ghosts!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'MAZE CLEARED!' : 'GAME OVER',
+        message: status === 'win' ? 'You cleared the maze!' : 'The ghosts got you!',
+        scoreLabel: 'Final Score',
+        score,
+        formatter: scoreText,
+        buttonText: 'Play Again!'
+      })}
+    />
+  );
+});