@nayan-ui/games 1.19.0 → 1.20.0

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

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

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

@@ -0,0 +1,401 @@
+// 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];
+}