@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/fruit-merger/FruitMergerScene.ts

@@ -0,0 +1,498 @@
+import {
+  type Camera,
+  type Color,
+  effects,
+  type Entity,
+  extrude,
+  lathe,
+  merge,
+  type Model,
+  type MutableQuat,
+  Path,
+  quat,
+  tube,
+  type Vec3,
+  type World
+} from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { setBackdropTheme, spawnBackdrop } from '../shared/EngineBackdrop';
+import { type FruitKind, getFruits } from '../shared/EngineFruits';
+import { noise } from '../shared/EngineMeadow';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+// Everything Fruit Merger draws: a glass tank (a back pane, side walls and a floor with depth, themed as
+// the original glass), the dashed danger line that warms and pulses as the pile nears the top, the aimed
+// fruit with its dotted drop guide, and the fruits themselves: the shared 3D fruit models (and a pumpkin,
+// built here), rolling as they roll. Merges pop the new fruit in with a ring and a burst of its color.
+//
+// The play area's points map to the world one to one (x right, y up, z out of the glass); the camera
+// frames it as the original glass sat on the screen, looking from a little above.
+import { toColor } from '../shared/EngineUtils';
+import {
+  COLLISION_SCALE,
+  COLORS,
+  CORNER,
+  FRUIT_TYPES,
+  JAR_DEPTH,
+  type Layout,
+  OVERFLOW_Y,
+  PLAY_HEIGHT,
+  PLAY_WIDTH,
+  toWorld,
+  WALL
+} from './FruitMergerConstants';
+import type { Body } from './FruitMergerRules';
+
+const EYE_DISTANCE = 260;
+const BACKDROP_DEPTH = 220;
+const DASHES = 24;
+const DOTS = 12;
+const WHITE: Color = [1, 1, 1, 1];
+
+// ── The pumpkin (the shared fruits have no pumpkin) ───────────────────
+
+let pumpkin: { model: Model; center: Vec3 } | undefined;
+function pumpkinModel() {
+  return cacheGameAsset('fruit-merger/FruitMergerScene:pumpkinModel', () => pumpkinModelUncached());
+}
+
+function pumpkinModelUncached() {
+  if (pumpkin) return pumpkin;
+  // An oblate, ribbed round, dimpled at the top: the profile runs top to bottom
+  const profile: [number, number][] = Array.from({ length: 41 }, (_, i) => {
+    const a = (Math.PI * i) / 40;
+    const r = 0.5 * Math.sin(a);
+    const y = 0.4 * Math.cos(a) - 0.06 * Math.exp(-Math.pow(a / 0.45, 2)) + 0.04 * Math.exp(-Math.pow((Math.PI - a) / 0.45, 2));
+    return [Math.max(0.0005, r), y];
+  });
+  const groove = (u: number) => 1 - Math.pow(Math.abs(Math.sin(u * Math.PI * 8)), 0.4);
+  const body = lathe(profile, {
+    segments: 64,
+    displace: (u, v) => -0.045 * groove(u) * Math.sin(Math.PI * v),
+    color: ({ u, v }) => {
+      const g = groove(u);
+      const k = 1 - 0.35 * g - 0.12 * Math.pow(Math.abs(v - 0.5) * 2, 3);
+      return [0.98 * k, (0.52 - 0.08 * g) * k, 0.08 * k, 1];
+    }
+  });
+  const stem = tube(
+    [
+      [0, 0.3, 0],
+      [0.01, 0.4, 0],
+      [0.05, 0.48, 0],
+      [0.09, 0.5, 0]
+    ],
+    { radius: (t) => 0.05 * (1 - 0.45 * t), sides: 10, color: [0.36, 0.42, 0.16, 1] }
+  );
+  const whole = merge([{ geometry: body }, { geometry: stem }]);
+  pumpkin = { model: createShape(whole, { center: false, shine: 0.55 }), center: [0, 0.04, 0] };
+  return pumpkin;
+}
+
+// ── The lemon (round, to fill its circle like every fruit here) ──────
+
+let lemon: { model: Model; center: Vec3 } | undefined;
+function lemonModel() {
+  return cacheGameAsset('fruit-merger/FruitMergerScene:lemonModel', () => lemonModelUncached());
+}
+
+function lemonModelUncached() {
+  if (lemon) return lemon;
+  // A plump round body with a small pointed tip at each end: the profile runs top to bottom
+  const profile: [number, number][] = Array.from({ length: 49 }, (_, i) => {
+    const a = (Math.PI * i) / 48;
+    const tip = 0.07 * (Math.exp(-Math.pow(a / 0.22, 2)) + Math.exp(-Math.pow((Math.PI - a) / 0.22, 2)));
+    return [Math.max(0.0005, 0.47 * Math.sin(a)), (0.45 + tip) * Math.cos(a)];
+  });
+  const body = lathe(profile, {
+    segments: 56,
+    // A dimpled peel
+    displace: (u, v) => 0.006 * noise(u * 40, v * 30) * Math.sin(Math.PI * v),
+    color: ({ v, position: p }) => {
+      const pole = Math.pow(Math.abs(v - 0.5) * 2, 3);
+      const k = 1 - 0.18 * pole + 0.05 * noise(p[0] * 30, p[1] * 30);
+      return [0.99 * k, (0.84 - 0.1 * pole) * k, 0.18 * k, 1];
+    }
+  });
+  const stem = tube(
+    [
+      [0, 0.5, 0],
+      [0.02, 0.56, 0]
+    ],
+    { radius: 0.025, sides: 8, color: [0.38, 0.45, 0.16, 1] }
+  );
+  const leaf = lathe(
+    [
+      [0.0005, 0],
+      [0.05, 0.03],
+      [0.06, 0.1],
+      [0.03, 0.17],
+      [0.0005, 0.2]
+    ],
+    { segments: 10, color: [0.25, 0.55, 0.2, 1] }
+  );
+  const whole = merge([
+    { geometry: body },
+    { geometry: stem },
+    { geometry: leaf, position: [0.03, 0.53, 0], rotation: quat.z(-1.1), scale: [1, 1, 0.35] }
+  ]);
+  lemon = { model: createShape(whole, { center: false, shine: 0.6 }), center: [0, 0.02, 0] };
+  return lemon;
+}
+
+/** A fruit's model and its centre, by chain position. */
+function fruitModel(typeId: number): { model: Model; center: Vec3 } {
+  const name = FRUIT_TYPES[typeId]!.name;
+  if (name === 'pumpkin') return pumpkinModel();
+  if (name === 'lemon') return lemonModel();
+  const f = getFruits()[name as FruitKind];
+  return { model: f.whole, center: f.center };
+}
+
+/** Smooth oval fruits drawn rounder here, to sit better in their circles. */
+const ROUNDER = new Set<string>(['papaya']);
+
+/** A fruit, `size` across: a root (moved and turned) with the model inside, centred and fitted. */
+function spawnFruit(world: World, typeId: number, position: Vec3, scale = 1): Entity {
+  const size = FRUIT_TYPES[typeId]!.size;
+  const { model, center } = fruitModel(typeId);
+  // Fitted so its average width across is just inside its collision circle: fruits touch where they collide,
+  // and a bulgy one's widest side doesn't push into its neighbour
+  const [w, h] = model.size;
+  const avg = (w + h) / 2;
+  const s = (size * COLLISION_SCALE * 0.97) / avg;
+  // A smooth oval fruit (the papaya) is rounded halfway toward its circle, its long side eased in
+  const round = ROUNDER.has(FRUIT_TYPES[typeId]!.name);
+  const k: Vec3 = round ? [(s * (w + avg)) / 2 / w, (s * (h + avg)) / 2 / h, s] : [s, s, s];
+  const root = world.spawn({ mesh: 'none', position, scale, pickable: false });
+  world.spawn({
+    mesh: model,
+    parent: root,
+    position: [-center[0] * k[0], -center[1] * k[1], -center[2] * k[2]],
+    scale: k,
+    color: WHITE,
+    pickable: false
+  });
+  return root;
+}
+
+// ── Spawning ──────────────────────────────────────────────────────────
+
+export type Scene = {
+  backdrop: Entity;
+  jar: Entity[];
+  dashes: Entity[];
+  dots: Entity[];
+  preview: Entity | null;
+  previewId: string | null;
+  previewX: number;
+  previewY: number;
+  /** The next fruit, small, just above the aimed one, and which fruit it shows. */
+  next: Entity | null;
+  nextType: number;
+  fruits: Map<string, Entity>;
+  danger: number;
+  hot: boolean;
+};
+
+const guideColor = (t: GameTheme): Color => (t.mode === 'light' ? toColor(t.TEXT) : [1, 1, 1, 1]);
+
+/** Frames the glass where the layout puts it, looking from a little above. */
+export function aim(camera: Camera, l: Layout) {
+  const c = Math.cos(l.tilt);
+  const sn = Math.sin(l.tilt);
+  // The play area's centre sits 2 points above the glass's (its floor is the glass's bottom border)
+  const ty = (l.centerY - 2 * l.k - l.height / 2) / (l.k * c);
+  camera.target = [-(l.centerX - l.width / 2) / l.k, ty, 0];
+  camera.eye = [camera.target[0], ty + sn * EYE_DISTANCE, c * EYE_DISTANCE];
+  camera.ortho = l.height / (2 * l.k);
+}
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('fruit-merger/FruitMergerScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+
+/**
+ * The glass's outline at `o` points outside the play area (x right, y down from its top-left), as path
+ * points (the path's y runs down; extruding flips it up, so a point lands where toWorld puts it): down
+ * the left wall, round the bottom-left corner, along the floor, round the other corner, up the right.
+ */
+function outline(o: number): [number, number][] {
+  const W = PLAY_WIDTH;
+  const H = PLAY_HEIGHT;
+  const R = CORNER + o;
+  const pts: [number, number][] = [[-o, 0]];
+  const arc = (cx: number, from: number, to: number) => {
+    for (let i = 0; i <= 12; i++) {
+      const a = from + ((to - from) * i) / 12;
+      pts.push([cx + Math.cos(a) * R, H - CORNER + Math.sin(a) * R]);
+    }
+  };
+  arc(CORNER, Math.PI, Math.PI / 2);
+  arc(W - CORNER, Math.PI / 2, 0);
+  pts.push([W + o, 0]);
+  return pts.map(([x, y]) => [x - W / 2, y - H / 2]);
+}
+/** A band of the glass from `inner` to `outer` points outside the play area, `depth` deep. */
+const bandMesh = (inner: number, outer: number, depth: number, shine: number) =>
+  cached(`fm-band:${inner}:${outer}:${depth.toFixed(1)}:${shine}`, () => {
+    const ring = [...outline(outer), ...outline(inner).reverse()];
+    return createShape(extrude(new Path().addPolygon(ring), { depth }), { center: false, shine });
+  });
+/** The back pane: the whole glass's shape, flat. */
+const backMesh = () =>
+  cached('fm-back', () => createShape(extrude(new Path().addPolygon(outline(WALL)), { depth: 1.5 }), { center: false, shine: 0.1 }));
+
+const CLASSIC_BACK: Color = [1, 1, 1, 0.3];
+const CLASSIC_WALL: Color = [1, 1, 1, 0.35];
+const backColor = (t: GameTheme): Color => (t.mode === 'classic' ? CLASSIC_BACK : toColor(t.BOARD.SURFACE));
+const wallColor = (t: GameTheme): Color => (t.mode === 'classic' ? CLASSIC_WALL : toColor(t.BOARD.BORDER));
+
+/**
+ * The tank, in the theme's colors: its body (rounded bottom corners, a back pane of the same shape) all
+ * in the board's color, and its border a single thin line traced round its inside edge at the front.
+ */
+function spawnJar(world: World, theme: GameTheme): Entity[] {
+  const front = JAR_DEPTH / 2;
+  const back = backColor(theme);
+  const line = wallColor(theme);
+  return [
+    world.spawn({ mesh: backMesh(), position: [0, 0, -front - 1], color: back, pickable: false }),
+    world.spawn({ mesh: bandMesh(0, WALL, JAR_DEPTH, 0), position: [0, 0, 0], color: back, pickable: false }),
+    world.spawn({ mesh: bandMesh(0, 1.6, 0.6, 0), position: [0, 0, front + 0.3], color: line, pickable: false })
+  ];
+}
+
+export function buildScene(world: World, l: Layout, theme: GameTheme): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeBackdrop(world, backdrop, l);
+  const dashW = (PLAY_WIDTH - 8) / (DASHES * 1.75);
+  const dashes = Array.from({ length: DASHES }, (_, i) =>
+    world.spawn({
+      mesh: 'cube',
+      position: toWorld(4 + dashW / 2 + i * dashW * 1.75, OVERFLOW_Y, -JAR_DEPTH / 2 + 1.2),
+      scale: [dashW, 1.5, 0.6],
+      color: dangerColor(theme, 0),
+      pickable: false
+    })
+  );
+  const g = guideColor(theme);
+  const dots = Array.from({ length: DOTS }, (_, i) =>
+    world.spawn({ mesh: 'sphere', scale: 0, color: [g[0], g[1], g[2], Math.max(0.6 - i * 0.04, 0.15)], pickable: false })
+  );
+  return {
+    backdrop,
+    jar: spawnJar(world, theme),
+    dashes,
+    dots,
+    preview: null,
+    previewId: null,
+    previewX: NaN,
+    previewY: NaN,
+    next: null,
+    nextType: -1,
+    fruits: new Map(),
+    danger: 0,
+    hot: false
+  };
+}
+
+/** The backdrop drawn from the view's top-left, behind the glass, filling the view. */
+function placeBackdrop(world: World, backdrop: Entity, l: Layout) {
+  const c = Math.cos(l.tilt);
+  const ty = (l.centerY - 2 * l.k - l.height / 2) / (l.k * c);
+  world.set(backdrop, {
+    position: [
+      -(l.centerX - l.width / 2) / l.k - l.width / (2 * l.k),
+      ty + (l.height / (2 * l.k) - BACKDROP_DEPTH * Math.sin(l.tilt)) / c,
+      -BACKDROP_DEPTH
+    ],
+    scale: [1 / l.k, 1 / (l.k * c), 1]
+  });
+}
+
+export function removeScene(world: World, s: Scene) {
+  for (const e of [s.backdrop, ...s.jar, ...s.dashes, ...s.dots, s.preview, s.next, ...s.fruits.values()]) if (e != null) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+  for (const e of s.jar) world.despawn(e);
+  s.jar = spawnJar(world, theme);
+  for (const e of s.dashes) world.set(e, { color: dangerColor(theme, s.danger) });
+  const g = guideColor(theme);
+  s.dots.forEach((e, i) => world.set(e, { color: [g[0], g[1], g[2], Math.max(0.6 - i * 0.04, 0.15)] }));
+}
+
+// ── The danger line ───────────────────────────────────────────────────
+
+function dangerColor(theme: GameTheme, d: number): Color {
+  const g = guideColor(theme);
+  const safe: Color = theme.mode === 'light' ? [g[0], g[1], g[2], 0.28] : toColor(COLORS.DANGER_SAFE);
+  const hot = toColor(COLORS.DANGER_HOT);
+  const mix = (i: number) => (safe[i] ?? 1) + ((hot[i] ?? 1) - (safe[i] ?? 1)) * d;
+  return [mix(0), mix(1), mix(2), mix(3)];
+}
+
+/** Warms the line toward red as the pile nears it (thicker as it does), pulsing once it's close. */
+export function setDanger(world: World, s: Scene, theme: GameTheme, d: number) {
+  if (d === s.danger) return;
+  s.danger = d;
+  const color = dangerColor(theme, d);
+  const hot = d > 0.35;
+  for (const e of s.dashes) {
+    world.stopAnimation(e);
+    world.set(e, { color, scale: [(PLAY_WIDTH - 8) / (DASHES * 1.75), 1.5 + d * 1.5, 0.6] });
+    if (hot)
+      world.animate(
+        e,
+        { color: [color[0], color[1], color[2], (color[3] ?? 1) * 0.35] },
+        { duration: 0.38, easing: 'easeInOut', repeat: 'forever', yoyo: true }
+      );
+  }
+  s.hot = hot;
+}
+
+// ── Fruits ────────────────────────────────────────────────────────────
+
+// Scratch for each fruit's roll (the batch copies it).
+const SPIN: MutableQuat = [0, 0, 0, 1];
+
+/** Keeps the fruit entities in step with the bodies: each where its body is, turned by its roll. */
+export function drawFruits(world: World, s: Scene, bodies: Body[]) {
+  const updates = world.transforms;
+  for (const b of bodies) {
+    let e = s.fruits.get(b.id);
+    if (e == null) {
+      e = spawnFruit(world, b.typeId, toWorld(b.x, b.y));
+      s.fruits.set(b.id, e);
+    }
+    quat.z(-b.angle, SPIN);
+    updates.transform(e, b.x - PLAY_WIDTH / 2, PLAY_HEIGHT / 2 - b.y, 0, SPIN[0], SPIN[1], SPIN[2], SPIN[3]);
+  }
+  updates.flush();
+}
+
+/** Two fruits merge: they shrink into the spot, the new one pops in there, with a ring and a burst. */
+export function mergeFx(world: World, s: Scene, a: Body, b: Body, made: Body) {
+  const at = toWorld(made.x, made.y);
+  for (const f of [a, b]) {
+    const e = s.fruits.get(f.id);
+    if (e == null) continue;
+    s.fruits.delete(f.id);
+    world.animate(e, { position: at, scale: 0.2 }, { duration: 0.12, easing: 'easeIn' }).then(() => {
+      if (world.has(e)) world.despawn(e);
+    });
+  }
+  const e = spawnFruit(world, made.typeId, at, 0.5);
+  world.animate(e, { scale: 1 }, { spring: 'bouncy' });
+  s.fruits.set(made.id, e);
+  const t = FRUIT_TYPES[made.typeId]!;
+  const c = toColor(t.color);
+  const ring = world.spawn({
+    mesh: 'torus',
+    position: [at[0], at[1], JAR_DEPTH / 2 - 2],
+    rotation: quat.x(Math.PI / 2),
+    scale: t.size * 0.6,
+    color: [c[0], c[1], c[2], 0.9],
+    pickable: false
+  });
+  world.animate(ring, { scale: t.size * 1.5, color: [c[0], c[1], c[2], 0] }, { duration: 0.42, easing: 'easeOut' }).then(() => {
+    if (world.has(ring)) world.despawn(ring);
+  });
+  effects.sparkle(world, {
+    position: [at[0], at[1], 10],
+    count: 18,
+    size: t.size * 0.08,
+    speed: t.size * 2.2,
+    lifetime: 0.5,
+    gravity: -t.size * 3,
+    colors: [c, [1, 1, 1, 1]],
+    flash: false
+  });
+}
+
+/** Clears every fruit (a new game). */
+export function clearFruits(world: World, s: Scene) {
+  for (const e of s.fruits.values()) world.despawn(e);
+  s.fruits.clear();
+}
+
+/** How big the next fruit's preview is, of its real size. */
+const NEXT_SCALE = 0.4;
+
+/**
+ * The aimed fruit at the top (growing in when it's new), with its drop guide down the glass and the next
+ * fruit, small, just above it; null hides them.
+ */
+export function drawPreview(world: World, s: Scene, fruit: { id: string; typeId: number; x: number; y: number } | null, nextType = -1) {
+  if (!fruit && s.previewId === null && s.nextType === -1) return;
+  if (fruit && s.previewId === fruit.id && s.previewX === fruit.x && s.previewY === fruit.y && s.nextType === nextType) return;
+  if (fruit) {
+    s.previewX = fruit.x;
+    s.previewY = fruit.y;
+  }
+  if (!fruit) {
+    if (s.preview != null) world.despawn(s.preview);
+    s.preview = null;
+    s.previewId = null;
+    if (s.next != null) world.despawn(s.next);
+    s.next = null;
+    s.nextType = -1;
+    for (const d of s.dots) world.set(d, { scale: 0 });
+    return;
+  }
+  if (s.previewId !== fruit.id) {
+    if (s.preview != null) world.despawn(s.preview);
+    s.preview = spawnFruit(world, fruit.typeId, toWorld(fruit.x, fruit.y, 4), 0.3);
+    world.animate(s.preview, { scale: 1 }, { spring: { stiffness: 240, damping: 11 } });
+    s.previewId = fruit.id;
+  }
+  world.set(s.preview!, { position: toWorld(fruit.x, fruit.y, 4) });
+  // The next fruit, small, above the aimed one
+  if (nextType !== s.nextType) {
+    if (s.next != null) world.despawn(s.next);
+    s.next = nextType >= 0 ? spawnFruit(world, nextType, [0, 0, 4], NEXT_SCALE * 0.4) : null;
+    if (s.next != null) world.animate(s.next, { scale: NEXT_SCALE }, { spring: { stiffness: 240, damping: 12 } });
+    s.nextType = nextType;
+  }
+  if (s.next != null) {
+    // Fixed at the top centre, above where the aimed fruit waits: it stays put while that one is dragged
+    const above = fruit.y - FRUIT_TYPES[fruit.typeId]!.size / 2 - (FRUIT_TYPES[nextType]!.size * NEXT_SCALE) / 2 - 4;
+    world.set(s.next, { position: toWorld(PLAY_WIDTH / 2, above, 4) });
+  }
+  const start = fruit.y + FRUIT_TYPES[fruit.typeId]!.size / 2 + 15;
+  const spacing = (PLAY_HEIGHT - 10 - start) / DOTS;
+  s.dots.forEach((d, i) => world.set(d, { position: toWorld(fruit.x, start + i * spacing, 2), scale: Math.max(4 - i * 0.2, 1.5) * 2 }));
+}
+
+/** The pumpkin: confetti over the glass. */
+export function celebrate(world: World) {
+  effects.confetti(world, {
+    position: toWorld(PLAY_WIDTH / 2, PLAY_HEIGHT * 0.35, 20),
+    count: 70,
+    size: 7,
+    speed: PLAY_WIDTH * 1.3,
+    lifetime: 1.4,
+    gravity: -PLAY_WIDTH * 2,
+    colors: ['#FFD700', '#FF9800', '#4CAF50', '#E91E63'].map((c) => toColor(c))
+  });
+}
+
+/** The pile gave out (overflow or time): a jolt. */
+export function jolt(camera: Camera) {
+  camera.shake = 6;
+}
+
+/** Reusable assets; the game loader advances one builder per frame. */
+export function* warmAssets(): Iterable<() => unknown> {
+  yield backMesh;
+  for (let type = 0; type < FRUIT_TYPES.length; type++) yield () => fruitModel(type);
+  yield () => bandMesh(0, WALL, JAR_DEPTH, 0);
+  yield () => bandMesh(0, 1.6, 0.6, 0);
+}

package/src/games/fruit-ninja/FruitNinja.tsx

@@ -0,0 +1,129 @@
+// Fruit Ninja's screen, on the Nayan engine: a 3D meadow seen through a perspective camera, with the
+// fruit, bombs and stars, their sliced halves and the blade trail flying in front of it, under
+// Playtura's scoreboard, controls and modals. The rules are in FruitNinjaGame.ts, the world in
+// FruitNinjaWorld.ts, what the game throws and slices in FruitNinjaScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
+// swaps day for night, so the GPU view is never rebuilt. Spins, halves, splashes and bursts move in the
+// engine's Rust core; JS throws, moves and cuts a handful of items and steps the world once a frame.
+import { useMemo } from 'react';
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { type Fruit, type FruitKind, getFruit, isFruitBuilt } from '../shared/EngineFruits';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { livesColumn, scoreColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { FIRST_FRUITS, FRUIT_BUILD_GAP, FRUIT_DETAIL, FRUIT_KINDS, getLayout, MAX_LIVES, TIME_LIMIT } from './FruitNinjaConstants';
+import { addFruit, createGame, dispose, reset, setLayout, setModels, setTheme, start, tick, touchEnd, touchMove, touchStart } from './FruitNinjaGame';
+import { backgroundFor, lightFor } from './FruitNinjaWorld';
+
+const SFX = GAME_SOUNDS.FRUIT_NINJA;
+
+export const FruitNinja = engineGame(GAME_IDS.FRUIT_NINJA, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [lives, setLives] = useLiveState(MAX_LIVES);
+  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
+
+  // Lasting out the timer is a win, losing every life a loss
+  const { theme, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.FRUIT_NINJA,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.fieldWidth;
+    },
+    // Swipe to slice; a tap cuts where it lands
+    drag: (g, { phase, x, y }) => {
+      if (phase === 'start') touchStart(g, x, y);
+      else if (phase === 'move') touchMove(g, x, y);
+      else touchEnd(g);
+    },
+    tap: (g, x, y) => {
+      touchStart(g, x, y);
+      touchEnd(g);
+    },
+    sounds: SFX,
+    onStart: (fx) => fx(SFX.START),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onLives = setLives;
+      g.onTime = setTimeLeft;
+      g.onTouch = () => fx(null, HapticType.LIGHT);
+      g.onSlice = () => fx(SFX.SLICE, HapticType.LIGHT);
+      g.onBomb = () => fx(SFX.BOMB, HapticType.HEAVY);
+      g.onWin = () => fx(GAME_SOUNDS.WELL_DONE);
+      g.onLose = () => fx(SFX.GAME_OVER);
+      // The fruit models are built once per app (cached by EngineFruits), after the screen has opened, at
+      // the light detail their size needs: one mesh per frame (a whole fruit, then its halves), and each
+      // fruit thrown only once both are built, so a build never lands inside a throw or a cut. The first
+      // few come back to back; the rest are spaced out so the frames between them stay smooth.
+      const fruits = {} as Record<FruitKind, Fruit>;
+      // Reopening the game uses every ready model immediately, rather than waiting
+      // through another sequence of frames and build-gap timers for cached fruit.
+      for (const kind of FRUIT_KINDS) {
+        if (!isFruitBuilt(kind, FRUIT_DETAIL, true)) continue;
+        fruits[kind] = getFruit(kind, FRUIT_DETAIL);
+        addFruit(g, kind);
+      }
+      if (g.kinds.length) setModels(g, fruits);
+      const pending = FRUIT_KINDS.filter((kind) => !isFruitBuilt(kind, FRUIT_DETAIL, true));
+      let next = 0;
+      let halves = pending.length > 0 && isFruitBuilt(pending[0]!, FRUIT_DETAIL);
+      let frame = 0;
+      let timer: ReturnType<typeof setTimeout> | undefined;
+      const build = () => {
+        if (g.world.isDisposed) return;
+        const kind = pending[next]!;
+        const fruit = getFruit(kind, FRUIT_DETAIL);
+        if (!halves) {
+          void fruit.whole;
+        } else {
+          void fruit.pieces;
+          fruits[kind] = fruit;
+          if (!g.models) setModels(g, fruits);
+          addFruit(g, kind);
+          next++;
+        }
+        halves = !halves;
+        if (next >= pending.length) return;
+        if (!halves) halves = isFruitBuilt(pending[next]!, FRUIT_DETAIL);
+        if (halves || next < FIRST_FRUITS) frame = requestAnimationFrame(build);
+        else timer = setTimeout(() => (frame = requestAnimationFrame(build)), FRUIT_BUILD_GAP);
+      };
+      if (pending.length) frame = requestAnimationFrame(build);
+      return () => {
+        cancelAnimationFrame(frame);
+        clearTimeout(timer);
+      };
+    }
+  });
+
+  // Sunlight by day, moonlight at night (the world's colors follow the theme too)
+  const light = useMemo(() => lightFor(theme), [theme]);
+  const background = useMemo(() => backgroundFor(theme), [theme]);
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={light}
+      background={background}
+      columns={[scoreColumn(score), livesColumn(lives, MAX_LIVES), timerColumn(timeLeft, theme)]}
+      subtext="Slice fruits to score!"
+      gameOver={gameOver({
+        title: 'GAME OVER',
+        message: 'You ran out of lives!',
+        scoreLabel: 'Final Score',
+        score,
+        buttonText: 'Slice Again!'
+      })}
+    />
+  );
+});