@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/play-with-tua/PlayWithTuaScene.ts

@@ -0,0 +1,36 @@
+import type { Camera, Entity, LoadedModel, World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { getScoreBoardTop } from '../shared/EngineHud';
+import { toRgb } from '../shared/EngineUtils';
+import { PLAY_WITH_TUA_CAMERA_HEIGHT, PLAY_WITH_TUA_CONTROLS_HEIGHT } from './PlayWithTuaConstants';
+import { spawnCharacter } from './PlayWithTuaModel';
+
+export interface Scene {
+  character: Entity;
+  floor: Entity;
+  camera: Camera;
+}
+
+export function buildScene(world: World, model: LoadedModel, theme: GameTheme): Scene {
+  return {
+    character: spawnCharacter(world, model),
+    floor: world.spawn({ mesh: 'cube', position: [0, -0.055, 0], scale: [200, 0.1, 200], color: toRgb(theme.BACKGROUND), pickable: false }),
+    camera: { eye: [0, PLAY_WITH_TUA_CAMERA_HEIGHT + 0.12, 9], target: [0, PLAY_WITH_TUA_CAMERA_HEIGHT, 0], fov: 0.7 }
+  };
+}
+
+export function layoutScene(scene: Scene, width: number, height: number, offset: number) {
+  const top = getScoreBoardTop(offset) + 88;
+  const bottom = height - PLAY_WITH_TUA_CONTROLS_HEIGHT;
+  const available = Math.max(80, bottom - top);
+  const halfHeight = Math.max((2.12 * height) / available, (1.9 * height) / Math.max(1, width));
+  const center = (top + bottom) / 2;
+  const targetY = PLAY_WITH_TUA_CAMERA_HEIGHT + (center / Math.max(1, height) - 0.5) * 2 * halfHeight;
+  scene.camera.target = [0, targetY, 0];
+  scene.camera.eye = [0, targetY + 0.12, halfHeight / Math.tan(scene.camera.fov / 2)];
+  return { top, bottom };
+}
+
+export function setSceneTheme(world: World, scene: Scene, theme: GameTheme) {
+  world.set(scene.floor, { color: toRgb(theme.BACKGROUND) });
+}

package/src/games/popit-fidget/PopitFidget.tsx

@@ -0,0 +1,72 @@
+// Popit Fidget's screen, on the Nayan engine: the silicone sheet, its domes and dimples are one 3D scene
+// (an orthographic camera leaning back over the sheet), under Playtura's scoreboard, controls and
+// modals. The rules are in PopitFidgetGame.ts, what it draws in PopitFidgetScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
+// repaints the backdrop, so the GPU view is never rebuilt. Pops animate in the engine's Rust core; JS
+// hit-tests touches (on touch-down, like the original version) and steps the clock and the world.
+import { useMemo } from 'react';
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { scoreColumn, timerColumn } from '../shared/EngineHud';
+import { toRgb } from '../shared/EngineUtils';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, LIGHT, TIME_LIMIT, TIME_WARNING } from './PopitFidgetConstants';
+import { createGame, dispose, press, reset, setLayout, setTheme, start, tick } from './PopitFidgetGame';
+
+const SOUNDS = GAME_SOUNDS.POPIT_FIDGET;
+
+export const PopitFidget = engineGame(GAME_IDS.POPIT_FIDGET, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
+
+  // Win or lose when it ends
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.POPIT_FIDGET,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.sheet;
+    },
+    // Pops on touch-down, like a real pop-it (a tap would wait for the finger to lift)
+    drag: (g, e) => {
+      if (e.phase === 'start') press(g, e.x, e.y);
+    },
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
+    onOver: (fx, s) => fx(s === 'win' ? GAME_SOUNDS.WELL_DONE : SOUNDS.GAME_OVER),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onTime = setTimeLeft;
+      g.onPop = () => fx(SOUNDS.POP, HapticType.LIGHT);
+    }
+  });
+
+  const background = useMemo(() => toRgb(theme.BACKGROUND), [theme.BACKGROUND]);
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      background={background}
+      columns={[scoreColumn(score), timerColumn(timeLeft, theme, TIME_WARNING)]}
+      subtext="Pop bubbles to relax!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU WON!' : 'TIME UP!',
+        message: status === 'win' ? 'All bubbles popped!' : 'You ran out of time!',
+        scoreLabel: 'Final Score',
+        score,
+        buttonText: 'Pop Again!'
+      })}
+    />
+  );
+});

package/src/games/popit-fidget/PopitFidgetConstants.ts

@@ -0,0 +1,71 @@
+// Popit Fidget's rules, colors and layout. Rules, scoring and sizes match the original version
+// (games/popit-fidget), so scores carry over.
+import { getScoreBoardTop } from '../shared/EngineHud';
+import type { TiltView } from '../shared/EngineTilt';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const GRID_SIZE = 6; // bubbles a side
+export const TIME_LIMIT = 120; // seconds
+export const POINTS_PER_BUBBLE = 250;
+export const TIME_WARNING = 10; // the timer turns red for the last ten seconds
+
+/** One vivid color per row, top to bottom. */
+export const ROW_COLORS = ['#FF3B3B', '#32CD32', '#FFD700', '#4DA6FF', '#BF5AF2', '#FF9500'] as const;
+
+// ── Feel (seconds) ────────────────────────────────────────────────────
+
+export const PRESS_TIME = 0.07; // the dome squashes under the finger...
+export const FLIP_TIME = 0.16; // ...and the dimple springs out in its place
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** The camera leans back from straight down, so the domes stand up off the sheet. */
+export const TILT = 0.4;
+/** Lit from straight overhead with strong ambient, so nothing falls into shadow; surfaces facing up off the sheet (+z) keep their exact color. */
+export const LIGHT = frontLight([0, 0.12, 1], 0.72);
+
+// ── Layout (view points) ──────────────────────────────────────────────
+
+const SCOREBOARD_HEIGHT = 82;
+const CONTROLS_HEIGHT = 110;
+const SPACING = 1.12; // centre to centre, in bubbles
+const GRID_PADDING = 8;
+
+export type Layout = TiltView & {
+  bubble: number;
+  spacing: number;
+  /** The sheet: the bubbles plus `GRID_PADDING` all round. */
+  sheet: number;
+};
+
+/**
+ * A bubble as big as the original grid had it (the game area, 30 narrower than the screen and at most 500
+ * across, filled edge to edge), smaller if the screen is short; the sheet centred under the scoreboard.
+ */
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const gameWidth = gameWidthFor(width);
+  const top = getScoreBoardTop(offset) + SCOREBOARD_HEIGHT;
+  const room = Math.max(200, height - top - CONTROLS_HEIGHT);
+  const perBubble = (GRID_SIZE - 1) * SPACING + 1;
+  const fitWidth = (gameWidth - GRID_PADDING * 2) / perBubble;
+  // The sheet foreshortened by the tilt, plus the domes standing up at its far edge
+  const fitHeight = (room / Math.cos(TILT) - GRID_PADDING * 2) / (perBubble + 0.5 * Math.tan(TILT));
+  const bubble = Math.min(fitWidth, fitHeight);
+  return {
+    width,
+    height,
+    centerY: top + room / 2,
+    tilt: TILT,
+    bubble,
+    spacing: bubble * SPACING,
+    sheet: (GRID_SIZE - 1) * bubble * SPACING + bubble + GRID_PADDING * 2
+  };
+}
+
+/** A bubble's centre on the sheet (row 0 along the top), in world units. */
+export function bubbleCentre(l: Layout, row: number, col: number): [number, number] {
+  const first = -((GRID_SIZE - 1) * l.spacing) / 2;
+  return [first + col * l.spacing, -first - row * l.spacing];
+}

package/src/games/popit-fidget/PopitFidgetGame.ts

@@ -0,0 +1,148 @@
+// Popit Fidget's rules, with no React: build a game with `createGame`, give it a layout, `start` it and
+// `tick` it every frame. Touch a bubble to pop it (250 points), on touch-down, like a real pop-it; pop
+// all 36 inside two minutes to win (the score then rewards the time left, as the original version did).
+import { type Camera, World } from '@nayan-ui/engine';
+import { calculateTimeBasedScore } from '../../services/ScoringService';
+import type { GameTheme } from '../../services/ThemeService';
+import { aimTilted, unproject } from '../shared/EngineTilt';
+import { bubbleCentre, GRID_SIZE, type Layout, POINTS_PER_BUBBLE, TIME_LIMIT } from './PopitFidgetConstants';
+import { buildScene, celebrate, pop, removeScene, restore, type Scene, setSceneTheme } from './PopitFidgetScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+
+const BUBBLES = GRID_SIZE * GRID_SIZE;
+const WORLD_CAPACITY = 300; // domes and dimples (72), the sheet, the backdrop, and flecks
+const HIT_RADIUS = 0.45; // of a bubble: how near its centre a touch pops it (as the original grid)
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, 0, 240], target: [0, 0, 0], fov: 1, ortho: 1 };
+  const g = {
+    world,
+    camera,
+    theme,
+    layout: null as Layout | null,
+    scene: null as Scene | null,
+    phase: 'ready' as Phase,
+    popped: new Array<boolean>(BUBBLES).fill(false),
+    count: 0,
+    /** Score and the countdown live in the engine (Rust), advanced by world.update. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    get timeLeft() {
+      return world.scoreboard.shownSeconds;
+    },
+    won: false,
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number) => {},
+    onTime: (_t: number) => {},
+    onPop: () => {}
+  };
+  world.scoreboard.reset(0, TIME_LIMIT);
+  world.scoreboard.handlers = {
+    onSecond: (t) => g.onTime(t),
+    onTimeUp: () => {
+      if (g.phase !== 'playing') return;
+      g.won = false;
+      g.phase = 'over';
+      g.onPhase('over');
+    }
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Lays the scene out for the view (first layout, header height, rotation): rebuilt from the sheet's state. */
+export function setLayout(g: Game, l: Layout) {
+  if (g.scene) removeScene(g.world, g.scene);
+  g.layout = l;
+  aimTilted(g.camera, l);
+  g.scene = buildScene(g.world, l, g.theme, g.popped);
+}
+
+export function setTheme(g: Game, theme: GameTheme) {
+  g.theme = theme;
+  if (g.scene) setSceneTheme(g.world, g.scene, theme);
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+/** A fresh sheet, and the clock running. */
+export function start(g: Game) {
+  if (g.phase !== 'ready') return;
+  freshSheet(g);
+  g.phase = 'playing';
+  g.world.scoreboard.startCountdown(TIME_LIMIT);
+  g.onPhase('playing');
+}
+
+/** A fresh sheet, not started (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
+export function reset(g: Game) {
+  freshSheet(g);
+  g.won = false;
+  g.phase = 'ready';
+  g.onPhase('ready');
+}
+
+function freshSheet(g: Game) {
+  g.popped.fill(false);
+  g.count = 0;
+  g.world.scoreboard.reset(0, TIME_LIMIT);
+  if (g.layout && g.scene) restore(g.world, g.layout, g.scene);
+  g.onScore(0);
+  g.onTime(TIME_LIMIT);
+}
+
+export function dispose(g: Game) {
+  g.world.dispose();
+}
+
+export function tick(g: Game, dt: number) {
+  if (g.world.isDisposed) return;
+  g.world.update(dt);
+}
+
+// ── Touch ─────────────────────────────────────────────────────────────
+
+/** The unpopped bubble under a view point, if any. */
+export function bubbleAt(g: Game, x: number, y: number): number | null {
+  const l = g.layout;
+  if (!l) return null;
+  // Half way up a dome, where the eye sees the bubble
+  const [wx, wy] = unproject(l, x, y, l.bubble * 0.17);
+  const first = -((GRID_SIZE - 1) * l.spacing) / 2;
+  const col = Math.round((wx - first) / l.spacing);
+  const row = Math.round((-first - wy) / l.spacing);
+  if (row < 0 || row >= GRID_SIZE || col < 0 || col >= GRID_SIZE) return null;
+  const [cx, cy] = bubbleCentre(l, row, col);
+  const index = row * GRID_SIZE + col;
+  if (g.popped[index] || Math.hypot(wx - cx, wy - cy) > l.bubble * HIT_RADIUS) return null;
+  return index;
+}
+
+/** A finger comes down: pops the bubble under it. */
+export function press(g: Game, x: number, y: number) {
+  if (g.phase !== 'playing') return;
+  const index = bubbleAt(g, x, y);
+  if (index == null) return;
+  g.popped[index] = true;
+  g.count += 1;
+  g.world.scoreboard.add(POINTS_PER_BUBBLE);
+  if (g.layout && g.scene) pop(g.world, g.layout, g.scene, index);
+  g.onPop();
+  if (g.count >= BUBBLES) {
+    g.world.scoreboard.set(calculateTimeBasedScore(TIME_LIMIT - g.timeLeft, TIME_LIMIT, g.score));
+    g.world.scoreboard.stop();
+    g.won = true;
+    g.phase = 'over';
+    if (g.layout) celebrate(g.world, g.layout);
+    g.onScore(g.score);
+    g.onPhase('over');
+    return;
+  }
+  g.onScore(g.score);
+}

package/src/games/popit-fidget/PopitFidgetScene.ts

@@ -0,0 +1,242 @@
+// Everything Popit Fidget draws: a moulded silicone sheet lying flat (a band of color per row, as the
+// original sheet), a dome standing up for every bubble, and a dimple for every popped one, seen from a
+// little in front of straight down (shared/EngineTilt: an orthographic camera leaning back, one world
+// unit per point). Popping squashes the dome flat and springs a dimple out in its place. The domes
+// share one mesh and so do the dimples (one instanced draw each); the sheet is one mesh per size.
+import { type Color, effects, type Entity, extrude, lathe, merge, type Model, Path, quat, type World } from '@nayan-ui/engine';
+import { darken, lighten } from '../../services/GamesConstants';
+import type { GameTheme } from '../../services/ThemeService';
+import { setBackdropTheme, spawnBackdrop } from '../shared/EngineBackdrop';
+import { popBurst } from '../shared/EngineBlasts';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { placeTiltedBackdrop } from '../shared/EngineTilt';
+import { toColor } from '../shared/EngineUtils';
+import { bubbleCentre, FLIP_TIME, GRID_SIZE, type Layout, PRESS_TIME, ROW_COLORS } from './PopitFidgetConstants';
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('popit-fidget/PopitFidgetScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+/** Stands a lathe (built around +y) up off the sheet (+z). */
+const STAND_UP = quat.x(Math.PI / 2);
+const SHEET_DEPTH = 10;
+const CORNER = 22;
+const BACKDROP_DEPTH = 25;
+
+const rgb = (css: string): [number, number, number] => {
+  const [r, g, b] = toColor(css);
+  return [r, g, b];
+};
+const sheetShade = (row: number) => rgb(lighten(ROW_COLORS[row]!, 0.22));
+const domeColor = (row: number): Color => toColor(ROW_COLORS[row]!);
+const dimpleColor = (row: number): Color => toColor(darken(ROW_COLORS[row]!, 0.12));
+
+// ── Meshes ────────────────────────────────────────────────────────────
+
+/**
+ * The silicone sheet `size` across, its top face at z = 0: a band per row, split half way between
+ * rows, the top and bottom ones carrying the rounded corners.
+ */
+const sheetMesh = (l: Layout) =>
+  cached(`pf-sheet:${l.sheet.toFixed(1)}:${l.spacing.toFixed(2)}`, () => {
+    const half = l.sheet / 2;
+    const r = Math.min(CORNER, l.spacing / 2);
+    const parts = Array.from({ length: GRID_SIZE }, (_, row) => {
+      // Path coordinates run y down, from the sheet's top edge
+      const [, cy] = bubbleCentre(l, row, 0);
+      const top = row === 0 ? -half : -(cy + l.spacing / 2);
+      const bottom = row === GRID_SIZE - 1 ? half : -(cy - l.spacing / 2);
+      const p = new Path();
+      if (row === 0) {
+        p.moveTo(-half, bottom)
+          .lineTo(-half, top + r)
+          .quadraticTo(-half, top, -half + r, top)
+          .lineTo(half - r, top)
+          .quadraticTo(half, top, half, top + r)
+          .lineTo(half, bottom)
+          .close();
+      } else if (row === GRID_SIZE - 1) {
+        p.moveTo(-half, top)
+          .lineTo(half, top)
+          .lineTo(half, bottom - r)
+          .quadraticTo(half, bottom, half - r, bottom)
+          .lineTo(-half + r, bottom)
+          .quadraticTo(-half, bottom, -half, bottom - r)
+          .close();
+      } else {
+        p.addRect(-half, top, l.sheet, bottom - top);
+      }
+      return { geometry: extrude(p, { depth: SHEET_DEPTH }), color: sheetShade(row) };
+    });
+    return createShape(merge(parts), { shine: 0.25 });
+  });
+
+/** A thin raised lip round the sheet's edge, catching the light. */
+const lipMesh = (l: Layout) =>
+  cached(`pf-lip:${l.sheet.toFixed(1)}`, () => {
+    const s = l.sheet;
+    const r = Math.min(CORNER, l.spacing / 2);
+    return createShape(
+      extrude(new Path().addRoundedRect(-s / 2, -s / 2, s, s, r).addRoundedRect(-s / 2 + 3, -s / 2 + 3, s - 6, s - 6, r - 3), {
+        depth: 2.5,
+        fillRule: 'evenodd'
+      }),
+      { shine: 0.6 }
+    );
+  });
+
+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 grey = (k: number): [number, number, number] => [k, k, k];
+
+// The bubbles sit 1.12 apart (SPACING) and are 1.04 across at the foot, leaving a strip of sheet between.
+/**
+ * A silicone bubble: a fillet curving up out of the sheet into near-upright walls and
+ * a full round cap, like a real pop-it. Shaded in (it tints the row's color): a faint crease where
+ * it meets the sheet, brightening up the walls to a pale top, which the light then picks out.
+ */
+const domeMesh = () =>
+  cached('pf-dome-v4', () => {
+    const profile: [number, number][] = [];
+    // The fillet into the sheet: a quarter circle from the foot to the wall
+    for (let i = 0; i <= 8; i++) {
+      const a = (i / 8) * (Math.PI / 2);
+      profile.push([0.52 - 0.06 * Math.sin(a), 0.06 * (1 - Math.cos(a))]);
+    }
+    profile.reverse();
+    // The cap: a squashed half circle on top of the walls
+    const cap: [number, number][] = [];
+    for (let i = 0; i <= 20; i++) {
+      const a = (i / 20) * (Math.PI / 2);
+      cap.push([Math.max(0.001, 0.46 * Math.cos(a)), 0.12 + 0.3 * Math.sin(a)]);
+    }
+    return createShape(
+      lathe([...cap.reverse(), ...profile], {
+        segments: 64,
+        color: ({ position: p }) => grey(0.88 + 0.12 * smooth(0, 0.2, p[1]) + 0.04 * smooth(0.3, 0.43, p[1]))
+      }),
+      { center: false, shine: 0.38 }
+    );
+  });
+
+/**
+ * A popped bubble, one unit across: a round lip and a deep soft dish inside it, its floor in shadow
+ * and its far wall catching the light. (Run from the centre outward, so the dish faces the camera.)
+ */
+const dimpleMesh = () =>
+  cached('pf-dimple-v4', () => {
+    const profile: [number, number][] = [];
+    // The dish: a bowl from the centre up to the lip's crest
+    for (let i = 0; i <= 14; i++) {
+      const t = i / 14;
+      profile.push([Math.max(0.001, 0.44 * t), 0.012 + 0.14 * t * t]);
+    }
+    // The lip: rolling over its crest and down into the sheet
+    for (let i = 1; i <= 10; i++) {
+      const a = (i / 10) * Math.PI;
+      profile.push([0.475 - 0.035 * Math.cos(a) + 0.025 * (i / 10), 0.152 + 0.04 * Math.sin(a) - 0.19 * smooth(0.5, 1, i / 10)]);
+    }
+    return createShape(
+      lathe(profile, {
+        segments: 64,
+        color: ({ position: p }) => grey(0.8 + 0.2 * smooth(0.02, 0.17, p[1]))
+      }),
+      { center: false, shine: 0.3 }
+    );
+  });
+
+// ── Spawning ──────────────────────────────────────────────────────────
+
+export type Scene = { backdrop: Entity; sheet: Entity; lip: Entity; domes: Entity[]; dimples: Entity[] };
+
+export function buildScene(world: World, l: Layout, theme: GameTheme, popped: readonly boolean[]): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
+  const sheet = world.spawn({ mesh: sheetMesh(l), position: [0, 0, -SHEET_DEPTH / 2], color: [1, 1, 1, 1], pickable: false });
+  const lip = world.spawn({ mesh: lipMesh(l), position: [0, 0, 1.25], color: [1, 1, 1, 0.45], pickable: false });
+  const domes: Entity[] = [];
+  const dimples: Entity[] = [];
+  for (let row = 0; row < GRID_SIZE; row++)
+    for (let col = 0; col < GRID_SIZE; col++) {
+      const [x, y] = bubbleCentre(l, row, col);
+      const up = !popped[row * GRID_SIZE + col];
+      domes.push(
+        world.spawn({ mesh: domeMesh(), position: [x, y, 0], rotation: STAND_UP, scale: up ? l.bubble : 0, color: domeColor(row), pickable: false })
+      );
+      dimples.push(
+        world.spawn({
+          mesh: dimpleMesh(),
+          position: [x, y, 0],
+          rotation: STAND_UP,
+          scale: up ? 0 : l.bubble,
+          color: dimpleColor(row),
+          pickable: false
+        })
+      );
+    }
+  return { backdrop, sheet, lip, domes, dimples };
+}
+
+export function removeScene(world: World, s: Scene) {
+  for (const e of [s.backdrop, s.sheet, s.lip, ...s.domes, ...s.dimples]) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+}
+
+// ── Motion ────────────────────────────────────────────────────────────
+
+/** Pop: the dome squashes flat under the finger and a dimple springs out in its place, with a few flecks. */
+export function pop(world: World, l: Layout, s: Scene, index: number) {
+  const b = l.bubble;
+  const row = Math.floor(index / GRID_SIZE);
+  const dome = s.domes[index]!;
+  const dimple = s.dimples[index]!;
+  world.stopAnimation(dome);
+  world.stopAnimation(dimple);
+  world.animate(dome, [{ scale: [b * 1.1, b * 0.18, b * 1.1], at: 0.75 }, { scale: 0 }], { duration: PRESS_TIME + 0.02, easing: 'easeIn' });
+  world.set(dimple, { scale: 0 });
+  world.animate(dimple, [{ scale: [b * 1.08, b * 1.4, b * 1.08], at: 0.55 }, { scale: b }], {
+    duration: FLIP_TIME,
+    delay: PRESS_TIME,
+    easing: 'easeOut'
+  });
+  const [x, y] = bubbleCentre(l, row, index % GRID_SIZE);
+  // The shared pop's burst (the bubble itself flips in rather than vanishing)
+  popBurst(world, { position: [x, y, b * 0.5], size: b, color: domeColor(row), glowZ: b * 0.05, count: 7 });
+}
+
+/** Every bubble back up (a new sheet). */
+export function restore(world: World, l: Layout, s: Scene) {
+  s.domes.forEach((d, i) => {
+    world.stopAnimation(d);
+    world.stopAnimation(s.dimples[i]!);
+  });
+  const updates = world.transforms;
+  s.domes.forEach((d, i) => {
+    updates.scale(d, l.bubble);
+    updates.scale(s.dimples[i]!, 0);
+  });
+  updates.flush();
+}
+
+/** Confetti over the sheet when every bubble's popped. */
+export function celebrate(world: World, l: Layout) {
+  effects.confetti(world, {
+    position: [0, 0, l.bubble],
+    count: 60,
+    size: l.bubble * 0.16,
+    speed: l.sheet * 1.4,
+    lifetime: 1.3,
+    gravity: -l.sheet * 2.4,
+    colors: ROW_COLORS.slice(0, 4).map((c) => toColor(c))
+  });
+}

package/src/games/reversi/Reversi.tsx

@@ -0,0 +1,94 @@
+// Reversi's screen: a flat board seen directly overhead, with raised 3D discs,
+// under Playtura's scoreboard, controls and modals. The play is in
+// ReversiGame.ts (the rules and the robot in ReversiRules.ts), what it draws in ReversiScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
+// repaints the backdrop, so the GPU view is never rebuilt. Discs drop and turn over in the engine's
+// Rust core; JS reads the finger and steps the clock (and the robot's think) once a frame.
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { scoreColumn, textColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { BOARD_BORDER_WIDTH, GAME_DURATION, getLayout, LIGHT } from './ReversiConstants';
+import { createGame, dispose, drag, type GameEvent, reset, setLayout, setTheme, start, tick } from './ReversiGame';
+
+const SOUNDS = GAME_SOUNDS.REVERSI;
+
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound?: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic?: HapticType }> = {
+  place: { sound: SOUNDS.PLACE, haptic: HapticType.MEDIUM },
+  robot: { sound: SOUNDS.PLACE, haptic: HapticType.LIGHT },
+  invalid: { sound: SOUNDS.INVALID, haptic: HapticType.LIGHT },
+  pass: { sound: SOUNDS.PASS },
+  win: { sound: SOUNDS.WIN, haptic: HapticType.SUCCESS },
+  lose: { sound: SOUNDS.LOSE, haptic: HapticType.ERROR }
+};
+
+export const Reversi = engineGame(GAME_IDS.REVERSI, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [discs, setDiscs] = useLiveState({ black: 2, white: 2 });
+  const [time, setTime] = useLiveState(GAME_DURATION);
+
+  // A win when you finish ahead, a loss otherwise (a tie or the clock too)
+  const { game, theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.REVERSI,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.size + BOARD_BORDER_WIDTH * 2;
+    },
+    drag,
+    outcome: (g) => (g.winner === 'black' ? 'win' : 'lose'),
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
+    onOver: (fx, _status, g) => {
+      if (g.timedOut) fx(SOUNDS.TIME_UP, HapticType.ERROR);
+    },
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onCounts = (black, white) => setDiscs({ black, white });
+      g.onTime = setTime;
+      g.onEvent = (event) => {
+        if (event === 'lose' && g.winner === null && !g.timedOut) fx(GAME_SOUNDS.DRAW, HapticType.MEDIUM);
+        else fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+      };
+    }
+  });
+
+  const { black, white, timedOut } = game;
+  const tie = game.winner === null && !timedOut;
+  const title = status === 'win' ? 'YOU WON!' : tie ? "IT'S A TIE!" : timedOut ? 'TIME UP!' : 'YOU LOST!';
+  const message =
+    status === 'win'
+      ? `You finished ${black}-${white}!`
+      : tie
+        ? `Even at ${black}-${white}!`
+        : timedOut
+          ? 'You ran out of time!'
+          : `The robot wins ${white}-${black}!`;
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), textColumn('YOU-AI', `${discs.black}-${discs.white}`), timerColumn(time, theme)]}
+      subtext="Outflank the robot!"
+      gameOver={gameOver({
+        title,
+        message,
+        scoreLabel: 'Score',
+        score,
+        buttonText: 'Play Again!'
+      })}
+    />
+  );
+});