@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/tangram/TangramRules.ts

@@ -0,0 +1,409 @@
+// Tangram's rules, with no React or engine: the seven tans, each level's silhouette and tray (built from
+// a seeded generator, so a level looks the same every time it's played), and where a dropped tan may
+// snap. Ported from the original version (games/tangram/TangramConstants.ts and its board's claimTarget):
+// levels stay deterministic, with the original large tray pieces arranged so none are buried.
+//
+// Board points: x right, y down, from the board's top-left, as the original board laid them out.
+
+export type PieceType = 'large' | 'medium' | 'small' | 'square' | 'para';
+export type Pt = { x: number; y: number };
+
+export type TanTarget = {
+  id: number;
+  type: PieceType;
+  color: string;
+  /** The tan's shape, centred on its centroid (board points at full size, unrotated). */
+  localPoints: Pt[];
+  /** Where it goes when solved, and at what turn (degrees, clockwise on screen). */
+  targetCx: number;
+  targetCy: number;
+  targetRot: number;
+  /** Its rotational symmetry (degrees). */
+  symmetry: number;
+  /** Its solved outline, in board points. */
+  silPoints: Pt[];
+  /** Where it starts, in the tray. */
+  initialRot: number;
+  scatterCx: number;
+  scatterCy: number;
+};
+
+export type TangramLevel = { pieces: TanTarget[]; mirror: boolean; silhouetteRect: { x: number; y: number; w: number; h: number } };
+
+/** The board, in tan units: the 4 x 4 square silhouette with the tray in the strip under it. */
+export const TOTAL_BOARD_UNITS = 6;
+export const TRAY_SCALE = 0.4;
+export const RIM_RADIUS = 0.024;
+export const ROT_TOL = 30; // degrees
+export const SNAP_UNITS = 1.8; // a drop this near (in units) a free matching slot snaps
+export const TOTAL_PIECES = 7;
+
+const TAN_COLORS = {
+  blue: '#4A90E2',
+  red: '#E24A4A',
+  green: '#5BB749',
+  orange: '#F5A623',
+  purple: '#9B59B6',
+  yellow: '#F4C724',
+  teal: '#26C6DA'
+};
+
+/** The classic square, side 4 units, cut into its seven tans (areas 4 + 4 + 2 + 1 + 1 + 2 + 2 = 16). */
+const BASE_TANS: { type: PieceType; color: string; pts: [number, number][] }[] = [
+  {
+    type: 'large',
+    color: TAN_COLORS.blue,
+    pts: [
+      [0, 0],
+      [0, 4],
+      [2, 2]
+    ]
+  },
+  {
+    type: 'large',
+    color: TAN_COLORS.red,
+    pts: [
+      [0, 0],
+      [4, 0],
+      [2, 2]
+    ]
+  },
+  {
+    type: 'medium',
+    color: TAN_COLORS.green,
+    pts: [
+      [4, 4],
+      [2, 4],
+      [4, 2]
+    ]
+  },
+  {
+    type: 'small',
+    color: TAN_COLORS.orange,
+    pts: [
+      [0, 4],
+      [2, 4],
+      [1, 3]
+    ]
+  },
+  {
+    type: 'small',
+    color: TAN_COLORS.purple,
+    pts: [
+      [2, 2],
+      [3, 3],
+      [3, 1]
+    ]
+  },
+  {
+    type: 'square',
+    color: TAN_COLORS.yellow,
+    pts: [
+      [1, 3],
+      [2, 4],
+      [3, 3],
+      [2, 2]
+    ]
+  },
+  {
+    type: 'para',
+    color: TAN_COLORS.teal,
+    pts: [
+      [3, 3],
+      [4, 2],
+      [4, 0],
+      [3, 1]
+    ]
+  }
+];
+
+const SYMMETRY: Record<PieceType, number> = { large: 360, medium: 360, small: 360, square: 90, para: 180 };
+const LEVEL_ROTATIONS = [0, 90, 180, 270];
+const PIVOT = { x: 2, y: 2 };
+const FIT_STEPS = [0, 45, 90, 135, 180, 225, 270, 315];
+
+export const rotatePt = (x: number, y: number, deg: number, ox: number, oy: number): Pt => {
+  const rad = (deg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const dx = x - ox;
+  const dy = y - oy;
+  return { x: ox + dx * cos - dy * sin, y: oy + dx * sin + dy * cos };
+};
+
+const centroidOf = (pts: Pt[]): Pt => {
+  let sx = 0;
+  let sy = 0;
+  for (const p of pts) {
+    sx += p.x;
+    sy += p.y;
+  }
+  return { x: sx / pts.length, y: sy / pts.length };
+};
+
+/** Deterministic PRNG, so each level is stable across replays. */
+const mulberry32 = (seed: number) => {
+  let a = seed >>> 0;
+  return () => {
+    a |= 0;
+    a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+};
+
+const polysMatch = (a: Pt[], b: Pt[], eps: number): boolean => {
+  if (a.length !== b.length) return false;
+  const used = new Array(b.length).fill(false);
+  for (const p of a) {
+    let ok = false;
+    for (let j = 0; j < b.length; j++) {
+      if (!used[j] && Math.hypot(p.x - b[j]!.x, p.y - b[j]!.y) <= eps) {
+        used[j] = true;
+        ok = true;
+        break;
+      }
+    }
+    if (!ok) return false;
+  }
+  return true;
+};
+
+// A rectangle assembled from all seven tans, in a 45-degree basis (one unit here is sqrt(2)
+// tan units). Expanding the centres slightly opens gaps while keeping the original piece sizes.
+const TRAY_TANS: [number, number][][] = [
+  [
+    [2, 0],
+    [0, 2],
+    [2, 2]
+  ],
+  [
+    [2, 0],
+    [0, 2],
+    [0, 0]
+  ],
+  [
+    [3, 1],
+    [2, 0],
+    [4, 0]
+  ],
+  [
+    [4, 0],
+    [3, 1],
+    [4, 1]
+  ],
+  [
+    [2, 2],
+    [3, 2],
+    [2, 1]
+  ],
+  [
+    [3, 1],
+    [3, 2],
+    [4, 2],
+    [4, 1]
+  ],
+  [
+    [2, 0],
+    [2, 1],
+    [3, 2],
+    [3, 1]
+  ]
+];
+
+/** The tan shapes in units (unrotated, centred), for a level mirrored or not: one mesh each. */
+const canonicalCache = new Map<boolean, Record<PieceType, Pt[]>>();
+export function canonicalShapes(mirror: boolean): Record<PieceType, Pt[]> {
+  const cached = canonicalCache.get(mirror);
+  if (cached) return cached;
+  const mx = (x: number) => (mirror ? 4 - x : x);
+  const canon: Partial<Record<PieceType, Pt[]>> = {};
+  for (const t of BASE_TANS) {
+    if (canon[t.type]) continue;
+    const raw = t.pts.map(([x, y]) => ({ x: mx(x), y }));
+    const c = centroidOf(raw);
+    canon[t.type] = raw.map((p) => ({ x: p.x - c.x, y: p.y - c.y }));
+  }
+  const result = canon as Record<PieceType, Pt[]>;
+  canonicalCache.set(mirror, result);
+  return result;
+}
+
+/** A level: its silhouette (centred across the board, near its top) and its tray, for a board `unit` points to the tan unit. */
+export function generateLevel(levelIndex: number, unit: number, boardW: number, boardH: number): TangramLevel {
+  const UNIT = unit;
+  const SIL_TOP = UNIT * 0.1;
+  const rnd = mulberry32(levelIndex * 2654435761 + 0x9e37);
+  const rotationDeg = LEVEL_ROTATIONS[Math.floor(rnd() * LEVEL_ROTATIONS.length)]!;
+  const mirror = rnd() < 0.5;
+  const mx = (x: number) => (mirror ? 4 - x : x);
+
+  const solvedPx: Pt[][] = BASE_TANS.map((t) =>
+    t.pts.map(([x, y]) => {
+      const r = rotatePt(mx(x), y, rotationDeg, PIVOT.x, PIVOT.y);
+      return { x: r.x * UNIT, y: r.y * UNIT };
+    })
+  );
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const poly of solvedPx)
+    for (const p of poly) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+  const offsetX = (boardW - (maxX - minX)) / 2 - minX;
+  const offsetY = SIL_TOP - minY;
+
+  // One shape per type (congruent tans are interchangeable), in points
+  const units = canonicalShapes(mirror);
+  const canon = Object.fromEntries(Object.entries(units).map(([k, pts]) => [k, pts.map((p) => ({ x: p.x * UNIT, y: p.y * UNIT }))])) as Record<
+    PieceType,
+    Pt[]
+  >;
+
+  const findFitRot = (type: PieceType, tgtLocal: Pt[]): number => {
+    const shape = canon[type];
+    const eps = UNIT * 0.08;
+    for (const r of FIT_STEPS) {
+      if (
+        polysMatch(
+          shape.map((p) => rotatePt(p.x, p.y, r, 0, 0)),
+          tgtLocal,
+          eps
+        )
+      )
+        return r;
+    }
+    return rotationDeg;
+  };
+
+  // Compact previews in a slightly fanned packing expose every shape.
+  const trayCentre = { x: 2 * Math.SQRT2 * UNIT, y: Math.SQRT2 * UNIT };
+  const spread = 1.1;
+  const trayOffsets = TRAY_TANS.flatMap((points) => {
+    const centreX = points.reduce((sum, [x]) => sum + x, 0) / points.length;
+    const centreY = points.reduce((sum, [, y]) => sum + y, 0) / points.length;
+    return points.map(([x, y]) => ({
+      x: ((centreX - 2) * spread + x - centreX) * Math.SQRT2 * UNIT * TRAY_SCALE,
+      y: ((centreY - 1) * spread + y - centreY) * Math.SQRT2 * UNIT * TRAY_SCALE
+    }));
+  });
+  const trayMinY = Math.min(...trayOffsets.map((p) => p.y));
+  const trayMaxY = Math.max(...trayOffsets.map((p) => p.y));
+  const trayCentreX = (Math.min(...trayOffsets.map((p) => p.x)) + Math.max(...trayOffsets.map((p) => p.x))) / 2;
+  const trayTop = SIL_TOP + (maxY - minY) + Math.max(12, UNIT * 0.12);
+  const trayCy = trayTop - trayMinY;
+  // Centre the visible grid and previews as one group, including their outlines.
+  const contentTop = SIL_TOP - UNIT * RIM_RADIUS;
+  const contentBottom = trayCy + trayMaxY + UNIT * TRAY_SCALE * RIM_RADIUS;
+  const centreShiftY = (boardH - contentTop - contentBottom) / 2;
+
+  const pieces: TanTarget[] = BASE_TANS.map((t, idx) => {
+    const solvedC = centroidOf(solvedPx[idx]!);
+    const tgtLocal = solvedPx[idx]!.map((p) => ({ x: p.x - solvedC.x, y: p.y - solvedC.y }));
+    const targetRot = findFitRot(t.type, tgtLocal);
+    const sym = SYMMETRY[t.type];
+    const trayPoints = TRAY_TANS[idx]!.map(([x, y]) => ({ x: (mirror ? 4 - x : x) * Math.SQRT2 * UNIT, y: y * Math.SQRT2 * UNIT }));
+    const trayC = centroidOf(trayPoints);
+    const trayRot = findFitRot(
+      t.type,
+      trayPoints.map((p) => ({ x: p.x - trayC.x, y: p.y - trayC.y }))
+    );
+    const slot = {
+      x: boardW / 2 + (trayC.x - trayCentre.x) * TRAY_SCALE * spread - (mirror ? -trayCentreX : trayCentreX),
+      y: trayCy + (trayC.y - trayCentre.y) * TRAY_SCALE * spread + centreShiftY
+    };
+    return {
+      id: idx,
+      type: t.type,
+      color: t.color,
+      localPoints: canon[t.type],
+      targetCx: solvedC.x + offsetX,
+      targetCy: solvedC.y + offsetY + centreShiftY,
+      targetRot,
+      symmetry: sym,
+      silPoints: solvedPx[idx]!.map((p) => ({ x: p.x + offsetX, y: p.y + offsetY + centreShiftY })),
+      initialRot: trayRot,
+      scatterCx: slot.x,
+      scatterCy: slot.y
+    };
+  });
+
+  return { pieces, mirror, silhouetteRect: { x: minX + offsetX, y: minY + offsetY + centreShiftY, w: maxX - minX, h: maxY - minY } };
+}
+
+/** Whether a turn matches a target within tolerance, allowing for the tan's symmetry. */
+export const isRotationMatched = (cur: number, target: number, sym: number): boolean => {
+  let d = (((cur - target) % sym) + sym) % sym;
+  d = Math.min(d, sym - d);
+  return d <= ROT_TOL;
+};
+
+/** The turn nearest `cur` that equals the target (modulo symmetry), to snap smoothly to. */
+export const snappedRotation = (cur: number, target: number, sym: number): number => target + Math.round((cur - target) / sym) * sym;
+
+/**
+ * Where a tan dropped at (x, y) at turn `rot` goes: the nearest free slot of its type within reach at
+ * a matching turn (claimed), 'nudge' if it's over one at the wrong turn, or null. As the original board.
+ */
+export function claimSlot(
+  level: TangramLevel,
+  occupied: boolean[],
+  unit: number,
+  type: PieceType,
+  x: number,
+  y: number,
+  rot: number
+): { slot: number; cx: number; cy: number; rot: number } | 'nudge' | null {
+  let best = -1;
+  let bestDist = Infinity;
+  let nearWrongAngle = false;
+  level.pieces.forEach((t, i) => {
+    if (occupied[i] || t.type !== type) return;
+    const dist = Math.hypot(x - t.targetCx, y - t.targetCy);
+    if (dist > unit * SNAP_UNITS) return;
+    if (!isRotationMatched(rot, t.targetRot, t.symmetry)) {
+      nearWrongAngle = true;
+      return;
+    }
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = i;
+    }
+  });
+  if (best < 0) return nearWrongAngle ? 'nudge' : null;
+  occupied[best] = true;
+  const t = level.pieces[best]!;
+  return { slot: best, cx: t.targetCx, cy: t.targetCy, rot: snappedRotation(rot, t.targetRot, t.symmetry) };
+}
+
+/** Whether a board point lies inside a tan drawn at (cx, cy), turned `rot`, at `scale`, give or take `margin`. */
+export function insidePiece(local: Pt[], cx: number, cy: number, rot: number, scale: number, px: number, py: number, margin = 0): boolean {
+  // Into the tan's own frame
+  const q = rotatePt(px - cx, py - cy, -rot, 0, 0);
+  const x = q.x / scale;
+  const y = q.y / scale;
+  let inside = false;
+  for (let i = 0, j = local.length - 1; i < local.length; j = i++) {
+    const a = local[i]!;
+    const b = local[j]!;
+    if (a.y > y !== b.y > y && x < ((b.x - a.x) * (y - a.y)) / (b.y - a.y) + a.x) inside = !inside;
+  }
+  if (inside || margin <= 0) return inside;
+  // Near an edge counts too (fingers are wide)
+  const m = margin / scale;
+  for (let i = 0, j = local.length - 1; i < local.length; j = i++) {
+    const a = local[i]!;
+    const b = local[j]!;
+    const ex = b.x - a.x;
+    const ey = b.y - a.y;
+    const t = Math.max(0, Math.min(1, ((x - a.x) * ex + (y - a.y) * ey) / (ex * ex + ey * ey || 1)));
+    if (Math.hypot(x - (a.x + ex * t), y - (a.y + ey * t)) <= m) return true;
+  }
+  return false;
+}

package/src/games/tangram/TangramScene.ts

@@ -0,0 +1,203 @@
+// Everything Tangram draws: the silhouette as sunken slots with faint
+// outlines (themed, as the original silhouette), and the seven tans as solid coloured slabs with a darker
+// rim, resting small in the tray and growing to full size when picked up or placed. Seen
+// straight overhead, with one world unit per view point.
+//
+// Every tan is a root (moved, turned and scaled as one) carrying its slab and its rim. Meshes are one
+// unit across per tan shape and mirror (at most 20, built once), so no level adds mesh ids.
+import { type Color, effects, type Entity, extrude, type Model, Path, type Quat, quat, tube, type Vec3, type World } from '@nayan-ui/engine';
+import { darken } from '../../services/GamesConstants';
+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 { COLORS, type Layout, PIECE_DEPTH, RIM_RADIUS, toWorld } from './TangramConstants';
+import { canonicalShapes, type PieceType, type Pt, type TangramLevel } from './TangramRules';
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('tangram/TangramScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+const BACKDROP_DEPTH = 30;
+const SLOT_Z = 0.3; // the slots' surface above the backdrop
+
+const polygon = (pts: Pt[]) => new Path().addPolygon(pts.map((p) => [p.x, p.y] as [number, number]));
+/** A closed loop through a polygon's corners (y flipped up into the world), at height z. */
+const loop = (pts: Pt[], z: number): Vec3[] => [...pts, pts[0]!].map((p) => [p.x, -p.y, z] as Vec3);
+
+/** A tan's slab, one unit to the tan unit, its bottom on z = 0. */
+const slabMesh = (type: PieceType, mirror: boolean) =>
+  cached(`tg-slab:${type}:${mirror}`, () =>
+    createShape(extrude(polygon(canonicalShapes(mirror)[type]), { depth: PIECE_DEPTH }), { center: false, shine: 0.45 })
+  );
+/** Its rim: a thin bead round its top edge. */
+const rimMesh = (type: PieceType, mirror: boolean) =>
+  cached(`tg-rim:${type}:${mirror}`, () =>
+    createShape(tube(loop(canonicalShapes(mirror)[type], 0), { radius: RIM_RADIUS, sides: 8, smoothness: 1, caps: false }), {
+      center: false,
+      shine: 0.3
+    })
+  );
+/** A slot: the tan's shape, flat. */
+const slotMesh = (type: PieceType, mirror: boolean) =>
+  cached(`tg-slot:${type}:${mirror}`, () => createShape(extrude(polygon(canonicalShapes(mirror)[type]), { depth: 0 }), { center: false }));
+// ── Spawning ──────────────────────────────────────────────────────────
+
+/** Where a tan is drawn: its centre (board points), turn (degrees, clockwise on screen), size and height (tan units). */
+export type Pose = { x: number; y: number; rot: number; scale: number; lift: number };
+type TanView = { root: Entity; slab: Entity; rim: Entity };
+export type Scene = { backdrop: Entity; slots: Entity[]; tans: TanView[] };
+
+/** A turn clockwise on screen (y down) is a turn the other way in the world (y up). */
+export const turn = (deg: number): Quat => quat.z((-deg * Math.PI) / 180);
+const slotFill = (theme: GameTheme): Color => toColor(theme.mode === 'classic' ? COLORS.CLASSIC_SLOT : theme.BOARD.CELL_EMPTY);
+const slotEdge = (theme: GameTheme): Color => toColor(theme.mode === 'classic' ? COLORS.CLASSIC_SLOT_EDGE : theme.BOARD.BORDER);
+
+const rootPosition = (l: Layout, p: Pose): Vec3 => {
+  const [x, y] = toWorld(l, p.x, p.y);
+  return [x, y, SLOT_Z + p.lift * l.unit];
+};
+
+function spawnSlots(world: World, l: Layout, level: TangramLevel, theme: GameTheme): Entity[] {
+  const out: Entity[] = [];
+  for (const t of level.pieces) {
+    const [x, y] = toWorld(l, t.targetCx, t.targetCy);
+    const rotation = turn(t.targetRot);
+    out.push(
+      world.spawn({
+        mesh: slotMesh(t.type, level.mirror),
+        position: [x, y, SLOT_Z],
+        rotation,
+        scale: l.unit,
+        color: slotFill(theme),
+        pickable: false
+      })
+    );
+    out.push(
+      world.spawn({
+        mesh: rimMesh(t.type, level.mirror),
+        position: [x, y, SLOT_Z],
+        rotation,
+        scale: [l.unit, l.unit, 0.2 * l.unit],
+        color: slotEdge(theme),
+        pickable: false
+      })
+    );
+  }
+  return out;
+}
+
+export function buildScene(world: World, l: Layout, theme: GameTheme, level: TangramLevel, poses: Pose[]): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
+  const s: Scene = { backdrop, slots: spawnSlots(world, l, level, theme), tans: [] };
+  level.pieces.forEach((t, i) => {
+    const p = poses[i]!;
+    const root = world.spawn({ mesh: 'none', position: rootPosition(l, p), rotation: turn(p.rot), scale: l.unit * p.scale, pickable: false });
+    const slab = world.spawn({
+      mesh: slabMesh(t.type, level.mirror),
+      parent: root,
+      position: [0, 0, PIECE_DEPTH / 2],
+      color: toColor(t.color),
+      pickable: false
+    });
+    const rim = world.spawn({
+      mesh: rimMesh(t.type, level.mirror),
+      parent: root,
+      position: [0, 0, PIECE_DEPTH],
+      color: toColor(darken(t.color, 0.28)),
+      pickable: false
+    });
+    s.tans.push({ root, slab, rim });
+  });
+  return s;
+}
+
+export function removeScene(world: World, s: Scene) {
+  for (const e of [s.backdrop, ...s.slots, ...s.tans.map((t) => t.root)]) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+  s.slots.forEach((e, i) => world.set(e, { color: i % 2 ? slotEdge(theme) : slotFill(theme) }));
+}
+
+// ── Motion ────────────────────────────────────────────────────────────
+
+/** Puts a tan at a pose at once (following the finger). */
+export function setPose(world: World, l: Layout, s: Scene, id: number, p: Pose) {
+  const v = s.tans[id];
+  if (!v) return;
+  world.stopAnimation(v.root);
+  world.set(v.root, { position: rootPosition(l, p), rotation: turn(p.rot), scale: l.unit * p.scale });
+}
+
+/** Glides a tan to a pose. */
+export function moveTo(world: World, l: Layout, s: Scene, id: number, p: Pose, duration: number, easing: 'easeOut' | 'back' = 'easeOut') {
+  const v = s.tans[id];
+  if (v) world.animate(v.root, { position: rootPosition(l, p), rotation: turn(p.rot), scale: l.unit * p.scale }, { duration, easing });
+}
+
+/** A new level: every tan grows in on its tray spot, one after another. */
+export function enter(world: World, l: Layout, s: Scene, poses: Pose[], stagger: number) {
+  poses.forEach((p, id) => {
+    const v = s.tans[id];
+    if (!v) return;
+    world.stopAnimation(v.root);
+    world.set(v.root, { position: rootPosition(l, p), rotation: turn(p.rot), scale: l.unit * p.scale * 0.4 });
+    world.animate(v.root, { scale: l.unit * p.scale }, { duration: 0.26, delay: id * stagger, easing: 'back' });
+  });
+}
+
+/** A tan snapped into its slot: a small pop as it lands. */
+export function pop(world: World, l: Layout, s: Scene, id: number, delay: number) {
+  const v = s.tans[id];
+  if (v) world.animate(v.root, [{ scale: l.unit * 1.08, at: 0.3 }, { scale: l.unit }], { duration: 0.29, delay, easing: 'easeOut' });
+}
+
+/** Over a matching slot at the wrong turn: a wiggle. */
+export function wiggle(world: World, s: Scene, id: number, rot: number) {
+  const v = s.tans[id];
+  if (!v) return;
+  world.animate(v.root, [{ rotation: turn(rot + 7) }, { rotation: turn(rot - 7) }, { rotation: turn(rot + 4) }, { rotation: turn(rot) }], {
+    duration: 0.26
+  });
+}
+
+/** Solved: a wave of pops round the shape, and confetti over it. */
+export function celebrate(world: World, l: Layout, s: Scene, level: TangramLevel, delay: number, stagger: number) {
+  s.tans.forEach((v, id) => {
+    world.animate(v.root, [{ scale: l.unit * 1.1, at: 0.5 }, { scale: l.unit }], {
+      duration: 0.27,
+      delay: delay + id * stagger,
+      easing: 'easeInOut'
+    });
+  });
+  const r = level.silhouetteRect;
+  const [cx, cy] = toWorld(l, r.x + r.w / 2, r.y + r.h / 2);
+  effects.confetti(world, {
+    position: [cx, cy, l.unit],
+    count: 60,
+    size: l.unit * 0.1,
+    speed: r.w * 1.4,
+    lifetime: 1.3,
+    gravity: -r.w * 2.4,
+    colors: level.pieces.slice(0, 4).map((t) => toColor(t.color))
+  });
+}
+
+/** Out of time: the tans still in the tray dim. */
+export function dim(world: World, s: Scene, ids: number[], colors: string[]) {
+  for (const id of ids) {
+    const v = s.tans[id];
+    if (!v) continue;
+    const c = toColor(colors[id]!);
+    world.animate(v.slab, { color: [c[0] * 0.45, c[1] * 0.45, c[2] * 0.5, 1] }, { duration: 0.4 });
+  }
+}

package/src/games/tank-1990/Tank1990.tsx

@@ -0,0 +1,78 @@
+// Tank 1990's screen, on the Nayan engine: the battlefield, its walls, the tanks and the shells are one
+// 3D scene (an orthographic camera leaning back over the field), under Playtura's scoreboard, controls
+// and modals. The battle is in Tank1990Game.ts (its rules in Tank1990Rules.ts), what it draws in
+// Tank1990Scene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
+// repaints the field, so the GPU view is never rebuilt. JS steps the battle (a few tanks and shells) and
+// the world once a frame; turns, shields, flashes and explosions animate in the engine's 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, textColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { ENEMIES_PER_LEVEL, FRAME, getLayout, LIGHT, LIVES } from './Tank1990Constants';
+import { createGame, dispose, drag, reset, setLayout, setTheme, start, tick } from './Tank1990Game';
+
+const SOUNDS = GAME_SOUNDS.TANK_1990;
+const ENEMIES_CLASSIC_COLOR = '#FFFFFF';
+const scoreFormatter = (s: number) => s.toLocaleString();
+
+export const Tank1990 = engineGame(GAME_IDS.TANK_1990, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [lives, setLives] = useLiveState(LIVES);
+  const [enemies, setEnemies] = useLiveState(ENEMIES_PER_LEVEL);
+
+  // Win or lose when the battle ends
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.TANK_1990,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.boardWidth + Math.min(FRAME, l.cell * 0.5) * 2;
+    },
+    drag,
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
+    onOver: (fx, s) => fx(s === 'win' ? SOUNDS.WIN : SOUNDS.GAME_OVER, s === 'win' ? HapticType.SUCCESS : HapticType.HEAVY),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onLives = setLives;
+      g.onEnemies = setEnemies;
+      g.onEvent = (event) => {
+        if (event === 'fire') fx(SOUNDS.FIRE);
+        else if (event === 'kill') fx(SOUNDS.DESTROY, HapticType.SUCCESS);
+        else fx(SOUNDS.DAMAGE, HapticType.ERROR);
+      };
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[
+        scoreColumn(score, 'SCORE'),
+        livesColumn(lives, LIVES),
+        textColumn('ENEMIES', enemies, theme.mode === 'classic' ? ENEMIES_CLASSIC_COLOR : undefined)
+      ]}
+      subtext="Defend your base!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'LEVEL COMPLETE!' : 'GAME OVER',
+        message: status === 'win' ? 'All enemies destroyed!' : 'Your base was destroyed!',
+        scoreLabel: status === 'win' ? 'Level Complete!' : 'Final Score',
+        score,
+        formatter: scoreFormatter,
+        buttonText: status === 'win' ? 'Next Level!' : 'Try Again!'
+      })}
+    />
+  );
+});