@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/reversi/ReversiScene.ts

@@ -0,0 +1,240 @@
+// A flat green board with a thin outer border, seen overhead with rounded two-sided 3D discs.
+// Captures still flip and hop in a ripple; legal moves and the last-move outline stay flat.
+// Unit-sized meshes are cached and shared across layouts and theme changes.
+import { effects, type Entity, extrude, lathe, merge, type Model, Path, type Quat, quat, type Vec3, type World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { setBackdropTheme, spawnBackdrop } from '../shared/EngineBackdrop';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { placeTiltedBackdrop } from '../shared/EngineTilt';
+import { toColor } from '../shared/EngineUtils';
+import { BOARD_BORDER_WIDTH, BOARD_SURFACE, cellCentre, COLORS, FLIP_TIME, type Layout, PLACE_LEAD, RIPPLE } from './ReversiConstants';
+import type { Board, Player } from './ReversiRules';
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('reversi/ReversiScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+const STAND_UP = quat.x(Math.PI / 2);
+const WHITE_UP: Quat = [0, 0, 0, 1];
+const BLACK_UP = quat.x(Math.PI);
+const EDGE_ON = quat.x(Math.PI / 2);
+const BACKDROP_DEPTH = 30;
+const FELT = BOARD_SURFACE;
+const DISC = 0.8; // a disc's width, of a cell (as the original discs)
+const THICK = 0.16; // its thickness, of a cell
+
+// ── Meshes ────────────────────────────────────────────────────────────
+
+/** One rounded disc, white on +z and black on -z, with a subtly recessed ring on each face. */
+const discMesh = () =>
+  cached('rv-disc', () => {
+    const half = lathe(
+      [
+        [0.001, 0.5],
+        [0.36, 0.5],
+        [0.385, 0.46],
+        [0.41, 0.5],
+        [0.43, 0.5],
+        [0.465, 0.43],
+        [0.495, 0.28],
+        [0.5, 0.1],
+        [0.5, 0],
+        [0.001, 0]
+      ],
+      {
+        segments: 36,
+        color: ({ position: [x, y, z] }) => {
+          const r = Math.hypot(x, z);
+          const k = r > 0.43 ? 0.88 : y < 0.49 ? 0.92 : 1;
+          return [k, k, k, 1];
+        }
+      }
+    );
+    return createShape(
+      merge([
+        { geometry: half, rotation: STAND_UP, color: toColor(COLORS.WHITE) },
+        { geometry: half, rotation: quat.x(-Math.PI / 2), color: toColor(COLORS.BLACK) }
+      ]),
+      { center: false, shine: 0.45 }
+    );
+  });
+/** A flat ring one unit across (a legal move). */
+const ringMesh = () =>
+  cached('rv-ring', () =>
+    createShape(extrude(new Path().addCircle(0, 0, 0.5).addCircle(0, 0, 0.38), { depth: 0, fillRule: 'evenodd' }), { center: false })
+  );
+/** A flat square outline one unit across (the last move). */
+const frameMesh = () =>
+  cached('rv-frame', () =>
+    createShape(extrude(new Path().addRect(-0.5, -0.5, 1, 1).addRect(-0.44, -0.44, 0.88, 0.88), { depth: 0, fillRule: 'evenodd' }), { center: false })
+  );
+const feltMesh = () => cached('rv-felt', () => createShape(extrude(new Path().addRect(-0.5, -0.5, 1, 1), { depth: 0 }), { center: false }));
+
+/** All grid lines and star points in cell units, contained inside the board edges. */
+const gridMesh = () =>
+  cached('rv-grid', () => {
+    const lines = new Path();
+    const w = 0.025;
+    for (let i = 0; i <= 8; i++) {
+      const p = Math.max(-4 + w / 2, Math.min(4 - w / 2, i - 4));
+      lines.addRect(p - w / 2, -4, w, 8).addRect(-4, p - w / 2, 8, w);
+    }
+    const stars = new Path();
+    for (const x of [-2, 2]) for (const y of [-2, 2]) stars.addCircle(x, y, 0.06);
+    return createShape(
+      merge([
+        { geometry: extrude(lines, { depth: 0 }), color: toColor(COLORS.GRID) },
+        { geometry: extrude(stars, { depth: 0 }), position: [0, 0, 0.01], color: toColor(COLORS.STAR) }
+      ]),
+      { center: false }
+    );
+  });
+
+// ── Spawning ──────────────────────────────────────────────────────────
+
+export type Scene = {
+  backdrop: Entity;
+  /** The felt, grid and star points (the same in every theme). */
+  felt: Entity[];
+  discs: (Entity | null)[];
+  hints: Entity[];
+  last: Entity;
+};
+
+const lying = (l: Layout) => FELT + (l.cell * THICK) / 2;
+const at = (l: Layout, i: number, z: number): Vec3 => {
+  const [x, y] = cellCentre(l, i);
+  return [x, y, z];
+};
+const faceUp = (p: Player) => (p === 'white' ? WHITE_UP : BLACK_UP);
+
+function spawnFelt(world: World, l: Layout): Entity[] {
+  const out = [
+    world.spawn({ mesh: feltMesh(), position: [0, 0, FELT], scale: [l.size, l.size, 1], color: toColor(COLORS.FELT), pickable: false }),
+    world.spawn({ mesh: gridMesh(), position: [0, 0, FELT + 0.02], scale: [l.cell, l.cell, 1], pickable: false })
+  ];
+  const edge = BOARD_BORDER_WIDTH;
+  const color = toColor(COLORS.BOARD_BORDER);
+  for (const side of [-1, 1]) {
+    out.push(
+      world.spawn({
+        mesh: feltMesh(),
+        position: [0, (side * (l.size + edge)) / 2, FELT],
+        scale: [l.size + edge * 2, edge, 1],
+        color,
+        pickable: false
+      })
+    );
+    out.push(world.spawn({ mesh: feltMesh(), position: [(side * (l.size + edge)) / 2, 0, FELT], scale: [edge, l.size, 1], color, pickable: false }));
+  }
+  return out;
+}
+
+export function buildScene(world: World, l: Layout, theme: GameTheme, board: Board, hints: number[], last: number): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
+  const s: Scene = {
+    backdrop,
+    felt: spawnFelt(world, l),
+    discs: new Array(64).fill(null),
+    hints: [],
+    last: world.spawn({ mesh: frameMesh(), scale: 0, color: toColor(COLORS.LAST_MOVE), pickable: false })
+  };
+  board.forEach((p, i) => {
+    if (p) placeDisc(world, l, s, i, p, false);
+  });
+  showHints(world, l, s, hints);
+  showLast(world, l, s, last);
+  return s;
+}
+
+export function removeScene(world: World, s: Scene) {
+  for (const e of [s.backdrop, ...s.felt, ...s.discs, ...s.hints, s.last]) if (e != null) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+}
+
+// ── Discs ─────────────────────────────────────────────────────────────
+
+/** A disc set down on a cell: it drops on and settles (or is just there). */
+export function placeDisc(world: World, l: Layout, s: Scene, i: number, p: Player, animate = true) {
+  const old = s.discs[i];
+  if (old != null) world.despawn(old);
+  const d = l.cell * DISC;
+  const z = lying(l);
+  const e = world.spawn({
+    mesh: discMesh(),
+    position: at(l, i, animate ? z + l.cell * 0.7 : z),
+    rotation: faceUp(p),
+    scale: [d, d, l.cell * THICK],
+    pickable: false
+  });
+  if (animate) world.animate(e, { position: at(l, i, z) }, { duration: 0.2, easing: 'bounce' });
+  s.discs[i] = e;
+}
+
+/** Captured discs turn over to `p`, a ring at a time outward from the placed disc at `from`. */
+export function flipDiscs(world: World, l: Layout, s: Scene, from: number, flips: number[], p: Player) {
+  const fr = Math.floor(from / 8);
+  const fc = from % 8;
+  const z = lying(l);
+  for (const i of flips) {
+    const e = s.discs[i];
+    if (e == null) continue;
+    const ring = Math.max(Math.abs(Math.floor(i / 8) - fr), Math.abs((i % 8) - fc));
+    world.animate(
+      e,
+      [
+        { position: at(l, i, z + l.cell * 0.45), rotation: EDGE_ON, at: 0.5 },
+        { position: at(l, i, z), rotation: faceUp(p) }
+      ],
+      { duration: FLIP_TIME, delay: PLACE_LEAD + (ring - 1) * RIPPLE, easing: 'easeInOut' }
+    );
+  }
+}
+
+/** A ring on every legal move. */
+export function showHints(world: World, l: Layout, s: Scene, hints: number[]) {
+  for (const e of s.hints) world.despawn(e);
+  const c = toColor(COLORS.HINT);
+  s.hints = hints.map((i) => world.spawn({ mesh: ringMesh(), position: at(l, i, FELT + 0.08), scale: l.cell * 0.32, color: c, pickable: false }));
+}
+
+/** The gold outline on the last move (-1: none). */
+export function showLast(world: World, l: Layout, s: Scene, last: number) {
+  if (last < 0) world.set(s.last, { scale: 0 });
+  else world.set(s.last, { position: at(l, last, FELT + 0.06), scale: l.cell - 2 });
+}
+
+/** A tap on a cell that isn't a legal move: the cell's disc (if any) shrugs. */
+export function nudge(world: World, l: Layout, s: Scene, i: number) {
+  const e = s.discs[i];
+  if (e != null) world.animate(e, { shake: l.cell * 0.05 }, { duration: 0.2 });
+}
+
+/** You won: your discs hop in a wave and confetti bursts over the board. */
+export function celebrate(world: World, l: Layout, s: Scene, board: Board) {
+  const z = lying(l);
+  board.forEach((p, i) => {
+    const e = s.discs[i];
+    if (p !== 'black' || e == null) return;
+    const delay = 0.3 + (Math.floor(i / 8) + (i % 8)) * 0.04;
+    world.animate(e, [{ position: at(l, i, z + l.cell * 0.4), at: 0.4 }, { position: at(l, i, z) }], { duration: 0.4, delay, easing: 'easeOut' });
+  });
+  effects.confetti(world, {
+    position: [0, 0, l.cell * 2],
+    count: 60,
+    size: l.cell * 0.15,
+    speed: l.size * 1.4,
+    lifetime: 1.3,
+    gravity: -l.size * 2.4,
+    colors: ['#FFD700', '#4CAF50', '#FFFFFF', '#1F7A46'].map((c) => toColor(c))
+  });
+}

package/src/games/search-grid/SearchGrid.tsx

@@ -0,0 +1,92 @@
+// The screen Word Search and Number Search share, on the Nayan engine: the board, its tiles, the 3D
+// lettering and the highlights are one 3D scene (an orthographic camera leaning back over the board),
+// under Playtura's scoreboard, the strip of entries to find, the controls and the modals. Each game
+// makes its screen with `createSearchGame`, giving its list, alphabet, sounds and words.
+//
+// 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. JS maps the finger to cells and steps the
+// clock and the world once a frame; the highlights animate in the engine's Rust core.
+import type React from 'react';
+import { useMemo } from 'react';
+import { HapticType } from '../../services/HapticsService';
+import type { SoundConfig } from '../../services/SoundsService';
+import type { GAME_IDS, GameProps } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { scoreColumn, timerColumn } from '../shared/EngineHud';
+import { toRgb } from '../shared/EngineUtils';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, LIGHT, TIME_LIMIT } from './SearchGridConstants';
+import { type Content, createGame, dispose, drag, entries, reset, setLayout, setTheme, start, tick } from './SearchGridGame';
+import { drawEntryList } from './SearchGridScene';
+
+export type SearchGameConfig = Content & {
+  gameId: GAME_IDS;
+  sounds: { START: SoundConfig; FOUND: SoundConfig; WIN: SoundConfig; GAME_OVER: SoundConfig };
+  /** 'ALL WORDS FOUND!', 'Great word hunting!', 'Find hidden words!' */
+  winTitle: string;
+  winMessage: string;
+  startSubtext: string;
+  variant: 'word' | 'number';
+  displayName: string;
+};
+
+export function createSearchGame(config: SearchGameConfig): React.FC<GameProps> {
+  const { sounds } = config;
+
+  return engineGame(config.gameId, (props) => {
+    const [score, setScore] = useLiveState(0);
+    const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
+
+    // Win or lose when it ends
+    const { theme, status, screen, gameOver } = useEngineGame(props, {
+      gameId: config.gameId,
+      create: (t) => createGame(t, config),
+      start,
+      reset,
+      dispose,
+      tick,
+      hud: (g, hud) => {
+        if (g.layout) drawEntryList(hud, entries(g), g.found, g.layout);
+      },
+      setTheme,
+      // Lay the scene out for the view and the header above it.
+      resize: (g, width, height, offset) => {
+        const l = getLayout(width, height, offset);
+        setLayout(g, l);
+        return l.boardSize;
+      },
+      drag,
+      sounds,
+      onStart: (fx) => fx(sounds.START, HapticType.MEDIUM),
+      // A time-up's sound and haptic (a win's played with its last find)
+      onOver: (fx, s) => {
+        if (s !== 'win') fx(sounds.GAME_OVER, HapticType.HEAVY);
+      },
+      wire: (g, fx) => {
+        g.onScore = setScore;
+        g.onTime = setTimeLeft;
+        g.onFind = () => fx(sounds.FOUND, HapticType.MEDIUM);
+        g.onWin = () => fx(sounds.WIN, HapticType.SUCCESS);
+      }
+    });
+
+    const background = useMemo(() => toRgb(theme.BACKGROUND), [theme.BACKGROUND]);
+    return (
+      <EngineGameScreen
+        {...screen}
+        light={LIGHT}
+        background={background}
+        columns={[scoreColumn(score), timerColumn(timeLeft, theme, 0)]}
+        subtext={config.startSubtext}
+        gameOver={gameOver({
+          title: status === 'win' ? config.winTitle : 'TIME UP!',
+          message: status === 'win' ? config.winMessage : 'You ran out of time!',
+          scoreLabel: status === 'win' ? 'You Won!' : 'Game Over',
+          score,
+          buttonText: status === 'win' ? 'Play Again!' : 'Try Again!'
+        })}
+      />
+    );
+  });
+}

package/src/games/search-grid/SearchGridConstants.ts

@@ -0,0 +1,178 @@
+// What Word Search and Number Search share: the rules, the grid's generation, colors, timings and
+// layout. Each game passes its own alphabet and list. Rules, generation and scoring match the original
+// versions (games/word-search, games/number-search), so scores carry over.
+import { getScoreBoardTop } from '../shared/EngineHud';
+import type { TiltView } from '../shared/EngineTilt';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const GRID_SIZE = 10;
+export const ITEMS = 8; // words (or numbers) hidden in each grid
+export const TIME_LIMIT = 300; // seconds
+export const FIND_POINTS = 1000;
+
+export type Cell = { row: number; col: number };
+export type Placed = { text: string; cells: Cell[] };
+
+const DIRECTIONS = [
+  [1, 0],
+  [0, 1],
+  [1, 1],
+  [-1, 1],
+  [-1, 0],
+  [0, -1],
+  [-1, -1],
+  [1, -1]
+] as const;
+
+const shuffle = <T>(items: readonly T[]): T[] => {
+  const out = [...items];
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [out[i], out[j]] = [out[j]!, out[i]!];
+  }
+  return out;
+};
+
+/**
+ * A fresh grid: `ITEMS` entries from `list` placed in random directions (each tries the directions,
+ * then the positions, in a random order, and may cross another where the characters agree), the rest
+ * filled from `alphabet`.
+ */
+export function generate(list: readonly string[], alphabet: string): { grid: string[][]; placed: Placed[] } {
+  const grid: string[][] = Array.from({ length: GRID_SIZE }, () => Array<string>(GRID_SIZE).fill(''));
+  const placed: Placed[] = [];
+  const positions: Cell[] = [];
+  for (let row = 0; row < GRID_SIZE; row++) for (let col = 0; col < GRID_SIZE; col++) positions.push({ row, col });
+  const fits = (text: string, row: number, col: number, dx: number, dy: number) => {
+    for (let i = 0; i < text.length; i++) {
+      const r = row + i * dy;
+      const c = col + i * dx;
+      if (r < 0 || r >= GRID_SIZE || c < 0 || c >= GRID_SIZE) return false;
+      const here = grid[r]![c];
+      if (here && here !== text[i]) return false;
+    }
+    return true;
+  };
+  for (const text of shuffle([...new Set(list.filter((t) => t.length <= GRID_SIZE))])) {
+    if (placed.length >= ITEMS) break;
+    search: for (const [dx, dy] of shuffle(DIRECTIONS)) {
+      for (const { row, col } of shuffle(positions)) {
+        if (!fits(text, row, col, dx, dy)) continue;
+        const cells = Array.from(text, (ch, i) => {
+          const cell = { row: row + i * dy, col: col + i * dx };
+          grid[cell.row]![cell.col] = ch;
+          return cell;
+        });
+        placed.push({ text, cells });
+        break search;
+      }
+    }
+  }
+  for (const row of grid) for (let c = 0; c < GRID_SIZE; c++) if (!row[c]) row[c] = alphabet[Math.floor(Math.random() * alphabet.length)]!;
+  return { grid, placed };
+}
+
+/** The cells from one to another along a row, column or diagonal; none if they're not on one line. */
+export function lineCells(from: Cell, to: Cell): Cell[] {
+  const dr = to.row - from.row;
+  const dc = to.col - from.col;
+  if (dr !== 0 && dc !== 0 && Math.abs(dr) !== Math.abs(dc)) return [];
+  const steps = Math.max(Math.abs(dr), Math.abs(dc));
+  const sr = Math.sign(dr);
+  const sc = Math.sign(dc);
+  return Array.from({ length: steps + 1 }, (_, i) => ({ row: from.row + i * sr, col: from.col + i * sc }));
+}
+
+/**
+ * The not-yet-found entry the selected cells spell exactly (either way along the line), if any. Any line
+ * spelling it counts, not only where it was hidden: with few characters (Number Search's ten digits) an
+ * entry often turns up again by chance, and finding that copy is just as right.
+ */
+export function matchOf(cells: Cell[], grid: string[][], placed: Placed[], found: ReadonlySet<string>): Placed | null {
+  const spelt = cells.map((c) => grid[c.row]?.[c.col] ?? '').join('');
+  const backwards = [...spelt].reverse().join('');
+  return placed.find((p) => !found.has(p.text) && (p.text === spelt || p.text === backwards)) ?? null;
+}
+
+// ── Colors ────────────────────────────────────────────────────────────
+
+/** One per entry, by its place in the list: its found highlight and its chip. */
+export const HIGHLIGHT_COLORS = [
+  'rgba(255, 59, 59, 1)',
+  'rgba(50, 205, 50, 1)',
+  'rgba(255, 215, 0, 1)',
+  'rgba(77, 166, 255, 1)',
+  'rgba(191, 90, 242, 1)',
+  'rgba(255, 149, 0, 1)'
+];
+export const SELECTION_COLOR = 'rgba(77, 166, 255, 0.85)';
+export const TILE_COLOR = '#FFFFFF';
+export const INK_COLOR = '#333333';
+export const CLASSIC_BOARD = 'rgba(255, 255, 255, 0.3)';
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** The camera leans back from straight down, so the tiles and the lettering stand up off the board. */
+export const TILT = 0.3;
+/** Lit from the upper left; surfaces facing up off the board (+z) keep their exact color. */
+export const LIGHT = frontLight([-0.4, 0.5, 1], 0.5);
+export const SELECT_TIME = 0.12; // the selection bar glides to a new end
+export const FIND_TIME = 0.32; // a found entry's tiles bounce, one after another
+
+// ── Layout (view points) ──────────────────────────────────────────────
+
+const SCOREBOARD_HEIGHT = 82;
+const CONTROLS_HEIGHT = 110;
+const PADDING = 8; // from the board's edge to the cells, as the original board
+/** Room above the board for the list of entries to find. */
+export const LIST_HEIGHT = 52;
+
+export type Layout = TiltView & {
+  boardSize: number;
+  cell: number;
+  padding: number;
+  /** Height of the tiles' top faces. */
+  tileTop: number;
+  /** Where the list goes (view points, from the top). */
+  listTop: number;
+  listWidth: number;
+};
+
+/** The board as wide as the game area (as the original board), the list above it, both centred under the scoreboard. */
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const gameWidth = gameWidthFor(width);
+  const top = getScoreBoardTop(offset) + SCOREBOARD_HEIGHT;
+  const room = Math.max(240, height - top - CONTROLS_HEIGHT);
+  const boardSize = Math.min(gameWidth, (room - LIST_HEIGHT) / Math.cos(TILT));
+  const used = LIST_HEIGHT + boardSize * Math.cos(TILT);
+  const listTop = top + (room - used) / 2;
+  const cell = (boardSize - PADDING * 2) / GRID_SIZE;
+  return {
+    width,
+    height,
+    tilt: TILT,
+    centerY: listTop + LIST_HEIGHT + (boardSize * Math.cos(TILT)) / 2,
+    boardSize,
+    cell,
+    padding: PADDING,
+    tileTop: Math.max(4, cell * 0.16),
+    listTop,
+    listWidth: gameWidth
+  };
+}
+
+/** A cell's centre on the board (row 0 along the top), in world units. */
+export function cellCentre(l: Layout, row: number, col: number): [number, number] {
+  const half = l.boardSize / 2;
+  return [-half + l.padding + (col + 0.5) * l.cell, half - l.padding - (row + 0.5) * l.cell];
+}
+
+/** The cell under a board point (world units), or null off the grid. */
+export function cellAt(l: Layout, x: number, y: number): Cell | null {
+  const half = l.boardSize / 2;
+  const col = Math.floor((x + half - l.padding) / l.cell);
+  const row = Math.floor((half - l.padding - y) / l.cell);
+  return row >= 0 && row < GRID_SIZE && col >= 0 && col < GRID_SIZE ? { row, col } : null;
+}