@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/arrows/ArrowsScene.ts

@@ -0,0 +1,395 @@
+// Everything Arrows draws. Orthographic camera, one world unit per point, looking down -z: x right and
+// y up from the view's centre. The board is an invisible root at its centre (so the win pulse scales
+// about the middle); each arrow under it is a root carrying its line, built from shared meshes: a round
+// tube for every straight run, a ball at the tail, each turn and the shaft's end (round caps and joins),
+// and a cone for the head. Mesh ids are app-wide and limited, so arrows never get a mesh of their own.
+// The engine doesn't clip, so flying arrows leave the board and fade out past its edge, as the original
+// overlay let them.
+import { type Color, type Entity, extrude, type Model, Path, quat, tube, type Vec3, type World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { spawnBackdrop } from '../shared/EngineBackdrop';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { toColor } from '../shared/EngineUtils';
+import {
+  ARROW_COLOR,
+  BLOCK_SHAKE,
+  BLOCK_TIME,
+  BLOCKED_COLOR,
+  BLOCKER_COLOR,
+  BLOCKER_TIME,
+  cellCenter,
+  COMPLETION_SCALE,
+  COMPLETION_SPRING,
+  type Direction,
+  DOT_DELAY,
+  DOT_SPRING,
+  DRAW_IN_STAGGER,
+  DRAW_IN_TIME,
+  EMPTY_DOT_COLOR,
+  ENTRANCE_TIME,
+  FLY_COLOR,
+  type Layout,
+  tipDistance
+} from './ArrowsConstants';
+
+const Z_BACKDROP = -20;
+const Z_DOTS = 0.5;
+const HIDDEN = 0;
+
+/** A view point (from the top-left) at depth `z`, in world space. */
+const toWorld = (l: Layout, x: number, y: number, z = 0): Vec3 => [x - l.width / 2, l.height / 2 - y, z];
+/** A board point (from the board's top-left, y down) relative to the board root. */
+const local = (l: Layout, [x, y]: Pt, z: number): Vec3 => [x - l.boardWidth / 2, l.boardHeight / 2 - y, z];
+
+const arrowZ = (l: Layout) => l.stroke;
+const flyingZ = (l: Layout) => l.stroke * 3 + l.headHalfWidth;
+
+// ── Meshes (registered once: 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('arrows/ArrowsScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+/** A unit-long, unit-thick round tube along x, open ended (balls cover the ends). */
+const barMesh = () =>
+  mesh('arrow-bar', () =>
+    createShape(
+      tube(
+        [
+          [-0.5, 0, 0],
+          [0.5, 0, 0]
+        ],
+        { radius: 0.5, sides: 12, smoothness: 1, caps: false }
+      )
+    )
+  );
+/** A unit cone pointing along +x, centred. */
+const headMesh = () =>
+  mesh('arrow-head', () =>
+    createShape(
+      tube(
+        [
+          [0, 0, 0],
+          [1, 0, 0]
+        ],
+        { radius: (t) => 0.5 * (1 - t), sides: 16, smoothness: 4 }
+      )
+    )
+  );
+/** A flat unit disc facing the camera. */
+const discMesh = () => mesh('disc', () => createShape(extrude(new Path().addCircle(0, 0, 0.5), { depth: 0 })));
+
+// ── Colors ────────────────────────────────────────────────────────────
+
+/** White line art on classic indigo; light / dark draw it in the theme's text color. */
+export const arrowColor = (theme: GameTheme): Color => toColor(theme.mode === 'classic' ? ARROW_COLOR : theme.TEXT);
+const FLY: Color = toColor(FLY_COLOR);
+const BLOCKED: Color = toColor(BLOCKED_COLOR);
+const BLOCKER: Color = toColor(BLOCKER_COLOR);
+const DOT: Color = toColor(EMPTY_DOT_COLOR);
+const withAlpha = (c: Color, a: number): Color => [c[0], c[1], c[2], a];
+
+// ── Geometry ──────────────────────────────────────────────────────────
+
+type Pt = [number, number];
+
+const EXIT_X = [0, 1, 0, -1];
+const EXIT_Y = [-1, 0, 1, 0]; // board points run down
+/** The direction's unit step in board points. */
+const exitVector = (dir: Direction): Pt => [EXIT_X[dir]!, EXIT_Y[dir]!];
+/** Turns a +x mesh to face the direction (world y runs up). */
+const ANGLES = [Math.PI / 2, 0, -Math.PI / 2, Math.PI];
+const VERTICAL = quat.z(Math.PI / 2);
+const HORIZONTAL = quat.z(0);
+
+/** Drops points that don't turn the line (and repeats), keeping both ends. */
+function corners(pts: Pt[]): Pt[] {
+  const out: Pt[] = [pts[0]!];
+  for (let i = 1; i < pts.length; i++) {
+    const p = pts[i]!;
+    const prev = out[out.length - 1]!;
+    if (p[0] === prev[0] && p[1] === prev[1]) continue;
+    const before = out[out.length - 2];
+    if (before && (prev[0] - before[0]) * (p[1] - prev[1]) - (prev[1] - before[1]) * (p[0] - prev[0]) === 0) out[out.length - 1] = p;
+    else out.push(p);
+  }
+  return out;
+}
+
+const segmentLength = (a: Pt, b: Pt) => Math.abs(b[0] - a[0]) + Math.abs(b[1] - a[1]); // runs are straight
+
+/** Places a bar from a to b (board points, one axis), `width` thick, or hides it if it's empty. */
+function placeBar(world: World, l: Layout, bar: Entity, a: Pt, b: Pt, width: number, z: number) {
+  const length = segmentLength(a, b);
+  if (length < 0.01) {
+    world.set(bar, { scale: HIDDEN });
+    return;
+  }
+  world.set(bar, {
+    position: local(l, [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2], z),
+    rotation: a[0] === b[0] ? VERTICAL : HORIZONTAL,
+    scale: [length, width, width]
+  });
+}
+
+export type ArrowShape = { waypoints: readonly { row: number; col: number }[]; exitDir: Direction };
+
+/** Where the arrow's line runs (tail, turns, the shaft's end) and where its head sits. */
+function arrowLine(l: Layout, a: ArrowShape) {
+  const centers = a.waypoints.map((w) => cellCenter(l, w.row, w.col));
+  const last = centers[centers.length - 1]!;
+  const [ex, ey] = exitVector(a.exitDir);
+  const tip = tipDistance(l);
+  const shaftEnd: Pt = [last[0] + ex * (tip - l.headLength), last[1] + ey * (tip - l.headLength)];
+  const head: Pt = [last[0] + ex * (tip - l.headLength / 2), last[1] + ey * (tip - l.headLength / 2)];
+  return { centers, points: corners([...centers, shaftEnd]), head };
+}
+
+const headScale = (l: Layout): Vec3 => [l.headLength, l.headHalfWidth * 2, l.headHalfWidth * 2];
+
+// ── Board ─────────────────────────────────────────────────────────────
+
+export type Scenery = { backdrop: Entity; board: Entity };
+
+/** The game background and the (invisible) board root the arrows and dots hang from. */
+export function buildScenery(world: World, l: Layout, theme: GameTheme, entrance: boolean): Scenery {
+  const board = world.spawn({
+    mesh: 'none',
+    position: toWorld(l, l.boardLeft + l.boardWidth / 2, l.boardTop + l.boardHeight / 2),
+    scale: entrance ? 0.94 : 1,
+    pickable: false
+  });
+  if (entrance) world.animate(board, { scale: 1 }, { duration: ENTRANCE_TIME });
+  return { backdrop: spawnBackdrop(world, l.width, l.height, Z_BACKDROP, theme), board };
+}
+
+/** The board's little bounce when the last arrow leaves. */
+export function pulseBoard(world: World, board: Entity) {
+  world.animate(board, { scale: COMPLETION_SCALE }, { duration: 0.2 }).then(() => {
+    world.animate(board, { scale: 1 }, { spring: COMPLETION_SPRING });
+  });
+}
+
+// ── Arrows on the board ───────────────────────────────────────────────
+
+export type ArrowView = { root: Entity; parts: Entity[] };
+
+/**
+ * An arrow at rest. With `intro`, it draws itself along its path from the tail, its start `intro`
+ * seconds in (the original board's draw-in): each run grows after the one before, the head pops in last.
+ */
+export function spawnArrow(world: World, l: Layout, board: Entity, a: ArrowShape, color: Color, intro: number | null): ArrowView {
+  const { points, head } = arrowLine(l, a);
+  const z = arrowZ(l);
+  const w = l.stroke;
+  const root = world.spawn({ mesh: 'none', parent: board, position: [0, 0, 0], pickable: false });
+  const parts: Entity[] = [];
+  const total = points.reduce((sum, p, i) => (i ? sum + segmentLength(points[i - 1]!, p) : 0), 0) || 1;
+  const drawTime = DRAW_IN_TIME * (1 - DRAW_IN_STAGGER);
+  let arc = 0;
+  points.forEach((p, i) => {
+    const at = intro === null ? 0 : intro + (arc / total) * drawTime;
+    const joint = world.spawn({ mesh: 'sphere', parent: root, position: local(l, p, z), scale: intro === null ? w : HIDDEN, color, pickable: false });
+    if (intro !== null) world.animate(joint, { scale: w }, { duration: 0.04, delay: at, easing: 'linear' });
+    parts.push(joint);
+    const next = points[i + 1];
+    if (!next) return;
+    const length = segmentLength(p, next);
+    const bar = world.spawn({ mesh: barMesh(), parent: root, color, pickable: false });
+    if (intro === null) {
+      placeBar(world, l, bar, p, next, w, z);
+    } else {
+      // Grows from p: the far end runs out to `next` while the bar stays anchored at p.
+      world.set(bar, { position: local(l, p, z), rotation: p[0] === next[0] ? VERTICAL : HORIZONTAL, scale: [0.001, w, w] });
+      world.animate(
+        bar,
+        { position: local(l, [(p[0] + next[0]) / 2, (p[1] + next[1]) / 2], z), scale: [length, w, w] },
+        {
+          duration: (length / total) * drawTime,
+          delay: at,
+          easing: 'linear'
+        }
+      );
+    }
+    parts.push(bar);
+    arc += length;
+  });
+  const cone = world.spawn({
+    mesh: headMesh(),
+    parent: root,
+    position: local(l, head, z),
+    rotation: quat.z(ANGLES[a.exitDir]!),
+    scale: intro === null ? headScale(l) : HIDDEN,
+    color,
+    pickable: false
+  });
+  if (intro !== null) world.animate(cone, { scale: headScale(l) }, { duration: drawTime * 0.25, delay: intro + drawTime * 0.75 });
+  parts.push(cone);
+  return { root, parts };
+}
+
+export function setArrowColor(world: World, view: ArrowView, color: Color) {
+  for (const p of view.parts) world.set(p, { color });
+}
+
+/** A blocked tap: the arrow flashes red with a decaying wobble, then fades back to its color. */
+export function flashBlocked(world: World, view: ArrowView, color: Color) {
+  world.animate(view.root, { shake: BLOCK_SHAKE }, { duration: BLOCK_TIME, easing: 'linear' });
+  for (const p of view.parts) {
+    world.set(p, { color: BLOCKED });
+    world.animate(p, { color }, { duration: BLOCK_TIME * 0.4, delay: BLOCK_TIME * 0.6, easing: 'linear' });
+  }
+}
+
+/** The arrow in the way of a blocked tap pulses amber once, so the player sees what to clear first. */
+export function pulseBlocker(world: World, view: ArrowView, color: Color) {
+  for (const p of view.parts) world.animate(p, [{ color: BLOCKER, at: 0.5 }, { color }], { duration: BLOCKER_TIME, easing: 'easeInOut' });
+}
+
+// ── Flying arrows ─────────────────────────────────────────────────────
+
+/**
+ * An arrow on its way out. It slithers ALONG its own path: the head leads straight out of the board
+ * and the body follows through the turns, opaque inside the board and fading once past its edge.
+ * The path is a polyline from the tail through the turns to a point far off screen; `travel` slides
+ * the arrow's span of it forward each frame.
+ */
+export type Flight = {
+  root: Entity;
+  /** One per run of the path; the last run's part beyond the board edge is `outside`. */
+  bars: Entity[];
+  outside: Entity;
+  /** The tail, every turn, the shaft's end. */
+  joints: Entity[];
+  head: Entity;
+  points: Pt[];
+  /** Arc length at each point. */
+  arcs: number[];
+  /** The shaft's length, tail to the head's base. */
+  shaft: number;
+  /** Arc length where the path crosses the board edge, and how far past it the arrow fades out. */
+  edge: number;
+  fade: number;
+  /** How far the arrow travels in its flight. */
+  far: number;
+  elapsed: number;
+};
+
+export function spawnFlight(world: World, l: Layout, board: Entity, a: ArrowShape): Flight {
+  const { centers } = arrowLine(l, a);
+  const last = centers[centers.length - 1]!;
+  const [ex, ey] = exitVector(a.exitDir);
+  const far = l.boardWidth + l.boardHeight + l.width + l.height;
+  const points = corners([...centers, [last[0] + ex * far, last[1] + ey * far]]);
+  const arcs = [0];
+  for (let i = 1; i < points.length; i++) arcs.push(arcs[i - 1]! + segmentLength(points[i - 1]!, points[i]!));
+
+  // The final run starts at the last turn (or the tail) and carries the head out.
+  const runStart = points[points.length - 2]!;
+  const runArc = arcs[points.length - 2]!;
+  const tip = tipDistance(l);
+  const shaft = runArc + segmentLength(runStart, last) + tip - l.headLength;
+  const toEdge = [runStart[1], l.boardWidth - runStart[0], l.boardHeight - runStart[1], runStart[0]][a.exitDir]!;
+  // Fade over the space between the board and the view's edge (at least four cells)
+  const margin = [l.boardTop, l.width - l.boardLeft - l.boardWidth, l.height - l.boardTop - l.boardHeight, l.boardLeft][a.exitDir]!;
+  const horizontal = a.exitDir === 1 || a.exitDir === 3;
+  const fade = Math.max(margin, l.stride * 4, horizontal ? l.width * 0.4 : 0);
+
+  const root = world.spawn({ mesh: 'none', parent: board, position: [0, 0, 0], pickable: false });
+  const part = (shape: Model | 'sphere', color = FLY) => world.spawn({ mesh: shape, parent: root, scale: HIDDEN, color, pickable: false });
+  const flight: Flight = {
+    root,
+    bars: points.slice(1).map(() => part(barMesh())),
+    outside: part(barMesh()),
+    joints: points.map(() => part('sphere')),
+    head: world.spawn({ mesh: headMesh(), parent: root, rotation: quat.z(ANGLES[a.exitDir]!), scale: headScale(l), color: FLY, pickable: false }),
+    points,
+    arcs,
+    shaft,
+    edge: runArc + toEdge,
+    fade,
+    far: far - tip,
+    elapsed: 0
+  };
+  placeFlight(world, l, flight, 0);
+  return flight;
+}
+
+/** The point `s` along the flight's path (past the end it carries on along the last run). */
+function pointAt(f: Flight, s: number): Pt {
+  let i = 0;
+  while (i < f.arcs.length - 2 && f.arcs[i + 1]! < s) i++;
+  const a = f.points[i]!;
+  const b = f.points[i + 1]!;
+  const t = (s - f.arcs[i]!) / (f.arcs[i + 1]! - f.arcs[i]!);
+  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+}
+
+/** Advances a flight by `dt` seconds; returns false once it has finished (and despawned). */
+export function stepFlight(world: World, l: Layout, f: Flight, dt: number, duration: number): boolean {
+  f.elapsed += dt;
+  if (f.elapsed >= duration) {
+    world.despawn(f.root);
+    return false;
+  }
+  const p = f.elapsed / duration;
+  placeFlight(world, l, f, p * p * f.far); // accelerates out from rest
+  return true;
+}
+
+function placeFlight(world: World, l: Layout, f: Flight, travel: number) {
+  const z = flyingZ(l);
+  const w = l.stroke + 1;
+  const from = travel;
+  const to = travel + f.shaft;
+  const alphaAt = (s: number) => 1 - Math.max(0, Math.min(1, (s - f.edge) / f.fade));
+  const lastRun = f.bars.length - 1;
+
+  f.bars.forEach((bar, i) => {
+    const start = Math.max(f.arcs[i]!, from);
+    const end = Math.min(i === lastRun ? f.edge : f.arcs[i + 1]!, to);
+    if (end <= start) world.set(bar, { scale: HIDDEN });
+    else placeBar(world, l, bar, pointAt(f, start), pointAt(f, end), w, z);
+  });
+  const outStart = Math.max(f.edge, from);
+  if (to <= outStart) {
+    world.set(f.outside, { scale: HIDDEN });
+  } else {
+    placeBar(world, l, f.outside, pointAt(f, outStart), pointAt(f, to), w, z);
+    world.set(f.outside, { color: withAlpha(FLY, alphaAt((outStart + to) / 2)) });
+  }
+
+  const lastJoint = f.joints.length - 1;
+  f.joints.forEach((joint, i) => {
+    const s = i === 0 ? from : i === lastJoint ? to : f.arcs[i]!;
+    if (s < from || s > to) {
+      world.set(joint, { scale: HIDDEN });
+      return;
+    }
+    world.set(joint, { position: local(l, pointAt(f, s), z), scale: w, color: withAlpha(FLY, alphaAt(s)) });
+  });
+
+  const headAt = to + l.headLength / 2;
+  world.set(f.head, { position: local(l, pointAt(f, headAt), z), color: withAlpha(FLY, alphaAt(headAt)) });
+}
+
+// ── Empty cells ───────────────────────────────────────────────────────
+
+/** The dot an empty cell shows, popping in just after an arrow's tail has left it. */
+export function spawnDot(world: World, l: Layout, board: Entity, row: number, col: number): Entity {
+  const dot = world.spawn({
+    mesh: discMesh(),
+    parent: board,
+    position: local(l, cellCenter(l, row, col), Z_DOTS),
+    scale: HIDDEN,
+    color: DOT,
+    pickable: false
+  });
+  world.animate(dot, { scale: l.dotRadius * 2 }, { spring: DOT_SPRING, delay: DOT_DELAY });
+  return dot;
+}

package/src/games/balloon-blaster/BalloonBlaster.tsx

@@ -0,0 +1,75 @@
+// Balloon Blaster's screen, on the Nayan engine: a 3D meadow under an open sky seen through a perspective
+// camera, with glossy rubber balloons rising in front of it, under Playtura's scoreboard, controls and
+// modals. The rules are in BalloonBlasterGame.ts, the world in shared/EngineMeadow.ts, the balloons in
+// BalloonBlasterScene.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. Spins, swaying strings, pops and bursts move in
+// the engine's Rust core; JS rises a handful of balloons, hit-tests taps and steps the world once a frame.
+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 { livesColumn, scoreColumn, timerColumn } from '../shared/EngineHud';
+import { backgroundFor, lightFor } from '../shared/EngineMeadow';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, MAX_LIVES, TIME_LIMIT } from './BalloonBlasterConstants';
+import { createGame, dispose, reset, setLayout, setTheme, start, tick, touch } from './BalloonBlasterGame';
+
+const SFX = GAME_SOUNDS.BALLOON_BLASTER;
+
+export const BalloonBlaster = engineGame(GAME_IDS.BALLOON_BLASTER, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [lives, setLives] = useLiveState(MAX_LIVES);
+  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
+
+  // Lasting out the timer is a win, losing every life a loss
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.BALLOON_BLASTER,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height) => setLayout(g, getLayout(width, height)),
+    // Pops on touch-down: waiting for the finger to lift let the rising balloon drift away from it
+    drag: (g, { phase, x, y }) => {
+      if (phase === 'start') touch(g, x, y);
+    },
+    sounds: SFX,
+    onStart: (fx) => fx(SFX.START),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onLives = setLives;
+      g.onTime = setTimeLeft;
+      g.onPop = () => fx(SFX.POP, HapticType.LIGHT);
+      g.onBomb = () => fx(SFX.BOMB, HapticType.HEAVY);
+      g.onWin = () => fx(GAME_SOUNDS.WELL_DONE);
+      g.onLose = () => fx(SFX.GAME_OVER);
+    }
+  });
+
+  // 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), livesColumn(lives, MAX_LIVES), timerColumn(timeLeft, theme)]}
+      subtext="Pop balloons to score!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'TIME UP!' : 'GAME OVER',
+        message: status === 'win' ? 'Great popping!' : 'You ran out of lives!',
+        scoreLabel: 'Final Score',
+        score,
+        buttonText: 'Pop Again!'
+      })}
+    />
+  );
+});

package/src/games/balloon-blaster/BalloonBlasterConstants.ts

@@ -0,0 +1,79 @@
+import { isTablet } from '../../services/UtilsService';
+// Balloon Blaster's rules, physics, timings and layout. Rules, scoring, physics and layout match the
+// original version (games/balloon-blaster), so scores and feel carry over.
+import type { MeadowOptions, Rig } from '../shared/EngineMeadow';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const TIME_LIMIT = 120; // seconds; lasting it out counts as a win
+export const MAX_LIVES = 3;
+export const POINTS_PER_BALLOON = 100;
+export const SPECIAL_CHANCE = 0.2; // half bombs (black), half lives (multicolored)
+
+/** The ordinary balloon colors (the multicolored one is the life balloon, not one of these). */
+export const BALLOON_COLORS = [
+  '#FF0040',
+  '#0080FF',
+  '#FFD700',
+  '#00FF80',
+  '#8000FF',
+  '#FF0080',
+  '#FF4000',
+  '#00FFFF',
+  '#FF00FF',
+  '#FFB000',
+  '#00FF00'
+] as const;
+export type BalloonColor = (typeof BALLOON_COLORS)[number];
+/** The life balloon's bands, knot to crown. */
+export const RAINBOW = ['#FF0080', '#8000FF', '#0080FF', '#00FF80', '#FFD700', '#FF4000'] as const;
+
+// ── Spawning (seconds) ────────────────────────────────────────────────
+
+export const FIRST_BALLOONS = 3;
+export const FIRST_STAGGER = 0.1;
+export const SPAWN_INTERVAL = 0.8;
+
+// ── Physics (points per 60 fps frame, as the original version) ───────────
+
+export const FRAME_TIME = 1 / 60;
+export const MAX_FRAMES = 3;
+export const BALLOON_SIZE = isTablet ? 92 : 60;
+export const RISE_SPEED = -1.2;
+export const LIFT = -0.005; // helium: a gentle pull upward that builds
+export const DRIFT_RANGE = 0.5;
+export const SPIN_RANGE = 0.02; // radians per frame, ± half
+export const WALL_BOUNCE = 0.8;
+export const BALLOON_BOUNCE = 0.5; // balloons bumping each other: soft
+export const BALLOON_HIT = 1.6; // conservative body bounds include rocking, knots and perspective
+export const BALLOON_GAP = 6;
+export const TOUCH_PAD = 10;
+
+// ── Feel (seconds) ────────────────────────────────────────────────────
+
+export const POP_TIME = 0.2; // a quick swell, then gone
+export const POP_SWELL = 1.22;
+
+// ── The world ─────────────────────────────────────────────────────────
+
+/** Eye height with the horizon low on the screen: open sky to float up through, the meadow below. */
+export const RIG: Rig = { eyeHeight: 1.6, horizon: 0.8, playDepth: 5 };
+export const MEADOW: MeadowOptions = { sun: [0.8, 0.18], clouds: [0.14, 0.62], framingTrees: false, foreground: false, hotAirBalloons: 3 };
+
+// ── Layout (screen points) ────────────────────────────────────────────
+
+export type Layout = {
+  /** The GameView's size: the whole screen, as the original game area. */
+  width: number;
+  height: number;
+  size: number;
+  /** The balloon's body (it's taller than wide) and its whole height with the string. */
+  bodyHeight: number;
+  totalHeight: number;
+};
+
+export function getLayout(width: number, height: number): Layout {
+  const size = BALLOON_SIZE;
+  const bodyHeight = size * 1.25;
+  return { width, height, size, bodyHeight, totalHeight: bodyHeight + Math.round((size / 60) * 30) };
+}