@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/connect-em-all/ConnectEmAll.tsx

@@ -1,70 +0,0 @@
-// Connect Em All's screen, on the Nayan engine: dots, chain lines and bursts are one 3D scene (an
-// orthographic camera over a flat board of glossy dots), under Playtura's scoreboard, controls and
-// modals. The rules are in ConnectEmAllGame.ts, what it draws in ConnectEmAllScene.ts.
-//
-// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
-// repaints the board, so the GPU view is never rebuilt. Pops, falls and bursts animate in the engine's
-// Rust core; JS only hit-tests the finger and steps the world once a frame.
-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 { getLayout, LIGHT, TIME_LIMIT } from './ConnectEmAllConstants';
-import { createGame, dispose, reset, setLayout, setTheme, start, tick, touchEnd, touchMove, touchStart } from './ConnectEmAllGame';
-
-const SFX = GAME_SOUNDS.CONNECT_EM_ALL;
-const formatScore = (score: number) => score.toLocaleString();
-
-export const ConnectEmAll = engineGame(GAME_IDS.CONNECT_EM_ALL, (props) => {
-  const [score, setScore] = useLiveState(0);
-  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
-
-  // Win with any score when the timer runs out, lose with none
-  const { theme, status, screen, gameOver } = useEngineGame(props, {
-    gameId: GAME_IDS.CONNECT_EM_ALL,
-    create: createGame,
-    start,
-    reset,
-    dispose,
-    tick,
-    setTheme,
-    resize: (g, width, height, offset) => {
-      const l = getLayout(width, height, offset);
-      setLayout(g, l);
-      return l.boardSize;
-    },
-    drag: (g, { phase, x, y }) => {
-      if (phase === 'start') touchStart(g, x, y);
-      else if (phase === 'move') touchMove(g, x, y);
-      else touchEnd(g);
-    },
-    sounds: SFX,
-    onStart: (fx) => fx(SFX.START, HapticType.MEDIUM),
-    onOver: (fx, status) => fx(status === 'win' ? SFX.WIN : SFX.GAME_OVER, status === 'win' ? HapticType.SUCCESS : HapticType.HEAVY),
-    wire: (g, fx) => {
-      g.onScore = setScore;
-      g.onTime = setTimeLeft;
-      g.onConnect = () => fx(SFX.CONNECT, HapticType.LIGHT);
-      g.onClear = () => fx(SFX.CLEAR, HapticType.MEDIUM);
-    }
-  });
-
-  return (
-    <EngineGameScreen
-      {...screen}
-      light={LIGHT}
-      columns={[scoreColumn(score, 'SCORE', formatScore), timerColumn(timeLeft, theme)]}
-      subtext="Connect matching dots!"
-      gameOver={gameOver({
-        title: status === 'win' ? 'WELL DONE!' : 'TIME UP!',
-        message: status === 'win' ? 'All connections made!' : 'You ran out of time!',
-        scoreLabel: status === 'win' ? 'Great Job!' : 'Game Over',
-        score,
-        buttonText: status === 'win' ? 'Play Again!' : 'Try Again!'
-      })}
-    />
-  );
-});

package/src/games/connect-em-all/ConnectEmAllConstants.ts

@@ -1,77 +0,0 @@
-// Connect Em All's rules, colors and layout. Rules, scoring and layout match the original version
-// (games/connect-em-all), so scores and feel carry over.
-import { frontLight, gameWidthFor } from '../shared/EngineUtils';
-
-// ── Rules ─────────────────────────────────────────────────────────────
-
-export const GRID_SIZE = 7;
-export const MIN_CONNECT = 3;
-export const TIME_LIMIT = 300; // seconds
-export const LOOP_BONUS = 250;
-
-export const DOT_COLORS = ['#FF3B3B', '#32CD32', '#FFD700', '#4DA6FF', '#BF5AF2'] as const;
-
-/** 50 a dot, plus 75 for every dot past the third. */
-export const scoreFor = (dots: number) => (dots < 2 ? 0 : dots * 50 + (dots >= 4 ? (dots - 3) * 75 : 0));
-
-// ── Feel ──────────────────────────────────────────────────────────────
-
-export const FALL_TIME = 0.35; // seconds: survivors drop and new dots fall in, overshooting a little
-// A new board rains in: dots drop from above column by column, bottom rows first, landing with a bounce
-export const INTRO_COL_STAGGER = 0.035;
-export const INTRO_ROW_STAGGER = 0.03;
-export const INTRO_SPRING = { damping: 12, stiffness: 190, mass: 0.9 };
-export const POP_SCALE = 1.24; // a dot joining the chain pops to this...
-export const CONNECTED_SCALE = 1.08; // ...and settles here
-export const POP_TIME = 0.2;
-export const RELEASE_TIME = 0.14;
-export const CLEAR_TIME = 0.45; // a cleared dot's pop: swell, flash, settle, shrink away
-export const TRAIL_ALPHA = 0.75;
-/** The halo round a connected dot: its size as a share of the dot, and its opacity at the dot's edge (it fades smoothly to nothing). */
-export const GLOW_SIZE = 1.6;
-export const GLOW_ALPHA = 0.38;
-export const GLOW_IN_TIME = 0.2; // seconds for the halo to bloom when a dot joins the chain
-export const GLOW_OUT_TIME = 0.12; // seconds for it to fade when the dot leaves
-
-/** The board panel's corner radius (points), as Block Blast's. */
-export const BOARD_RADIUS = 8;
-
-// Lit from the top and front, so every dot is lit evenly all round (no dark side melting into the
-// board) with its highlight near the top; flat surfaces keep their exact color.
-export const LIGHT = frontLight([0, 0.35, 1], 0.6);
-export const DOT_SHINE = 0.4;
-
-// ── Layout (points) ───────────────────────────────────────────────────
-
-export type Layout = {
-  /** The GameView's size. */
-  width: number;
-  height: number;
-  boardLeft: number;
-  boardTop: number;
-  boardSize: number;
-  /** From the board's edge to the outer dots' centres. */
-  padding: number;
-  spacing: number;
-  radius: number;
-  hitRadius: number;
-};
-
-/** Board as wide as the game area (360 phones / 500 tablets), centred in the space below the header. */
-export function getLayout(width: number, height: number, offset: number): Layout {
-  const boardSize = gameWidthFor(width);
-  const padding = boardSize / GRID_SIZE / 2 + 5;
-  const spacing = (boardSize - padding * 2) / (GRID_SIZE - 1);
-  const radius = spacing * 0.44;
-  return {
-    width,
-    height,
-    boardLeft: (width - boardSize) / 2,
-    boardTop: offset + (height - offset - boardSize) / 2,
-    boardSize,
-    padding,
-    spacing,
-    radius,
-    hitRadius: radius * 1.5
-  };
-}

package/src/games/connect-em-all/ConnectEmAllGame.ts

@@ -1,401 +0,0 @@
-// Connect Em All's rules, with no React: build a run with `createGame`, give it a layout, `start` it
-// and `tick` it every frame. Drag through adjacent dots of one color (diagonals count); let go on 3 or
-// more to clear them. A loop (4+ dots, last next to the first) clears every dot of that color. Dots
-// above fall into the gaps and new ones drop in. Score anything before the timer runs out to win.
-import { type Camera, type Entity, World } from '@nayan-ui/engine';
-import type { GameTheme } from '../../services/ThemeService';
-import { popAndBurst } from '../shared/EngineBlasts';
-import { introPlayed } from '../shared/EngineUtils';
-import {
-  CLEAR_TIME,
-  CONNECTED_SCALE,
-  DOT_COLORS,
-  FALL_TIME,
-  GRID_SIZE,
-  INTRO_COL_STAGGER,
-  INTRO_ROW_STAGGER,
-  INTRO_SPRING,
-  type Layout,
-  LOOP_BONUS,
-  MIN_CONNECT,
-  POP_SCALE,
-  POP_TIME,
-  RELEASE_TIME,
-  scoreFor,
-  TIME_LIMIT,
-  TRAIL_ALPHA
-} from './ConnectEmAllConstants';
-import {
-  type Board,
-  buildBoard,
-  DOT_COUNT,
-  dotBurst,
-  dotColor,
-  dotPoint,
-  dotPosition,
-  dotScale,
-  hideSegment,
-  hideTrail,
-  lineColor,
-  removeBoard,
-  type Segment,
-  showGlow,
-  showSegment,
-  showTrail,
-  spawnDot,
-  spawnSegment,
-  spawnTrail,
-  type Trail
-} from './ConnectEmAllScene';
-
-export type Phase = 'ready' | 'playing' | 'over';
-
-type Dot = { colorIndex: number; entity: Entity | null; glow: Entity | null };
-
-const NO_DOT = -1;
-const WORLD_CAPACITY = 1200; // dots and their halos (49 x 5), chain lines (~100), board, and bursts
-
-const randomColor = () => Math.floor(Math.random() * DOT_COLORS.length);
-const rowOf = (i: number) => Math.floor(i / GRID_SIZE);
-const colOf = (i: number) => i % GRID_SIZE;
-const adjacent = (a: number, b: number) => {
-  const dr = Math.abs(rowOf(a) - rowOf(b));
-  const dc = Math.abs(colOf(a) - colOf(b));
-  return dr <= 1 && dc <= 1 && dr + dc > 0;
-};
-
-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,
-    board: null as Board | 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,
-    /** Row-major, `GRID_SIZE` x `GRID_SIZE`. */
-    dots: Array.from({ length: DOT_COUNT }, (): Dot => ({ colorIndex: randomColor(), entity: null, glow: null })),
-    /** Dot indices, in the order they were joined. */
-    chain: [] as number[],
-    touching: false,
-    lastIndex: NO_DOT,
-    finger: [0, 0] as [number, number],
-    segments: [] as Segment[],
-    trail: null as Trail | null,
-    /** The next board to appear rains 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) => {},
-    onConnect: () => {},
-    onClear: () => {}
-  };
-  world.scoreboard.reset(0, TIME_LIMIT);
-  world.scoreboard.handlers = {
-    onSecond: (t) => g.onTime(t),
-    onTimeUp: () => g.phase === 'playing' && end(g)
-  };
-  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;
-  releaseChain(g);
-  if (g.board) removeBoard(w, g.board);
-  for (const d of g.dots) if (d.entity != null) w.despawn(d.entity); // its glow goes with it
-  g.layout = l;
-  g.camera.ortho = l.height / 2;
-  g.board = buildBoard(w, l, g.theme);
-  spawnAll(g);
-  if (!g.trail) g.trail = spawnTrail(w);
-}
-
-/** A new theme: the background and board are rebuilt; the dots and the run carry on. */
-export function setTheme(g: Game, theme: GameTheme) {
-  g.theme = theme;
-  const l = g.layout;
-  if (!l) return;
-  if (g.board) removeBoard(g.world, g.board);
-  g.board = buildBoard(g.world, l, theme);
-}
-
-/** Spawns every dot; a new board rains in, column by column, bottom rows first. */
-function spawnAll(g: Game) {
-  const l = g.layout;
-  if (!l) return;
-  const intro = g.intro;
-  if (intro) g.introAge = 0;
-  g.dots.forEach((d, i) => {
-    if (!intro) return spawnInto(g, d, i);
-    const { entity, glow } = spawnDot(g.world, l, rowOf(i) - 2, colOf(i), d.colorIndex);
-    d.entity = entity;
-    d.glow = glow;
-    const delay = colOf(i) * INTRO_COL_STAGGER + (GRID_SIZE - 1 - rowOf(i)) * INTRO_ROW_STAGGER;
-    g.world.set(entity, { scale: 0 });
-    g.world.animate(entity, { position: dotPosition(l, rowOf(i), colOf(i)) }, { spring: INTRO_SPRING, delay });
-    g.world.animate(entity, { scale: l.radius * 2 }, { duration: FALL_TIME, delay, easing: 'back' });
-  });
-}
-
-/** Spawns a dot at its place, or (refills) a row above it, growing from nothing as it drops in. */
-function spawnInto(g: Game, d: Dot, i: number, dropIn = false) {
-  const l = g.layout;
-  if (!l) return;
-  const { entity, glow } = spawnDot(g.world, l, dropIn ? rowOf(i) - 1 : rowOf(i), colOf(i), d.colorIndex);
-  d.entity = entity;
-  d.glow = glow;
-  if (!dropIn) return;
-  g.world.set(entity, { scale: 0 });
-  g.world.animate(entity, { scale: l.radius * 2 }, { duration: FALL_TIME, easing: 'back' });
-  fall(g, d, i);
-}
-
-/** Drops a dot to its resting place, overshooting slightly so it settles rather than stops dead. */
-function fall(g: Game, d: Dot, i: number) {
-  if (d.entity == null || !g.layout) return;
-  g.world.animate(d.entity, { position: dotPosition(g.layout, rowOf(i), colOf(i)) }, { duration: FALL_TIME, easing: 'back' });
-}
-
-// ── Run ───────────────────────────────────────────────────────────────
-
-export function start(g: Game) {
-  if (g.phase !== 'ready') return;
-  g.phase = 'playing';
-  g.world.scoreboard.startCountdown(TIME_LIMIT);
-  g.onPhase('playing');
-}
-
-/** A fresh board and timer (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
-export function reset(g: Game) {
-  releaseChain(g);
-  for (const d of g.dots) if (d.entity != null) g.world.despawn(d.entity);
-  g.dots = g.dots.map(() => ({ colorIndex: randomColor(), entity: null, glow: null }));
-  g.intro = true;
-  spawnAll(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.world.dispose();
-}
-
-export function tick(g: Game, dt: number) {
-  if (g.world.isDisposed) return;
-  introPlayed(g, dt);
-  g.world.update(dt);
-}
-
-function end(g: Game) {
-  g.world.scoreboard.stop();
-  releaseChain(g);
-  g.won = g.score > 0;
-  g.phase = 'over';
-  g.onPhase('over');
-}
-
-// ── Touch ─────────────────────────────────────────────────────────────
-
-/** The dot under a view point (within 1.5 radii of its centre), or NO_DOT. */
-function dotAt(l: Layout, x: number, y: number) {
-  const col = Math.round((x - l.boardLeft - l.padding) / l.spacing);
-  const row = Math.round((y - l.boardTop - l.padding) / l.spacing);
-  if (row < 0 || row >= GRID_SIZE || col < 0 || col >= GRID_SIZE) return NO_DOT;
-  const [cx, cy] = dotPoint(l, row, col);
-  return (x - cx) ** 2 + (y - cy) ** 2 <= l.hitRadius ** 2 ? row * GRID_SIZE + col : NO_DOT;
-}
-
-export function touchStart(g: Game, x: number, y: number) {
-  const l = g.layout;
-  if (!l) return;
-  g.touching = true;
-  g.finger = [x, y];
-  g.lastIndex = dotAt(l, x, y);
-  if (g.phase !== 'playing' || g.lastIndex === NO_DOT) return;
-  releaseChain(g);
-  g.chain = [g.lastIndex];
-  connected(g, g.lastIndex, true);
-  drawChain(g);
-}
-
-export function touchMove(g: Game, x: number, y: number) {
-  const l = g.layout;
-  if (!l || !g.touching) return;
-  g.finger = [x, y];
-  const index = dotAt(l, x, y);
-  if (index !== NO_DOT && index !== g.lastIndex) {
-    g.lastIndex = index;
-    if (g.phase === 'playing' && extend(g, index)) {
-      g.onConnect();
-      drawChain(g);
-    }
-  }
-  drawTrail(g);
-}
-
-export function touchEnd(g: Game) {
-  g.touching = false;
-  g.lastIndex = NO_DOT;
-  if (g.trail) hideTrail(g.world, g.trail);
-  if (g.phase === 'playing' && g.chain.length >= MIN_CONNECT) clearChain(g);
-  else releaseChain(g);
-}
-
-/** Joins `index` to the chain, or steps back off the last dot. Returns whether the chain changed. */
-function extend(g: Game, index: number) {
-  const chain = g.chain;
-  const last = chain[chain.length - 1];
-  if (last === undefined || index === last) return false;
-  if (chain.length >= 2 && index === chain[chain.length - 2]) {
-    connected(g, chain.pop()!, false);
-    return true;
-  }
-  if (chain.includes(index) || g.dots[index]!.colorIndex !== g.dots[last]!.colorIndex || !adjacent(index, last)) return false;
-  chain.push(index);
-  connected(g, index, true);
-  return true;
-}
-
-/** A dot joining (pop, glow) or leaving (back to size) the chain. */
-function connected(g: Game, index: number, on: boolean) {
-  const l = g.layout;
-  const d = g.dots[index]!;
-  if (!l || d.entity == null || d.glow == null) return;
-  const size = l.radius * 2;
-  if (on) {
-    g.world.animate(d.entity, [{ scale: size * POP_SCALE, at: 0.45 }, { scale: size * CONNECTED_SCALE }], { duration: POP_TIME });
-  } else {
-    g.world.animate(d.entity, { scale: size }, { duration: RELEASE_TIME });
-  }
-  showGlow(g.world, d.glow, on);
-}
-
-/** Lets go of the chain without clearing it. */
-function releaseChain(g: Game) {
-  for (const i of g.chain) connected(g, i, false);
-  g.chain = [];
-  drawChain(g);
-  if (g.trail) hideTrail(g.world, g.trail);
-}
-
-function clearChain(g: Game) {
-  const l = g.layout!;
-  const w = g.world;
-  const chain = g.chain;
-  const color = g.dots[chain[0]!]!.colorIndex;
-  const loop = chain.length >= 4 && adjacent(chain[0]!, chain[chain.length - 1]!);
-  const removed = loop ? g.dots.flatMap((d, i) => (d.colorIndex === color ? [i] : [])) : chain.slice();
-  g.chain = [];
-  drawChain(g);
-
-  // Cleared dots pop and burst (the shared pop).
-  for (const i of removed) {
-    const d = g.dots[i]!;
-    const e = d.entity;
-    if (e != null) {
-      popAndBurst(
-        w,
-        e,
-        { scale: dotScale(l), color: dotColor(d.colorIndex), duration: CLEAR_TIME },
-        dotBurst(l, rowOf(i), colOf(i), d.colorIndex)
-      ).then(() => w.despawn(e));
-    }
-    d.entity = null;
-    d.glow = null;
-  }
-
-  // Gravity per column: the dots left fall to the bottom, new ones drop in from above the board.
-  const gone = new Set(removed);
-  for (let col = 0; col < GRID_SIZE; col++) {
-    const kept: { dot: Dot; from: number }[] = [];
-    for (let row = GRID_SIZE - 1; row >= 0; row--)
-      if (!gone.has(row * GRID_SIZE + col)) kept.push({ dot: g.dots[row * GRID_SIZE + col]!, from: row });
-    kept.forEach(({ dot, from }, k) => {
-      const row = GRID_SIZE - 1 - k;
-      g.dots[row * GRID_SIZE + col] = dot;
-      if (from !== row) fall(g, dot, row * GRID_SIZE + col);
-    });
-    // New dots fill the top of the column.
-    const fresh = GRID_SIZE - kept.length;
-    for (let row = 0; row < fresh; row++) {
-      const d: Dot = { colorIndex: randomColor(), entity: null, glow: null };
-      g.dots[row * GRID_SIZE + col] = d;
-      spawnInto(g, d, row * GRID_SIZE + col, true);
-    }
-  }
-
-  g.onScore(g.world.scoreboard.add(scoreFor(removed.length) + (loop ? LOOP_BONUS : 0)));
-  g.onClear();
-}
-
-// ── Lines ─────────────────────────────────────────────────────────────
-
-/** Chain lines between joined dots, from a pool that grows to the longest chain seen. */
-function drawChain(g: Game) {
-  const l = g.layout;
-  if (!l) return;
-  const w = g.world;
-  const chain = g.chain;
-  const color = chain.length ? lineColor(g.dots[chain[0]!]!.colorIndex) : null;
-  for (let s = 0; s < Math.max(chain.length - 1, g.segments.length); s++) {
-    if (s < chain.length - 1 && color) {
-      const segment = g.segments[s] ?? (g.segments[s] = spawnSegment(w));
-      const a = chain[s]!;
-      const b = chain[s + 1]!;
-      showSegment(w, l, segment, dotPoint(l, rowOf(a), colOf(a)), dotPoint(l, rowOf(b), colOf(b)), color);
-    } else if (g.segments[s]) {
-      hideSegment(w, g.segments[s]!);
-    }
-  }
-  drawTrail(g);
-}
-
-/** The line from the last joined dot to the finger, while dragging. */
-function drawTrail(g: Game) {
-  const l = g.layout;
-  const t = g.trail;
-  if (!l || !t) return;
-  const last = g.chain[g.chain.length - 1];
-  if (!g.touching || last === undefined) {
-    hideTrail(g.world, t);
-    return;
-  }
-  const [r, gr, b] = lineColor(g.dots[last]!.colorIndex);
-  const from = dotPoint(l, rowOf(last), colOf(last));
-  showTrail(g.world, l, t, from, insideBoard(l, from, g.finger), [r, gr, b, TRAIL_ALPHA]);
-}
-
-/** Where the line from `from` (on the board) toward `to` leaves the board, or `to` if it doesn't. */
-function insideBoard(l: Layout, from: [number, number], to: [number, number]): [number, number] {
-  let t = 1;
-  const edges: [number, number, number][] = [
-    [0, l.boardLeft, l.boardLeft + l.boardSize],
-    [1, l.boardTop, l.boardTop + l.boardSize]
-  ];
-  for (const [axis, lo, hi] of edges) {
-    const d = to[axis]! - from[axis]!;
-    if (to[axis]! < lo) t = Math.min(t, (lo - from[axis]!) / d);
-    if (to[axis]! > hi) t = Math.min(t, (hi - from[axis]!) / d);
-  }
-  return [from[0] + (to[0] - from[0]) * t, from[1] + (to[1] - from[1]) * t];
-}