@nayan-ui/games 1.18.0 → 1.20.0

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

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

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

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