@nayan-ui/games 1.19.0 → 1.20.0

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

@@ -0,0 +1,287 @@
+// Balloon Blaster's rules and physics, with no React: build a run with `createGame`, give it a layout,
+// `start` it and `tick` it every frame. Balloons rise from below the screen, drifting and turning; tap
+// one to pop it for 100. The multicolored one gives a life back, a black bomb takes one. Last out the timer to win; lose all
+// three lives and it's over. The physics is the original version's: moves are per 60 fps frame, scaled by
+// the frame's length, and taps are hit-tested against each balloon's body and string, bombs first.
+import { type Camera, type Entity, World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { cameraFor, makeView, spawnWorld, type View3D } from '../shared/EngineMeadow';
+import {
+  BALLOON_COLORS,
+  DRIFT_RANGE,
+  FIRST_BALLOONS,
+  FIRST_STAGGER,
+  FRAME_TIME,
+  type Layout,
+  LIFT,
+  MAX_FRAMES,
+  MAX_LIVES,
+  MEADOW,
+  POINTS_PER_BALLOON,
+  RIG,
+  RISE_SPEED,
+  SPAWN_INTERVAL,
+  SPECIAL_CHANCE,
+  SPIN_RANGE,
+  TIME_LIMIT,
+  TOUCH_PAD,
+  WALL_BOUNCE
+} from './BalloonBlasterConstants';
+import { balloonBounds, findBalloonSpawn, separateBalloons } from './BalloonBlasterPhysics';
+import { type BalloonKind, balloonMeshes, placeBalloon, popBalloon, spawnBalloon } from './BalloonBlasterScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+
+/** A balloon: its box's top-left in screen points and its velocity per frame. */
+type Balloon = { what: BalloonKind; x: number; y: number; vx: number; vy: number; root: Entity };
+
+const WORLD_CAPACITY = 1100; // the meadow (~320), balloons with their parts, pops and bursts
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  // Placed for the view on the first layout; GameView reads this object every frame
+  const camera: Camera = { eye: [0, 1.6, 0], target: [0, 1.6, -1], fov: 0.9 };
+  const g = {
+    world,
+    camera,
+    theme,
+    layout: null as Layout | null,
+    view: null as View3D | null,
+    /** Everything in the world around the play area (sky, hills, trees, ...). */
+    scenery: [] as Entity[],
+    phase: 'ready' as Phase,
+    /** Score, lives and the countdown live in the engine (Rust), advanced by world.update. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    get lives() {
+      return world.scoreboard.lives;
+    },
+    won: false,
+    /** Game clock, seconds: drives spawning (it pauses with the frame loop). */
+    time: 0,
+    pending: 0,
+    balloons: [] as Balloon[],
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number) => {},
+    onLives: (_n: number) => {},
+    onTime: (_t: number) => {},
+    onPop: () => {},
+    onBomb: () => {},
+    onWin: () => {},
+    onLose: () => {}
+  };
+  world.scoreboard.reset(MAX_LIVES);
+  world.scoreboard.handlers = {
+    onScore: (s) => g.onScore(s),
+    onLives: (n) => g.onLives(n),
+    onSecond: (t) => g.phase === 'playing' && g.onTime(t),
+    onTimeUp: () => g.phase === 'playing' && end(g, true),
+    onLivesOut: () => g.phase === 'playing' && end(g, false)
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+const after = (g: Game, seconds: number, run: () => void) => g.world.after(seconds, run);
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Lays the world out for the view (first layout, rotation). Balloons in the air are cleared. */
+export function setLayout(g: Game, l: Layout) {
+  const w = g.world;
+  clearBalloons(g);
+  for (const e of g.scenery) w.despawn(e);
+  g.pending = 0;
+  g.layout = l;
+  const v = makeView(l.width, l.height, RIG);
+  g.view = v;
+  const cam = cameraFor(v);
+  g.camera.eye = cam.eye;
+  g.camera.target = cam.target;
+  g.camera.fov = cam.fov;
+  g.scenery = spawnWorld(w, v, g.theme, MEADOW);
+  balloonMeshes(); // built now, so the first balloon doesn't pay for it
+}
+
+/** A new theme: day or night (the screen swaps the light); the run carries on. */
+export function setTheme(g: Game, theme: GameTheme) {
+  if (theme === g.theme && g.scenery.length) return;
+  g.theme = theme;
+  const v = g.view;
+  if (!v || g.world.isDisposed) return;
+  for (const e of g.scenery) g.world.despawn(e);
+  g.scenery = spawnWorld(g.world, v, theme, MEADOW);
+}
+
+function clearBalloons(g: Game) {
+  for (const b of g.balloons) g.world.despawn(b.root);
+  g.balloons = [];
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+export function start(g: Game) {
+  if (g.phase !== 'ready') return;
+  g.phase = 'playing';
+  g.world.scoreboard.startCountdown(TIME_LIMIT);
+  g.onPhase('playing');
+  for (let i = 0; i < FIRST_BALLOONS; i++) after(g, i * FIRST_STAGGER, () => release(g));
+  after(g, SPAWN_INTERVAL, () => spawnLoop(g));
+}
+
+function spawnLoop(g: Game) {
+  if (g.phase !== 'playing') return;
+  release(g);
+  after(g, SPAWN_INTERVAL, () => spawnLoop(g));
+}
+
+/** A balloon from just below the screen: one in five a bomb or a life, otherwise a random color. */
+function release(g: Game) {
+  const l = g.layout;
+  const v = g.view;
+  if (!l || !v || g.phase !== 'playing') return;
+  const what: BalloonKind =
+    Math.random() < SPECIAL_CHANCE
+      ? Math.random() < 0.5
+        ? { kind: 'bomb' }
+        : { kind: 'life' }
+      : { kind: 'balloon', color: BALLOON_COLORS[Math.floor(Math.random() * BALLOON_COLORS.length)]! };
+  const y = l.height + l.size;
+  const x = findBalloonSpawn(g.balloons, l, y);
+  if (x === null) return;
+  const spin = (Math.random() - 0.5) * SPIN_RANGE;
+  g.balloons.push({
+    what,
+    x,
+    y,
+    vx: (Math.random() - 0.5) * DRIFT_RANGE,
+    vy: RISE_SPEED,
+    root: spawnBalloon(g.world, v, l, what, x + l.size / 2, y + l.bodyHeight / 2, spin)
+  });
+}
+
+/** A fresh run (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
+export function reset(g: Game) {
+  g.world.cancelTimers();
+  clearBalloons(g);
+  g.world.scoreboard.reset(MAX_LIVES);
+  g.won = false;
+  g.time = 0;
+  g.pending = 0;
+  g.phase = 'ready';
+  g.onScore(0);
+  g.onLives(MAX_LIVES);
+  g.onTime(TIME_LIMIT);
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.cancelTimers();
+  g.world.dispose();
+}
+
+/** Time up (a win) or out of lives: spawning stops and the balloons are cleared. */
+function end(g: Game, won: boolean) {
+  g.world.cancelTimers();
+  g.world.scoreboard.stop();
+  clearBalloons(g);
+  g.won = won;
+  g.phase = 'over';
+  if (won) g.onWin();
+  else g.onLose();
+  g.onPhase('over');
+}
+
+export function tick(g: Game, dt: number) {
+  if (g.world.isDisposed) return;
+  const elapsed = Math.max(0, Math.min(dt, FRAME_TIME * MAX_FRAMES));
+  g.time += elapsed;
+  let moved = false;
+  if (g.phase === 'playing') {
+    g.pending = Math.min(g.pending + elapsed, FRAME_TIME * MAX_FRAMES);
+    while (g.pending + 1e-9 >= FRAME_TIME) {
+      if (g.balloons.length) {
+        step(g, 1);
+        moved = true;
+      }
+      g.pending = Math.max(0, g.pending - FRAME_TIME);
+    }
+  }
+  if (moved && g.view && g.layout) {
+    const updates = g.world.transforms;
+    for (const b of g.balloons) placeBalloon(g.world, g.view, b.root, b.what, b.x + g.layout.size / 2, b.y + g.layout.bodyHeight / 2, updates);
+    updates.flush();
+  }
+  g.world.update(elapsed);
+}
+
+/** One step of `dt` 60 fps frames: balloons rise (faster as the helium pulls), drift and bounce off the sides. */
+function step(g: Game, dt: number) {
+  const l = g.layout!;
+  const { left, right } = balloonBounds(l);
+  const kept = g.balloons;
+  let count = 0;
+  for (const b of g.balloons) {
+    b.vy += LIFT * dt;
+    let x = b.x + b.vx * dt;
+    const y = b.y + b.vy * dt;
+    // Floated off the top: gone, no penalty
+    if (y < -l.size * 2) {
+      g.world.despawn(b.root);
+      continue;
+    }
+    if (x <= left) {
+      x = left;
+      b.vx = Math.abs(b.vx) * WALL_BOUNCE;
+    } else if (x >= right) {
+      x = right;
+      b.vx = -Math.abs(b.vx) * WALL_BOUNCE;
+    }
+    b.x = x;
+    b.y = y;
+    kept[count++] = b;
+  }
+  kept.length = count;
+  separateBalloons(g.balloons, l);
+}
+
+// ── Tapping ───────────────────────────────────────────────────────────
+
+/**
+ * Finger down: pops the balloon under it (its body and string, padded for fingertips). Bombs win over
+ * balloons they overlap, as they're drawn on top; otherwise the balloon whose body centre is nearest.
+ */
+export function touch(g: Game, x: number, y: number) {
+  const l = g.layout;
+  const v = g.view;
+  if (!l || !v || g.phase !== 'playing') return;
+  let best: Balloon | null = null;
+  let bestDist = Infinity;
+  for (const b of g.balloons) {
+    if (x < b.x - TOUCH_PAD || x > b.x + l.size + TOUCH_PAD || y < b.y - TOUCH_PAD || y > b.y + l.totalHeight + TOUCH_PAD) continue;
+    const dist = (x - (b.x + l.size / 2)) ** 2 + (y - (b.y + l.size * 0.625)) ** 2;
+    const bomb = b.what.kind === 'bomb';
+    const bestBomb = best?.what.kind === 'bomb';
+    if ((bomb && !bestBomb) || (bomb === bestBomb && dist < bestDist)) {
+      best = b;
+      bestDist = dist;
+    }
+  }
+  if (!best) return;
+  const b = best;
+  g.balloons = g.balloons.filter((o) => o !== b);
+  popBalloon(g.world, v, l, b.root, b.what, b.x + l.size / 2, b.y + l.bodyHeight / 2);
+  if (b.what.kind === 'bomb') {
+    g.onBomb();
+    g.world.scoreboard.addLives(-1); // onLivesOut ends the run
+    return;
+  }
+  g.onPop();
+  if (b.what.kind === 'life') {
+    if (g.world.scoreboard.lives < MAX_LIVES) g.world.scoreboard.addLives(1);
+  } else {
+    g.world.scoreboard.add(POINTS_PER_BALLOON);
+  }
+}

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

@@ -0,0 +1,95 @@
+import { BALLOON_BOUNCE, BALLOON_GAP, BALLOON_HIT, type Layout } from './BalloonBlasterConstants';
+
+export interface BalloonBody {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+}
+
+export const balloonDistance = (l: Layout) => l.size * BALLOON_HIT + BALLOON_GAP;
+export const balloonBounds = (l: Layout) => {
+  const left = (balloonDistance(l) - l.size) / 2;
+  return { left, right: Math.max(left, l.width - l.size - left) };
+};
+
+/** Subtract every occupied interval instead of accepting an overlapping last random attempt. */
+export function findBalloonSpawn(balloons: readonly BalloonBody[], l: Layout, y: number, random = Math.random): number | null {
+  const { left, right } = balloonBounds(l);
+  const reach = balloonDistance(l) + 0.1;
+  let gaps: [number, number][] = [[left, right]];
+  for (const b of balloons) {
+    const dy = Math.abs(b.y - y);
+    if (dy >= reach) continue;
+    const dx = Math.sqrt(reach * reach - dy * dy);
+    const lo = b.x - dx;
+    const hi = b.x + dx;
+    const next: [number, number][] = [];
+    for (const [a, z] of gaps) {
+      if (hi <= a || lo >= z) next.push([a, z]);
+      else {
+        if (lo > a) next.push([a, lo]);
+        if (hi < z) next.push([hi, z]);
+      }
+    }
+    gaps = next;
+  }
+  const total = gaps.reduce((n, [a, z]) => n + Math.max(0, z - a), 0);
+  if (total < 0.001) return null;
+  let cursor = Math.max(0, Math.min(0.999999, random())) * total;
+  for (const [a, z] of gaps) {
+    if (cursor <= z - a) return a + cursor;
+    cursor -= z - a;
+  }
+  return null;
+}
+
+/** Keep constraints active at the walls during every pass, rather than undoing separation afterward. */
+export function separateBalloons(balloons: BalloonBody[], l: Layout) {
+  const { left, right } = balloonBounds(l);
+  const clamp = (x: number) => Math.max(left, Math.min(right, x));
+  const reach = balloonDistance(l);
+  for (const b of balloons) b.x = clamp(b.x);
+  for (let pass = 0; pass < 12; pass++) {
+    let overlap = 0;
+    for (let i = 0; i < balloons.length; i++)
+      for (let j = i + 1; j < balloons.length; j++) {
+        const a = balloons[i]!;
+        const b = balloons[j]!;
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        if (Math.abs(dx) >= reach || Math.abs(dy) >= reach) continue;
+        const distance = Math.hypot(dx, dy);
+        if (distance >= reach) continue;
+        overlap = Math.max(overlap, reach - distance);
+        const nx = distance > 0.001 ? dx / distance : 0;
+        const ny = distance > 0.001 ? dy / distance : 1;
+        const push = (reach - distance + 0.01) / 2;
+        a.x = clamp(a.x - nx * push);
+        b.x = clamp(b.x + nx * push);
+        a.y -= ny * push;
+        b.y += ny * push;
+        const closing = (b.vx - a.vx) * nx + (b.vy - a.vy) * ny;
+        if (closing < 0) {
+          const impulse = (closing * (1 + BALLOON_BOUNCE)) / 2;
+          a.vx += impulse * nx;
+          b.vx -= impulse * nx;
+          a.vy += impulse * ny;
+          b.vy -= impulse * ny;
+        }
+      }
+    if (overlap < 0.01) return;
+  }
+  // Dense wall clusters can resist pairwise pushes. Pack only residual contacts vertically,
+  // keeping their current order and guaranteeing that no pair is left interpenetrating.
+  const ordered = [...balloons].sort((a, b) => a.y - b.y);
+  for (let i = 1; i < ordered.length; i++) {
+    const b = ordered[i]!;
+    for (let j = 0; j < i; j++) {
+      const a = ordered[j]!;
+      const dx = b.x - a.x;
+      if (Math.abs(dx) >= reach) continue;
+      b.y = Math.max(b.y, a.y + Math.sqrt(reach * reach - dx * dx) + 0.01);
+    }
+  }
+}

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

@@ -0,0 +1,225 @@
+// Everything Balloon Blaster floats and pops, in front of its 3D meadow (EngineMeadow). Positions come in
+// screen points (y down) and land on the play plane ahead of the camera, where the original game drew them;
+// sizes are scaled to metres there. A balloon is an invisible root at the centre of its body (it turns
+// about it) carrying a glossy rubber body with its knot, a string that sways on its own, and for bombs
+// the warning emblem on the front (the life balloon is banded in every color). Every part is a shared mesh: mesh ids are app-wide and limited.
+import {
+  type Color,
+  effects,
+  type Entity,
+  extrude,
+  lathe,
+  merge,
+  type Model,
+  Path,
+  quat,
+  type TransformBatch,
+  tube,
+  type Vec3,
+  type World
+} from '@nayan-ui/engine';
+import { lighten } from '../../services/GamesConstants';
+import { at, facing, pointSize, type View3D } from '../shared/EngineMeadow';
+import { createGameMesh as createShape } from '../shared/EngineMeshes';
+import { toColor } from '../shared/EngineUtils';
+import { BALLOON_COLORS, type BalloonColor, FRAME_TIME, type Layout, POP_SWELL, POP_TIME, RAINBOW } from './BalloonBlasterConstants';
+
+const PER_SECOND = 1 / FRAME_TIME;
+
+export type BalloonKind = { kind: 'balloon'; color: BalloonColor } | { kind: 'bomb' } | { kind: 'life' };
+
+// ── Meshes (built once per app: mesh ids last for the whole app) ──────
+
+/** A balloon's outline, from the knot up and round the crown: one unit wide, 1.25 tall, centred. */
+const PROFILE: [number, number][] = [
+  [0.001, -0.6],
+  [0.07, -0.57],
+  [0.17, -0.5],
+  [0.3, -0.36],
+  [0.42, -0.17],
+  [0.49, 0.03],
+  [0.5, 0.18],
+  [0.47, 0.34],
+  [0.39, 0.48],
+  [0.26, 0.58],
+  [0.12, 0.622],
+  [0.001, 0.625]
+];
+const KNOT: [number, number][] = [
+  [0.001, -0.68],
+  [0.06, -0.66],
+  [0.045, -0.62],
+  [0.02, -0.59],
+  [0.001, -0.585]
+];
+
+type Meshes = { body: Model; rainbow: Model; string: Model; danger: Model };
+let meshes: Meshes | undefined;
+
+/** The balloon meshes. Needs the native core. */
+export function balloonMeshes(): Meshes {
+  meshes ??= {
+    // White rubber (tinted where it's spawned), glossy, with its tied knot
+    body: createShape(merge([{ geometry: lathe(PROFILE, { segments: 28 }) }, { geometry: lathe(KNOT, { segments: 10 }) }]), {
+      center: false,
+      shine: 0.75
+    }),
+    // The life balloon: bands of color from the knot to the crown
+    rainbow: createShape(
+      merge([
+        {
+          geometry: lathe(PROFILE, {
+            segments: 28,
+            color: ({ v }) => {
+              const c = toColor(RAINBOW[Math.min(RAINBOW.length - 1, Math.floor(v * RAINBOW.length))]!);
+              return [c[0], c[1], c[2]];
+            }
+          })
+        },
+        { geometry: lathe(KNOT, { segments: 10 }), color: toColor(RAINBOW[0]) }
+      ]),
+      { center: false, shine: 0.75 }
+    ),
+    // A light string, curling a little as it hangs from the knot
+    string: createShape(
+      tube(
+        [
+          [0, -0.66, 0],
+          [0.035, -0.8, 0.01],
+          [-0.03, -0.95, -0.01],
+          [0.02, -1.08, 0],
+          [0, -1.16, 0]
+        ],
+        { radius: 0.008, sides: 5, smoothness: 4, color: [0.92, 0.92, 0.9] }
+      ),
+      { center: false }
+    ),
+    // The bomb's warning: a red disc with a white exclamation mark, facing +z
+    danger: createShape(
+      merge([
+        { geometry: extrude(new Path().addCircle(0, 0, 0.5), { depth: 0.04, color: [0.95, 0.08, 0.08] }) },
+        { geometry: extrude(new Path().addRoundedRect(-0.07, -0.3, 0.14, 0.38, 0.06), { depth: 0.02, color: [1, 1, 1] }), position: [0, 0, 0.03] },
+        { geometry: extrude(new Path().addCircle(0, 0.24, 0.075), { depth: 0.02, color: [1, 1, 1] }), position: [0, 0, 0.03] }
+      ]),
+      { center: false, shine: 0.3 }
+    )
+  };
+  return meshes;
+}
+
+// ── Colors ────────────────────────────────────────────────────────────
+
+const colorOf = (c: BalloonColor): Color => toColor(c);
+const BOMB: Color = [0.07, 0.07, 0.08, 1];
+const sparkOf = (c: Color): Color => {
+  const [r, g, b] = c;
+  return [Math.min(1, r + 0.35), Math.min(1, g + 0.35), Math.min(1, b + 0.35)];
+};
+const BALLOON_SPARKS = new Map(BALLOON_COLORS.map((c) => [c, sparkOf(toColor(c))]));
+const LIFE_SPARKS: Color[] = [...RAINBOW, '#FFFFFF'].map((c) => toColor(c));
+const BOMB_BURST: Color[] = ['#1f2937', '#374151', '#f97316', '#fde047'].map((c) => toColor(c));
+const ORANGE = toColor(lighten('#f97316', 0.2));
+
+// ── Balloons ──────────────────────────────────────────────────────────
+
+/** Bombs float a touch nearer the camera, so they draw over balloons they overlap (as their zIndex did). */
+const depthOf = (v: View3D, b: BalloonKind) => v.playDepth - (b.kind === 'bomb' ? 0.08 : 0);
+
+/**
+ * A balloon whose body is centred on screen point (x, y), rocking gently within its collision bounds.
+ * Its string sways independently; bombs retain the same projected size as ordinary balloons.
+ */
+export function spawnBalloon(world: World, v: View3D, l: Layout, b: BalloonKind, x: number, y: number, spin: number): Entity {
+  const m = balloonMeshes();
+  const size = l.size * pointSize(v, depthOf(v, b));
+  const root = world.spawn({
+    mesh: 'none',
+    position: at(v, x, y, depthOf(v, b)),
+    rotation: facing(v, -0.1),
+    pickable: false
+  });
+  world.animate(
+    root,
+    { rotation: facing(v, 0.1) },
+    {
+      duration: 1.6 + Math.abs(spin) * 30,
+      easing: 'easeInOut',
+      repeat: 'forever',
+      yoyo: true
+    }
+  );
+  const part = (mesh: Model, color: Color, position: Vec3 = [0, 0, 0], scale: number | Vec3 = size) =>
+    world.spawn({ mesh, parent: root, position, scale, color, pickable: false });
+  // Ordinary balloons in their color, the bomb black, the life balloon in bands of every color
+  if (b.kind === 'life') part(m.rainbow, [1, 1, 1, 1]);
+  else part(m.body, b.kind === 'balloon' ? colorOf(b.color) : BOMB);
+  const string = world.spawn({
+    mesh: m.string,
+    parent: root,
+    scale: size,
+    color: [1, 1, 1, 1],
+    rotation: quat.z(-0.12),
+    pickable: false
+  });
+  world.animate(string, { rotation: quat.z(0.12) }, { duration: 1.1 + Math.random() * 0.6, easing: 'easeInOut', repeat: 'forever', yoyo: true });
+  // Emblems sit on the front of the body, about where its widest part bulges toward the camera
+  if (b.kind === 'bomb') part(m.danger, [1, 1, 1, 1], [0, size * 0.05, size * 0.47], size * 0.34);
+  return root;
+}
+
+export function placeBalloon(world: World, v: View3D, root: Entity, b: BalloonKind, x: number, y: number, updates?: TransformBatch) {
+  const position = at(v, x, y, depthOf(v, b));
+  if (updates) updates.position(root, position[0], position[1], position[2]);
+  else world.set(root, { position });
+}
+
+/**
+ * Pops a balloon at screen point (x, y): a quick swell and it's gone, in a burst of rubber bits in its
+ * color (the life balloon bursts in rainbow sparkles; a bomb explodes in smoke and fire with a flash).
+ */
+export function popBalloon(world: World, v: View3D, l: Layout, root: Entity, b: BalloonKind, x: number, y: number) {
+  const k = pointSize(v);
+  const size = l.size * k;
+  const near = at(v, x, y, depthOf(v, b) - size * 0.6);
+  world.stopAnimation(root);
+  world.set(root, { spin: [0, 0, 0] });
+  world.animate(root, [{ scale: POP_SWELL, at: 0.3 }, { scale: 0 }], { duration: POP_TIME, easing: 'linear' }).then(() => world.despawn(root));
+  const fall = 0.12 * PER_SECOND * PER_SECOND * k; // the bits fall like the original particles
+  if (b.kind === 'bomb') {
+    effects.explosion(world, {
+      position: near,
+      count: 16,
+      size: size * 0.7,
+      speed: size * 2.6,
+      lifetime: 0.6,
+      gravity: -fall * 0.5,
+      debris: BOMB_BURST,
+      smoke: [0.35, 0.35, 0.38, 0.7],
+      flash: false
+    });
+    const flash = world.spawn({
+      mesh: 'puff',
+      position: near,
+      scale: size * 1.2,
+      color: [ORANGE[0] * 2, ORANGE[1] * 2, ORANGE[2] * 2, 0.9],
+      pickable: false
+    });
+    world.animate(flash, { scale: size * 3.6, color: [2, 0.9, 0.2, 0] }, { duration: 0.35 }).then(() => world.despawn(flash));
+    return;
+  }
+  const colors = b.kind === 'life' ? LIFE_SPARKS : [colorOf(b.color), BALLOON_SPARKS.get(b.color)!];
+  if (b.kind === 'life')
+    effects.sparkle(world, { position: near, count: 18, size: size * 0.08, speed: size * 5.5, lifetime: 0.6, gravity: -fall * 0.5, colors });
+  else
+    effects.shatter(world, {
+      position: near,
+      count: 10,
+      mesh: 'cube',
+      size: size * 0.11,
+      speed: size * 5.5,
+      lifetime: 0.6,
+      gravity: -fall,
+      colors,
+      dust: false
+    });
+}