@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/bubble-shooter/BubbleShooterConstants.ts

@@ -1,103 +0,0 @@
-// Bubble Shooter's rules, timings, colors and layout. Rules, scoring, physics and layout match the original
-// version (games/bubble-shooter), so scores and feel carry over.
-import { isTablet } from '../../services/UtilsService';
-import { getSceneInputInsets } from '../shared/EngineHud';
-import { frontLight, gameWidthFor } from '../shared/EngineUtils';
-
-// ── Rules ─────────────────────────────────────────────────────────────
-
-export const ROW_COUNT = 5; // pyramid rows: 9 bubbles on top, one fewer each row down
-export const COLS_PER_ROW = 9;
-export const COLOR_COUNT = 4; // the first four of BUBBLE_COLORS
-export const MIN_MATCH = 3;
-export const POINTS_PER_BUBBLE = 200;
-export const TIME_LIMIT = 300; // seconds
-
-export const BUBBLE_COLORS = ['#FF3B3B', '#32CD32', '#FFD700', '#4DA6FF', '#BF5AF2'] as const;
-
-// ── Physics (points; tuned per 60 fps frame, as the original version) ────
-
-export const SHOT_SPEED = 20; // points per frame
-export const FRAME_TIME = 1 / 60;
-export const MAX_AIM_ANGLE = Math.PI * 0.4;
-export const TOP_BOUNDARY = 10; // the ceiling, from the board's top
-const BUBBLE_SPACING = 2;
-
-// ── Feel (seconds) ────────────────────────────────────────────────────
-
-export const SNAP_FROM = 0.55; // a landed bubble pops up from this much of its size
-export const POP_SPRING = { damping: 9, stiffness: 280 };
-export const INTRO_SPRING = { damping: 12, stiffness: 200 };
-export const INTRO_ROW_STAGGER = 0.055; // a fresh board fills from the top row down...
-export const INTRO_SWEEP = 0.0006; // ...sweeping out from the centre (seconds per point)
-export const LOAD_FROM = 0.4; // the shooter's bubble springs up from this much as it's loaded
-export const NEXT_DELAY = 0.08;
-export const BURST_TIME = 0.45; // a popped bubble's pop: swell, flash, settle, shrink away
-
-// Aim guide: dots from the shooter, brighter near it
-export const AIM_DOT_COUNT = 40;
-export const AIM_DOT_SPACING = 18;
-export const AIM_DOT_RADIUS_START = 3;
-export const AIM_DOT_RADIUS_END = 1.5;
-export const AIM_ALPHA_NEAR = 0.6;
-export const AIM_ALPHA_FAR = 0.3;
-
-// ── Look ──────────────────────────────────────────────────────────────
-
-// Lit from the top-left like the original sprites' highlight; flat surfaces keep their exact color.
-export const LIGHT = frontLight([-0.45, 0.6, 1], 0.45);
-export const BUBBLE_SHINE = 0.4; // same as Connect Em All's dots (the meshes are shared)
-
-export const CLASSIC_BOARD = 'rgba(255, 255, 255, 0.30)';
-export const CLASSIC_BORDER = 'rgba(255, 255, 255, 0.35)';
-export const CLASSIC_AIM = '#ffffff';
-export const CLASSIC_RADIUS = 16;
-export const THEMED_RADIUS = 8;
-
-// ── Layout (points; same arithmetic as the original version) ──────────────
-
-const GRID_HEIGHT = isTablet ? 650 : 500;
-
-export type Layout = {
-  /** The GameView's size. */
-  width: number;
-  height: number;
-  /** The board fits between the shared HUD and controls, independently of its full-width background. */
-  boardLeft: number;
-  boardTop: number;
-  boardWidth: number;
-  boardHeight: number;
-  radius: number;
-  /** From one bubble's centre to its neighbour's. */
-  diameter: number;
-  /** Where shots leave from and aim is measured. All positions are board points, from its top-left. */
-  shooterX: number;
-  shooterY: number;
-  /** Where a shot's centre stays between (it bounces off the side walls). */
-  minX: number;
-  maxX: number;
-};
-
-export function getLayout(width: number, height: number, offset: number): Layout {
-  const boardWidth = gameWidthFor(width);
-  const insets = getSceneInputInsets(offset);
-  const top = insets.top + 4;
-  const room = Math.max(1, height - top - insets.bottom - 10);
-  const boardLeft = (width - boardWidth) / 2;
-  const radius = Math.floor(boardWidth / COLS_PER_ROW / 2 - BUBBLE_SPACING);
-  const boardHeight = Math.min(GRID_HEIGHT, room);
-  return {
-    width,
-    height,
-    boardLeft,
-    boardTop: top + (room - boardHeight) / 2,
-    boardWidth,
-    boardHeight,
-    radius,
-    diameter: (radius + BUBBLE_SPACING) * 2,
-    shooterX: boardWidth / 2,
-    shooterY: boardHeight - 40,
-    minX: radius,
-    maxX: boardWidth - radius
-  };
-}

package/src/games/bubble-shooter/BubbleShooterGame.ts

@@ -1,459 +0,0 @@
-// Bubble Shooter's rules, with no React: build a run with `createGame`, give it a layout, `start` it
-// and `tick` it every frame. Aim from the shooter at the bottom and let go (or tap) to fire; the shot
-// bounces off the side walls and sticks where it touches a bubble or the ceiling. Three or more
-// touching bubbles of one color pop for 200 each. Clear the board to win; when time runs out it's
-// over. The shooter only ever loads colors still on the board. Positions are board points (from its
-// top-left), and the shot's physics and snapping are the original version's.
-import { type Camera, type Entity, World } from '@nayan-ui/engine';
-import type { GameTheme } from '../../services/ThemeService';
-import { introPlayed } from '../shared/EngineUtils';
-import {
-  AIM_DOT_COUNT,
-  AIM_DOT_RADIUS_END,
-  AIM_DOT_RADIUS_START,
-  AIM_DOT_SPACING,
-  COLOR_COUNT,
-  COLS_PER_ROW,
-  FRAME_TIME,
-  INTRO_ROW_STAGGER,
-  INTRO_SPRING,
-  INTRO_SWEEP,
-  type Layout,
-  LOAD_FROM,
-  MAX_AIM_ANGLE,
-  MIN_MATCH,
-  NEXT_DELAY,
-  POINTS_PER_BUBBLE,
-  POP_SPRING,
-  ROW_COUNT,
-  SHOT_SPEED,
-  SNAP_FROM,
-  TIME_LIMIT,
-  TOP_BOUNDARY
-} from './BubbleShooterConstants';
-import {
-  aimColor,
-  bubbleColor,
-  bubblePosition,
-  bubbleSize,
-  buildScenery,
-  placeAimDots,
-  popBubble,
-  removeScenery,
-  type Scenery,
-  setSceneryTheme,
-  spawnAimDots,
-  spawnBubble
-} from './BubbleShooterScene';
-
-export type Phase = 'ready' | 'playing' | 'over';
-
-type Bubble = { x: number; y: number; color: number; row: number; entity: Entity | null };
-type Shot = { x: number; y: number; vx: number; vy: number; color: number; entity: Entity };
-
-const WORLD_CAPACITY = 600; // bubbles, aim dots, shooter, scenery, bursts
-const NEXT_SCALE = 0.6;
-
-const pick = <T>(items: readonly T[]) => items[Math.floor(Math.random() * items.length)]!;
-const randomColor = () => Math.floor(Math.random() * COLOR_COUNT);
-
-/** The starting pyramid: 9 bubbles across the top, one fewer each row, each row nested into the gaps above. */
-function generateBoard(l: Layout): Bubble[] {
-  const d = l.diameter;
-  const startX = (l.boardWidth - COLS_PER_ROW * d) / 2 + l.radius;
-  const bubbles: Bubble[] = [];
-  for (let row = 0; row < ROW_COUNT; row++) {
-    for (let col = 0; col < COLS_PER_ROW - row; col++) {
-      bubbles.push({ x: startX + row * (d / 2) + col * d, y: row * d * 0.866 + l.radius + 5, color: randomColor(), row, entity: null });
-    }
-  }
-  return bubbles;
-}
-
-export function createGame(theme: GameTheme) {
-  const world = new World(WORLD_CAPACITY);
-  const camera: Camera = { eye: [0, 0, 400], target: [0, 0, 0], fov: 1, ortho: 1 };
-  const g = {
-    world,
-    camera,
-    theme,
-    layout: null as Layout | null,
-    scenery: null as Scenery | null,
-    phase: 'ready' as Phase,
-    /** Score and the countdown live in the engine (Rust), advanced by world.update. */
-    get score() {
-      return world.scoreboard.score;
-    },
-    get timeLeft() {
-      return world.scoreboard.shownSeconds;
-    },
-    won: false,
-    /** Built for the first layout (positions depend on the bubble size). */
-    bubbles: null as Bubble[] | null,
-    /** The shooter's loaded color and the one after it. */
-    current: 0,
-    next: 0,
-    currentEntity: null as Entity | null,
-    nextEntity: null as Entity | null,
-    aimDots: [] as Entity[],
-    /** Aim, radians from straight up (right is positive). */
-    angle: 0,
-    shot: null as Shot | null,
-    /** The next board to appear fills in. */
-    intro: true,
-    /** Game seconds the current intro has been playing (-1 until its board spawns). */
-    introAge: -1,
-    // UI hooks, set by the screen.
-    onPhase: (_p: Phase) => {},
-    onScore: (_s: number) => {},
-    onTime: (_t: number) => {},
-    onBubbles: (_n: number) => {},
-    onShoot: () => {},
-    onPop: () => {},
-    onWin: () => {},
-    onLose: () => {}
-  };
-  world.scoreboard.reset(0, TIME_LIMIT);
-  world.scoreboard.handlers = {
-    onSecond: (t) => g.onTime(t),
-    onTimeUp: () => g.phase === 'playing' && end(g, false)
-  };
-  return g;
-}
-export type Game = ReturnType<typeof createGame>;
-
-// ── Scene ─────────────────────────────────────────────────────────────
-
-/** Lays the scene out for the view (first layout, header height, rotation): rebuilt from the run's state. */
-export function setLayout(g: Game, l: Layout) {
-  const w = g.world;
-  const old = g.layout;
-  if (g.scenery) removeScenery(w, g.scenery);
-  for (const e of [...g.aimDots, g.currentEntity, g.nextEntity]) if (e != null) w.despawn(e);
-  cancelShot(g);
-  g.layout = l;
-  g.camera.ortho = l.height / 2;
-  g.scenery = buildScenery(w, l, g.theme);
-  g.aimDots = spawnAimDots(w);
-  if (!g.bubbles) {
-    newBoard(g);
-  } else {
-    // A new bubble size (rotation) scales the board's positions with it
-    const k = old ? l.diameter / old.diameter : 1;
-    for (const b of g.bubbles) {
-      if (b.entity != null) w.despawn(b.entity);
-      b.x *= k;
-      b.y *= k;
-    }
-    spawnBubbles(g);
-  }
-  spawnShooter(g);
-  drawAim(g);
-}
-
-/** A new theme: the background, board and aim dots are repainted; the run carries on. */
-export function setTheme(g: Game, theme: GameTheme) {
-  g.theme = theme;
-  if (!g.layout || !g.scenery || g.world.isDisposed) return;
-  setSceneryTheme(g.world, g.layout, g.scenery, theme);
-  drawAim(g);
-}
-
-/** Spawns every bubble; a new board fills in from the top row down, sweeping out from the centre. */
-function spawnBubbles(g: Game) {
-  const l = g.layout;
-  if (!l || !g.bubbles) return;
-  const intro = g.intro;
-  if (intro) g.introAge = 0;
-  for (const b of g.bubbles) {
-    b.entity = spawnBubble(g.world, l, b.color, b.x, b.y, intro ? 0 : 1);
-    if (intro) {
-      const delay = b.row * INTRO_ROW_STAGGER + Math.abs(b.x - l.shooterX) * INTRO_SWEEP;
-      g.world.animate(b.entity, { scale: bubbleSize(l) }, { spring: INTRO_SPRING, delay });
-    }
-  }
-}
-
-function spawnShooter(g: Game) {
-  const l = g.layout!;
-  const w = g.world;
-  g.currentEntity = spawnBubble(w, l, g.current, l.shooterX, l.shooterY + 20);
-  g.nextEntity = spawnBubble(w, l, g.next, l.shooterX + 50, l.shooterY + 20, NEXT_SCALE);
-}
-
-/** The shooter shows its (new) colors; `load` springs them up as they're loaded. */
-function showShooter(g: Game, load: boolean) {
-  const l = g.layout;
-  const w = g.world;
-  if (!l || g.currentEntity == null || g.nextEntity == null) return;
-  const size = bubbleSize(l);
-  w.set(g.currentEntity, { color: bubbleColor(g.current) });
-  w.set(g.nextEntity, { color: bubbleColor(g.next) });
-  if (!load) return;
-  w.set(g.currentEntity, { scale: size * LOAD_FROM });
-  w.animate(g.currentEntity, { scale: size }, { spring: POP_SPRING });
-  w.set(g.nextEntity, { scale: 0 });
-  w.animate(g.nextEntity, { scale: size * NEXT_SCALE }, { spring: POP_SPRING, delay: NEXT_DELAY });
-}
-
-/** Deals a fresh pyramid and loads the shooter from its colors. */
-function newBoard(g: Game) {
-  const l = g.layout;
-  if (!l) {
-    g.bubbles = null;
-    return;
-  }
-  if (g.bubbles) for (const b of g.bubbles) if (b.entity != null) g.world.despawn(b.entity);
-  g.bubbles = generateBoard(l);
-  const colors = boardColors(g);
-  g.current = pick(colors);
-  g.next = pick(colors);
-  g.intro = true;
-  spawnBubbles(g);
-  g.onBubbles(g.bubbles.length);
-}
-
-const boardColors = (g: Game) => [...new Set((g.bubbles ?? []).map((b) => b.color))];
-
-// ── Run ───────────────────────────────────────────────────────────────
-
-export function start(g: Game) {
-  if (g.phase !== 'ready') return;
-  if (g.layout && !g.bubbles?.length) {
-    newBoard(g);
-    showShooter(g, false);
-  }
-  g.phase = 'playing';
-  g.world.scoreboard.startCountdown(TIME_LIMIT);
-  g.onPhase('playing');
-}
-
-/** A new board and timer (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
-export function reset(g: Game) {
-  cancelShot(g);
-  newBoard(g);
-  showShooter(g, false);
-  g.angle = 0;
-  drawAim(g);
-  g.world.scoreboard.reset(0, TIME_LIMIT);
-  g.won = false;
-  g.phase = 'ready';
-  g.onScore(0);
-  g.onTime(TIME_LIMIT);
-  g.onPhase('ready');
-}
-
-export function dispose(g: Game) {
-  g.shot = null;
-  g.world.dispose();
-}
-
-function end(g: Game, won: boolean) {
-  g.world.scoreboard.stop();
-  cancelShot(g);
-  g.won = won;
-  g.phase = 'over';
-  g.angle = 0;
-  drawAim(g);
-  if (won) g.onWin();
-  else g.onLose();
-  g.onPhase('over');
-}
-
-export function tick(g: Game, dt: number) {
-  if (g.world.isDisposed) return;
-  introPlayed(g, dt);
-  // The shot's speed is per 60 fps frame; clamped so a resume can't fling it through the board
-  if (g.shot) stepShot(g, Math.min(dt, FRAME_TIME * 3) / FRAME_TIME);
-  g.world.update(dt);
-}
-
-// ── Aiming and firing ─────────────────────────────────────────────────
-
-/** Aims at a view point (a finger), clamped to ±72° from straight up. */
-export function aimAt(g: Game, x: number, y: number) {
-  const l = g.layout;
-  if (!l || g.phase !== 'playing') return;
-  const dx = x - l.boardLeft - l.shooterX;
-  const dy = y - l.boardTop - l.shooterY;
-  g.angle = Math.max(-MAX_AIM_ANGLE, Math.min(MAX_AIM_ANGLE, Math.atan2(dx, -dy)));
-  drawAim(g);
-}
-
-/** The dotted guide from the shooter along the aim: bounces off the walls, stops at the ceiling or a bubble. */
-function drawAim(g: Game) {
-  const l = g.layout;
-  if (!l) return;
-  const points: number[] = [];
-  if (!g.shot) {
-    const hitSq = (l.radius * 2) ** 2;
-    let x = l.shooterX;
-    let y = l.shooterY;
-    let angle = g.angle;
-    for (let i = 1; i <= AIM_DOT_COUNT; i++) {
-      let nx = x + Math.sin(angle) * AIM_DOT_SPACING;
-      const ny = y - Math.cos(angle) * AIM_DOT_SPACING;
-      if (nx < l.minX) {
-        nx = l.minX + (l.minX - nx);
-        angle = -angle;
-      } else if (nx > l.maxX) {
-        nx = l.maxX - (nx - l.maxX);
-        angle = -angle;
-      }
-      if (ny < TOP_BOUNDARY) break;
-      points.push(nx, ny, AIM_DOT_RADIUS_START - (i / AIM_DOT_COUNT) * (AIM_DOT_RADIUS_START - AIM_DOT_RADIUS_END));
-      if (g.bubbles?.some((b) => (nx - b.x) ** 2 + (ny - b.y) ** 2 < hitSq)) break;
-      x = nx;
-      y = ny;
-    }
-  }
-  placeAimDots(g.world, l, g.aimDots, points, aimColor(g.theme));
-}
-
-/** Fires the loaded bubble along the aim; the next one loads, from the colors on the board. */
-export function fire(g: Game) {
-  const l = g.layout;
-  if (!l || g.phase !== 'playing' || g.shot) return;
-  g.shot = {
-    x: l.shooterX,
-    y: l.shooterY,
-    vx: Math.sin(g.angle) * SHOT_SPEED,
-    vy: -Math.cos(g.angle) * SHOT_SPEED,
-    color: g.current,
-    entity: spawnBubble(g.world, l, g.current, l.shooterX, l.shooterY)
-  };
-  const colors = boardColors(g);
-  g.current = g.next;
-  if (colors.length) {
-    if (!colors.includes(g.current)) g.current = pick(colors);
-    g.next = pick(colors);
-  }
-  showShooter(g, true);
-  drawAim(g); // hidden while the shot flies
-  g.onShoot();
-}
-
-function cancelShot(g: Game) {
-  if (g.shot) g.world.despawn(g.shot.entity);
-  g.shot = null;
-}
-
-/** Moves the shot `frames` 60 fps frames on, in sub-steps of half a radius so it can't skip a bubble. */
-function stepShot(g: Game, frames: number) {
-  const l = g.layout!;
-  const s = g.shot!;
-  const hitSq = (l.radius * 2) ** 2;
-  const mx = s.vx * frames;
-  const my = s.vy * frames;
-  const steps = Math.max(1, Math.ceil(Math.hypot(mx, my) / (l.radius * 0.5)));
-  let sign = 1;
-  for (let i = 0; i < steps; i++) {
-    s.x += (mx / steps) * sign;
-    s.y += my / steps;
-    // Off a side wall: reflect what overshot and carry on the other way
-    if (s.x < l.minX) {
-      s.x = l.minX + (l.minX - s.x);
-      sign = -sign;
-    } else if (s.x > l.maxX) {
-      s.x = l.maxX - (s.x - l.maxX);
-      sign = -sign;
-    }
-    let hit = s.y - l.radius <= TOP_BOUNDARY;
-    if (hit) s.y = TOP_BOUNDARY + l.radius;
-    else hit = g.bubbles!.some((b) => (s.x - b.x) ** 2 + (s.y - b.y) ** 2 <= hitSq);
-    if (hit) {
-      land(g, s.x, s.y);
-      return;
-    }
-  }
-  if (sign < 0) s.vx = -s.vx;
-  g.world.set(s.entity, { position: bubblePosition(l, s.x, s.y) });
-}
-
-// ── Landing ───────────────────────────────────────────────────────────
-
-/**
- * Where a shot that stopped at (x, y) settles: a bubble's width out from the nearest bubble, toward
- * where it hit; where it is if that's the ceiling with nothing near (the original version's snapping).
- */
-function snapPoint(g: Game, x: number, y: number): [number, number] {
-  const l = g.layout!;
-  const d = l.diameter;
-  const minY = TOP_BOUNDARY + l.radius;
-  const cx = Math.max(l.minX, Math.min(l.maxX, x));
-  const cy = Math.max(minY, y);
-  let nearest: Bubble | null = null;
-  let best = Infinity;
-  for (const b of g.bubbles!) {
-    const dist = (cx - b.x) ** 2 + (cy - b.y) ** 2;
-    if (dist < best) {
-      best = dist;
-      nearest = b;
-    }
-  }
-  if (!nearest || best > (d * 2) ** 2) return [cx, cy];
-  const dx = cx - nearest.x;
-  const dy = cy - nearest.y;
-  const dist = Math.hypot(dx, dy);
-  let sx = dist < 0.1 ? nearest.x : nearest.x + (dx / dist) * d;
-  let sy = dist < 0.1 ? nearest.y + d : nearest.y + (dy / dist) * d;
-  sx = Math.max(l.minX, Math.min(l.maxX, sx));
-  sy = Math.max(minY, Math.min(nearest.y + d * 2, sy));
-  return [sx, sy];
-}
-
-/** Bubbles of `start`'s color joined to it through each other (centres within 2.5 radii). */
-function connected(g: Game, start: Bubble): Bubble[] {
-  const reach = (g.layout!.radius * 2.5) ** 2;
-  const found = new Set<Bubble>([start]);
-  const queue = [start];
-  for (let head = 0; head < queue.length; head++) {
-    const c = queue[head]!;
-    for (const b of g.bubbles!) {
-      if (b.color !== start.color || found.has(b)) continue;
-      if ((c.x - b.x) ** 2 + (c.y - b.y) ** 2 < reach) {
-        found.add(b);
-        queue.push(b);
-      }
-    }
-  }
-  return [...found];
-}
-
-function land(g: Game, x: number, y: number) {
-  const l = g.layout!;
-  const w = g.world;
-  const shot = g.shot!;
-  g.shot = null;
-  const [sx, sy] = snapPoint(g, x, y);
-  // The shot becomes the board's bubble, popping into place
-  const bubble: Bubble = { x: sx, y: sy, color: shot.color, row: 0, entity: shot.entity };
-  w.set(shot.entity, { position: bubblePosition(l, sx, sy), scale: bubbleSize(l) * SNAP_FROM });
-  w.animate(shot.entity, { scale: bubbleSize(l) }, { spring: POP_SPRING });
-  g.bubbles!.push(bubble);
-
-  const group = connected(g, bubble);
-  if (group.length >= MIN_MATCH) {
-    const gone = new Set(group);
-    g.bubbles = g.bubbles!.filter((b) => !gone.has(b));
-    for (const b of group) {
-      if (b.entity != null) popBubble(w, l, b.entity, b.color, b.x, b.y);
-      b.entity = null;
-    }
-    g.onScore(g.world.scoreboard.add(group.length * POINTS_PER_BUBBLE));
-    g.onPop();
-    // The shooter only holds colors still on the board
-    const colors = boardColors(g);
-    if (colors.length && (!colors.includes(g.current) || !colors.includes(g.next))) {
-      if (!colors.includes(g.current)) g.current = pick(colors);
-      if (!colors.includes(g.next)) g.next = pick(colors);
-      showShooter(g, true);
-    }
-  }
-  g.onBubbles(g.bubbles!.length);
-  if (g.bubbles!.length === 0 && g.phase === 'playing') {
-    end(g, true);
-    return;
-  }
-  drawAim(g);
-}