@nayan-ui/games 1.20.0 → 1.21.0

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

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

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

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