@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/tile-home/TileHomeConstants.ts

@@ -0,0 +1,139 @@
+// Tile Home's rules, tiles, timings and layout. Rules, scoring and layout match the original version
+// (games/tile-home), so scores and feel carry over.
+import type { FruitKind } from '../shared/EngineFruits';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const BOARD_COLS = 6;
+export const BOARD_ROWS = 7;
+export const LAYER_COUNT = 3; // each layer up is one smaller each way, offset half a cell
+export const TILES_PER_TYPE = 6;
+export const SLOT_CAPACITY = 7;
+export const MATCH_COUNT = 3;
+export const TIME_LIMIT = 300; // seconds
+export const POINTS_PER_SET = 500;
+
+/** The 12 fruits, by tile type id (the original version's order), with each one's burst color. */
+export const TILE_TYPES: readonly { fruit: FruitKind; color: string }[] = [
+  { fruit: 'apple', color: '#dc2626' },
+  { fruit: 'orange', color: '#f97316' },
+  { fruit: 'banana', color: '#fbbf24' },
+  { fruit: 'grapes', color: '#7c3aed' },
+  { fruit: 'kiwi', color: '#84cc16' },
+  { fruit: 'strawberry', color: '#ef4444' },
+  { fruit: 'mango', color: '#f59e0b' },
+  { fruit: 'cherries', color: '#be123c' },
+  { fruit: 'pineapple', color: '#eab308' },
+  { fruit: 'watermelon', color: '#22c55e' },
+  { fruit: 'peach', color: '#fda4af' },
+  { fruit: 'pomegranate', color: '#9f1239' }
+];
+
+/** Sets of three in a board: 24. */
+export const TOTAL_SETS = (TILE_TYPES.length * TILES_PER_TYPE) / MATCH_COUNT;
+
+// ── Feel (seconds) ────────────────────────────────────────────────────
+
+export const FLY_TIME = 0.25; // board to tray
+export const LIFT_AT = 0.28; // the flying tile peaks at LIFT_SCALE this far through, then shrinks to tray size
+export const LIFT_SCALE = 1.08;
+export const MATCH_CHECK_DELAY = 0.3; // after a tile lands
+export const MATCH_REMOVE_DELAY = 0.4; // after a match shows
+export const MATCH_BURST_TIME = 0.55;
+export const SHADE_TIME = 0.22; // a covered tile's shade lifting as it's revealed
+export const SHIFT_SPRING = { stiffness: 200, damping: 15 }; // tray tiles stepping aside
+export const LAND_SPRING = { stiffness: 260, damping: 9 }; // a landing's squash
+export const LAND_SQUASH = 1.12;
+// Board intro: tiles spring up rippling out from the centre, each layer a beat after the one below
+// (an underdamped spring: damping ratio 0.45 at 20 rad/s).
+export const INTRO_SPRING = { stiffness: 400, damping: 18, mass: 1 };
+export const RIPPLE_TIME = 0.3;
+export const LAYER_STAGGER = 0.07;
+
+/** How dark a covered tile is: more tiles over it, darker. */
+export const shadeFor = (blockingCount: number) => (blockingCount > 0 ? Math.min(0.2 + blockingCount * 0.15, 0.6) : 0);
+
+// ── Look ──────────────────────────────────────────────────────────────
+
+// Same top-left lighting and raised profile as Candy Crush's blocks.
+export const LIGHT = frontLight([-0.35, 0.6, 1], 0.5);
+export const TILE_FACE = '#fffdf7';
+export const TILE_THICKNESS = 0.4;
+
+// Classic (no host theme) board and tray colors
+export const CLASSIC_BOARD = 'rgba(255, 255, 255, 0.35)';
+export const CLASSIC_TRAY = 'rgba(255, 255, 255, 0.45)';
+export const CLASSIC_TRAY_BORDER = 'rgba(255, 255, 255, 0.6)';
+export const CLASSIC_SLOT = 'rgba(255, 255, 255, 0.25)';
+export const CLASSIC_SLOT_BORDER = 'rgba(255, 255, 255, 0.5)';
+
+// ── Layout (points; same arithmetic as the original version) ──────────────
+
+const BOARD_PADDING = 8;
+const TRAY_PADDING = 8;
+const TRAY_BORDER = 1;
+const SLOT_GAP = 4;
+const TRAY_BOARD_GAP = 10;
+
+export type Layout = {
+  /** The GameView's size. */
+  width: number;
+  height: number;
+  boardLeft: number;
+  boardTop: number;
+  boardWidth: number;
+  boardHeight: number;
+  cell: number;
+  /** A board tile's side. */
+  tile: number;
+  /** The fruit's size on a board tile. */
+  fruit: number;
+  trayLeft: number;
+  trayTop: number;
+  trayWidth: number;
+  trayHeight: number;
+  /** A tray tile's side. */
+  slot: number;
+};
+
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const gameWidth = gameWidthFor(width);
+  const cell = (gameWidth - BOARD_PADDING * 2) / BOARD_COLS;
+  const tile = cell - 2;
+  const boardHeight = BOARD_ROWS * cell + BOARD_PADDING * 2;
+  const slot = Math.floor((gameWidth - TRAY_PADDING * 2 - (SLOT_CAPACITY - 1) * SLOT_GAP) / SLOT_CAPACITY);
+  const trayHeight = slot + TRAY_PADDING * 2;
+  // The tray above the board, the pair centred in the space under the header
+  const total = trayHeight + TRAY_BOARD_GAP + boardHeight;
+  const top = offset + (height - offset - total) / 2;
+  const left = (width - gameWidth) / 2;
+  return {
+    width,
+    height,
+    boardLeft: left,
+    boardTop: top + trayHeight + TRAY_BOARD_GAP,
+    boardWidth: gameWidth,
+    boardHeight,
+    cell,
+    tile,
+    fruit: tile - 12,
+    trayLeft: left,
+    trayTop: top,
+    trayWidth: gameWidth,
+    trayHeight,
+    slot
+  };
+}
+
+/** A board tile's top-left, in view points. */
+export const tileOrigin = (l: Layout, col: number, row: number, layer: number): [number, number] => [
+  l.boardLeft + BOARD_PADDING + col * l.cell + layer * (l.cell / 2),
+  l.boardTop + BOARD_PADDING + row * l.cell + layer * (l.cell / 2)
+];
+
+/** Tray slot `index`'s top-left, in view points. */
+export const slotOrigin = (l: Layout, index: number): [number, number] => [
+  l.trayLeft + TRAY_BORDER + TRAY_PADDING + index * (l.slot + SLOT_GAP),
+  l.trayTop + TRAY_BORDER + TRAY_PADDING
+];

package/src/games/tile-home/TileHomeGame.ts

@@ -0,0 +1,435 @@
+// Tile Home's rules, with no React: build a run with `createGame`, hand it the fruit models and a
+// layout, `start` it and `tick` it every frame. Tap an uncovered tile to send it to the tray, next to
+// its kind; three of a kind clear for 500. Clear the board to win (with a time bonus); fill the tray
+// without a match, or run out of time, and it's over.
+import { type Camera, type Entity, World } from '@nayan-ui/engine';
+import { TIME_BONUS_PER_SECOND } from '../../services/ScoringService';
+import type { GameTheme } from '../../services/ThemeService';
+import { popAndBurst } from '../shared/EngineBlasts';
+import type { Fruit, FruitKind } from '../shared/EngineFruits';
+import { introPlayed, toColor } from '../shared/EngineUtils';
+import {
+  BOARD_COLS,
+  BOARD_ROWS,
+  FLY_TIME,
+  INTRO_SPRING,
+  LAND_SPRING,
+  LAND_SQUASH,
+  LAYER_COUNT,
+  LAYER_STAGGER,
+  type Layout,
+  LIFT_AT,
+  LIFT_SCALE,
+  MATCH_BURST_TIME,
+  MATCH_CHECK_DELAY,
+  MATCH_COUNT,
+  MATCH_REMOVE_DELAY,
+  POINTS_PER_SET,
+  RIPPLE_TIME,
+  SHADE_TIME,
+  shadeFor,
+  SHIFT_SPRING,
+  SLOT_CAPACITY,
+  slotOrigin,
+  TILE_TYPES,
+  tileOrigin,
+  TILES_PER_TYPE,
+  TIME_LIMIT
+} from './TileHomeConstants';
+import { addTileFruit, buildScenery, type FruitModels, layerZ, spawnTile, toWorld, trayZ, Z_FLYING } from './TileHomeScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+
+type Tile = {
+  typeId: number;
+  col: number;
+  row: number;
+  layer: number;
+  /** Tiles on higher layers covering this one (0 = free to pick). */
+  blocking: number;
+  /** Lower tiles uncovered when this tile leaves the board (computed once per deal). */
+  covers: Tile[];
+  root: Entity | null;
+  shade: Entity | null;
+  /** Its fruit, once that model is built (the tile shows before it). */
+  fruit: Entity | null;
+  parts: Entity[];
+};
+
+const WORLD_CAPACITY = 900; // 72 tiles x 4 entities (root, body, fruit, shade), scenery, bursts
+
+const shuffle = <T>(items: T[]) => {
+  for (let i = items.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [items[i], items[j]] = [items[j]!, items[i]!];
+  }
+  return items;
+};
+
+/** Six of each fruit on shuffled spots across the three layers (as many spots as there are tiles). */
+function generateBoard(): Tile[] {
+  const pool = shuffle(TILE_TYPES.flatMap((_, type) => Array.from({ length: TILES_PER_TYPE }, () => type)));
+  const spots: { col: number; row: number; layer: number }[] = [];
+  for (let layer = 0; layer < LAYER_COUNT; layer++) {
+    for (let row = 0; row < BOARD_ROWS - layer; row++) for (let col = 0; col < BOARD_COLS - layer; col++) spots.push({ col, row, layer });
+  }
+  shuffle(spots);
+  return pool
+    .slice(0, spots.length)
+    .map((typeId, i) => ({ typeId, ...spots[i]!, blocking: 0, covers: [], root: null, shade: null, fruit: null, parts: [] }));
+}
+
+/** How many higher tiles overlap each tile (layers sit half a cell apart, so a tile can cover up to four). */
+function countBlocking(board: Tile[]) {
+  for (const t of board) {
+    t.blocking = 0;
+    t.covers.length = 0;
+  }
+  for (const t of board) {
+    const x = t.col + t.layer * 0.5;
+    const y = t.row + t.layer * 0.5;
+    for (const o of board) {
+      if (o.layer <= t.layer) continue;
+      if (Math.abs(o.col + o.layer * 0.5 - x) < 1 && Math.abs(o.row + o.layer * 0.5 - y) < 1) {
+        t.blocking++;
+        o.covers.push(t);
+      }
+    }
+  }
+}
+
+const introDelay = (t: Tile) => {
+  const cc = (BOARD_COLS - 1) / 2;
+  const cr = (BOARD_ROWS - 1) / 2;
+  const max = Math.hypot(cc + 1, cr + 1);
+  const dist = Math.hypot(t.col + t.layer * 0.5 - cc, t.row + t.layer * 0.5 - cr);
+  return (Math.min(dist, max) / max) * RIPPLE_TIME + t.layer * LAYER_STAGGER;
+};
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, 0, 500], target: [0, 0, 0], fov: 1, ortho: 1 };
+  const board = generateBoard();
+  countBlocking(board);
+  const g = {
+    world,
+    camera,
+    theme,
+    layout: null as Layout | null,
+    fruits: {} as FruitModels,
+    scenery: [] as Entity[],
+    phase: 'ready' as Phase,
+    /** Score and the countdown live in the engine (Rust), advanced by world.update. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    won: false,
+    board,
+    /** The tray, in order. */
+    slot: [] as Tile[],
+    /** The tile on its way to the tray, and the slot it's headed for. */
+    flying: null as { tile: Tile; index: number } | null,
+    /** Tray tiles bursting, removed when the burst has shown. */
+    matching: [] as Tile[],
+    /** The next board to appear plays the intro. */
+    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) => {},
+    onPick: () => {},
+    onMatch: () => {},
+    onWin: () => {},
+    onLose: () => {}
+  };
+  showFullTime(g);
+  world.scoreboard.handlers = {
+    onScore: (s) => g.onScore(s),
+    onSecond: (t) => g.onTime(t),
+    onTimeUp: () => g.phase === 'playing' && end(g, false)
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+const after = (g: Game, seconds: number, run: () => void) => g.world.after(seconds, run);
+
+/** Score 0 and the full time on the clock, waiting for Start. */
+function showFullTime(g: { world: World }) {
+  const sb = g.world.scoreboard;
+  sb.reset();
+  sb.startCountdown(TIME_LIMIT);
+  sb.stop();
+}
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/**
+ * One kind of fruit's model is ready (they're built once per app, one per frame after the screen
+ * opens): it pops onto every tile of that kind already showing, and is used for any made from now on.
+ */
+export function addFruit(g: Game, kind: FruitKind, fruit: Fruit) {
+  if (g.world.isDisposed || g.fruits[kind]) return;
+  g.fruits[kind] = fruit;
+  const l = g.layout;
+  if (!l) return;
+  const tiles = [...g.board, ...g.slot, ...(g.flying ? [g.flying.tile] : [])];
+  for (const t of tiles) {
+    if (t.root == null || t.fruit != null || TILE_TYPES[t.typeId]!.fruit !== kind) continue;
+    t.fruit = addTileFruit(g.world, l, t.root, fruit, true);
+    t.parts.push(t.fruit);
+  }
+}
+
+/** Lays the scene out for the view and header. Same tile size: everything just moves; else it's rebuilt. */
+export function setLayout(g: Game, l: Layout) {
+  const old = g.layout;
+  g.layout = l;
+  g.camera.ortho = l.height / 2;
+  for (const e of g.scenery) g.world.despawn(e);
+  g.scenery = buildScenery(g.world, l, g.theme);
+  if (old && old.tile === l.tile && old.slot === l.slot) {
+    const updates = g.world.transforms;
+    for (const t of g.board) {
+      if (t.root == null) continue;
+      const [x, y, z] = boardPosition(l, t);
+      updates.position(t.root, x, y, z);
+    }
+    g.slot.forEach((t, i) => {
+      if (t.root == null) return;
+      const [x, y, z] = slotPosition(l, i);
+      updates.position(t.root, x, y, z);
+    });
+    updates.flush();
+  } else {
+    spawnAll(g);
+  }
+}
+
+/** A new theme: the background, board and tray are rebuilt; the tiles and the run carry on. */
+export function setTheme(g: Game, theme: GameTheme) {
+  g.theme = theme;
+  const l = g.layout;
+  if (!l || g.world.isDisposed) return;
+  for (const e of g.scenery) g.world.despawn(e);
+  g.scenery = buildScenery(g.world, l, theme);
+}
+
+const boardPosition = (l: Layout, t: Tile) => {
+  const [x, y] = tileOrigin(l, t.col, t.row, t.layer);
+  return toWorld(l, x + l.tile / 2, y + l.tile / 2, layerZ(t.layer));
+};
+const slotPosition = (l: Layout, index: number, z = trayZ) => {
+  const [x, y] = slotOrigin(l, index);
+  return toWorld(l, x + l.slot / 2, y + l.slot / 2, z);
+};
+const slotScale = (l: Layout) => l.slot / l.tile;
+
+function despawnTile(g: Game, t: Tile) {
+  if (t.root != null) g.world.despawn(t.root); // body, fruit and shade go with it
+  t.root = null;
+  t.shade = null;
+  t.fruit = null;
+  t.parts = [];
+}
+
+/**
+ * (Re)creates every tile's entities from the run's state; the board springs in if it's new. Tiles whose
+ * fruit isn't built yet show without it and get it when it arrives (addFruit).
+ */
+function spawnAll(g: Game) {
+  const l = g.layout;
+  const fruits = g.fruits;
+  if (!l) return;
+  if (g.flying) land(g);
+  for (const t of [...g.board, ...g.slot]) despawnTile(g, t);
+  const intro = g.intro;
+  if (intro) g.introAge = 0;
+  for (const t of g.board) {
+    const [x, y] = tileOrigin(l, t.col, t.row, t.layer);
+    const e = spawnTile(g.world, l, fruits[TILE_TYPES[t.typeId]!.fruit], x + l.tile / 2, y + l.tile / 2, layerZ(t.layer), intro ? 0 : 1);
+    t.root = e.root;
+    t.shade = e.shade;
+    t.fruit = e.fruit;
+    t.parts = e.parts;
+    g.world.set(e.shade, { color: [0, 0, 0, shadeFor(t.blocking)] });
+    if (intro) g.world.animate(e.root, { scale: 1 }, { spring: INTRO_SPRING, delay: introDelay(t) });
+  }
+  g.slot.forEach((t, i) => {
+    if (g.matching.includes(t)) return; // bursting: its burst finishes it
+    const [x, y] = slotOrigin(l, i);
+    const e = spawnTile(g.world, l, fruits[TILE_TYPES[t.typeId]!.fruit], x + l.slot / 2, y + l.slot / 2, trayZ, slotScale(l));
+    t.root = e.root;
+    t.shade = e.shade;
+    t.fruit = e.fruit;
+    t.parts = e.parts;
+  });
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+export function start(g: Game) {
+  if (g.phase !== 'ready') return;
+  g.phase = 'playing';
+  g.world.scoreboard.startCountdown(TIME_LIMIT);
+  g.onPhase('playing');
+}
+
+/** A new board and timer (Stop, Play Again), springing in. The world and its GPU view are kept. */
+export function reset(g: Game) {
+  g.world.cancelTimers();
+  if (g.flying) despawnTile(g, g.flying.tile);
+  g.flying = null;
+  for (const t of [...g.board, ...g.slot, ...g.matching]) despawnTile(g, t);
+  g.board = generateBoard();
+  countBlocking(g.board);
+  g.slot = [];
+  g.matching = [];
+  g.intro = true;
+  spawnAll(g);
+  showFullTime(g);
+  g.won = false;
+  g.phase = 'ready';
+  g.onScore(0);
+  g.onTime(TIME_LIMIT);
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.cancelTimers();
+  g.world.dispose();
+}
+
+function end(g: Game, won: boolean) {
+  g.world.cancelTimers();
+  g.world.scoreboard.stop();
+  g.won = won;
+  g.phase = 'over';
+  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);
+  g.world.update(dt);
+}
+
+// ── Picking ───────────────────────────────────────────────────────────
+
+/** A tap: sends the uncovered tile under it to the tray. */
+export function tap(g: Game, x: number, y: number) {
+  const l = g.layout;
+  if (!l || g.phase !== 'playing' || g.flying) return;
+  const index = g.board.findIndex((t) => {
+    if (t.blocking > 0) return false;
+    const [ox, oy] = tileOrigin(l, t.col, t.row, t.layer);
+    return x >= ox && x <= ox + l.tile && y >= oy && y <= oy + l.tile;
+  });
+  if (index < 0) return;
+  const tile = g.board.splice(index, 1)[0]!;
+
+  // Uncovering: the tiles it covered lighten (the shade eases off).
+  for (const t of tile.covers) {
+    t.blocking--;
+    if (t.shade != null) g.world.animate(t.shade, { color: [0, 0, 0, shadeFor(t.blocking)] }, { duration: SHADE_TIME });
+  }
+
+  // Next to its kind, or at the end; tiles from there step aside so it lands in a gap.
+  const same = g.slot.findIndex((t) => t.typeId === tile.typeId);
+  const to = same >= 0 ? same + 1 : g.slot.length;
+  g.flying = { tile, index: to };
+  arrangeSlot(g);
+
+  if (tile.root != null) {
+    const start = boardPosition(l, tile);
+    g.world.set(tile.root, { position: [start[0], start[1], Z_FLYING] });
+    g.world.animate(tile.root, { position: slotPosition(l, to, Z_FLYING) }, { duration: FLY_TIME });
+    g.world.animate(tile.root, [{ scale: LIFT_SCALE, at: LIFT_AT }, { scale: slotScale(l) }], { duration: FLY_TIME });
+  }
+  after(g, FLY_TIME, () => land(g));
+  g.onPick();
+}
+
+/** The flying tile joins the tray (next to its kind, as things are now) and squashes as it lands. */
+function land(g: Game) {
+  const f = g.flying;
+  const l = g.layout;
+  if (!f || !l) return;
+  g.flying = null;
+  const tile = f.tile;
+  const same = g.slot.findIndex((t) => t.typeId === tile.typeId);
+  const at = same >= 0 ? same + 1 : g.slot.length;
+  g.slot.splice(at, 0, tile);
+  if (tile.root != null) {
+    const s = slotScale(l);
+    g.world.stopAnimation(tile.root);
+    g.world.set(tile.root, { position: slotPosition(l, at), scale: s * LAND_SQUASH });
+    g.world.animate(tile.root, { scale: s }, { spring: LAND_SPRING });
+  }
+  arrangeSlot(g, tile);
+  after(g, MATCH_CHECK_DELAY, () => checkMatches(g));
+}
+
+/** Slides tray tiles to their places, leaving a gap where the flying tile will land. */
+function arrangeSlot(g: Game, skip?: Tile) {
+  const l = g.layout;
+  if (!l) return;
+  const gap = g.flying?.index ?? -1;
+  g.slot.forEach((t, i) => {
+    if (t === skip || t.root == null) return;
+    g.world.animate(t.root, { position: slotPosition(l, gap >= 0 && i >= gap ? i + 1 : i) }, { spring: SHIFT_SPRING });
+  });
+}
+
+function checkMatches(g: Game) {
+  if (g.phase !== 'playing' || g.matching.length) return;
+  // The lowest fruit type with three in the tray (the original version checked types in that order)
+  for (let type = 0; type < TILE_TYPES.length; type++) {
+    const of = g.slot.filter((t) => t.typeId === type);
+    if (of.length < MATCH_COUNT) continue;
+    g.matching = of.slice(0, MATCH_COUNT);
+    burstMatch(g);
+    g.onMatch();
+    after(g, MATCH_REMOVE_DELAY, () => removeMatch(g));
+    return;
+  }
+  if (g.slot.length >= SLOT_CAPACITY) end(g, false);
+}
+
+/** Matched tiles pop, flash white and shrink away, with a glow and sparks (the shared pop). */
+function burstMatch(g: Game) {
+  const l = g.layout!;
+  g.matching.forEach((t, i) => {
+    const root = t.root;
+    if (root == null) return;
+    const at = slotPosition(l, g.slot.indexOf(t));
+    const color = toColor(TILE_TYPES[t.typeId]!.color);
+    popAndBurst(
+      g.world,
+      root,
+      { scale: slotScale(l), flash: t.parts, delay: (i / g.matching.length) * 0.1 * MATCH_BURST_TIME, duration: MATCH_BURST_TIME },
+      { position: [at[0], at[1], at[2] + 40], size: l.slot, color, glowZ: at[2] - 2 }
+    ).then(() => {
+      g.world.despawn(root);
+    });
+    t.root = null; // the burst owns it now
+    t.parts = [];
+  });
+}
+
+function removeMatch(g: Game) {
+  if (g.phase !== 'playing') return;
+  const gone = new Set(g.matching);
+  g.slot = g.slot.filter((t) => !gone.has(t));
+  g.matching = [];
+  g.world.scoreboard.add(POINTS_PER_SET);
+  arrangeSlot(g);
+  if (g.board.length === 0 && g.slot.length === 0 && !g.flying) {
+    g.world.scoreboard.awardTimeBonus(TIME_BONUS_PER_SECOND);
+    end(g, true);
+  }
+}