@nayan-ui/games 1.18.0 → 1.20.0

package/src/games/tangram/Tangram.tsx

@@ -0,0 +1,79 @@
+// Tangram's screen, on the Nayan engine: the silhouette and the seven tans are one 3D scene
+// (an orthographic camera directly over the board), under Playtura's scoreboard, controls and
+// modals. The play is in TangramGame.ts (the levels and snapping in TangramRules.ts), what it draws in
+// TangramScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again set the level out in place and a theme
+// change repaints the board, so the GPU view is never rebuilt. Tans glide, turn and pop in the engine's
+// Rust core; JS reads the finger and steps the clock and 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, textColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { GAME_DURATION, getLayout, LIGHT } from './TangramConstants';
+import { createGame, dispose, drag, type GameEvent, playAgain, setLayout, setTheme, start, stop, tick } from './TangramGame';
+import { TOTAL_PIECES } from './TangramRules';
+
+const SOUNDS = GAME_SOUNDS.TANGRAM;
+
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
+  rotate: { sound: SOUNDS.ROTATE, haptic: HapticType.LIGHT },
+  place: { sound: SOUNDS.PLACE, haptic: HapticType.SUCCESS },
+  wrong: { sound: SOUNDS.WRONG, haptic: HapticType.WARNING },
+  win: { sound: SOUNDS.WIN, haptic: HapticType.SUCCESS },
+  lose: { sound: SOUNDS.GAME_OVER, haptic: HapticType.ERROR }
+};
+
+export const Tangram = engineGame(GAME_IDS.TANGRAM, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [placed, setPlaced] = useLiveState(0);
+  const [time, setTime] = useLiveState(GAME_DURATION);
+
+  // Win or lose as the puzzle ends, with the score so far
+  const { game, theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.TANGRAM,
+    create: createGame,
+    start,
+    // Stop: back to the first silhouette
+    reset: stop,
+    // Play Again: the next silhouette after a win, the same one after running out of time
+    replay: playAgain,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.boardW;
+    },
+    drag,
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onPlaced = setPlaced;
+      g.onTime = setTime;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), textColumn('PIECES', `${placed}/${TOTAL_PIECES}`), timerColumn(time, theme)]}
+      subtext="Fit all seven pieces!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'PUZZLE SOLVED!' : 'TIME UP!',
+        message: status === 'win' ? 'You reassembled the shape!' : 'You ran out of time!',
+        scoreLabel: 'Score',
+        score: game.score,
+        buttonText: status === 'win' ? 'Next Puzzle!' : 'Try Again!'
+      })}
+    />
+  );
+});

package/src/games/tangram/TangramConstants.ts

@@ -0,0 +1,64 @@
+// Tangram's rules, timings, colors and layout. The rules and scoring match the original version
+// (games/tangram), so scores carry over; the levels themselves are in TangramRules.ts.
+import { getScoreBoardTop } from '../shared/EngineHud';
+import type { TiltView } from '../shared/EngineTilt';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+import { RIM_RADIUS, TOTAL_BOARD_UNITS } from './TangramRules';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const GAME_DURATION = 120; // seconds per silhouette
+export const POINTS_PER_PIECE = 1000;
+
+// ── Touch and feel (as the original board) ────────────────────────────────
+
+export { TRAY_SCALE, RIM_RADIUS } from './TangramRules'; // compact previews; selected pieces grow to full size
+export const TAP_MAX = 0.25; // seconds: a quick touch that doesn't wander turns a tan 45°
+export const TAP_SLOP = 10; // points a finger may wander and still tap
+export const ROTATE_STEP = 45; // degrees per tap
+export const ROTATE_TIME = 0.18;
+export const SNAP_TIME = 0.16;
+export const ENTRY_STAGGER = 0.045; // between the tans growing in at the start of a level
+export const WIN_DELAY = 0.22; // the solved shape's wave starts after the last tan lands
+export const WIN_STAGGER = 0.09; // between each tan's pop in the wave
+
+// ── Colors ────────────────────────────────────────────────────────────
+
+export const COLORS = {
+  CLASSIC_SLOT: 'rgba(255, 255, 255, 0.12)',
+  CLASSIC_SLOT_EDGE: 'rgba(255, 255, 255, 0.30)'
+} as const;
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** A directly overhead camera and light keep shapes and finger positions aligned. */
+export const TILT = 0;
+export const LIGHT = frontLight([0, 0, 1], 0.45);
+/** A tan's thickness, and the gap between stacked tans in the tray, in tan units. */
+export const PIECE_DEPTH = 0.2;
+export const STACK_STEP = 0.14;
+/** How high a tan rises off the board while held. */
+export const HELD_HEIGHT = 1.2;
+
+// ── Layout (view points; the world is one unit per point) ─────────────
+
+const SCOREBOARD_HEIGHT = 82;
+const CONTROLS_HEIGHT = 88; // the controls occupy the bottom 80 points; keep an 8-point gap
+
+export type Layout = TiltView & { unit: number; boardW: number; boardH: number };
+
+/** Fit the entire grid, including its outline, inside the game width. */
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const top = getScoreBoardTop(offset) + SCOREBOARD_HEIGHT;
+  const room = Math.max(240, height - top - CONTROLS_HEIGHT);
+  const gameWidth = gameWidthFor(width);
+  const byWidth = gameWidth / (4 + RIM_RADIUS * 2);
+  const byHeight = room / Math.cos(TILT) / TOTAL_BOARD_UNITS;
+  const unit = Math.min(byWidth, byHeight);
+  return { width, height, tilt: TILT, centerY: top + room / 2, unit, boardW: gameWidth, boardH: unit * TOTAL_BOARD_UNITS };
+}
+
+/** A board point (x right, y down from the board's top-left) in the world (the board centred on the origin, y up). */
+export const toWorld = (l: Layout, x: number, y: number): [number, number] => [x - l.boardW / 2, l.boardH / 2 - y];
+/** And back. */
+export const toBoard = (l: Layout, wx: number, wy: number): [number, number] => [wx + l.boardW / 2, l.boardH / 2 - wy];

package/src/games/tangram/TangramGame.ts

@@ -0,0 +1,356 @@
+// Tangram's play, with no React: build a game with `createGame`, give it a layout, `start` it and `tick`
+// it every frame. Drag the seven tans from the tray into the silhouette; tap one to turn it 45°. A tan
+// dropped near a free slot of its shape at a close enough turn snaps in (1,000 points); near one at the
+// wrong turn, it wiggles. Fill the shape inside two minutes to win; a win's Next Puzzle moves on a level.
+//
+// The levels and the snap are the original version's (TangramRules.ts); every touch does what it did there.
+import { type Camera, type DragEvent, World } from '@nayan-ui/engine';
+import { calculateTimeBasedScore } from '../../services/ScoringService';
+import type { GameTheme } from '../../services/ThemeService';
+import { aimTilted, unproject } from '../shared/EngineTilt';
+import {
+  ENTRY_STAGGER,
+  GAME_DURATION,
+  HELD_HEIGHT,
+  type Layout,
+  PIECE_DEPTH,
+  POINTS_PER_PIECE,
+  RIM_RADIUS,
+  ROTATE_STEP,
+  ROTATE_TIME,
+  SNAP_TIME,
+  STACK_STEP,
+  TAP_MAX,
+  TAP_SLOP,
+  toBoard,
+  TRAY_SCALE,
+  WIN_DELAY,
+  WIN_STAGGER
+} from './TangramConstants';
+import { claimSlot, generateLevel, insidePiece, rotatePt, type TangramLevel, TOTAL_PIECES } from './TangramRules';
+import { buildScene, celebrate, dim, enter, moveTo, pop, type Pose, removeScene, type Scene, setPose, setSceneTheme, wiggle } from './TangramScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+/** rotate: a tan turned; place: one snapped in; wrong: dropped over its slot at the wrong turn; win / lose: how it ended. */
+export type GameEvent = 'rotate' | 'place' | 'wrong' | 'win' | 'lose';
+
+const WORLD_CAPACITY = 200; // backdrop, 14 slot parts, 7 tans with rims, and confetti
+
+/** A tan's state: its centre (board points), its turn (degrees, clockwise), and whether it's in a slot. */
+type Tan = { x: number; y: number; rot: number; placed: boolean };
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, 0, 240], target: [0, 0, 0], fov: 1, ortho: 1 };
+  const g = {
+    world,
+    camera,
+    theme,
+    layout: null as Layout | null,
+    scene: null as Scene | null,
+    phase: 'ready' as Phase,
+    level: 0,
+    data: null as TangramLevel | null,
+    tans: [] as Tan[],
+    occupied: [] as boolean[],
+    /** The tan last picked up (shown full size, on top), or -1. */
+    active: -1,
+    /** A finger on a tan: where it went down (view and board points), when, and whether it's dragging. */
+    held: null as { id: number; sx: number; sy: number; bx: number; by: number; ox: number; oy: number; at: number; moved: boolean } | null,
+    placed: 0,
+    /** 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,
+    /** Seconds since the game was made, for telling taps from holds. */
+    clock: 0,
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number) => {},
+    onPlaced: (_n: number) => {},
+    onTime: (_t: number) => {},
+    onEvent: (_e: GameEvent) => {}
+  };
+  world.scoreboard.reset(0, GAME_DURATION);
+  world.scoreboard.handlers = {
+    onSecond: (t) => g.onTime(t),
+    onTimeUp: () => g.phase === 'playing' && end(g, false)
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+// ── Poses ─────────────────────────────────────────────────────────────
+
+/** How a tan is drawn: placed ones lie in their slot, the active one on top at full size, the rest small in the tray (higher ids above). */
+function poseOf(g: Game, id: number): Pose {
+  const t = g.tans[id]!;
+  const held = g.held?.id === id && g.held.moved;
+  if (t.placed) return { x: t.x, y: t.y, rot: t.rot, scale: 1, lift: 0 };
+  if (held) return { x: t.x, y: t.y, rot: t.rot, scale: 1.05, lift: HELD_HEIGHT };
+  if (g.active === id) return { x: t.x, y: t.y, rot: t.rot, scale: 1, lift: STACK_STEP * (TOTAL_PIECES + 2) };
+  return { x: t.x, y: t.y, rot: t.rot, scale: TRAY_SCALE, lift: STACK_STEP * (id + 1) };
+}
+
+const allPoses = (g: Game) => g.tans.map((_, i) => poseOf(g, i));
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Lays the board out for the view (first layout, header height, rotation): the level is rebuilt for its size. */
+export function setLayout(g: Game, l: Layout) {
+  const first = !g.layout;
+  if (g.held) {
+    g.held = null;
+    g.active = -1;
+  }
+  g.layout = l;
+  aimTilted(g.camera, l);
+  if (first) setupLevel(g, g.level);
+  else rebuild(g, false);
+}
+
+export function setTheme(g: Game, theme: GameTheme) {
+  g.theme = theme;
+  if (g.scene) setSceneTheme(g.world, g.scene, theme);
+}
+
+/** The scene for the current level (after a level change or a new layout); tans in the tray, placed ones in their slots. */
+function rebuild(g: Game, entering: boolean) {
+  const l = g.layout;
+  if (!l) return;
+  const old = g.data;
+  g.data = generateLevel(g.level, l.unit, l.boardW, l.boardH);
+  if (old && old.pieces.length === g.data.pieces.length && !entering) {
+    // Same level at a new size: tans keep their slot or tray spot
+    g.tans = g.tans.map((t, i) => {
+      const p = g.data!.pieces[i]!;
+      if (!t.placed) return { ...t, x: p.scatterCx, y: p.scatterCy };
+      const slot = g.occupied.findIndex((o, k) => o && Math.hypot(old.pieces[k]!.targetCx - t.x, old.pieces[k]!.targetCy - t.y) < 1);
+      const s = g.data!.pieces[slot] ?? p;
+      return { ...t, x: s.targetCx, y: s.targetCy };
+    });
+  }
+  if (g.scene) removeScene(g.world, g.scene);
+  g.scene = buildScene(g.world, l, g.theme, g.data, allPoses(g));
+  if (entering) enter(g.world, l, g.scene, allPoses(g), ENTRY_STAGGER);
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+/** A level set out, not started: its silhouette, and every tan in the tray. */
+function setupLevel(g: Game, level: number) {
+  const l = g.layout;
+  g.world.cancelTimers();
+  g.level = level;
+  g.held = null;
+  g.active = -1;
+  g.placed = 0;
+  g.world.scoreboard.reset(0, GAME_DURATION);
+  g.won = false;
+  if (l) {
+    g.data = generateLevel(level, l.unit, l.boardW, l.boardH);
+    g.tans = g.data.pieces.map((p) => ({ x: p.scatterCx, y: p.scatterCy, rot: p.initialRot, placed: false }));
+    g.occupied = g.data.pieces.map(() => false);
+    rebuild(g, true);
+  }
+  g.onScore(0);
+  g.onPlaced(0);
+  g.onTime(GAME_DURATION);
+}
+
+export function start(g: Game) {
+  if (g.phase !== 'ready') return;
+  g.phase = 'playing';
+  g.world.scoreboard.startCountdown(GAME_DURATION);
+  g.onPhase('playing');
+}
+
+/** Stop: back to the first silhouette, set out afresh (as the original game). */
+export function stop(g: Game) {
+  g.phase = 'ready';
+  setupLevel(g, 0);
+  g.onPhase('ready');
+}
+
+/** Play Again: the next silhouette after a win, the same one again after running out of time. */
+export function playAgain(g: Game) {
+  const next = g.won ? g.level + 1 : g.level;
+  g.phase = 'ready';
+  setupLevel(g, next);
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.dispose();
+}
+
+export function tick(g: Game, dt: number) {
+  if (g.world.isDisposed) return;
+  g.clock += Math.min(dt, 0.25);
+  g.world.update(dt);
+}
+
+function end(g: Game, won: boolean) {
+  g.world.scoreboard.stop();
+  g.won = won;
+  g.phase = 'over';
+  const { layout: l, scene: s, data } = g;
+  const heldId = g.held?.id;
+  g.held = null;
+  if (heldId !== undefined) settle(g, heldId);
+  if (l && s && data) {
+    if (won) celebrate(g.world, l, s, data, SNAP_TIME + WIN_DELAY, WIN_STAGGER);
+    else
+      dim(
+        g.world,
+        s,
+        g.tans.flatMap((t, i) => (t.placed ? [] : [i])),
+        data.pieces.map((p) => p.color)
+      );
+  }
+  g.onPhase('over');
+  g.onEvent(won ? 'win' : 'lose');
+}
+
+// ── The finger ────────────────────────────────────────────────────────
+
+/** The board point under a view point, on the tans' tops. */
+function boardPoint(g: Game, sx: number, sy: number): [number, number] {
+  const l = g.layout!;
+  const [wx, wy] = unproject(l, sx, sy, 0.3 + l.unit * PIECE_DEPTH * 2);
+  return toBoard(l, wx, wy);
+}
+
+/** The tan under a board point: the active one first, then the higher ids (drawn above), never a placed one. */
+export function tanAt(g: Game, bx: number, by: number): number {
+  const { data, layout: l } = g;
+  if (!data || !l) return -1;
+  const order = [g.active, ...[6, 5, 4, 3, 2, 1, 0].filter((i) => i !== g.active)].filter((i) => i >= 0);
+  // An exact shape hit wins before finger padding is considered; a neighbour's margin cannot steal it.
+  for (const margin of [0, l.unit * 0.15]) {
+    for (const id of order) {
+      const t = g.tans[id]!;
+      if (t.placed) continue;
+      const scale = g.held?.id === id && g.held.moved ? 1.05 : g.active === id ? 1 : TRAY_SCALE;
+      if (insidePiece(data.pieces[id]!.localPoints, t.x, t.y, t.rot, scale, bx, by, margin)) return id;
+    }
+  }
+  return -1;
+}
+
+export function drag(g: Game, e: DragEvent) {
+  const { layout: l, scene: s } = g;
+  if (!l || !s) return;
+  if (e.phase === 'start') {
+    if (g.phase !== 'playing') return;
+    const [bx, by] = boardPoint(g, e.x, e.y);
+    const id = tanAt(g, bx, by);
+    if (id < 0) return;
+    const t = g.tans[id]!;
+    const prev = g.active;
+    g.held = { id, sx: e.x, sy: e.y, bx, by, ox: t.x, oy: t.y, at: g.clock, moved: false };
+    // Picking a tan up grows it to full size and brings it to the front; the one before goes back down
+    g.active = id;
+    if (prev >= 0 && prev !== id && !g.tans[prev]!.placed) moveTo(g.world, l, s, prev, poseOf(g, prev), 0.14);
+    moveTo(g.world, l, s, id, poseOf(g, id), 0.14);
+    return;
+  }
+  const h = g.held;
+  if (!h) return;
+  const t = g.tans[h.id]!;
+  if (e.phase === 'end' && e.cancelled) {
+    t.x = h.ox;
+    t.y = h.oy;
+    g.held = null;
+    return settle(g, h.id);
+  }
+  if (!h.moved && Math.hypot(e.x - h.sx, e.y - h.sy) > TAP_SLOP) {
+    h.moved = true;
+    moveTo(g.world, l, s, h.id, poseOf(g, h.id), 0.1);
+  }
+  if (h.moved) {
+    const [bx, by] = boardPoint(g, e.x, e.y);
+    t.x = h.ox + (bx - h.bx);
+    t.y = h.oy + (by - h.by);
+    if (e.phase !== 'end') {
+      setPose(g.world, l, s, h.id, poseOf(g, h.id));
+      return;
+    }
+    g.held = null;
+    return drop(g, h.id);
+  }
+  if (e.phase !== 'end') return;
+  g.held = null;
+  if (g.clock - h.at < TAP_MAX) rotate(g, h.id);
+}
+
+/** A tap: the tan turns 45° (it's already been picked up, so it's full size). */
+function rotate(g: Game, id: number) {
+  const { layout: l, scene: s } = g;
+  const t = g.tans[id]!;
+  t.rot += ROTATE_STEP;
+  keepInView(g, id);
+  if (l && s) moveTo(g.world, l, s, id, poseOf(g, id), ROTATE_TIME, 'back');
+  g.onEvent('rotate');
+}
+
+/** A tan let go where it is (no slot): it settles down onto the board there. */
+function settle(g: Game, id: number) {
+  keepInView(g, id);
+  if (g.layout && g.scene) moveTo(g.world, g.layout, g.scene, id, poseOf(g, id), 0.12);
+}
+
+/** Loose pieces can still be arranged freely, but cannot be lost beyond the visible board. */
+function keepInView(g: Game, id: number) {
+  const l = g.layout,
+    data = g.data;
+  if (!l || !data) return;
+  const t = g.tans[id]!,
+    scale = poseOf(g, id).scale;
+  const points = data.pieces[id]!.localPoints.map((p) => rotatePt(p.x * scale, p.y * scale, t.rot, 0, 0));
+  const xs = points.map((p) => p.x),
+    ys = points.map((p) => p.y);
+  const rim = l.unit * scale * RIM_RADIUS;
+  t.x = Math.max(rim - Math.min(...xs), Math.min(l.boardW - rim - Math.max(...xs), t.x));
+  t.y = Math.max(rim - Math.min(...ys), Math.min(l.boardH - rim - Math.max(...ys), t.y));
+}
+
+/** A tan let go: into the nearest free slot of its shape if it's close and turned right; a wiggle if it's turned wrong. */
+function drop(g: Game, id: number) {
+  const { layout: l, scene: s, data } = g;
+  if (!l || !s || !data || g.phase !== 'playing') return settle(g, id);
+  const t = g.tans[id]!;
+  const claimed = claimSlot(data, g.occupied, l.unit, data.pieces[id]!.type, t.x, t.y, t.rot);
+  if (claimed && claimed !== 'nudge') {
+    t.placed = true;
+    t.x = claimed.cx;
+    t.y = claimed.cy;
+    t.rot = claimed.rot;
+    if (g.active === id) g.active = -1;
+    moveTo(g.world, l, s, id, poseOf(g, id), SNAP_TIME);
+    pop(g.world, l, s, id, 0.14);
+    g.onEvent('place');
+    placePiece(g);
+    return;
+  }
+  settle(g, id);
+  if (claimed === 'nudge') {
+    wiggle(g.world, s, id, t.rot);
+    g.onEvent('wrong');
+  }
+}
+
+/** A tan placed: 1,000 points; the seventh wins, scored by the time it took (as the original store). */
+function placePiece(g: Game) {
+  g.placed += 1;
+  g.world.scoreboard.add(POINTS_PER_PIECE);
+  const won = g.placed >= TOTAL_PIECES;
+  if (won) g.world.scoreboard.set(calculateTimeBasedScore(GAME_DURATION - g.timeLeft, GAME_DURATION, g.score));
+  g.onPlaced(g.placed);
+  g.onScore(g.score);
+  if (won) end(g, true);
+}