@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/game-2048/Game2048Rules.ts

@@ -0,0 +1,101 @@
+// 2048's rules, with no React or engine: the 5 x 5 grid, a random new tile (a 2, or a 4 one time in
+// ten), a slide in one direction (equal neighbours merge once, the merged tile keeping the first's id
+// and the swallowed one sliding into it), and the win and stuck checks. Ported from the original service
+// (games/game-2048), so every slide and every new tile lands as it did there.
+
+export const GRID = 5;
+export const TARGET = 1024; // reaching it wins
+const FOUR_CHANCE = 0.1;
+
+export type Tile = { id: number; value: number; row: number; col: number };
+export type Grid = (Tile | null)[][];
+/** A tile swallowed by a merge: it slides into its partner's cell, then goes. */
+export type Ghost = { id: number; value: number; fromRow: number; fromCol: number; toRow: number; toCol: number };
+export type Direction = 'up' | 'down' | 'left' | 'right';
+
+export const emptyGrid = (): Grid => Array.from({ length: GRID }, () => Array<Tile | null>(GRID).fill(null));
+
+/** A 2 (or a 4) in a random empty cell, with this id; null if the grid's full. */
+export function addRandomTile(grid: Grid, id: number): Tile | null {
+  let empty = 0;
+  for (const row of grid) for (const cell of row) if (!cell) empty++;
+  if (!empty) return null;
+  let selected = Math.floor(Math.random() * empty);
+  let row = 0,
+    col = 0;
+  outer: for (let r = 0; r < GRID; r++)
+    for (let c = 0; c < GRID; c++)
+      if (!grid[r]![c] && selected-- === 0) {
+        row = r;
+        col = c;
+        break outer;
+      }
+  const tile: Tile = { id, value: Math.random() < FOUR_CHANCE ? 4 : 2, row, col };
+  grid[row]![col] = tile;
+  return tile;
+}
+
+/** Slides every tile one way, merging equal pairs once (in place). */
+export function moveTiles(grid: Grid, direction: Direction): { moved: boolean; score: number; ghosts: Ghost[] } {
+  let moved = false;
+  let score = 0;
+  const ghosts: Ghost[] = [];
+  const horizontal = direction === 'left' || direction === 'right';
+  const reverse = direction === 'right' || direction === 'down';
+  const next = emptyGrid();
+  for (let i = 0; i < GRID; i++) {
+    const tiles: Tile[] = [];
+    for (let j = 0; j < GRID; j++) {
+      const k = reverse ? GRID - 1 - j : j;
+      const t = horizontal ? grid[i]![k] : grid[k]![i];
+      if (t) tiles.push(t);
+    }
+    const merged: (Tile | null)[] = [];
+    const swallowed: (Tile | null)[] = [];
+    for (let j = 0; j < tiles.length;) {
+      const a = tiles[j]!;
+      const b = tiles[j + 1];
+      if (b && a.value === b.value) {
+        const m = { ...a, value: a.value * 2 };
+        merged.push(m);
+        swallowed.push(b);
+        score += m.value;
+        j += 2;
+      } else {
+        merged.push(a);
+        swallowed.push(null);
+        j++;
+      }
+    }
+    while (merged.length < GRID) merged.push(null);
+    for (let j = 0; j < GRID; j++) {
+      const t = merged[j]!;
+      const k = reverse ? GRID - 1 - j : j;
+      const row = horizontal ? i : k;
+      const col = horizontal ? k : i;
+      const was = horizontal ? grid[i]![k] : grid[k]![i];
+      if (t !== was || (t && (t.row !== row || t.col !== col))) moved = true;
+      const eaten = swallowed[j];
+      if (eaten) ghosts.push({ id: eaten.id, value: eaten.value, fromRow: eaten.row, fromCol: eaten.col, toRow: row, toCol: col });
+      next[row]![col] = t ? { ...t, row, col } : null;
+    }
+  }
+  for (let r = 0; r < GRID; r++) for (let c = 0; c < GRID; c++) grid[r]![c] = next[r]![c] ?? null;
+  return { moved, score, ghosts };
+}
+
+/** No empty cell and no equal neighbours: no move left. */
+export function stuck(grid: Grid): boolean {
+  for (let r = 0; r < GRID; r++)
+    for (let c = 0; c < GRID; c++) {
+      const t = grid[r]![c];
+      if (!t) return false;
+      if (c < GRID - 1 && grid[r]![c + 1]?.value === t.value) return false;
+      if (r < GRID - 1 && grid[r + 1]![c]?.value === t.value) return false;
+    }
+  return true;
+}
+
+export const reached = (grid: Grid, target = TARGET) => grid.some((row) => row.some((t) => t !== null && t.value >= target));
+
+export const tilesOf = (grid: Grid): Tile[] => grid.flatMap((row) => row.filter((t): t is Tile => t !== null));

package/src/games/game-2048/Game2048Scene.ts

@@ -0,0 +1,206 @@
+// Everything 2048 draws: the board (a wooden board with 25 recessed slots in the classic theme, the
+// theme's board and cells otherwise) and the tiles, raised blocks in the original game's colors with their
+// value standing on top in 3D digits. Tiles glide to their cells, a swallowed tile slides into its
+// partner and goes, the merged tile pops, and new tiles grow in once the slide has landed. Seen from a
+// little in front of straight down (shared/EngineTilt: an orthographic camera leaning back, one world
+// unit per point). Every tile is a root (unscaled, so its digits keep their shape) carrying its block
+// and digits.
+import { effects, type Entity, extrude, type Model, Path, type Vec3, type World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { setBackdropTheme, spawnBackdrop } from '../shared/EngineBackdrop';
+import { spawnRaisedBlock } from '../shared/EngineBlocks';
+import { flatGlyphMesh, GLYPH_ADVANCE } from '../shared/EngineGlyphs';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { placeTiltedBackdrop } from '../shared/EngineTilt';
+import { toColor } from '../shared/EngineUtils';
+import { cellCentre, COLORS, type Layout, MERGE_POP, SLIDE_TIME, TILE_HEIGHT, tileColors } from './Game2048Constants';
+import { type Ghost, GRID, type Tile } from './Game2048Rules';
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('game-2048/Game2048Scene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+const BOARD_DEPTH = 12;
+const BACKDROP_DEPTH = 30;
+const SURFACE = 1; // the board's top, where the tiles stand
+const SPAWN_FROM = 0.2;
+
+const panelMesh = (w: number, radius: number, depth: number) =>
+  cached(`g2048-panel:${w}:${radius}:${depth}`, () =>
+    createShape(extrude(new Path().addRoundedRect(-w / 2, -w / 2, w, w, radius), { depth }), { shine: 0 })
+  );
+
+// ── Spawning ──────────────────────────────────────────────────────────
+
+type TileView = { root: Entity; block: Entity; digits: Entity[]; value: number; row: number; col: number };
+export type Scene = { backdrop: Entity; board: Entity[]; tiles: Map<number, TileView> };
+
+const at = (l: Layout, row: number, col: number): Vec3 => {
+  const [x, y] = cellCentre(l, row, col);
+  return [x, y, SURFACE];
+};
+
+function spawnBoard(world: World, l: Layout, theme: GameTheme): Entity[] {
+  const out: Entity[] = [];
+  const add = (o: Parameters<World['spawn']>[0]) => out.push(world.spawn({ pickable: false, ...o }));
+  const classic = theme.mode === 'classic';
+  add({
+    mesh: panelMesh(l.size + l.pad * 2, classic ? 14 : 8, BOARD_DEPTH),
+    position: [0, 0, -BOARD_DEPTH / 2],
+    color: toColor(classic ? COLORS.FRAME : theme.BOARD.SURFACE)
+  });
+  for (let r = 0; r < GRID; r++)
+    for (let c = 0; c < GRID; c++) {
+      const [x, y] = cellCentre(l, r, c);
+      add({
+        mesh: panelMesh(l.tile, Math.min(8, l.tile * 0.12), 1),
+        position: [x, y, 0.5],
+        color: toColor(classic ? COLORS.SLOT : theme.BOARD.CELL_EMPTY)
+      });
+    }
+  return out;
+}
+
+/** A value's digits, sized to fit the tile, printed flat and matte on its face (crisp from straight above). */
+function spawnDigits(world: World, l: Layout, root: Entity, value: number): Entity[] {
+  const text = String(value);
+  const n = text.length;
+  const size = l.tile * (n <= 2 ? 0.29 : n === 3 ? 0.24 : n === 4 ? 0.19 : 0.155);
+  const step = size * GLYPH_ADVANCE;
+  const color = toColor(tileColors(value)[1]);
+  const z = l.tile * TILE_HEIGHT + 0.6;
+  return [...text].map((ch, i) =>
+    world.spawn({ mesh: flatGlyphMesh(ch), parent: root, position: [(i - (n - 1) / 2) * step, 0, z], scale: size, color, pickable: false })
+  );
+}
+
+function spawnTile(world: World, l: Layout, t: Tile): TileView {
+  const h = l.tile * TILE_HEIGHT;
+  const root = world.spawn({ mesh: 'none', position: at(l, t.row, t.col), pickable: false });
+  const block = spawnRaisedBlock(world, {
+    parent: root,
+    position: [0, 0, h / 2],
+    size: [l.tile, l.tile, h],
+    color: toColor(tileColors(t.value)[0]),
+    gloss: false,
+    shadow: false
+  });
+  return { root, block, digits: spawnDigits(world, l, root, t.value), value: t.value, row: t.row, col: t.col };
+}
+
+export function buildScene(world: World, l: Layout, theme: GameTheme, tiles: Tile[]): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
+  const s: Scene = { backdrop, board: spawnBoard(world, l, theme), tiles: new Map() };
+  for (const t of tiles) s.tiles.set(t.id, spawnTile(world, l, t));
+  return s;
+}
+
+export function removeScene(world: World, s: Scene) {
+  for (const e of [s.backdrop, ...s.board, ...Array.from(s.tiles.values(), (t) => t.root)]) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, l: Layout, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+  for (const e of s.board) world.despawn(e);
+  s.board = spawnBoard(world, l, theme);
+}
+
+// ── Motion ────────────────────────────────────────────────────────────
+
+/** A fresh board: the old tiles go, the new ones grow in. */
+export function resetTiles(world: World, l: Layout, s: Scene, tiles: Tile[]) {
+  for (const v of s.tiles.values()) world.despawn(v.root);
+  s.tiles.clear();
+  for (const t of tiles) grow(world, s, t, spawnTile(world, l, t), 0);
+}
+
+function grow(world: World, s: Scene, t: Tile, v: TileView, delay: number) {
+  s.tiles.set(t.id, v);
+  world.set(v.root, { scale: SPAWN_FROM });
+  world.animate(v.root, { scale: 1 }, { duration: 0.18, delay, easing: 'back' });
+}
+
+/**
+ * After a slide: every tile glides to its cell; a swallowed tile slides into its partner and goes; a
+ * merged tile takes its new value and pops as it lands; a new tile grows in after the slide.
+ */
+export function slideTiles(world: World, l: Layout, s: Scene, tiles: Tile[], ghosts: Ghost[]) {
+  for (const g of ghosts) {
+    const v = s.tiles.get(g.id);
+    if (!v) continue;
+    s.tiles.delete(g.id);
+    world
+      .animate(v.root, { position: at(l, g.toRow, g.toCol) }, { duration: SLIDE_TIME, easing: 'easeOut' })
+      .then(() => {
+        if (world.has(v.root)) world.despawn(v.root);
+      })
+      .catch(() => {});
+  }
+  for (const t of tiles) {
+    const v = s.tiles.get(t.id);
+    if (!v) {
+      grow(world, s, t, spawnTile(world, l, t), SLIDE_TIME);
+      continue;
+    }
+    if (v.row !== t.row || v.col !== t.col) {
+      world.animate(v.root, { position: at(l, t.row, t.col) }, { duration: SLIDE_TIME, easing: 'easeOut' });
+      v.row = t.row;
+      v.col = t.col;
+    }
+    if (v.value !== t.value) {
+      // Merged: the new value, its color as it lands, and a pop
+      for (const d of v.digits) world.despawn(d);
+      v.digits = spawnDigits(world, l, v.root, t.value);
+      v.value = t.value;
+      world.animate(v.block, { color: toColor(tileColors(t.value)[0]) }, { duration: 0.08, delay: SLIDE_TIME * 0.6 });
+      world.animate(v.root, [{ scale: MERGE_POP, at: 0.35 }, { scale: 1 }], { duration: 0.22, delay: SLIDE_TIME, easing: 'easeOut' });
+    }
+  }
+}
+
+/** A swipe that moves nothing: the board gives a little shake. */
+export function bump(world: World, l: Layout, s: Scene) {
+  world.animate(
+    Array.from(s.tiles.values(), (v) => v.root),
+    { shake: l.tile * 0.04 },
+    { duration: 0.2 }
+  );
+}
+
+/** The target (1024) reached: the tiles hop in a wave across the board, and confetti bursts over it. */
+export function celebrate(world: World, l: Layout, s: Scene) {
+  for (const v of s.tiles.values()) {
+    const [x, y, z] = at(l, v.row, v.col);
+    world.animate(
+      v.root,
+      [
+        { position: [x, y, z + l.tile * 0.3], scale: 1.05, at: 0.4 },
+        { position: [x, y, z], scale: 1 }
+      ],
+      { duration: 0.45, delay: SLIDE_TIME + 0.15 + (v.row + v.col) * 0.05, easing: 'easeOut' }
+    );
+  }
+  effects.confetti(world, {
+    position: [0, 0, l.tile],
+    count: 70,
+    size: l.tile * 0.1,
+    speed: l.size * 1.4,
+    lifetime: 1.3,
+    gravity: -l.size * 2.4,
+    colors: ['#edc22e', '#f67c5f', '#f2b179', '#FFFFFF'].map((c) => toColor(c))
+  });
+}
+
+/** Out of time, or out of moves: the tiles dim. */
+export function dim(world: World, s: Scene) {
+  for (const v of s.tiles.values()) {
+    const c = toColor(tileColors(v.value)[0]);
+    world.animate(v.block, { color: [c[0] * 0.55, c[1] * 0.55, c[2] * 0.6, 1] }, { duration: 0.4, delay: SLIDE_TIME });
+  }
+}

package/src/games/knife-hit/KnifeHit.tsx

@@ -0,0 +1,78 @@
+// Knife Hit's screen, on the Nayan engine: the log, its knives and apple, and the knife in hand are one
+// 3D scene (an orthographic camera looking down a little from in front), under Playtura's scoreboard,
+// controls and modals. The play is in KnifeHitGame.ts, what it draws in KnifeHitScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place, so the GPU view is
+// never rebuilt. JS steps the log and the knife (a few numbers) and the world once a frame; sticks,
+// clashes and bursts animate in the engine's Rust core.
+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, textColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, KNIVES_PER_ROUND, LIGHT, TIME_LIMIT } from './KnifeHitConstants';
+import { createGame, dispose, type GameEvent, reset, setLayout, setTheme, start, throwKnife, tick } from './KnifeHitGame';
+
+const SOUNDS = GAME_SOUNDS.KNIFE_HIT;
+
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
+  throw: { sound: SOUNDS.THROW, haptic: HapticType.LIGHT },
+  stick: { sound: SOUNDS.STICK, haptic: HapticType.MEDIUM },
+  apple: { sound: SOUNDS.APPLE, haptic: HapticType.SUCCESS },
+  clash: { sound: SOUNDS.HIT, haptic: HapticType.ERROR }
+};
+
+export const KnifeHit = engineGame(GAME_IDS.KNIFE_HIT, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
+  const [knives, setKnives] = useLiveState(KNIVES_PER_ROUND);
+
+  // Win or lose when the round ends
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.KNIFE_HIT,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.gameWidth;
+    },
+    // Throws on touch-down, as the original game did
+    drag: (g, e) => {
+      if (e.phase === 'start') throwKnife(g);
+    },
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.SUCCESS),
+    onStop: (fx) => fx(null, HapticType.MEDIUM),
+    onOver: (fx, s) => fx(s === 'win' ? GAME_SOUNDS.WELL_DONE : SOUNDS.GAME_OVER, s === 'win' ? HapticType.SUCCESS : HapticType.ERROR),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onTime = setTimeLeft;
+      g.onKnives = setKnives;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), textColumn('KNIVES', knives), timerColumn(timeLeft, theme)]}
+      subtext="Tap to throw knives!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'PERFECT!' : 'GAME OVER',
+        message: status === 'win' ? 'All knives stuck!' : 'Hit another knife!',
+        scoreLabel: 'Final Score',
+        score,
+        buttonText: 'Throw Again!'
+      })}
+    />
+  );
+});

package/src/games/knife-hit/KnifeHitConstants.ts

@@ -0,0 +1,89 @@
+// Knife Hit's rules, physics, timings and layout. Rules, speeds (per 60 Hz tick, in points) and scoring
+// match the original version (games/knife-hit), so scores and feel carry over.
+import type { TiltView } from '../shared/EngineTilt';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const TIME_LIMIT = 120; // seconds; running out is a loss
+export const KNIVES_PER_ROUND = 8;
+export const OBSTACLES = 3; // knives already in the log, evenly round it
+export const POINTS_PER_KNIFE = 1500;
+export const APPLE_BONUS = 1000;
+export const APPLE_CHANCE = 0.4;
+export const COLLISION_ANGLE = 0.18; // radians: a knife this near another clashes
+export const APPLE_REACH = COLLISION_ANGLE * 1.5;
+
+// ── Physics (per 60 Hz tick) ──────────────────────────────────────────
+
+export const STEP_MS = 1000 / 60;
+export const STEP_TOLERANCE_MS = 2;
+export const MAX_PENDING_MS = 50;
+export const ROTATION_SPEED = 0.025; // radians a tick, varied a little each round
+export const ROTATION_SPREAD = 0.008;
+export const THROW_SPEED = 18; // points a tick
+export const FLIP_CHANCE = 0.4; // each turn interval, of the log reversing
+export const TURN_INTERVAL = [100, 160] as const; // ticks, picked per round
+
+// ── Feel (seconds) ────────────────────────────────────────────────────
+
+export const BOUNCE_TIME = 0.52; // a clashing knife spins away
+export const KICK_POINTS = 4; // the log jumps this much at each stick
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** The camera looks down a touch from in front, so the log's bark and the knives' depth show. */
+export const TILT = -0.22;
+/** Lit from the upper left; faces toward the camera (+z) keep their exact color. */
+export const LIGHT = frontLight([-0.45, 0.55, 1], 0.45);
+
+// ── Layout (view points; the play area is the original game's canvas, y down) ──
+
+const TABLET_WIDTH = 640;
+
+export type Layout = TiltView & {
+  /** The play area's top in the view, and its size (the original canvas: the game width x 500, 650 on a tablet). */
+  top: number;
+  gameWidth: number;
+  areaHeight: number;
+  logRadius: number;
+  /** The log's centre, and where a knife waits to be thrown, in play-area points. */
+  logX: number;
+  logY: number;
+  knifeStartY: number;
+  knifeLength: number;
+  knifeWidth: number;
+  tipLength: number;
+  appleRadius: number;
+};
+
+/** The play area centred in the view below the header (as the original game laid its canvas out). */
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const tablet = width > TABLET_WIDTH;
+  const areaHeight = tablet ? 650 : 500;
+  const top = offset + Math.max(0, (height - offset - areaHeight) / 2);
+  return {
+    width,
+    height,
+    tilt: TILT,
+    centerY: height / 2,
+    top,
+    gameWidth: gameWidthFor(width),
+    areaHeight,
+    logRadius: tablet ? 90 : 70,
+    logX: width / 2,
+    logY: areaHeight * (tablet ? 0.26 : 0.24),
+    knifeStartY: areaHeight - 70,
+    knifeLength: tablet ? 60 : 50,
+    knifeWidth: tablet ? 10 : 8,
+    tipLength: 16,
+    appleRadius: tablet ? 14 : 11
+  };
+}
+
+/** An angle in -PI..PI. */
+export function normalizeAngle(a: number) {
+  while (a > Math.PI) a -= 2 * Math.PI;
+  while (a < -Math.PI) a += 2 * Math.PI;
+  return a;
+}