@nayan-ui/games 1.20.0 → 1.21.0

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

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

@@ -1,80 +0,0 @@
-// 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!'
-      })}
-    />
-  );
-});