@johnmorrisdotca/kyogijo-stadiums 0.29.0 → 0.31.0

package/CHANGELOG.md

@@ -7,6 +7,36 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.31.0] - 2026-10-20
+
+### Added
+
+- **Seattle's stadiums** ([the real stadiums](./docs/stadiums.md), `stadium: "lumen-field"` and `park: "t-mobile-park"` with `crowd: { real: true }`): **Lumen Field** for football (`sport: "nfl"`, 68,740 seats) and soccer (37,722), and **T-Mobile Park** for baseball (`sport: "mlb"`, 47,368), each in the outline of its building as OpenStreetMap maps it, with the roof and a plausible bowl of the seats the sources give. A soccer drawing whose `ground` is `lumen-field` needs no `stadium`; any other sport, a `league` of your own and `crowd: { real: false }` are drawn as before.
+- **Lumen Field.** OpenStreetMap maps both its pitches inside the building, lying north and south, so the field's orientation is mapped and not inferred. One bowl of three levels holds the 68,740 seats; a configuration opens its seats from the lowest bowl up (`bowlSeats`, `StadiumPlan.open`), so the soccer pitch closes the upper bowl and part of the middle one, drawn empty. Its roof is the article's canopy over 70 percent of the seats, drawn from the two roof parts OpenStreetMap maps (heights 36 metres, rise 10): strips of triangles from the low edge over the field's side to the high edge over the back of the stands, the bowl lowered to stand under it, the walls to just over the top row, the field and the ends open (`RealShell.roof: "canopy"`, `canopies`).
+- **T-Mobile Park, a ballpark.** The usual ballpark stands (`parkLayout`) with each band as deep as its seats need (`planPark`): the Main Level's 20,521 seats the lower bowl, the Club, Suite and View levels' 22,075 the upper, the bleachers' 3,666, all from the article's layout, held to within two percent of 47,368. OpenStreetMap maps the infield but not home plate, so the way out to centre field is the one of the four the infield allows where the park's fence and the stands behind it lie inside the building's outline: 49.4 degrees, north-east (the build refuses to choose where the outline does not decide). The roof is the article's retractable one in four sections, 217 to 269 feet over the field, far over the 21-metre walls: closed, a band to a crown with the fabric across it; open (`roofOpen`), the sections rest over the east side, over the railway where the article says they rest (`RealShell.roof: "panels"`, `panels`, `wall`).
+- **The district takes any of them** (`districtMember`, `planDistrict`): a ballpark's key is a venue (`t-mobile-park`, its one configuration `mlb`), its drawing turned about home plate by the heading of the way out to centre field (`stadiumFrameHeading`), and a stadium with several configurations takes the one named (`lumen-field:soccer`). Seattle is two presets of the demo's district page: `["t-mobile-park", "lumen-field"]` as neighbours (459 metres apart, Lumen Field to the north) and, with `mode: "city"`, the same two and `climate-pledge-arena` (3.4 to 3.8 kilometres off) at their real distances, with a grid of kilometres and a name beside each.
+- **Data, kept apart as before.** `pnpm stadiums:fetch` now takes the building, the pitches, the infield and the roof parts a stadium names (`osm` in `scripts/stadiums.data.json`) where OpenStreetMap does not tag them with the Wikidata item, joins the outer ways of a relation into one ring, and puts a stadium added later beside the ones already archived; `pnpm stadiums` makes the data files and refuses a figure the sources do not give (a tier's seats not in the article, pitches that do not lie the same way, an outline that does not choose the way out to centre field). The raw answers are in `data-sources/stadiums/2026-10-20/`.
+- **The demo's stadiums page** has the three stadiums as tabs and each one's configurations, with the facts of its roof; its district page has the Seattle presets. **The docs** have a section for each stadium, a Seattle section in [the district page](./docs/district.md) and items in [the gallery](https://johnmorrisdotca.github.io/kyogijo-stadiums/docs/gallery-stadiums.html).
+
+### Fixed
+
+- The 3D view gave two bands of a ballpark's bleachers (the left and the right) the same plane ids (`bleachers-front-0` for both); a second strip's planes now have an id of their own.
+
+## [0.30.1] - 2026-10-20
+
+### Added
+
+- **A picture of the fly-through** in the README and in [its page](./docs/flythrough.md): the whole run to Climate Pledge Arena, sped up, as an animated WebP in a light and a dark variant (`turning-flythrough-desk-<light|dark>.webp`, 40 frames, about 300 KB each; `pnpm screenshots:flythrough` makes it from the demo's page by `seek`, without waiting on a clock).
+
+## [0.30.0] - 2026-10-20
+
+### Added
+
+- **The fly-through ends on a game** (`game`, the sixth stage, after `rink`): a short play comes onto the ice while the rink goes on turning from the seat, with a label on the picture that says `Illustrative play`. It is a [replay](./docs/replay.md) timeline of the package's own (`ILLUSTRATIVE_PLAY`, entry `@johnmorrisdotca/kyogijo-stadiums/flythrough`): 101 frames a tenth of a second apart, five skaters and a goalie a side (shirt numbers only, no name, team or league), a puck, two passes, a shot and a goal, and the dots, numbers, trail and events are drawn by the replay's own layers (`replayLayers` through `renderLayers`). It is made up for the picture and says so on the screen, in the stage's words (English and Japanese) and in the docs; it is no real game's data.
+- **The play lies on the floor of the 3D arena**: a plane that takes the floor's own transform after each paint and stands in the floor's layer of the stack, so the glass, the boards and the stands in front of the ice hide it as they hide the ice. It runs ten seconds, holds one and a half, fades out and starts again (the dots never jump back in view); its moment is worked out from the clock and not from the turn's folded time, so it does not jump when the turn comes round. A reader who prefers reduced motion gets the moment after the shot as a still.
+- **The camera has one more channel** (`game`, how much of the play shows), still one path with no jumps; `playMarkup(moment, { id })`, `playAlpha`, `playMoment` and `PLAY_LOOK` are the rest of the play's API, pure and the same every time. `cameraAt` is a good deal faster (the path's tables are made once).
+- Tests for the play (thirteen objects a frame, all on the ice, no skater faster than 40 feet a second and none that jumps, the puck on the stick of whoever has it, the events in order, the same markup for the same moment, no label of a team or a league, said to be made up in both languages) and, in a real browser, that the play is on the ice from the game stage on only, lies where the floor lies at every frame, and its dots move.
+
 ## [0.29.0] - 2026-10-20
 
 ### Added

package/NOTICE.md

@@ -45,7 +45,7 @@ picture or code of the sources is copied; each source is named here so that the
 | `arenas`: each arena's names, years, city, seats, rink sizes, Wikidata item and coordinates | The infobox and the text of the English Wikipedia article of each arena, at the revision cited below (the names with the years the article dates them, the year it opened, closed and was pulled down, the seats for ice hockey and for basketball, a rink's length and width where the article gives them in a sentence of its own); the name in Japanese from the title of its Japanese article or written for the package; the Wikidata item (CC0) that each article is linked to and its coordinates (P625) | Facts. The articles are CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/); none of their text, tables or images is used |
 | `venues`: the outline of each NHL arena's building, how its rink lies in it and the building's height (`VENUE_OSM`, `src/venues.osm.data.ts`) | OpenStreetMap, through the Overpass API: the closed way (or the relation of a building drawn in two ways) tagged with the venue's Wikidata item (and the ice, where it is mapped), read on 2026-10-20, with the raw answers kept in `data-sources/venues/2026-10-20/`; the outline is simplified to a metre, and the way the rink lies is worked out from it (`coreOf`, `src/venues.geo.ts`) | ODbL 1.0, (c) OpenStreetMap contributors (https://www.openstreetmap.org/copyright): a derived database, kept in its own file and offered under the ODbL; a drawing made from it is a produced work and carries the credit (`VENUE_ATTRIBUTION`) |
 | `venues`: each venue's seats for ice hockey, number of seating tiers and kind of roof (`VENUE_DATA`, `src/venues.data.ts`) | The item of Wikidata (the capacity P1083 and the sport it applies to P641) and the English Wikipedia article of each arena, at the revision cited below, in `data-sources/venues/2026-10-20/` as read; the facts are numbers and words of our own, with what was read in a few words | Wikidata's data is CC0; the facts read from the articles are facts, with the articles credited here (CC BY-SA 4.0) |
-| `stadiums`: the outline of each stadium's building, the roof OpenStreetMap maps over it (its heights and the opening in it) and how the field lies, worked out from the opening (`STADIUM_OSM`, `src/stadiums.osm.data.ts`) | OpenStreetMap, through the Overpass API: the closed way tagged with the stadium's Wikidata item and the multipolygon of its roof, read on 2026-10-20, with the raw answers kept in `data-sources/stadiums/2026-10-20/`; the outline is simplified to a metre, and the way the field lies is worked out from the opening (`smallestBox`, `src/venues.geo.ts`) | ODbL 1.0, (c) OpenStreetMap contributors (https://www.openstreetmap.org/copyright): a derived database, kept in its own file and offered under the ODbL; a drawing made from it is a produced work and carries the credit (`VENUE_ATTRIBUTION`) |
+| `stadiums`: the outline of each stadium's building, the roof OpenStreetMap maps over it (its heights, the opening in it or its canopies), the pitches or the infield, and how the field lies, worked out from the opening, the pitches or the infield and the outline (`STADIUM_OSM`, `src/stadiums.osm.data.ts`) | OpenStreetMap, through the Overpass API: the closed way tagged with the stadium's Wikidata item and the multipolygon of its roof (BC Place), or the relation of the building, the roof parts and the pitches or the infield named in `scripts/stadiums.data.json` (Lumen Field, T-Mobile Park), read on 2026-10-20, with the raw answers kept in `data-sources/stadiums/2026-10-20/`; the outline is simplified to a metre, and the way the field lies is worked out from the opening, the pitches or the infield (`smallestBox`, `src/venues.geo.ts`; a ballpark's way out to centre field is the one of four where its fence lies inside the outline) | ODbL 1.0, (c) OpenStreetMap contributors (https://www.openstreetmap.org/copyright): a derived database, kept in its own file and offered under the ODbL; a drawing made from it is a produced work and carries the credit (`VENUE_ATTRIBUTION`) |
 | `stadiums`: each stadium's seats for each configuration, number of seating bowls, kind of roof and the size of its opening (`STADIUM_DATA`, `src/stadiums.data.ts`) | The item of Wikidata (the capacity P1083) and the English Wikipedia article of each stadium, at the revision cited below, in `data-sources/stadiums/2026-10-20/` as read; the facts are numbers and words of our own, with what was read in a few words | Wikidata's data is CC0; the facts read from the article are facts, with the article credited here (CC BY-SA 4.0) |
 | `atlas`: the clubs that played in each park, ground and arena (`tenants`: the club, its Wikidata item, its league, the years) | The occupants (P466) and home venues (P115) Wikidata lists for each place, with the start (P580) and end (P582) times of each statement, and the clubs' labels in English and Japanese, sports (P641) and leagues (P118), read with the Wikidata API and query service by `scripts/fetch-tenants.mjs` into `scripts/tenants.wikidata.json`; and the `tenants` line of the infobox of each place's English Wikipedia article, at the revision that `source.wikipedia` names for each club (155 articles, read on 2026-10-13) | Facts. Wikidata's data is CC0 (https://creativecommons.org/publicdomain/zero/1.0/), and the articles are CC BY-SA 4.0 as above; the names of clubs and the years are facts, no text, table or image of an article is used. Which clubs are tenants, and the league each is filed under, are our reading, in docs/atlas.md ("Tenants") |
 | `parks`: the walls, quirks, backstop, warning track, dugouts and extra points of a ballpark (`walls`, `quirks`, `backstop_ft`, `track_ft`, `dugouts`, `labels`) | The infobox and the text of the same English article of each park, at the same revision as its fence (the Japanese article for the heights of the walls of the parks of Japan): the height of the wall along a stretch of the fence and the seasons it stood, the hill, overhang, poles, bullpens, ivy and basket the text describes with figures, the infobox's backstop distance, the warning track's width, the sides of the dugouts, and the further distances the text gives (Wrigley Field's wells, Sportsman's Park's and Milwaukee County Stadium's markers). The stretch each figure covers and the angle of each extra point are our reading of the article's words | Facts. The articles are CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/); none of their text, tables or images is used |
@@ -436,11 +436,13 @@ The arenas of the NHL's Pacific and Central Divisions, read on 2026-10-20 (`pnpm
 
 ## The stadiums' sources
 
-BC Place, read on 2026-10-20 (`pnpm stadiums:fetch`; the files are in `data-sources/stadiums/2026-10-20/`: `osm-<stadium>.json` as Overpass returned it, `wikidata.json` and `wikipedia.json`). The outline of the building, its roof and the opening in it are OpenStreetMap's, ODbL 1.0, (c) OpenStreetMap contributors, and live in `src/stadiums.osm.data.ts` alone. The seats of each configuration, the bowls, the roof's kind and the size of its opening are in `src/stadiums.data.ts`, with what each cites. No seat map of a club, a ticket seller or a federation is read or copied, and no mark of a club, a league or a tournament is drawn.
+BC Place, Lumen Field and T-Mobile Park, read on 2026-10-20 (`pnpm stadiums:fetch`; the files are in `data-sources/stadiums/2026-10-20/`: `osm-<stadium>.json` as Overpass returned it, `wikidata.json` and `wikipedia.json`). The outline of the building, its roof and the opening in it are OpenStreetMap's, ODbL 1.0, (c) OpenStreetMap contributors, and live in `src/stadiums.osm.data.ts` alone. The seats of each configuration, the bowls, the roof's kind and the size of its opening are in `src/stadiums.data.ts`, with what each cites. No seat map of a club, a ticket seller or a federation is read or copied, and no mark of a club, a league or a tournament is drawn.
 
 | Stadium | Wikidata item | OpenStreetMap way | English article and revision |
 | --- | --- | --- | --- |
 | BC Place | Q612227 | way/24705904 | BC Place, 1372065649 |
+| Lumen Field | Q612736 | relation/2305831 | Lumen Field, 1373998493 |
+| T-Mobile Park | Q1193117 | relation/3008332 | T-Mobile Park, 1379419810 |
 
 ## The World Cups' articles
 

package/README.md

@@ -604,7 +604,7 @@ console.log(svg.includes("ky-cr-shell"), planVenue(venueById("climate-pledge-are
 
 ### A real stadium, and a district
 
-`stadium: "bc-place"` draws BC Place for football or soccer under its cable roof; `drawDistrict({ venues: ["bc-place", "rogers-arena"] })` puts venues at their real positions, to turn together in 3D ([districts](./docs/district.md)).
+`stadium: "bc-place"` draws BC Place for football or soccer under its cable roof, and Lumen Field and T-Mobile Park (`park`) likewise ([stadiums](./docs/stadiums.md)); `drawDistrict({ venues: ["bc-place", "rogers-arena"] })` puts venues at their real positions, tight as neighbours or spread as a city, to turn together in 3D ([districts](./docs/district.md)).
 
 <p align="center">
 <picture>
@@ -622,6 +622,26 @@ console.log(svg.includes("ky-cr-shell"), planVenue(venueById("climate-pledge-are
 <br><em>BC Place and Rogers Arena.</em>
 </p>
 
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-seattle-3d-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/district-seattle-3d-desk-light.webp" alt="Lumen Field and T-Mobile Park in 3D on one ground: a football stadium under canopies and a ballpark under its roof." width="640">
+</picture>
+<br><em>Seattle's SoDo.</em>
+</p>
+
+### A fly-through
+
+`mountFlythrough` flies one camera from a map to a real arena: the map falls to the city and the building, which rises into 3D, the roof lifts away, and the camera comes in to a seat, where a made-up play runs on the ice ([the fly-through](./docs/flythrough.md)).
+
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-flythrough-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-flythrough-desk-light.webp" alt="The fly-through, sped up: a map of North America with a pin on Seattle, the building's outline in the city, Climate Pledge Arena rising into 3D and turning, the roof lifting away, a seat's view across the rink and a play on the ice." width="640">
+</picture>
+<br><em>The fly-through to Climate Pledge Arena, sped up.</em>
+</p>
+
 ### Who judges where
 
 `drawJudging` puts each judo mat's officials by seat in the picture and in a chart ([judging](./docs/judging.md)).

package/dist/crowd.d.ts

@@ -110,8 +110,26 @@ export interface RealShell {
     }>;
     /** The way north points on the page, in degrees clockwise from the top; absent where the rink's real orientation is not known. */
     north?: number;
-    /** `fixed` is a lid; `saddle` a roof that rises at the two ends and falls at the two sides; `cable` a cable-supported roof with an opening over the surface, which a retractable fabric closes (BC Place's). */
-    roof: "fixed" | "saddle" | "cable";
+    /**
+     * `fixed` is a lid; `saddle` a roof that rises at the two ends and falls at the two sides; `cable` a cable-supported roof with an opening over the surface, which a retractable fabric closes (BC Place's);
+     * `canopy` roofs over some of the stands and leaves the field open (Lumen Field's, `canopies`); `panels` a retractable roof of sections over a ballpark's field and stands, far above its walls (T-Mobile Park's, `panels`).
+     */
+    roof: "fixed" | "saddle" | "cable" | "canopy" | "panels";
+    /** The height of the walls, in feet, where it is not the roof's rim (a ballpark's walls stand far below its roof). */
+    wall?: number;
+    /** A `canopy` roof's pieces: the outline of each in the drawing's frame, the height of its low edge (over the field's side) and how far it rises to its high edge (over the back of the stands), in feet. */
+    canopies?: {
+        ring: Pt[];
+        low: number;
+        rise: number;
+    }[];
+    /** A `panels` roof: the outline it covers when closed, its bottom and its top above the field in feet (rim and crown), and where its sections rest when it is open. */
+    panels?: {
+        cover: Pt[];
+        bottom: number;
+        top: number;
+        parked: Pt[];
+    };
     /** A `cable` roof: how far its crown (the edge of the opening) stands over its rim, in feet, and the opening, a polygon in the drawing's frame over the surface. */
     crown?: {
         rise: number;

package/dist/crowd.park.d.ts

@@ -14,6 +14,12 @@ export interface ParkInput {
     crowd: Crowd;
     /** The walls that have seats on top of them. */
     seatsOnWalls?: readonly WallSeats[];
+    /** How deep each band of stands is, in feet: the conventions of a drawing (60, 56 and 54) unless a real ballpark's seats set them (`planPark`). */
+    depths?: {
+        lower: number;
+        upper: number;
+        bleachers: number;
+    };
 }
 /** The stands of a ballpark, as data. */
 export declare function parkLayout(input: ParkInput): CrowdStands;

package/dist/crowd.park.js

@@ -91,16 +91,16 @@ export function parkLayout(input) {
             aisles: pieces.flatMap((points) => aislesOf(points)),
         });
     };
-    const lowerDepth = 60;
+    const lowerDepth = input.depths?.lower ?? 60;
     const walk = 7;
-    const upperDepth = 56;
+    const upperDepth = input.depths?.upper ?? 56;
     add("lower", "lower", [band(inner, nI, 0, lowerDepth)], 0, lowerDepth, [4, 40], 1);
     add("upper", "upper", [band(inner, nI, lowerDepth + walk, lowerDepth + walk + upperDepth)], lowerDepth + walk, lowerDepth + walk + upperDepth, [52, 104], 0.88);
     const concourses = [{ region: { kind: "poly", points: band(inner, nI, lowerDepth - 0.5, lowerDepth + walk + 0.5) }, hole: null }];
     // The outfield: bleachers right behind the fence, radially from home plate, but for a gap at the batter's eye in the horseshoe; and, where the park has seats on top of a wall,
     // a band of them along the wall at its height.
     const wall = 12;
-    const depth = 54;
+    const depth = input.depths?.bleachers ?? 54;
     if (shape !== "grandstand") {
         const nF = fence.map((p) => ({ n: [p[0] / (dist(p) || 1), p[1] / (dist(p) || 1)], k: 1 }));
         const eye = (i) => Math.abs(fence[i][0]) < pole * 0.07 && shape === "horseshoe";

package/dist/district.d.ts

@@ -33,7 +33,7 @@ export interface DistrictMember {
     /** The key of the venue and the configuration, unique in a district: `rogers-arena`, `bc-place:soccer`. */
     key: string;
     id: string;
-    kind: "arena" | "stadium";
+    kind: "arena" | "stadium" | "park";
     config?: StadiumConfigId;
     /** The name in both languages. */
     name: {
@@ -132,7 +132,7 @@ export declare function nestedDrawing(svg: string): {
     };
     styles: string[];
 };
-/** The middle of a venue's surface in its own drawing's frame (the box the stands are laid round), which its drawing is turned about. */
+/** The point of a venue's own drawing the district puts at the venue's place on the ground and turns it about: the middle of its surface (the box the stands are laid round), or home plate, the origin of a ballpark's frame. */
 export declare function surfaceCentre(options: SurfaceOptions): Pt;
 /** A length in metres worth drawing as a scale: the largest of 50, 100, 200, 500, 1000, 2000, 5000 that is not more than a fifth of the plan's width. */
 export declare function scaleOf(view: {

package/dist/district.js

@@ -8,8 +8,7 @@ import { crowdStands, drawKyogijo } from "./draw.js";
 import { FEET_PER_METRE } from "./geometry.js";
 import { KYOGIJO_STRINGS } from "./strings.js";
 import { esc, hash } from "./format.js";
-import { groundNameIn } from "./grounds.js";
-import { STADIUM_IDS, groundOfStadium, stadiumById, stadiumSeats } from "./stadiums.js";
+import { STADIUM_IDS, stadiumById, stadiumConfigs, stadiumFrameHeading, stadiumKind, stadiumNames, stadiumSeats } from "./stadiums.js";
 import { VENUE_ATTRIBUTION, VENUE_IDS, venueById } from "./venues.js";
 import { hullOf, metresFrom, middleOf, smallestBox } from "./venues.geo.js";
 export const DISTRICT_MODES = ["neighbours", "city"];
@@ -31,19 +30,19 @@ const venueMember = (venue, language) => {
     };
 };
 const stadiumMember = (stadium, config, language) => {
-    const ground = groundOfStadium(stadium);
+    const park = stadiumKind(stadium) === "park";
     return {
         key: `${stadium.id}:${config}`,
         id: stadium.id,
-        kind: "stadium",
+        kind: park ? "park" : "stadium",
         config,
-        name: { en: groundNameIn(ground, undefined, "en"), ja: groundNameIn(ground, undefined, "ja") },
+        name: stadiumNames(stadium),
         ring: stadium.osm.ring,
         centre: stadium.osm.axis.centre,
-        heading: stadium.osm.axis.heading,
+        heading: stadiumFrameHeading(stadium),
         basis: stadium.osm.axis.basis,
         seats: stadiumSeats(stadium, config),
-        options: { sport: config, stadium: stadium.id, crowd: { real: true }, language },
+        options: park ? { sport: "mlb", park: stadium.id, crowd: { real: true }, language } : { sport: config, stadium: stadium.id, crowd: { real: true }, language },
     };
 };
 /** Every key a district can be asked for: the arenas of `VENUES` and the stadiums of `STADIUMS`. */
@@ -70,9 +69,9 @@ export function districtMember(input, language = "en") {
     }
     const stadium = stadiumById(id);
     if (stadium !== undefined) {
-        const config = (named ?? Object.keys(stadium.configs)[0]);
+        const config = (named ?? stadiumConfigs(stadium)[0]);
         if (stadium.configs[config] === undefined)
-            throw new Error(`${id} has no configuration ${String(named)}: ${Object.keys(stadium.configs).join(", ")}`);
+            throw new Error(`${id} has no configuration ${String(named)}: ${stadiumConfigs(stadium).join(", ")}`);
         return stadiumMember(stadium, config, language);
     }
     throw new Error(`no venue ${String(id)}: the venues are ${DISTRICT_IDS.join(", ")}`);
@@ -150,8 +149,8 @@ export const KYOGIJO_DISTRICT_STYLE = `
 .ky-district .ky-dist-text{fill:var(--ky-dist-ink);font-family:var(--ky-font,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif);font-weight:600;paint-order:stroke;stroke:var(--ky-dist-halo);stroke-linejoin:round}`;
 const ROOT = /^<svg([^>]*)>/;
 const VIEWBOX = /viewBox="(-?[\d.]+) (-?[\d.]+) ([\d.]+) ([\d.]+)"/;
-/** The north arrow of a venue's drawing and the apron under it: a district has one of each of its own. */
-const withoutOwn = (svg) => svg.replace(/<rect class="ky-apron"[^>]*\/>/, "").replace(/<path class="ky-cr-north"[^>]*\/>/, "").replace(/<path class="ky-cr-north-n"[^>]*\/>/, "");
+/** The north arrow of a venue's drawing and the apron (a ballpark's foul ground) under it: a district has one of each of its own. */
+const withoutOwn = (svg) => svg.replace(/<rect class="ky-(?:apron|foul)"[^>]*\/>/, "").replace(/<path class="ky-cr-north"[^>]*\/>/, "").replace(/<path class="ky-cr-north-n"[^>]*\/>/, "");
 /**
  * A venue's drawing as a part of the district's: its root made a nested `svg` that keeps the class, the sport and the colours the drawing's stylesheet reads, its box laid in its own frame (so that the group's turn
  * and shift put it in place), and its title, description, apron, arrow and stylesheet taken out (the stylesheet is given back in `styles`).
@@ -175,8 +174,10 @@ export function nestedDrawing(svg) {
     return { markup: `<svg${keep} x="${x}" y="${y}" width="${w}" height="${h}" viewBox="${x} ${y} ${w} ${h}" aria-hidden="true" focusable="false">${body}</svg>`, box: { x, y, w, h }, styles };
 }
 const num = (value) => String(Math.round(value * 100) / 100);
-/** The middle of a venue's surface in its own drawing's frame (the box the stands are laid round), which its drawing is turned about. */
+/** The point of a venue's own drawing the district puts at the venue's place on the ground and turns it about: the middle of its surface (the box the stands are laid round), or home plate, the origin of a ballpark's frame. */
 export function surfaceCentre(options) {
+    if (options.sport === "mlb")
+        return [0, 0];
     const stands = crowdStands(options);
     if (stands === undefined)
         throw new Error("a district's venue has a crowd");

package/dist/draw.js

@@ -11,7 +11,7 @@ import { FOOTBALL } from "./geometry.js";
 import { renderLayers } from "./layers.js";
 import { arenaById, arenaCourtIn, arenaNameIn, arenaOfficialName, arenaRinkIn } from "./arenas.js";
 import { venueById, venueBowl } from "./venues.js";
-import { groundOfStadium, stadiumBowl, stadiumById, stadiumConfigOf, stadiumSeats } from "./stadiums.js";
+import { planPark, stadiumBowl, stadiumById, stadiumConfigOf, stadiumKind, stadiumNames, stadiumSeats } from "./stadiums.js";
 import { groundById, groundNameIn, groundOfficialName } from "./grounds.js";
 import { BOARD, courtFor, hasSetsBoard, isNetLeague, isNetSport } from "./court.js";
 import { cricketBoardMarkup } from "./cricket.board.js";
@@ -419,6 +419,17 @@ function parkFence(o) {
     }
     return { points: fenceFor(parkById(o.park), feetFence(o.fence, unit), o.year), backstop: MLB_DIAMOND.backstop };
 }
+/**
+ * The real stadium (and the configuration) the options draw, where `crowd: { real: true }` asks for one: a football field (`cfl`, `nfl`) or a soccer pitch in the stadium named by `stadium` or by the `ground`, a baseball field in
+ * the park named by `park`; none for a league of the caller's own, a stadium that has no such configuration, or a sport with none.
+ */
+function realStadiumOf(o, sport, real) {
+    const config = real ? stadiumConfigOf(sport) : undefined;
+    if (config === undefined || chooseLeague(o).league !== undefined)
+        return undefined;
+    const stadium = stadiumById(config === "mlb" ? o.park : o.stadium ?? o.ground);
+    return stadium !== undefined && stadium.configs[config] !== undefined && (stadiumKind(stadium) === "park") === (config === "mlb") ? { stadium, config } : undefined;
+}
 /** The stands round a surface, laid out from its box (or, for a ballpark, from its fence). */
 function standsFor(o, surface, crowd) {
     const { sport } = chooseLeague(o);
@@ -428,7 +439,12 @@ function standsFor(o, surface, crowd) {
         // The walls that have seats on top of them: the ones the package knows (Fenway Park's Green Monster), or, asked for, every wall of 25 feet or more.
         const park = parkById(o.park);
         const walls = park === undefined || crowd.wallSeats === false ? [] : parkWallsIn(park, o.year).filter((w) => (crowd.wallSeats === true ? w.height_ft >= 25 : w.label !== undefined && WALL_SEATS[park.id] === w.label));
-        return parkLayout({ fence: fenceOutline(points), backstop, crowd, seatsOnWalls: walls.map((w) => ({ from: w.from, to: w.to, height: w.height_ft })) });
+        const input = { fence: fenceOutline(points), backstop, crowd, seatsOnWalls: walls.map((w) => ({ from: w.from, to: w.to, height: w.height_ft })) };
+        // A real ballpark: the building it stands in, the way home plate faces and a roof, with its stands as deep as its seats need (no visitors' block: no source places one).
+        const real = realStadiumOf(o, sport, crowd.real);
+        if (real !== undefined)
+            return planPark(real.stadium, { ...input, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd }).stands;
+        return parkLayout(input);
     }
     // An arena's real venue: the building it stands in and a bowl fitted to it, where the package has one for the arena and no league of the caller's own sets the surface.
     const box = surface.whole ?? surface.box ?? { x: 0, y: 0, w: 100, h: 100 };
@@ -437,10 +453,9 @@ function standsFor(o, surface, crowd) {
     if (venue !== undefined)
         return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: venueBowl(venue, box) });
     // A football field or a soccer pitch in a real stadium: its building and a bowl of the configuration's seats.
-    const config = crowd.real ? stadiumConfigOf(sport) : undefined;
-    const stadium = config !== undefined && chooseLeague(o).league === undefined ? stadiumById(o.stadium ?? o.ground) : undefined;
-    if (stadium !== undefined && config !== undefined)
-        return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: stadiumBowl(stadium, config, box) });
+    const real = realStadiumOf(o, sport, crowd.real);
+    if (real !== undefined)
+        return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: stadiumBowl(real.stadium, real.config, box) });
     // A dojo's crowd sits in its gallery, from the room's balcony data (in feet here); the arenas (the Budokan, the Kokugikan) keep their bowls.
     const hall = sport === "dojo" ? dojoGallery(o) : undefined;
     const gallery = hall === undefined ? undefined : { offset: hall.offset / 0.3048, depth: hall.depth / 0.3048, height: [hall.height[0] / 0.3048, hall.height[1] / 0.3048], rows: hall.rows, aisles: hall.aisles };
@@ -733,10 +748,10 @@ export function describe(o) {
     const realCrowd = o.crowd === undefined || o.crowd === false ? undefined : resolveCrowd(o.crowd);
     const venue = sport === "nhl" && league === undefined && realCrowd?.real === true ? venueById(o.arena) : undefined;
     const realLine = venue === undefined || arenaName === undefined ? "" : `${gap}${fill(words.said.real, { arena: arenaName, seats: String(venue.seats.hockey), tiers: String(venue.tiers.count) })}${gap}${words.said[venue.osm.axis.basis === "mapped" ? "realMapped" : venue.osm.axis.basis === "building" ? "realBuilding" : "realNone"]}`;
-    const config = realCrowd?.real === true ? stadiumConfigOf(sport) : undefined;
-    const realStadium = config !== undefined && league === undefined ? stadiumById(o.stadium ?? o.ground) : undefined;
-    const stadiumLine = realStadium === undefined || config === undefined ? "" : `${gap}${fill(words.said.stadium, { stadium: groundNameIn(groundOfStadium(realStadium), o.year, language), seats: String(stadiumSeats(realStadium, config)), tiers: String(realStadium.tiers.count) })}${gap}${words.said[realStadium.osm.axis.basis === "opening" ? "stadiumOpening" : realStadium.osm.axis.basis === "building" ? "stadiumBuilding" : "stadiumNone"]}`;
-    const parkLine = (parkName === undefined ? `${groundLine}${halfLine}${arenaLine}${realLine}${stadiumLine}` : `${gap}${fill(words.said.park, { park: parkName })}${officially(parkOfficial)}${ballpark === undefined ? "" : ballparkSentences(ballpark).map((line) => `${gap}${line}`).join("")}`) + (special === undefined ? "" : `${gap}${special.text}`);
+    const real = realStadiumOf(o, sport, realCrowd?.real === true);
+    const stadiumKey = (basis) => (basis === "opening" ? "stadiumOpening" : basis === "pitch" ? "stadiumPitch" : basis === "infield" ? "stadiumInfield" : basis === "building" ? "stadiumBuilding" : "stadiumNone");
+    const stadiumLine = real === undefined ? "" : `${gap}${fill(real.config === "mlb" ? words.said.stadiumPark : words.said.stadium, { stadium: stadiumNames(real.stadium)[language], seats: String(stadiumSeats(real.stadium, real.config)), tiers: String(real.stadium.tiers.count) })}${gap}${words.said[stadiumKey(real.stadium.osm.axis.basis)]}`;
+    const parkLine = (parkName === undefined ? `${groundLine}${halfLine}${arenaLine}${realLine}${stadiumLine}` : `${gap}${fill(words.said.park, { park: parkName })}${officially(parkOfficial)}${ballpark === undefined ? "" : ballparkSentences(ballpark).map((line) => `${gap}${line}`).join("")}${stadiumLine}`) + (special === undefined ? "" : `${gap}${special.text}`);
     // A drawing of a past season says which: the markings are those of that season.
     const dated = typeof o.year === "number" && Number.isFinite(o.year);
     const eraLine = dated && league !== undefined

package/dist/flythrough-entry.d.ts

@@ -3,6 +3,7 @@ export type { Flythrough, FlythroughOptions, FlythroughSettings, FlythroughStart
 export { CHANNELS, PACE, RAMP, STAGE_IDS, cameraAt, flightPlan, foldTime, glide, glideSeconds, mainView, mapBox, mapFrame, monotoneSlopes, nextRate, stageAt, startOf, stagesOf } from "./flythrough.path.ts";
 export type { Camera, Channel, Flight, FlightInput, Keyframe, MapFrame, StageId } from "./flythrough.path.ts";
 export { flythroughMarkup, graticuleMarkup, mapMarkup } from "./flythrough.markup.ts";
+export { ILLUSTRATIVE_PLAY, PLAY_LOOK, PLAY_PERIOD, PLAY_SECONDS, PLAY_STILL, playAlpha, playMarkup, playMoment } from "./flythrough.game.ts";
 export { FLYTHROUGH_STYLE } from "./flythrough.style.ts";
 export { FLYTHROUGH_WORDS } from "./flythrough.words.ts";
 export type { FlythroughWords } from "./flythrough.words.ts";

package/dist/flythrough-entry.js

@@ -2,5 +2,6 @@
 export { mountFlythrough } from "./flythrough.dom.js";
 export { CHANNELS, PACE, RAMP, STAGE_IDS, cameraAt, flightPlan, foldTime, glide, glideSeconds, mainView, mapBox, mapFrame, monotoneSlopes, nextRate, stageAt, startOf, stagesOf } from "./flythrough.path.js";
 export { flythroughMarkup, graticuleMarkup, mapMarkup } from "./flythrough.markup.js";
+export { ILLUSTRATIVE_PLAY, PLAY_LOOK, PLAY_PERIOD, PLAY_SECONDS, PLAY_STILL, playAlpha, playMarkup, playMoment } from "./flythrough.game.js";
 export { FLYTHROUGH_STYLE } from "./flythrough.style.js";
 export { FLYTHROUGH_WORDS } from "./flythrough.words.js";

package/dist/flythrough.dom.js

@@ -5,6 +5,7 @@
 import { arenaById, arenaNameIn } from "./arenas.js";
 import { STAGE_IDS, cameraAt, coverSide, flightPlan, foldTime, glide, glideSeconds, lengthWords, mainView, mapBox, mapFrame, nextRate, niceLength, stageAt, startOf, stagesOf, } from "./flythrough.path.js";
 import { flythroughMarkup, graticuleMarkup, gridPath, mapMarkup, stageWords } from "./flythrough.markup.js";
+import { PLAY_STILL, playAlpha, playMarkup, playMoment } from "./flythrough.game.js";
 import { FLYTHROUGH_WORDS, say } from "./flythrough.words.js";
 import { LENS } from "./turn.camera.js";
 import { mountKyogijoTurn } from "./turn.dom.js";
@@ -84,6 +85,7 @@ export function mountFlythrough(host, options, settings = {}) {
     const scaleBar = root.querySelector(".kf-scale-bar");
     const scaleText = root.querySelector(".kf-scale-text");
     const caption = root.querySelector(".kf-caption");
+    const badge = root.querySelector(".kf-badge");
     const live = root.querySelector(".kf-live");
     const media = win?.matchMedia?.("(prefers-reduced-motion: reduce)");
     const calm = () => settings.motion === "none" || (settings.motion !== "smooth" && media?.matches === true);
@@ -92,8 +94,25 @@ export function mountFlythrough(host, options, settings = {}) {
     let turn;
     // The settings object is kept: the view reads its `lens` at every paint, and the path shortens the lens as the camera comes into the bowl.
     const turnSettings = { preset: "overhead", controls: false, venue: { roof: true }, motion: "none", id: `${id}-turn`, lens: LENS };
-    if (stageList.some((one) => one === "arena" || one === "bowl" || one === "rink"))
+    if (stageList.some((one) => one === "arena" || one === "bowl" || one === "rink" || one === "game"))
         turn = mountKyogijoTurn(turnHost, drawing, turnSettings);
+    // ---- The game: a plane that lies on the floor of the 3D arena, with the play's dots drawn on it by the replay's own layers. It takes the floor's own transform after every paint, and stands in the same layer of the stack
+    // as the floor, above it and under everything that stands up (the glass, the boards, the stands), so that what is in front of the ice hides the play as it hides the ice. ----
+    let gameEl;
+    let gameLayers = null;
+    let floorEl = null;
+    if (turn?.mode === "3d" && stageList.includes("game")) {
+        const world = turnHost.querySelector(".ky-turn-world");
+        floorEl = world?.querySelector(".ky-turn-floor") ?? null;
+        const box = turn.svg()?.getAttribute("viewBox");
+        if (world !== null && floorEl !== null && box !== null && box !== undefined) {
+            gameEl = doc.createElement("div");
+            gameEl.className = "kf-game";
+            gameEl.innerHTML = `<svg class="kyogijo ky-nhl" data-sport="nhl" xmlns="http://www.w3.org/2000/svg" viewBox="${box}" aria-hidden="true" focusable="false"${options.theme === undefined ? "" : ` data-theme="${options.theme}"`}><g class="kf-game-layers"></g></svg>`;
+            floorEl.after(gameEl);
+            gameLayers = gameEl.querySelector("g.kf-game-layers");
+        }
+    }
     // ---- The site plan: the building's outline and the rink, in the drawing's own feet; the sheet under it is the floor's. ----
     const plan = planVenue(venue);
     const rink = venueRink(venue);
@@ -169,8 +188,8 @@ export function mountFlythrough(host, options, settings = {}) {
             el.style.setProperty(prop, value);
     };
     const num = (value, places = 2) => String(Math.round(value * 10 ** places) / 10 ** places);
-    /** Put a camera on the screen. */
-    const render = (cam) => {
+    /** Put a camera on the screen; `clockAt` is the seconds the clock has run, from which the play's moment is worked out. */
+    const render = (cam, clockAt) => {
         current = cam;
         const W = width;
         const H = height;
@@ -217,6 +236,27 @@ export function mountFlythrough(host, options, settings = {}) {
                 turn.set({ yaw: cam.yaw, pitch: cam.pitch, zoom: Math.exp(cam.logZoom) }, false);
             }
         }
+        // The play on the ice, drawn again a thirtieth of a second at a time, and the label that says it is made up.
+        const gameAt = startOf(flight, "game");
+        const gameShown = cam.game > 0.003 && live3d && gameEl !== undefined && floorEl !== null && gameAt !== undefined;
+        if (gameEl !== undefined)
+            put("game", gameEl, "visibility", gameShown ? "visible" : "hidden");
+        put("badge", badge, "visibility", gameShown ? "visible" : "hidden");
+        if (gameShown && gameEl !== undefined && floorEl !== null && gameAt !== undefined) {
+            const moment = playMoment(clockAt - gameAt);
+            const alpha = cam.game * playAlpha(moment);
+            put("game", gameEl, "opacity", num(alpha, 3));
+            put("badge", badge, "opacity", num(alpha, 3));
+            put("game", gameEl, "width", floorEl.style.width);
+            put("game", gameEl, "height", floorEl.style.height);
+            // The 3D view has just been painted: the plane takes the floor's place.
+            gameEl.style.transform = floorEl.style.transform;
+            const frame = String(Math.round(moment * 30));
+            if (written["game:frame"] !== frame && gameLayers !== null) {
+                written["game:frame"] = frame;
+                gameLayers.innerHTML = playMarkup(moment, { id: `${id}-play`, language });
+            }
+        }
         // The pin, the scale bar (true on the map and the plan, not in perspective) and the stage's words.
         put("pin", pin, "visibility", mapOn ? "visible" : "hidden");
         put("pin", pin, "opacity", num(cam.map, 3));
@@ -253,6 +293,8 @@ export function mountFlythrough(host, options, settings = {}) {
     };
     // ---- The clock. ----
     let time = 0;
+    /** The seconds the clock has run, not folded back by the turn's period as `time` is: the play's moment is worked out from it, so that the play does not jump when the turn comes round. */
+    let clock = 0;
     let rate = 0;
     let playing = false;
     let journey;
@@ -276,7 +318,7 @@ export function mountFlythrough(host, options, settings = {}) {
     const show = (at, announce = true) => {
         time = foldTime(flight, at);
         const cam = cameraAt(flight, time);
-        render(cam);
+        render(cam, clock);
         enter(stageAt(flight, time), announce);
     };
     const stopLoop = () => {
@@ -300,12 +342,14 @@ export function mountFlythrough(host, options, settings = {}) {
             journey.elapsed += dt;
             const done = journey.elapsed >= journey.seconds;
             time = done ? journey.to : glide(journey.from, journey.to, journey.elapsed, journey.seconds);
+            clock = time;
             if (done)
                 journey = undefined;
         }
         else {
             rate = nextRate(rate, playing, dt);
             time += rate * dt * speed;
+            clock += rate * dt * speed;
         }
         show(time, true);
         if (busy())
@@ -334,7 +378,8 @@ export function mountFlythrough(host, options, settings = {}) {
     };
     const stillStage = (to, announce = true) => {
         time = startOf(flight, to) ?? 0;
-        render(flight.rest[to]);
+        clock = time;
+        render(flight.rest[to], to === "game" ? time + PLAY_STILL : time);
         enter(to, announce);
     };
     const scheduleStill = () => {
@@ -508,7 +553,8 @@ export function mountFlythrough(host, options, settings = {}) {
             stopLoop();
             journey = undefined;
             rate = 0;
-            show(Math.max(0, seconds), false);
+            clock = Math.max(0, seconds);
+            show(clock, false);
         },
         destroy() {
             if (!alive)

package/dist/flythrough.game.d.ts

@@ -0,0 +1,36 @@
+import type { ReplayLook, ReplayTimeline } from "./replay.types.ts";
+import type { Language } from "./types.ts";
+/** A place on the rink, in feet from its top left corner as the drawing has it wide: along the rink (0 to 200) and across it (0 to 85). */
+type P = readonly [number, number];
+/** A skater's way: where he is at a time (seconds), from one waypoint to the next. */
+type Way = readonly (readonly [number, number, number])[];
+/** How long the play runs, and how long it is held at the end (the goal's marks still on the ice) before it starts again. */
+export declare const PLAY_SECONDS = 10;
+export declare const PLAY_HOLD = 1.5;
+/** The seconds of the whole run, the play and the hold: what the loop's period is. */
+export declare const PLAY_PERIOD: number;
+/** The moment a still of the play (for a reader who prefers reduced motion) is taken at: the shot has just been taken. */
+export declare const PLAY_STILL = 6.4;
+/** The seconds the dots fade in and out at the ends of a run, so that the play does not jump back to its start in view. */
+export declare const PLAY_FADE = 0.5;
+/** A point of a way at a time: a cubic through the waypoints with the slope between the neighbours at each, so that a skater never stops or turns on a corner. */
+export declare function at(way: Way, t: number): P;
+/** The puck at a time. */
+export declare function puckAt(t: number): P;
+/** The play, as a replay's timeline in the surface's own feet. It is made once. */
+export declare const ILLUSTRATIVE_PLAY: ReplayTimeline;
+/** How the play is drawn: a short trail behind the puck, the dots large enough to see from the stands, events that stay a moment. */
+export declare const PLAY_LOOK: ReplayLook;
+/** Where a moment of a run is in the play, looping: `seconds` after the run began, brought into one period. */
+export declare const playMoment: (seconds: number) => number;
+/** How much of the play shows at a moment of a run: it fades in at the start and out at the end of each run. 0 to 1. */
+export declare function playAlpha(moment: number): number;
+/**
+ * The play at a moment of a run, as the layers' SVG (a `g.ky-layers` in the drawing's own feet, to go inside an `svg.kyogijo` with the floor's viewBox): the dots with their numbers, the puck and its trail, and the events that are on
+ * the ice at that time, drawn by the replay's own layers. The same moment always gives the same string.
+ */
+export declare function playMarkup(moment: number, options: {
+    id: string;
+    language?: Language;
+}): string;
+export {};