@johnmorrisdotca/kyogijo-stadiums 0.58.0 → 0.60.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.60.0] - 2026-11-03
+
+### Added
+
+- **The camera follows the play (KYOGIJO-STADIUMS-46)** ([following the play](./docs/replay.md#following-the-play)): a replay can be watched with a camera that closes in where the action is and pulls back as the players spread, or moves with the puck. Off by default; the replay's bar has **Action** and **Puck** (**Ball** for a ball game) toggles, the setting `follow` (`"action"`, `"puck"`, `"off"`), the controller's `setFollow` and `holdFollow`, and the element's `follow` attribute. Action frames the puck and the five players nearest it, padded, never closer than 2.5 times the surface; Puck centres the puck at twice; from a whistle or a goal to the next `faceoff` event with a place, it goes to that faceoff dot. It eases with a critically damped spring, holds still for small moves (a dead zone), never leaves the surface, always holds the puck, and at rest writes nothing. Flat, it writes the drawing's `viewBox`; in 3D it looks at a point of the floor with a zoom over the view's, so the auto-turn and every viewpoint go on while it follows; the reader's drag, zoom, arrows or a viewpoint hold it until **Resume**. Reduced motion steps. It moves inside the replay's own animation frame, asks for none of its own, and runs nothing while paused, hidden or out of sight. The pure parts are in `/replay`: `followShot`, `followCamera`, `followStop`, `followWindow`, `clampShot`, `frameOf`, `springStep`, `zoomFor`, `FOLLOW_LIMITS`. The demo keeps the choice in its address (`follow=action`, `follow=puck`) for the hero's game, the Try it surface, the game section and the arenas page. `docs/replay.ja.md` is new: the camera in Japanese.
+
+## [0.59.0] - 2026-11-03
+
+### Fixed
+
+- **The stands clear the whole floor, centred (KYOGIJO-STADIUMS-44)** ([the stands and the crowd](./docs/crowd.md#the-venues)): with `crowd`, the bowl's opening was laid out from the playing surface's box alone, so the floor drawn round it ran into the first rows: a court's run-off at the corners (volleyball, sepak takraw, netball), a table tennis area at its ends, a rink's boards, and an athletics track's sprint straight, jumps' runways and pits beyond the oval. The opening is now fitted to everything the surface draws round its playing area (its view with no margin, and an outline where the floor is not a rectangle: the track with its straight and runways, a rink's rounded boards), clear of it all round, corners included, by 2 feet; a floor bigger than the sport's distances (table tennis) gets an opening of its own shape. The bench side's extra room is shared by the two sides, so the opening is centred on the floor and the bowl in the drawing (a soccer ground's touchlines are 23.7 feet from the first row on both sides, where they were 19.7 and 27.7), and the margin holds the roof's shade. The tunnel, the camera platform and the media's desks stay in the seats, the media's desks no longer run round a small opening's corners, and the benches stand between the floor and the first row only where the gap holds them. An artistic swimming area with a crowd keeps the margin the stands need along its sides (it gave them four tenths of it). The flat drawing and the 3D view share the one layout (`crowdStands`), which now gives the `floor` it was fitted to. In 3D, a table tennis table's raised floor (the drawing lifted to the table's height, with the ground the stands stand on) was sorted by its middle with the stands and drawn over the far ones, so from Low corner or Broadcast the bowl looked cut open round a small tile: the bowl is now always drawn over a raised floor, and the faint near stands at a low viewpoint are the walls giving way to the eye, as before. New tests walk every sport with a crowd, at every size and orientation, light and dark: no part of the floor's outline within 2 feet of a seat, nothing of the stands on the floor, the opening centred on the floor and the bowl centred in the drawing and wholly inside it; and in 3D, at every viewpoint, zoom and box, the eye outside the whole scene, nothing near the eye's plane, and no plane of the bowl under the floor. Pictures of a court, a track, a rink, a ring and a table tennis area in their stands are in the docs.
+
 ## [0.58.0] - 2026-11-03
 
 ### Added

package/README.md

@@ -180,6 +180,8 @@ Real buildings drawn in the outline OpenStreetMap maps for them, each with a pla
 </tr>
 </table>
 
+A camera can follow the play, flat or in 3D: it closes in where the action is and pulls back as the players spread, or moves with the puck, while the view goes on turning ([following the play](./docs/replay.md#following-the-play)).
+
 The scoreboard hung over an arena's ice follows the replay: its score, period and game clock come from the same timeline and clock as the controls ([the scoreboard over the arena](./docs/replay.md#the-scoreboard-over-the-arena-follows-the-game)).
 
 **Surfaces** ([the surfaces](./docs/surfaces.md), [score and layout](./docs/score.md))

package/catalogue.json

@@ -3,7 +3,7 @@
  "generatedAt": "2026-11-03",
  "package": {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.58.0"
+  "version": "0.60.0"
  },
  "address": "https://johnmorrisdotca.github.io/kyogijo-stadiums/catalogue.json",
  "site": "https://johnmorrisdotca.github.io/kyogijo-stadiums/",

package/dist/athletics/plan.d.ts

@@ -42,6 +42,8 @@ export interface AthleticsPlan {
     box: MBox;
     /** Everything drawn: the box and what lies beyond it (the jump strip, the runways' ends, the straight). */
     extent: MBox;
+    /** What `extent` holds as points (the oval and what lies beyond it): what a crowd's stands clear. */
+    outline?: [number, number][];
     areas: Area[];
     shapes: Shape[];
     digits: Digits[];

package/dist/athletics/plan.js

@@ -224,13 +224,28 @@ export function athleticsPlan(o) {
     const box = { x0: -S / 2 - Rout, y0: -Rout, x1: S / 2 + Rout, y1: Rout };
     let extent = grow(box, 1);
     const edgeStraight = R + straight.lanes * straight.lane;
+    // What lies beyond the oval: the sprint straight, the jumps' strip, the javelin's runways.
+    const beyond = [];
     if (!indoor)
-        extent = union([extent, { x0: straight.x0, y0: -Rout, x1: straight.x1, y1: edgeStraight }]);
+        beyond.push({ x0: straight.x0, y0: -Rout, x1: straight.x1, y1: edgeStraight });
     if (events.includes("long-jump") || events.includes("triple-jump"))
-        extent = union([extent, jumpStrip()]);
-    if (events.includes("javelin-throw"))
-        extent = union([extent, ...inf.facilities.filter((f) => f.event === "javelin-throw").map((f) => f.box)].map((b) => ({ x0: Math.max(b.x0, -S / 2 - Rout - 6), y0: b.y0, x1: Math.min(b.x1, S / 2 + Rout + 6), y1: b.y1 })));
+        beyond.push(jumpStrip());
+    extent = union([extent, ...beyond]);
+    if (events.includes("javelin-throw")) {
+        const runways = inf.facilities.filter((f) => f.event === "javelin-throw").map((f) => f.box);
+        const cut = (b) => ({ x0: Math.max(b.x0, -S / 2 - Rout - 6), y0: b.y0, x1: Math.min(b.x1, S / 2 + Rout + 6), y1: b.y1 });
+        extent = union([extent, ...runways].map(cut));
+        beyond.push(...runways.map(cut));
+    }
     extent = grow(extent, 0);
+    const rim = Rout + 1;
+    const outline = [];
+    for (let i = 0; i <= 32; i += 1) {
+        const a = -Math.PI / 2 + (Math.PI * i) / 32;
+        outline.push([S / 2 + rim * Math.cos(a), rim * Math.sin(a)], [-S / 2 - rim * Math.cos(a), rim * Math.sin(a)]);
+    }
+    for (const b of beyond)
+        outline.push([b.x0, b.y0], [b.x1, b.y0], [b.x1, b.y1], [b.x0, b.y1]);
     const plan = {
         sport: "athletics",
         league: league.id,
@@ -243,6 +258,7 @@ export function athleticsPlan(o) {
         infield,
         box,
         extent,
+        outline,
         areas: parts.areas,
         shapes: parts.shapes,
         digits: parts.digits,

package/dist/catalogue.data.js

@@ -3,7 +3,7 @@ export const CATALOGUE_DATA = {
     "generatedAt": "2026-11-03",
     "package": {
         "name": "@johnmorrisdotca/kyogijo-stadiums",
-        "version": "0.58.0"
+        "version": "0.60.0"
     },
     "address": "https://johnmorrisdotca.github.io/kyogijo-stadiums/catalogue.json",
     "site": "https://johnmorrisdotca.github.io/kyogijo-stadiums/",

package/dist/crowd.d.ts

@@ -70,6 +70,14 @@ export interface CrowdStands {
     stadium?: "purpose" | "nfl" | "cfl";
     /** The playing surface, in the wide frame. */
     box: Box;
+    /**
+     * The floor round the playing surface, where the surface draws more than its box (a court's run-off, a track's sprint straight, runways and pits): its bounding box and its outline as points, in the wide frame.
+     * The first row of seats clears all of it by `FLOOR_CLEAR`, and the opening is centred on its box. Missing for a real venue's stands and a ballpark's, which are laid out from their own data.
+     */
+    floor?: {
+        box: Box;
+        points: Pt[];
+    };
     rings: StandRing[];
     /** Boxes where the stands are left out (the open end of a horseshoe, the ends of two sides). */
     covers: [x0: number, y0: number, x1: number, y1: number][];
@@ -310,10 +318,20 @@ export interface LayoutInput {
     };
     /** A real venue's stands in place of the sport's usual tiers (see `venueBowl`). */
     real?: RealBowl;
+    /**
+     * Everything the surface draws round its playing area, in the wide frame: the bounding box (the surface's own view with no margin) and, where the floor is not that rectangle (an athletics track, an oval
+     * ground), its outline as points. The opening of the stands is centred on it and clears it. Without it the floor is the box.
+     */
+    floor?: {
+        box: Box;
+        points?: readonly (readonly [number, number])[];
+    };
     /** The ballpark's fence as points on the field, for a ballpark (see `parkLayout`). */
     fence?: readonly Pt[];
     /** The foul lines' length at the poles and the backstop's distance, for a ballpark. */
     backstop?: number;
 }
+/** The room kept between the floor (everything the surface draws round its playing area) and the first row of seats, in feet. */
+export declare const FLOOR_CLEAR = 2;
 /** The layout of a sport's stands round its surface: rings, covers, sectors and gaps. For a ballpark see `parkLayout`. */
 export declare function layoutOf(input: LayoutInput): CrowdStands;

package/dist/crowd.js

@@ -330,6 +330,62 @@ function offsets(p, box, stadium) {
     const side = g.side + (f.width - box.h) / 2;
     return { left: end, right: end, top: side, bottom: side + g.bench };
 }
+/** The room kept between the floor (everything the surface draws round its playing area) and the first row of seats, in feet. */
+export const FLOOR_CLEAR = 2;
+/** A point inside a rounded rectangle or an ellipse of half sizes `hx`, `hy` about the origin, with `clear` to spare. */
+function insideOpening(ax, ay, hx, hy, r, oval, clear) {
+    const [w, h] = [hx - clear, hy - clear];
+    if (w <= 0 || h <= 0)
+        return false;
+    if (oval)
+        return sq(ax / w) + sq(ay / h) <= 1 + 1e-9;
+    const rr = Math.max(0, Math.min(r, hx, hy) - clear);
+    if (ax > w + 1e-9 || ay > h + 1e-9)
+        return false;
+    const kx = ax - (w - rr);
+    const ky = ay - (h - rr);
+    return kx <= 0 || ky <= 0 || sq(kx) + sq(ky) <= sq(rr) + 1e-9;
+}
+/** The first row's opening round a floor, centred on it (the bench room shared by both sides): the sport's distances, or the floor's own shape where they do not clear it, grown alike until its whole outline clears by `FLOOR_CLEAR`. */
+function openingOf(input) {
+    const { off, corner, oval, box } = input;
+    const floor = input.floor?.box ?? box;
+    const cx = floor.x + floor.w / 2;
+    const cy = floor.y + floor.h / 2;
+    let hx = Math.max(cx - box.x, box.x + box.w - cx) + (off.left + off.right) / 2;
+    let hy = Math.max(cy - box.y, box.y + box.h - cy) + (off.top + off.bottom) / 2;
+    // A floor the sport's distances do not clear (table tennis): the floor's own shape.
+    if (Math.min(hx - floor.w / 2, hy - floor.h / 2) < FLOOR_CLEAR) {
+        hx = floor.w / 2 + FLOOR_CLEAR;
+        hy = floor.h / 2 + FLOOR_CLEAR;
+    }
+    const given = input.floor?.points;
+    const points = given !== undefined && given.length > 0
+        ? given.map(([x, y]) => [x, y])
+        : oval
+            ? Array.from({ length: 64 }, (_, i) => [cx + (floor.w / 2) * Math.cos((i * Math.PI) / 32), cy + (floor.h / 2) * Math.sin((i * Math.PI) / 32)])
+            : [[floor.x, floor.y], [floor.x + floor.w, floor.y], [floor.x + floor.w, floor.y + floor.h], [floor.x, floor.y + floor.h]];
+    // A sampled curve: a little to spare.
+    const clear = FLOOR_CLEAR + (given !== undefined || oval ? 0.5 : 0);
+    const fits = (d) => points.every(([x, y]) => insideOpening(Math.abs(x - cx), Math.abs(y - cy), hx + d, hy + d, corner, oval, clear));
+    if (!fits(0)) {
+        let lo = 0;
+        let hi = 4;
+        while (!fits(hi) && hi < 4096)
+            hi *= 2;
+        for (let i = 0; i < 40; i += 1) {
+            const mid = (lo + hi) / 2;
+            if (fits(mid))
+                hi = mid;
+            else
+                lo = mid;
+        }
+        hx += hi;
+        hy += hi;
+    }
+    const round = (v) => Math.round(v * 1e6) / 1e6;
+    return { off: { left: round(box.x - (cx - hx)), right: round(cx + hx - box.x - box.w), top: round(box.y - (cy - hy)), bottom: round(cy + hy - box.y - box.h) }, cx, cy, floor, points };
+}
 /** The layout of a sport's stands round its surface: rings, covers, sectors and gaps. For a ballpark see `parkLayout`. */
 export function layoutOf(input) {
     const { sport, box } = input;
@@ -342,15 +398,16 @@ export function layoutOf(input) {
     const stadium = sport === "soccer" && input.real === undefined ? host ?? "purpose" : undefined;
     const p = stadium === "nfl" || stadium === "cfl" ? { ...PROFILES[stadium], shape: base.shape, away: base.away } : base;
     const shape = input.real !== undefined ? "bowl" : crowd.shape ?? p.shape;
-    const off = input.real?.off ?? offsets(base, box, stadium ?? "purpose");
-    const cx = box.x + box.w / 2;
-    const cy = box.y + box.h / 2;
+    const fit = input.real === undefined ? openingOf({ off: offsets(base, box, stadium ?? "purpose"), corner: p.corner, oval: base.oval === true, box, floor: input.floor }) : undefined;
+    const off = input.real?.off ?? fit?.off ?? offsets(base, box, stadium ?? "purpose");
+    const cx = fit?.cx ?? box.x + box.w / 2;
+    const cy = fit?.cy ?? box.y + box.h / 2;
     const rings = input.real === undefined ? [] : input.real.rings.map((ring) => ({ ...ring }));
     const reachOf = input.real === undefined ? { left: 0, right: 0, top: 0, bottom: 0 } : { ...input.real.reach };
     for (const t of input.real === undefined ? p.tiers : []) {
         const at = (k) => {
             if (base.oval === true)
-                return { kind: "ellipse", cx, cy, rx: box.w / 2 + (off.left + off.right) / 2 + k, ry: box.h / 2 + (off.top + off.bottom) / 2 + k };
+                return { kind: "ellipse", cx, cy, rx: (box.w + off.left + off.right) / 2 + k, ry: (box.h + off.top + off.bottom) / 2 + k };
             return { kind: "rrect", x0: box.x - off.left - k, y0: box.y - off.top - k, x1: box.x + box.w + off.right + k, y1: box.y + box.h + off.bottom + k, r: p.corner + k };
         };
         const region = at(t.to);
@@ -379,17 +436,18 @@ export function layoutOf(input) {
     const covers = [];
     const x0 = box.x - off.left;
     const x1 = box.x + box.w + off.right;
-    const yTop = last === undefined ? box.y : box.y - reachOf.top - 4;
-    const yBot = last === undefined ? box.y + box.h : box.y + box.h + reachOf.bottom + 4;
+    // The covers reach past the roof's shade (9 feet beyond the upper tier) too.
+    const yTop = last === undefined ? box.y : box.y - reachOf.top - 10;
+    const yBot = last === undefined ? box.y + box.h : box.y + box.h + reachOf.bottom + 10;
     if (shape === "horseshoe") {
         // The open end: everything beyond the surface's end line and the gap that is kept clear.
         if (crowd.open === "left")
-            covers.push([box.x - reachOf.left - 4, yTop, x0 + p.corner * 0.5, yBot]);
+            covers.push([box.x - reachOf.left - 10, yTop, x0 + p.corner * 0.5, yBot]);
         else
-            covers.push([x1 - p.corner * 0.5, yTop, box.x + box.w + reachOf.right + 4, yBot]);
+            covers.push([x1 - p.corner * 0.5, yTop, box.x + box.w + reachOf.right + 10, yBot]);
     }
     else if (shape === "sides") {
-        covers.push([box.x - reachOf.left - 4, yTop, x0 + p.corner * 0.5, yBot], [x1 - p.corner * 0.5, yTop, box.x + box.w + reachOf.right + 4, yBot]);
+        covers.push([box.x - reachOf.left - 10, yTop, x0 + p.corner * 0.5, yBot], [x1 - p.corner * 0.5, yTop, box.x + box.w + reachOf.right + 10, yBot]);
     }
     const concourses = [];
     rings.forEach((ring, i) => {
@@ -398,6 +456,8 @@ export function layoutOf(input) {
             concourses.push({ region: ring.hole, hole: before.region });
     });
     const stands = { sport, shape, box, rings, covers, concourses, sectors: [], gaps: [], reach: reachOf, seats: rings.reduce((n, r) => n + r.seats, 0) };
+    if (fit !== undefined)
+        stands.floor = { box: fit.floor, points: fit.points };
     if (input.real !== undefined)
         stands.real = input.real.shell;
     if (input.real?.closedSectors !== undefined)
@@ -490,21 +550,31 @@ export function layoutOf(input) {
             }
         }
         if (crowd.gaps && shape !== "grandstand") {
-            const bottom = box.y + box.h;
-            const mid = box.x + box.w / 2;
+            // Nothing on the floor: the benches stand between the floor and the first row.
+            const edge = box.y + box.h + off.bottom;
+            const floorEdge = Math.max(box.y + box.h, fit === undefined ? -Infinity : fit.floor.y + fit.floor.h);
+            const mid = cx;
             // A tunnel through the lower stands at the middle of the bench side, the camera platform above them, and the benches in the gap.
-            stands.gaps.push({ kind: "tunnel", box: [mid - 6, bottom + off.bottom - 1, mid + 6, bottom + off.bottom + lowerRing.to + 1] });
+            stands.gaps.push({ kind: "tunnel", box: [mid - 6, edge, mid + 6, edge + lowerRing.to + 1] });
             const media = rings[rings.length - 1];
             if (media !== undefined && media.tier === "upper")
-                stands.gaps.push({ kind: "camera", box: [mid - 22, bottom + off.bottom + media.from + 3, mid + 22, bottom + off.bottom + media.from + 13] });
-            if (off.bottom - off.top >= 4 || sport === "soccer" || sport === "nfl" || sport === "cfl" || sport === "ifaf" || sport === "rugby" || sport === "gaelic") {
+                stands.gaps.push({ kind: "camera", box: [mid - 22, edge + media.from + 3, mid + 22, edge + media.from + 13] });
+            if (base.bench >= 4 || sport === "soccer" || sport === "nfl" || sport === "cfl" || sport === "ifaf" || sport === "rugby" || sport === "gaelic") {
                 const benchLen = Math.min(34, box.w * 0.12);
-                for (const s of [-1, 1]) {
-                    const bx = mid + s * (box.w * 0.1 + benchLen / 2 + 4);
-                    stands.gaps.push({ kind: "bench", box: [bx - benchLen / 2, bottom + 2.5, bx + benchLen / 2, bottom + 2.5 + Math.min(5, off.bottom * 0.3)] });
+                const depth = Math.min(5, off.bottom * 0.3);
+                if (floorEdge + 2.5 + depth <= edge - 1) {
+                    for (const s of [-1, 1]) {
+                        const bx = box.x + box.w / 2 + s * (box.w * 0.1 + benchLen / 2 + 4);
+                        stands.gaps.push({ kind: "bench", box: [bx - benchLen / 2, floorEdge + 2.5, bx + benchLen / 2, floorEdge + 2.5 + depth] });
+                    }
                 }
             }
-            stands.gaps.push({ kind: "media", box: [mid - 55, bottom + off.bottom + 2, mid + 55, bottom + off.bottom + 6] });
+            // The media's desks: along the straight of that side only.
+            const hole = lowerRing.hole;
+            const straight = hole?.kind === "rrect" ? (hole.x1 - hole.x0) / 2 - Math.min(hole.r, (hole.x1 - hole.x0) / 2, (hole.y1 - hole.y0) / 2) : 55;
+            const half = Math.min(55, straight);
+            if (half >= 8)
+                stands.gaps.push({ kind: "media", box: [mid - half, edge + 2, mid + half, edge + 6] });
         }
     }
     return stands;

package/dist/draw.js

@@ -436,7 +436,7 @@ function realStadiumOf(o, sport, real) {
     return stadium !== undefined && stadium.configs[config] !== undefined && (stadiumKind(stadium) === "park") === (config === "mlb") ? { stadium, config } : undefined;
 }
 /** The stands round a surface, laid out from its box (or, for a ballpark, from its fence). */
-function standsFor(o, surface, crowd) {
+function standsFor(o, surface, crowd, floor) {
     const { sport } = chooseLeague(o);
     const awaySide = resolveHomeSide({ ...o, sport }) === "left" ? "right" : "left";
     if (sport === "mlb") {
@@ -469,7 +469,19 @@ function standsFor(o, surface, crowd) {
     // A dojo's crowd sits in its gallery, from the room's balcony data (in feet here); the arenas (the Budokan, the Kokugikan) keep their bowls.
     const hall = sport === "dojo" ? dojoGallery(o) : undefined;
     const gallery = hall === undefined ? undefined : { offset: hall.offset / 0.3048, depth: hall.depth / 0.3048, height: [hall.height[0] / 0.3048, hall.height[1] / 0.3048], rows: hall.rows, aisles: hall.aisles };
-    return crowdLayout({ sport, box, crowd, awaySide, ground: o.ground, arena: o.budo?.hall === "budokan", ...(gallery === undefined ? {} : { gallery }) });
+    return crowdLayout({ sport, box, crowd, awaySide, ground: o.ground, arena: o.budo?.hall === "budokan", ...(gallery === undefined ? {} : { gallery }), ...(floor === undefined ? {} : { floor }) });
+}
+/** A surface's floor with no margin (its view, and its outline where it has one); none for a close-up. */
+function floorOf(probe) {
+    if (probe.whole !== undefined)
+        return undefined;
+    const view = wideView(probe);
+    if (probe.floor === undefined)
+        return { box: view };
+    const xs = [view.x, view.x + view.w, ...probe.floor.map((p) => p[0])];
+    const ys = [view.y, view.y + view.h, ...probe.floor.map((p) => p[1])];
+    const [x0, y0] = [Math.min(...xs), Math.min(...ys)];
+    return { box: { x: x0, y: y0, w: Math.max(...xs) - x0, h: Math.max(...ys) - y0 }, points: probe.floor };
 }
 /** True when the drawing is asked to be small: `detail: "simple"` or a `width` under 480 pixels. */
 const smallDrawing = (o) => {
@@ -493,17 +505,20 @@ function venueFrame(o, crowd, surface) {
 /** A surface with the stands and the crowd round it: the ground is made as wide as the stands need, then the stands are laid on it under the surface. */
 function buildCrowded(o, portrait, id, score, scored, extra, crowd) {
     let margin = extra.margin;
+    // The floor the stands' opening clears and is centred on.
+    const probe = buildWhole({ ...o, margin: 0 }, portrait, id, score, scored, { ...extra, margin: undefined });
+    const floor = floorOf(probe);
     if (!(typeof o.margin === "number" && Number.isFinite(o.margin) && o.margin >= 0)) {
         // How much ground the stands need beyond what the surface has with none, then the surface is made again with it.
-        const probe = buildWhole({ ...o, margin: 0 }, portrait, id, score, scored, { ...extra, margin: undefined });
-        const stands = standsFor(o, probe, crowd);
+        const stands = standsFor(o, probe, crowd, floor);
         const view = wideView(probe);
         const have = { left: stands.box.x - view.x, right: view.x + view.w - stands.box.x - stands.box.w, top: stands.box.y - view.y, bottom: view.y + view.h - stands.box.y - stands.box.h };
         const need = Math.max(stands.reach.left - have.left, stands.reach.right - have.right, stands.reach.top - have.top, stands.reach.bottom - have.bottom);
-        margin = Math.max(margin ?? 0, need + 6);
+        // (and the roof's shade, 9 feet beyond the upper tier)
+        margin = Math.max(margin ?? 0, need + (crowd.roof ? 10 : 6));
     }
     const surface = buildWhole(o, portrait, id, score, scored, { ...extra, margin });
-    const stands = standsFor(o, surface, crowd);
+    const stands = standsFor(o, surface, crowd, floor);
     const seats = stands.seats;
     const ground = heldGround(o.ground)?.capacity;
     const fine = crowd.detail === "fine" || (crowd.detail === "auto" && !smallDrawing(o));
@@ -1220,5 +1235,5 @@ export function crowdStands(o) {
     if (crowd === undefined)
         return undefined;
     const probe = buildWhole({ ...o, margin: 0 }, false, drawingId(o), false, false, { features: undefined });
-    return standsFor(o, probe, crowd);
+    return standsFor(o, probe, crowd, floorOf(probe));
 }

package/dist/element.d.ts

@@ -7,12 +7,12 @@ import type { ScoreOptions, SurfaceOptions } from "./types.ts";
 /** The tag of the element. */
 export declare const KYOGIJO_TAG = "kyogijo-field";
 /** The attributes the element reads. */
-export declare const KYOGIJO_ATTRIBUTES: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed", "turn-direction"];
+export declare const KYOGIJO_ATTRIBUTES: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "follow", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed", "turn-direction"];
 /** The settings of a 3D view an element's attributes make: `turn-view` names the viewpoint it opens on, `turn-controls="false"` and `turn-uprights="false"` leave the buttons and what stands on the surface out, `turn-score="floor"` leaves the score panel on the floor, `turn-touch="turn"` keeps every touch for the view, `turn-venue="false"` leaves out the stands and the room (they are raised for a drawing with a crowd and for a dojo), `turn-roof` puts a roof or canopy over the stands, `turn-autoplay` starts the auto-turn (`force` even for a reader who prefers reduced motion) and `turn-speed` is its degrees a second. */
 export declare function turnSettingsFromAttributes(read: (name: string) => string | null, base?: TurnSettings): TurnSettings;
 /** Whether an element's `turn` attribute asks for the 3D view: present, and not `false`. */
 export declare const turnWanted: (read: (name: string) => string | null) => boolean;
-/** The settings of a replay an element's attributes make: `loop`, `autoplay` and `controls="false"` are switches, `speed` and `trail` numbers. */
+/** The settings of a replay an element's attributes make: `loop`, `autoplay` and `controls="false"` are switches, `speed` and `trail` numbers, `follow` what the camera follows (`action`, `puck` or `off`). */
 export declare function replaySettingsFromAttributes(read: (name: string) => string | null, base?: ReplaySettings): ReplaySettings;
 /** The options an element's attributes (and its `options` attribute and property) make. */
 export declare function optionsFromAttributes(read: (name: string) => string | null, base?: Partial<ScoreOptions>): SurfaceOptions | ScoreOptions;
@@ -25,7 +25,7 @@ export declare function optionsFromAttributes(read: (name: string) => string | n
 declare const Base: typeof HTMLElement;
 export declare class KyogijoField extends Base {
     #private;
-    static observedAttributes: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed", "turn-direction"];
+    static observedAttributes: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "follow", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed", "turn-direction"];
     /** The options given as a property: an object, laid under the attributes. */
     get options(): Partial<ScoreOptions> | undefined;
     set options(value: Partial<ScoreOptions> | undefined);

package/dist/element.js

@@ -26,11 +26,11 @@ export const KYOGIJO_ATTRIBUTES = [
     "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks",
     "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color",
     "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options",
-    "loop", "speed", "autoplay", "controls", "trail",
+    "loop", "speed", "autoplay", "controls", "trail", "follow",
     "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed", "turn-direction",
 ];
 /** The attributes that are about a replay and not about the drawing. */
-const REPLAY_ATTRIBUTES = ["loop", "speed", "autoplay", "controls", "trail"];
+const REPLAY_ATTRIBUTES = ["loop", "speed", "autoplay", "controls", "trail", "follow"];
 /** The settings of a 3D view an element's attributes make: `turn-view` names the viewpoint it opens on, `turn-controls="false"` and `turn-uprights="false"` leave the buttons and what stands on the surface out, `turn-score="floor"` leaves the score panel on the floor, `turn-touch="turn"` keeps every touch for the view, `turn-venue="false"` leaves out the stands and the room (they are raised for a drawing with a crowd and for a dojo), `turn-roof` puts a roof or canopy over the stands, `turn-autoplay` starts the auto-turn (`force` even for a reader who prefers reduced motion) and `turn-speed` is its degrees a second. */
 export function turnSettingsFromAttributes(read, base = {}) {
     const out = { ...base };
@@ -66,7 +66,7 @@ export function turnSettingsFromAttributes(read, base = {}) {
 }
 /** Whether an element's `turn` attribute asks for the 3D view: present, and not `false`. */
 export const turnWanted = (read) => read("turn") !== null && read("turn") !== "false";
-/** The settings of a replay an element's attributes make: `loop`, `autoplay` and `controls="false"` are switches, `speed` and `trail` numbers. */
+/** The settings of a replay an element's attributes make: `loop`, `autoplay` and `controls="false"` are switches, `speed` and `trail` numbers, `follow` what the camera follows (`action`, `puck` or `off`). */
 export function replaySettingsFromAttributes(read, base = {}) {
     const out = { ...base };
     const on = (name) => (read(name) === null ? undefined : read(name) !== "false");
@@ -89,6 +89,9 @@ export function replaySettingsFromAttributes(read, base = {}) {
     const trail = number("trail");
     if (trail !== undefined)
         out.trail = trail;
+    const follow = read("follow");
+    if (follow !== null)
+        out.follow = follow === "action" || follow === "puck" ? follow : "off";
     return out;
 }
 /** `3-2`, `3–2` or `3:2` as home and away. */
@@ -350,7 +353,9 @@ export class KyogijoField extends Base {
                 __classPrivateFieldGet(this, _KyogijoField_turn, "f").preset(view);
             return;
         }
-        if (REPLAY_ATTRIBUTES.includes(name) && __classPrivateFieldGet(this, _KyogijoField_replay, "f") !== undefined)
+        if (name === "follow" && __classPrivateFieldGet(this, _KyogijoField_replay, "f") !== undefined)
+            __classPrivateFieldGet(this, _KyogijoField_replay, "f").setFollow(replaySettingsFromAttributes((key) => this.getAttribute(key)).follow ?? "off");
+        else if (REPLAY_ATTRIBUTES.includes(name) && __classPrivateFieldGet(this, _KyogijoField_replay, "f") !== undefined)
             __classPrivateFieldGet(this, _KyogijoField_instances, "m", _KyogijoField_attach).call(this, name !== "speed" && name !== "loop");
         else
             __classPrivateFieldGet(this, _KyogijoField_instances, "m", _KyogijoField_draw).call(this);
@@ -371,7 +376,7 @@ _KyogijoField_mount = new WeakMap(), _KyogijoField_host = new WeakMap(), _Kyogij
     const from = __classPrivateFieldGet(this, _KyogijoField_replay, "f") === undefined || __classPrivateFieldGet(this, _KyogijoField_replayOf, "f") !== __classPrivateFieldGet(this, _KyogijoField_timeline, "f") ? undefined : __classPrivateFieldGet(this, _KyogijoField_replay, "f").state();
     __classPrivateFieldGet(this, _KyogijoField_replay, "f")?.destroy();
     __classPrivateFieldSet(this, _KyogijoField_replayOf, __classPrivateFieldGet(this, _KyogijoField_timeline, "f"), "f");
-    __classPrivateFieldSet(this, _KyogijoField_replay, on.replay(__classPrivateFieldGet(this, _KyogijoField_timeline, "f"), from === undefined ? settings : { ...settings, start: from.t - from.start }), "f");
+    __classPrivateFieldSet(this, _KyogijoField_replay, on.replay(__classPrivateFieldGet(this, _KyogijoField_timeline, "f"), from === undefined ? settings : { ...settings, start: from.t - from.start, follow: from.follow }), "f");
 }, _KyogijoField_draw = function _KyogijoField_draw() {
     if (__classPrivateFieldGet(this, _KyogijoField_host, "f") === undefined || !this.isConnected)
         return;

package/dist/replay-entry.d.ts

@@ -8,5 +8,7 @@ export { alongPool, distanceAt, progressOf, raceTimeline } from "./pool.replay.t
 export type { Progress, RaceReplayOptions } from "./pool.replay.ts";
 export { formatTime, parseTime } from "./pool.race.ts";
 export { REPLAY_SPEEDS, REPLAY_SPEED_RANGE, createReplay } from "./replay.control.ts";
+export { FOLLOW_LIMITS, FOLLOW_MODES, clampShot, followCamera, followMode, followShot, followStop, followWindow, frameOf, springStep, zoomFor } from "./replay.follow.ts";
+export type { FollowBox, FollowCamera, FollowInput, FollowLimits, FollowMode, FollowShot } from "./replay.follow.ts";
 export type { ReplayController } from "./replay.control.ts";
 export type { ActiveEvent, Possession, ReplayChange, ReplayEvent, ReplayEventKind, ReplayFrame, ReplayLook, ReplayObject, ReplayPeriod, ReplayReason, ReplaySettings, ReplayState, ReplayTeam, ReplayTimeline, ReplayTrail, } from "./replay.types.ts";

package/dist/replay-entry.js

@@ -8,3 +8,4 @@ export { boardClock, replayBoard, replayPeriods } from "./replay.board.js";
 export { alongPool, distanceAt, progressOf, raceTimeline } from "./pool.replay.js";
 export { formatTime, parseTime } from "./pool.race.js";
 export { REPLAY_SPEEDS, REPLAY_SPEED_RANGE, createReplay } from "./replay.control.js";
+export { FOLLOW_LIMITS, FOLLOW_MODES, clampShot, followCamera, followMode, followShot, followStop, followWindow, frameOf, springStep, zoomFor } from "./replay.follow.js";

package/dist/replay.control.d.ts

@@ -22,6 +22,10 @@ export interface ReplayController {
     setLoop(loop: boolean): void;
     /** `step` for a reader who prefers reduced motion: playing stops, and play steps. */
     setMotion(motion: "smooth" | "step"): void;
+    /** What the camera follows (`off`, `action`, `puck`); a change lets go of a hold. */
+    setFollow(mode: "off" | "action" | "puck"): void;
+    /** Hold the camera where it is (the reader turned or zoomed the view), or let it follow again (`false`). */
+    holdFollow(held: boolean): void;
     /** Tell the clock that seconds went by: while playing, the time moves by that many seconds times the speed. */
     advance(seconds: number): void;
     /** Be told of every change. Returns a function that stops it. */

package/dist/replay.control.js

@@ -39,6 +39,8 @@ export function createReplay(timeline, settings = {}) {
         speed: isNum(settings.speed) ? clamp(settings.speed, REPLAY_SPEED_RANGE[0], REPLAY_SPEED_RANGE[1]) : 1,
         loop: settings.loop === true,
         motion: settings.motion === "step" ? "step" : "smooth",
+        follow: settings.follow === "action" || settings.follow === "puck" ? settings.follow : "off",
+        followHeld: false,
     };
     const listeners = new Set();
     const tell = (reason, crossed = []) => {
@@ -148,6 +150,20 @@ export function createReplay(timeline, settings = {}) {
             state.playing = false;
             tell("motion");
         },
+        setFollow(mode) {
+            const next = mode === "action" || mode === "puck" ? mode : "off";
+            if (next === state.follow && !state.followHeld)
+                return;
+            state.follow = next;
+            state.followHeld = false;
+            tell("follow");
+        },
+        holdFollow(held) {
+            if (state.followHeld === held || (held && state.follow === "off"))
+                return;
+            state.followHeld = held;
+            tell("follow");
+        },
         advance(seconds) {
             if (!state.playing || state.motion === "step" || !isNum(seconds) || seconds <= 0)
                 return;

package/dist/replay.dom.js

@@ -4,6 +4,7 @@
 import { num } from "./format.js";
 import { renderLayers } from "./layers.js";
 import { REPLAY_SPEEDS, createReplay } from "./replay.control.js";
+import { FOLLOW_STYLE, flatFollow, followControls } from "./replay.follow.dom.js";
 import { describeEvent, drawFrame, replayClock, replayGroups, replaySpoken, replayInfo, replayPlacer, replaySnapshot } from "./replay.js";
 import { KYOGIJO_STRINGS, fill } from "./strings.core.js";
 const SVG_NS = "http://www.w3.org/2000/svg";
@@ -175,7 +176,7 @@ export function replayDriver(doc, timeline, settings, source) {
     let language = source.language;
     const words = () => KYOGIJO_STRINGS[language].replay;
     const style = doc.createElement("style");
-    style.textContent = REPLAY_STYLE;
+    style.textContent = REPLAY_STYLE + FOLLOW_STYLE;
     const hint = doc.createElement("p");
     hint.className = "ky-hint";
     hint.id = `${id}-keys`;
@@ -236,7 +237,8 @@ export function replayDriver(doc, timeline, settings, source) {
         play.hidden = stepMode;
         speed.hidden = stepMode;
         loop.hidden = stepMode;
-        bar.append(back, play, forward, speed, loop, range, clock);
+        const follow = followControls(doc, w, controller, timeline);
+        bar.append(back, play, forward, speed, loop, range, clock, ...follow.parts);
         hint.textContent = source.help === "turn" ? (stepMode ? w.keysTurnStep : w.keysTurn) : stepMode ? w.keysStep : w.keys;
         if (source.labelled !== undefined) {
             source.labelled.setAttribute("aria-label", w.region);
@@ -267,6 +269,7 @@ export function replayDriver(doc, timeline, settings, source) {
             loop.setAttribute("aria-pressed", String(s.loop));
             source.holder.dataset.state = s.ended ? "ended" : s.playing ? "playing" : "paused";
             source.holder.dataset.motion = s.motion;
+            follow.sync(s);
         };
         sync(undefined);
     };
@@ -432,13 +435,27 @@ export function createReplayView(host, timeline, settings, initial) {
     function drawStage(t) {
         stage.innerHTML = drawFrame(options, timeline, t, settings);
         svg = stage.querySelector("svg.kyogijo");
+        // (A drawing written again is shown at the camera's shot.)
+        camera.again();
     }
-    const driver = replayDriver(doc, timeline, settings, { paint: (t) => painter.paint(t), language, keysOn: root, holder: root, labelled: stage });
+    const camera = flatFollow({ svg: () => svg, options: () => options, timeline, look: settings, now: () => performance.now() });
+    const driver = replayDriver(doc, timeline, settings, {
+        paint: (t, change) => {
+            painter.paint(t);
+            if (change !== undefined)
+                camera.paint(change);
+        },
+        language,
+        keysOn: root,
+        holder: root,
+        labelled: stage,
+    });
     const { style, hint, bar, live } = driver.parts;
     root.append(style, stage, hint, bar, live);
     host.replaceChildren(root);
     drawStage(driver.controller.state().t);
     painter.bind(driver.controller.state().t);
+    camera.paint({ state: driver.controller.state(), reason: "follow", crossed: [] });
     if (settings.autoplay === true && driver.controller.state().motion === "smooth" && doc.visibilityState !== "hidden")
         driver.controller.play();
     return {