@nayan-ui/games 1.19.0 → 1.20.0

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

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

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

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

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