@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/memory-match/MemoryMatch.tsx

@@ -1,77 +0,0 @@
-// Memory Match's screen, on the Nayan engine: the table, its twenty cards and their fruit are one 3D
-// scene (an orthographic camera leaning back over the table), under Playtura's scoreboard, controls and
-// modals. The play is in MemoryMatchGame.ts (the deck in MemoryMatchRules.ts), what it draws in
-// MemoryMatchScene.ts.
-//
-// One world serves the whole visit: Start, Stop and Play Again re-deal it in place and a theme change
-// repaints the backdrop, so the GPU view is never rebuilt. Cards flip, pulse and shake in the engine's
-// Rust core; JS reads the finger and steps the clock once a frame.
-import { HapticType } from '../../services/HapticsService';
-import { GAME_SOUNDS } from '../../services/SoundsService';
-import { GAME_IDS, isTablet } 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 './MemoryMatchConstants';
-import { createGame, dispose, drag, type GameEvent, reset, setLayout, setTheme, start, tick } from './MemoryMatchGame';
-
-const SOUNDS = GAME_SOUNDS.MEMORY_MATCH;
-
-/** Each event's sound and haptic, as the original version played them. */
-const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
-  flip: { sound: SOUNDS.FLIP, haptic: HapticType.LIGHT },
-  match: { sound: SOUNDS.MATCH, 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 MemoryMatch = engineGame(GAME_IDS.MEMORY_MATCH, (props) => {
-  const [score, setScore] = useLiveState(0);
-  const [pairs, setPairs] = useLiveState<{ matched: number; total: number } | null>(null);
-  const [time, setTime] = useLiveState(GAME_DURATION);
-
-  // Win or lose as the round ends
-  const { game, theme, status, screen, gameOver } = useEngineGame(props, {
-    gameId: GAME_IDS.MEMORY_MATCH,
-    create: createGame,
-    start,
-    reset,
-    dispose,
-    tick,
-    setTheme,
-    resize: (g, width, height, offset) => {
-      const l = getLayout(width, height, offset, isTablet);
-      setLayout(g, l);
-      return l.boardW;
-    },
-    drag,
-    sounds: SOUNDS,
-    onStart: (fx) => fx(SOUNDS.START, HapticType.MEDIUM),
-    wire: (g, fx) => {
-      g.onScore = setScore;
-      g.onPairs = (matched, total) => setPairs({ matched, total });
-      g.onTime = setTime;
-      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
-    }
-  });
-
-  const { matched, total } = pairs ?? { matched: 0, total: game.totalPairs };
-
-  return (
-    <EngineGameScreen
-      {...screen}
-      light={LIGHT}
-      columns={[scoreColumn(score), textColumn('PAIRS', `${matched}/${total}`), timerColumn(time, theme)]}
-      subtext="Find every matching pair!"
-      gameOver={gameOver({
-        title: status === 'win' ? 'ALL MATCHED!' : 'TIME UP!',
-        message: status === 'win' ? 'You found every pair!' : 'You ran out of time!',
-        scoreLabel: 'Score',
-        score,
-        buttonText: 'Play Again!'
-      })}
-    />
-  );
-});

package/src/games/memory-match/MemoryMatchConstants.ts

@@ -1,105 +0,0 @@
-// Memory Match's rules, timings, colors and layout. Rules and scores match the original version
-// (games/memory-match), so scores carry over.
-import { isTablet } from '../../services/UtilsService';
-import { getScoreBoardTop } from '../shared/EngineHud';
-import type { TiltView } from '../shared/EngineTilt';
-import { frontLight, gameWidthFor } from '../shared/EngineUtils';
-import { COLS, ROWS } from './MemoryMatchRules';
-
-// ── Rules and timing ──────────────────────────────────────────────────
-
-export const GAME_DURATION = 300; // seconds; running out loses the round
-export const MISMATCH_DELAY = 0.8; // seconds the two cards stay revealed on a miss
-export const POINTS_PER_MATCH = 1000;
-export const WIN_BONUS = 5000;
-export const FLIP_TIME = 0.22; // a card turning over, as the original flip
-export const TAP_SLOP = 12; // points a finger may wander and still tap
-
-// ── Colors ────────────────────────────────────────────────────────────
-
-export const COLORS = {
-  CARD_FRONT: '#FFFDF7',
-  CARD_MATCHED: '#E5F7EC',
-  FRONT_BORDER: '#DFE3F1',
-  MATCHED_BORDER: '#8BD3AD',
-  MATCHED_BADGE: '#32A875',
-  BACK_TOP: '#6378E0',
-  BACK_BOTTOM: '#3E4EAE',
-  BACK_BORDER: '#97A7EF',
-  BACK_HALO: '#6072CE',
-  BACK_MOTIF: '#EAF0FF',
-  BACK_PAIR: '#B9CCFF'
-} as const;
-
-// ── The scene ─────────────────────────────────────────────────────────
-
-/** The camera leans back a little from straight down, so the cards and fruit stand up. */
-export const TILT = 0.2;
-/** Lit from the upper left; surfaces facing up off the table (+z) keep their exact color. */
-export const LIGHT = frontLight([-0.4, 0.5, 1], 0.45);
-/** A card's thickness, and its fruit's size, of its width. */
-export const THICKNESS = 0.28;
-/** The flat face of EngineBlocks' bevel occupies 78% of the block's width. */
-export const FACE_SIZE = 0.78;
-export const FRUIT_SIZE = 0.62;
-/**
- * Mesh detail for the card fruit (EngineFruits): about as big on screen as Fruit Ninja's, so the same
- * lighter models serve both games; ten full-detail fruit would be built in one frame on the first deal.
- */
-export const FRUIT_DETAIL = isTablet ? 0.7 : 0.5;
-
-// ── Layout (view points) ──────────────────────────────────────────────
-
-const SCOREBOARD_HEIGHT = 82;
-const CONTROLS_HEIGHT = 120;
-/** The shared block's smoothed bevel extends slightly beyond its nominal unit square. */
-const CARD_BOUNDS = 1.01;
-
-export type Layout = TiltView & { rows: number; cols: number; card: number; gap: number; pitch: number; boardW: number; boardH: number };
-
-/** Fill the shared game width without outer gutters; fit shorter screens inside the available height. */
-export function getLayout(width: number, height: number, offset: number, tablet: boolean): Layout {
-  const gap = tablet ? 12 : 10;
-  const top = getScoreBoardTop(offset) + SCOREBOARD_HEIGHT;
-  const room = Math.max(1, height - top - CONTROLS_HEIGHT);
-  const gameWidth = gameWidthFor(width);
-  const cos = Math.cos(TILT);
-  const sin = Math.sin(TILT);
-  const byWidth = (gameWidth - gap * (COLS - 1)) / (COLS - 1 + CARD_BOUNDS);
-  const byHeight = (room - gap * (ROWS - 1) * cos) / ((ROWS - 1 + CARD_BOUNDS) * cos + THICKNESS * sin);
-  const card = Math.max(1, Math.min(byWidth, byHeight));
-  const pitch = card + gap;
-  return {
-    width,
-    height,
-    tilt: TILT,
-    centerY: top + room / 2 + (card * THICKNESS * sin) / 2,
-    rows: ROWS,
-    cols: COLS,
-    card,
-    gap,
-    pitch,
-    boardW: card * (COLS - 1 + CARD_BOUNDS) + gap * (COLS - 1),
-    boardH: card * (ROWS - 1 + CARD_BOUNDS) + gap * (ROWS - 1)
-  };
-}
-
-/** A card's centre on the table (index row-major, row 0 along the top), in world units. */
-export function cardCentre(l: Layout, i: number): [number, number] {
-  const r = Math.floor(i / l.cols);
-  const c = i % l.cols;
-  return [(c - (l.cols - 1) / 2) * l.pitch, ((l.rows - 1) / 2 - r) * l.pitch];
-}
-
-/** The card under a table point (not in the gaps), or -1. */
-export function cardAt(l: Layout, x: number, y: number): number {
-  const lx = x + (l.cols * l.pitch) / 2;
-  const ly = (l.rows * l.pitch) / 2 - y;
-  const c = Math.floor(lx / l.pitch);
-  const r = Math.floor(ly / l.pitch);
-  if (r < 0 || r >= l.rows || c < 0 || c >= l.cols) return -1;
-  const half = l.gap / 2;
-  const ix = lx - c * l.pitch;
-  const iy = ly - r * l.pitch;
-  return ix >= half && ix <= l.pitch - half && iy >= half && iy <= l.pitch - half ? r * l.cols + c : -1;
-}

package/src/games/memory-match/MemoryMatchGame.ts

@@ -1,222 +0,0 @@
-// Memory Match's play, with no React: build a game with `createGame`, give it a layout, `start` it and
-// `tick` it every frame. Tap a card to turn it over, then another: a pair stays up (1,000 points), a
-// miss shows both for 0.8 s and turns them back. Find all ten pairs inside five minutes to win (5,000
-// more, and the quicker the better).
-//
-// Ported step for step from the original store (games/memory-match); the miss's delay and the clock run on
-// the game's own clock, so Stop or leaving can't let a late flip into the next game.
-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 { cardAt, GAME_DURATION, type Layout, MISMATCH_DELAY, POINTS_PER_MATCH, TAP_SLOP, THICKNESS, WIN_BONUS } from './MemoryMatchConstants';
-import { buildDeck, type Card } from './MemoryMatchRules';
-import { buildScene, celebrate, deal, flip, matched, mismatch, removeScene, type Scene, setSceneTheme, timeUp } from './MemoryMatchScene';
-
-export type Phase = 'ready' | 'playing' | 'over';
-/** flip: a first card turned; match / wrong: how a pair went; win / lose: how it ended. */
-export type GameEvent = 'flip' | 'match' | 'wrong' | 'win' | 'lose';
-
-const WORLD_CAPACITY = 240; // twenty seven-entity cards, backdrop and celebration particles, with headroom
-
-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 { cards, totalPairs } = buildDeck();
-  const g = {
-    world,
-    camera,
-    theme,
-    layout: null as Layout | null,
-    scene: null as Scene | null,
-    phase: 'ready' as Phase,
-    cards,
-    totalPairs,
-    firstIndex: -1,
-    /** Input is locked while a miss is shown. */
-    lock: false,
-    matchedPairs: 0,
-    moves: 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,
-    press: null as { x: number; y: number; index: number } | null,
-    // UI hooks, set by the screen.
-    onPhase: (_p: Phase) => {},
-    onScore: (_s: number) => {},
-    onPairs: (_matched: number, _total: number) => {},
-    onTime: (_t: number) => {},
-    onEvent: (_e: GameEvent) => {}
-  };
-  world.scoreboard.reset(0, GAME_DURATION);
-  world.scoreboard.handlers = {
-    onScore: (s) => g.onScore(s),
-    onSecond: (t) => g.onTime(t),
-    onTimeUp: () => g.phase === 'playing' && end(g, false)
-  };
-  return g;
-}
-export type Game = ReturnType<typeof createGame>;
-
-// ── Scene ─────────────────────────────────────────────────────────────
-
-/** Lays the table out for the view (first layout, header height, rotation): rebuilt where things stand. */
-export function setLayout(g: Game, l: Layout) {
-  if (g.scene) removeScene(g.world, g.scene);
-  g.layout = l;
-  aimTilted(g.camera, l);
-  g.scene = buildScene(g.world, l, g.theme, g.cards);
-}
-
-export function setTheme(g: Game, theme: GameTheme) {
-  g.theme = theme;
-  if (g.scene) setSceneTheme(g.world, g.scene, theme);
-}
-
-// ── Run ───────────────────────────────────────────────────────────────
-
-/** Starts play on the deal already on the table. */
-export function start(g: Game) {
-  if (g.phase !== 'ready') return;
-  g.phase = 'playing';
-  g.world.scoreboard.startCountdown(GAME_DURATION);
-  g.onPhase('playing');
-}
-
-/** A fresh deal, not started (Stop, Play Again), as the original store's reset. The world is kept. */
-export function reset(g: Game) {
-  g.world.cancelTimers();
-  const { cards, totalPairs } = buildDeck();
-  g.cards = cards;
-  g.totalPairs = totalPairs;
-  g.firstIndex = -1;
-  g.lock = false;
-  g.matchedPairs = 0;
-  g.moves = 0;
-  g.world.scoreboard.reset(0, GAME_DURATION);
-  g.won = false;
-  g.press = null;
-  g.phase = 'ready';
-  if (g.layout && g.scene) deal(g.world, g.layout, g.scene, g.cards);
-  g.onScore(0);
-  g.onPairs(0, totalPairs);
-  g.onTime(GAME_DURATION);
-  g.onPhase('ready');
-}
-
-export function dispose(g: Game) {
-  g.world.dispose();
-}
-
-export function tick(g: Game, dt: number) {
-  if (g.world.isDisposed) return;
-  g.world.update(dt);
-}
-
-function end(g: Game, won: boolean) {
-  g.world.scoreboard.stop();
-  g.won = won;
-  g.phase = 'over';
-  g.press = null;
-  const { layout: l, scene: s } = g;
-  if (l && s) {
-    if (won) celebrate(g.world, l, s);
-    else timeUp(g.world, s, g.cards);
-  }
-  g.onPhase('over');
-  g.onEvent(won ? 'win' : 'lose');
-}
-
-const setState = (g: Game, i: number, state: Card['state']) => {
-  g.cards[i] = { ...g.cards[i]!, state };
-};
-
-// ── Flips (the original store's, step for step) ───────────────────────────
-
-/** Turns a card over: the first of a pair waits, the second matches or misses. */
-export function flipCard(g: Game, index: number) {
-  if (g.phase !== 'playing' || g.won || g.lock) return;
-  const card = g.cards[index];
-  if (!card || card.state !== 'down') return;
-  const { layout: l, scene: s } = g;
-  if (g.firstIndex === -1) {
-    setState(g, index, 'up');
-    g.firstIndex = index;
-    if (l && s) flip(g.world, l, s, index, true);
-    g.onEvent('flip');
-    return;
-  }
-  const first = g.firstIndex;
-  if (first === index) return;
-  g.moves += 1;
-  g.firstIndex = -1;
-  if (g.cards[first]!.symbol === card.symbol) {
-    setState(g, first, 'matched');
-    setState(g, index, 'matched');
-    g.matchedPairs += 1;
-    g.world.scoreboard.add(POINTS_PER_MATCH);
-    if (l && s) {
-      flip(g.world, l, s, index, true);
-      matched(g.world, l, s, first);
-      matched(g.world, l, s, index);
-    }
-    const won = g.matchedPairs >= g.totalPairs;
-    if (won) g.world.scoreboard.set(calculateTimeBasedScore(GAME_DURATION - g.timeLeft, GAME_DURATION, g.score + WIN_BONUS));
-    g.onPairs(g.matchedPairs, g.totalPairs);
-    g.onEvent('match');
-    if (won) end(g, true);
-    return;
-  }
-  // A miss: show the second card, lock input, then turn both back
-  setState(g, index, 'up');
-  g.lock = true;
-  if (l && s) {
-    flip(g.world, l, s, index, true);
-    mismatch(g.world, l, s, first);
-    mismatch(g.world, l, s, index);
-  }
-  g.onEvent('wrong');
-  g.world.after(MISMATCH_DELAY, () => {
-    if (g.phase !== 'playing') return;
-    for (const i of [first, index]) {
-      if (g.cards[i]!.state !== 'up') continue;
-      setState(g, i, 'down');
-      if (g.layout && g.scene) flip(g.world, g.layout, g.scene, i, false);
-    }
-    g.lock = false;
-  });
-}
-
-// ── The finger ────────────────────────────────────────────────────────
-
-/** The card under a view point (on the cards' tops), or -1. */
-export function cardUnder(g: Game, x: number, y: number): number {
-  const l = g.layout;
-  if (!l) return -1;
-  const [wx, wy] = unproject(l, x, y, l.card * THICKNESS);
-  return cardAt(l, wx, wy);
-}
-
-/** A tap (down and up without wandering, however long) turns the card under it. */
-export function drag(g: Game, { phase, x, y }: DragEvent) {
-  if (phase === 'start') {
-    g.press = { x, y, index: cardUnder(g, x, y) };
-    return;
-  }
-  const p = g.press;
-  if (!p) return;
-  if (Math.hypot(x - p.x, y - p.y) > TAP_SLOP) {
-    g.press = null;
-    return;
-  }
-  if (phase !== 'end') return;
-  g.press = null;
-  // Where the finger lifted, as the original tap's end
-  const index = cardUnder(g, x, y);
-  if (index >= 0) flipCard(g, index);
-}

package/src/games/memory-match/MemoryMatchRules.ts

@@ -1,38 +0,0 @@
-// Memory Match's rules, with no React or engine: the deck (ten pairs of fruit, shuffled) and what a
-// flip does. Ported from the original store (games/memory-match), so a deal and every flip play out as
-// they did there.
-
-export const ROWS = 5;
-export const COLS = 4;
-
-export type FruitSymbol =
-  'apple' | 'orange' | 'banana' | 'grapes' | 'kiwi' | 'strawberry' | 'mango' | 'peach' | 'cherries' | 'pineapple' | 'watermelon' | 'pomegranate';
-export const FRUIT_SYMBOLS: FruitSymbol[] = [
-  'apple',
-  'orange',
-  'banana',
-  'grapes',
-  'kiwi',
-  'strawberry',
-  'mango',
-  'peach',
-  'cherries',
-  'pineapple',
-  'watermelon',
-  'pomegranate'
-];
-
-export type CardState = 'down' | 'up' | 'matched';
-export type Card = { symbol: number; state: CardState };
-
-/** A fresh deck: a pair of each of the first ten fruits, Fisher-Yates shuffled (the same draws as the original store). */
-export function buildDeck(): { cards: Card[]; totalPairs: number } {
-  const totalPairs = Math.min((ROWS * COLS) / 2, FRUIT_SYMBOLS.length);
-  const symbols: number[] = [];
-  for (let i = 0; i < totalPairs; i++) symbols.push(i, i);
-  for (let i = symbols.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [symbols[i], symbols[j]] = [symbols[j]!, symbols[i]!];
-  }
-  return { cards: symbols.map((symbol) => ({ symbol, state: 'down' as CardState })), totalPairs };
-}