@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/falling-sticks/FallingSticks.tsx

@@ -1,72 +0,0 @@
-// Falling Sticks' screen: a perspective meadow and pooled 3D batons, under Playtura's
-// scoreboard, controls and modals. The play is in FallingSticksGame.ts (the physics in
-// FallingSticksRules.ts), what it draws in FallingSticksScene.ts.
-//
-// One world serves the whole visit: Start, Stop and Play Again clear it in place, so the GPU view is
-// never rebuilt (a theme change rebuilds the scenery for day or night). JS steps the sticks (a few
-// numbers each) and the world once a frame; bounces, pops 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 { livesColumn, scoreColumn, timerColumn } from '../shared/EngineHud';
-import { backgroundFor, lightFor } from '../shared/EngineMeadow';
-import { useEngineGame } from '../shared/useEngineGame';
-import { useLiveState } from '../shared/useLiveState';
-import { getLayout, LIVES, TIME_LIMIT } from './FallingSticksConstants';
-import { createGame, dispose, drag, type GameEvent, reset, setLayout, setTheme, start, tick } from './FallingSticksGame';
-
-const SOUNDS = GAME_SOUNDS.FALLING_STICKS;
-
-/** Each event's sound and haptic, as the original version played them. */
-const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
-  catch: { sound: SOUNDS.CATCH, haptic: HapticType.LIGHT },
-  miss: { sound: SOUNDS.MISS, haptic: HapticType.WARNING },
-  win: { sound: SOUNDS.WIN, haptic: HapticType.SUCCESS },
-  lose: { sound: SOUNDS.GAME_OVER, haptic: HapticType.ERROR }
-};
-
-export const FallingSticks = engineGame(GAME_IDS.FALLING_STICKS, (props) => {
-  const [score, setScore] = useLiveState(0);
-  const [lives, setLives] = useLiveState(LIVES);
-  const [time, setTime] = useLiveState(TIME_LIMIT);
-
-  // Win when the two minutes are survived, lose when out of lives
-  const { theme, status, screen, gameOver } = useEngineGame(props, {
-    gameId: GAME_IDS.FALLING_STICKS,
-    create: createGame,
-    start,
-    reset,
-    dispose,
-    tick,
-    setTheme,
-    resize: (g, width, height, offset) => setLayout(g, getLayout(width, height, offset)),
-    resultsDelay: (result) => (result === 'win' ? 650 : 350),
-    drag,
-    sounds: SOUNDS,
-    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
-    wire: (g, fx) => {
-      g.onScore = setScore;
-      g.onLives = setLives;
-      g.onTime = setTime;
-      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
-    }
-  });
-
-  return (
-    <EngineGameScreen
-      {...screen}
-      light={lightFor(theme)}
-      background={backgroundFor(theme)}
-      columns={[scoreColumn(score), livesColumn(lives, LIVES), timerColumn(time, theme, 15)]}
-      subtext="Catch the falling sticks!"
-      gameOver={gameOver({
-        title: status === 'win' ? 'YOU WIN!' : 'GAME OVER',
-        message: status === 'win' ? 'You survived the 2 minutes!' : 'The sticks got away!',
-        scoreLabel: 'Final Score',
-        score,
-        buttonText: 'Play Again!'
-      })}
-    />
-  );
-});

package/src/games/falling-sticks/FallingSticksConstants.ts

@@ -1,62 +0,0 @@
-// Falling Sticks' tuning and layout. Catches retain their original 500-point value.
-import { getScoreBoardTop } from '../shared/EngineHud';
-import { gameWidthFor } from '../shared/EngineUtils';
-
-// ── Rules and tuning (per 60 Hz frame, in view points and degrees) ────
-
-export const TIME_LIMIT = 120; // seconds to survive
-export const LIVES = 3;
-export const POINTS_PER_CATCH = 500;
-export const MAX_STICKS = 18; // the pool: falling sticks plus those lying on the ground
-export const BASE_FALL_SPEED = 2.4;
-export const SPEED_INC_PER_POINT = 0.00006;
-export const MAX_FALL_SPEED = 3.8;
-export const BASE_SPAWN_MS = 1450;
-export const SPAWN_DEC_PER_POINT = 0.012;
-export const MIN_SPAWN_MS = 1000;
-export const SPIN_MAX = 2.2; // degrees per frame
-export const LAND_TILT_MAX = 6;
-/** The first stick of a run drops almost at once. */
-export const FIRST_SPAWN_TIMER = BASE_SPAWN_MS - 150;
-
-export const STEP_MS = 1000 / 60;
-export const MAX_PENDING_MS = 50; // a long frame catches up at most three
-
-// ── Colors ────────────────────────────────────────────────────────────
-
-export const STICK_COLORS = ['#E53935', '#1E88E5', '#43A047', '#FB8C00', '#8E24AA', '#00ACC1', '#F4511E', '#FDD835'] as const;
-// ── Layout (view points) ──────────────────────────────────────────────
-
-export type Layout = {
-  width: number;
-  height: number;
-  left: number;
-  right: number;
-  spawnY: number;
-  stickLen: number;
-  stickW: number;
-  hitRadius: number;
-  spawnMargin: number;
-  /** Sticks are missed once their centre passes this line (the grass). */
-  floorY: number;
-};
-
-/** Keep catches below the HUD, above the controls and inside the centered, capped play width. */
-export function getLayout(width: number, height: number, offset = 0): Layout {
-  const gameW = gameWidthFor(width);
-  const stickLen = Math.min(108, Math.round(gameW * 0.24));
-  const stickW = Math.max(12, Math.round(stickLen * 0.15));
-  const top = getScoreBoardTop(offset) + 82;
-  return {
-    width,
-    height,
-    left: (width - gameW) / 2,
-    right: (width + gameW) / 2,
-    spawnY: top + stickLen * 0.55,
-    stickLen,
-    stickW,
-    hitRadius: Math.max(18, stickW * 1.5),
-    spawnMargin: stickLen * 0.6,
-    floorY: height - 145
-  };
-}

package/src/games/falling-sticks/FallingSticksGame.ts

@@ -1,220 +0,0 @@
-// Falling Sticks' play, with no React: build a game with `createGame`, give it a layout, `start` it and
-// `tick` it every frame. Sticks drop from the top, spinning; tap or swipe through them before they hit
-// the grass. Each catch scores 500 (and the sticks fall faster and come quicker as the score climbs);
-// each one that lands costs a life. Survive the two minutes to win; losing all three lives loses.
-//
-// Rules run in fixed 60 Hz steps. Landing, catch effects and scenery animation run in the native core.
-import { type Camera, type DragEvent, World } from '@nayan-ui/engine';
-import type { GameTheme } from '../../services/ThemeService';
-import { cameraFor } from '../shared/EngineMeadow';
-import { type Layout, LIVES, MAX_PENDING_MS, POINTS_PER_CATCH, STEP_MS, TIME_LIMIT } from './FallingSticksConstants';
-import { catchAlong, FALLING, type Field, FREE, newField, step } from './FallingSticksRules';
-import {
-  buildScene,
-  celebrate,
-  drawTrail,
-  fadeTrail,
-  hideStick,
-  landStick,
-  placeStick,
-  popStick,
-  removeScene,
-  type Scene,
-  showStick
-} from './FallingSticksScene';
-
-export type Phase = 'ready' | 'playing' | 'over';
-/** catch: a stick caught (one per stick); miss: one landed (one per stick); win / lose: how it ended. */
-export type GameEvent = 'catch' | 'miss' | 'win' | 'lose';
-
-const WORLD_CAPACITY = 500; // cached meadow, pooled batons/trail, and short-lived native bursts
-const TRAIL_POINTS = 10;
-
-export function createGame(theme: GameTheme) {
-  const world = new World(WORLD_CAPACITY);
-  const camera: Camera = { eye: [0, 1, 0], target: [0, 1, -1], fov: 0.9 };
-  const g = {
-    world,
-    camera,
-    theme,
-    layout: null as Layout | null,
-    scene: null as Scene | null,
-    phase: 'ready' as Phase,
-    field: newField() as Field,
-    /** Score, lives and the countdown live in the engine (Rust), advanced by world.update. */
-    get lives() {
-      return world.scoreboard.lives;
-    },
-    get score() {
-      return world.scoreboard.score;
-    },
-    get timeLeft() {
-      return world.scoreboard.shownSeconds;
-    },
-    won: false,
-    /** The finger's recent points, for its trail (only while playing). */
-    trail: [] as number[],
-    pending: 0,
-    // UI hooks, set by the screen.
-    onPhase: (_p: Phase) => {},
-    onScore: (_s: number) => {},
-    onLives: (_l: number) => {},
-    onTime: (_t: number) => {},
-    onEvent: (_e: GameEvent) => {}
-  };
-  world.scoreboard.reset(LIVES, TIME_LIMIT);
-  world.scoreboard.handlers = {
-    onScore: (s) => g.onScore(s),
-    onSecond: (t) => g.onTime(t),
-    // Survive the two minutes to win
-    onTimeUp: () => g.phase === 'playing' && end(g, true)
-  };
-  return g;
-}
-export type Game = ReturnType<typeof createGame>;
-
-// ── Scene ─────────────────────────────────────────────────────────────
-
-/** Lays the field out for the view (first layout, header height, rotation), or the night sky for a dark theme: rebuilt where things stand. */
-export function setLayout(g: Game, l: Layout) {
-  const old = g.layout;
-  if (old) {
-    for (const st of g.field.sticks) {
-      if (st.state === FREE) continue;
-      st.x = l.left + ((st.x - old.left) / (old.right - old.left)) * (l.right - l.left);
-      st.y = l.spawnY + ((st.y - old.spawnY) / Math.max(1, old.floorY - old.spawnY)) * (l.floorY - l.spawnY);
-      st.restY = l.floorY - (old.floorY - st.restY) * (l.stickLen / old.stickLen);
-    }
-  }
-  if (g.scene) removeScene(g.world, g.scene);
-  g.layout = l;
-  g.scene = buildScene(g.world, l, g.theme);
-  Object.assign(g.camera, cameraFor(g.scene.view));
-  g.trail = [];
-  const s = g.scene;
-  g.field.sticks.forEach((st, i) => {
-    if (st.state === FREE) return;
-    showStick(g.world, l, s, i, st);
-    if (st.state !== FALLING) placeStick(g.world, l, s, i, { ...st, y: st.restY, rot: st.restRot }, false);
-  });
-}
-
-/** Change the scenery in place while preserving the current run and stick colors. */
-export function setTheme(g: Game, theme: GameTheme) {
-  if (g.theme === theme || g.world.isDisposed) return;
-  g.theme = theme;
-  if (g.layout) setLayout(g, g.layout);
-}
-
-// ── Run ───────────────────────────────────────────────────────────────
-
-function clear(g: Game) {
-  g.world.cancelTimers();
-  g.field = newField();
-  g.world.scoreboard.reset(LIVES, TIME_LIMIT);
-  g.won = false;
-  g.pending = 0;
-  g.trail = [];
-  if (g.scene) {
-    for (let i = 0; i < g.scene.sticks.length; i++) hideStick(g.world, g.scene, i);
-    drawTrail(g.world, g.layout!, g.scene, []);
-  }
-  g.onScore(0);
-  g.onLives(LIVES);
-  g.onTime(TIME_LIMIT);
-}
-
-export function start(g: Game) {
-  if (g.phase !== 'ready') return;
-  clear(g);
-  g.world.scoreboard.startCountdown(TIME_LIMIT);
-  g.phase = 'playing';
-  g.onPhase('playing');
-}
-
-/** Back to an empty field, not started (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
-export function reset(g: Game) {
-  clear(g);
-  g.phase = 'ready';
-  g.onPhase('ready');
-}
-
-export function dispose(g: Game) {
-  g.world.dispose();
-}
-
-export function tick(g: Game, dt: number) {
-  if (g.world.isDisposed) return;
-  const elapsed = Math.max(0, Math.min(dt, MAX_PENDING_MS / 1000));
-  const { layout: l, scene: s } = g;
-  if (g.phase === 'playing' && l && s) {
-    // Fixed 60 Hz frames; a long frame catches up at most three
-    let pending = Math.min(g.pending + elapsed * 1000, MAX_PENDING_MS);
-    while (g.phase === 'playing' && pending + 1e-6 >= STEP_MS) {
-      pending -= STEP_MS;
-      frame(g, l, s);
-    }
-    g.pending = Math.max(0, pending);
-    if (g.phase === 'playing') {
-      const updates = g.world.transforms;
-      g.field.sticks.forEach((st, i) => st.state === FALLING && placeStick(g.world, l, s, i, st, true, updates));
-      updates.flush();
-    }
-  }
-  g.world.update(elapsed);
-}
-
-function frame(g: Game, l: Layout, s: Scene) {
-  const { landed, spawned } = step(g.field, l, g.lives);
-  for (const i of landed) landStick(g.world, l, s, i, g.field.sticks[i]!);
-  if (spawned >= 0) showStick(g.world, l, s, spawned, g.field.sticks[spawned]!);
-  if (!landed.length) return;
-  // Each stick that landed is a miss and a life, one by one, as the original game counted them
-  for (let k = 0; k < landed.length && g.phase === 'playing'; k++) {
-    g.onEvent('miss');
-    g.onLives(g.world.scoreboard.addLives(-1));
-    if (g.lives <= 0) end(g, false);
-  }
-}
-
-function end(g: Game, won: boolean) {
-  g.world.scoreboard.stop();
-  g.won = won;
-  g.phase = 'over';
-  if (g.layout && g.scene) {
-    g.trail = [];
-    fadeTrail(g.world, g.scene);
-    if (won) celebrate(g.world, g.layout, g.scene);
-  }
-  g.onEvent(won ? 'win' : 'lose');
-  g.onPhase('over');
-}
-
-// ── The finger ────────────────────────────────────────────────────────
-
-/** Down catches the sticks under the finger at once; moving catches every stick it passes over, leaving a trail. */
-export function drag(g: Game, { phase, x, y, cancelled }: DragEvent) {
-  const { layout: l, scene: s } = g;
-  if (!l || !s) return;
-  if (cancelled) {
-    g.trail = [];
-    fadeTrail(g.world, s);
-    return;
-  }
-  if (g.phase !== 'playing') return;
-  if (phase !== 'start' && g.trail.length < 2) return;
-  const fromX = phase === 'start' ? x : g.trail[g.trail.length - 2]!;
-  const fromY = phase === 'start' ? y : g.trail[g.trail.length - 1]!;
-  g.trail = phase === 'start' ? [x, y] : [...g.trail.slice(-(TRAIL_POINTS - 1) * 2), x, y];
-  drawTrail(g.world, l, s, g.trail);
-  const caught = catchAlong(g.field, l, fromX, fromY, x, y);
-  for (const i of caught) {
-    popStick(g.world, l, s, i, g.field.sticks[i]!);
-    g.world.scoreboard.add(POINTS_PER_CATCH);
-    g.onEvent('catch');
-  }
-  if (phase === 'end') {
-    g.trail = [];
-    fadeTrail(g.world, s);
-  }
-}

package/src/games/falling-sticks/FallingSticksRules.ts

@@ -1,145 +0,0 @@
-// Falling Sticks' physics and rules, with no React or engine: a fixed pool of sticks that spawn at the
-// top, fall and spin, land on the grass (each one a life) and are caught under the finger (500 each).
-// A gradual difficulty ramp and swept finger/rod collision run in fixed 60 Hz frames.
-import {
-  BASE_FALL_SPEED,
-  BASE_SPAWN_MS,
-  FIRST_SPAWN_TIMER,
-  LAND_TILT_MAX,
-  type Layout,
-  MAX_FALL_SPEED,
-  MAX_STICKS,
-  MIN_SPAWN_MS,
-  POINTS_PER_CATCH,
-  SPAWN_DEC_PER_POINT,
-  SPEED_INC_PER_POINT,
-  SPIN_MAX,
-  STEP_MS,
-  STICK_COLORS
-} from './FallingSticksConstants';
-
-export const FREE = 0;
-export const FALLING = 1;
-/** Lying on the ground: stays visible, so its slot isn't reused. */
-export const LANDED = 2;
-
-/** One pool slot, in view points (x right, y down) and degrees (clockwise). */
-export type Stick = {
-  state: number;
-  color: number;
-  x: number;
-  y: number;
-  speed: number;
-  rot: number;
-  rotSpeed: number;
-  restY: number;
-  restRot: number;
-};
-export type Field = { sticks: Stick[]; spawnTimer: number; score: number; nextColor: number };
-
-export const newField = (): Field => ({
-  sticks: Array.from({ length: MAX_STICKS }, () => ({ state: FREE, color: 0, x: 0, y: 0, speed: 0, rot: 0, rotSpeed: 0, restY: 0, restRot: 0 })),
-  spawnTimer: FIRST_SPAWN_TIMER,
-  score: 0,
-  nextColor: 0
-});
-
-/** A stick at the top, in the first free slot (none if the pool's full). Returns its slot. */
-function spawn(f: Field, l: Layout): number {
-  const slot = f.sticks.findIndex((s) => s.state === FREE);
-  if (slot < 0) return -1;
-  const s = f.sticks[slot]!;
-  s.state = FALLING;
-  s.color = f.nextColor;
-  f.nextColor = (f.nextColor + 1 + Math.floor(Math.random() * 3)) % STICK_COLORS.length;
-  s.x = l.left + l.spawnMargin + Math.random() * Math.max(0, l.right - l.left - l.spawnMargin * 2);
-  s.y = l.spawnY;
-  s.speed = Math.min((BASE_FALL_SPEED + f.score * SPEED_INC_PER_POINT) * (0.85 + Math.random() * 0.3), MAX_FALL_SPEED);
-  s.rot = Math.random() * 360;
-  s.rotSpeed = (Math.random() * 2 - 1) * SPIN_MAX;
-  return slot;
-}
-
-/** It hits the ground: where it comes to rest, toppled to the nearest flat with a little tilt. */
-function land(s: Stick, l: Layout) {
-  s.state = LANDED;
-  s.restRot = Math.round(s.rot / 180) * 180 + (Math.random() * 2 - 1) * LAND_TILT_MAX;
-  s.restY = l.floorY - l.stickW * 0.55 - Math.abs(Math.sin((s.restRot * Math.PI) / 180)) * l.stickLen * 0.5;
-}
-
-/**
- * One 60 Hz frame with `lives` left: sticks fall and spin, land (each a life), and maybe one spawns.
- * Returns the slots that landed and spawned, and the lives left.
- */
-export function step(f: Field, l: Layout, lives: number): { landed: number[]; spawned: number; lives: number } {
-  const landed: number[] = [];
-  f.sticks.forEach((s, i) => {
-    if (s.state !== FALLING) return;
-    s.y += s.speed;
-    s.rot += s.rotSpeed;
-    const bottom = Math.abs(Math.sin((s.rot * Math.PI) / 180)) * l.stickLen * 0.5 + l.stickW * 0.5;
-    if (s.y + bottom >= l.floorY) {
-      land(s, l);
-      landed.push(i);
-    }
-  });
-  lives = Math.max(0, lives - landed.length);
-  let spawned = -1;
-  // Spawns after the fall, so a new stick starts exactly at the top (and none once the last life's gone)
-  if (lives <= 0) return { landed, spawned, lives };
-  const spawnMs = Math.max(BASE_SPAWN_MS - f.score * SPAWN_DEC_PER_POINT, MIN_SPAWN_MS);
-  f.spawnTimer += STEP_MS;
-  if (f.spawnTimer >= spawnMs) {
-    f.spawnTimer -= spawnMs;
-    spawned = spawn(f, l);
-  }
-  return { landed, spawned, lives };
-}
-
-/** Squared distance from a point to a segment, including a stationary finger. */
-const pointDistance = (x: number, y: number, ax: number, ay: number, bx: number, by: number): number => {
-  const dx = bx - ax;
-  const dy = by - ay;
-  const length = dx * dx + dy * dy;
-  const t = length > 0 ? Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / length)) : 0;
-  return (x - ax - t * dx) ** 2 + (y - ay - t * dy) ** 2;
-};
-
-function segmentDistance(ax: number, ay: number, bx: number, by: number, cx: number, cy: number, dx: number, dy: number): number {
-  const cross = (ux: number, uy: number, vx: number, vy: number) => ux * vy - uy * vx;
-  const abC = cross(bx - ax, by - ay, cx - ax, cy - ay);
-  const abD = cross(bx - ax, by - ay, dx - ax, dy - ay);
-  const cdA = cross(dx - cx, dy - cy, ax - cx, ay - cy);
-  const cdB = cross(dx - cx, dy - cy, bx - cx, by - cy);
-  const overlap =
-    Math.max(ax, bx) >= Math.min(cx, dx) &&
-    Math.max(cx, dx) >= Math.min(ax, bx) &&
-    Math.max(ay, by) >= Math.min(cy, dy) &&
-    Math.max(cy, dy) >= Math.min(ay, by);
-  if (overlap && abC * abD <= 0 && cdA * cdB <= 0) return 0;
-  return Math.min(
-    pointDistance(ax, ay, cx, cy, dx, dy),
-    pointDistance(bx, by, cx, cy, dx, dy),
-    pointDistance(cx, cy, ax, ay, bx, by),
-    pointDistance(dx, dy, ax, ay, bx, by)
-  );
-}
-
-/** Catch along the entire swipe and the stick's rotated length, so fast swipes and tip taps count. */
-export function catchAlong(f: Field, l: Layout, fromX: number, fromY: number, x: number, y: number): number[] {
-  const caught: number[] = [];
-  const r2 = l.hitRadius * l.hitRadius;
-  f.sticks.forEach((s, i) => {
-    if (s.state !== FALLING) return;
-    const angle = (s.rot * Math.PI) / 180;
-    const dx = Math.cos(angle) * l.stickLen * 0.5;
-    const dy = Math.sin(angle) * l.stickLen * 0.5;
-    if (segmentDistance(fromX, fromY, x, y, s.x - dx, s.y - dy, s.x + dx, s.y + dy) > r2) return;
-    s.state = FREE;
-    f.score += POINTS_PER_CATCH;
-    caught.push(i);
-  });
-  return caught;
-}
-
-export const catchAt = (f: Field, l: Layout, x: number, y: number): number[] => catchAlong(f, l, x, y, x, y);