@johnmorrisdotca/kyogijo-stadiums 0.52.0 → 0.53.0

package/CHANGELOG.md

@@ -7,6 +7,14 @@ 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

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>
@@ -157,7 +159,7 @@ Real buildings drawn in the outline OpenStreetMap maps for them, each with a pla
 <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." width="250">
+<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>
@@ -171,6 +173,8 @@ Real buildings drawn in the outline OpenStreetMap maps for them, each with a pla
 </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">
@@ -267,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
@@ -435,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.52.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.52.0"
+        "version": "0.53.0"
     },
     "address": "https://johnmorrisdotca.github.io/kyogijo-stadiums/catalogue.json",
     "site": "https://johnmorrisdotca.github.io/kyogijo-stadiums/",

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.dom.d.ts

@@ -1,6 +1,6 @@
 import { type ReplayController } from "./replay.control.ts";
 import { type ReplayGroup } from "./replay.ts";
-import type { ReplayLook, ReplaySettings, ReplayTimeline } from "./replay.types.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;
@@ -41,8 +41,8 @@ export interface ReplayPainter {
 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. */
-    paint(t: number): void;
+    /** 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;

package/dist/replay.dom.js

@@ -294,7 +294,7 @@ export function replayDriver(doc, timeline, settings, source) {
     }
     const stop = controller.subscribe((change) => {
         sync(change);
-        source.paint(change.state.t);
+        source.paint(change.state.t, change);
         if (settings.announce !== false && change.crossed.length > 0 && (change.reason === "tick" || change.reason === "step")) {
             live.textContent = change.crossed.map((e) => describeEvent(e, language, info.start)).join(". ");
         }

package/dist/replay.types.d.ts

@@ -50,6 +50,16 @@ export interface ReplayEvent {
     /** What is said of it, over the standard words: "Goal, Rivera". */
     label?: string;
 }
+/** A period of the game (or a half, a quarter, an inning) on the timeline's clock: what a scoreboard on the surface shows as the period and counts its clock in. */
+export interface ReplayPeriod {
+    /** The period's number as the board writes it. Its place in the list (1 for the first) when missing. */
+    number?: number;
+    /** Where it begins and ends, in seconds on the timeline's clock. */
+    start: number;
+    end: number;
+    /** How long the period is on the game clock, in seconds, when the replay is re-timed (a made-up game played in minutes: 1200 for a hockey period). The board's clock runs through it from start to end. Else the clock runs in the timeline's own seconds. */
+    length?: number;
+}
 /** Tracking data over time on a surface. Do not change a timeline after it has been used: make a new one. */
 export interface ReplayTimeline {
     /** The positions, from the first moment to the last. */
@@ -69,6 +79,10 @@ export interface ReplayTimeline {
         x?: readonly Landmark[];
         y?: readonly Landmark[];
     };
+    /** The periods of the game, in order. A scoreboard hung over a 3D view shows the one the clock is in. */
+    periods?: readonly ReplayPeriod[];
+    /** Whether a scoreboard's game clock counts the time left in the period (`down`, the default: hockey, basketball, football) or the time gone (`up`: soccer). */
+    clock?: "down" | "up";
 }
 /** How a frame is drawn. */
 export interface ReplayLook {

package/dist/turn.kit.d.ts

@@ -1,3 +1,4 @@
+import type { HungBoard } from "./venue.boards.ts";
 /** A point or a direction: x, y, z in feet. */
 export type V3 = readonly [number, number, number];
 /** What a plane is a part of: it is the class of its element (`ky-up-<kind>`) and what a test finds it by. */
@@ -74,6 +75,8 @@ export interface Upright {
     /** A second height worth saying (a net's height at the centre, a post's crossbar), in feet. */
     low?: number;
     planes: Plane[];
+    /** What a scoreboard hung over the surface was made from, so that a replay can draw its faces again with the score and the clock of a time (`replayTurnModel`). */
+    hung?: HungBoard;
 }
 /** The four numbers a plane's SVG needs: its length along `u` and along `v`, in feet. */
 export declare const size: (p: Pick<Plane, "u" | "v">) => [number, number];

package/dist/turn.replay.board.d.ts

@@ -0,0 +1,23 @@
+import { type ReplayBoardState } from "./replay.board.ts";
+import type { ReplayChange, ReplayTimeline } from "./replay.types.ts";
+import type { Plane } from "./turn.kit.ts";
+import type { TurnModel } from "./turn.model.ts";
+import { type HungBoard } from "./venue.boards.ts";
+/** The scoreboards a model has hung over its surface, with what each was made from. */
+export declare const hungBoards: (model: Pick<TurnModel, "uprights">) => HungBoard[];
+/** The planes of a hung scoreboard with the replay's board on it: the same planes (the same ids, in the same places), the faces drawn with the score, the period and the clock. */
+export declare function hungBoardPlanes(hung: HungBoard, state: ReplayBoardState): Plane[];
+/** What is written on a board, as one string: it changes when, and only when, the score, the period or the clock does. */
+export declare const boardKey: (state: ReplayBoardState) => string;
+/** The longest the game clock goes without a write while the replay plays, in milliseconds. */
+export declare const CLOCK_EVERY = 1000;
+/** A scoreboard in the page: its planes' SVG elements, what was last written to each, and what it shows. */
+export interface BoardFollower {
+    /** Find the board's elements in the page after the view drew its world: the model was made at this time, so it already shows `state`. */
+    bind(root: ParentNode, model: TurnModel, state: ReplayBoardState | undefined): void;
+    /** Follow the clock to `t`: write the board if what it shows changed (and, while playing, if the clock has not just been written). */
+    follow(t: number, model: TurnModel, change?: ReplayChange): void;
+    clear(): void;
+}
+/** The follower of a replay's scoreboard. It is idle (no elements, no work) where the view has none. */
+export declare function boardFollower(timeline: ReplayTimeline, now: () => number): BoardFollower;

package/dist/turn.replay.board.js

@@ -0,0 +1,81 @@
+// The scoreboard hung over a 3D view, following a replay: the faces drawn with the score, the period and the game clock of the time the replay is at (`replayBoard`), in the model (pure) and in the
+// page (a few SVG strings written when the board changes, never the view). A goal, a new period, a seek, a step or a pause is written at once; the clock, while the replay plays, once a second at most.
+import { replayBoard } from "./replay.board.js";
+import { centreBoard, safeClock } from "./venue.boards.js";
+/** The scoreboards a model has hung over its surface, with what each was made from. */
+export const hungBoards = (model) => model.uprights.items.flatMap((item) => (item.kind === "hung-board" && item.hung !== undefined ? [item.hung] : []));
+/** The planes of a hung scoreboard with the replay's board on it: the same planes (the same ids, in the same places), the faces drawn with the score, the period and the clock. */
+export function hungBoardPlanes(hung, state) {
+    const clock = safeClock(state.clock);
+    const live = clock === "" ? undefined : { clock, ...(state.period === undefined ? {} : { period: state.period }) };
+    return centreBoard(hung.id, hung.box, hung.lift, { ...hung.look, score: state.score, ...(live === undefined ? {} : { live }) });
+}
+/** What is written on a board, as one string: it changes when, and only when, the score, the period or the clock does. */
+export const boardKey = (state) => `${state.score[0]}-${state.score[1]} ${state.period ?? ""} ${state.clock}`;
+/** The longest the game clock goes without a write while the replay plays, in milliseconds. */
+export const CLOCK_EVERY = 1000;
+const FACE = /-(south|north|east|west)$/;
+/** The follower of a replay's scoreboard. It is idle (no elements, no work) where the view has none. */
+export function boardFollower(timeline, now) {
+    let found = new Map();
+    let shown = "";
+    let state;
+    let wroteAt = Number.NEGATIVE_INFINITY;
+    /** The figures on the faces as text, for a test and for a reader of the page's markup. */
+    const label = (s) => {
+        for (const [id, one] of found) {
+            if (!FACE.test(id))
+                continue;
+            one.face.dataset.score = `${s.score[0]}-${s.score[1]}`;
+            one.face.dataset.period = s.period === undefined ? "" : String(s.period);
+            one.face.dataset.clock = s.clock;
+        }
+    };
+    return {
+        bind(root, model, at) {
+            found = new Map();
+            state = at;
+            if (at === undefined)
+                return;
+            const written = new Map(model.planes.filter((p) => p.kind === "hung-board").map((p) => [p.id, p.svg]));
+            for (const face of root.querySelectorAll(".ky-up-hung-board")) {
+                const svg = face.querySelector(":scope > svg");
+                const id = face.dataset.part ?? "";
+                if (svg !== null && written.has(id))
+                    found.set(id, { svg, face, written: written.get(id) ?? "" });
+            }
+            shown = boardKey(at);
+            wroteAt = now();
+            label(at);
+        },
+        follow(t, model, change) {
+            if (found.size === 0)
+                return;
+            const next = replayBoard(timeline, t);
+            const key = boardKey(next);
+            if (key === shown)
+                return;
+            const moved = state === undefined || state.score[0] !== next.score[0] || state.score[1] !== next.score[1] || state.period !== next.period;
+            const at = now();
+            if (!moved && change?.reason === "tick" && change.state.playing && at - wroteAt < CLOCK_EVERY)
+                return;
+            shown = key;
+            state = next;
+            wroteAt = at;
+            for (const hung of hungBoards(model)) {
+                for (const plane of hungBoardPlanes(hung, next)) {
+                    const one = found.get(plane.id);
+                    if (one === undefined || one.written === plane.svg)
+                        continue;
+                    one.svg.innerHTML = plane.svg;
+                    one.written = plane.svg;
+                }
+            }
+            label(next);
+        },
+        clear() {
+            found = new Map();
+            state = undefined;
+        },
+    };
+}

package/dist/turn.replay.d.ts

@@ -1,3 +1,4 @@
+import { type ReplayBoardState } from "./replay.board.ts";
 import { type ReplayGroup } from "./replay.ts";
 import type { ReplayLook, ReplayObject, ReplayTeam, ReplayTimeline } from "./replay.types.ts";
 import { type Plane } from "./turn.kit.ts";
@@ -10,6 +11,8 @@ export declare const keepOnFloor: (group: Pick<ReplayGroup, "id">) => boolean;
 /** The settings a 3D replay takes beyond the flat replay's look: `stand: false` keeps the players flat on the floor, as the flat replay draws them. */
 export interface TurnReplayLook extends ReplayLook {
     stand?: boolean;
+    /** `false` leaves a scoreboard hung over the surface as the options made it; by default it shows the replay's score, period and clock (`replayBoard`). */
+    board?: boolean;
 }
 /**
  * The size of a disc, in feet: a share of the playing surface's diagonal (the area the view is fitted to, not the ground or the building round it), so that it reads on a rink and on a pitch
@@ -44,6 +47,8 @@ export interface TurnReplayModel {
     size: number;
     /** The options the floor was drawn with, its `id` among them. */
     floorOptions: SurfaceOptions | ScoreOptions;
+    /** What the hung scoreboard shows at the time, when the model has one and the look lets the replay drive it. */
+    board?: ReplayBoardState;
 }
 /** The floor's options for a replay: the model's own, and an id of its own, so that the replay's groups are found in it. */
 export declare const replayFloorOptions: (model: Pick<TurnModel, "id" | "options">) => SurfaceOptions | ScoreOptions;

package/dist/turn.replay.dom.js

@@ -1,6 +1,7 @@
 import { createReplayView, replayDriver, replayPainter } from "./replay.dom.js";
 import { useTurnReplay } from "./turn.dom.js";
 import { drawFrameOf, replayPlacer, replaySnapshot } from "./replay.js";
+import { boardFollower } from "./turn.replay.board.js";
 import { keepOnFloor, moveDisc, replayTurnModel } from "./turn.replay.js";
 /** Attach a replay to a 3D view. The controller it gives back has `destroy`, which takes the replay away and leaves the view as it was. */
 export function attachTurnReplay(view, timeline, settings) {
@@ -12,6 +13,8 @@ export function attachTurnReplay(view, timeline, settings) {
     /** The element of each disc, and whether it was last shown. */
     let discs = new Map();
     let placedAt = Number.NaN;
+    /** The scoreboard hung over the surface, which follows the game. */
+    const board = boardFollower(timeline, () => doc.defaultView?.performance.now() ?? 0);
     const painter = replayPainter({
         doc,
         timeline,
@@ -57,9 +60,11 @@ export function attachTurnReplay(view, timeline, settings) {
     const wrap = doc.createElement("div");
     wrap.className = "ky-replay ky-turn-replay";
     const driver = replayDriver(doc, timeline, settings, {
-        paint: (t) => {
+        paint: (t, change) => {
             painter.paint(t);
             place(t);
+            if (look.board !== false)
+                board.follow(t, view.model(), change);
             view.repaint();
         },
         language,
@@ -107,6 +112,8 @@ export function attachTurnReplay(view, timeline, settings) {
         const t = driver.controller.state().t;
         placedAt = t;
         painter.bind(t);
+        // The scoreboard was drawn by the model at this time: its elements are found again.
+        board.bind(root, view.model(), laid?.board);
     };
     view.setDecorate((model) => {
         laid = replayTurnModel(model, timeline, driver.controller.state().t, look);
@@ -130,6 +137,7 @@ export function attachTurnReplay(view, timeline, settings) {
             wrap.remove();
             laid = undefined;
             discs = new Map();
+            board.clear();
             floorSvg = null;
             view.setDecorate(undefined);
         },

package/dist/turn.replay.js

@@ -2,8 +2,10 @@
 // disc that faces the eye (a circle for the home side, a square for the away side, a triangle for an official, each with its number), the marks of the flat replay stood up. Pure:
 // the same model, timeline, time and look give the same model. `turn.replay.dom.ts` moves it in a page.
 import { esc, num } from "./format.js";
+import { replayBoard } from "./replay.board.js";
 import { drawFrameOf, replayCast, replayPlacer, replaySnapshot } from "./replay.js";
 import { n } from "./turn.kit.js";
+import { hungBoardPlanes, hungBoards } from "./turn.replay.board.js";
 /** Who stands up on a 3D view: the players and the officials. The ball and the puck stay on the floor. */
 export const STANDING = ["home", "away", "official"];
 /** What stands up is in these groups of the flat replay; the 3D view's floor draws the rest (`keepOnFloor`). */
@@ -58,11 +60,21 @@ export const replayFloorOptions = (model) => ({ ...model.options, id: `${model.i
 export function replayTurnModel(model, timeline, t, look = {}) {
     const stand = look.stand !== false;
     const floorOptions = replayFloorOptions(model);
+    // A scoreboard hung over the surface follows the game: its faces are drawn again with the score, the period and the clock at the time.
+    const hung = look.board === false ? [] : hungBoards(model);
+    const state = hung.length === 0 ? undefined : replayBoard(timeline, t);
+    const drawn = new Map();
+    if (state !== undefined)
+        for (const h of hung)
+            for (const plane of hungBoardPlanes(h, state))
+                drawn.set(plane.id, plane);
+    const base = drawn.size === 0 ? model : { ...model, planes: model.planes.map((p) => drawn.get(p.id) ?? p) };
+    const board = state === undefined ? {} : { board: state };
     const floor = drawFrameOf(floorOptions, timeline, t, look, stand ? keepOnFloor : () => true);
     const size = discSize(playingArea(model), look);
     const discs = new Map();
     if (!stand)
-        return { model: { ...model, floor }, discs, size, floorOptions };
+        return { model: { ...base, floor }, discs, size, floorOptions, ...board };
     const sport = String(model.options.sport ?? "");
     const theme = model.options.theme;
     const vars = floorVars(floor);
@@ -76,7 +88,7 @@ export function replayTurnModel(model, timeline, t, look = {}) {
         const at = here.get(o.id);
         discs.set(o.id, { plane: discPlane(o, at?.[0] ?? 0, at?.[1] ?? 0, size, lift, discMarkup(o, size, sport, theme, vars)), on: at !== undefined });
     }
-    return { model: { ...model, floor, planes: [...model.planes, ...[...discs.values()].map((disc) => disc.plane)] }, discs, size, floorOptions };
+    return { model: { ...base, floor, planes: [...base.planes, ...[...discs.values()].map((disc) => disc.plane)] }, discs, size, floorOptions, ...board };
 }
 /** A number for a test or a page that wants to know where a disc stands: its middle on the floor, in feet. */
 export const discAt = (plane) => `${num(plane.o[0] + plane.u[0] / 2)} ${num(plane.o[1])}`;

package/dist/venue.boards.d.ts

@@ -11,6 +11,28 @@ export interface Boards {
     score: [number, number];
     /** Each lit panel has a halo under it (the venue is lit as at night). */
     glow: boolean;
+    /** What a replay adds to the scoreboard's face: the period and the game clock. Missing, the face is the score alone, as it always was. */
+    live?: BoardLive;
+}
+/** The period and the clock a scoreboard shows while a game is replayed on it. */
+export interface BoardLive {
+    /** The period (1, 2, 3...), or `undefined` for a game with none. */
+    period?: number;
+    /** The clock as it is written, `19:20`: digits and one colon. */
+    clock: string;
+}
+/** The scoreboard hung over a surface, with what it is made from: a replay draws its faces again with the score and the clock of the time it is at. */
+export interface HungBoard {
+    id: string;
+    box: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    /** How high the surface stands, in feet. */
+    lift: number;
+    look: Boards;
 }
 /** The package's own colours of light: amber, blue and a white with a little blue in it. */
 export declare const BOARD_COLORS: readonly [string, string, string];
@@ -72,6 +94,8 @@ export declare function boardSize(w: number, h: number): {
 };
 /** Whether a sport has a scoreboard hung over its surface: a ballpark's stands behind the outfield, so it has none here. */
 export declare const hangsOver: (sport: string | undefined) => boolean;
+/** A clock a scoreboard may write: one or two digits, a colon and two digits. Anything else is left off (the text goes into a drawing). */
+export declare const safeClock: (value: unknown) => string;
 /**
  * The scoreboard hung over the middle of a surface: a four sided board with its score on every face, a ring of display under it, a cap on top and a strut up to the rafters. `box` is the surface, `lift` how high the surface stands.
  * Its faces look outwards, each the right way round for an eye outside it.

package/dist/venue.boards.js

@@ -136,9 +136,10 @@ export function boardSize(w, h) {
 export const hangsOver = (sport) => sport !== "mlb";
 /** The segments of a seven-segment digit, a to g, that are lit for each digit. */
 const SEGMENTS = ["abcdef", "bc", "abged", "abgcd", "fgbc", "afgcd", "afgedc", "abc", "abcdefg", "abcdfg"];
-/** A number of one or two digits in seven segments, `high` feet tall, from (x, y) at its top left: the path and the width it takes. */
-function digits(value, x, y, high) {
-    const text = String(Math.min(99, Math.max(0, Math.trunc(value))));
+/** How wide a colon is, as a share of the height of the digits beside it. */
+const COLON = 0.3;
+/** A text of digits and colons in seven segments, `high` feet tall, from (x, y) at its top left: the path and the width it takes. */
+function segments(text, x, y, high) {
     const w = high * 0.56;
     const t = high * 0.13;
     const half = high / 2;
@@ -152,13 +153,46 @@ function digits(value, x, y, high) {
         g: [t * 0.6, half - t / 2, w - t * 1.2, t],
     };
     let d = "";
+    let at = x;
     [...text].forEach((ch, i) => {
-        for (const s of SEGMENTS[Number(ch)]) {
-            const [rx, ry, rw, rh] = rects[s];
-            d += `M${n(x + i * (w + t) + rx)} ${n(y + ry)}h${n(rw)}v${n(rh)}h${n(-rw)}z`;
+        if (i > 0)
+            at += t;
+        if (ch === ":") {
+            const cw = high * COLON;
+            const dot = t * 1.1;
+            for (const cy of [high * 0.3, high * 0.7])
+                d += `M${n(at + (cw - dot) / 2)} ${n(y + cy - dot / 2)}h${n(dot)}v${n(dot)}h${n(-dot)}z`;
+            at += cw;
+            return;
+        }
+        for (const seg of SEGMENTS[Number(ch)] ?? "") {
+            const [rx, ry, rw, rh] = rects[seg];
+            d += `M${n(at + rx)} ${n(y + ry)}h${n(rw)}v${n(rh)}h${n(-rw)}z`;
         }
+        at += w;
     });
-    return { d, width: text.length * w + (text.length - 1) * t };
+    return { d, width: at - x };
+}
+/** A number of one or two digits in seven segments, `high` feet tall, from (x, y) at its top left: the path and the width it takes. */
+const digits = (value, x, y, high) => segments(String(Math.min(99, Math.max(0, Math.trunc(value)))), x, y, high);
+/** A clock a scoreboard may write: one or two digits, a colon and two digits. Anything else is left off (the text goes into a drawing). */
+export const safeClock = (value) => (typeof value === "string" && /^\d{1,2}:\d{2}$/.test(value) ? value : "");
+/** The row over the score while a game is replayed: the period in a small frame and the game clock beside it, in seven segments, centred on the face between its end blocks. A game with no period has the clock alone. */
+function liveRow(w, h, room, live, color) {
+    const high = Math.min(h * 0.24, room / 6);
+    const y = h * 0.18;
+    const clockWidth = segments(live.clock, 0, y, high).width;
+    const period = live.period === undefined ? "" : String(Math.min(99, Math.max(0, Math.trunc(live.period))));
+    const pad = high * 0.3;
+    const frame = period === "" ? 0 : segments(period, 0, y, high).width + pad * 2;
+    const gap = period === "" ? 0 : high * 0.5;
+    const x0 = (w - (frame + gap + clockWidth)) / 2;
+    let svg = "";
+    if (period !== "") {
+        const line = high * 0.07;
+        svg += `<path class="u-led" fill="none" stroke="${color}" stroke-width="${n(line)}" d="M${n(x0)} ${n(y - pad * 0.6)}h${n(frame)}v${n(high + pad * 1.2)}h${n(-frame)}z"/><path class="u-led" fill="${color}" d="${segments(period, x0 + pad, y, high).d}"/>`;
+    }
+    return svg + `<path class="u-led" fill="${color}" d="${segments(live.clock, x0 + frame + gap, y, high).d}"/>`;
 }
 /** The face of the main board, `w` by `h` feet: a dark screen with a band of light along its top and bottom, a block of colour at each end, and the score between them. */
 function boardFace(w, h, look) {
@@ -171,18 +205,21 @@ function boardFace(w, h, look) {
     const block = Math.min(w * 0.2, h * 0.5);
     const [yb, hb] = [h * 0.28, h * 0.44];
     svg += `<path class="u-led" fill="${c0}" d="M${n(edge * 2)} ${n(yb)}h${n(block)}v${n(hb)}h${n(-block)}z"/><path class="u-led" fill="${c1}" d="M${n(w - edge * 2 - block)} ${n(yb)}h${n(block)}v${n(hb)}h${n(-block)}z"/>`;
-    // The score: two numbers and a dash, as large as the face between the blocks lets them be.
+    // The score: two numbers and a dash, as large as the face between the blocks lets them be. A replayed game also has the clock and the period over it, so the score is a little smaller and lower.
     const room = w - 2 * (block + edge * 4);
+    const live = look.live !== undefined && safeClock(look.live.clock) !== "" ? look.live : undefined;
     const digitCount = String(look.score[0]).length + String(look.score[1]).length;
     const dash = 0.4;
-    const high = Math.min(h * 0.5, room / (digitCount * 0.56 + (digitCount - 2) * 0.13 + dash + 0.5));
+    const high = Math.min(h * (live === undefined ? 0.5 : 0.33), room / (digitCount * 0.56 + (digitCount - 2) * 0.13 + dash + 0.5));
     const [home, away] = [digits(look.score[0], 0, 0, high), digits(look.score[1], 0, 0, high)];
     const gap = high * 0.3;
     const total = home.width + gap + high * dash + gap + away.width;
     const x0 = (w - total) / 2;
-    const y0 = (h - high) / 2;
+    const y0 = live === undefined ? (h - high) / 2 : h * 0.46;
     const [h0, a0] = [digits(look.score[0], x0, y0, high), digits(look.score[1], x0 + home.width + gap * 2 + high * dash, y0, high)];
     svg += `<path class="u-led" fill="${c2}" d="${h0.d}${a0.d}M${n(x0 + home.width + gap)} ${n(y0 + high / 2 - high * 0.065)}h${n(high * dash)}v${n(high * 0.13)}h${n(-high * dash)}z"/>`;
+    if (live !== undefined)
+        svg += liveRow(w, h, room, live, c2);
     return svg;
 }
 /**

package/dist/venue.js

@@ -227,7 +227,7 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     // The scoreboard hung over the middle of the surface (a ballpark has none, and a hall's own scoreboards stand in its place).
     if (boards?.scoreboard === true && v.noCentre !== true && hangsOver(String(o.sport))) {
         const planes = centreBoard("centre-board", stands.box, lift, boards);
-        items.push({ id: "centre-board", kind: "hung-board", at: centre, height: topOf(planes), planes });
+        items.push({ id: "centre-board", kind: "hung-board", at: centre, height: topOf(planes), planes, hung: { id: "centre-board", box: stands.box, lift, look: boards } });
     }
     if (wallSeats.length > 0)
         items.push({ id: "wall-seats", kind: "wall-seats", at: centre, height: topOf(wallSeats), planes: wallSeats });

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export declare const VERSION = "0.52.0";
+export declare const VERSION = "0.53.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export const VERSION = "0.52.0";
+export const VERSION = "0.53.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Kyogijo Stadiums 競技場, 40 sports' surfaces as SVG, drawn to scale from the rulebooks: NFL, CFL and IFAF football fields, an NHL rink, an NBA court, MLB ballparks, soccer pitches, curling sheets, athletics stadiums, speed skating, short track and figure skating rinks, swimming pools, water polo fields, diving wells, artistic swimming areas, and the courts and fields of tennis, volleyball (indoor, beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet, netball, lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budo of judo, karate, kendo, sumo and kyudo with a dojo of tatami laid as real units, the MMA cage, with each team's name and logo on its side and the score in the middle, stands and a crowd, a pageant of flags, and a 3D view. Light and dark, accessible, a compact badge for lists, a helper for React and a custom element. Zero dependencies.",
   "keywords": [
     "sports",
@@ -349,6 +349,8 @@
     "screenshots:flythrough": "pnpm site && node scripts/readme-flythrough.mjs",
     "test:readme": "pnpm build && node scripts/check-readme-examples.mjs",
     "docs:make": "node scripts/docs.mjs",
+    "docs:site": "pnpm site",
+    "docs:check": "pnpm build && node scripts/docs-check.mjs",
     "parks": "node scripts/build-parks.mjs",
     "arenas": "node scripts/build-arenas.mjs",
     "arenas:fetch": "node scripts/fetch-arenas.mjs",