@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/crossy-road/CrossyRoadGame.ts

@@ -0,0 +1,293 @@
+// Crossy Road's play, with no React: build a game with `createGame`, give it a layout, `start` it and
+// `tick` it every frame. Tap (or swipe up) to hop forward, swipe down or sideways to hop that way, and
+// cross all nine roads to the far grass inside two minutes. A car or bus on your lane where you stand
+// ends the run; so does the clock. Every road crossed scores 2,000; a win adds a bonus for time left.
+//
+// Traffic and hop collisions advance at 60 Hz; native hop animations use the same clamped clock.
+import { type Camera, type DragEvent, World } from '@nayan-ui/engine';
+import { calculateTimeBasedScore } from '../../services/ScoringService';
+import { frameCamera } from './CrossyRoadCamera';
+import { GAME_DURATION, type Layout, MAX_PENDING_MS, MOVE_TIME, SCORE_PER_CROSS, STEP_MS, SWIPE, TAP_MAX } from './CrossyRoadConstants';
+import { crossyMeshes } from './CrossyRoadMeshes';
+import {
+  buildTraffic,
+  hit,
+  type Hop,
+  hopBack,
+  hopForward,
+  hopSide,
+  moveTraffic,
+  type Player,
+  playerX,
+  scaleFor,
+  startPlayer,
+  type Vehicle
+} from './CrossyRoadRules';
+import { buildScene, celebrate, hop, placePlayer, placeVehicles, removeScene, type Scene, setTraffic, stumble } from './CrossyRoadScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+/** hop: a hop taken; cross: a road crossed (and the goal reached); crash: hit; timeUp: the clock ran out. */
+export type GameEvent = 'hop' | 'cross' | 'crash' | 'timeUp';
+
+type Dir = 'up' | 'down' | 'left' | 'right';
+type MovingHop = { from: Player; to: Player; result: Hop; elapsed: number; direction: Dir };
+const WORLD_CAPACITY = 1600; // procedural scenery, four entities per vehicle, the pedestrian and bursts
+
+export function createGame(night: boolean) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, -60, 60], target: [0, 0, 0], fov: 0.7 };
+  const g = {
+    world,
+    camera,
+    assets: crossyMeshes(),
+    night,
+    layout: null as Layout | null,
+    scene: null as Scene | null,
+    phase: 'ready' as Phase,
+    traffic: [] as Vehicle[],
+    nextId: 0,
+    player: startPlayer() as Player,
+    hopping: null as MovingHop | null,
+    queuedHop: null as Dir | null,
+    alive: true,
+    won: false,
+    /** Score and the countdown live in the engine (Rust), advanced by world.update. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    /** The whole seconds shown. */
+    timeLeft: GAME_DURATION,
+    pending: 0,
+    clock: 0,
+    /** A finger down: where and when, and whether it's already swiped. */
+    press: null as { x: number; y: number; at: number; swiped: boolean } | null,
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number, _crossings: number) => {},
+    onTime: (_t: number) => {},
+    onEvent: (_e: GameEvent) => {}
+  };
+  world.scoreboard.reset(0, GAME_DURATION);
+  world.scoreboard.handlers = {
+    onSecond: (t) => {
+      g.timeLeft = t;
+      g.onTime(t);
+    },
+    onTimeUp: () => g.phase === 'playing' && g.alive && timeUp(g)
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Lays the board out for the view (first layout, header height, rotation): a fresh board is dealt for the new size. */
+export function setLayout(g: Game, l: Layout) {
+  const previous = g.layout;
+  const resized = !g.layout || g.layout.width !== l.width || g.layout.tile !== l.tile;
+  if (g.scene) removeScene(g.world, g.scene);
+  g.layout = l;
+  frameCamera(g.camera, l);
+  // The traffic's sizes and wrap are in view points: a new width deals a new board (as the original board was built for its window)
+  if (resized && g.phase !== 'playing') {
+    g.traffic = buildTraffic(l, g.nextId);
+    g.nextId += g.traffic.length;
+  } else if (resized && previous) {
+    const ratio = l.tile / previous.tile;
+    for (const vehicle of g.traffic) {
+      vehicle.x = l.gridLeft + (vehicle.x - previous.gridLeft) * ratio;
+      vehicle.width *= ratio;
+      vehicle.speed *= ratio;
+    }
+  }
+  g.scene = buildScene(g.world, l, g.assets, g.night, g.traffic);
+  placePlayer(g.world, l, g.scene, g.player.row, g.player.col);
+  if (g.hopping) {
+    // Rebuild the interrupted native hop too, so a theme/size change keeps visuals and hits together.
+    const moving = g.hopping;
+    moving.elapsed = 0;
+    hop(g.world, l, g.scene, [moving.from.row, moving.from.col], [moving.to.row, moving.to.col], moving.direction);
+  }
+}
+
+/** Day or night (the dark theme): the scene is rebuilt where things stand. */
+export function setNight(g: Game, night: boolean) {
+  if (night === g.night) return;
+  g.night = night;
+  if (g.layout) setLayout(g, g.layout);
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+/** A fresh board, the pedestrian back on the start grass, not running (the original game's initialize). */
+function deal(g: Game) {
+  const l = g.layout;
+  g.player = startPlayer();
+  g.hopping = null;
+  g.queuedHop = null;
+  g.alive = true;
+  g.won = false;
+  g.world.scoreboard.reset(0, GAME_DURATION);
+  g.timeLeft = GAME_DURATION;
+  g.pending = 0;
+  g.press = null;
+  if (l) {
+    g.traffic = buildTraffic(l, g.nextId);
+    g.nextId += g.traffic.length;
+    if (g.scene) {
+      setTraffic(g.world, l, g.assets, g.scene, g.traffic);
+      placePlayer(g.world, l, g.scene, 0, g.player.col);
+    }
+  }
+  g.onScore(0, 0);
+  g.onTime(GAME_DURATION);
+}
+
+/** Start: a fresh board, and the clock running (as the original Start dealt one). */
+export function start(g: Game) {
+  if (g.phase === 'playing') return;
+  deal(g);
+  g.world.scoreboard.startCountdown(GAME_DURATION);
+  g.phase = 'playing';
+  g.onPhase('playing');
+}
+
+/** Stop and Play Again: a fresh board, waiting. The world, and the GPU view drawing it, are kept. */
+export function reset(g: Game) {
+  deal(g);
+  g.phase = 'ready';
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.dispose();
+}
+
+export function tick(g: Game, dt: number) {
+  if (g.world.isDisposed) return;
+  const seconds = Math.max(0, Math.min(dt, MAX_PENDING_MS / 1000));
+  g.clock += seconds;
+  const l = g.layout;
+  let trafficMoved = false;
+  if (l && g.phase === 'playing' && g.alive) {
+    // Traffic in 60 Hz frames, then the hit test where the pedestrian stands
+    let pending = Math.min(g.pending + seconds * 1000, MAX_PENDING_MS);
+    while (g.alive && pending >= STEP_MS) {
+      pending -= STEP_MS;
+      moveTraffic(l, g.traffic, scaleFor(g.player));
+      trafficMoved = true;
+      const moving = g.hopping;
+      if (moving) moving.elapsed = Math.min(MOVE_TIME, moving.elapsed + STEP_MS / 1000);
+      const t = moving ? moving.elapsed / MOVE_TIME : 0;
+      const row = moving ? moving.from.row + (moving.to.row - moving.from.row) * t : g.player.row;
+      const col = moving ? moving.from.col + (moving.to.col - moving.from.col) * t : g.player.col;
+      const x = playerX(l, g.player) + (col - g.player.col) * l.tile;
+      if (hit(l, g.traffic, row, x)) crash(g, row, col);
+      else if (moving && moving.elapsed + 1e-6 >= MOVE_TIME) land(g, moving);
+    }
+    g.pending = pending;
+  }
+  // Before Start (and once a run is over) the traffic stands still, as in the original game
+  if (trafficMoved && l && g.scene) placeVehicles(g.world, l, g.scene, g.traffic);
+  g.world.update(seconds);
+}
+
+function end(g: Game, won: boolean) {
+  g.world.scoreboard.stop();
+  g.alive = false;
+  g.won = won;
+  g.press = null;
+  g.hopping = null;
+  g.queuedHop = null;
+  g.phase = 'over';
+  g.onPhase('over');
+}
+
+function crash(g: Game, row: number, col: number) {
+  const { layout: l, scene: s } = g;
+  if (l && s) {
+    placePlayer(g.world, l, s, row, col);
+    stumble(g.world, l, s, row, col);
+  }
+  g.onEvent('crash');
+  end(g, false);
+}
+
+function timeUp(g: Game) {
+  g.timeLeft = 0;
+  g.onTime(0);
+  g.onEvent('timeUp');
+  end(g, false);
+}
+
+// ── Hops ──────────────────────────────────────────────────────────────
+
+/** Finish the active hop before taking one buffered move; taps cannot teleport through traffic. */
+export function hopTo(g: Game, dir: Dir) {
+  const { layout: l, scene: s } = g;
+  if (g.phase !== 'playing' || !g.alive || !l) return;
+  if (g.hopping) {
+    g.queuedHop = dir;
+    return;
+  }
+  const p = { ...g.player };
+  const from: [number, number] = [p.row, p.col];
+  const result: Hop = dir === 'up' ? hopForward(p) : dir === 'down' ? hopBack(p) : hopSide(p, dir === 'left' ? -1 : 1);
+  if (!result.moved) return;
+  g.hopping = { from: { ...g.player }, to: p, result, elapsed: 0, direction: dir };
+  if (s) hop(g.world, l, s, from, [p.row, p.col], dir);
+  g.onEvent('hop');
+}
+
+/** Commit progress and scoring when the pedestrian actually lands. */
+function land(g: Game, moving: MovingHop) {
+  g.player = moving.to;
+  g.hopping = null;
+  const p = g.player;
+  const result = moving.result;
+  const { layout: l, scene: s } = g;
+  if (result.crossed) {
+    g.world.scoreboard.set(p.crossings * SCORE_PER_CROSS);
+    g.onScore(g.score, p.crossings);
+    g.onEvent('cross');
+  }
+  if (result.goal) {
+    // Across: the crossings plus a bonus for the time left (whole seconds, as the original win)
+    const left = Math.floor(Math.max(0, g.world.scoreboard.seconds));
+    g.timeLeft = left;
+    g.world.scoreboard.set(calculateTimeBasedScore(GAME_DURATION - left, GAME_DURATION, p.crossings * SCORE_PER_CROSS));
+    g.onTime(left);
+    g.onScore(g.score, p.crossings);
+    if (s && l) celebrate(g.world, l, s, p.row, p.col);
+    end(g, true);
+    return;
+  }
+  const queued = g.queuedHop;
+  g.queuedHop = null;
+  if (queued) hopTo(g, queued);
+}
+
+// ── The finger ────────────────────────────────────────────────────────
+
+/** A tap hops forward; a swipe hops its way (as soon as it's gone far enough, once per touch). */
+export function drag(g: Game, { phase, x, y, cancelled }: DragEvent) {
+  if (cancelled) {
+    g.press = null;
+    return;
+  }
+  if (phase === 'start') {
+    g.press = { x, y, at: g.clock, swiped: false };
+    return;
+  }
+  const p = g.press;
+  if (!p) return;
+  const dx = x - p.x;
+  const dy = y - p.y;
+  if (!p.swiped && Math.hypot(dx, dy) >= SWIPE) {
+    p.swiped = true;
+    hopTo(g, Math.abs(dx) >= Math.abs(dy) ? (dx > 0 ? 'right' : 'left') : dy > 0 ? 'down' : 'up');
+  }
+  if (phase !== 'end') return;
+  g.press = null;
+  if (!p.swiped && g.clock - p.at <= TAP_MAX) hopTo(g, 'up');
+}

package/src/games/crossy-road/CrossyRoadMeshes.ts

@@ -0,0 +1,195 @@
+// Crossy Road's own flat-shaded models. +X is forward, +Z is up; lengths are normalized to one.
+// Parts are baked into a few instanced meshes, cached once, with no textures or racing-game assets.
+import { type Color, type Geometry, type GeometryPart, merge, type Model, type Vec3 } from '@nayan-ui/engine';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+
+export type VehicleStyle = 'compact' | 'taxi' | 'pickup' | 'bus';
+export interface VehicleMeshes {
+  body: Model;
+  details: Model;
+  lights: Model;
+}
+export interface CrossyMeshes {
+  vehicles: Record<VehicleStyle, VehicleMeshes>;
+  tree: Model;
+  bush: Model;
+  rock: Model;
+}
+
+const WHITE: Color = [1, 1, 1, 1];
+const GLASS: Color = [0.18, 0.34, 0.42, 1];
+const TYRE: Color = [0.11, 0.13, 0.17, 1];
+const CHROME: Color = [0.75, 0.81, 0.82, 1];
+const CREAM: Color = [0.94, 0.94, 0.86, 1];
+
+/** A convex solid with crisp, independent face normals and outward winding. */
+function solid(points: Vec3[], faces: number[][]): Geometry {
+  const vertices: number[] = [],
+    indices: number[] = [];
+  const centre = [0, 1, 2].map((axis) => points.reduce((sum, p) => sum + p[axis]!, 0) / points.length);
+  for (const face of faces) {
+    const [a, b, c] = face.map((i) => points[i]!) as [Vec3, Vec3, Vec3];
+    const u = b.map((v, i) => v - a[i]!);
+    const v = c.map((value, i) => value - a[i]!);
+    let normal = [u[1]! * v[2]! - u[2]! * v[1]!, u[2]! * v[0]! - u[0]! * v[2]!, u[0]! * v[1]! - u[1]! * v[0]!];
+    const mid = [0, 1, 2].map((axis) => face.reduce((sum, i) => sum + points[i]![axis]!, 0) / face.length);
+    const flip = normal.reduce((sum, n, axis) => sum + n * (mid[axis]! - centre[axis]!), 0) < 0;
+    if (flip) normal = normal.map((n) => -n);
+    const length = Math.hypot(...normal) || 1;
+    const start = vertices.length / 11;
+    for (const i of face) vertices.push(...points[i]!, ...normal.map((n) => n / length), 1, 1, 1, 0, 0);
+    for (let i = 1; i < face.length - 1; i++) indices.push(start, start + (flip ? i + 1 : i), start + (flip ? i : i + 1));
+  }
+  return { vertices: Float32Array.from(vertices), indices: Uint32Array.from(indices) };
+}
+
+const FACES = [
+  [0, 1, 2, 3],
+  [4, 5, 6, 7],
+  [0, 1, 5, 4],
+  [1, 2, 6, 5],
+  [2, 3, 7, 6],
+  [3, 0, 4, 7]
+];
+const cube = solid(
+  [
+    [-0.5, -0.5, -0.5],
+    [0.5, -0.5, -0.5],
+    [0.5, 0.5, -0.5],
+    [-0.5, 0.5, -0.5],
+    [-0.5, -0.5, 0.5],
+    [0.5, -0.5, 0.5],
+    [0.5, 0.5, 0.5],
+    [-0.5, 0.5, 0.5]
+  ],
+  FACES
+);
+const box = (position: Vec3, scale: Vec3, color: Color = WHITE): GeometryPart => ({ geometry: cube, position, scale, color });
+const model = (parts: GeometryPart[]) => createShape(merge(parts), { center: false });
+
+function cabin(back: number, front: number, bottom: number, top: number): Geometry {
+  return solid(
+    [
+      [back, -0.44, bottom],
+      [front, -0.44, bottom],
+      [front, 0.44, bottom],
+      [back, 0.44, bottom],
+      [back + 0.07, -0.36, top],
+      [front - 0.1, -0.36, top],
+      [front - 0.1, 0.36, top],
+      [back + 0.07, 0.36, top]
+    ],
+    FACES
+  );
+}
+
+const wheel = (() => {
+  const points: Vec3[] = [];
+  for (const side of [-1, 1])
+    for (let i = 0; i < 8; i++) {
+      const angle = (i * Math.PI) / 4;
+      points.push([Math.cos(angle) * 0.13, side * 0.065, Math.sin(angle) * 0.13]);
+    }
+  return solid(points, [
+    Array.from({ length: 8 }, (_, i) => i),
+    Array.from({ length: 8 }, (_, i) => i + 8),
+    ...Array.from({ length: 8 }, (_, i) => [i, (i + 1) % 8, ((i + 1) % 8) + 8, i + 8])
+  ]);
+})();
+
+function vehicle(style: VehicleStyle): VehicleMeshes {
+  const bus = style === 'bus',
+    pickup = style === 'pickup',
+    taxi = style === 'taxi';
+  const ratio = bus ? 2.4 : pickup ? 1.7 : taxi ? 1.5 : 1.4;
+  const body: GeometryPart[] = [box([0, 0, 0.3], [0.96, 0.94, 0.26])];
+  const details: GeometryPart[] = [box([0, 0, 0.17], [0.88, 0.82, 0.07], TYRE)];
+  if (bus) {
+    details.push(box([0, 0, 0.65], [0.94, 0.91, 0.48], CREAM));
+    body.push(box([0, 0, 0.91], [0.96, 0.94, 0.06]));
+    for (const side of [-1, 1]) {
+      for (let i = 0; i < 6; i++) details.push(box([-0.375 + i * 0.147, side * 0.462, 0.69], [0.118, 0.015, 0.24], GLASS));
+      details.push(box([0.2, side * 0.475, 0.36], [0.52, 0.018, 0.055], CREAM));
+    }
+    details.push(box([0.478, 0, 0.69], [0.02, 0.78, 0.29], GLASS), box([-0.478, 0, 0.69], [0.02, 0.71, 0.22], GLASS));
+    details.push(box([0.483, 0, 0.87], [0.025, 0.48, 0.075], TYRE), box([0.49, 0, 0.87], [0.025, 0.3, 0.024], [1, 0.78, 0.3, 1]));
+    details.push(box([-0.08, 0, 0.97], [0.25, 0.5, 0.07], CHROME));
+  } else {
+    const back = pickup ? -0.04 : -0.3,
+      front = 0.28;
+    details.push({ geometry: cabin(back, front, 0.43, 0.73), color: GLASS });
+    body.push(box([(back + front - 0.03) / 2, 0, 0.745], [front - back - 0.13, 0.76, 0.055]));
+    for (const side of [-1, 1]) {
+      body.push(box([0.035, side * 0.44, 0.57], [0.034, 0.04, 0.29]));
+      details.push(box([0.14, side * 0.48, 0.42], [0.065, 0.015, 0.022], CHROME));
+    }
+    if (pickup) {
+      details.push(box([-0.28, 0, 0.438], [0.35, 0.7, 0.018], TYRE));
+      for (const side of [-1, 1]) body.push(box([-0.28, side * 0.42, 0.49], [0.38, 0.07, 0.15]));
+      details.push(box([-0.31, 0, 0.51], [0.15, 0.28, 0.14], [0.66, 0.44, 0.25, 1]));
+    }
+    if (taxi) {
+      details.push(box([-0.04, 0, 0.82], [0.16, 0.38, 0.1], [1, 0.83, 0.23, 1]));
+      for (const side of [-1, 1]) for (let i = 0; i < 5; i++) details.push(box([-0.28 + i * 0.11, side * 0.477, 0.32], [0.055, 0.015, 0.055], TYRE));
+    }
+  }
+  for (const x of [-0.31, 0.3])
+    for (const side of [-1, 1]) {
+      details.push({ geometry: wheel, position: [x, side * 0.46, 0.13], scale: [1 / ratio, 1, 1], color: TYRE });
+      details.push(box([x, side * 0.529, 0.13], [0.11 / ratio, 0.012, 0.11], CHROME));
+    }
+  details.push(box([0.485, 0, 0.22], [0.035, 0.8, 0.07], CHROME), box([-0.485, 0, 0.22], [0.035, 0.8, 0.07], CHROME));
+  details.push(box([0.485, 0, 0.33], [0.028, 0.35, 0.08], TYRE));
+  const lights: GeometryPart[] = [];
+  for (const side of [-1, 1]) {
+    lights.push(box([0.49, side * 0.34, 0.35], [0.03, 0.18, 0.09], [1, 0.94, 0.68, 1]));
+    lights.push(box([-0.49, side * 0.34, 0.35], [0.03, 0.14, 0.09], [1, 0.12, 0.08, 1]));
+  }
+  return { body: model(body), details: model(details), lights: model(lights) };
+}
+
+function pyramid(width: number, bottom: number, top: number): Geometry {
+  const half = width / 2;
+  return solid(
+    [
+      [-half, -half, bottom],
+      [half, -half, bottom],
+      [half, half, bottom],
+      [-half, half, bottom],
+      [0, 0, top]
+    ],
+    [
+      [0, 1, 2, 3],
+      [0, 1, 4],
+      [1, 2, 4],
+      [2, 3, 4],
+      [3, 0, 4]
+    ]
+  );
+}
+
+let cached: CrossyMeshes | null = null;
+export function crossyMeshes(): CrossyMeshes {
+  return cacheGameAsset('crossy-road/CrossyRoadMeshes:crossyMeshes', () => crossyMeshesUncached());
+}
+
+function crossyMeshesUncached(): CrossyMeshes {
+  if (cached) return cached;
+  cached = {
+    vehicles: { compact: vehicle('compact'), taxi: vehicle('taxi'), pickup: vehicle('pickup'), bus: vehicle('bus') },
+    tree: model([
+      box([0, 0, 0.3], [0.14, 0.14, 0.6], [0.45, 0.28, 0.16, 1]),
+      { geometry: pyramid(0.9, 0.35, 1.1), color: [0.2, 0.48, 0.3, 1] },
+      { geometry: pyramid(0.7, 0.75, 1.4), color: [0.26, 0.59, 0.34, 1] },
+      { geometry: pyramid(0.5, 1.1, 1.65), color: [0.34, 0.67, 0.4, 1] }
+    ]),
+    bush: model([box([-0.23, 0, 0.22], [0.44, 0.6, 0.44]), box([0.12, 0.03, 0.3], [0.6, 0.65, 0.6]), box([0.4, -0.03, 0.18], [0.3, 0.45, 0.36])]),
+    rock: model([{ geometry: cabin(-0.4, 0.4, 0, 0.4) }])
+  };
+  return cached;
+}
+
+/** Reusable assets; the game loader advances one builder per frame. */
+export function* warmAssets(): Iterable<() => unknown> {
+  yield crossyMeshes;
+}

package/src/games/crossy-road/CrossyRoadPerson.ts

@@ -0,0 +1,198 @@
+// A pedestrian built in code: +Y forward, +Z up, with natural proportions and articulated limbs.
+// Four meshes are cached for the whole app; arms, legs and shoes each instance their geometry twice.
+import { block, type Color, ellipsoid, type Geometry, type GeometryPart, loft, merge, type Model, tube, type Vec3 } from '@nayan-ui/engine';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { toColor } from '../shared/EngineUtils';
+import { PERSON_COLORS } from './CrossyRoadConstants';
+
+export interface PedestrianMeshes {
+  torso: Model;
+  arm: Model;
+  leg: Model;
+  shoe: Model;
+}
+const part = (geometry: Geometry, position: Vec3, color: Color): GeometryPart => ({ geometry, position, color });
+const orb = (radii: Vec3, position: Vec3, color: Color, sides = 12): GeometryPart => part(ellipsoid(radii, undefined, sides), position, color);
+const pipe = (points: Vec3[], radius: number, color: Color, sides = 8): GeometryPart => ({
+  geometry: tube(points, { radius, sides, smoothness: 3 }),
+  color
+});
+const model = (parts: GeometryPart[]) => createShape(merge(parts), { center: false, shine: 0.08 });
+
+let cached: PedestrianMeshes | null = null;
+export function pedestrianMeshes(): PedestrianMeshes {
+  return cacheGameAsset('crossy-road/CrossyRoadPerson:pedestrianMeshes', () => pedestrianMeshesUncached());
+}
+
+function pedestrianMeshesUncached(): PedestrianMeshes {
+  if (cached) return cached;
+  const skin = toColor(PERSON_COLORS.SKIN),
+    jacket = toColor(PERSON_COLORS.JACKET),
+    pants = toColor(PERSON_COLORS.PANTS),
+    hair = toColor(PERSON_COLORS.HAIR),
+    shoe = toColor(PERSON_COLORS.SHOE),
+    sole = toColor(PERSON_COLORS.SOLE),
+    pack = toColor(PERSON_COLORS.BACKPACK),
+    strap = toColor(PERSON_COLORS.STRAP);
+  const torso: GeometryPart[] = [
+    {
+      geometry: loft(
+        [
+          { z: 0.9, bottom: -0.12, top: 0.13, width: 0.15, square: 3 },
+          { z: 1.05, bottom: -0.135, top: 0.14, width: 0.165, square: 3 },
+          { z: 1.32, bottom: -0.14, top: 0.15, width: 0.225, square: 2.8 },
+          { z: 1.43, bottom: -0.105, top: 0.11, width: 0.2, square: 2.6 },
+          { z: 1.48, bottom: -0.065, top: 0.07, width: 0.075, square: 2.4 }
+        ],
+        { around: 16, smoothness: 2 }
+      ),
+      color: jacket
+    },
+    orb([0.16, 0.135, 0.12], [0, 0, 0.86], pants),
+    pipe(
+      [
+        [0, 0, 1.46],
+        [0, 0, 1.57]
+      ],
+      0.052,
+      skin
+    ),
+    orb([0.106, 0.105, 0.135], [0, 0.005, 1.65], skin, 16),
+    orb([0.027, 0.033, 0.031], [0, 0.11, 1.642], skin),
+    orb([0.111, 0.108, 0.067], [0, -0.012, 1.75], hair, 16),
+    orb([0.103, 0.052, 0.09], [0, -0.075, 1.685], hair),
+    // A small canvas backpack and seams make the person readable from the rear camera.
+    {
+      geometry: loft(
+        [
+          { z: 1.02, bottom: -0.23, top: -0.115, width: 0.13, square: 4 },
+          { z: 1.08, bottom: -0.27, top: -0.12, width: 0.15, square: 4 },
+          { z: 1.35, bottom: -0.265, top: -0.115, width: 0.145, square: 4 },
+          { z: 1.41, bottom: -0.2, top: -0.11, width: 0.1, square: 3 }
+        ],
+        { around: 12, smoothness: 2 }
+      ),
+      color: pack
+    },
+    part(block(0.21, 0.028, 0.11), [0, -0.269, 1.14], strap),
+    pipe(
+      [
+        [-0.09, -0.278, 1.28],
+        [0.09, -0.278, 1.28]
+      ],
+      0.008,
+      sole,
+      6
+    ),
+    pipe(
+      [
+        [0, 0.145, 1.02],
+        [0, 0.155, 1.33],
+        [0, 0.08, 1.45]
+      ],
+      0.007,
+      strap,
+      6
+    ),
+    pipe(
+      [
+        [-0.02, 0.107, 1.605],
+        [0, 0.113, 1.6],
+        [0.02, 0.107, 1.605]
+      ],
+      0.004,
+      toColor('#8D5044'),
+      6
+    )
+  ];
+  for (const side of [-1, 1]) {
+    torso.push(orb([0.019, 0.02, 0.035], [side * 0.108, -0.002, 1.65], skin));
+    torso.push(orb([0.023, 0.013, 0.015], [side * 0.047, 0.099, 1.682], sole, 8));
+    torso.push(orb([0.01, 0.009, 0.01], [side * 0.047, 0.111, 1.681], toColor('#293341'), 8));
+    torso.push(
+      pipe(
+        [
+          [side * 0.026, 0.099, 1.709],
+          [side * 0.065, 0.094, 1.71]
+        ],
+        0.006,
+        hair,
+        6
+      )
+    );
+    torso.push(
+      pipe(
+        [
+          [side * 0.13, -0.16, 1.38],
+          [side * 0.16, 0.02, 1.44],
+          [side * 0.13, 0.152, 1.25],
+          [side * 0.13, 0.14, 1.03]
+        ],
+        0.019,
+        strap
+      )
+    );
+  }
+  const arm = model([
+    pipe(
+      [
+        [0, 0, 0],
+        [0, 0.01, -0.15],
+        [0, 0.04, -0.28]
+      ],
+      0.071,
+      jacket
+    ),
+    pipe(
+      [
+        [0, 0.04, -0.27],
+        [0, 0.07, -0.38],
+        [0, 0.085, -0.49]
+      ],
+      0.042,
+      skin
+    ),
+    orb([0.038, 0.044, 0.062], [0, 0.085, -0.49], skin)
+  ]);
+  const leg = model([
+    pipe(
+      [
+        [0, 0, 0],
+        [0, 0.025, -0.33],
+        [0, -0.01, -0.72]
+      ],
+      0.072,
+      pants
+    ),
+    orb([0.073, 0.075, 0.08], [0, 0.025, -0.33], pants)
+  ]);
+  const footwear = model([
+    orb([0.068, 0.14, 0.063], [0, 0.075, -0.06], shoe),
+    part(block(0.14, 0.275, 0.025), [0, 0.075, -0.115], sole),
+    pipe(
+      [
+        [-0.04, 0.09, -0.005],
+        [0.04, 0.09, -0.005]
+      ],
+      0.008,
+      sole,
+      6
+    ),
+    pipe(
+      [
+        [-0.04, 0.13, -0.01],
+        [0.04, 0.13, -0.01]
+      ],
+      0.008,
+      sole,
+      6
+    )
+  ]);
+  cached = { torso: model(torso), arm, leg, shoe: footwear };
+  return cached;
+}
+
+/** Reusable assets; the game loader advances one builder per frame. */
+export function* warmAssets(): Iterable<() => unknown> {
+  yield pedestrianMeshes;
+}