@nayan-ui/games 1.18.0 → 1.20.0

package/src/games/paper-io/PaperIo.tsx

@@ -0,0 +1,91 @@
+// @refresh reset
+// Recreate the native scene after edits; Fast Refresh cannot update meshes already in the world.
+// Paper IO's screen, on the Nayan engine: the board, land, trails and flag bearers are one 3D scene (an
+// orthographic camera leaning back over the board), under Playtura's scoreboard, controls and modals.
+// The play is in PaperIoGame.ts (the rules and the AI in PaperIoRules.ts), what it draws in
+// PaperIoScene.ts.
+//
+// One world serves the whole visit (sized by the first layout, as the original grid was fixed at load):
+// Start, Stop and Play Again lay a fresh board in place and a theme change repaints the board, so the
+// GPU view is never rebuilt. JS steps the grid ~11 times a second and redraws only the cells that
+// changed; people walk, flags wave, and land flashes and bursts play in the engine's Rust core.
+import { useMemo } from 'react';
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS, isTablet } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { textColumn, timerColumn } from '../shared/EngineHud';
+import { toRgb } from '../shared/EngineUtils';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { GAME_DURATION_MS, getLayout, gridFor, LIGHT, LOW_TIME, PLAYER_COLORS } from './PaperIoConstants';
+import { createGame, dispose, drag, reset, setLayout, setTheme, start, tick } from './PaperIoGame';
+import type { Stats } from './PaperIoRules';
+
+const SOUNDS = GAME_SOUNDS.PAPER_IO;
+const FULL_TIME = Math.round(GAME_DURATION_MS / 1000);
+const NO_STATS: Stats = { score: 0, territoryPct: 0, aiPct: 0, rank: 1, alivePlayers: 1 };
+
+export const PaperIo = engineGame(GAME_IDS.PAPER_IO, (props) => {
+  const [laidOut, setLaidOut] = useLiveState(false);
+  const [stats, setStats] = useLiveState<Stats>(NO_STATS);
+  const [time, setTime] = useLiveState(FULL_TIME);
+
+  // Win or lose as the round ends; the score is your land x 10
+  const { game, theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.PAPER_IO,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    // Lay the board out for the view (the first layout fixes the grid).
+    resize: (g, width, height) => {
+      const grid = g.grid ?? gridFor(width, height, isTablet);
+      setLayout(g, getLayout(width, height, grid));
+      setLaidOut(true);
+    },
+    drag,
+    reportScore: (g) => g.stats?.score ?? 0,
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.SUCCESS),
+    onStop: (fx) => fx(null, HapticType.MEDIUM),
+    wire: (g, fx) => {
+      g.onStats = setStats;
+      g.onTime = setTime;
+      g.onEvent = (event) => {
+        if (event === 'turn') fx(SOUNDS.TURN, HapticType.SELECTION);
+        else if (event === 'capture') fx(SOUNDS.CAPTURE, HapticType.MEDIUM);
+        else fx(g.won ? SOUNDS.WIN : SOUNDS.GAME_OVER, g.won ? HapticType.SUCCESS : HapticType.ERROR);
+      };
+    }
+  });
+
+  const background = useMemo(() => toRgb(theme.BACKGROUND), [theme.BACKGROUND]);
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      source={laidOut && game.world ? game.world : null}
+      light={LIGHT}
+      background={background}
+      columns={[
+        textColumn('YOU', `${stats.territoryPct}%`, PLAYER_COLORS[0]!.head),
+        timerColumn(time, theme, LOW_TIME),
+        textColumn('AI', `${stats.aiPct}%`, PLAYER_COLORS[1]!.head)
+      ]}
+      subtext="Claim the most land!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU WIN!' : 'GAME OVER',
+        message:
+          status === 'win'
+            ? `You beat the AI ${stats.territoryPct}% to ${stats.aiPct}%!`
+            : `You ${stats.territoryPct}% vs AI ${stats.aiPct}% — try again!`,
+        scoreLabel: 'Cells Captured',
+        score: stats.score,
+        buttonText: 'Play Again!'
+      })}
+    />
+  );
+});

package/src/games/paper-io/PaperIoConstants.ts

@@ -0,0 +1,86 @@
+// Paper IO's rules, colors and layout. The grid, step rate, timer, AI and scoring match the original
+// version (games/paper-io), so scores carry over.
+import type { TiltView } from '../shared/EngineTilt';
+import { frontLight } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const STEP_MS = 92; // one cell per step, ~11 steps a second
+export const PLAYER_COUNT = 2; // you and one AI
+export const START_TERRITORY = 1; // half-size: each player starts with a compact 3 x 3 patch
+export const GAME_DURATION_MS = 120_000; // 2 minutes: whoever owns more land then wins
+export const LOW_TIME = 10; // the timer turns red from here
+export const POINTS_PER_CELL = 10;
+
+// ── Touch ─────────────────────────────────────────────────────────────
+
+export const SWIPE = 10; // points a finger must travel (from where it went down) to turn
+
+// ── Colors ────────────────────────────────────────────────────────────
+
+export type PlayerColor = { territory: string; trail: string; head: string; headDark: string };
+/** 0 = you (green), 1 = the AI (red), as the original game. */
+export const PLAYER_COLORS: PlayerColor[] = [
+  { territory: '#62B96E', trail: '#6BCB77', head: '#6BCB77', headDark: '#4CA85B' },
+  { territory: '#E86262', trail: '#FF6B6B', head: '#FF6B6B', headDark: '#D64C4C' }
+];
+export const COLORS = {
+  CLASSIC_BOARD: 'rgba(0, 0, 0, 0.18)',
+  FLASH: '#FFFFFF',
+  EYE: '#FFFFFF',
+  PUPIL: '#2C2C44'
+} as const;
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** A slightly lower tabletop view shows the people and their flags while keeping the grid readable. */
+export const TILT = 0.48;
+/** Render in compact world units so a full-screen board and tall people fit the camera's depth range. */
+export const WORLD_SCALE = 0.25;
+/** Lit from the upper left; surfaces facing up off the board (+z) keep their exact color. */
+export const LIGHT = frontLight([-0.4, 0.5, 1], 0.5);
+/** Heights of land and trails, in cells. */
+export const LAND = 0.32;
+export const TRAIL = 0.22;
+export const PERSON = { SCALE: 3.2, STRIDE: 0.38, HEIGHT: 3.06, CELEBRATION_SCALE: 1.5 } as const;
+export const PERSON_COLORS = {
+  SKIN: ['#DFAC87', '#A57355'],
+  HAIR: '#352A24',
+  PANTS: '#2F3D50',
+  SHOE: '#38414A',
+  SOLE: '#EEE9DF',
+  POLE: '#CCD4D8',
+  BADGE: '#E8D4A3'
+} as const;
+
+// ── Layout (view points) ──────────────────────────────────────────────
+
+export type Grid = { cols: number; rows: number; cell: number };
+export type Layout = TiltView & Grid & { gridW: number; gridH: number; columnWidth: number; rowDepth: number; eyeDistance: number };
+
+/**
+ * The original grid: square cells a 32nd of the width (a 44th on a tablet) covering the whole view edge to
+ * edge. The grid is fixed by the first layout (as the original game fixed it at load); later layouts only
+ * remap those same cells and the camera to fill the view.
+ */
+export function gridFor(width: number, height: number, tablet: boolean): Grid {
+  const cell = Math.round(width / (tablet ? 44 : 32));
+  return { cols: Math.ceil(width / cell), rows: Math.ceil(height / cell), cell };
+}
+
+export function getLayout(width: number, height: number, grid: Grid): Layout {
+  // Compensate the tabletop tilt: each projected row is still one cell tall, covering the entire
+  // view rather than leaving non-playable bands above and below the board.
+  const columnWidth = width / grid.cols;
+  const rowDepth = height / grid.rows / Math.cos(TILT);
+  const gridH = grid.rows * rowDepth;
+  const personHeight = grid.cell * (LAND + TRAIL + PERSON.SCALE * PERSON.HEIGHT * PERSON.CELEBRATION_SCALE);
+  const eyeDistance = (gridH * Math.sin(TILT)) / 2 + personHeight * Math.cos(TILT) + 80;
+  return { ...grid, width, height, tilt: TILT, columnWidth, rowDepth, eyeDistance, centerY: height / 2, gridW: width, gridH };
+}
+
+/** A cell's centre on the board, in world units (row 0 along the top). */
+export const cellCentre = (l: Layout, col: number, row: number): [number, number] => [
+  (col + 0.5) * l.columnWidth - l.gridW / 2,
+  l.gridH / 2 - (row + 0.5) * l.rowDepth
+];

package/src/games/paper-io/PaperIoGame.ts

@@ -0,0 +1,193 @@
+// Paper IO's play, with no React: build a game with `createGame`, give it a layout, `start` it and
+// `tick` it every frame. Swipe to steer your character; leaving your land lays a trail, and coming back (or
+// closing a loop on your own trail) banks everything it encloses. Own more land than the AI when the
+// two minutes are up (or when the board fills) to win.
+//
+// The rules are the original version's (PaperIoRules.ts), stepped the way its frame loop stepped them: one
+// grid step on the first frame at least 92 ms after the last (the leftover dropped, so a long frame
+// never fast-forwards the board), the countdown checked every frame.
+import { type Camera, type DragEvent, World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { aimTilted } from '../shared/EngineTilt';
+import { GAME_DURATION_MS, type Grid, type Layout, STEP_MS, SWIPE, WORLD_SCALE } from './PaperIoConstants';
+import { type Board, type DirCode, newBoard, type Stats, stats, step, turn } from './PaperIoRules';
+import { buildScene, finish, placeHeads, removeScene, type Scene, setSceneTheme, syncBoard } from './PaperIoScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+/** turn: your swipe took; capture: you banked land; over: the round ended. */
+export type GameEvent = 'turn' | 'capture' | 'over';
+
+export function createGame(theme: GameTheme) {
+  return {
+    world: null as World | null,
+    camera: { eye: [0, 0, 240], target: [0, 0, 0], fov: 1, ortho: 1 } as Camera,
+    theme,
+    grid: null as Grid | null,
+    layout: null as Layout | null,
+    scene: null as Scene | null,
+    phase: 'ready' as Phase,
+    board: null as Board | null,
+    stats: null as Stats | null,
+    won: false,
+    sinceStep: 0,
+    /** The first frame after starting credits no time (as the original loop's first frame). */
+    fresh: true,
+    /** The swipe in progress: where it went down, and the last turn it asked for. */
+    swipe: null as { x: number; y: number; last: DirCode | null } | null,
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onStats: (_s: Stats) => {},
+    onTime: (_t: number) => {},
+    onEvent: (_e: GameEvent) => {}
+  };
+}
+export type Game = ReturnType<typeof createGame>;
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/**
+ * Lays the board out for the view. The first layout fixes the grid (as the original game fixed it at load)
+ * and makes the world, sized for every cell's land and trail; later ones (header, rotation) keep the
+ * board and only rebuild the scene round it.
+ */
+export function setLayout(g: Game, l: Layout) {
+  if (!g.world) {
+    g.world = new World(l.cols * l.rows * 2 + 200);
+    // The countdown lives in the engine (Rust), advanced by world.update
+    g.world.scoreboard.reset(0, GAME_DURATION_MS / 1000);
+    g.world.scoreboard.handlers = {
+      onSecond: (t) => g.onTime(t),
+      // Time's up: whoever owns more land wins
+      onTimeUp: () => g.phase === 'playing' && g.board && end(g, (g.board.counts[0] ?? 0) > (g.board.counts[1] ?? 0))
+    };
+    g.grid = { cols: l.cols, rows: l.rows, cell: l.cell };
+    g.board = newBoard(g.grid);
+    g.stats = stats(g.board);
+    g.onStats(g.stats);
+  }
+  const world = g.world;
+  if (g.scene) removeScene(world, g.scene);
+  g.layout = l;
+  aimTilted(g.camera, l);
+  g.camera.eye = [
+    0,
+    (g.camera.target[1] - Math.sin(l.tilt) * l.eyeDistance) * WORLD_SCALE,
+    (g.camera.target[2] + Math.cos(l.tilt) * l.eyeDistance) * WORLD_SCALE
+  ];
+  g.camera.target = [g.camera.target[0] * WORLD_SCALE, g.camera.target[1] * WORLD_SCALE, g.camera.target[2] * WORLD_SCALE];
+  g.camera.ortho = (l.height * WORLD_SCALE) / 2;
+  g.scene = buildScene(world, l, g.theme, g.board!);
+}
+
+export function setTheme(g: Game, theme: GameTheme) {
+  g.theme = theme;
+  if (g.world && g.layout && g.scene) setSceneTheme(g.world, g.layout, g.scene, theme);
+}
+
+/** A fresh board on the table (the scene rebuilt round it), not started. */
+function fresh(g: Game) {
+  const { world, grid, layout } = g;
+  if (!world || !grid || !layout) return;
+  g.board = newBoard(grid);
+  g.stats = stats(g.board);
+  if (g.scene) removeScene(world, g.scene);
+  g.scene = buildScene(world, layout, g.theme, g.board);
+  world.scoreboard.reset(0, GAME_DURATION_MS / 1000);
+  g.sinceStep = 0;
+  g.won = false;
+  g.swipe = null;
+  g.onStats(g.stats);
+  g.onTime(Math.round(GAME_DURATION_MS / 1000));
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+/** Starts a round on a fresh board, as the original Start did. */
+export function start(g: Game) {
+  if (g.phase !== 'ready' || !g.world) return;
+  fresh(g);
+  g.world.scoreboard.startCountdown(GAME_DURATION_MS / 1000);
+  g.fresh = true;
+  g.phase = 'playing';
+  g.onPhase('playing');
+}
+
+/** A fresh board, not started (Stop, Play Again). */
+export function reset(g: Game) {
+  fresh(g);
+  g.phase = 'ready';
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world?.dispose();
+}
+
+export function tick(g: Game, dt: number) {
+  const { world, board } = g;
+  if (!world || world.isDisposed) return;
+  if (g.phase === 'playing' && board) {
+    const ms = g.fresh ? 0 : Math.min(dt, 0.25) * 1000;
+    g.fresh = false;
+    advance(g, board, ms);
+  }
+  world.update(dt);
+}
+
+/** One frame of the original loop: a grid step if it's due (the countdown is the engine's). */
+function advance(g: Game, b: Board, ms: number) {
+  g.sinceStep += ms;
+  if (g.sinceStep < STEP_MS) return;
+  g.sinceStep = 0;
+  const r = step(b);
+  const { world, layout: l, scene: s } = g;
+  if (world && l && s) {
+    if (r.territory || r.trails) syncBoard(world, l, s, b, r.territory && !r.full, r.territory ? undefined : r.trailCells);
+    placeHeads(world, l, s, b, true, r.captured);
+  }
+  if (r.territory) {
+    g.stats = stats(b);
+    g.onStats(g.stats);
+  }
+  if (r.captured[0]) g.onEvent('capture');
+  if (r.full) end(g, r.won);
+}
+
+function end(g: Game, won: boolean) {
+  g.world?.scoreboard.stop();
+  g.won = won;
+  g.phase = 'over';
+  g.swipe = null;
+  if (g.board) {
+    g.stats = stats(g.board);
+    g.onStats(g.stats);
+  }
+  if (g.world && g.layout && g.scene) finish(g.world, g.layout, g.scene, won);
+  g.onPhase('over');
+  g.onEvent('over');
+}
+
+// ── The finger ────────────────────────────────────────────────────────
+
+/** Swipes steer: once a drag has gone 10 points from where it went down, its main way is a turn. */
+export function drag(g: Game, { phase, x, y }: DragEvent) {
+  if (phase === 'start') {
+    g.swipe = { x, y, last: null };
+    return;
+  }
+  const s = g.swipe;
+  if (!s || phase === 'end') {
+    g.swipe = null;
+    return;
+  }
+  if (g.phase !== 'playing' || !g.board) return;
+  const dx = x - s.x;
+  const dy = y - s.y;
+  const ax = Math.abs(dx);
+  const ay = Math.abs(dy);
+  if (ax < SWIPE && ay < SWIPE) return;
+  const code: DirCode = ax >= ay ? (dx > 0 ? 'RIGHT' : 'LEFT') : dy > 0 ? 'DOWN' : 'UP';
+  if (code === s.last) return;
+  s.last = code;
+  if (turn(g.board, code)) g.onEvent('turn');
+}

package/src/games/paper-io/PaperIoMeshes.ts

@@ -0,0 +1,233 @@
+// People stand on the XY board, with +Z up and +X forward. Normalized models are cached once and
+// scaled by the cell size at spawn; skin, clothing and fixed-color details tint independently.
+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 { COLORS, PERSON_COLORS } from './PaperIoConstants';
+
+export interface PersonMeshes {
+  shirt: Model;
+  skin: Model;
+  details: Model;
+  sleeve: Model;
+  hand: Model;
+  leg: Model;
+  flags: readonly [Model, Model, Model];
+}
+const WHITE: Color = [1, 1, 1, 1];
+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 = 10): GeometryPart => ({
+  geometry: tube(points, { radius, sides, smoothness: 3, caps: true }),
+  color
+});
+const model = (parts: GeometryPart[], shine = 0.12) => createShape(merge(parts), { center: false, shine });
+
+/** Two-sided, smoothly shaded cloth. Its hoist stays on the pole while the free edge ripples. */
+function flagGeometry(phase: number): Geometry {
+  const columns = 12,
+    rows = 6;
+  const vertices: number[] = [],
+    indices: number[] = [];
+  for (const side of [1, -1]) {
+    const start = vertices.length / 11;
+    for (let row = 0; row <= rows; row++)
+      for (let col = 0; col <= columns; col++) {
+        const u = col / columns,
+          v = row / rows,
+          a = u * Math.PI * 2.1 - phase + v * 0.7;
+        const y = Math.sin(a) * u * 0.085;
+        const dydu = 0.085 * (Math.sin(a) + u * Math.PI * 2.1 * Math.cos(a)),
+          dydv = 0.085 * u * 0.7 * Math.cos(a);
+        // Surface derivatives: du = [-.78, dydu, -.045], dv = [0, dydv, .56].
+        const nx = dydu * 0.56 + 0.045 * dydv,
+          ny = 0.78 * 0.56,
+          nz = -0.78 * dydv,
+          length = Math.hypot(nx, ny, nz);
+        const hem = col === columns || row === 0 || row === rows ? 0.78 : 1;
+        vertices.push(-u * 0.78, y, v * 0.56 - u * 0.045, (side * nx) / length, (side * ny) / length, (side * nz) / length, hem, hem, hem, u, v);
+      }
+    for (let row = 0; row < rows; row++)
+      for (let col = 0; col < columns; col++) {
+        const a = start + row * (columns + 1) + col,
+          b = a + 1,
+          c = a + columns + 1,
+          d = c + 1;
+        if (side > 0) indices.push(a, b, c, b, d, c);
+        else indices.push(a, c, b, b, c, d);
+      }
+  }
+  return { vertices: Float32Array.from(vertices), indices: Uint32Array.from(indices) };
+}
+
+let cached: PersonMeshes | null = null;
+export function personMeshes(): PersonMeshes {
+  return cacheGameAsset('paper-io/PaperIoMeshes:personMeshes', () => personMeshesUncached());
+}
+
+function personMeshesUncached(): PersonMeshes {
+  if (cached) return cached;
+  const pants = toColor(PERSON_COLORS.PANTS),
+    hair = toColor(PERSON_COLORS.HAIR),
+    pole = toColor(PERSON_COLORS.POLE),
+    shoe = toColor(PERSON_COLORS.SHOE),
+    sole = toColor(PERSON_COLORS.SOLE),
+    eye = toColor(COLORS.EYE),
+    pupil = toColor(COLORS.PUPIL);
+  const shirt = model([
+    {
+      geometry: loft(
+        [
+          { z: 0.9, bottom: -0.145, top: 0.145, width: 0.115, square: 2.8 },
+          { z: 1.04, bottom: -0.155, top: 0.155, width: 0.105, square: 2.8 },
+          { z: 1.3, bottom: -0.225, top: 0.225, width: 0.13, square: 2.6 },
+          { z: 1.41, bottom: -0.2, top: 0.2, width: 0.105, square: 2.4 },
+          { z: 1.47, bottom: -0.07, top: 0.07, width: 0.065, square: 2 }
+        ],
+        { around: 16, smoothness: 2 }
+      )
+    },
+    pipe(
+      [
+        [0, -0.205, 1.37],
+        [0.025, -0.27, 1.25],
+        [0.04, -0.29, 1.18]
+      ],
+      0.075
+    ),
+    pipe(
+      Array.from({ length: 17 }, (_, i): Vec3 => [Math.cos((i * Math.PI) / 8) * 0.06, Math.sin((i * Math.PI) / 8) * 0.07, 1.465]),
+      0.015,
+      [0.74, 0.74, 0.74, 1],
+      6
+    )
+  ]);
+  const skin = model([
+    orb([0.108, 0.108, 0.133], [0.005, 0, 1.65], WHITE, 16),
+    pipe(
+      [
+        [0, 0, 1.45],
+        [0, 0, 1.55]
+      ],
+      0.052
+    ),
+    orb([0.026, 0.023, 0.03], [0.109, 0, 1.64]),
+    ...[-1, 1].map((side) => orb([0.022, 0.017, 0.036], [-0.012, side * 0.109, 1.65])),
+    pipe(
+      [
+        [0.04, -0.29, 1.18],
+        [0.13, -0.305, 1.16],
+        [0.24, -0.31, 1.21]
+      ],
+      0.05
+    ),
+    orb([0.046, 0.045, 0.06], [0.24, -0.31, 1.22])
+  ]);
+  const details: GeometryPart[] = [
+    orb([0.11, 0.116, 0.073], [-0.021, 0, 1.744], hair, 16),
+    orb([0.06, 0.104, 0.077], [-0.065, 0, 1.69], hair),
+    orb([0.115, 0.173, 0.12], [0, 0, 0.855], pants),
+    part(block(0.025, 0.055, 0.075), [0.128, -0.065, 1.3], toColor(PERSON_COLORS.BADGE)),
+    pipe(
+      [
+        [0.24, -0.31, 0.05],
+        [0.24, -0.31, 1.22],
+        [0.24, -0.31, 3]
+      ],
+      0.013,
+      pole,
+      8
+    ),
+    orb([0.025, 0.025, 0.025], [0.24, -0.31, 3.02], pole, 8),
+    pipe(
+      [
+        [0.107, -0.025, 1.603],
+        [0.115, 0, 1.598],
+        [0.107, 0.025, 1.603]
+      ],
+      0.004,
+      [0.36, 0.2, 0.17, 1],
+      6
+    )
+  ];
+  for (const side of [-1, 1]) {
+    details.push(orb([0.018, 0.024, 0.017], [0.101, side * 0.047, 1.678], eye, 8));
+    details.push(orb([0.009, 0.01, 0.012], [0.117, side * 0.047, 1.678], pupil, 8));
+    details.push(
+      pipe(
+        [
+          [0.105, side * 0.027, 1.706],
+          [0.098, side * 0.066, 1.707]
+        ],
+        0.006,
+        hair,
+        6
+      )
+    );
+  }
+  const sleeve = model([
+    pipe(
+      [
+        [0, 0, 0],
+        [0.01, 0.04, -0.12],
+        [0.025, 0.055, -0.23]
+      ],
+      0.073
+    )
+  ]);
+  const hand = model([
+    pipe(
+      [
+        [0.025, 0.055, -0.22],
+        [0.045, 0.06, -0.35],
+        [0.075, 0.055, -0.46]
+      ],
+      0.045
+    ),
+    orb([0.038, 0.039, 0.06], [0.08, 0.055, -0.475])
+  ]);
+  const leg = model([
+    pipe(
+      [
+        [0, 0, 0],
+        [0.035, 0, -0.34],
+        [-0.01, 0, -0.72]
+      ],
+      0.072,
+      pants
+    ),
+    orb([0.071, 0.071, 0.085], [0.035, 0, -0.34], pants),
+    orb([0.142, 0.066, 0.06], [0.065, 0, -0.778], shoe),
+    part(block(0.275, 0.133, 0.025), [0.065, 0, -0.832], sole),
+    pipe(
+      [
+        [0.11, -0.04, -0.73],
+        [0.11, 0.04, -0.73]
+      ],
+      0.009,
+      sole,
+      6
+    ),
+    pipe(
+      [
+        [0.065, -0.04, -0.725],
+        [0.065, 0.04, -0.725]
+      ],
+      0.009,
+      sole,
+      6
+    )
+  ]);
+  const flags = [0, (Math.PI * 2) / 3, (Math.PI * 4) / 3].map((phase) => createShape(flagGeometry(phase), { center: false, shine: 0.02 })) as [
+    Model,
+    Model,
+    Model
+  ];
+  cached = { shirt, skin, details: model(details), sleeve, hand, leg, flags };
+  return cached;
+}
+
+/** Reusable assets; the game loader advances one builder per frame. */
+export function* warmAssets(): Iterable<() => unknown> {
+  yield personMeshes;
+}