@johnmorrisdotca/kyogijo-stadiums 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -7,6 +7,14 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.28.0] - 2026-10-20
+
+### Added
+
+- **The fly-through goes into the bowl** (`bowl` and `rink`, two stages after `arena`): the roof lifts away, and the camera comes in over the stands, tipping lower and nearer and through a shorter lens, to a seat's viewpoint inside the bowl, from where the rink turns. The 3D arena's own `lens` setting does it (a long lens from outside, about 1 from the seat, so that the eye is inside the building and the bowl has a real perspective), and the roof is dissolved with a CSS `filter: opacity()`, so that it composes with the 3D view's own cutting away of the walls. The seat is a place and a height of our own choosing (a pitch, a zoom and a lens, `seat` of `flightPlan`), said to be so, never a real seat; the bowl's words give the venue's seats and tiers.
+- **The camera has two more channels** (`logLens`, `roof`), still one path with no jumps: the turn slows from the arena's 12 degrees a second to the rink's 8 and never stops or reverses; the lens, the roof, the zoom and the tip change in one direction only on the way in. `flightPlan` takes `seat` and `rinkTurn`; `PACE` has the seconds of each part; the path now ends on the rink turning.
+- Tests for the way in (nothing reverses, the seat is reached where the rink stage starts, the stage stills show the roof lifted and the seat's view) over fourteen lists of stages, and in a real browser the four corners of the rink are followed on the screen at 30 frames a second, from outside and from the seat: each moves a little a frame and none falls behind the eye.
+
 ## [0.27.0] - 2026-10-20
 
 ### Added

package/dist/district.d.ts

@@ -112,7 +112,7 @@ export declare const DISTRICT_MARGIN: Readonly<Record<DistrictMode, number>>;
  * import { planDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
  * const plan = planDistrict({ venues: ["bc-place", "rogers-arena"] });
  * console.log(plan.mode, plan.members.length, Math.round(plan.between[0].metres));
- * // neighbours 2 264
+ * // neighbours 2 380
  * ```
  */
 export declare function planDistrict(options: DistrictOptions): DistrictPlan;

package/dist/district.js

@@ -97,7 +97,7 @@ const haversine = (a, b) => {
  * import { planDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
  * const plan = planDistrict({ venues: ["bc-place", "rogers-arena"] });
  * console.log(plan.mode, plan.members.length, Math.round(plan.between[0].metres));
- * // neighbours 2 264
+ * // neighbours 2 380
  * ```
  */
 export function planDistrict(options) {

package/dist/flythrough.dom.js

@@ -6,6 +6,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 { FLYTHROUGH_WORDS, say } from "./flythrough.words.js";
+import { LENS } from "./turn.camera.js";
 import { mountKyogijoTurn } from "./turn.dom.js";
 import { arenaOfVenue, planVenue, venueById, venueOrientation, venueRink } from "./venues.js";
 /**
@@ -43,7 +44,7 @@ export function mountFlythrough(host, options, settings = {}) {
         }
     })();
     const place = `${arena.city}, ${region}`;
-    const values = { arena: name, place };
+    const values = { arena: name, place, seats: venue.seats.hockey.toLocaleString(language), tiers: venue.tiers.count };
     const wanted = (options.stages ?? STAGE_IDS).filter((stage, i, all) => STAGE_IDS.includes(stage) && all.indexOf(stage) === i);
     const stageList = STAGE_IDS.filter((stage) => wanted.includes(stage));
     if (stageList.length === 0)
@@ -68,7 +69,7 @@ export function mountFlythrough(host, options, settings = {}) {
         frame = { at: [0, 0], metresX: 1, metresY: 1 };
     }
     const mapFrameNow = frame;
-    host.innerHTML = flythroughMarkup({ id, language, theme: options.theme, arena: name, place, stages: stageList, map: mapSvg, mapCredit: chizu, controls: settings.controls });
+    host.innerHTML = flythroughMarkup({ id, language, theme: options.theme, arena: name, place, stages: stageList, map: mapSvg, mapCredit: chizu, controls: settings.controls, seats: values.seats, tiers: values.tiers });
     const root = host.querySelector(".kf");
     const stage = root.querySelector(".kf-stage");
     const mapLayer = root.querySelector(".kf-map");
@@ -89,8 +90,10 @@ export function mountFlythrough(host, options, settings = {}) {
     // ---- The 3D arena, from above to begin with: the view the path hands over at. ----
     const drawing = { sport: "nhl", arena: venue.id, crowd: { real: true }, language, ...(options.theme === undefined ? {} : { theme: options.theme }) };
     let turn;
-    if (stageList.includes("arena"))
-        turn = mountKyogijoTurn(turnHost, drawing, { preset: "overhead", controls: false, venue: { roof: true }, motion: "none", id: `${id}-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"))
+        turn = mountKyogijoTurn(turnHost, drawing, turnSettings);
     // ---- 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);
@@ -126,6 +129,9 @@ export function mountFlythrough(host, options, settings = {}) {
         if (turn !== undefined && floor !== null) {
             // Measure the arena seen from straight above, as the 3D view lays it out in this container: where the rink stands and how big a foot is.
             const was = turn.view();
+            const lens = turnSettings.lens;
+            // The hand-over is seen from straight above through the usual long lens, whatever the lens is now.
+            turnSettings.lens = LENS;
             turn.set({ yaw: 0, pitch: 0, zoom: 1 }, false);
             const box = floor.getBoundingClientRect();
             // The stage's own area, inside its border: the layers are laid out in it.
@@ -141,6 +147,7 @@ export function mountFlythrough(host, options, settings = {}) {
                 sheet = { x: vb.x, y: vb.y, w: vb.width, h: vb.height };
                 drawPlan();
             }
+            turnSettings.lens = lens;
             turn.set(was, false);
         }
         const startSpan = start?.span ?? 9000000;
@@ -201,9 +208,12 @@ export function mountFlythrough(host, options, settings = {}) {
         put("3d", turnHost, "visibility", live3d ? "visible" : "hidden");
         if (live3d && turn !== undefined) {
             put("3d", turnHost, "opacity", num(cam.arena, 3));
-            const view = `${num(cam.yaw, 3)}|${num(cam.pitch, 3)}|${num(cam.logZoom, 4)}`;
+            put("3d", turnHost, "--kf-roof", num(cam.roof, 3));
+            put("3d", turnHost, "@data-roof", cam.roof > 0.004 ? "1" : "0");
+            const view = `${num(cam.yaw, 3)}|${num(cam.pitch, 3)}|${num(cam.logZoom, 4)}|${num(cam.logLens, 4)}`;
             if (written["3d:view"] !== view) {
                 written["3d:view"] = view;
+                turnSettings.lens = Math.exp(cam.logLens);
                 turn.set({ yaw: cam.yaw, pitch: cam.pitch, zoom: Math.exp(cam.logZoom) }, false);
             }
         }

package/dist/flythrough.markup.d.ts

@@ -25,6 +25,9 @@ export interface MarkupInput {
     /** The arena's name, and where it is (`Anaheim, United States`), in the page's language. */
     arena: string;
     place: string;
+    /** The venue's seats for ice hockey and its seating tiers, in the words of the bowl's stage (`{seats}`, `{tiers}`). */
+    seats?: number | string;
+    tiers?: number | string;
     /** The stages flown, in order. */
     stages: readonly StageId[];
     /** The drawn map (already through `mapMarkup`), and whether it is chizu's (so that the credit names it). */
@@ -38,6 +41,8 @@ export interface MarkupInput {
 export declare const stageWords: (language: Language, stage: StageId, values: {
     arena: string;
     place: string;
+    seats?: number | string;
+    tiers?: number | string;
 }) => {
     name: string;
     text: string;

package/dist/flythrough.markup.js

@@ -63,7 +63,7 @@ export function controlsMarkup(words, stages, current, playing) {
 /** The whole fly-through as markup. */
 export function flythroughMarkup(input) {
     const words = FLYTHROUGH_WORDS[input.language];
-    const values = { arena: input.arena, place: input.place };
+    const values = { arena: input.arena, place: input.place, seats: input.seats, tiers: input.tiers };
     const first = input.stages[0];
     const intro = stageWords(input.language, first, values);
     const label = say(words.title, values);

package/dist/flythrough.path.d.ts

@@ -1,14 +1,15 @@
 /** The stages of the fly-through, in order. */
-export type StageId = "map" | "city" | "arena";
+export type StageId = "map" | "city" | "arena" | "bowl" | "rink";
 /** The stages that exist, in the order of the path. */
 export declare const STAGE_IDS: readonly StageId[];
 /** The channels of the camera. */
-export declare const CHANNELS: readonly ["logSpan", "ax", "ay", "north", "map", "site", "arena", "yaw", "pitch", "logZoom"];
+export declare const CHANNELS: readonly ["logSpan", "ax", "ay", "north", "map", "site", "arena", "yaw", "pitch", "logZoom", "logLens", "roof"];
 export type Channel = (typeof CHANNELS)[number];
 /**
  * Where the camera is. `logSpan` is the natural logarithm of the metres the container's width shows (so that a zoom is a straight line); `ax` and `ay` are where the arena stands on the screen, as a
  * share of the width and of the height from the middle; `north` is how far the map and the site plan are turned, in degrees clockwise (the rink's long side lies along the page when it reaches the
- * venue's); `map`, `site` and `arena` are how much of the map, of the site plan and of the 3D arena shows (0 to 1); `yaw`, `pitch` and `logZoom` are the 3D view's turn and tip in degrees and the natural logarithm of its zoom.
+ * venue's); `map`, `site` and `arena` are how much of the map, of the site plan and of the 3D arena shows (0 to 1); `yaw`, `pitch` and `logZoom` are the 3D view's turn and tip in degrees and the natural logarithm of its zoom;
+ * `logLens` is the natural logarithm of the eye's lens, as a multiple of the stage's longer side (a long lens looks from far outside, a short one from inside the bowl) and `roof` is how much of the building's roof shows (0 to 1).
  */
 export type Camera = Record<Channel, number>;
 /** What the path needs to know of the page and the venue. */
@@ -33,6 +34,14 @@ export interface FlightInput {
     };
     /** Degrees a second the arena turns at, once it is turning: 12 by default. */
     turn?: number;
+    /** The seat's viewpoint the camera settles at in the bowl: the tip of the 3D view in degrees, its zoom and the eye's lens. 77, 2.8 and 1 by default. */
+    seat?: {
+        pitch: number;
+        zoom: number;
+        lens: number;
+    };
+    /** Degrees a second the rink turns at, from the seat: 8 by default. */
+    rinkTurn?: number;
 }
 /** A keyframe: the camera at a moment, and where it must be going where that is not what the neighbours say. */
 export interface Keyframe {
@@ -51,11 +60,11 @@ export interface Flight {
     }[];
     /** The time of the last keyframe. */
     end: number;
-    /** After `end`, the arena goes on turning at this many degrees a second (negative: the near side goes to the right), and nothing else moves. */
+    /** After `end`, the view goes on turning at this many degrees a second (negative: the near side goes to the right), and nothing else moves: the arena's turn, or the rink's from the seat. */
     tail: number;
     /** The camera of each stage at rest: what a reader who prefers reduced motion is shown (one layer, nothing half-faded). */
     rest: Readonly<Record<StageId, Camera>>;
-    input: Required<Pick<FlightInput, "north" | "siteSpan" | "startSpan" | "citySpan" | "turn">> & {
+    input: Required<Pick<FlightInput, "north" | "siteSpan" | "startSpan" | "citySpan" | "turn" | "rinkTurn" | "seat">> & {
         anchorStart: readonly [number, number];
         anchorEnd: readonly [number, number];
         view: {
@@ -83,7 +92,7 @@ export declare const stagesOf: (flight: Flight) => StageId[];
 export declare const turnPeriod: (flight: Flight) => number;
 /** A moment after the end brought back by whole turns of the arena to one near the end: the same view, and a time that does not grow without end. */
 export declare function foldTime(flight: Flight, time: number): number;
-/** How a path is paced: the seconds of each part. */
+/** How a path is paced: the seconds of each part. `hold` is how long the arena turns, whole, before the camera goes in; `over` and `settle` the two parts of the way into the bowl; `stay` how long a still run of the rink's turn is kept before the end. */
 export declare const PACE: {
     readonly dwell: 1.6;
     readonly step: 1.25;
@@ -92,11 +101,15 @@ export declare const PACE: {
     readonly rise: 0.8;
     readonly hand: 0.7;
     readonly tilt: 3.2;
+    readonly hold: 3.5;
+    readonly over: 2.2;
+    readonly settle: 2.2;
+    readonly stay: 2;
 };
 /**
- * The path from the map to the turning arena, for the stages asked (all by default): the map holds a moment, then the camera falls to the city in four even steps of the logarithm of the distance (the
+ * The path from the map to the rink, for the stages asked (all by default): the map holds a moment, then the camera falls to the city in four even steps of the logarithm of the distance (the
  * map turning as it comes to the venue's own orientation and giving way to the site plan), holds there, comes in until the plan is as large as the 3D arena seen from above, the arena rises out of it,
- * tips to the sport's main camera and turns.
+ * tips to the sport's main camera and turns; then the roof lifts away and the camera comes in over the stands, the eye's lens shortening as it goes, and settles at a seat's viewpoint, from where the rink turns.
  */
 export declare function flightPlan(input: FlightInput): Flight;
 /** The 3D view the arena settles in, as the sport's main camera: its yaw and pitch. */

package/dist/flythrough.path.js

@@ -3,11 +3,11 @@
 // keyframes in time, and every channel runs through them as a monotone cubic (Fritsch and Carlson), so that it is smooth where it passes a keyframe (the speed does not jump),
 // never overshoots between two (a layer's opacity stays between 0 and 1), and is still at its first keyframe. Nothing here touches a page: the same path can be worked out in
 // Node, tested frame by frame, and handed to the mount, which draws it.
-import { LONG_PRESETS, presetView } from "./turn.camera.js";
+import { LENS, LONG_PRESETS, presetView } from "./turn.camera.js";
 /** The stages that exist, in the order of the path. */
-export const STAGE_IDS = ["map", "city", "arena"];
+export const STAGE_IDS = ["map", "city", "arena", "bowl", "rink"];
 /** The channels of the camera. */
-export const CHANNELS = ["logSpan", "ax", "ay", "north", "map", "site", "arena", "yaw", "pitch", "logZoom"];
+export const CHANNELS = ["logSpan", "ax", "ay", "north", "map", "site", "arena", "yaw", "pitch", "logZoom", "logLens", "roof"];
 const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
 const lerp = (a, b, t) => a + (b - a) * t;
 /** Zero to one with a zero slope at both ends. */
@@ -107,13 +107,13 @@ export function foldTime(flight, time) {
     return flight.end + ((time - flight.end) % period);
 }
 /** The camera's defaults: the map, from far above, with nothing of the arena showing. */
-const BASE = { logSpan: 0, ax: 0, ay: 0, north: 0, map: 1, site: 0, arena: 0, yaw: 0, pitch: 0, logZoom: 0 };
-/** How a path is paced: the seconds of each part. */
-export const PACE = { dwell: 1.6, step: 1.25, cityDwell: 0.9, approach: 1.6, rise: 0.8, hand: 0.7, tilt: 3.2 };
+const BASE = { logSpan: 0, ax: 0, ay: 0, north: 0, map: 1, site: 0, arena: 0, yaw: 0, pitch: 0, logZoom: 0, logLens: Math.log(LENS), roof: 1 };
+/** How a path is paced: the seconds of each part. `hold` is how long the arena turns, whole, before the camera goes in; `over` and `settle` the two parts of the way into the bowl; `stay` how long a still run of the rink's turn is kept before the end. */
+export const PACE = { dwell: 1.6, step: 1.25, cityDwell: 0.9, approach: 1.6, rise: 0.8, hand: 0.7, tilt: 3.2, hold: 3.5, over: 2.2, settle: 2.2, stay: 2 };
 /**
- * The path from the map to the turning arena, for the stages asked (all by default): the map holds a moment, then the camera falls to the city in four even steps of the logarithm of the distance (the
+ * The path from the map to the rink, for the stages asked (all by default): the map holds a moment, then the camera falls to the city in four even steps of the logarithm of the distance (the
  * map turning as it comes to the venue's own orientation and giving way to the site plan), holds there, comes in until the plan is as large as the 3D arena seen from above, the arena rises out of it,
- * tips to the sport's main camera and turns.
+ * tips to the sport's main camera and turns; then the roof lifts away and the camera comes in over the stands, the eye's lens shortening as it goes, and settles at a seat's viewpoint, from where the rink turns.
  */
 export function flightPlan(input) {
     const startSpan = input.startSpan ?? 9000000;
@@ -122,6 +122,8 @@ export function flightPlan(input) {
     const [ax1, ay1] = input.anchorEnd ?? [0, 0];
     const north = wrap180(input.north);
     const turn = input.turn ?? 12;
+    const rinkTurn = input.rinkTurn ?? 8;
+    const seat = input.seat ?? { pitch: 77, zoom: 2.8, lens: 1 };
     const view = input.view ?? { yaw: LONG_PRESETS.broadcast.yaw, pitch: LONG_PRESETS.broadcast.pitch };
     const ln = Math.log;
     const L0 = ln(startSpan);
@@ -143,6 +145,13 @@ export function flightPlan(input) {
     const start = { logSpan: L0, ax: ax0, ay: ay0, north: 0, map: 1, site: 0, arena: 0, yaw: 0, pitch: 0, logZoom: 0 };
     const arrive = { ...fall(4), logSpan: L1, ax: ax1, ay: ay1, north, map: 0, site: 1 };
     const near = { ...arrive, logSpan: L2 };
+    // Where the turn has got to at each key of the arena, the bowl and the rink: the speed changes from `turn` to `rinkTurn` along the way, and each yaw is the one the two speeds either side of it come to.
+    const yaws = [];
+    let yaw = 0;
+    for (const [from, to, seconds] of [[0, turn, PACE.tilt], [turn, turn, PACE.hold], [turn, (turn + rinkTurn) / 2, PACE.over], [(turn + rinkTurn) / 2, rinkTurn, PACE.settle], [rinkTurn, rinkTurn, PACE.stay]]) {
+        yaw -= ((from + to) / 2) * seconds;
+        yaws.push(yaw);
+    }
     const blocks = [
         { id: "map", keys: [{ dt: 0, camera: start }, { dt: PACE.dwell, camera: start }, { dt: PACE.step, camera: fall(1) }, { dt: PACE.step, camera: fall(2) }, { dt: PACE.step, camera: fall(3) }] },
         { id: "city", keys: [{ dt: PACE.step, camera: arrive }, { dt: PACE.cityDwell, camera: arrive }, { dt: PACE.approach, camera: near }, { dt: PACE.rise, camera: { ...near, arena: 1 } }] },
@@ -150,7 +159,21 @@ export function flightPlan(input) {
             id: "arena",
             keys: [
                 { dt: PACE.hand, camera: { ...near, arena: 1, site: 0, yaw: 0, pitch: 0 }, slope: { yaw: 0 } },
-                { dt: PACE.tilt, camera: { ...near, arena: 1, site: 0, yaw: -(turn * PACE.tilt) / 2, pitch: view.pitch }, slope: { yaw: -turn } },
+                { dt: PACE.tilt, camera: { ...near, arena: 1, site: 0, yaw: yaws[0], pitch: view.pitch }, slope: { yaw: -turn } },
+            ],
+        },
+        {
+            id: "bowl",
+            keys: [
+                { dt: PACE.hold, camera: { ...near, arena: 1, site: 0, yaw: yaws[1], pitch: view.pitch }, slope: { yaw: -turn } },
+                { dt: PACE.over, camera: { ...near, arena: 1, site: 0, yaw: yaws[2], pitch: lerp(view.pitch, seat.pitch, 0.5), logZoom: ln(seat.zoom) * 0.55, logLens: lerp(ln(LENS), ln(seat.lens), 0.6), roof: 0.3 }, slope: { yaw: -(turn + rinkTurn) / 2 } },
+            ],
+        },
+        {
+            id: "rink",
+            keys: [
+                { dt: PACE.settle, camera: { ...near, arena: 1, site: 0, yaw: yaws[3], pitch: seat.pitch, logZoom: ln(seat.zoom), logLens: ln(seat.lens), roof: 0 }, slope: { yaw: -rinkTurn } },
+                { dt: PACE.stay, camera: { ...near, arena: 1, site: 0, yaw: yaws[4], pitch: seat.pitch, logZoom: ln(seat.zoom), logLens: ln(seat.lens), roof: 0 }, slope: { yaw: -rinkTurn } },
             ],
         },
     ];
@@ -184,14 +207,16 @@ export function flightPlan(input) {
         map: { ...BASE, ...start },
         city: { ...BASE, ...arrive },
         arena: { ...BASE, ...near, map: 0, site: 0, arena: 1, yaw: view.yaw, pitch: view.pitch, logZoom: 0 },
+        bowl: { ...BASE, ...near, map: 0, site: 0, arena: 1, yaw: view.yaw, pitch: lerp(view.pitch, seat.pitch, 0.5), logZoom: ln(seat.zoom) * 0.55, logLens: lerp(ln(LENS), ln(seat.lens), 0.6), roof: 0 },
+        rink: { ...BASE, ...near, map: 0, site: 0, arena: 1, yaw: view.yaw, pitch: seat.pitch, logZoom: ln(seat.zoom), logLens: ln(seat.lens), roof: 0 },
     };
     return {
         keys,
         stages,
         end: time,
-        tail: flown.some((block) => block.id === "arena") ? -turn : 0,
+        tail: flown[flown.length - 1].keys[flown[flown.length - 1].keys.length - 1].slope?.yaw ?? 0,
         rest,
-        input: { north, siteSpan: input.siteSpan, startSpan, citySpan, turn, anchorStart: [ax0, ay0], anchorEnd: [ax1, ay1], view },
+        input: { north, siteSpan: input.siteSpan, startSpan, citySpan, turn, rinkTurn, seat, anchorStart: [ax0, ay0], anchorEnd: [ax1, ay1], view },
     };
 }
 /** The 3D view the arena settles in, as the sport's main camera: its yaw and pitch. */

package/dist/flythrough.style.d.ts

@@ -1,2 +1,2 @@
 /** The fly-through's stylesheet. */
-export declare const FLYTHROUGH_STYLE = ".kf{--kf-bg:#ffffff;--kf-ink:#10151b;--kf-muted:#434b54;--kf-panel:rgba(255,255,255,.9);--kf-line:#b9b3a3;--kf-accent:#1f5fa8;--kf-pin:#c0392b;--kf-grid:rgba(60,70,80,.2);--kf-sea:#cfe3ee;--kf-button:#ffffff;--kf-button-on:#10151b;--kf-button-on-ink:#ffffff;--kf-land:#e9e1c8;--kf-coast:#5d5a50;color:var(--kf-ink);font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",\"Hiragino Sans\",\"Noto Sans JP\",sans-serif;color-scheme:light dark}\n@media (prefers-color-scheme:dark){.kf:not([data-theme=light]){--kf-bg:#18212a;--kf-ink:#f6f3ea;--kf-muted:#bcc3cb;--kf-panel:rgba(24,33,42,.9);--kf-line:#475463;--kf-accent:#7fb2ee;--kf-pin:#ff7a6b;--kf-grid:rgba(200,210,220,.22);--kf-sea:#14232f;--kf-button:#18212a;--kf-button-on:#f6f3ea;--kf-button-on-ink:#0d1218;--kf-land:#2f3b44;--kf-coast:#8a97a3}}\n.kf[data-theme=dark]{--kf-bg:#18212a;--kf-ink:#f6f3ea;--kf-muted:#bcc3cb;--kf-panel:rgba(24,33,42,.9);--kf-line:#475463;--kf-accent:#7fb2ee;--kf-pin:#ff7a6b;--kf-grid:rgba(200,210,220,.22);--kf-sea:#14232f;--kf-button:#18212a;--kf-button-on:#f6f3ea;--kf-button-on-ink:#0d1218;--kf-land:#2f3b44;--kf-coast:#8a97a3;color-scheme:dark}\n.kf[data-theme=light]{color-scheme:light}\n.kf *{box-sizing:border-box}\n.kf [hidden]{display:none!important}\n.kf-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:16/10;min-height:260px;overflow:hidden;background:var(--kf-bg);border:1px solid var(--kf-line);border-radius:12px;outline-offset:2px;user-select:none;-webkit-user-select:none}\n.kf-stage:focus-visible{outline:3px solid var(--kf-accent)}\n@media (max-width:560px){.kf-stage{aspect-ratio:4/5}}\n.kf-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}\n.kf-map{overflow:hidden}\n.kf-map-box{position:absolute;transform-origin:50% 50%;background:var(--kf-sea)}\n.kf-map-box svg{display:block;width:100%;height:100%}\n.kf-map-box .chizu{--cz-sea:var(--kf-sea);--cz-land:var(--kf-land);--cz-line:var(--kf-coast)}\n.kf-site{overflow:hidden}\n.kf-grid{fill:none;stroke:var(--kf-grid);stroke-width:1}\n.kf-rink{fill:var(--kf-bg);fill-opacity:.9;stroke:var(--kf-muted);stroke-width:.6;vector-effect:non-scaling-stroke}\n.kf-3d{overflow:hidden}\n.kf-3d .ky-turn{height:100%}\n.kf-3d .ky-turn-view{aspect-ratio:auto;height:100%;min-height:0;border-radius:0;cursor:default;touch-action:auto}\n.kf-3d .ky-turn-help,.kf-3d .ky-turn-live{display:none}\n.kf-pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}\n.kf-pin::before{content:\"\";position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--kf-pin);border:2px solid var(--kf-bg);box-shadow:0 0 0 2px var(--kf-pin)}\n.kf-scale{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;font-size:.8rem;color:var(--kf-ink);background:var(--kf-panel);padding:4px 8px;border-radius:8px;pointer-events:none}\n.kf-scale-bar{display:block;height:6px;border:2px solid var(--kf-ink);border-top:0}\n.kf-caption{position:absolute;right:12px;top:12px;max-width:min(26rem,calc(100% - 24px));padding:8px 12px;border-radius:10px;background:var(--kf-panel);color:var(--kf-ink);pointer-events:none}\n.kf-title{display:block;font-weight:800}\n.kf-text{display:block;font-size:.92rem;color:var(--kf-muted)}\n.kf-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}\n.kf-group{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}\n.kf button{font:inherit;font-size:1rem;font-weight:700;min-height:44px;min-width:44px;padding:0 14px;border-radius:12px;border:2px solid var(--kf-ink);background:var(--kf-button);color:var(--kf-ink);cursor:pointer}\n.kf button[aria-pressed=true],.kf button[aria-current=step]{background:var(--kf-button-on);color:var(--kf-button-on-ink)}\n.kf button:focus-visible{outline:3px solid var(--kf-accent);outline-offset:2px}\n.kf-help,.kf-credit,.kf-still{margin:8px 0 0;font-size:.85rem;color:var(--kf-muted)}\n.kf-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}";
+export declare const FLYTHROUGH_STYLE = ".kf{--kf-bg:#ffffff;--kf-ink:#10151b;--kf-muted:#434b54;--kf-panel:rgba(255,255,255,.9);--kf-line:#b9b3a3;--kf-accent:#1f5fa8;--kf-pin:#c0392b;--kf-grid:rgba(60,70,80,.2);--kf-sea:#cfe3ee;--kf-button:#ffffff;--kf-button-on:#10151b;--kf-button-on-ink:#ffffff;--kf-land:#e9e1c8;--kf-coast:#5d5a50;color:var(--kf-ink);font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",\"Hiragino Sans\",\"Noto Sans JP\",sans-serif;color-scheme:light dark}\n@media (prefers-color-scheme:dark){.kf:not([data-theme=light]){--kf-bg:#18212a;--kf-ink:#f6f3ea;--kf-muted:#bcc3cb;--kf-panel:rgba(24,33,42,.9);--kf-line:#475463;--kf-accent:#7fb2ee;--kf-pin:#ff7a6b;--kf-grid:rgba(200,210,220,.22);--kf-sea:#14232f;--kf-button:#18212a;--kf-button-on:#f6f3ea;--kf-button-on-ink:#0d1218;--kf-land:#2f3b44;--kf-coast:#8a97a3}}\n.kf[data-theme=dark]{--kf-bg:#18212a;--kf-ink:#f6f3ea;--kf-muted:#bcc3cb;--kf-panel:rgba(24,33,42,.9);--kf-line:#475463;--kf-accent:#7fb2ee;--kf-pin:#ff7a6b;--kf-grid:rgba(200,210,220,.22);--kf-sea:#14232f;--kf-button:#18212a;--kf-button-on:#f6f3ea;--kf-button-on-ink:#0d1218;--kf-land:#2f3b44;--kf-coast:#8a97a3;color-scheme:dark}\n.kf[data-theme=light]{color-scheme:light}\n.kf *{box-sizing:border-box}\n.kf [hidden]{display:none!important}\n.kf-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:16/10;min-height:260px;overflow:hidden;background:var(--kf-bg);border:1px solid var(--kf-line);border-radius:12px;outline-offset:2px;user-select:none;-webkit-user-select:none}\n.kf-stage:focus-visible{outline:3px solid var(--kf-accent)}\n@media (max-width:560px){.kf-stage{aspect-ratio:4/5}}\n.kf-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}\n.kf-map{overflow:hidden}\n.kf-map-box{position:absolute;transform-origin:50% 50%;background:var(--kf-sea)}\n.kf-map-box svg{display:block;width:100%;height:100%}\n.kf-map-box .chizu{--cz-sea:var(--kf-sea);--cz-land:var(--kf-land);--cz-line:var(--kf-coast)}\n.kf-site{overflow:hidden}\n.kf-grid{fill:none;stroke:var(--kf-grid);stroke-width:1}\n.kf-rink{fill:var(--kf-bg);fill-opacity:.9;stroke:var(--kf-muted);stroke-width:.6;vector-effect:non-scaling-stroke}\n.kf-3d{overflow:hidden}\n.kf-3d .ky-turn{height:100%}\n.kf-3d .ky-turn-view{aspect-ratio:auto;height:100%;min-height:0;border-radius:0;cursor:default;touch-action:auto}\n.kf-3d .ky-turn-help,.kf-3d .ky-turn-live{display:none}\n.kf-3d .ky-up-roof{filter:opacity(var(--kf-roof,1))}\n.kf-3d[data-roof=\"0\"] .ky-up-roof{visibility:hidden}\n.kf-pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}\n.kf-pin::before{content:\"\";position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--kf-pin);border:2px solid var(--kf-bg);box-shadow:0 0 0 2px var(--kf-pin)}\n.kf-scale{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;font-size:.8rem;color:var(--kf-ink);background:var(--kf-panel);padding:4px 8px;border-radius:8px;pointer-events:none}\n.kf-scale-bar{display:block;height:6px;border:2px solid var(--kf-ink);border-top:0}\n.kf-caption{position:absolute;right:12px;top:12px;max-width:min(26rem,calc(100% - 24px));padding:8px 12px;border-radius:10px;background:var(--kf-panel);color:var(--kf-ink);pointer-events:none}\n.kf-title{display:block;font-weight:800}\n.kf-text{display:block;font-size:.92rem;color:var(--kf-muted)}\n.kf-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}\n.kf-group{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}\n.kf button{font:inherit;font-size:1rem;font-weight:700;min-height:44px;min-width:44px;padding:0 14px;border-radius:12px;border:2px solid var(--kf-ink);background:var(--kf-button);color:var(--kf-ink);cursor:pointer}\n.kf button[aria-pressed=true],.kf button[aria-current=step]{background:var(--kf-button-on);color:var(--kf-button-on-ink)}\n.kf button:focus-visible{outline:3px solid var(--kf-accent);outline-offset:2px}\n.kf-help,.kf-credit,.kf-still{margin:8px 0 0;font-size:.85rem;color:var(--kf-muted)}\n.kf-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}";

package/dist/flythrough.style.js

@@ -24,6 +24,8 @@ export const FLYTHROUGH_STYLE = `.kf{${LIGHT};color:var(--kf-ink);font:16px/1.45
 .kf-3d .ky-turn{height:100%}
 .kf-3d .ky-turn-view{aspect-ratio:auto;height:100%;min-height:0;border-radius:0;cursor:default;touch-action:auto}
 .kf-3d .ky-turn-help,.kf-3d .ky-turn-live{display:none}
+.kf-3d .ky-up-roof{filter:opacity(var(--kf-roof,1))}
+.kf-3d[data-roof="0"] .ky-up-roof{visibility:hidden}
 .kf-pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
 .kf-pin::before{content:"";position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--kf-pin);border:2px solid var(--kf-bg);box-shadow:0 0 0 2px var(--kf-pin)}
 .kf-scale{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;font-size:.8rem;color:var(--kf-ink);background:var(--kf-panel);padding:4px 8px;border-radius:8px;pointer-events:none}

package/dist/flythrough.words.d.ts

@@ -8,7 +8,7 @@ export interface FlythroughWords {
     region: string;
     /** What a screen reader is told about the whole fly-through: `{arena}`, `{place}`. */
     about: string;
-    /** The stages: their names and what is said of each (`{arena}`, `{place}`). */
+    /** The stages: their names and what is said of each (`{arena}`, `{place}`, `{seats}`, `{tiers}`). */
     stage: Record<StageId, {
         name: string;
         text: string;
@@ -30,4 +30,4 @@ export interface FlythroughWords {
 }
 export declare const FLYTHROUGH_WORDS: Record<Language, FlythroughWords>;
 /** A sentence with its `{name}` slots filled in. */
-export declare const say: (text: string, values: Record<string, string | number>) => string;
+export declare const say: (text: string, values: Record<string, string | number | undefined>) => string;

package/dist/flythrough.words.js

@@ -2,11 +2,13 @@ export const FLYTHROUGH_WORDS = {
     en: {
         title: "Fly-through: {arena}",
         region: "fly-through",
-        about: "A fly-through from a map to {arena} in {place}: the map, the city and the arena in 3D. Play, pause, step back or forward and choose a stage with the buttons or the keys.",
+        about: "A fly-through from a map to {arena} in {place}: the map, the city, the arena in 3D, the way in over the stands and the rink seen from a seat. Play, pause, step back or forward and choose a stage with the buttons or the keys.",
         stage: {
             map: { name: "Map", text: "{arena} stands in {place}." },
             city: { name: "City", text: "The building of {arena} from above, as OpenStreetMap maps it." },
             arena: { name: "Arena", text: "{arena} in 3D, turning." },
+            bowl: { name: "Bowl", text: "In over the stands, with the roof lifted away: a plausible bowl of {seats} seats in {tiers} tiers, not a seat map." },
+            rink: { name: "Rink", text: "A view across the ice from the stands, turning; the place and the height of the seat are ours, not a real seat's." },
         },
         announce: "Stage {n} of {total}: {name}. {text}",
         play: "Play",
@@ -22,11 +24,13 @@ export const FLYTHROUGH_WORDS = {
     ja: {
         title: "フライスルー：{arena}",
         region: "フライスルー",
-        about: "地図から{place}の{arena}まで進むフライスルーです。地図、都市、3Dのアリーナの順に見られます。ボタンまたはキーで、再生・一時停止、前後の場面への移動、場面の選択ができます。",
+        about: "地図から{place}の{arena}まで進むフライスルーです。地図、都市、3Dのアリーナ、スタンドの上空から中へ入る場面、客席から見たリンクの順に見られます。ボタンまたはキーで、再生・一時停止、前後の場面への移動、場面の選択ができます。",
         stage: {
             map: { name: "地図", text: "{arena}は{place}にあります。" },
             city: { name: "都市", text: "{arena}の建物を真上から見たところです（OpenStreetMapの記録による）。" },
             arena: { name: "アリーナ", text: "{arena}を3Dで回転させて表示しています。" },
+            bowl: { name: "客席", text: "屋根を取り払い、スタンドの上空から中へ入ります。{seats}席・{tiers}層の推定のスタンドで、実際の座席表ではありません。" },
+            rink: { name: "リンク", text: "スタンドからリンクを見渡した眺めで、ゆっくり回転します。視点の位置と高さは仮のもので、実在の座席ではありません。" },
         },
         announce: "場面{n}／{total}：{name}。{text}",
         play: "再生",

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.27.0";
+export declare const VERSION = "0.28.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.27.0";
+export const VERSION = "0.28.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.27.0",
+  "version": "0.28.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",