@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/block-breaker/BlockBreaker.tsx

@@ -0,0 +1,79 @@
+// Block Breaker's screen, on the Nayan engine: the board, bricks, paddle, balls and power-ups are one
+// 3D scene (an orthographic camera over glossy blocks), under Playtura's scoreboard, controls and
+// modals. The rules and physics are in BlockBreakerGame.ts, what it draws in BlockBreakerScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again build a new wall in place and a theme
+// change repaints it, so the GPU view is never rebuilt. The wall's build-in, breaks, paddle squash and
+// power-up glow animate in the engine's Rust core; JS steps the balls and steps the world once a frame.
+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 { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, LIGHT, LIVES, TIME_LIMIT } from './BlockBreakerConstants';
+import { createGame, dispose, dragMove, dragStart, reset, setLayout, setTheme, start, tick } from './BlockBreakerGame';
+
+const SOUNDS = GAME_SOUNDS.BLOCK_BREAKER;
+
+export const BlockBreaker = engineGame(GAME_IDS.BLOCK_BREAKER, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [lives, setLives] = useLiveState(LIVES);
+  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
+
+  // Win on a cleared wall, lose on no lives or time up
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.BLOCK_BREAKER,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset);
+      setLayout(g, l);
+      return l.boardWidth;
+    },
+    // Drag anywhere to slide the paddle by the same distance
+    drag: (g, { phase, dx }) => {
+      if (phase === 'start') dragStart(g);
+      else if (phase === 'move') dragMove(g, dx);
+    },
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.SUCCESS),
+    onStop: (fx) => fx(null, HapticType.MEDIUM),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onLives = setLives;
+      g.onTime = setTimeLeft;
+      g.onWall = () => fx(SOUNDS.WALL, HapticType.LIGHT);
+      g.onPaddle = () => fx(SOUNDS.PADDLE, HapticType.LIGHT);
+      g.onBrickHit = () => fx(SOUNDS.HIT, HapticType.LIGHT);
+      g.onBrickBreak = () => fx(SOUNDS.DESTROY, HapticType.MEDIUM);
+      g.onCombo = () => fx(SOUNDS.COMBO, HapticType.MEDIUM);
+      g.onPowerUp = () => fx(SOUNDS.POWER_UP, HapticType.SUCCESS);
+      g.onLaunch = () => fx(SOUNDS.LAUNCH, HapticType.LIGHT);
+      g.onLoseLife = () => fx(SOUNDS.LOSE_LIFE, HapticType.ERROR);
+      g.onWin = () => fx(SOUNDS.WIN, HapticType.SUCCESS);
+      g.onLose = () => fx(SOUNDS.GAME_OVER, HapticType.ERROR);
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), livesColumn(lives, LIVES), timerColumn(timeLeft, theme)]}
+      subtext="Break all bricks!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU WON!' : 'GAME OVER',
+        message: status === 'win' ? 'All bricks destroyed!' : 'Great breaking!',
+        scoreLabel: 'Final Score',
+        score,
+        buttonText: 'Break Again!'
+      })}
+    />
+  );
+});

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

@@ -0,0 +1,139 @@
+// Block Breaker's rules, physics, timings, colors and layout. Rules, scoring, physics and layout match
+// the original version (games/block-breaker), so scores and feel carry over.
+import { isTablet } from '../../services/UtilsService';
+import { getSceneInputInsets } from '../shared/EngineHud';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const BRICK_COLS = 8;
+export const BRICK_ROWS = 5;
+export const LIVES = 3;
+export const TIME_LIMIT = 300; // seconds
+export const POINTS_PER_BRICK = 200;
+export const POINTS_PER_COMBO = 150; // added per brick in the current combo (bricks since the paddle)
+export const COMBO_CALLOUT = 3; // a combo this long or more cheers
+
+export enum PowerUpType {
+  WIDE_PADDLE = 'wide_paddle',
+  MULTI_BALL = 'multi_ball',
+  EXTRA_LIFE = 'extra_life'
+}
+export const POWER_UP_TYPES = [PowerUpType.WIDE_PADDLE, PowerUpType.MULTI_BALL, PowerUpType.EXTRA_LIFE] as const;
+export const POWER_UP_CHANCE = 0.15;
+export const MAX_BALLS = 5;
+export const WIDE_FACTOR = 1.3; // each wide paddle widens by this...
+export const WIDE_MAX = 1.5; // ...up to this much of the normal width
+export const WIDE_TIME = 10; // seconds, then the paddle goes back to normal
+
+// ── Physics (points per 60 fps frame, as the original version) ───────────
+
+export const FRAME_TIME = 1 / 60;
+export const MAX_FRAMES = 2; // a long frame moves at most this many frames' worth
+export const BALL_SPEED = isTablet ? 5 : 4;
+export const BALL_RADIUS = isTablet ? 8 : 7;
+export const LAUNCH_SPREAD = Math.PI / 3; // a new ball leaves within ±30° of straight up
+export const PADDLE_BOUNCE = Math.PI / 3; // the paddle's edge sends the ball out at 60°
+export const POWER_UP_SPEED = 2;
+export const POWER_UP_SIZE = isTablet ? 18 : 14;
+export const RELAUNCH_DELAY = 0.5; // seconds after a lost ball
+
+// ── Feel (seconds) ────────────────────────────────────────────────────
+
+export const PADDLE_WIDTH_TIME = 0.22;
+export const BUMP_TIME = 0.06; // the paddle squashes when something lands on it...
+export const BUMP_SPRING = { damping: 8, stiffness: 320 }; // ...and springs back
+export const BALL_SPAWN_SPRING = { damping: 10, stiffness: 300 };
+export const BRICK_DROP = 18; // a new wall's bricks drop this far into place...
+export const BRICK_INTRO_SPRING = { damping: 11, stiffness: 190 }; // ...with a little bounce,
+export const BRICK_ROW_STAGGER = 0.07; // row by row
+export const BRICK_COL_STAGGER = 0.018;
+export const PULSE_TIME = 0.52; // a power-up's glow breathes
+// Ball trail: three fading dots behind it, at multiples of its velocity
+export const TRAIL = [
+  { k: 1.6, r: 0.8, o: 0.32 },
+  { k: 3.2, r: 0.62, o: 0.18 },
+  { k: 4.8, r: 0.45, o: 0.08 }
+] as const;
+
+// ── Look ──────────────────────────────────────────────────────────────
+
+export const LIGHT = frontLight([-0.3, 0.7, 1], 0.5);
+
+export const BRICK_COLORS = ['#FF3B3B', '#FFD700', '#32CD32', '#4DA6FF', '#BF5AF2', '#FF9500'] as const;
+export const POWER_UP_COLORS: Record<PowerUpType, string> = {
+  [PowerUpType.WIDE_PADDLE]: '#00FF88',
+  [PowerUpType.MULTI_BALL]: '#FF6B9D',
+  [PowerUpType.EXTRA_LIFE]: '#FFD700'
+};
+export const PADDLE_COLOR = '#ffffff';
+export const BALL_COLOR = '#e0e0e0';
+export const TRAIL_COLOR = '#ffffff';
+export const CLASSIC_BOARD = 'rgba(255, 255, 255, 0.25)';
+export const CLASSIC_BORDER = 'rgba(255, 255, 255, 0.5)';
+export const CLASSIC_RADIUS = 16;
+export const THEMED_RADIUS = 8;
+
+// ── Layout (points; same arithmetic as the original version) ──────────────
+
+const BRICK_PADDING = 3;
+const GRID_TOP = 5;
+
+export type Layout = {
+  /** The GameView's size. */
+  width: number;
+  height: number;
+  /** The board: as wide as the game area, a fixed height, centred below the header. */
+  boardLeft: number;
+  boardTop: number;
+  boardWidth: number;
+  boardHeight: number;
+  // Everything below is in board points, from its top-left.
+  brickWidth: number;
+  brickHeight: number;
+  /** The first brick's left edge and the top row's top. */
+  bricksLeft: number;
+  bricksTop: number;
+  /** One brick to the next. */
+  brickStepX: number;
+  brickStepY: number;
+  paddleWidth: number;
+  paddleHeight: number;
+  paddleTop: number;
+  /** Where the ball's centre stays between (side walls), and where a ball counts as lost. */
+  minX: number;
+  maxX: number;
+  lostY: number;
+};
+
+export function getLayout(width: number, height: number, offset: number): Layout {
+  const boardWidth = gameWidthFor(width);
+  const insets = getSceneInputInsets(offset);
+  const top = insets.top + 4;
+  const room = Math.max(1, height - top - insets.bottom - 10);
+  const boardHeight = Math.min(isTablet ? 650 : 500, room);
+  const brickWidth = Math.floor((boardWidth - BRICK_PADDING * (BRICK_COLS + 1)) / BRICK_COLS);
+  const brickHeight = isTablet ? 22 : 18;
+  const paddleHeight = isTablet ? 14 : 12;
+  const paddleY = boardHeight - (isTablet ? 30 : 20);
+  return {
+    width,
+    height,
+    boardLeft: (width - boardWidth) / 2,
+    boardTop: top + (room - boardHeight) / 2,
+    boardWidth,
+    boardHeight,
+    brickWidth,
+    brickHeight,
+    bricksLeft: (boardWidth - (BRICK_COLS * brickWidth + (BRICK_COLS - 1) * BRICK_PADDING)) / 2,
+    bricksTop: GRID_TOP,
+    brickStepX: brickWidth + BRICK_PADDING,
+    brickStepY: brickHeight + BRICK_PADDING,
+    paddleWidth: isTablet ? 100 : 80,
+    paddleHeight,
+    paddleTop: paddleY - paddleHeight / 2,
+    minX: BALL_RADIUS,
+    maxX: boardWidth - BALL_RADIUS,
+    lostY: boardHeight - BALL_RADIUS
+  };
+}

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

@@ -0,0 +1,459 @@
+// Block Breaker's rules and physics, with no React: build a run with `createGame`, give it a layout,
+// `start` it and `tick` it every frame. Drag to slide the paddle and keep the ball in play; every brick
+// it breaks scores 200, plus 150 for each brick already broken since it last touched the paddle.
+// Broken bricks sometimes drop a power-up: a wider paddle for 10s, two extra balls, or an extra life.
+// Break every brick to win; lose all three lives, or run out of time, and it's over. The physics is the
+// original version's: moves are per 60 fps frame, scaled by the frame's length.
+import { type Camera, type Entity, World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { introPlayed } from '../shared/EngineUtils';
+import {
+  BALL_RADIUS,
+  BALL_SPEED,
+  BRICK_COL_STAGGER,
+  BRICK_COLS,
+  BRICK_ROW_STAGGER,
+  BRICK_ROWS,
+  COMBO_CALLOUT,
+  FRAME_TIME,
+  LAUNCH_SPREAD,
+  type Layout,
+  LIVES,
+  MAX_BALLS,
+  MAX_FRAMES,
+  PADDLE_BOUNCE,
+  POINTS_PER_BRICK,
+  POINTS_PER_COMBO,
+  POWER_UP_CHANCE,
+  POWER_UP_SPEED,
+  POWER_UP_TYPES,
+  PowerUpType,
+  RELAUNCH_DELAY,
+  TIME_LIMIT,
+  WIDE_FACTOR,
+  WIDE_MAX,
+  WIDE_TIME
+} from './BlockBreakerConstants';
+import {
+  type BallView,
+  breakBrick,
+  buildScenery,
+  bumpPaddle,
+  colorBall,
+  hitBrick,
+  type Paddle,
+  pieceColors,
+  placeBall,
+  placePaddle,
+  placePowerUp,
+  removeBall,
+  removeScenery,
+  type Scenery,
+  setPaddleWidth,
+  setSceneryTheme,
+  spawnBall,
+  spawnBrick,
+  spawnPaddle,
+  spawnPowerUp
+} from './BlockBreakerScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+
+type Brick = { row: number; col: number; hits: number; entity: Entity | null };
+type Ball = { x: number; y: number; vx: number; vy: number; view: BallView | null };
+type PowerUp = { type: PowerUpType; x: number; y: number; entity: Entity | null };
+
+const WORLD_CAPACITY = 500; // 40 bricks, 5 balls x 4, power-ups, paddle, scenery, bursts
+
+const newBricks = (): Brick[] =>
+  Array.from({ length: BRICK_ROWS * BRICK_COLS }, (_, i) => ({ row: Math.floor(i / BRICK_COLS), col: i % BRICK_COLS, hits: 1, entity: null }));
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, 0, 400], target: [0, 0, 0], fov: 1, ortho: 1 };
+  const g = {
+    world,
+    camera,
+    theme,
+    colors: pieceColors(theme),
+    layout: null as Layout | null,
+    scenery: null as Scenery | null,
+    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;
+    },
+    get timeLeft() {
+      return world.scoreboard.shownSeconds;
+    },
+    won: false,
+    /** Game clock, seconds: drives the delayed steps (they pause with the frame loop). */
+    time: 0,
+    bricks: newBricks(),
+    balls: [] as Ball[],
+    powerUps: [] as PowerUp[],
+    /** Bricks broken since the ball last touched the paddle. */
+    combo: 0,
+    paddle: null as Paddle | null,
+    /** Paddle centre (board points), the width it collides with, and where a drag started. */
+    paddleX: 0,
+    paddleWidth: 0,
+    dragFrom: 0,
+    /** The next wall to appear builds in. */
+    intro: true,
+    /** Game seconds the current intro has been playing (-1 until its board spawns). */
+    introAge: -1,
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number) => {},
+    onLives: (_n: number) => {},
+    onTime: (_t: number) => {},
+    onWall: () => {},
+    onPaddle: () => {},
+    onBrickHit: () => {},
+    onBrickBreak: () => {},
+    onCombo: () => {},
+    onPowerUp: () => {},
+    onLaunch: () => {},
+    onLoseLife: () => {},
+    onWin: () => {},
+    onLose: () => {}
+  };
+  world.scoreboard.reset(LIVES, TIME_LIMIT);
+  world.scoreboard.handlers = {
+    onSecond: (t) => g.onTime(t),
+    onTimeUp: () => 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);
+const brickX = (l: Layout, b: Brick) => l.bricksLeft + b.col * l.brickStepX;
+const brickY = (l: Layout, b: Brick) => l.bricksTop + b.row * l.brickStepY;
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Lays the scene out for the view (first layout, header height, rotation): rebuilt from the run's state. */
+export function setLayout(g: Game, l: Layout) {
+  const w = g.world;
+  const old = g.layout;
+  if (g.scenery) removeScenery(w, g.scenery);
+  if (g.paddle) w.despawn(g.paddle.root);
+  clearPieces(g);
+  for (const b of g.bricks) if (b.entity != null) w.despawn(b.entity);
+  g.layout = l;
+  g.camera.ortho = l.height / 2;
+  g.scenery = buildScenery(w, l, g.theme);
+  // Keep the paddle where it was across the board (its width only changes with a power-up)
+  g.paddleX = old ? (g.paddleX / old.boardWidth) * l.boardWidth : l.boardWidth / 2;
+  if (!old || g.paddleWidth === 0) g.paddleWidth = l.paddleWidth;
+  g.paddle = spawnPaddle(w, l, g.paddleX, g.paddleWidth, g.colors.paddle);
+  spawnBricks(g);
+  // Mid-run, the cleared ball comes back on the paddle, as after a lost life (without costing one)
+  if (old && g.phase === 'playing') after(g, RELAUNCH_DELAY, () => relaunch(g));
+}
+
+/** A new theme: the background and board are repainted and the ball and paddle recolored. */
+export function setTheme(g: Game, theme: GameTheme) {
+  g.theme = theme;
+  g.colors = pieceColors(theme);
+  if (!g.layout || !g.scenery || g.world.isDisposed) return;
+  setSceneryTheme(g.world, g.layout, g.scenery, theme);
+  if (g.paddle) g.world.set(g.paddle.body, { color: g.colors.paddle });
+  for (const b of g.balls) if (b.view) colorBall(g.world, b.view, g.colors);
+}
+
+/** Spawns the standing bricks; a new wall builds in row by row. */
+function spawnBricks(g: Game) {
+  const l = g.layout;
+  if (!l) return;
+  const intro = g.intro;
+  if (intro) g.introAge = 0;
+  for (const b of g.bricks) {
+    if (b.hits <= 0) continue;
+    b.entity = spawnBrick(g.world, l, brickX(l, b), brickY(l, b), b.row, intro ? b.row * BRICK_ROW_STAGGER + b.col * BRICK_COL_STAGGER : null);
+  }
+}
+
+/** Removes every ball and power-up (Stop, Play Again, a new layout). */
+function clearPieces(g: Game) {
+  for (const b of g.balls) if (b.view) removeBall(g.world, b.view);
+  for (const p of g.powerUps) if (p.entity != null) g.world.despawn(p.entity);
+  g.balls = [];
+  g.powerUps = [];
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+/** A ball leaving the paddle within ±30° of straight up. */
+function launch(g: Game, x: number) {
+  const l = g.layout;
+  if (!l) return;
+  const angle = (Math.random() - 0.5) * LAUNCH_SPREAD;
+  const y = l.paddleTop - BALL_RADIUS - 2;
+  g.balls.push({ x, y, vx: Math.sin(angle) * BALL_SPEED, vy: -Math.abs(Math.cos(angle) * BALL_SPEED), view: spawnBall(g.world, l, x, y, g.colors) });
+  g.combo = 0;
+  g.onLaunch();
+}
+
+/** After a lost ball: the next one appears on the paddle wherever it is now. */
+function relaunch(g: Game) {
+  if (g.phase === 'playing' && !g.balls.length) launch(g, g.paddleX);
+}
+
+export function start(g: Game) {
+  const l = g.layout;
+  if (g.phase !== 'ready' || !l) return;
+  if (!g.bricks.some((b) => b.hits > 0)) newWall(g);
+  // The paddle goes back to the centre first, so the ball launches from there
+  g.paddleX = l.boardWidth / 2;
+  g.paddleWidth = l.paddleWidth;
+  if (g.paddle) {
+    placePaddle(g.world, l, g.paddle, g.paddleX);
+    setPaddleWidth(g.world, l, g.paddle, g.paddleWidth, false);
+  }
+  g.phase = 'playing';
+  g.world.scoreboard.startCountdown(TIME_LIMIT);
+  g.onPhase('playing');
+  launch(g, g.paddleX);
+}
+
+function newWall(g: Game) {
+  for (const b of g.bricks) if (b.entity != null) g.world.despawn(b.entity);
+  g.bricks = newBricks();
+  g.intro = true;
+  spawnBricks(g);
+}
+
+/** A new wall, lives and timer (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
+export function reset(g: Game) {
+  g.world.cancelTimers(); // a pending relaunch or wide-paddle expiry can't reach the next game
+  clearPieces(g);
+  newWall(g);
+  const l = g.layout;
+  if (l && g.paddle) {
+    g.paddleX = l.boardWidth / 2;
+    g.paddleWidth = l.paddleWidth;
+    placePaddle(g.world, l, g.paddle, g.paddleX);
+    setPaddleWidth(g.world, l, g.paddle, g.paddleWidth, false);
+  }
+  g.combo = 0;
+  g.world.scoreboard.reset(LIVES, TIME_LIMIT);
+  g.won = false;
+  g.phase = 'ready';
+  g.onScore(0);
+  g.onLives(LIVES);
+  g.onTime(TIME_LIMIT);
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.cancelTimers();
+  g.world.dispose();
+}
+
+/** The run ends: balls and power-ups freeze where they are, under the game-over card. */
+function end(g: Game, won: boolean) {
+  g.world.scoreboard.stop();
+  g.world.cancelTimers();
+  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;
+  introPlayed(g, dt);
+  g.time += dt;
+  // While waiting for a relaunch nothing moves, power-ups included, as before
+  if (g.phase === 'playing' && g.balls.length) step(g, Math.min(dt / FRAME_TIME, MAX_FRAMES));
+  g.world.update(dt);
+}
+
+// ── Touch ─────────────────────────────────────────────────────────────
+
+export function dragStart(g: Game) {
+  g.dragFrom = g.paddleX;
+}
+
+/** Slides the paddle by the drag's distance, kept inside the board. */
+export function dragMove(g: Game, dx: number) {
+  const l = g.layout;
+  if (!l || !g.paddle || g.phase !== 'playing') return;
+  const half = g.paddleWidth / 2;
+  g.paddleX = Math.max(half, Math.min(l.boardWidth - half, g.dragFrom + dx));
+  placePaddle(g.world, l, g.paddle, g.paddleX);
+}
+
+// ── Physics ───────────────────────────────────────────────────────────
+
+/** One step of `dt` 60 fps frames: balls, bricks, power-ups, in the original version's order and maths. */
+function step(g: Game, dt: number) {
+  const l = g.layout!;
+  const w = g.world;
+  const half = g.paddleWidth / 2;
+  const px = g.paddleX;
+  let wallHits = 0;
+  let paddleHits = 0;
+  let combos = 0;
+  let broke = false;
+  let hit = false;
+  let points = 0;
+  let lost = false;
+
+  const kept = g.balls;
+  let ballCount = 0;
+  for (const ball of g.balls) {
+    let x = ball.x + ball.vx * dt;
+    let y = ball.y + ball.vy * dt;
+    let { vx, vy } = ball;
+
+    // Side and top walls
+    let wall = false;
+    if (x <= l.minX) {
+      x = l.minX;
+      vx = Math.abs(vx);
+      wall = true;
+    } else if (x >= l.maxX) {
+      x = l.maxX;
+      vx = -Math.abs(vx);
+      wall = true;
+    }
+    if (y - BALL_RADIUS <= 0) {
+      y = BALL_RADIUS;
+      vy = Math.abs(vy);
+      wall = true;
+    }
+    if (wall) wallHits++;
+
+    // Past the paddle: lost
+    if (y + BALL_RADIUS > l.lostY) {
+      lost = true;
+      if (ball.view) removeBall(w, ball.view);
+      continue;
+    }
+
+    // The paddle sends it back out at an angle set by where it landed
+    if (
+      vy > 0 &&
+      y + BALL_RADIUS >= l.paddleTop &&
+      y + BALL_RADIUS <= l.paddleTop + l.paddleHeight + 5 &&
+      x >= px - half - BALL_RADIUS &&
+      x <= px + half + BALL_RADIUS
+    ) {
+      const angle = ((x - px) / half) * PADDLE_BOUNCE;
+      const speed = Math.hypot(vx, vy);
+      vx = Math.sin(angle) * speed;
+      vy = -Math.abs(Math.cos(angle) * speed);
+      y = l.paddleTop - BALL_RADIUS - 1;
+      paddleHits++;
+      if (g.paddle) bumpPaddle(w, g.paddle, 1);
+      g.combo = 0;
+    }
+
+    // At most one brick a frame per ball; it bounces off the side it overlaps least
+    for (const brick of g.bricks) {
+      if (brick.hits <= 0) continue;
+      const bx = brickX(l, brick);
+      const by = brickY(l, brick);
+      if (x + BALL_RADIUS <= bx || x - BALL_RADIUS >= bx + l.brickWidth || y + BALL_RADIUS <= by || y - BALL_RADIUS >= by + l.brickHeight) continue;
+      const overlapX = Math.min(x + BALL_RADIUS - bx, bx + l.brickWidth - (x - BALL_RADIUS));
+      const overlapY = Math.min(y + BALL_RADIUS - by, by + l.brickHeight - (y - BALL_RADIUS));
+      if (overlapX < overlapY) vx = -vx;
+      else vy = -vy;
+
+      brick.hits -= 1;
+      if (brick.hits <= 0) {
+        if (brick.entity != null) breakBrick(w, l, brick.entity, bx, by, brick.row);
+        brick.entity = null;
+        broke = true;
+        g.combo++;
+        if (g.combo >= COMBO_CALLOUT) combos++;
+        if (Math.random() < POWER_UP_CHANCE) {
+          const type = POWER_UP_TYPES[Math.floor(Math.random() * POWER_UP_TYPES.length)]!;
+          const cx = bx + l.brickWidth / 2;
+          const cy = by + l.brickHeight / 2;
+          g.powerUps.push({ type, x: cx, y: cy, entity: spawnPowerUp(w, l, type, cx, cy) });
+        }
+      } else {
+        if (brick.entity != null) hitBrick(w, brick.entity);
+        hit = true;
+      }
+      points += POINTS_PER_BRICK + g.combo * POINTS_PER_COMBO;
+      break;
+    }
+
+    ball.x = x;
+    ball.y = y;
+    ball.vx = vx;
+    ball.vy = vy;
+    if (ball.view) placeBall(w, l, ball.view, x, y, vx, vy);
+    kept[ballCount++] = ball;
+  }
+  kept.length = ballCount;
+
+  // Power-ups fall and are caught by this frame's paddle
+  const collected: PowerUpType[] = [];
+  g.powerUps = g.powerUps.filter((p) => {
+    p.y += POWER_UP_SPEED * dt;
+    const caught = p.y >= l.paddleTop && p.y <= l.paddleTop + l.paddleHeight + 10 && p.x >= px - half - 10 && p.x <= px + half + 10;
+    if (caught) collected.push(p.type);
+    if (caught || p.y > l.boardHeight) {
+      if (p.entity != null) w.despawn(p.entity);
+      return false;
+    }
+    if (p.entity != null) placePowerUp(w, l, p.entity, p.x, p.y);
+    return true;
+  });
+  for (const type of collected) collect(g, type);
+
+  // Sounds and score, in the order the original version raised them
+  for (let i = 0; i < wallHits; i++) g.onWall();
+  for (let i = 0; i < paddleHits; i++) g.onPaddle();
+  for (let i = 0; i < combos; i++) g.onCombo();
+  if (points > 0) {
+    g.onScore(g.world.scoreboard.add(points));
+  }
+  if (broke) g.onBrickBreak();
+  else if (hit) g.onBrickHit();
+  for (let i = 0; i < collected.length; i++) g.onPowerUp();
+
+  if (lost && !g.balls.length) {
+    g.onLives(g.world.scoreboard.addLives(-1));
+    g.onLoseLife();
+    if (g.lives <= 0) {
+      end(g, false);
+      return;
+    }
+    after(g, RELAUNCH_DELAY, () => relaunch(g));
+  }
+  if (!g.bricks.some((b) => b.hits > 0)) end(g, true);
+}
+
+function collect(g: Game, type: PowerUpType) {
+  const l = g.layout!;
+  if (type === PowerUpType.WIDE_PADDLE) {
+    g.paddleWidth = Math.min(l.paddleWidth * WIDE_MAX, g.paddleWidth * WIDE_FACTOR);
+    if (g.paddle) setPaddleWidth(g.world, l, g.paddle, g.paddleWidth, true);
+    after(g, WIDE_TIME, () => {
+      g.paddleWidth = l.paddleWidth;
+      if (g.paddle && g.layout === l) setPaddleWidth(g.world, l, g.paddle, g.paddleWidth, true);
+    });
+  } else if (type === PowerUpType.MULTI_BALL) {
+    const base = g.balls[0];
+    if (base && g.balls.length < MAX_BALLS) {
+      const speed = Math.hypot(base.vx, base.vy) * 0.7;
+      for (const vx of [-speed, speed]) g.balls.push({ x: base.x, y: base.y, vx, vy: -speed, view: spawnBall(g.world, l, base.x, base.y, g.colors) });
+    }
+  } else {
+    g.world.scoreboard.setLives(Math.min(g.lives + 1, LIVES));
+    g.onLives(g.lives);
+  }
+  if (g.paddle) bumpPaddle(g.world, g.paddle, 1.4);
+}