@nayan-ui/games 1.18.0 → 1.20.0

package/src/games/space-fighter/SpaceFighterScene.ts

@@ -0,0 +1,550 @@
+// Everything Space Fighter draws, in deep space seen through a perspective camera at the origin looking
+// down -z. The game plays on a plane `PLAY_DEPTH` ahead, where one screen point maps to `layout.k` world
+// units, so the rules stay in screen points while the ship banks and the asteroids tumble in 3D. Behind
+// it: a starfield drifting past at many depths (real parallax), nebula clouds and a galaxy band, a
+// cratered moon. Each kind of thing is one shared mesh (one instanced draw):
+// mesh ids are app-wide and limited, so each is built once.
+import {
+  type Color,
+  effects,
+  ellipsoid,
+  type Entity,
+  extrude,
+  type Keyframe,
+  lathe,
+  loft,
+  type LoftSection as Section,
+  merge,
+  type Model,
+  type MutableQuat,
+  Path,
+  type Quat,
+  quat,
+  tube,
+  type Vec3,
+  type World
+} from '@nayan-ui/engine';
+import { noise, random } from '../shared/EngineMeadow';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { toColor } from '../shared/EngineUtils';
+import { FOV, HIT_COOLDOWN, type Layout, PLAY_DEPTH } from './SpaceFighterConstants';
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('space-fighter/SpaceFighterScene:' + 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 mix = (a: RGB, b: RGB, t: number): RGB => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
+const shade = (c: RGB, k: number): RGB => [c[0] * k, c[1] * k, c[2] * k];
+const smooth = (a: number, b: number, x: number) => {
+  const t = Math.min(1, Math.max(0, (x - a) / (b - a)));
+  return t * t * (3 - 2 * t);
+};
+const TAN_HALF = Math.tan(FOV / 2);
+
+/** A screen point on the play plane (or `depth` ahead), in world units. */
+export const toWorld = (l: Layout, x: number, y: number, depth = PLAY_DEPTH): Vec3 => {
+  const k = (l.k * depth) / PLAY_DEPTH;
+  return [(x - l.width / 2) * k, (l.height / 2 - y) * k, -depth];
+};
+
+// ── The ship (1 unit = its hitbox; nose up the screen, top toward the camera) ──
+
+/**
+ * A sleek fighter: a sculpted fuselage (raised spine, pointed nose, darker belly, cyan racing stripe)
+ * under a glass canopy, thick swept wings with dark leading edges and cannons at their tips, twin
+ * canted tail fins and two engine nacelles with flared nozzles. Built along +z, then stood nose-up.
+ */
+const shipMesh = () =>
+  cached('sf-ship', () => {
+    const hull = rgb('#E3EAF3');
+    const belly = rgb('#8A97A8');
+    const cyan = rgb('#00C8FF');
+    const steel = rgb('#55606F');
+    const navy = rgb('#0B3A5A');
+    // Fuselage sections along z (nose at +z): wide and low at the tail, a raised spine over the
+    // cockpit, tapering to a sharp nose
+    const sections: Section[] = [
+      { z: -0.62, bottom: -0.1, top: 0.12, width: 0.15, square: 3 },
+      { z: -0.42, bottom: -0.14, top: 0.2, width: 0.22, square: 3.2 },
+      { z: -0.05, bottom: -0.15, top: 0.24, width: 0.24, square: 3 },
+      { z: 0.22, bottom: -0.12, top: 0.25, width: 0.19, square: 2.6 },
+      { z: 0.46, bottom: -0.08, top: 0.15, width: 0.11, square: 2.4 },
+      { z: 0.64, bottom: -0.03, top: 0.05, width: 0.04, square: 2.2 },
+      { z: 0.73, bottom: -0.004, top: 0.004, width: 0.004, square: 2 }
+    ];
+    const fuselage = loft(sections, {
+      around: 36,
+      smoothness: 4,
+      color: ([, y, z], n) => {
+        let c = mix(belly, hull, smooth(-0.5, 0.4, n[1]));
+        c = mix(c, cyan, smooth(0.03, 0, Math.abs(z - 0.02) - 0.035) * smooth(0.3, 0.7, n[1])); // the stripe over the top
+        if (z > 0.6) c = mix(c, cyan, 0.5); // a painted nose
+        return [...shade(c, 0.9 + 0.1 * smooth(-0.1, 0.15, y)), 1] as Color;
+      }
+    });
+    const canopy = ellipsoid([0.1, 0.09, 0.2], [0.07, 0.16, 0.32, 1], 24);
+    const glint = ellipsoid([0.025, 0.012, 0.06], [0.8, 0.92, 1, 1], 12);
+    // Thick swept wings in the hull's mid-plane (y), each from the root to its tip
+    const wing = (side: number): Section[] => {
+      const root = 0.15;
+      const tip = 0.95;
+      return [
+        { z: side * root, bottom: -0.06, top: 0.06, width: 0.32, square: 2.4 },
+        { z: side * (root + 0.4), bottom: -0.04, top: 0.04, width: 0.21, square: 2.4 },
+        { z: side * tip, bottom: -0.025, top: 0.025, width: 0.11, square: 2.2 }
+      ].sort((a, b) => a.z - b.z);
+    };
+    // A wing lofts across (x) from root to tip; built along z, it turns to run across, its chord swept back
+    const wingPart = (side: number) => ({
+      geometry: loft(wing(side), { around: 20, smoothness: 3, color: [...hull, 1] as Color }),
+      rotation: quat.y(Math.PI / 2),
+      position: [0, 0, -0.08] as Vec3
+    });
+    const leading = (side: number) =>
+      tube(
+        [
+          [side * 0.17, 0.015, 0.2],
+          [side * 0.95, 0.01, -0.02]
+        ],
+        { radius: 0.022, sides: 8, color: [...navy, 1] as Color }
+      );
+    const cannon = (side: number) =>
+      tube(
+        [
+          [side * 0.95, 0, -0.18],
+          [side * 0.95, 0, 0.24]
+        ],
+        { radius: (t: number) => 0.035 - t * 0.012, sides: 10, color: [...steel, 1] as Color }
+      );
+    const nacelle = (side: number) =>
+      tube(
+        [
+          [side * 0.3, -0.02, 0.08],
+          [side * 0.3, -0.02, -0.56]
+        ],
+        { radius: (t: number) => 0.09 + 0.025 * t, sides: 18, color: [...steel, 1] as Color }
+      );
+    const nozzle = (side: number) => ({
+      geometry: lathe(
+        [
+          [0.08, 0.02],
+          [0.125, -0.02],
+          [0.13, -0.07],
+          [0.095, -0.07]
+        ],
+        { segments: 18, color: [...shade(steel, 0.7), 1] as Color }
+      ),
+      position: [side * 0.3, -0.02, -0.56] as Vec3,
+      rotation: quat.x(Math.PI / 2)
+    });
+    const tailFin = (side: number) => ({
+      geometry: extrude(new Path().moveTo(0, 0).lineTo(0.2, 0).lineTo(0.05, -0.18).lineTo(-0.04, -0.18).close(), { depth: 0.025 }),
+      position: [side * 0.12, 0.17, -0.5] as Vec3,
+      rotation: quat.multiply(quat.z(side * 0.35), quat.y(Math.PI / 2)),
+      color: [...navy, 1] as Color
+    });
+    const body = merge([
+      { geometry: fuselage },
+      { geometry: canopy, position: [0, 0.21, 0.2] },
+      { geometry: glint, position: [-0.035, 0.29, 0.26] },
+      wingPart(1),
+      wingPart(-1),
+      { geometry: leading(1) },
+      { geometry: leading(-1) },
+      { geometry: cannon(1) },
+      { geometry: cannon(-1) },
+      { geometry: nacelle(1) },
+      { geometry: nacelle(-1) },
+      nozzle(1),
+      nozzle(-1),
+      tailFin(1),
+      tailFin(-1)
+    ]);
+    // Stand it up: nose (+z) up the screen (+y), its top (+y) toward the camera (+z)
+    return createShape(merge([{ geometry: body, rotation: quat.multiply(quat.y(Math.PI), quat.x(-Math.PI / 2)) }]), { center: false, shine: 0.65 });
+  });
+
+const LIGHT_RED: Color = [2.2, 0.35, 0.3, 1];
+const LIGHT_GREEN: Color = [0.35, 2.2, 0.6, 1];
+const FLAME_IDLE: Color = [2.2, 1.25, 0.45, 0.9];
+const FLAME_BOOST: Color = [1.9, 2.2, 2.6, 0.95];
+/** The ship leans away from the camera a little, so its depth shows; then banks into a turn. */
+const LEAN = quat.x(-0.32);
+const shipTurn: MutableQuat = [0, 0, 0, 1];
+/** The ship's lean and bank; pass `out` to reuse it (the result is only valid until the next call with it). */
+export const shipRotation = (bank: number, out?: MutableQuat): Quat => quat.multiply(LEAN, quat.y(bank, out), out);
+
+export type Ship = { root: Entity; body: Entity; flames: Entity[] };
+
+export function spawnShip(world: World, l: Layout, x: number): Ship {
+  const size = l.shipSize * l.k;
+  const root = world.spawn({ mesh: 'none', position: toWorld(l, x, l.shipY), rotation: shipRotation(0), pickable: false });
+  // A gentle hover
+  const body = world.spawn({
+    mesh: shipMesh(),
+    parent: root,
+    scale: size,
+    color: [1, 1, 1, 1],
+    bob: { amplitude: [size * 0.02, size * 0.04, 0], speed: 2.2 },
+    pickable: false
+  });
+  const flames = [
+    [0.3, 0.28],
+    [-0.3, 0.28],
+    [0, 0.16]
+  ].map(([fx, s]) =>
+    world.spawn({
+      mesh: 'puff',
+      parent: body,
+      position: [fx!, -0.66, 0.02],
+      scale: s!,
+      color: FLAME_IDLE,
+      pickable: false
+    })
+  );
+  // Navigation lights at the cannon tips, blinking in turn
+  [1, -1].forEach((side, i) => {
+    const color = i === 0 ? LIGHT_GREEN : LIGHT_RED;
+    const light = world.spawn({ mesh: 'sphere', parent: body, position: [side * 0.95, 0.24, 0], scale: 0.07, color, pickable: false });
+    world.animate(
+      light,
+      [
+        { color, at: 0.15 },
+        { color: [color[0] * 0.25, color[1] * 0.25, color[2] * 0.25, 1], at: 0.3 },
+        { color: [color[0] * 0.25, color[1] * 0.25, color[2] * 0.25, 1] }
+      ],
+      {
+        duration: 1.2,
+        delay: i * 0.6,
+        repeat: 'forever',
+        easing: 'linear'
+      }
+    );
+  });
+  flicker(world, l, { root, body, flames }, false);
+  return { root, body, flames };
+}
+
+/** The exhausts flicker; dragging (thrusters on) burns them bigger and white-blue. */
+export function flicker(world: World, _l: Layout, s: Ship, boost: boolean) {
+  s.flames.forEach((f, i) => {
+    const base = (i === 2 ? 0.16 : 0.28) * (boost ? 1.55 : 1);
+    world.stopAnimation(f);
+    world.set(f, { scale: base, color: boost ? FLAME_BOOST : FLAME_IDLE });
+    world.animate(f, { scale: base * 1.35 }, { duration: 0.06 + i * 0.015, repeat: 'forever', yoyo: true, easing: 'easeInOut' });
+  });
+}
+
+/** A run starts: the ship zooms up into place from below the screen. */
+export function launchShip(world: World, l: Layout, s: Ship) {
+  const size = l.shipSize * l.k;
+  world.set(s.body, { position: [0, -size * 4, 0] });
+  world.animate(s.body, { position: [0, 0, 0] }, { spring: { stiffness: 140, damping: 14 } });
+}
+
+export function placeShip(world: World, l: Layout, s: Ship, x: number, bank: number) {
+  world.set(s.root, { position: toWorld(l, x, l.shipY), rotation: shipRotation(bank, shipTurn) });
+}
+
+/** Hit: the ship barrel-rolls off the blow and blinks through its safe spell. */
+export function blinkShip(world: World, s: Ship) {
+  const steps = Math.round(HIT_COOLDOWN / 0.1);
+  const keys: Keyframe[] = Array.from({ length: steps }, (_, i) => ({ color: i % 2 ? [1, 1, 1, 1] : [1, 1, 1, 0.3], at: (i + 1) / steps }));
+  world.stopAnimation(s.body);
+  world.set(s.body, { position: [0, 0, 0] });
+  world.animate(s.body, keys, { duration: HIT_COOLDOWN, easing: 'linear' });
+  world.animate(s.body, { turn: [0, Math.PI * 2, 0] }, { duration: 0.55, easing: 'easeOut' });
+}
+
+export function steadyShip(world: World, s: Ship) {
+  world.stopAnimation(s.body);
+  world.set(s.body, { color: [1, 1, 1, 1], position: [0, 0, 0], rotation: [0, 0, 0, 1] });
+}
+
+// ── Asteroids ─────────────────────────────────────────────────────────
+
+const ROCK_VARIANTS = 4;
+/** Each kind of rock: its body colour and the colour of its craters and crevices. */
+const ROCK_KINDS: [string, string][] = [
+  ['#7A5230', '#2A1508'], // iron-rich brown
+  ['#6E6A66', '#25221F'], // grey stone
+  ['#3E3B40', '#121014'], // dark basalt
+  ['#9FB3C4', '#3A4A5A'] // icy
+];
+/**
+ * A detailed asteroid one unit across: big lumps, smaller bumps and grit, and craters punched in
+ * with raised rims, dark in the hollows; four kinds for variety.
+ */
+const rockMesh = (variant: number) =>
+  cached(`sf-rock-${variant}`, () => {
+    const seed = variant * 7.3 + 1;
+    const [bodyHex, darkHex] = ROCK_KINDS[variant % ROCK_KINDS.length]!;
+    const body = rgb(bodyHex);
+    const dark = rgb(darkHex);
+    const rand = random(40 + variant);
+    // Craters: centres on the sphere (u around, v down), radii
+    const craters = Array.from({ length: 6 }, () => ({ u: rand(), v: 0.2 + rand() * 0.6, r: 0.06 + rand() * 0.08 }));
+    const around = (u: number) => [Math.cos(u * Math.PI * 2), Math.sin(u * Math.PI * 2)] as const;
+    const craterAt = (u: number, v: number) => {
+      let dent = 0;
+      for (const c of craters) {
+        const du = Math.min(Math.abs(u - c.u), 1 - Math.abs(u - c.u)) * Math.sin(v * Math.PI) * 2;
+        const d = Math.hypot(du, v - c.v) / c.r;
+        if (d < 1) dent -= 0.07 * (1 - d * d);
+        else if (d < 1.35) dent += 0.025 * (1 - (d - 1) / 0.35);
+      }
+      return dent;
+    };
+    const shape = (u: number, v: number) => {
+      const [cx, cy] = around(u);
+      const lumps =
+        noise(cx * 1.4 + seed, cy * 1.4 + v * 2.6 + seed) * 0.22 +
+        noise(cx * 3.5 + seed, cy * 3.5 + v * 6) * 0.08 +
+        noise(cx * 9, cy * 9 + v * 14 + seed) * 0.025 -
+        0.14;
+      return (lumps + craterAt(u, v)) * Math.sin(v * Math.PI);
+    };
+    const profile: [number, number][] = Array.from({ length: 19 }, (_, i) => {
+      const a = -Math.PI / 2 + (i / 18) * Math.PI;
+      return [Math.max(0.001, Math.cos(a) * 0.5), Math.sin(a) * 0.5];
+    });
+    return createShape(
+      lathe(profile, {
+        segments: 32,
+        displace: shape,
+        color: ({ u, v, position: p }) => {
+          const hollow = smooth(0, -0.06, craterAt(u, v)); // crater floors
+          const rim = smooth(0.005, 0.02, craterAt(u, v));
+          const crevice = smooth(0.55, 0.75, noise(p[0] * 6 + seed, p[1] * 6 + p[2] * 4));
+          const grit = 0.8 + 0.32 * noise(p[0] * 24 + p[2] * 9, p[1] * 24 + seed);
+          const c = mix(mix(body, dark, Math.max(hollow * 0.85, crevice * 0.45)), shade(body, 1.25), rim * 0.6);
+          return [...shade(c, grit), 1] as Color;
+        }
+      }),
+      { shine: 0.1 }
+    );
+  });
+
+export type Belt = { root: Entity };
+
+/**
+ * A pair's two belts of tumbling asteroids, its top edge at screen y: one from the left edge to the
+ * gap's left side, one from its right side to the right edge. The rocks reach the gap's edges exactly,
+ * as the belts' hitboxes do, with smaller ones filling the corners; sizes vary along each belt.
+ */
+export function spawnBelts(world: World, l: Layout, top: number, gapLeft: number, seed: number): Belt {
+  const root = world.spawn({ mesh: 'none', position: toWorld(l, l.width / 2, top), pickable: false });
+  const rand = random(seed);
+  const h = l.beltHeight;
+  const k = l.k;
+  const rock = (x: number, y: number, d: number) =>
+    world.spawn({
+      mesh: rockMesh(Math.floor(rand() * ROCK_VARIANTS)),
+      parent: root,
+      position: [(x - l.width / 2) * k, -(y - top) * k, (rand() - 0.5) * h * 0.35 * k],
+      scale: [d * k * (0.9 + rand() * 0.25), d * k * (0.85 + rand() * 0.2), d * k * (0.9 + rand() * 0.2)],
+      rotation: quat.multiply(quat.z(rand() * 6.3), quat.x(rand() * 6.3)),
+      spin: [(rand() - 0.5) * 1.6, (rand() - 0.5) * 1.6, (rand() - 0.5) * 1.2],
+      pickable: false
+    });
+  const d = h * 1.08;
+  const belt = (from: number, to: number, towardGap: 1 | -1) => {
+    if (to - from < 2) return;
+    // From the gap's edge outward, past the screen's edge
+    const edge = towardGap === 1 ? to : from;
+    const length = to - from + d;
+    for (let s = d / 2; s < length;) {
+      const size = d * (0.7 + rand() * 0.5);
+      rock(edge - towardGap * s, top + h / 2 + (rand() - 0.5) * h * 0.12, size);
+      s += size * 0.66;
+    }
+    // Fill the hitbox's corners at the gap
+    rock(edge - towardGap * d * 0.22, top + h * 0.18, d * 0.42);
+    rock(edge - towardGap * d * 0.22, top + h * 0.82, d * 0.42);
+  };
+  belt(-d / 2, gapLeft, 1);
+  belt(gapLeft + l.gap, l.width + d / 2, -1);
+  return { root };
+}
+
+export function placeBelts(world: World, l: Layout, b: Belt, top: number) {
+  world.set(b.root, { position: toWorld(l, l.width / 2, top) });
+}
+
+/** A hit: fire and debris where the ship struck. */
+export function explode(world: World, l: Layout, x: number, y: number) {
+  const at = toWorld(l, x, y);
+  const size = l.shipSize * l.k;
+  effects.explosion(world, {
+    position: at,
+    count: 24,
+    size: size * 0.9,
+    speed: size * 3,
+    lifetime: 0.6,
+    colors: [
+      [2.4, 1.6, 0.5, 0.95],
+      [2.2, 0.8, 0.3, 0.9],
+      [1.4, 0.4, 0.2, 0.8]
+    ],
+    smoke: [0.3, 0.25, 0.3, 0.5],
+    debris: [toColor('#C9D3DE'), toColor('#00C8FF')]
+  });
+}
+
+// ── Deep space ────────────────────────────────────────────────────────
+
+/** The view's half extents at a depth, in world units. */
+const halfAt = (l: Layout, depth: number): [number, number] => [depth * TAN_HALF * (l.width / l.height), depth * TAN_HALF];
+
+const moonMesh = () =>
+  cached('sf-moon', () =>
+    createShape(
+      merge([
+        {
+          geometry: lathe(
+            Array.from({ length: 17 }, (_, i) => {
+              const a = -Math.PI / 2 + (i / 16) * Math.PI;
+              return [Math.max(0.001, Math.cos(a) * 0.5), Math.sin(a) * 0.5] as [number, number];
+            }),
+            {
+              segments: 40,
+              color: ({ position: p }) => {
+                const maria = smooth(0.55, 0.7, noise(p[0] * 3 + 4, p[1] * 3 + p[2] * 2));
+                const crater = smooth(0.7, 0.8, noise(p[0] * 9 + 1, p[1] * 9 - p[2] * 4));
+                return shade(mix(rgb('#E8E4D8'), rgb('#8A8070'), maria * 0.7 + crater * 0.5), 0.9 + 0.15 * noise(p[0] * 30, p[1] * 30));
+              }
+            }
+          )
+        }
+      ]),
+      { shine: 0.05 }
+    )
+  );
+
+/** A ringed ice planet: banded in pale blues and teals, its rings tilted round it. */
+export type Space = {
+  all: Entity[];
+  /** The sun (day) or the moon (night), with its glow. */ sky: Entity[];
+  stars: { e: Entity; x: number; y: number; z: number; since: number }[];
+};
+
+export const STAR_DRIFT = 5; // world units per second down past the camera
+
+/** By day a blazing sun with its warm glow; by night the moon and a faint glow from a distant sun. */
+function spawnSky(world: World, l: Layout, day: boolean): Entity[] {
+  const out: Entity[] = [];
+  const [hx, hy] = halfAt(l, 170);
+  const at: Vec3 = [-hx * 0.55, hy * 0.38, -170];
+  if (day) {
+    const size = hy * 0.26;
+    out.push(world.spawn({ mesh: 'puff', position: [at[0], at[1], at[2] - 2], scale: size * 4.2, color: [1.8, 1.25, 0.6, 0.16], pickable: false }));
+    out.push(world.spawn({ mesh: 'puff', position: [at[0], at[1], at[2] - 1], scale: size * 2.2, color: [2, 1.6, 0.8, 0.35], pickable: false }));
+    out.push(world.spawn({ mesh: 'sphere', position: at, scale: size, color: [2.4, 2.05, 1.1, 1], pickable: false })); // self-lit
+    return out;
+  }
+  const [gx, gy] = halfAt(l, 400);
+  out.push(world.spawn({ mesh: 'puff', position: [-gx * 0.9, gy * 0.75, -400], scale: gy * 0.7, color: [1.6, 1.2, 0.9, 0.18], pickable: false }));
+  out.push(world.spawn({ mesh: moonMesh(), position: at, scale: hy * 0.32, spin: [0, 0.05, 0], pickable: false }));
+  return out;
+}
+
+/** A new theme: the sun comes out by day, the moon by night. */
+export function setSpaceTheme(world: World, l: Layout, space: Space, day: boolean) {
+  for (const e of space.sky) world.despawn(e);
+  space.all = space.all.filter((e) => !space.sky.includes(e));
+  space.sky = spawnSky(world, l, day);
+  space.all.push(...space.sky);
+}
+
+export function spawnSpace(world: World, l: Layout, clock: number, day: boolean): Space {
+  const all: Entity[] = [];
+  const rand = random(3);
+  // Nebula clouds and a faint galaxy band, far back
+  const nebula: Color[] = [
+    [0.55, 0.25, 0.95, 0.1],
+    [0.25, 0.4, 1, 0.08],
+    [0.85, 0.3, 0.75, 0.07]
+  ];
+  for (let i = 0; i < 16; i++) {
+    const depth = 430 + rand() * 50;
+    const [hx, hy] = halfAt(l, depth);
+    all.push(
+      world.spawn({
+        mesh: 'puff',
+        position: [(rand() * 2 - 1) * hx * 1.1, (rand() * 2 - 1) * hy, -depth],
+        scale: hy * (0.5 + rand() * 0.6),
+        color: nebula[i % 3]!,
+        pickable: false
+      })
+    );
+  }
+  for (let i = 0; i < 36; i++) {
+    const depth = 470;
+    const [hx, hy] = halfAt(l, depth);
+    const t = i / 35;
+    all.push(
+      world.spawn({
+        mesh: 'puff',
+        position: [(-1.1 + t * 2.2) * hx, (0.75 - t * 1.3 + (rand() - 0.5) * 0.15) * hy, -depth],
+        scale: hy * (0.12 + rand() * 0.14),
+        color: [0.85, 0.8, 1.2, 0.06],
+        pickable: false
+      })
+    );
+  }
+  // The sun by day, the moon by night
+  const sky = spawnSky(world, l, day);
+  all.push(...sky);
+  // Stars at every depth, drifting down at one speed: the near ones stream past, the far ones crawl
+  const stars: Space['stars'] = [];
+  const tints: Color[] = [
+    [2.2, 2.2, 2.4, 1],
+    [2.3, 2.1, 1.8, 1],
+    [1.9, 2.1, 2.6, 1]
+  ];
+  for (let i = 0; i < 260; i++) {
+    const z = 30 + Math.pow(rand(), 0.7) * 300;
+    const [hx, hy] = halfAt(l, z);
+    const x = (rand() * 2 - 1) * hx * 1.05;
+    const y = (rand() * 2 - 1) * (hy + 1);
+    const e = world.spawn({
+      mesh: 'sphere',
+      position: [x, y, -z],
+      scale: z * 0.0028 * (0.6 + rand() * 1.1),
+      color: tints[i % 3]!,
+      velocity: [0, -STAR_DRIFT, 0],
+      pickable: false
+    });
+    all.push(e);
+    stars.push({ e, x, y, z, since: clock });
+  }
+  return { all, sky, stars };
+}
+
+/** Stars that have drifted below the view come back in above it. */
+export function wrapStars(world: World, s: Space, clock: number) {
+  for (const star of s.stars) {
+    const hy = star.z * TAN_HALF + 1;
+    if (star.y - STAR_DRIFT * (clock - star.since) < -hy) {
+      star.y = hy;
+      star.since = clock;
+      world.set(star.e, { position: [star.x, hy, -star.z] });
+    }
+  }
+}
+
+export function removeAll(world: World, entities: Entity[]) {
+  for (const e of entities) world.despawn(e);
+}

package/src/games/spider-solitaire/SpiderSolitaire.tsx

@@ -0,0 +1,80 @@
+// Spider Solitaire's screen, on the Nayan engine: the table, the ten piles, the deck and the finished
+// runs are one 3D scene (an orthographic camera leaning back over the cards), under Playtura's
+// scoreboard, controls and modals. The play is in SpiderSolitaireGame.ts (the rules in
+// SpiderSolitaireRules.ts), what it draws in SpiderSolitaireScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again re-deal it in place and a theme change
+// repaints the table, so the GPU view is never rebuilt. Cards glide and flip in the engine's Rust core;
+// JS reads the finger and steps the clock and the world once a frame.
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { formatTime, GAME_IDS, isTablet } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { textColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, LIGHT } from './SpiderSolitaireConstants';
+import { createGame, dispose, drag, type GameEvent, reset, setLayout, setTheme, start, tick } from './SpiderSolitaireGame';
+import { dealsLeft, RUNS_TO_WIN } from './SpiderSolitaireRules';
+
+const SOUNDS = GAME_SOUNDS.SPIDER_SOLITAIRE;
+
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
+  select: { sound: SOUNDS.SELECT, haptic: HapticType.LIGHT },
+  deselect: { sound: SOUNDS.DESELECT, haptic: HapticType.LIGHT },
+  invalid: { sound: SOUNDS.INVALID, haptic: HapticType.LIGHT },
+  place: { sound: SOUNDS.PLACE, haptic: HapticType.MEDIUM },
+  deal: { sound: SOUNDS.DRAW, haptic: HapticType.MEDIUM },
+  complete: { sound: SOUNDS.COMPLETE, haptic: HapticType.SUCCESS },
+  win: { sound: SOUNDS.WIN, haptic: HapticType.SUCCESS }
+};
+
+const tryAgain = () => 'Try again!';
+
+export const SpiderSolitaire = engineGame(GAME_IDS.SPIDER_SOLITAIRE, (props) => {
+  const [deals, setDeals] = useLiveState<number | null>(null);
+  const [completed, setCompleted] = useLiveState(0);
+
+  // A win when the last run lifts off (its sound played as it did), scored by its time
+  const { game, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.SPIDER_SOLITAIRE,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset, isTablet);
+      setLayout(g, l);
+      return l.pitch * 9 + l.card;
+    },
+    drag,
+    reportScore: (g, s) => (s === 'win' ? g.score : 0),
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
+    wire: (g, fx) => {
+      g.onDeals = setDeals;
+      g.onCompleted = setCompleted;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[textColumn('DEALS', deals ?? dealsLeft(game.board)), textColumn('COMPLETED', `${completed}/${RUNS_TO_WIN}`)]}
+      subtext="Deal the cards!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU WON!' : 'NO MOVES LEFT',
+        message: status === 'win' ? 'All suits completed!' : 'No more valid moves!',
+        scoreLabel: status === 'win' ? 'Completion Time' : 'No Moves Left!',
+        score: game.time,
+        formatter: status === 'win' ? formatTime : tryAgain,
+        buttonText: 'Play Again!'
+      })}
+    />
+  );
+});