@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/find-different-number/FindDifferentNumberScene.ts

@@ -1,193 +0,0 @@
-// Everything Find Different Number draws: a board (frosted in the classic theme, the theme's board
-// otherwise) carrying a 10 x 10 grid of raised tiles, each with its two-digit number standing on top in
-// 3D digits. A found tile turns green and pops up; a wrong one flashes red and the grid jolts. 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) with its block and
-// two digits; a new round swaps the digits' meshes in place.
-import { type Camera, type Color, effects, type Entity, extrude, type Model, Path, 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, FOUND_SCALE, type Layout, TILE_HEIGHT } from './FindDifferentNumberConstants';
-import { CELLS, GRID } from './FindDifferentNumberRules';
-
-const meshes = new Map<string, Model>();
-const cached = (key: string, build: () => Model) => {
-  let m = meshes.get(key);
-  if (!m) {
-    m = cacheGameAsset('find-different-number/FindDifferentNumberScene:' + key, build);
-    meshes.set(key, m);
-  }
-  return m;
-};
-const BOARD_DEPTH = 10;
-const BACKDROP_DEPTH = 30;
-const SURFACE = 1;
-
-const panelMesh = (w: number, radius: number, depth: number) =>
-  cached(`fdn-panel:${w}:${radius}:${depth}`, () =>
-    createShape(extrude(new Path().addRoundedRect(-w / 2, -w / 2, w, w, radius), { depth }), { shine: 0 })
-  );
-
-type TileView = { root: Entity; block: Entity; digits: [Entity, Entity] };
-export type Scene = { backdrop: Entity; board: Entity[]; tiles: TileView[] };
-
-/** The tiles' face and number colors: white tiles with dark navy numbers on every theme, as Sudoku's cells. */
-function skin(_theme: GameTheme) {
-  return { tile: toColor(COLORS.TILE), text: toColor(COLORS.TEXT) };
-}
-const FOUND = toColor(COLORS.FOUND);
-const FOUND_TEXT = toColor(COLORS.FOUND_TEXT);
-const WRONG = toColor(COLORS.WRONG);
-
-function spawnBoard(world: World, l: Layout, theme: GameTheme): Entity[] {
-  const outer = l.size + l.pad * 2;
-  const classic = theme.mode === 'classic';
-  const out = [
-    world.spawn({
-      mesh: panelMesh(outer, classic ? 14 : 8, BOARD_DEPTH),
-      position: [0, 0, -BOARD_DEPTH / 2],
-      color: toColor(classic ? COLORS.CLASSIC_BOARD : theme.mode === 'light' ? COLORS.LIGHT_BOARD : theme.BOARD.SURFACE),
-      pickable: false
-    })
-  ];
-  // The rim: a slightly larger panel just under the board, showing round its edge
-  out.push(
-    world.spawn({
-      mesh: panelMesh(outer + 3, classic ? 15 : 9, BOARD_DEPTH - 2),
-      position: [0, 0, -BOARD_DEPTH / 2 - 1.2],
-      color: toColor(classic ? COLORS.CLASSIC_RIM : theme.mode === 'light' ? COLORS.LIGHT_RIM : theme.BOARD.BORDER),
-      pickable: false
-    })
-  );
-  return out;
-}
-
-/** A tile's digits, printed flat on its face: small enough that two sit easily with room round them. */
-const digitSize = (l: Layout) => l.tile * 0.34;
-/** Bold strokes, so the small digits read crisply. */
-const WEIGHT = 1.2;
-
-export function buildScene(world: World, l: Layout, theme: GameTheme, numbers: number[], found: Set<number>): Scene {
-  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
-  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
-  const h = l.tile * TILE_HEIGHT;
-  const size = digitSize(l);
-  const half = (size * GLYPH_ADVANCE) / 2;
-  const tiles: TileView[] = [];
-  for (let i = 0; i < CELLS; i++) {
-    const [x, y] = cellCentre(l, i);
-    const root = world.spawn({ mesh: 'none', position: [x, y, SURFACE], pickable: false });
-    const block = spawnRaisedBlock(world, {
-      parent: root,
-      position: [0, 0, h / 2],
-      size: [l.tile, l.tile, h],
-      color: [1, 1, 1, 1],
-      gloss: false,
-      shadow: false
-    }); // painted below
-    const digit = (dx: number) =>
-      world.spawn({ mesh: flatGlyphMesh('0', WEIGHT), parent: root, position: [dx, 0, h + 0.6], scale: size, pickable: false });
-    tiles.push({ root, block, digits: [digit(-half), digit(half)] });
-  }
-  const s: Scene = { backdrop, board: spawnBoard(world, l, theme), tiles };
-  showNumbers(world, s, numbers);
-  paint(world, s, theme, found);
-  return s;
-}
-
-export function removeScene(world: World, s: Scene) {
-  for (const e of [s.backdrop, ...s.board, ...s.tiles.map((t) => t.root)]) world.despawn(e);
-}
-
-/** Every tile's colors for the theme (found ones green). */
-export function paint(world: World, s: Scene, theme: GameTheme, found: Set<number>) {
-  const k = skin(theme);
-  const updates = world.transforms;
-  s.tiles.forEach((t, i) => {
-    const f = found.has(i);
-    const block = f ? FOUND : k.tile;
-    const text = f ? FOUND_TEXT : k.text;
-    updates.color(t.block, block[0], block[1], block[2], block[3] ?? 1);
-    for (const d of t.digits) updates.color(d, text[0], text[1], text[2], text[3] ?? 1);
-  });
-  updates.flush();
-}
-
-export function setSceneTheme(world: World, l: Layout, s: Scene, theme: GameTheme, found: Set<number>) {
-  setBackdropTheme(world, s.backdrop, theme);
-  for (const e of s.board) world.despawn(e);
-  s.board = spawnBoard(world, l, theme);
-  paint(world, s, theme, found);
-}
-
-/** Puts the round's numbers on the tiles (the digits' meshes swapped in place); blank with no round. */
-export function showNumbers(world: World, s: Scene, numbers: number[]) {
-  s.tiles.forEach((t, i) => {
-    const n = numbers[i];
-    const text = n === undefined ? '' : String(n).padStart(2, '0');
-    t.digits.forEach((d, k) => world.set(d, { mesh: text ? flatGlyphMesh(text[k]!, WEIGHT) : 'none' }));
-  });
-}
-
-/** A fresh round: the tiles pop up in a wave from the top left. */
-export function intro(world: World, s: Scene) {
-  s.tiles.forEach((t, i) => {
-    world.stopAnimation(t.root);
-    world.set(t.root, { scale: 0.01 });
-    world.animate(t.root, { scale: 1 }, { duration: 0.22, delay: (Math.floor(i / GRID) + (i % GRID)) * 0.018, easing: 'back' });
-  });
-}
-
-/** A different number found: the tile turns green and pops. */
-export function markFound(world: World, s: Scene, i: number) {
-  const t = s.tiles[i];
-  if (!t) return;
-  world.set(t.block, { color: FOUND });
-  for (const d of t.digits) world.set(d, { color: FOUND_TEXT });
-  world.animate(t.root, [{ scale: FOUND_SCALE, at: 0.4 }, { scale: 1 }], { duration: 0.3, easing: 'easeOut' });
-}
-
-/** A wrong tap: the tile flashes red and the grid jolts. */
-export function markWrong(world: World, l: Layout, s: Scene, camera: Camera, i: number, theme: GameTheme) {
-  const t = s.tiles[i];
-  if (!t) return;
-  const back = skin(theme).tile;
-  world.stopAnimation(t.block);
-  world.animate(t.block, [{ color: blend(back, WRONG, 0.65), at: 0.18 }, { color: back }], { duration: 0.4, easing: 'easeOut' });
-  world.animate(t.root, { shake: l.tile * 0.12 }, { duration: 0.25 });
-  camera.shake = l.tile * 0.08;
-}
-const blend = (a: Color, b: Color, k: number): Color => [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k, a[2] + (b[2] - a[2]) * k, 1];
-
-/** All ten found: the tiles hop in a wave, and confetti bursts over the board. */
-export function celebrate(world: World, l: Layout, s: Scene) {
-  s.tiles.forEach((t, i) => {
-    const [x, y] = cellCentre(l, i);
-    world.animate(t.root, [{ position: [x, y, SURFACE + l.tile * 0.4], at: 0.4 }, { position: [x, y, SURFACE] }], {
-      duration: 0.4,
-      delay: 0.25 + (Math.floor(i / GRID) + (i % GRID)) * 0.025,
-      easing: 'easeOut'
-    });
-  });
-  effects.confetti(world, {
-    position: [0, 0, l.tile * 2],
-    count: 70,
-    size: l.tile * 0.22,
-    speed: l.size * 1.4,
-    lifetime: 1.3,
-    gravity: -l.size * 2.4,
-    colors: ['#FFD700', '#4CAF50', '#2196F3', '#E74C3C'].map((c) => toColor(c))
-  });
-}
-
-/** Out of time: the tiles not found dim. */
-export function dim(world: World, s: Scene, theme: GameTheme, found: Set<number>) {
-  const k = skin(theme).tile;
-  const blocks = s.tiles.filter((_t, i) => !found.has(i)).map((t) => t.block);
-  if (blocks.length) world.animate(blocks, { color: [k[0] * 0.55, k[1] * 0.55, k[2] * 0.6, k[3] ?? 1] }, { duration: 0.4 });
-}

package/src/games/flappy-bird/FlappyBird.tsx

@@ -1,73 +0,0 @@
-// Flappy Bird's screen, on the Nayan engine: a 3D bird flying through glossy green pipes between brick
-// walls, in front of a 3D meadow seen through a perspective camera, under Playtura's scoreboard,
-// controls and modals. The rules are in FlappyBirdGame.ts, the world in shared/EngineMeadow.ts, the
-// bird, pipes and walls in FlappyBirdScene.ts.
-//
-// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
-// swaps day for night, so the GPU view is never rebuilt. JS steps the bird and pipes in fixed 60 Hz
-// steps once a frame; the hover, clouds, hot-air balloons and bursts move in the engine's Rust core.
-import { useMemo } from 'react';
-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, timerColumn } from '../shared/EngineHud';
-import { backgroundFor, lightFor } from '../shared/EngineMeadow';
-import { useEngineGame } from '../shared/useEngineGame';
-import { useLiveState } from '../shared/useLiveState';
-import { getLayout, TIME_LIMIT } from './FlappyBirdConstants';
-import { createGame, dispose, flap, reset, setLayout, setTheme, start, tick } from './FlappyBirdGame';
-
-const SFX = GAME_SOUNDS.FLAPPY_BIRD;
-
-export const FlappyBird = engineGame(GAME_IDS.FLAPPY_BIRD, (props) => {
-  const [score, setScore] = useLiveState(0);
-  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
-
-  // Surviving the timer is a win, a crash a loss
-  const { theme, status, screen, gameOver } = useEngineGame(props, {
-    gameId: GAME_IDS.FLAPPY_BIRD,
-    create: createGame,
-    start,
-    reset,
-    dispose,
-    tick,
-    setTheme,
-    resize: (g, width, height, offset) => setLayout(g, getLayout(width, height, offset)),
-    // Flaps as the finger lands (the original version waited for it to lift)
-    drag: (g, { phase }) => {
-      if (phase === 'start') flap(g);
-    },
-    sounds: SFX,
-    onStart: (fx) => fx(SFX.START, HapticType.MEDIUM),
-    wire: (g, fx) => {
-      g.onScore = setScore;
-      g.onTime = setTimeLeft;
-      g.onFlap = () => fx(SFX.FLAP, HapticType.LIGHT);
-      g.onPass = () => fx(SFX.PASS, HapticType.LIGHT);
-      g.onCrash = () => fx(SFX.GAME_OVER, HapticType.HEAVY);
-      g.onWin = () => fx(SFX.WIN, HapticType.SUCCESS);
-    }
-  });
-
-  // Sunlight by day, moonlight at night (the world's colors follow the theme too)
-  const light = useMemo(() => lightFor(theme), [theme]);
-  const background = useMemo(() => backgroundFor(theme), [theme]);
-
-  return (
-    <EngineGameScreen
-      {...screen}
-      light={light}
-      background={background}
-      columns={[scoreColumn(score), timerColumn(timeLeft, theme, 10)]}
-      subtext="Tap to flap!"
-      gameOver={gameOver({
-        title: status === 'win' ? 'YOU WON!' : 'GAME OVER',
-        message: status === 'win' ? 'You survived the flight!' : 'You hit a pipe!',
-        scoreLabel: 'Final Score',
-        score,
-        buttonText: 'Fly Again!'
-      })}
-    />
-  );
-});

package/src/games/flappy-bird/FlappyBirdConstants.ts

@@ -1,95 +0,0 @@
-import { isTablet } from '../../services/UtilsService';
-// Flappy Bird's rules, physics, timings and layout. Rules, scoring, physics and layout match the original
-// version (games/flappy-bird), so scores and feel carry over.
-import type { MeadowOptions, Rig } from '../shared/EngineMeadow';
-
-// ── Rules ─────────────────────────────────────────────────────────────
-
-export const TIME_LIMIT = 120; // seconds; surviving them wins
-export const PASS_SCORE = 500;
-
-// ── Physics (points per 60 Hz step, as the original version) ─────────────
-
-export const STEP = 1 / 60;
-export const STEP_TOLERANCE = 0.002; // absorbs vsync jitter so a 16.5 ms frame still takes its step
-export const MAX_PENDING = 0.05; // a long frame (or a resume) costs at most ~3 steps
-export const BIRD_SIZE = isTablet ? 56 : 40;
-export const GRAVITY = isTablet ? 0.4 : 0.3;
-export const JUMP_VELOCITY = isTablet ? -6.5 : -4.5;
-export const MAX_FALL_SPEED = isTablet ? 8 : 6;
-export const DAMPING = 0.98;
-export const PIPE_WIDTH = isTablet ? 80 : 60;
-export const PIPE_GAP = isTablet ? 260 : 200;
-export const PIPE_SPEED = isTablet ? 5 : 4;
-export const MIN_PIPE_HEIGHT = isTablet ? 130 : 100;
-
-// ── Spawning (seconds) ────────────────────────────────────────────────
-
-export const FIRST_PIPE = 0.5;
-export const PIPE_INTERVAL = 2.5;
-
-// ── Look ──────────────────────────────────────────────────────────────
-
-export const BRICK_WIDTH = isTablet ? 56 : 40;
-export const BRICK_HEIGHT = isTablet ? 28 : 20;
-/** The bird leans with its speed: nose up climbing, diving as it falls (original's -30° to 90°). */
-export const tiltFor = (velocity: number) => {
-  const t = Math.max(0, Math.min(1, (velocity + 15) / 30));
-  return ((-30 + t * 120) * Math.PI) / 180;
-};
-/** Its wing lifts while climbing after a flap and tucks in as it falls. */
-export const wingFor = (velocity: number) => {
-  const v = Math.max(-6, Math.min(7, velocity));
-  return v < 0 ? (v / -6) * -0.65 : (v / 7) * 0.25;
-};
-
-// ── The world ─────────────────────────────────────────────────────────
-
-/** The horizon just above the bottom wall, so the hills and treeline show between the walls. */
-export const RIG: Rig = { eyeHeight: 1.6, horizon: 0.68, playDepth: 4 };
-export const meadowFor = (sunY: number): MeadowOptions => ({
-  sun: [0.8, sunY],
-  clouds: [0.24, 0.55],
-  framingTrees: true,
-  foreground: false,
-  hotAirBalloons: 2
-});
-
-// ── Layout (screen points) ────────────────────────────────────────────
-
-export type Layout = {
-  /** The GameView's size: the whole screen, as the original game area. */
-  width: number;
-  height: number;
-  offset: number;
-  birdX: number;
-  birdStartY: number;
-  /** The brick walls: the top one grows with the header; the bottom one is shorter under a header. */
-  topWall: number;
-  bottomWallTop: number;
-};
-
-export function getLayout(width: number, height: number, offset: number): Layout {
-  return {
-    width,
-    height,
-    offset,
-    birdX: width * 0.2,
-    birdStartY: height * 0.4,
-    topWall: 150 + offset,
-    bottomWallTop: height - (offset > 0 ? 150 : 250)
-  };
-}
-
-/** A pipe's gap top: on phones anywhere from just under the top wall to 60% down the playable band; on tablets near its middle. */
-export function randomGapTop(l: Layout) {
-  const playable = l.bottomWallTop - l.topWall;
-  if (isTablet) {
-    const centre = l.topWall + playable / 2 - PIPE_GAP / 2;
-    const spread = playable * 0.15;
-    return centre - spread + Math.random() * spread * 2;
-  }
-  const min = l.topWall + MIN_PIPE_HEIGHT;
-  const max = l.topWall + playable * 0.6;
-  return min + Math.random() * (max - min);
-}