@nayan-ui/games 1.18.0 → 1.20.0

package/src/games/car-racing/CarRacingScenery.ts

@@ -0,0 +1,265 @@
+// Small reusable detail meshes layered onto the original scenery. Model registration is done
+// during asset loading; recycling road segments only instances these cached meshes.
+import { type Color, ellipsoid, type Geometry, merge, type Model, type Vec3 } from '@nayan-ui/engine';
+import { cacheGameAsset, createGameMesh } from '../shared/EngineMeshes';
+import { facadeWindowQuads } from './CarRacingFacade';
+
+type Vector = [number, number, number];
+class Details {
+  private vertices: number[] = [];
+  private indices: number[] = [];
+  quad(a: Vec3, b: Vec3, c: Vec3, d: Vec3, normal: Vec3, color: Color, uv: [number, number] = [1, 1]) {
+    const first = this.vertices.length / 11;
+    for (const [p, tex] of [
+      [a, [0, 0]],
+      [b, [uv[0], 0]],
+      [c, uv],
+      [d, [0, uv[1]]]
+    ] as [Vec3, number[]][]) {
+      this.vertices.push(...p, ...normal, color[0], color[1], color[2], tex[0]!, tex[1]!);
+    }
+    const ab = [b[0] - a[0], b[1] - a[1], b[2] - a[2]],
+      ac = [c[0] - a[0], c[1] - a[1], c[2] - a[2]];
+    const facing =
+      (ab[1]! * ac[2]! - ab[2]! * ac[1]!) * normal[0] +
+      (ab[2]! * ac[0]! - ab[0]! * ac[2]!) * normal[1] +
+      (ab[0]! * ac[1]! - ab[1]! * ac[0]!) * normal[2];
+    this.indices.push(...(facing >= 0 ? [0, 1, 2, 0, 2, 3] : [0, 2, 1, 0, 3, 2]).map((i) => first + i));
+  }
+  box(size: Vec3, at: Vec3, color: Color) {
+    const [x, y, z] = at,
+      [w, h, d] = size.map((v) => v / 2) as Vector;
+    this.quad([x - w, y - h, z + d], [x + w, y - h, z + d], [x + w, y + h, z + d], [x - w, y + h, z + d], [0, 0, 1], color);
+    this.quad([x + w, y - h, z - d], [x - w, y - h, z - d], [x - w, y + h, z - d], [x + w, y + h, z - d], [0, 0, -1], color);
+    this.quad([x + w, y - h, z + d], [x + w, y - h, z - d], [x + w, y + h, z - d], [x + w, y + h, z + d], [1, 0, 0], color);
+    this.quad([x - w, y - h, z - d], [x - w, y - h, z + d], [x - w, y + h, z + d], [x - w, y + h, z - d], [-1, 0, 0], color);
+    this.quad([x - w, y + h, z + d], [x + w, y + h, z + d], [x + w, y + h, z - d], [x - w, y + h, z - d], [0, 1, 0], color);
+    this.quad([x - w, y - h, z - d], [x + w, y - h, z - d], [x + w, y - h, z + d], [x - w, y - h, z + d], [0, -1, 0], color);
+  }
+  geometry(): Geometry {
+    return { vertices: new Float32Array(this.vertices), indices: new Uint32Array(this.indices) };
+  }
+}
+const STONE: Color = [0.57, 0.57, 0.53],
+  METAL: Color = [0.2, 0.24, 0.23],
+  WOOD: Color = [0.43, 0.31, 0.2];
+function detail(key: string, build: (mesh: Details) => void, shine = 0.1): Model {
+  return cacheGameAsset(`car-racing/scenery-details-v1/${key}`, () => {
+    const mesh = new Details();
+    build(mesh);
+    return createGameMesh(mesh.geometry(), { center: false, shine });
+  });
+}
+function podium(): Model {
+  return detail(
+    'podium',
+    (m) => {
+      m.box([1.025, 0.32, 1.025], [0, 0.16, 0], STONE);
+      m.box([1.012, 2.6, 1.012], [0, 1.5, 0], [0.2, 0.28, 0.3]);
+      m.box([1.055, 0.18, 1.055], [0, 2.9, 0], [0.49, 0.48, 0.43]);
+      for (const side of [-1, 1]) {
+        for (const t of [-0.48, -0.24, 0, 0.24, 0.48]) {
+          m.box([0.025, 2.5, 0.035], [side * 0.514, 1.5, t], [0.39, 0.41, 0.39]);
+          m.box([0.035, 2.5, 0.025], [t, 1.5, side * 0.514], [0.39, 0.41, 0.39]);
+        }
+        m.box([0.095, 0.12, 0.66], [side * 0.55, 2.55, 0], [0.31, 0.36, 0.31]);
+        m.box([0.025, 0.08, 0.015], [side * 0.534, 1.28, 0.065], [0.72, 0.73, 0.69]);
+      }
+    },
+    0.25
+  );
+}
+function roof(style: number): Model {
+  return detail(`roof-${style}`, (m) => {
+    m.box([1.045, 0.25, 1.045], [0, 0.03, 0], [0.57, 0.56, 0.52]);
+    for (const side of [-1, 1]) {
+      m.box([1.03, 0.55, 0.018], [0, 0.36, side * 0.507], [0.46, 0.47, 0.44]);
+      m.box([0.018, 0.55, 1.03], [side * 0.507, 0.36, 0], [0.46, 0.47, 0.44]);
+    }
+    m.box([0.25, 0.8, 0.25], [-0.17, 0.52, 0.16], [0.49, 0.53, 0.53]);
+    for (let slat = 0; slat < 4; slat++) m.box([0.255, 0.035, 0.025], [-0.17, 0.96, 0.07 + slat * 0.055], METAL);
+    m.box([0.12, style ? 1.5 : 0.65, 0.15], [0.24, style ? 0.95 : 0.52, -0.18], [0.52, 0.43, 0.35]);
+    if (style) m.box([0.18, 0.1, 0.21], [0.24, 1.72, -0.18], [0.63, 0.61, 0.56]);
+  });
+}
+function facade(style: number): Model {
+  return detail(`trim-${style}`, (m) => {
+    const trim: Color = style === 1 ? [0.58, 0.61, 0.61] : [0.72, 0.7, 0.64];
+    for (const side of [-1, 1]) {
+      for (const corner of [-1, 1]) m.box([0.025, 0.985, 0.025], [side * 0.496, 0, corner * 0.496], trim);
+      if (style === 0)
+        for (const x of [-0.25, 0.25]) {
+          m.box([0.013, 0.98, 0.012], [x, 0, side * 0.504], trim);
+          m.box([0.012, 0.98, 0.013], [side * 0.504, 0, x], trim);
+        }
+    }
+    for (const y of style === 2 ? [-0.25, 0, 0.25, 0.49] : [0.49]) m.box([1.025, 0.009, 1.025], [0, y, 0], trim);
+  });
+}
+function windows(): Model {
+  return detail(
+    'night-windows-aligned-v2',
+    (m) => {
+      for (const {
+        corners: [a, b, c, d],
+        normal
+      } of facadeWindowQuads()) {
+        m.quad(a, b, c, d, normal, [1.6, 1.46, 1.02]);
+      }
+    },
+    0
+  );
+}
+function bench(): Model {
+  return detail('bench', (m) => {
+    for (const z of [-0.2, -0.07, 0.06, 0.19]) m.box([1.7, 0.07, 0.1], [0, 0.52, z], WOOD);
+    for (const y of [0.77, 0.91, 1.05]) m.box([1.7, 0.1, 0.07], [0, y, -0.24], WOOD);
+    for (const x of [-0.59, 0.59]) {
+      m.box([0.08, 0.52, 0.45], [x, 0.26, 0], METAL);
+      m.box([0.065, 1.06, 0.065], [x, 0.53, -0.23], METAL);
+      m.box([0.07, 0.07, 0.45], [x, 0.72, 0], METAL);
+    }
+  });
+}
+function planter(): Model {
+  return detail('planter', (m) => {
+    m.box([1.5, 0.48, 1.8], [0, 0.24, 0], [0.43, 0.44, 0.39]);
+    m.box([1.6, 0.08, 1.9], [0, 0.5, 0], [0.65, 0.64, 0.58]);
+    m.box([1.32, 0.035, 1.62], [0, 0.55, 0], [0.21, 0.18, 0.12]);
+  });
+}
+function bin(): Model {
+  return detail('bin', (m) => {
+    m.box([0.5, 0.85, 0.5], [0, 0.43, 0], [0.23, 0.29, 0.25]);
+    m.box([0.56, 0.08, 0.56], [0, 0.9, 0], [0.39, 0.41, 0.35]);
+    m.box([0.36, 0.15, 0.02], [0, 0.76, 0.257], [0.055, 0.07, 0.06]);
+    for (const x of [-0.18, -0.06, 0.06, 0.18]) m.box([0.012, 0.63, 0.025], [x, 0.4, 0.26], [0.12, 0.18, 0.15]);
+  });
+}
+function shelter(): Model {
+  return detail('shelter', (m) => {
+    m.box([2.15, 0.16, 4.4], [0, 3.0, 0], [0.39, 0.42, 0.4]);
+    m.box([2.3, 0.08, 4.6], [0, 3.13, 0], [0.58, 0.61, 0.57]);
+    for (const z of [-1.9, 1.9]) for (const x of [-0.85, 0.85]) m.box([0.08, 2.95, 0.08], [x, 1.5, z], METAL);
+    m.box([0.035, 2.25, 3.6], [0.88, 1.65, 0], [0.34, 0.48, 0.51]);
+    m.box([1.7, 0.06, 0.5], [0, 0.62, 0], WOOD);
+    for (const z of [-1.1, 1.1]) m.box([0.5, 0.58, 0.08], [0, 0.29, z], METAL);
+    m.box([0.06, 0.95, 0.65], [-0.86, 1.8, 1.4], [0.85, 0.86, 0.79]);
+    for (let line = 0; line < 5; line++) m.box([0.07, 0.035, 0.42], [-0.9, 2.1 - line * 0.12, 1.4], [0.21, 0.35, 0.3]);
+  });
+}
+function grass(): Model {
+  return detail('grass', (m) => {
+    for (let blade = 0; blade < 14; blade++) {
+      const angle = blade * 2.39996,
+        x = Math.cos(angle) * (0.15 + (blade % 3) * 0.08),
+        z = Math.sin(angle) * (0.15 + (blade % 3) * 0.08);
+      const h = 0.22 + (blade % 4) * 0.07,
+        dx = Math.cos(angle) * 0.13,
+        dz = Math.sin(angle) * 0.13;
+      const normal: Vec3 = [Math.cos(angle), 0, Math.sin(angle)];
+      const side: Vec3 = [-normal[2] * 0.025, 0, normal[0] * 0.025];
+      const color: Color = [0.22 + (blade % 3) * 0.035, 0.34 + (blade % 4) * 0.025, 0.12];
+      const points: Vec3[] = [
+        [x + side[0], 0, z + side[2]],
+        [x - side[0], 0, z - side[2]],
+        [x + dx, h, z + dz],
+        [x + dx, h, z + dz]
+      ];
+      m.quad(points[0]!, points[1]!, points[2]!, points[3]!, normal, color);
+      m.quad(points[3]!, points[2]!, points[1]!, points[0]!, [-normal[0], 0, -normal[2]], color);
+    }
+  });
+}
+function flowers(): Model {
+  return detail('flowers', (m) => {
+    for (let i = 0; i < 9; i++) {
+      const x = Math.cos(i * 2.4) * 0.44,
+        z = Math.sin(i * 2.4) * 0.5,
+        h = 0.3 + (i % 3) * 0.09;
+      m.box([0.018, h, 0.018], [x, h / 2, z], [0.19, 0.32, 0.12]);
+      const petal: Color = i % 3 ? [0.9, 0.78, 0.32] : [0.86, 0.86, 0.79];
+      m.box([0.17, 0.035, 0.055], [x, h, z], petal);
+      m.box([0.055, 0.04, 0.17], [x, h, z], petal);
+      m.box([0.045, 0.048, 0.045], [x, h + 0.01, z], [0.59, 0.38, 0.1]);
+    }
+  });
+}
+function pavement(): Model {
+  return detail('pavement', (m) => {
+    m.box([2.6, 0.12, 6.35], [0, 0, 0], [0.65, 0.65, 0.61]);
+    for (let row = 0; row < 6; row++) m.box([2.6, 0.006, 0.015], [0, 0.063, -2.5 + row], [0.5, 0.51, 0.47]);
+    for (const x of [-0.43, 0.43]) m.box([0.015, 0.006, 6.3], [x, 0.063, 0], [0.5, 0.51, 0.47]);
+    for (const x of [-1.27, 1.27]) m.box([0.065, 0.06, 6.35], [x, 0.08, 0], [0.74, 0.73, 0.67]);
+  });
+}
+function drain(): Model {
+  return detail('drain', (m) => {
+    m.box([0.31, 0.014, 0.65], [0, 0, 0], [0.29, 0.3, 0.27]);
+    for (let i = 0; i < 7; i++) m.box([0.23, 0.006, 0.035], [0, 0.009, -0.25 + i * 0.08], [0.085, 0.1, 0.09]);
+  });
+}
+function houseDetails(): Model {
+  return detail('house-details', (m) => {
+    m.box([5.2, 0.16, 5.8], [0, 3.14, 0], [0.64, 0.62, 0.53]);
+    m.box([0.55, 1.4, 0.55], [1.3, 4.0, -0.9], [0.49, 0.35, 0.28]);
+    m.box([0.68, 0.12, 0.68], [1.3, 4.73, -0.9], [0.58, 0.56, 0.51]);
+    for (const x of [-2.55, 2.55]) {
+      m.box([0.07, 1.2, 1.2], [x, 0.64, 0.9], [0.31, 0.35, 0.29]);
+      m.box([0.9, 0.1, 1.45], [x, 1.35, 0.9], [0.5, 0.36, 0.24]);
+    }
+  });
+}
+function routeSign(): Model {
+  return detail('route-sign', (m) => {
+    m.box([4.2, 1.5, 0.12], [0, 0, 0], [0.16, 0.29, 0.22]);
+    for (const side of [-1, 1]) {
+      m.box([4.12, 0.035, 0.015], [0, side * 0.69, 0.072], [0.79, 0.83, 0.73]);
+      m.box([0.035, 1.36, 0.015], [side * 2.03, 0, 0.072], [0.79, 0.83, 0.73]);
+    }
+    m.box([0.7, 0.12, 0.02], [1.25, -0.05, 0.08], [0.94, 0.95, 0.86]);
+    m.quad([1.42, -0.31, 0.094], [1.8, -0.05, 0.094], [1.42, 0.21, 0.094], [1.42, 0.21, 0.094], [0, 0, 1], [0.94, 0.95, 0.86]);
+  });
+}
+
+function grassGround(): Model {
+  return detail('grass-ground-v2', (m) => m.quad([-0.5, 0, -0.5], [0.5, 0, -0.5], [0.5, 0, 0.5], [-0.5, 0, 0.5], [0, 1, 0], [1, 1, 1], [1, 1]));
+}
+function cloud(): Model {
+  return cacheGameAsset('car-racing/scenery-details-v1/cloud', () =>
+    createGameMesh(
+      merge([
+        { geometry: ellipsoid([14, 2.4, 6], [1, 1, 1], 10) },
+        { geometry: ellipsoid([8, 3.8, 5], [1, 1, 1], 10), position: [-4, 1.1, 0] },
+        { geometry: ellipsoid([7, 2.8, 5], [1, 1, 1], 10), position: [8, 0.4, 1] }
+      ]),
+      { center: false, shine: 0 }
+    )
+  );
+}
+
+let scenery: ReturnType<typeof buildScenery> | undefined;
+function buildScenery() {
+  return {
+    podium: podium(),
+    roofs: [roof(0), roof(1)],
+    facades: [facade(0), facade(1), facade(2)],
+    windows: windows(),
+    bench: bench(),
+    planter: planter(),
+    bin: bin(),
+    shelter: shelter(),
+    grass: grass(),
+    flowers: flowers(),
+    pavement: pavement(),
+    drain: drain(),
+    house: houseDetails(),
+    grassGround: grassGround(),
+    routeSign: routeSign(),
+    cloud: cloud()
+  };
+}
+export type SceneryMeshes = ReturnType<typeof buildScenery>;
+export function sceneryMeshes(): SceneryMeshes {
+  return (scenery ??= buildScenery());
+}

package/src/games/chameleon-run/ChameleonRun.tsx

@@ -0,0 +1,96 @@
+import { useMemo } from 'react';
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS, type SoundConfig } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { livesColumn, scoreColumn, textColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { backgroundFor, lightFor } from './ChameleonRunBackdrop';
+import { MAX_LIVES, RESULTS_DELAY_LOSE, RESULTS_DELAY_WIN, TRACK_LENGTH } from './ChameleonRunConstants';
+import {
+  changeColor,
+  createGame,
+  dispose,
+  type GameEvent,
+  INITIAL_HUD,
+  reset,
+  setActive,
+  setLayout,
+  setTheme,
+  start,
+  steer,
+  tick
+} from './ChameleonRunGame';
+
+const SOUNDS = GAME_SOUNDS.CHAMELEON_RUN;
+const FEEDBACK: Record<GameEvent, { sound?: SoundConfig; haptic: HapticType }> = {
+  jump: { sound: SOUNDS.JUMP, haptic: HapticType.LIGHT },
+  land: { sound: SOUNDS.LAND, haptic: HapticType.LIGHT },
+  swap: { sound: SOUNDS.SWAP, haptic: HapticType.LIGHT },
+  star: { sound: SOUNDS.STAR, haptic: HapticType.SUCCESS },
+  hurt: { sound: SOUNDS.HURT, haptic: HapticType.HEAVY },
+  fall: { sound: SOUNDS.GAME_OVER, haptic: HapticType.ERROR },
+  win: { sound: SOUNDS.WIN, haptic: HapticType.SUCCESS }
+};
+
+export const ChameleonRun = engineGame(GAME_IDS.CHAMELEON_RUN, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [stars, setStars] = useLiveState(0);
+  const [distance, setDistance] = useLiveState(0);
+  const [lives, setLives] = useLiveState(MAX_LIVES);
+  const [hud, setHud] = useLiveState(INITIAL_HUD, 0);
+  const { game, theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.CHAMELEON_RUN,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    setActive,
+    resize: setLayout,
+    tap: changeColor,
+    drag: steer,
+    reportScore: (g) => g.run?.score ?? 0,
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.SUCCESS),
+    onStop: (fx) => fx(undefined, HapticType.MEDIUM),
+    resultsDelay: (result) => (result === 'win' ? RESULTS_DELAY_WIN : RESULTS_DELAY_LOSE),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onStars = setStars;
+      g.onDistance = setDistance;
+      g.onLives = setLives;
+      g.onHud = setHud;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  // Pausing the app or opening Settings freezes rules, the clock and native animations.
+
+  const light = useMemo(() => lightFor(theme), [theme]);
+  const background = useMemo(() => backgroundFor(theme), [theme]);
+  const failureMessage = hud.failure === 'color' ? 'Match your color to the platform before landing.' : 'Use the second jump to save a long leap.';
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={light}
+      background={background}
+      fog={0}
+      columns={[scoreColumn(score), livesColumn(lives, MAX_LIVES), textColumn('TRACK', `${TRACK_LENGTH - distance} m`)]}
+      subtext="Change colors and jump!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU MADE IT!' : 'OUT OF LIVES!',
+        message:
+          status === 'win'
+            ? `Finished ${TRACK_LENGTH} m with ${stars} stars! Best streak ×${game.run?.bestCombo ?? 0}.`
+            : `Out of lives after ${distance} of ${TRACK_LENGTH} m. ${failureMessage}`,
+        scoreLabel: 'Run Score',
+        score,
+        buttonText: status === 'win' ? 'Run Again!' : 'Try Again!'
+      })}
+    />
+  );
+});

package/src/games/chameleon-run/ChameleonRunBackdrop.ts

@@ -0,0 +1,186 @@
+// A code-only alpine valley. Terrain, rock strata, snow, haze and a soft sky are baked into
+// four cached meshes (day/night × sky/terrain); there are no image assets or asynchronous loads.
+import { type Entity, type Geometry, type Light, type Model, type Vec3, type World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+
+type RGB = readonly [number, number, number];
+const DAY_LIGHT: Light = { direction: [-0.6, 0.75, 0.25], ambient: 0.48, color: [1.04, 1.02, 1], shadows: true, shadowExtent: 28 };
+const NIGHT_LIGHT: Light = { direction: [-0.25, 0.75, 0.45], ambient: 0.6, color: [0.78, 0.86, 1.05], shadows: true, shadowExtent: 28 };
+export const lightFor = (theme: GameTheme): Light => (theme.mode === 'dark' ? NIGHT_LIGHT : DAY_LIGHT);
+export const backgroundFor = (theme: GameTheme): RGB => (theme.mode === 'dark' ? [0.055, 0.085, 0.13] : [0.63, 0.73, 0.81]);
+
+const meshes = new Map<string, Model>();
+const clamp = (x: number, lo = 0, hi = 1) => Math.max(lo, Math.min(hi, x));
+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 smooth = (lo: number, hi: number, x: number) => {
+  const t = clamp((x - lo) / (hi - lo));
+  return t * t * (3 - 2 * t);
+};
+const normalize = (v: Vec3): Vec3 => {
+  const n = Math.hypot(...v) || 1;
+  return [v[0] / n, v[1] / n, v[2] / n];
+};
+const hash = (x: number, y: number) => {
+  const n = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
+  return n - Math.floor(n);
+};
+function noise(x: number, y: number) {
+  const ix = Math.floor(x),
+    iy = Math.floor(y);
+  const fx = smooth(0, 1, x - ix),
+    fy = smooth(0, 1, y - iy);
+  const a = hash(ix, iy),
+    b = hash(ix + 1, iy),
+    c = hash(ix, iy + 1),
+    d = hash(ix + 1, iy + 1);
+  return a + (b - a) * fx + (c - a) * fy + (a - b - c + d) * fx * fy;
+}
+const fbm = (x: number, y: number) =>
+  noise(x, y) * 0.55 + noise(x * 2.13 + 7, y * 2.13) * 0.28 + noise(x * 4.57, y * 4.57 + 11) * 0.12 + noise(x * 9.1, y * 9.1) * 0.05;
+
+/** The central ravine stays well below the floating course; only distant flanks rise into mountains. */
+function heightAt(x: number, z: number) {
+  const distance = -z;
+  const bend = Math.sin(distance * 0.014) * 12 + Math.sin(distance * 0.027 + 1) * 7;
+  const valley = 1 - Math.exp(-((Math.abs(x - bend) / (48 + distance * 0.14)) ** 1.8));
+  const warp = (fbm(x * 0.014 + 9, z * 0.011) - 0.5) * 19;
+  const ridge = 1 - Math.abs(noise((x + warp) * 0.018, z * 0.014 + 13) * 2 - 1);
+  const spur = 1 - Math.abs(noise(x * 0.047 + 5, z * 0.033) * 2 - 1);
+  const peaks = 28 + ridge ** 3 * 88 + spur * 12;
+  const farRange = smooth(210, 405, distance) * (20 + fbm(x * 0.022 + 30, z * 0.017) * 46);
+  const gullies = (fbm(x * 0.11, z * 0.09) - 0.5) * valley * 5;
+  return -44 + valley * peaks + farRange + gullies;
+}
+
+interface Point {
+  position: Vec3;
+  color: RGB;
+}
+/** Background lighting is static, so bake it with the haze and compensate for the renderer once. */
+function surface(rows: number, columns: number, theme: GameTheme, upward: boolean, point: (u: number, v: number) => Point): Geometry {
+  const light = lightFor(theme);
+  const n = normalize(light.direction);
+  const illumination = light.ambient * (0.6 + 0.4 * (n[1] * 0.5 + 0.5)) + 1 - light.ambient;
+  const lc = light.color ?? [1, 1, 1];
+  const vertices = new Float32Array((rows + 1) * (columns + 1) * 11);
+  const indices = new Uint32Array(rows * columns * 6);
+  let vi = 0,
+    ti = 0;
+  for (let row = 0; row <= rows; row++)
+    for (let column = 0; column <= columns; column++) {
+      const { position: p, color: c } = point(column / columns, row / rows);
+      vertices.set(
+        [p[0], p[1], p[2], n[0], n[1], n[2], c[0] / (illumination * lc[0]), c[1] / (illumination * lc[1]), c[2] / (illumination * lc[2]), 0, 0],
+        vi
+      );
+      vi += 11;
+      if (row === rows || column === columns) continue;
+      const a = row * (columns + 1) + column,
+        b = a + columns + 1;
+      indices.set(upward ? [a, a + 1, b, a + 1, b + 1, b] : [a, b, a + 1, a + 1, b, b + 1], ti);
+      ti += 6;
+    }
+  return { vertices, indices };
+}
+
+function skyMesh(theme: GameTheme): Model {
+  return cacheGameAsset('chameleon-run/ChameleonRunBackdrop:skyMesh' + JSON.stringify([theme]), () => skyMeshUncached(theme));
+}
+
+function skyMeshUncached(theme: GameTheme): Model {
+  const key = `sky-${theme.mode === 'dark' ? 'night' : 'day'}`;
+  let mesh = meshes.get(key);
+  if (mesh) return mesh;
+  const dark = theme.mode === 'dark';
+  const horizon: RGB = dark ? [0.12, 0.17, 0.24] : [0.76, 0.82, 0.85];
+  const zenith: RGB = dark ? [0.018, 0.035, 0.075] : [0.25, 0.43, 0.65];
+  mesh = createShape(
+    surface(48, 96, theme, false, (u, v) => {
+      const azimuth = (u - 0.5) * 3.2,
+        elevation = 0.95 - v * 1.8;
+      let color = mix(horizon, zenith, smooth(-0.04, 0.82, elevation));
+      // Thin, irregular cloud veils. Their shading is part of the sky, not large puff objects.
+      const cloudBand = smooth(0.08, 0.23, elevation) * (1 - smooth(0.56, 0.76, elevation));
+      const streak = smooth(0.52, 0.82, fbm(azimuth * 2 + elevation * 3, elevation * 33));
+      color = mix(color, dark ? [0.22, 0.28, 0.36] : [0.91, 0.92, 0.91], streak * cloudBand * 0.5);
+      const warmth = Math.exp(-((azimuth + 0.6) ** 2 / 0.5 + (elevation - 0.18) ** 2 / 0.04));
+      if (!dark) color = mix(color, [0.93, 0.87, 0.73], warmth * 0.12);
+      const radius = 430,
+        horizontal = radius * Math.cos(elevation);
+      return { position: [Math.sin(azimuth) * horizontal, Math.sin(elevation) * radius, -Math.cos(azimuth) * horizontal], color };
+    }),
+    { center: false, shine: 0 }
+  );
+  meshes.set(key, mesh);
+  return mesh;
+}
+
+function terrainMesh(theme: GameTheme): Model {
+  return cacheGameAsset('chameleon-run/ChameleonRunBackdrop:terrainMesh' + JSON.stringify([theme]), () => terrainMeshUncached(theme));
+}
+
+function terrainMeshUncached(theme: GameTheme): Model {
+  const key = `terrain-${theme.mode === 'dark' ? 'night' : 'day'}`;
+  let mesh = meshes.get(key);
+  if (mesh) return mesh;
+  const dark = theme.mode === 'dark';
+  const light = lightFor(theme),
+    sun = normalize(light.direction),
+    lc = light.color ?? [1, 1, 1];
+  const haze: RGB = dark ? [0.1, 0.145, 0.21] : [0.65, 0.74, 0.8];
+  mesh = createShape(
+    surface(96, 128, theme, true, (u, v) => {
+      const distance = 8 + v ** 1.3 * 400;
+      const x = (u - 0.5) * 2 * (72 + distance * 0.95),
+        z = -distance;
+      const y = heightAt(x, z);
+      const delta = 0.4;
+      const normal = normalize([
+        -(heightAt(x + delta, z) - heightAt(x - delta, z)) / (2 * delta),
+        1,
+        -(heightAt(x, z + delta) - heightAt(x, z - delta)) / (2 * delta)
+      ]);
+      const slope = 1 - normal[1];
+      const mineral = fbm(x * 0.15, z * 0.13);
+      const strata = Math.sin(y * 2.4 + noise(x * 0.09, z * 0.07) * 8) * 0.5 + 0.5;
+      let rock = mix([0.34, 0.36, 0.35], [0.56, 0.53, 0.47], mineral * 0.7 + strata * 0.15);
+      const vegetation = (1 - smooth(0.15, 0.55, slope)) * (1 - smooth(10, 45, y));
+      rock = mix(rock, mix([0.18, 0.28, 0.22], [0.38, 0.43, 0.28], noise(x * 0.23, z * 0.19)), vegetation * 0.8);
+      const snow = smooth(34, 67, y + (mineral - 0.5) * 12) * (1 - smooth(0.28, 0.68, slope));
+      rock = mix(rock, [0.84, 0.86, 0.86], snow);
+      const diffuse = Math.max(0, normal[0] * sun[0] + normal[1] * sun[1] + normal[2] * sun[2]);
+      const brightness = light.ambient * (0.6 + 0.4 * (normal[1] * 0.5 + 0.5)) + (1 - light.ambient) * diffuse;
+      let color: RGB = [rock[0] * brightness * lc[0], rock[1] * brightness * lc[1], rock[2] * brightness * lc[2]];
+      if (dark) color = [color[0] * 0.31, color[1] * 0.39, color[2] * 0.55];
+      const air = 1 - Math.exp(-((distance / 280) ** 1.5));
+      color = mix(color, haze, air * 0.88);
+      return { position: [x, y, z], color };
+    }),
+    { center: false, shine: 0 }
+  );
+  meshes.set(key, mesh);
+  return mesh;
+}
+
+export interface Backdrop {
+  root: Entity;
+  alive: boolean;
+}
+export function spawnBackdrop(world: World, theme: GameTheme): Backdrop {
+  const root = world.spawn({ mesh: 'none', pickable: false });
+  world.spawn({ mesh: skyMesh(theme), parent: root, position: [0, 3.1, 5.4], pickable: false });
+  world.spawn({ mesh: terrainMesh(theme), parent: root, pickable: false });
+  return { root, alive: true };
+}
+export function removeBackdrop(world: World, backdrop: Backdrop) {
+  if (!backdrop.alive) return;
+  backdrop.alive = false;
+  world.despawn(backdrop.root);
+}
+
+/** Landscape models depend only on the theme, not a running game. */
+export function* warmAssets(theme: GameTheme): Iterable<() => unknown> {
+  yield () => skyMesh(theme);
+  yield () => terrainMesh(theme);
+}

package/src/games/chameleon-run/ChameleonRunConstants.ts

@@ -0,0 +1,47 @@
+// Metres and seconds: gameplay is independent of screen size and camera projection.
+/** Match Penguin Run: a fixed-distance run at a steady pace, with three lives. */
+export const TRACK_LENGTH = 500;
+export const MAX_LIVES = 3;
+export const HURT_INVULNERABLE = 2.2;
+export const RESULTS_DELAY_LOSE = 1700;
+export const RESULTS_DELAY_WIN = 2600;
+export const POINTS_PER_METRE = 1;
+export const DRAG_THRESHOLD = 18;
+export const STEP_SECONDS = 1 / 60;
+export const MAX_FRAME_SECONDS = 0.05;
+export const SCORE_SYNC = 0.1;
+export const STAR_POINTS = 250;
+export const MAX_JUMPS = 2;
+export const JUMP_BUFFER = 0.12;
+export const COYOTE_TIME = 0.1;
+export const COLOR_GRACE = 0.12;
+export const BASE_SPEED = 7;
+
+export type RunColor = 'yellow' | 'pink';
+export const RUN_COLORS = { yellow: '#FFD447', pink: '#F653A6' } as const;
+export const COLOR_NAMES = { yellow: 'YELLOW · STRIPES', pink: 'PINK · DOTS' } as const;
+
+export interface Config {
+  width: number;
+  height: number;
+  trackWidth: number;
+  lookAhead: number;
+  gravity: number;
+  jump: number;
+  doubleJump: number;
+  fallY: number;
+}
+
+export function configFor(width: number, height: number): Config {
+  return { width, height, trackWidth: 3.8, lookAhead: 85, gravity: 19, jump: 7.8, doubleJump: 7, fallY: -7 };
+}
+
+export const COLORS = {
+  STONE: '#496578',
+  STONE_DARK: '#304556',
+  NEUTRAL: '#D6E9EC',
+  STAR: '#FFF09A',
+  BELLY: '#FFF5DC',
+  EYE: '#16243A',
+  RIM: '#F5FCFF'
+} as const;