@johnmorrisdotca/kyogijo-stadiums 0.51.0 → 0.53.0

package/CHANGELOG.md

@@ -7,6 +7,26 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.53.0] - 2026-11-03
+
+- **The arena's scoreboard shows the game being played (KYOGIJO-STADIUMS-35)** ([the scoreboard over the arena](./docs/replay.md#the-scoreboard-over-the-arena-follows-the-game)): while a replay plays on a 3D view whose venue has its LED boards on, the scoreboard hung over centre ice shows the replay's score, period and game clock instead of the fixed score of its options. `replayBoard(timeline, t)` (pure, from `replay`) works the board out from the timeline's goals and its new optional `periods` (`start`, `end`, `number`, `length`) and `clock` (`down` or `up`). The board is written when it changes: at once for a goal, a period, a seek, a step or a pause; the clock at most once a second while playing; nothing runs while paused, hidden or out of sight. Without a replay, or after `destroy`, the board is as before, and `view.replay(timeline, { board: false })` leaves it so. The demo's hero passes the example game's periods (a period is twenty minutes on the board's clock). About 4 kB more source for the 3D replay (its budget in `replay.budget.test.js` is 24 kB now).
+
+- Tests and docs, no change to the package: `e2e/centre.demo.mjs` holds that a drag cannot take the 3D view's stadium out of sight (it has no pan, so no Centre button) and that Reset and Home bring it back, and `docs/turn.md` says so.
+- The README opens with the package's thumbnail, and the demo carries it as its link preview (og:image) and publishes the card, a dark card and an icon on Pages at `thumbnail.png`, `thumbnail-dark.png` and `icon.png`.
+- Docs only (MODULES-247): twelve guides in `docs/guides/` (getting started, a score on a surface, looks and colours, embedding, frameworks, real venues, data on a surface, the 3D view, accessibility and languages, architecture, troubleshooting, upgrading), each with a Japanese twin in `docs/guides/ja/`, in the docs site's contents as its first group (`GUIDES` in `scripts/docs-nav.mjs`; the twins are pages of their own, `guides-ja-<name>.html`); `pnpm docs:site` (the docs site is built by `pnpm site`) and `pnpm docs:check` (`scripts/docs-check.mjs`: the guides, the README, the changelog, the tests of the pages and every example against the built package), run by a `docs` job of the CI; the README has a Guides section and more examples (Angular, a CDN module, a frame, a server, layers and zones, Japanese, GeoJSON and PNG, TypeScript and a bundler); `demo/builder.html`, the way into the stage's Embed section, with `e2e/builder.demo.mjs`. The examples of the guides are run by `pnpm test:readme` and `src/docs.examples.test.js`.
+
+## [0.52.0] - 2026-11-03
+
+### Added
+
+- **A replay plays on the 3D view (KYOGIJO-STADIUMS-23)** ([the replay in 3D](./docs/replay.md#in-3d)): `view.replay(timeline, settings?)` on the handle of `mountKyogijoTurn` gives the same controller as `mount.replay`, and the rink can be turned, tipped and zoomed while the game plays. The players and officials stand up as discs that face the eye (the flat replay's circles, squares, triangles and numbers, turned up), and the ball or the puck, its trail, the passes, the shots and the goals stay on the floor. `stand: false` keeps the players flat. On the view, Space plays and pauses, comma and full stop step, and the arrow keys still turn it; on the replay's controls the arrows step. Nothing runs while it is paused, hidden or out of sight, the auto-turn and the replay share one animation frame, only what moves is written, and destroy leaves nothing; browser tests hold each of these. `replayTurnModel` is the pure model of a frame, and `<kyogijo-field turn>` with a `timeline` plays it on its 3D view.
+- **An example game (KYOGIJO-STADIUMS-25)** ([example games](./docs/example-games.md)): `examples/games/canada-japan.json`, a whole made-up game of Canada and Japan, three periods, shaped from a public NHL play-by-play with every team, player, place, time and the result changed. It is in the repository and on the demo's site, not in the npm package.
+- The demo: a section, "A game on the ice, in 3D", plays the example game in 3D or flat, with a button for each period, the score on the board as it goes, and the code with a Copy button; the arena at the top of the page has **Play a game**, which loads the game when it is first pressed and plays it on the arena's ice in front of its crowd.
+
+### Changed
+
+- The flat replay's page side is a painter and a driver that the 3D replay shares (`replay.dom.ts`); the flat replay behaves as before.
+
 ## [0.51.0] - 2026-11-03
 
 ### Added

package/README.md

@@ -1,3 +1,5 @@
+<p align="center"><a href="https://johnmorrisdotca.github.io/kyogijo-stadiums/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/thumbnail-dark.png"><img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/thumbnail.png" alt="Kyogijo Stadiums: a ballpark, an NHL rink and an NBA court, each drawn to scale as SVG." width="1200"></picture></a></p>
+
 <h1 align="center">Kyogijo Stadiums <sub>競技場</sub></h1>
 
 <p align="center"><strong>Sports surfaces as SVG, drawn to scale, with the score on them.</strong><br>
@@ -36,7 +38,7 @@ Kyogijo Stadiums draws the places a game is played on, with the score of the gam
 
 ## The showcase
 
-Real buildings drawn in the outline OpenStreetMap maps for them, each with a plausible bowl of the seats, tiers and roof its sources give. In the first three rows the picture in the middle turns, slowly, and the others stand still; the last row is still.
+Real buildings drawn in the outline OpenStreetMap maps for them, each with a plausible bowl of the seats, tiers and roof its sources give. In the rows of arenas, of halls and of districts the picture in the middle turns, slowly, and the others stand still; the other rows are still.
 
 **Arenas and stadiums** ([real arenas](./docs/venues.md), [real stadiums](./docs/stadiums.md))
 
@@ -143,6 +145,36 @@ Real buildings drawn in the outline OpenStreetMap maps for them, each with a pla
 </tr>
 </table>
 
+**A game on the ice** ([the replay in 3D](./docs/replay.md#in-3d), [the example game](./docs/example-games.md))
+
+<table align="center">
+<tr>
+<td align="center" valign="top">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/replay-game-3d-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/replay-game-3d-desk-light.webp" alt="A made-up game of Canada and Japan replayed on the rink in 3D from the main camera: the players standing up as discs with their numbers, red circles and blue squares, the score hung over centre ice, and a shot's arrow and a whistle's cross on the ice." width="250">
+</picture>
+<br><em>A made-up game, replayed in 3D</em>
+</td>
+<td align="center" valign="top">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/hero-game-3d-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/hero-game-3d-desk-light.webp" alt="The same game on the ice of a real arena, in front of its crowd: the players standing as discs on the rink inside two tiers of seats, and the scoreboard hung over centre ice showing the score, the period and the game clock." width="250">
+</picture>
+<br><em>The same game in an arena, in front of the crowd</em>
+</td>
+<td align="center" valign="top">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/replay-game-flat-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/replay-game-flat-desk-light.webp" alt="The same moment of the game flat: each side's flag and name at the end it defends, the score panel at centre ice, the players as circles and squares with their numbers, a goal's star at the net." width="250">
+</picture>
+<br><em>The same moment, flat</em>
+</td>
+</tr>
+</table>
+
+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))
 
 <table align="center">
@@ -217,7 +249,7 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
 - **A 3D view** of any surface or venue that turns by mouse, touch or keys, with the roof and the walls to switch and a quality level for every device. [The 3D view](./docs/turn.md), [quality](./docs/quality.md).
 - **Circuits**: a famous race track as OpenStreetMap maps it, the Las Vegas Strip Circuit first, with its turns numbered and its pit building standing in 3D. [Circuits](./docs/circuits.md).
 - **Tournaments**: several surfaces on one floor, who judges where, boards laid over a surface. [Layouts](./docs/multi.md), [judging](./docs/judging.md), [boards](./docs/boards.md).
-- **Data on a surface**: points, heat maps, shot and pass charts, team shapes and a replay, in 48 providers' coordinate frames. [Layers](./docs/layers.md), [frames](./docs/frames.md), [replay](./docs/replay.md).
+- **Data on a surface**: points, heat maps, shot and pass charts, team shapes and a replay, flat or in 3D with the players standing on the ice, in 48 providers' coordinate frames. [Layers](./docs/layers.md), [frames](./docs/frames.md), [replay](./docs/replay.md), [an example game](./docs/example-games.md).
 - **Looks and flags**: eight named looks, a flag or crest on each half, trophies and crests from Dougu Sports, flags from Hata, light and dark. [Theming](./docs/theming.md), [the pageant](./docs/pageant.md).
 - **Four ways in**: a function that returns SVG text, a helper that draws into a container, a custom element, a frame for pages with no script; renderers for a canvas, d3, Observable Plot, GeoJSON and PNG. [Entry points](./docs/entry-points.md), [renderers](./docs/renderers.md).
 - **Accessible and small**: each drawing is an `img` with a title and a description, in English or Japanese; no dependencies, no network requests, nothing stored.
@@ -239,6 +271,25 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
 
 The full list of entry points is in [entry points](./docs/entry-points.md); every export is in the [API reference](https://johnmorrisdotca.github.io/kyogijo-stadiums/api.html).
 
+## Guides
+
+Twelve guides, each with a Japanese twin in [`docs/guides/ja/`](./docs/guides/ja/), written for someone using the package: every example is run against the built package by `pnpm test:readme`, and the guides are held with the rest of the documentation by `pnpm docs:check`.
+
+| Guide | What it is for |
+| --- | --- |
+| [Getting started: a results page](./docs/guides/getting-started.md) | A strip for every game in a list, one large drawing, and the same drawing tall for a phone. |
+| [A score on a surface](./docs/guides/score-and-layout.md) | The teams, the state of the game, which side the home team is on, the three sizes. |
+| [Looks, colours and dark mode](./docs/guides/looks-and-colours.md) | Eight named looks, colours from code, a court of your own, many drawings on one page. |
+| [Embedding](./docs/guides/embed-in-a-page.md) | A container that follows its box, the custom element, a frame for a page with no script. |
+| [React, Vue, Svelte and Angular](./docs/guides/frameworks.md) | The string or the element in each, and a server with no framework. |
+| [Ballparks, grounds, arenas and real venues](./docs/guides/real-venues.md) | From a park's fence to a district of buildings on one plan, and the catalogue of what exists. |
+| [Data on a surface](./docs/guides/data-on-a-surface.md) | Layers, coordinate frames, zones by the rules, a click as a place, charts. |
+| [The 3D view](./docs/guides/the-3d-view.md) | The floor that turns, what stands on it, stands and roof, quality on a phone. |
+| [Accessibility, English and Japanese](./docs/guides/accessibility-and-languages.md) | What a drawing says for itself, and what the page around it must say. |
+| [Architecture](./docs/guides/architecture.md) | The rules a drawing is made by, and the checks that keep them true. |
+| [Troubleshooting](./docs/guides/troubleshooting.md) | Nothing appears, a colour is wrong, a snapshot fails after an upgrade. |
+| [Upgrading](./docs/guides/upgrading.md) | What each breaking release asks of you, and how to make the next upgrade cheap. |
+
 ## Use it in your project
 
 ### Install
@@ -407,9 +458,124 @@ Tell Vue the tag is a custom element with `compilerOptions.isCustomElement: (tag
 <kyogijo-field sport="nhl" away="USA" home="Canada" away-score={away} home-score={home} />
 ```
 
-A page that moves (`mountKyogijo`), a file written on a server and a frame for a page with no script are in [getting started](./docs/getting-started.md).
+A page that moves (`mountKyogijo`), a file written on a server and a frame for a page with no script are in [getting started](./docs/getting-started.md), and every framework below has its own [guide](./docs/guides/frameworks.md).
+
+### In Angular
+
+```ts no-check
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import "@johnmorrisdotca/kyogijo-stadiums/element/define";
+
+@Component({
+  selector: "app-game",
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<kyogijo-field sport="nhl" orientation="auto" away="USA" home="Canada" [attr.away-score]="away" [attr.home-score]="home"></kyogijo-field>`,
+})
+export class GameComponent {
+  away = 3;
+  home = 2;
+}
+```
+
+### From a CDN, as a module
+
+```html
+<div id="game"></div>
+<script type="module">
+  import { drawKyogijo } from "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/kyogijo-stadiums@0/+esm";
+  document.querySelector("#game").innerHTML = drawKyogijo({ sport: "nba", away: { name: "Australia", score: 108 }, home: { name: "Japan", score: 112 }, status: "final" });
+</script>
+```
+
+### With a bundler and TypeScript
+
+```ts
+import { SPORTS, drawKyogijo, type ScoreOptions, type Sport } from "@johnmorrisdotca/kyogijo-stadiums";
+
+// The options are typed, so an editor lists the sports, the statuses and every option with its doc comment; a sport is one of SPORTS.
+const sport: Sport = "nhl";
+const game: ScoreOptions = { sport, home: { name: "Japan", score: 7 }, away: { name: "Canada", score: 5 }, status: "final" };
+console.log(SPORTS.includes(sport), drawKyogijo(game).includes("Canada 5, Japan 7"));
+// true true
+```
+
+A bundler (Vite, webpack, esbuild or Rollup) needs nothing set: each entry is its own file, so `import ... from "@johnmorrisdotca/kyogijo-stadiums/parks"` brings in the parks and nothing else.
+
+```ts no-check
+// vite.config.ts: nothing is needed for the package. Tell Vue the tag is a custom element, if you use it.
+import vue from "@vitejs/plugin-vue";
+
+export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: (tag: string) => tag === "kyogijo-field" } } })] };
+```
+
+### In a frame, with no script of your own
+
+```html
+<iframe
+  src="https://johnmorrisdotca.github.io/kyogijo-stadiums/embed.html?sport=nhl&away=USA&home=Canada&ascore=3&hscore=2&status=final-ot"
+  title="USA 3, Canada 2, Final/OT"
+  loading="lazy"
+  style="width:100%;aspect-ratio:2.3;border:0"
+></iframe>
+```
+
+### On a server
+
+```js no-run
+import { createServer } from "node:http";
+import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
+
+// An image address: the same options give the same bytes, so a CDN can keep it.
+createServer((request, response) => {
+  const sport = new URL(request.url ?? "/", "http://localhost").searchParams.get("sport") === "nba" ? "nba" : "nhl";
+  response.writeHead(200, { "content-type": "image/svg+xml", "cache-control": "public, max-age=3600" });
+  response.end(drawKyogijo({ sport, away: { name: "USA", score: 3 }, home: { name: "Canada", score: 2 }, status: "final" }));
+}).listen(6900);
+```
+
+### Shots on the rink, in the provider's numbers
+
+```ts
+import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
+import { zoneAt } from "@johnmorrisdotca/kyogijo-stadiums/zones";
+
+// The NHL API's numbers are feet from centre ice: `from` puts them on the rink, and `zoneAt` says where one is by the rules.
+const shots = [{ x: 69, y: 22, team: "home", outcome: "goal" }, { x: -61, y: 12, team: "away", outcome: "blocked" }];
+const svg = drawKyogijo({ sport: "nhl", layers: [{ kind: "points", name: "shots", from: "nhl-api", data: shots }] });
+console.log(svg.includes("2 shots"), zoneAt("nhl", [69, 22], { frame: "nhl-api" }).subzone);
+// true faceoff-circle
+```
+
+### In Japanese
+
+```ts
+import { describe, drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
+
+const game = { sport: "nhl", away: { name: "USA", score: 3 }, home: { name: "Canada", score: 2 }, status: "final" } as const;
+console.log(describe({ ...game, language: "ja" }).title, drawKyogijo({ ...game, language: "ja" }).includes("試合終了"));
+// USA 3、Canada 2、試合終了 true
+```
+
+### As data, for d3, a canvas, GeoJSON or a PNG
+
+```ts
+import { sceneToGeoJSON } from "@johnmorrisdotca/kyogijo-stadiums/geojson";
+
+// The same drawing as features, in feet from the left end of the rink.
+const features = sceneToGeoJSON({ sport: "nhl", id: "rink" });
+console.log(features.type, features.features.length > 10);
+// FeatureCollection true
+```
+
+```js no-run
+import { writeFileSync } from "node:fs";
+import { toPNG } from "@johnmorrisdotca/kyogijo-stadiums/png";
+
+// Needs the optional package @resvg/resvg-js; without it the call says so (PNG_PEER_MISSING).
+writeFileSync("rink.png", await toPNG({ sport: "nhl", away: { name: "USA", score: 3 }, home: { name: "Canada", score: 2 }, status: "final" }, { width: 1200 }));
+```
 
-A page that moves (`mountKyogijo`), a file written on a server and a frame for a page with no script are in [getting started](./docs/getting-started.md).
 
 ## API
 

package/catalogue.json

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

package/dist/catalogue.data.js

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

package/dist/element.d.ts

@@ -1,5 +1,6 @@
 import { type KyogijoReplay } from "./mount.ts";
 import { type KyogijoTurn } from "./turn.dom.ts";
+import "./turn.replay.dom.ts";
 import type { TurnSettings } from "./turn.model.ts";
 import type { ReplaySettings, ReplayTimeline } from "./replay.types.ts";
 import type { ScoreOptions, SurfaceOptions } from "./types.ts";

package/dist/element.js

@@ -9,13 +9,15 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KyogijoField_instances, _KyogijoField_mount, _KyogijoField_host, _KyogijoField_options, _KyogijoField_theme, _KyogijoField_timeline, _KyogijoField_replaySettings, _KyogijoField_replay, _KyogijoField_replayOf, _KyogijoField_turn, _KyogijoField_turnSettings, _KyogijoField_attach, _KyogijoField_draw;
+var _KyogijoField_instances, _KyogijoField_mount, _KyogijoField_host, _KyogijoField_options, _KyogijoField_theme, _KyogijoField_timeline, _KyogijoField_replaySettings, _KyogijoField_replay, _KyogijoField_replayOf, _KyogijoField_turn, _KyogijoField_turnSettings, _KyogijoField_attach, _KyogijoField_draw, _KyogijoField_follow;
 import { SPORTS } from "./draw.js";
 import { leagueIds } from "./leagues.js";
 import { parseRange } from "./ranges.names.js";
 import { mountKyogijo } from "./mount.js";
 import { TURN_PRESET_NAMES } from "./turn.camera.js";
 import { mountKyogijoTurn } from "./turn.dom.js";
+// A timeline on the element's 3D view plays with the replay's code for the view.
+import "./turn.replay.dom.js";
 /** The tag of the element. */
 export const KYOGIJO_TAG = "kyogijo-field";
 /** The attributes the element reads. */
@@ -355,7 +357,8 @@ export class KyogijoField extends Base {
     }
 }
 _KyogijoField_mount = new WeakMap(), _KyogijoField_host = new WeakMap(), _KyogijoField_options = new WeakMap(), _KyogijoField_theme = new WeakMap(), _KyogijoField_timeline = new WeakMap(), _KyogijoField_replaySettings = new WeakMap(), _KyogijoField_replay = new WeakMap(), _KyogijoField_replayOf = new WeakMap(), _KyogijoField_turn = new WeakMap(), _KyogijoField_turnSettings = new WeakMap(), _KyogijoField_instances = new WeakSet(), _KyogijoField_attach = function _KyogijoField_attach(again) {
-    if (__classPrivateFieldGet(this, _KyogijoField_mount, "f") === undefined || __classPrivateFieldGet(this, _KyogijoField_timeline, "f") === undefined)
+    const on = __classPrivateFieldGet(this, _KyogijoField_turn, "f") ?? __classPrivateFieldGet(this, _KyogijoField_mount, "f");
+    if (on === undefined || __classPrivateFieldGet(this, _KyogijoField_timeline, "f") === undefined)
         return;
     const settings = replaySettingsFromAttributes((name) => this.getAttribute(name), __classPrivateFieldGet(this, _KyogijoField_replaySettings, "f"));
     if (__classPrivateFieldGet(this, _KyogijoField_replay, "f") !== undefined && __classPrivateFieldGet(this, _KyogijoField_replayOf, "f") === __classPrivateFieldGet(this, _KyogijoField_timeline, "f") && !again) {
@@ -368,7 +371,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, __classPrivateFieldGet(this, _KyogijoField_mount, "f").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 }), "f");
 }, _KyogijoField_draw = function _KyogijoField_draw() {
     if (__classPrivateFieldGet(this, _KyogijoField_host, "f") === undefined || !this.isConnected)
         return;
@@ -377,7 +380,7 @@ _KyogijoField_mount = new WeakMap(), _KyogijoField_host = new WeakMap(), _Kyogij
     if (options.theme === undefined && (page === "light" || page === "dark"))
         options.theme = page;
     if (turnWanted((name) => this.getAttribute(name))) {
-        // The 3D view takes the container over from the flat drawing; a replay does not play on it.
+        // The 3D view takes the container over from the flat drawing; a replay plays on it, the players standing up.
         if (__classPrivateFieldGet(this, _KyogijoField_mount, "f") !== undefined) {
             __classPrivateFieldGet(this, _KyogijoField_mount, "f").destroy();
             __classPrivateFieldSet(this, _KyogijoField_mount, undefined, "f");
@@ -385,20 +388,28 @@ _KyogijoField_mount = new WeakMap(), _KyogijoField_host = new WeakMap(), _Kyogij
             __classPrivateFieldSet(this, _KyogijoField_replayOf, undefined, "f");
         }
         const settings = turnSettingsFromAttributes((name) => this.getAttribute(name), __classPrivateFieldGet(this, _KyogijoField_turnSettings, "f"));
-        if (__classPrivateFieldGet(this, _KyogijoField_turn, "f") === undefined)
+        if (__classPrivateFieldGet(this, _KyogijoField_turn, "f") === undefined) {
             __classPrivateFieldSet(this, _KyogijoField_turn, mountKyogijoTurn(__classPrivateFieldGet(this, _KyogijoField_host, "f"), options, settings), "f");
+            __classPrivateFieldSet(this, _KyogijoField_replay, undefined, "f");
+            __classPrivateFieldSet(this, _KyogijoField_replayOf, undefined, "f");
+        }
         else
             __classPrivateFieldGet(this, _KyogijoField_turn, "f").update(options);
+        __classPrivateFieldGet(this, _KyogijoField_instances, "m", _KyogijoField_follow).call(this);
         return;
     }
     if (__classPrivateFieldGet(this, _KyogijoField_turn, "f") !== undefined) {
         __classPrivateFieldGet(this, _KyogijoField_turn, "f").destroy();
         __classPrivateFieldSet(this, _KyogijoField_turn, undefined, "f");
+        __classPrivateFieldSet(this, _KyogijoField_replay, undefined, "f");
+        __classPrivateFieldSet(this, _KyogijoField_replayOf, undefined, "f");
     }
     if (__classPrivateFieldGet(this, _KyogijoField_mount, "f") === undefined)
         __classPrivateFieldSet(this, _KyogijoField_mount, mountKyogijo(__classPrivateFieldGet(this, _KyogijoField_host, "f"), options), "f");
     else
         __classPrivateFieldGet(this, _KyogijoField_mount, "f").update(options);
+    __classPrivateFieldGet(this, _KyogijoField_instances, "m", _KyogijoField_follow).call(this);
+}, _KyogijoField_follow = function _KyogijoField_follow() {
     if (__classPrivateFieldGet(this, _KyogijoField_timeline, "f") === undefined) {
         __classPrivateFieldGet(this, _KyogijoField_replay, "f")?.destroy();
         __classPrivateFieldSet(this, _KyogijoField_replay, undefined, "f");

package/dist/judging.mount.js

@@ -62,6 +62,7 @@ export function mountJudgingBroadcast(host, options, settings = {}) {
         direction: () => turn.direction(),
         setDirection: (direction) => turn.setDirection(direction),
         togglePlay: () => turn.togglePlay(),
+        replay: (timeline, replaySettings) => turn.replay(timeline, replaySettings),
         get quality() {
             return turn.quality;
         },

package/dist/replay-entry.d.ts

@@ -2,9 +2,11 @@ import "./full.ts";
 import "./venues.all.ts";
 export { activeEvents, describeEvent, drawFrame, eventsBetween, interpolate, possession, replayClock, replayEvents, replayInfo, replayLayers, replaySnapshot, replaySummary, replayTable, replayTimes, trails } from "./replay.ts";
 export type { ReplaySnapshot } from "./replay.ts";
+export { boardClock, replayBoard, replayPeriods } from "./replay.board.ts";
+export type { ReplayBoardState } from "./replay.board.ts";
 export { alongPool, distanceAt, progressOf, raceTimeline } from "./pool.replay.ts";
 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 type { ReplayController } from "./replay.control.ts";
-export type { ActiveEvent, Possession, ReplayChange, ReplayEvent, ReplayEventKind, ReplayFrame, ReplayLook, ReplayObject, ReplayReason, ReplaySettings, ReplayState, ReplayTeam, ReplayTimeline, ReplayTrail, } from "./replay.types.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

@@ -4,6 +4,7 @@ import "./full.js";
 // The real venues of the NHL's arenas, as this entry has always had them (the lean district reads the ones it shows).
 import "./venues.all.js";
 export { activeEvents, describeEvent, drawFrame, eventsBetween, interpolate, possession, replayClock, replayEvents, replayInfo, replayLayers, replaySnapshot, replaySummary, replayTable, replayTimes, trails } from "./replay.js";
+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";

package/dist/replay.board.d.ts

@@ -0,0 +1,39 @@
+import type { ReplayPeriod, ReplayTimeline } from "./replay.types.ts";
+/** The board at a time. */
+export interface ReplayBoardState {
+    /** The goals so far: the events of kind `goal` at or before the time, by `team`. */
+    score: [number, number];
+    /** The period's number, or `undefined` when the timeline has no periods. */
+    period?: number;
+    /** The game clock as it is written, `19:20`: the time left in the period, or the time gone when the timeline counts `up`. Whole seconds, so it changes once a second of game time at most. */
+    clock: string;
+}
+/** Seconds on a board's clock, `19:20`. A board has two digits of minutes, so more than 99:59 is shown as 99:59. */
+export declare function boardClock(seconds: number): string;
+/** The periods of a timeline in order, each with its number; the whole replay as one period with no number when it gives none. */
+export declare function replayPeriods(timeline: ReplayTimeline): readonly (ReplayPeriod & {
+    number?: number;
+})[];
+/**
+ * The scoreboard of a replay at a time `t`, in seconds on the timeline's clock. The score is the goals at or before it; the period is the last one that has begun (the first, before any has);
+ * the clock runs through the period from its full length to nothing, or from nothing up when the timeline counts `up`. A period with a `length` of its own runs its clock through that many
+ * seconds however long it lasts on the timeline, so a game re-timed to minutes can read like the real one.
+ * @example
+ * ```ts
+ * import { replayBoard } from "@johnmorrisdotca/kyogijo-stadiums/replay";
+ * const frames = [0, 60, 120].map((t) => ({ t, objects: [{ id: "puck", team: "puck" as const, x: 0, y: 0 }] }));
+ * const timeline = {
+ *   frames,
+ *   events: [{ t: 30, kind: "goal", team: "home" as const }],
+ *   periods: [{ start: 0, end: 60, length: 1200 }, { start: 60, end: 120, length: 1200 }],
+ * };
+ * const at = (t: number) => JSON.stringify(replayBoard(timeline, t));
+ * console.log(at(0));
+ * console.log(at(30));
+ * console.log(at(90));
+ * // {"score":[0,0],"period":1,"clock":"20:00"}
+ * // {"score":[1,0],"period":1,"clock":"10:00"}
+ * // {"score":[1,0],"period":2,"clock":"10:00"}
+ * ```
+ */
+export declare function replayBoard(timeline: ReplayTimeline, t: number): ReplayBoardState;

package/dist/replay.board.js

@@ -0,0 +1,62 @@
+// What a scoreboard shows of a replayed game at a time: the score, the period and the game clock, worked out from the same timeline the replay plays (its goals and its periods). Pure: a timeline and a time
+// give the same board every time, so a seek, a step and a period's button all land on the right figures at once, and a replay that goes back finds the score as it was. The 3D view draws it on the scoreboard
+// hung over the surface (`turn.replay.ts`); a page that draws its own board reads it the same way.
+import { replayEvents, replayInfo } from "./replay.js";
+const isNum = (value) => typeof value === "number" && Number.isFinite(value);
+const two = (n) => String(n).padStart(2, "0");
+/** Seconds on a board's clock, `19:20`. A board has two digits of minutes, so more than 99:59 is shown as 99:59. */
+export function boardClock(seconds) {
+    const whole = Math.min(99 * 60 + 59, Math.max(0, Math.floor(isNum(seconds) ? seconds : 0)));
+    return `${Math.floor(whole / 60)}:${two(whole % 60)}`;
+}
+/** The periods of a timeline in order, each with its number; the whole replay as one period with no number when it gives none. */
+export function replayPeriods(timeline) {
+    const given = (timeline.periods ?? []).filter((p) => isNum(p?.start) && isNum(p?.end) && p.end >= p.start);
+    if (given.length === 0) {
+        const info = replayInfo(timeline);
+        return [{ start: info.start, end: info.end }];
+    }
+    return [...given].sort((a, b) => a.start - b.start).map((p, i) => ({ ...p, number: isNum(p.number) ? p.number : i + 1 }));
+}
+/**
+ * The scoreboard of a replay at a time `t`, in seconds on the timeline's clock. The score is the goals at or before it; the period is the last one that has begun (the first, before any has);
+ * the clock runs through the period from its full length to nothing, or from nothing up when the timeline counts `up`. A period with a `length` of its own runs its clock through that many
+ * seconds however long it lasts on the timeline, so a game re-timed to minutes can read like the real one.
+ * @example
+ * ```ts
+ * import { replayBoard } from "@johnmorrisdotca/kyogijo-stadiums/replay";
+ * const frames = [0, 60, 120].map((t) => ({ t, objects: [{ id: "puck", team: "puck" as const, x: 0, y: 0 }] }));
+ * const timeline = {
+ *   frames,
+ *   events: [{ t: 30, kind: "goal", team: "home" as const }],
+ *   periods: [{ start: 0, end: 60, length: 1200 }, { start: 60, end: 120, length: 1200 }],
+ * };
+ * const at = (t: number) => JSON.stringify(replayBoard(timeline, t));
+ * console.log(at(0));
+ * console.log(at(30));
+ * console.log(at(90));
+ * // {"score":[0,0],"period":1,"clock":"20:00"}
+ * // {"score":[1,0],"period":1,"clock":"10:00"}
+ * // {"score":[1,0],"period":2,"clock":"10:00"}
+ * ```
+ */
+export function replayBoard(timeline, t) {
+    const score = [0, 0];
+    for (const e of replayEvents(timeline)) {
+        if (e.t > t)
+            break;
+        if (e.kind === "goal" && (e.team === "home" || e.team === "away"))
+            score[e.team === "home" ? 0 : 1] += 1;
+    }
+    const periods = replayPeriods(timeline);
+    let at = periods[0];
+    for (const p of periods)
+        if (p.start <= t)
+            at = p;
+    const span = at.end - at.start;
+    const share = span > 0 ? Math.min(1, Math.max(0, (t - at.start) / span)) : 0;
+    const length = isNum(at.length) && at.length > 0 ? at.length : span;
+    // Down: the time left, rounded up, so that the full length shows until the period has moved and nothing shows only at its end. Up: the whole seconds gone.
+    const clock = timeline.clock === "up" ? boardClock(share * length) : boardClock(Math.ceil((1 - share) * length - 1e-9));
+    return at.number === undefined ? { score, clock } : { score, period: at.number, clock };
+}

package/dist/replay.d.ts

@@ -17,6 +17,8 @@ export declare function replayInfo(timeline: ReplayTimeline): {
     events: number;
     step: number;
 };
+/** Everything a timeline tracks, each as it first appears (its id, team, number and label), in that order. */
+export declare function replayCast(timeline: ReplayTimeline): readonly ReplayObject[];
 /** The times of the frames, and of the events, in order: the moments a step can land on. */
 export declare function replayTimes(timeline: ReplayTimeline): readonly number[];
 /** The events of a timeline, in time order. */
@@ -151,6 +153,8 @@ export declare function replayPlacer(options: SurfaceOptions | ScoreOptions, tim
  * ```
  */
 export declare function drawFrame(options: SurfaceOptions | ScoreOptions, timeline: ReplayTimeline, t: number, look?: ReplayLook): string;
+/** `drawFrame` with only the groups `keep` says yes to: a 3D view keeps the players off its floor, where they stand up instead. */
+export declare function drawFrameOf(options: SurfaceOptions | ScoreOptions, timeline: ReplayTimeline, t: number, look?: ReplayLook, keep?: (group: ReplayGroup) => boolean): string;
 /** The prefix of the ids in a replay's drawing when the options give none: a hash of the options and of the timeline's size, not of the time. */
 export declare const replayId: (options: SurfaceOptions | ScoreOptions, timeline: ReplayTimeline) => string;
 /**

package/dist/replay.dom.d.ts

@@ -1,6 +1,7 @@
 import { type ReplayController } from "./replay.control.ts";
-import type { ReplaySettings, ReplayTimeline } from "./replay.types.ts";
-import type { ScoreOptions, SurfaceOptions } from "./types.ts";
+import { type ReplayGroup } from "./replay.ts";
+import type { ReplayChange, ReplayLook, ReplaySettings, ReplayTimeline } from "./replay.types.ts";
+import type { Language, ScoreOptions, SurfaceOptions } from "./types.ts";
 /** The controls' stylesheet: written once beside the controls, scoped to them, in the page's own colours. */
 export declare const REPLAY_STYLE: string;
 /** A replay attached to a container: the controller, the stage the drawing goes in, and how to draw it again. */
@@ -13,6 +14,70 @@ export interface ReplayView {
     /** Stop the clock and the listeners, and empty the container. */
     destroy(): void;
 }
+/** What a painter is given: where the drawing is, what it was drawn from, and how to draw it whole again. */
+export interface PainterSource {
+    doc: Document;
+    timeline: ReplayTimeline;
+    look: ReplayLook;
+    /** The drawing the replay's groups are in (`svg.kyogijo`), or `null` before it is written. */
+    svg(): SVGSVGElement | null;
+    /** The options it was drawn with, its `id` among them. */
+    options(): SurfaceOptions | ScoreOptions;
+    language(): Language;
+    /** Which groups of the replay are in this drawing: all when missing (a 3D view stands the players up and leaves the rest on the floor). */
+    keep?: (group: ReplayGroup) => boolean;
+    /** Write the drawing whole again at a time; the painter binds itself to it afterwards. */
+    redraw(t: number): void;
+}
+/** The painter of a replay's drawing: `paint` moves the marks to a time; `bind` matches the elements of a drawing just written at `t`. */
+export interface ReplayPainter {
+    paint(t: number): void;
+    bind(t: number): void;
+}
+/**
+ * The painter of a replay: it moves the marks that move and nothing else. A mark that comes or goes (an object that enters, an event that begins) draws the replay's own group
+ * again, never the surface; a group whose marks cannot be matched to elements one for one is drawn again each time.
+ */
+export declare function replayPainter(source: PainterSource): ReplayPainter;
+/** What a driver is given: how to paint a time, where its keys are heard, and what it labels. */
+export interface DriverSource {
+    /** Move the drawing to a time. Called on every change of the clock, with the change (what moved it, and the state after). */
+    paint(t: number, change?: ReplayChange): void;
+    language: Language;
+    /** The element whose keys play, step and seek (its descendants too): the stage and the bar in a flat replay, the bar alone over a 3D view. */
+    keysOn: HTMLElement;
+    /** The element that says what the replay is doing (`data-state`, `data-motion`). */
+    holder: HTMLElement;
+    /** The element that names the replay and points at its key help (the flat drawing's stage), if any. */
+    labelled?: HTMLElement;
+    /** The element whose being in sight lets the clock run: no frame is asked for while it is scrolled out of sight. */
+    seen?: Element;
+    /** The key help: `keys` and `keysStep` by default, `keysTurn` and `keysTurnStep` over a 3D view. */
+    help?: "flat" | "turn";
+    /** Where frames are asked for: the page's `requestAnimationFrame` by default; a 3D view lends its own, so that a turning view and its replay share one frame. */
+    frames?: {
+        request(callback: FrameRequestCallback): number;
+        cancel(id: number): void;
+    };
+}
+/** The page's side of a replay without its drawing: the clock on animation frames, the controls, the keys, the live region, a hidden page and reduced motion. */
+export interface ReplayDriver {
+    controller: ReplayController;
+    /** The style, the key help, the bar and the live region, in that order, for the caller to put in the page. */
+    parts: {
+        style: HTMLStyleElement;
+        hint: HTMLElement;
+        bar: HTMLElement;
+        live: HTMLElement;
+    };
+    /** The words changed: the controls are made again. */
+    setLanguage(language: Language): void;
+    /** The play, pause or step the keys of a 3D view's stage ask for, by the names of the keys: the same moves as the bar's keys. */
+    key(event: KeyboardEvent, scope: "stage" | "bar"): boolean;
+    destroy(): void;
+}
+/** Make the clock, the controls and the keys of a replay. Nothing runs until the reader (or `autoplay`) plays it, and nothing runs while it is paused, hidden or out of sight. */
+export declare function replayDriver(doc: Document, timeline: ReplayTimeline, settings: ReplaySettings, source: DriverSource): ReplayDriver;
 /**
  * Attach a replay to a container: the stage with the drawing, the controls under it, the keyboard and the live region. The drawing is written once
  * and then only the marks that move are moved, on `requestAnimationFrame`; a mark that comes or goes (an object that enters, an event that