@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/fruit-merger/FruitMerger.tsx

@@ -0,0 +1,73 @@
+// Fruit Merger's screen, on the Nayan engine: the glass, the fruits and the drop guide are one 3D scene,
+// under Playtura's scoreboard (the score and the clock), controls and modals.
+// The play is in FruitMergerGame.ts (the physics in FruitMergerRules.ts), what it draws in
+// FruitMergerScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
+// repaints the glass, so the GPU view is never rebuilt. JS steps the pile (the original version's fixed 60 Hz
+// physics) and the world once a frame; pops, rings and bursts animate in the engine's Rust core.
+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 { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { GAME_TIME, getLayout, LIGHT } from './FruitMergerConstants';
+import { createGame, dispose, drag, finalScore, type GameEvent, type Outcome, reset, setLayout, setTheme, start, tick } from './FruitMergerGame';
+
+const SOUNDS = GAME_SOUNDS.FRUIT_MERGER;
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
+  drop: { sound: SOUNDS.DROP, haptic: HapticType.LIGHT },
+  merge: { sound: SOUNDS.MERGE, haptic: HapticType.MEDIUM },
+  win: { sound: SOUNDS.COMPLETE, haptic: HapticType.SUCCESS }
+};
+
+const MESSAGES: Record<Outcome, string> = { win: 'You reached the Pumpkin!', time: 'You ran out of time!', overflow: 'Fruits overflowed!' };
+
+export const FruitMerger = engineGame(GAME_IDS.FRUIT_MERGER, (props) => {
+  const [time, setTime] = useLiveState(GAME_TIME);
+  const [score, setScore] = useLiveState(0);
+
+  // A win (scored by its time) or a loss
+  const { game, theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.FRUIT_MERGER,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => setLayout(g, getLayout(width, height, offset)),
+    drag,
+    outcome: (g) => (g.outcome === 'win' ? 'win' : 'lose'),
+    reportScore: (g) => finalScore(g),
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
+    onOver: (fx, s) => {
+      if (s !== 'win') fx(SOUNDS.GAME_OVER, HapticType.HEAVY);
+    },
+    wire: (g, fx) => {
+      g.onTime = setTime;
+      g.onScore = setScore;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), timerColumn(time, theme, 0)]}
+      subtext="Merge fruits!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU WON!' : 'GAME OVER',
+        message: MESSAGES[game.outcome ?? 'overflow'],
+        scoreLabel: 'Score',
+        score: finalScore(game),
+        buttonText: 'Merge Again!'
+      })}
+    />
+  );
+});

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

@@ -0,0 +1,102 @@
+import { getGameDimensions } from '../../services/UtilsService';
+// Fruit Merger's rules, tuning, colors and layout. The fruit chain, sizes and physics constants are the
+// original version's (games/fruit-merger), scaled by the same game width, so the pile behaves the same.
+import { getScoreBoardTop } from '../shared/EngineHud';
+import { frontLight } from '../shared/EngineUtils';
+
+const { width: GAME_WIDTH } = getGameDimensions();
+const SCALE = GAME_WIDTH / 360; // relative to the 360-point design width, as the original game
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+/**
+ * The merge chain, in order of real size (round fruits that stack and roll): two of a kind make the
+ * next, up to the pumpkin (the win). Sizes and scores step up evenly, as the original chain did.
+ */
+export const FRUIT_TYPES = [
+  { id: 0, name: 'strawberry', size: Math.round(40 * SCALE), color: '#FFCDD2', score: 10 },
+  { id: 1, name: 'kiwi', size: Math.round(52 * SCALE), color: '#DCEDC8', score: 20 },
+  { id: 2, name: 'lemon', size: Math.round(64 * SCALE), color: '#FFF9C4', score: 40 },
+  { id: 3, name: 'peach', size: Math.round(76 * SCALE), color: '#FFE4E1', score: 80 },
+  { id: 4, name: 'orange', size: Math.round(88 * SCALE), color: '#FFE0B2', score: 160 },
+  { id: 5, name: 'apple', size: Math.round(100 * SCALE), color: '#FFCDD2', score: 320 },
+  { id: 6, name: 'pomegranate', size: Math.round(112 * SCALE), color: '#F8BBD0', score: 640 },
+  { id: 7, name: 'papaya', size: Math.round(124 * SCALE), color: '#FFE0B2', score: 1280 },
+  { id: 8, name: 'watermelon', size: Math.round(136 * SCALE), color: '#C8E6C9', score: 2560 },
+  { id: 9, name: 'pumpkin', size: Math.round(148 * SCALE), color: '#FFCC80', score: 5120 }
+] as const;
+export type FruitName = (typeof FRUIT_TYPES)[number]['name'];
+export const LAST_TYPE = FRUIT_TYPES.length - 1;
+
+export const GAME_TIME = 900; // 15 minutes
+/** A win scores by its time against two minutes, as the original game did. */
+export const EXPECTED_TIME = 120;
+export const BASE_SCORE = 100;
+export const MAX_DROP_TYPE = 4; // the first four fruits are dropped
+
+// ── Physics (per 60 Hz step, in play-area points) ─────────────────────
+
+export const CONTAINER_WIDTH = GAME_WIDTH;
+export const CONTAINER_HEIGHT = Math.round(480 * SCALE);
+export const PLAY_WIDTH = GAME_WIDTH - 8; // inside the side walls
+export const PLAY_HEIGHT = CONTAINER_HEIGHT - 4; // above the floor
+export const GRAVITY = 0.5 * SCALE;
+export const BOUNCE = 0.3;
+export const FRICTION = 0.99;
+export const MERGE_DISTANCE = Math.round(10 * SCALE);
+export const COLLISION_SCALE = 0.96; // fruits fill nearly their whole circle: they touch where they look to
+/** Passes over the fruit pairs each step, so a pile settles without fruits sinking into each other. */
+export const SOLVER_PASSES = 24;
+/** Overflow: a settled fruit's top above 5% of the height, for a second's worth of steps, loses. */
+export const OVERFLOW_Y = PLAY_HEIGHT * 0.05;
+export const OVERFLOW_STEPS = 60;
+/** The danger line warms from here up to the overflow line. */
+export const DANGER_START_Y = PLAY_HEIGHT * 0.28;
+export const DANGER_SETTLE_MS = 1000;
+export const SPAWN_DELAY_MS = 300; // after a drop, the next fruit
+export const STEP_MS = 1000 / 60;
+export const STEP_TOLERANCE_MS = 2;
+export const MAX_PENDING_MS = 50;
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** The camera looks straight at the tank: only its front shows, so its outline reads as single clean lines. */
+export const TILT = 0;
+/** Lit from the upper left, in front. */
+export const LIGHT = frontLight([-0.4, 0.55, 1], 0.5);
+/** The glass is as deep as the biggest fruit. */
+export const JAR_DEPTH = FRUIT_TYPES[9].size + 12;
+export const WALL = 4; // the glass's walls and floor, as the original borders
+/** The glass's bottom corners are rounded this much (inside), and the fruits roll round them. */
+export const CORNER = Math.round(44 * SCALE);
+
+export const COLORS = {
+  DANGER_SAFE: 'rgba(255, 255, 255, 0.28)',
+  DANGER_HOT: 'rgba(255, 77, 77, 0.95)'
+} as const;
+
+// ── Layout (view points) ──────────────────────────────────────────────
+
+const SCOREBOARD_HEIGHT = 82;
+const CONTROLS_HEIGHT = 110;
+
+/**
+ * Where the glass sits: centred below the header as the original glass was, or, on a screen too short for
+ * it, scaled down (by `k`, view points per play-area point) to fit between the scoreboard and controls.
+ */
+export type Layout = { width: number; height: number; k: number; centerX: number; centerY: number; tilt: number };
+
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const top = getScoreBoardTop(offset) + SCOREBOARD_HEIGHT;
+  const room = height - top - CONTROLS_HEIGHT;
+  const fitsWidth = Math.min(1, width / CONTAINER_WIDTH);
+  if (room >= CONTAINER_HEIGHT * fitsWidth)
+    return { width, height, k: fitsWidth, centerX: width / 2, centerY: offset + (height - offset) / 2, tilt: TILT };
+  const k = Math.max(0.4, room / CONTAINER_HEIGHT);
+  return { width, height, k, centerX: width / 2, centerY: top + room / 2, tilt: TILT };
+}
+
+/** A play-area point (x right, y down from the top-left, z out of the glass) in the world. */
+export const toWorld = (x: number, y: number, z = 0): [number, number, number] => [x - PLAY_WIDTH / 2, PLAY_HEIGHT / 2 - y, z];
+/** The play-area x under a view x. */
+export const playX = (l: Layout, sx: number) => (sx - l.centerX) / l.k + PLAY_WIDTH / 2;

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

@@ -0,0 +1,285 @@
+// Fruit Merger's play, with no React: build a game with `createGame`, give it a layout, `start` it and
+// `tick` it every frame. Drag to aim the fruit at the top, let go (or tap) to drop it; two of a kind
+// that touch merge into the next fruit up the chain. Make the pumpkin inside fifteen minutes to win; the
+// pile staying over the top line, or the clock running out, loses.
+//
+// The physics is the original version's (FruitMergerRules.ts), stepped at the same fixed 60 Hz on the
+// game's own clock; the rest is its store: the same drops, previews, next fruit and timer.
+import { type Camera, type DragEvent, World } from '@nayan-ui/engine';
+import { calculateTimeBasedScore } from '../../services/ScoringService';
+import type { GameTheme } from '../../services/ThemeService';
+import {
+  BASE_SCORE,
+  EXPECTED_TIME,
+  FRUIT_TYPES,
+  GAME_TIME,
+  type Layout,
+  MAX_DROP_TYPE,
+  MAX_PENDING_MS,
+  PLAY_WIDTH,
+  SPAWN_DELAY_MS,
+  STEP_MS,
+  STEP_TOLERANCE_MS
+} from './FruitMergerConstants';
+import { type Body, makeBody, radiusOf, step, type StepState } from './FruitMergerRules';
+import {
+  aim,
+  buildScene,
+  celebrate,
+  clearFruits,
+  drawFruits,
+  drawPreview,
+  jolt,
+  mergeFx,
+  removeScene,
+  type Scene,
+  setDanger,
+  setSceneTheme
+} from './FruitMergerScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+/** drop: a fruit let go; merge: two became one; win: the pumpkin (its own sound, before the result's). */
+export type GameEvent = 'drop' | 'merge' | 'win';
+/** How a game ended. */
+export type Outcome = 'win' | 'overflow' | 'time';
+
+const WORLD_CAPACITY = 500; // the glass, the guide, up to a few dozen fruits, and the bursts
+
+type Aimed = { id: string; typeId: number; x: number; y: number };
+const randomType = () => Math.floor(Math.random() * MAX_DROP_TYPE);
+/** A fresh fruit id (the original store drew one random number for each, so the random draws line up). */
+const newId = (clock: number) => `fruit-${Math.round(clock)}-${Math.random()}`;
+const aimedFruit = (typeId: number, clock: number): Aimed => ({ id: newId(clock), typeId, x: PLAY_WIDTH / 2, y: radiusOf(typeId) + 10 });
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, 0, 260], 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,
+    bodies: [] as Body[],
+    current: null as Aimed | null,
+    nextType: 0,
+    bestType: -1,
+    /** Seconds left: the countdown lives in the engine (Rust), advanced by world.update. */
+    get time() {
+      return world.scoreboard.shownSeconds;
+    },
+    /** Points from merges (each worth the fruit it makes, so higher fruits score far more): in the engine's scoreboard. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    outcome: null as Outcome | null,
+    /** The physics' carried state, and the step clock. */
+    st: { overflowSteps: 0, danger: 0, merges: 0, generation: 0 } as StepState,
+    pending: 0,
+    spawnAt: 0,
+    /** Where the drag started the aim from. */
+    dragFrom: PLAY_WIDTH / 2,
+    clock: 0,
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onTime: (_t: number) => {},
+    onScore: (_s: number) => {},
+    onNext: (_type: number) => {},
+    onBest: (_type: number) => {},
+    onEvent: (_e: GameEvent) => {}
+  };
+  world.scoreboard.handlers = {
+    onSecond: (t) => g.onTime(t),
+    onTimeUp: () => g.phase === 'playing' && end(g, 'time')
+  };
+  initialize(g);
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+const nowMs = (g: Game) => g.clock * 1000;
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Lays the glass out for the view (first layout, header height, rotation): rebuilt where things stand. */
+export function setLayout(g: Game, l: Layout) {
+  if (g.scene) removeScene(g.world, g.scene);
+  g.layout = l;
+  aim(g.camera, l);
+  g.scene = buildScene(g.world, l, g.theme);
+  setDanger(g.world, g.scene, g.theme, g.st.danger);
+  draw(g);
+}
+
+export function setTheme(g: Game, theme: GameTheme) {
+  g.theme = theme;
+  if (g.scene) setSceneTheme(g.world, g.scene, theme);
+}
+
+function draw(g: Game) {
+  const s = g.scene;
+  if (!s) return;
+  drawFruits(g.world, s, g.bodies);
+  drawPreview(g.world, s, g.phase === 'over' ? null : g.current, g.nextType);
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+/** A fresh glass with a fruit waiting to be aimed (the start, Stop and Play Again). */
+function initialize(g: Game) {
+  g.st.generation += 1;
+  g.bodies = [];
+  g.pending = 0;
+  g.spawnAt = 0;
+  g.st.overflowSteps = 0;
+  g.bestType = -1;
+  const type = randomType();
+  g.current = aimedFruit(type, nowMs(g));
+  g.nextType = randomType();
+  g.world.scoreboard.reset(0, GAME_TIME);
+  g.outcome = null;
+  g.phase = 'ready';
+  if (g.scene) clearFruits(g.world, g.scene);
+  draw(g);
+  g.onTime(GAME_TIME);
+  g.onScore(0);
+  g.onNext(g.nextType);
+  g.onBest(-1);
+}
+
+/** Starts on the glass already shown (keeping the waiting fruit). */
+export function start(g: Game) {
+  if (g.phase !== 'ready') return;
+  g.st.generation += 1;
+  g.bodies = [];
+  g.pending = 0;
+  g.spawnAt = 0;
+  g.st.overflowSteps = 0;
+  g.st.danger = 0;
+  g.bestType = -1;
+  g.phase = 'playing';
+  g.world.scoreboard.reset();
+  g.world.scoreboard.startCountdown(GAME_TIME);
+  g.onScore(0);
+  if (g.scene) {
+    clearFruits(g.world, g.scene);
+    setDanger(g.world, g.scene, g.theme, 0);
+  }
+  if (!g.current) spawnAimed(g);
+  draw(g);
+  g.onTime(GAME_TIME);
+  g.onBest(-1);
+  g.onPhase('playing');
+}
+
+/** Stop and Play Again: a fresh glass, not started. */
+export function reset(g: Game) {
+  initialize(g);
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.dispose();
+}
+
+/** The next fruit comes up to be aimed, and the one after it is picked (and shown as next). */
+function spawnAimed(g: Game) {
+  g.current = aimedFruit(g.nextType, nowMs(g));
+  g.nextType = randomType();
+  g.onNext(g.nextType);
+}
+
+function end(g: Game, outcome: Outcome) {
+  g.world.scoreboard.stop();
+  g.outcome = outcome;
+  g.phase = 'over';
+  if (outcome === 'win') celebrate(g.world);
+  else jolt(g.camera);
+  draw(g);
+  g.onPhase('over');
+}
+
+/** The final score: the merges' points, plus (for a win) a bonus by its time against two minutes. */
+export const finalScore = (g: Game) => g.score + (g.outcome === 'win' ? calculateTimeBasedScore(GAME_TIME - g.time, EXPECTED_TIME, BASE_SCORE) : 0);
+
+export function tick(g: Game, dt: number) {
+  if (g.world.isDisposed) return;
+  g.clock += Math.min(dt, 0.25);
+  if (g.phase === 'playing') physics(g, dt * 1000);
+  draw(g);
+  g.world.update(dt);
+}
+
+/** This frame's fixed 60 Hz steps (none while the glass is empty), and what they did. */
+function physics(g: Game, frameMs: number) {
+  let pending = Math.min(g.pending + frameMs, MAX_PENDING_MS);
+  if (pending < STEP_MS - STEP_TOLERANCE_MS) {
+    g.pending = pending;
+    return;
+  }
+  const now = nowMs(g);
+  const out: { outcome: 'win' | 'lose' | null } = { outcome: null };
+  let spawn = false;
+  while (pending >= STEP_MS - STEP_TOLERANCE_MS) {
+    pending -= STEP_MS;
+    if (g.bodies.length === 0) continue;
+    const m = step(g.bodies, now, g.st, out);
+    if (m) {
+      if (g.scene) mergeFx(g.world, g.scene, m.a, m.b, m.made);
+      g.onScore(g.world.scoreboard.add(FRUIT_TYPES[m.made.typeId]!.score));
+      if (m.made.typeId > g.bestType) {
+        g.bestType = m.made.typeId;
+        g.onBest(g.bestType);
+      }
+      g.onEvent('merge');
+    }
+    if (out.outcome) break;
+    if (g.spawnAt > 0 && now >= g.spawnAt) {
+      g.spawnAt = 0;
+      spawn = true;
+    }
+  }
+  g.pending = pending;
+  if (g.scene) setDanger(g.world, g.scene, g.theme, g.st.danger);
+  if (out.outcome === 'win') {
+    g.onEvent('win');
+    end(g, 'win');
+    return;
+  }
+  if (out.outcome === 'lose') {
+    end(g, 'overflow');
+    return;
+  }
+  if (spawn && !g.current) spawnAimed(g);
+}
+
+// ── The finger ────────────────────────────────────────────────────────
+
+/** Drags the aimed fruit by how far the finger moves (kept inside the glass); lifting drops it. */
+export function drag(g: Game, { phase, dx, cancelled }: DragEvent) {
+  const l = g.layout;
+  const c = g.current;
+  if (!l || !c) return;
+  if (phase === 'start') {
+    g.dragFrom = c.x;
+    return;
+  }
+  const r = radiusOf(c.typeId);
+  c.x = Math.max(r, Math.min(PLAY_WIDTH - r, g.dragFrom + dx / l.k));
+  if (phase === 'end' && !cancelled) drop(g);
+}
+
+/** Lets the aimed fruit go: it joins the glass, and the next one is aimed a moment later. */
+export function drop(g: Game) {
+  const c = g.current;
+  if (g.phase !== 'playing' || !c) return;
+  const born = nowMs(g);
+  g.bodies.push(makeBody(c.id, c.typeId, c.x, c.y, 0, born));
+  if (c.typeId > g.bestType) {
+    g.bestType = c.typeId;
+    g.onBest(g.bestType);
+  }
+  g.current = null;
+  g.spawnAt = born + SPAWN_DELAY_MS;
+  g.onEvent('drop');
+}