@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/tangram/Tangram.tsx

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

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

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