@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/block-breaker/BlockBreakerScene.ts

@@ -1,257 +0,0 @@
-// Everything Block Breaker draws. Orthographic camera, one world unit per point, looking down -z: x
-// right and y up from the view's centre. Positions come in board points (from the board's top-left).
-// Depth (toward the camera): the game background, the board panel and its border, ball trails, bricks,
-// the paddle, power-ups, balls. Bricks and the paddle are glossy rounded boxes (as Block Blast's
-// blocks), balls and power-ups spheres; every part is a shared mesh, as mesh ids are app-wide and limited.
-import { type Color, 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 { popAndBurst } from '../shared/EngineBlasts';
-import { raisedBlockScale, spawnRaisedBlock } from '../shared/EngineBlocks';
-import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
-import { toColor } from '../shared/EngineUtils';
-import {
-  BALL_COLOR,
-  BALL_RADIUS,
-  BALL_SPAWN_SPRING,
-  BRICK_COLORS,
-  BRICK_DROP,
-  BRICK_INTRO_SPRING,
-  BUMP_SPRING,
-  BUMP_TIME,
-  CLASSIC_BOARD,
-  CLASSIC_BORDER,
-  CLASSIC_RADIUS,
-  type Layout,
-  PADDLE_COLOR,
-  PADDLE_WIDTH_TIME,
-  POWER_UP_COLORS,
-  POWER_UP_SIZE,
-  type PowerUpType,
-  PULSE_TIME,
-  THEMED_RADIUS,
-  TRAIL,
-  TRAIL_COLOR
-} from './BlockBreakerConstants';
-
-const Z_BACKDROP = -20;
-const Z_BOARD = 0;
-const Z_RIM = 0.2;
-const Z_TRAIL = 1;
-const HIDDEN = 0;
-
-/** A board point at depth `z`, in world space. */
-export const toWorld = (l: Layout, x: number, y: number, z = 0): Vec3 => [l.boardLeft + x - l.width / 2, l.height / 2 - (l.boardTop + y), z];
-
-const brickDepth = (l: Layout) => l.brickHeight * 0.7;
-const brickZ = (l: Layout) => Z_RIM + brickDepth(l) / 2 + 1;
-const brickSize = (l: Layout): Vec3 => [l.brickWidth, l.brickHeight, brickDepth(l)];
-/** A brick's full scale (shared/EngineBlocks: glossy and bevelled, with its shadow, as Block Blast's blocks). */
-const brickScale = (l: Layout) => raisedBlockScale(brickSize(l));
-const paddleDepth = (l: Layout) => l.paddleHeight * 0.9;
-const paddleZ = (l: Layout) => Z_RIM + paddleDepth(l) / 2 + 1;
-const powerUpZ = () => POWER_UP_SIZE + 2;
-const ballZ = () => BALL_RADIUS + POWER_UP_SIZE + 4;
-
-// ── Meshes (registered once per size: mesh ids are app-wide and limited) ──
-
-const meshes = new Map<string, Model>();
-const mesh = (key: string, build: () => Model) => {
-  let m = meshes.get(key);
-  if (!m) {
-    m = cacheGameAsset('block-breaker/BlockBreakerScene:' + key, build);
-    meshes.set(key, m);
-  }
-  return m;
-};
-const discMesh = () => mesh('disc', () => createShape(extrude(new Path().addCircle(0, 0, 0.5), { depth: 0 })));
-/** A flat rounded rectangle from its top-left; with `rim`, only its outline. */
-const panelMesh = (w: number, h: number, r: number, rim = 0) =>
-  mesh(`panel:${w}:${h}:${r}:${rim}`, () => {
-    const path = new Path().addRoundedRect(0, 0, w, h, r);
-    if (rim > 0) path.addRoundedRect(rim, rim, w - rim * 2, h - rim * 2, r - rim);
-    return createShape(extrude(path, { depth: 0, fillRule: 'evenodd' }), { center: false });
-  });
-
-// ── Colors ────────────────────────────────────────────────────────────
-
-const BRICKS = BRICK_COLORS.map((c) => toColor(c));
-export const brickColor = (row: number) => BRICKS[row % BRICKS.length]!;
-
-/** Ball, trail and paddle colors: white reads on classic and dark; light mode draws them in its text color. */
-export type PieceColors = { ball: Color; trail: Color; paddle: Color };
-export function pieceColors(theme: GameTheme): PieceColors {
-  if (theme.mode === 'light') {
-    const text = toColor(theme.TEXT);
-    return { ball: text, trail: text, paddle: text };
-  }
-  return { ball: toColor(BALL_COLOR), trail: toColor(TRAIL_COLOR), paddle: toColor(PADDLE_COLOR) };
-}
-
-// ── Board ─────────────────────────────────────────────────────────────
-
-export type Scenery = { backdrop: Entity; parts: Entity[] };
-
-function spawnBoard(world: World, l: Layout, theme: GameTheme): Entity[] {
-  const classic = theme.mode === 'classic';
-  const radius = classic ? CLASSIC_RADIUS : THEMED_RADIUS;
-  return [
-    world.spawn({
-      mesh: panelMesh(l.boardWidth, l.boardHeight, radius),
-      position: toWorld(l, 0, 0, Z_BOARD),
-      color: toColor(classic ? CLASSIC_BOARD : theme.BOARD.SURFACE),
-      pickable: false
-    }),
-    world.spawn({
-      mesh: panelMesh(l.boardWidth, l.boardHeight, radius, 1.5),
-      position: toWorld(l, 0, 0, Z_RIM),
-      color: toColor(classic ? CLASSIC_BORDER : theme.BOARD.BORDER),
-      pickable: false
-    })
-  ];
-}
-
-export function buildScenery(world: World, l: Layout, theme: GameTheme): Scenery {
-  return { backdrop: spawnBackdrop(world, l.width, l.height, Z_BACKDROP, theme), parts: spawnBoard(world, l, theme) };
-}
-
-export function removeScenery(world: World, s: Scenery) {
-  world.despawn(s.backdrop);
-  for (const e of s.parts) world.despawn(e);
-}
-
-export function setSceneryTheme(world: World, l: Layout, s: Scenery, theme: GameTheme) {
-  setBackdropTheme(world, s.backdrop, theme);
-  for (const e of s.parts) world.despawn(e);
-  s.parts = spawnBoard(world, l, theme);
-}
-
-// ── Bricks ────────────────────────────────────────────────────────────
-
-/** A brick by its top-left; with `intro`, it drops into place `intro` seconds in, with a bounce. */
-export function spawnBrick(world: World, l: Layout, x: number, y: number, row: number, intro: number | null): Entity {
-  const cx = x + l.brickWidth / 2;
-  const cy = y + l.brickHeight / 2;
-  const scale = brickScale(l);
-  const brick = spawnRaisedBlock(world, {
-    position: toWorld(l, cx, intro === null ? cy : cy - BRICK_DROP, brickZ(l)),
-    size: brickSize(l),
-    color: brickColor(row),
-    grow: intro === null ? 1 : 0
-  });
-  if (intro !== null) {
-    world.animate(brick, { position: toWorld(l, cx, cy, brickZ(l)) }, { spring: BRICK_INTRO_SPRING, delay: intro });
-    world.animate(brick, { scale }, { duration: 0.15, delay: intro });
-  }
-  return brick;
-}
-
-/** A broken brick: it pops (swells, flashes, settles, shrinks away) and bursts in its color, then it's gone. */
-export function breakBrick(world: World, l: Layout, brick: Entity, x: number, y: number, row: number) {
-  const at = toWorld(l, x + l.brickWidth / 2, y + l.brickHeight / 2, brickZ(l));
-  popAndBurst(
-    world,
-    brick,
-    { scale: brickScale(l), color: brickColor(row), duration: 0.45 },
-    { position: [at[0], at[1], at[2] + brickDepth(l)], size: l.brickHeight * 1.6, color: brickColor(row), glowZ: Z_RIM + 0.3 }
-  ).then(() => {
-    world.despawn(brick);
-  });
-}
-
-/** A brick that took a hit but stands: a quick shake. */
-export function hitBrick(world: World, brick: Entity) {
-  world.animate(brick, { shake: 2 }, { duration: 0.15 });
-}
-
-// ── Paddle ────────────────────────────────────────────────────────────
-
-/** The paddle: a root that squashes (about its centre) carrying the body, which widens. */
-export type Paddle = { root: Entity; body: Entity };
-
-export function spawnPaddle(world: World, l: Layout, x: number, width: number, color: Color): Paddle {
-  const root = world.spawn({ mesh: 'none', position: toWorld(l, x, l.paddleTop + l.paddleHeight / 2, paddleZ(l)), pickable: false });
-  const body = world.spawn({ mesh: 'roundedBox', parent: root, scale: [width, l.paddleHeight, paddleDepth(l)], color, pickable: false });
-  return { root, body };
-}
-
-export function placePaddle(world: World, l: Layout, p: Paddle, x: number) {
-  world.set(p.root, { position: toWorld(l, x, l.paddleTop + l.paddleHeight / 2, paddleZ(l)) });
-}
-
-export function setPaddleWidth(world: World, l: Layout, p: Paddle, width: number, animate: boolean) {
-  const scale: Vec3 = [width, l.paddleHeight, paddleDepth(l)];
-  if (animate) world.animate(p.body, { scale }, { duration: PADDLE_WIDTH_TIME });
-  else {
-    world.stopAnimation(p.body);
-    world.set(p.body, { scale });
-  }
-}
-
-/** Squash and stretch when the ball (strength 1) or a power-up (1.4) lands on it. */
-export function bumpPaddle(world: World, p: Paddle, strength: number) {
-  world.animate(p.root, { scale: [1 + strength * 0.06, 1 - strength * 0.22, 1] }, { duration: BUMP_TIME, easing: 'linear' }).then(() => {
-    world.animate(p.root, { scale: 1 }, { spring: BUMP_SPRING });
-  });
-}
-
-// ── Balls ─────────────────────────────────────────────────────────────
-
-/** A ball and the three fading dots trailing it. */
-export type BallView = { ball: Entity; trail: Entity[] };
-
-export function spawnBall(world: World, l: Layout, x: number, y: number, colors: PieceColors): BallView {
-  const ball = world.spawn({ mesh: 'sphere', position: toWorld(l, x, y, ballZ()), scale: HIDDEN, color: colors.ball, pickable: false });
-  world.animate(ball, { scale: BALL_RADIUS * 2 }, { spring: BALL_SPAWN_SPRING });
-  const trail = TRAIL.map((t) =>
-    world.spawn({
-      mesh: discMesh(),
-      position: toWorld(l, x, y, Z_TRAIL),
-      scale: BALL_RADIUS * 2 * t.r,
-      color: withAlpha(colors.trail, t.o),
-      pickable: false
-    })
-  );
-  return { ball, trail };
-}
-
-const withAlpha = (c: Color, a: number): Color => [c[0], c[1], c[2], a];
-
-export function placeBall(world: World, l: Layout, v: BallView, x: number, y: number, vx: number, vy: number) {
-  world.set(v.ball, { position: toWorld(l, x, y, ballZ()) });
-  v.trail.forEach((dot, i) => world.set(dot, { position: toWorld(l, x - vx * TRAIL[i]!.k, y - vy * TRAIL[i]!.k, Z_TRAIL) }));
-}
-
-export function colorBall(world: World, v: BallView, colors: PieceColors) {
-  world.set(v.ball, { color: colors.ball });
-  v.trail.forEach((dot, i) => world.set(dot, { color: withAlpha(colors.trail, TRAIL[i]!.o) }));
-}
-
-export function removeBall(world: World, v: BallView) {
-  world.despawn(v.ball);
-  for (const d of v.trail) world.despawn(d);
-}
-
-// ── Power-ups ─────────────────────────────────────────────────────────
-
-/** A falling power-up: a sphere in its color with a breathing glow behind it. */
-export function spawnPowerUp(world: World, l: Layout, type: PowerUpType, x: number, y: number): Entity {
-  const color = toColor(POWER_UP_COLORS[type]);
-  const root = world.spawn({ mesh: 'none', position: toWorld(l, x, y, powerUpZ()), scale: HIDDEN, pickable: false });
-  world.animate(root, { scale: 1 }, { spring: BALL_SPAWN_SPRING });
-  world.spawn({ mesh: 'sphere', parent: root, scale: POWER_UP_SIZE * 1.4, color, pickable: false });
-  const glow = world.spawn({
-    mesh: discMesh(),
-    parent: root,
-    position: [0, 0, -POWER_UP_SIZE],
-    scale: POWER_UP_SIZE * 1.8,
-    color: [color[0], color[1], color[2], 0.25],
-    pickable: false
-  });
-  world.animate(glow, { scale: POWER_UP_SIZE * 2.3 }, { duration: PULSE_TIME, easing: 'easeInOut', repeat: 'forever', yoyo: true });
-  return root;
-}
-
-export function placePowerUp(world: World, l: Layout, e: Entity, x: number, y: number) {
-  world.set(e, { position: toWorld(l, x, y, powerUpZ()) });
-}

package/src/games/bluk/Bluk.tsx

@@ -1,82 +0,0 @@
-// Bluk's screen, on the Nayan engine: the sky, the pillars and the block character are one 3D scene (an
-// orthographic camera looking a little down and from the right, sliding along the course), under
-// Playtura's scoreboard, controls and modals. The play is in BlukGame.ts (the rules in BlukRules.ts),
-// what it draws in BlukScene.ts.
-//
-// One world serves the whole visit: Start, Stop and Play Again deal a fresh board in place and a theme
-// change repaints it, so the GPU view is never rebuilt. JS steps the flight (four numbers) at 60 Hz and
-// the world once a frame; the landings, dust and rings animate in the engine's Rust core.
-import { useMemo } from 'react';
-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, timerColumn } from '../shared/EngineHud';
-import { toRgb } from '../shared/EngineUtils';
-import { useEngineGame } from '../shared/useEngineGame';
-import { useLiveState } from '../shared/useLiveState';
-import { GAME_DURATION, getConfig, LIGHT } from './BlukConstants';
-import { createGame, dispose, drag, type GameEvent, reset, setLayout, setTheme, start, tick } from './BlukGame';
-import { skyFor } from './BlukScene';
-
-const SOUNDS = GAME_SOUNDS.BLUK;
-
-/** Each event's sound and haptic, as the original version played them. */
-const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
-  jump: { sound: SOUNDS.JUMP, haptic: HapticType.LIGHT },
-  land: { sound: SOUNDS.LAND, haptic: HapticType.MEDIUM },
-  perfect: { sound: SOUNDS.PERFECT, haptic: HapticType.SUCCESS },
-  fall: { sound: SOUNDS.FALL, haptic: HapticType.ERROR },
-  gameOver: { sound: SOUNDS.GAME_OVER, haptic: HapticType.ERROR }
-};
-
-export const Bluk = engineGame(GAME_IDS.BLUK, (props) => {
-  const [score, setScore] = useLiveState(0);
-  const [time, setTime] = useLiveState(GAME_DURATION);
-
-  // A win when the two minutes are up, a loss when the block falls
-  const { theme, status, screen, gameOver } = useEngineGame(props, {
-    gameId: GAME_IDS.BLUK,
-    create: createGame,
-    start,
-    reset,
-    dispose,
-    tick,
-    setTheme,
-    // Size the course for the view.
-    resize: (g, width, height) => setLayout(g, getConfig(width, height, isTablet)),
-    drag,
-    sounds: SOUNDS,
-    onStart: (fx) => fx(SOUNDS.START, HapticType.SUCCESS),
-    onStop: (fx) => fx(null, HapticType.MEDIUM),
-    onOver: (fx, status) => {
-      if (status === 'win') fx(SOUNDS.WIN, HapticType.SUCCESS);
-    },
-    wire: (g, fx) => {
-      g.onScore = setScore;
-      g.onTime = setTime;
-      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
-    }
-  });
-
-  const sky = skyFor(theme);
-  const base = sky.stops[0]!;
-  const background = useMemo(() => toRgb(base), [base]);
-
-  return (
-    <EngineGameScreen
-      {...screen}
-      light={LIGHT}
-      background={background}
-      columns={[scoreColumn(score), timerColumn(time, theme)]}
-      subtext="Drag, release and jump!"
-      gameOver={gameOver({
-        title: status === 'win' ? 'YOU WIN!' : 'GAME OVER',
-        message: status === 'win' ? 'You survived 2 minutes!' : 'Nice jumping!',
-        scoreLabel: 'Final Score',
-        score,
-        buttonText: 'Jump Again!'
-      })}
-    />
-  );
-});

package/src/games/bluk/BlukConstants.ts

@@ -1,121 +0,0 @@
-// Bluk's rules, tuning, colors and layout. Every number is the original version's (games/bluk), worked out
-// from the view's size the way it worked them out from the screen's, so the jumps, the pillars and the
-// scores carry over. Lengths are view points; the world is one unit per point (y up).
-import { frontLight } from '../shared/EngineUtils';
-
-// ── Rules ─────────────────────────────────────────────────────────────
-
-export const GAME_DURATION = 120; // seconds: survive it to win
-export const POINTS_PER_LAND = 1000;
-export const PERFECT_BONUS = 500;
-export const LOOKAHEAD = 4; // pillars kept ahead of the current one
-export const PERFECT_SHOW = 0.6; // seconds the PERFECT! call stays up
-export const FALL_DELAY = 0.25; // seconds from falling off to game over
-
-// Physics, per 60 Hz step (as the original flight, which scaled every frame to one of these)
-export const GRAVITY = 0.62;
-export const POWER_MULTIPLIER = 0.16; // drag distance -> launch speed
-export const MIN_LAUNCH_SPEED = 6;
-export const STEP_MS = 1000 / 60;
-export const STEP_TOLERANCE_MS = 2;
-export const MAX_PENDING_MS = 34; // a long frame catches up two steps at most (the original cap)
-export const TRAJECTORY_DOTS = 16;
-export const TRAJECTORY_STEP = 3; // physics steps between preview dots
-
-/** Everything sized from the view (the original game sized it from the screen). */
-export type Config = {
-  width: number;
-  height: number;
-  blockSize: number;
-  pillarMinWidth: number;
-  pillarMaxWidth: number;
-  pillarTopMin: number;
-  pillarTopMax: number;
-  pillarDepth: number;
-  gapMin: number;
-  gapMax: number;
-  gapGrowthPerScore: number;
-  gapGrowthMax: number;
-  widthShrinkPerScore: number;
-  widthShrinkMax: number;
-  viewportMargin: number;
-  anchorX: number;
-  maxLaunchSpeed: number;
-  sweetSpotWidth: number;
-  fallThresholdY: number;
-};
-
-export function getConfig(width: number, height: number, tablet: boolean): Config {
-  const blockSize = tablet ? 56 : 44;
-  const pillarMinWidth = tablet ? 68 : 50;
-  const pillarMaxWidth = tablet ? 96 : 68;
-  const pillarDepth = tablet ? 16 : 12;
-  const viewportMargin = tablet ? 16 : 12;
-  const anchorX = Math.round(width * 0.18);
-  // The room a gap has in the worst case (both pillars at their widest), so the next pillar is always on screen
-  const gapRoom = width - viewportMargin - pillarDepth - pillarMaxWidth * 1.5 - anchorX;
-  return {
-    width,
-    height,
-    blockSize,
-    pillarMinWidth,
-    pillarMaxWidth,
-    pillarTopMin: Math.round(height * 0.44),
-    pillarTopMax: Math.round(height * 0.68),
-    pillarDepth,
-    gapMin: Math.round(Math.min(width * 0.3, gapRoom * 0.9)),
-    gapMax: Math.round(gapRoom),
-    gapGrowthPerScore: tablet ? 1.0 : 0.8,
-    gapGrowthMax: tablet ? 60 : 36,
-    widthShrinkPerScore: tablet ? 0.7 : 0.5,
-    widthShrinkMax: tablet ? 28 : 18,
-    viewportMargin,
-    anchorX,
-    maxLaunchSpeed: tablet ? 26 : 22,
-    sweetSpotWidth: blockSize,
-    fallThresholdY: height + 120
-  };
-}
-
-// ── Colors ────────────────────────────────────────────────────────────
-
-/** The block's colors, cycling as you go. */
-export const BLOCK_COLORS = ['#FF6B6B', '#4ECDC4', '#FFD93D', '#6BCB77', '#4D96FF', '#FF6FB5', '#A66CFF', '#FF9F45'] as const;
-export const START_COLOR = 2;
-
-export const COLORS = {
-  // Teal-slate stone, lighter than the violet sky so the playfield never blends into it
-  PILLAR: '#537A8D',
-  PILLAR_TOP: '#84AFC0',
-  PILLAR_EDGE: '#CDEBF5',
-  PILLAR_BAND: '#365463',
-  // The pillars' rock and their grassy caps
-  ROCK: '#7C8A93',
-  GRASS: '#5DAE4A',
-  GRASS_DARK: '#3E8A35',
-  MOSS: '#4A7A3A',
-  SWEET_RECESS: '#0C1B22',
-  SWEET_SPOT: '#FFDD22',
-  TRAJECTORY: '#64D2FF',
-  SKIN: '#F5C99A',
-  PUPIL: '#2C2C2C',
-  SMILE: '#C0785A',
-  PERFECT: '#FFD700'
-} as const;
-
-/** Each theme's sky (top to bottom), whether it has stars, and its far towers' tint. */
-export type Sky = { stops: string[]; stars: boolean; tower: string };
-export const SKIES: Record<'classic' | 'light' | 'dark', Sky> = {
-  classic: { stops: ['#05040F', '#0C0A22', '#150F35', '#1E1548', '#140D31', '#070413'], stars: true, tower: '#2A2150' },
-  dark: { stops: ['#17122B', '#1C1634', '#241D40', '#3D3659', '#2A2442', '#17122B'], stars: true, tower: '#3A3062' },
-  light: { stops: ['#C0B9DB', '#C8C2E0', '#E2DFF0', '#EEECF7', '#E2DFF0', '#C8C2E0'], stars: false, tower: '#A99FCB' }
-};
-export const SKY_POSITIONS = [0, 0.16, 0.36, 0.55, 0.78, 1.0];
-
-// ── The scene ─────────────────────────────────────────────────────────
-
-/** The camera looks down from above and round from the right, so the pillars' tops, sides and depth all show. */
-export const PITCH = 0.3;
-export const YAW = 0.42;
-/** Lit from the upper left front. */
-export const LIGHT = frontLight([-0.45, 0.7, 0.6], 0.5);