@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/reversi/ReversiScene.ts

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

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

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