@nayan-ui/games 1.20.0 → 1.21.0

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

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

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

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

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

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

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