@nayan-ui/games 1.20.0 → 1.21.0

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

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

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

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