@johnmorrisdotca/kyogijo-stadiums 0.26.0 → 0.28.0

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/stadiums-entry.d.ts

@@ -0,0 +1,2 @@
+export { VENUE_ATTRIBUTION, STADIUMS, STADIUM_IDS, groundOfStadium, planStadium, stadiumBowl, stadiumBowlInside, stadiumById, stadiumByWikidata, stadiumConfigOf, stadiumOrientation, stadiumSeats } from "./stadiums.ts";
+export type { RealStadium, RealStadiumData, StadiumBasis, StadiumConfigData, StadiumConfigId, StadiumOrientation, StadiumOsm, StadiumPlan, StadiumRoof } from "./stadiums.ts";

package/dist/stadiums-entry.js

@@ -0,0 +1,2 @@
+// The real stadiums: the outline of each stadium's building and the way its field lies (OpenStreetMap, ODbL 1.0) and a plausible bowl from the seats of each configuration, the bowls and the roof the sources give (Wikidata, Wikipedia).
+export { VENUE_ATTRIBUTION, STADIUMS, STADIUM_IDS, groundOfStadium, planStadium, stadiumBowl, stadiumBowlInside, stadiumById, stadiumByWikidata, stadiumConfigOf, stadiumOrientation, stadiumSeats } from "./stadiums.js";

package/dist/stadiums.d.ts

@@ -0,0 +1,158 @@
+import { type Box, type Pt, type RealBowl } from "./crowd.ts";
+import { type Ground } from "./grounds.ts";
+import { VENUE_ATTRIBUTION } from "./venues.ts";
+export { VENUE_ATTRIBUTION };
+/** How a fact is known: `documented` is what a source cited with it says; `plausible` is ours, for a bowl no source describes. */
+export type StadiumBasis = "documented" | "plausible";
+/** The configurations of a stadium: the field the seats are counted for. `cfl` is the football field of the Canadian league, `soccer` a soccer pitch. */
+export type StadiumConfigId = "cfl" | "soccer";
+/** The kinds of roof the stadiums have: `cable` is a cable-supported roof with an opening over the field that a retractable fabric closes; `fixed` a lid over the bowl. */
+export type StadiumRoof = "cable" | "fixed";
+/** What one configuration of a stadium is: its sport and its seats, and where the figure was read. */
+export interface StadiumConfigData {
+    sport: "cfl" | "soccer";
+    /** The seats for this configuration: the infobox's figure for it, or Wikidata's. */
+    seats: number;
+    source: "wikidata" | "wikipedia";
+    /** What was read, in a few words of ours. */
+    read: string;
+}
+/** The facts of a stadium: the seats of each configuration, the number of bowls and the kind of roof, each with what a source says. No text of an article is kept. */
+export interface RealStadiumData {
+    /** The key: `bc-place`, the key of the stadium's ground in `GROUNDS`. */
+    id: string;
+    /** The Wikidata item of the stadium. */
+    wikidata: string;
+    /** The key of the stadium's ground in `GROUNDS` (its name, its place, its pitch). */
+    ground: string;
+    /** The English Wikipedia article the facts that are not Wikidata's were read from, at a revision. */
+    en: {
+        title: string;
+        revision: number;
+    };
+    configs: Record<StadiumConfigId, StadiumConfigData>;
+    tiers: {
+        /** The seating levels (bowls). */
+        count: 1 | 2 | 3;
+        basis: StadiumBasis;
+        /** The seats of the lowest bowl, where a source gives them: the lower tier's band holds this many whatever the configuration (the upper bowl is what is opened or closed for the others). */
+        lowerSeats?: number;
+        read: string;
+    };
+    roof: {
+        kind: StadiumRoof;
+        basis: StadiumBasis;
+        read: string; /** A cable roof's opening over the field, as the article gives it, in metres. */
+        opening?: {
+            length: number;
+            width: number;
+            unit: "m";
+        };
+    };
+}
+/** What OpenStreetMap gave of a stadium: ODbL 1.0 data, "(c) OpenStreetMap contributors". */
+export interface StadiumOsm {
+    /** The element the outline is: `way/24705904`. */
+    source: string;
+    read: string;
+    base: string;
+    licence: "ODbL-1.0";
+    attribution: string;
+    /** The roof OpenStreetMap maps over the building: its heights in metres (`height` to the top of the roof, `rise` of that the roof's own) and the opening in it as `[longitude, latitude]`. */
+    roof?: {
+        source: string;
+        height?: number;
+        rise?: number;
+        outer?: string;
+        opening?: {
+            source: string;
+            ring: [number, number][];
+        };
+    };
+    /** The building's outline as `[longitude, latitude]`, not repeating its first point. */
+    ring: [number, number][];
+    /**
+     * How the field lies, worked out when the data was made: the heading of its long side (degrees clockwise from north, 0 to under 180), how that is known (`opening`: from the roof's opening, which the article says is
+     * the field's size; `building`: from the long axis of the building's main hall, an inference; `none`: no direction, 90 is stood in), how much of a direction the building has (`strength`) and how much longer than
+     * wide the opening or the hall is (`elongation`), and the middle of the field as `[longitude, latitude]`.
+     */
+    axis: {
+        heading: number;
+        basis: "opening" | "building" | "none";
+        strength: number;
+        elongation: number;
+        centre: [number, number];
+    };
+}
+/** A stadium: its facts and what OpenStreetMap gave. */
+export interface RealStadium extends RealStadiumData {
+    osm: StadiumOsm;
+}
+/** How the field lies in the building: its long side's heading, how that is known, and the way north points on the page (degrees clockwise from the top). */
+export interface StadiumOrientation {
+    heading: number;
+    basis: "opening" | "building" | "none";
+    north: number;
+}
+/** The stadiums by key. */
+export declare const STADIUMS: Readonly<Record<string, RealStadium>>;
+/** The keys of `STADIUMS`, in the order of the data. */
+export declare const STADIUM_IDS: readonly string[];
+/** The stadium with a key, or `undefined`. */
+export declare const stadiumById: (id: string | undefined) => RealStadium | undefined;
+/** The stadium whose Wikidata item is `Q612227`, or `undefined`. */
+export declare const stadiumByWikidata: (wikidata: string | undefined) => RealStadium | undefined;
+/** The ground a stadium is (its name, place and pitch). */
+export declare const groundOfStadium: (stadium: RealStadium) => Ground;
+/** How the field lies in a stadium's building (see `StadiumOsm.axis`). */
+export declare const stadiumOrientation: (stadium: RealStadium) => StadiumOrientation;
+/** The configuration a sport is: `cfl` or `soccer`, or `undefined` for a sport a stadium has no configuration for. */
+export declare const stadiumConfigOf: (sport: string | undefined) => StadiumConfigId | undefined;
+/** The seats of a stadium for a configuration. */
+export declare const stadiumSeats: (stadium: RealStadium, config: StadiumConfigId) => number;
+/** The height of the first row above the field, in feet, the rise of a bowl's rows by the number of bowls (what the lowest, a middle and the upper rise, at most), and the rise of the walk between two bowls (a suite level): ours, no source gives them. */
+export declare const STADIUM_FIRST_HEIGHT = 5;
+export declare const STADIUM_RISES: Readonly<Record<1 | 2 | 3, readonly number[]>>;
+export declare const STADIUM_WALK_RISE = 24;
+/** The height a roof's rim stands over the top row, at the least, in feet. */
+export declare const STADIUM_CLEARANCE = 22;
+/** The plan of a stadium for a configuration: its building in the drawing's frame, the bowl fitted inside, and how it lies. */
+export interface StadiumPlan {
+    stadium: RealStadium;
+    config: StadiumConfigId;
+    orientation: StadiumOrientation;
+    /** The field, in the drawing's frame. */
+    box: Box;
+    /** The building's outline in feet, in the drawing's frame (the field's long side along x, in the middle of the building's hall). */
+    footprint: Pt[];
+    /** The roof's opening in feet, in the drawing's frame, where OpenStreetMap maps it. */
+    opening: Pt[] | undefined;
+    /** The stands for `layoutOf`: bowls, first row, ground, and the building and roof. */
+    bowl: RealBowl;
+    /** The seats the bowls hold, by bowl, and in all: equal to the configuration's seats where the building has room (`fit` is `fits`). */
+    seats: {
+        tier: string;
+        seats: number;
+    }[];
+    total: number;
+    /** The floor a seat takes in the plan, in square feet (one of `SEAT_AREAS`). */
+    seatArea: number;
+    fit: "fits" | "tight";
+}
+/**
+ * The plan of a stadium's bowl for a configuration: the building's outline turned so that the field lies along x, a first row round a football field's footprint as a gridiron's stands have it, the largest bowl-shaped
+ * outline that fits the building round the middle of the field, and between the two the bowls, the outer edge of each placed so that its band holds the share of the configuration's seats the sources give it, with a walk
+ * between them. The bowl is the same building for football and soccer (the seats of the configuration differ, and the field).
+ * @example
+ * ```ts
+ * import { planStadium, stadiumById } from "@johnmorrisdotca/kyogijo-stadiums/stadiums";
+ * const plan = planStadium(stadiumById("bc-place")!, "soccer", { x: 0, y: 0, w: 344.5, h: 223.1 });
+ * console.log(plan.orientation.basis, plan.seats.map((t) => t.tier).join(" "), plan.total);
+ * // opening lower upper 52497
+ * ```
+ */
+export declare function planStadium(stadium: RealStadium, config: StadiumConfigId, box: Box): StadiumPlan;
+/** The stands of a stadium for `layoutOf` and the 3D view, round a field: `planStadium`'s bowl. */
+export declare const stadiumBowl: (stadium: RealStadium, config: StadiumConfigId, box: Box) => RealBowl;
+/** Whether the bowl lies inside the building: every corner of every bowl's outer edge is inside the footprint. */
+export declare function stadiumBowlInside(plan: StadiumPlan): boolean;

package/dist/stadiums.data.d.ts

@@ -0,0 +1,2 @@
+import type { RealStadiumData } from "./stadiums.ts";
+export declare const STADIUM_DATA: RealStadiumData[];

package/dist/stadiums.data.js

@@ -0,0 +1,11 @@
+export const STADIUM_DATA = [
+    {
+        "id": "bc-place",
+        "wikidata": "Q612227",
+        "ground": "bc-place",
+        "en": { "title": "BC Place", "revision": 1372065649 },
+        "configs": { "cfl": { "sport": "cfl", "seats": 54500, "source": "wikipedia", "read": "the infobox's first capacity, 54,500, which Wikidata's capacity (P1083) also gives; the article's stand for football of the CFL's club" }, "soccer": { "sport": "soccer", "seats": 52497, "source": "wikipedia", "read": "the infobox's capacity for the 2026 world cup of soccer, 52,497, 2,003 fewer than its first" } },
+        "tiers": { "count": 2, "basis": "documented", "lowerSeats": 27695, "read": "the infobox's lower bowl of 27,695 seats, and the article's lower and upper bowls (the club that plays soccer there sold only the lower bowl)" },
+        "roof": { "kind": "cable", "basis": "documented", "read": "the article: a retractable roof supported by cables, the largest of its kind, its opening 100 by 85 metres (the size of the field), the fabric retracting into a pod in the middle of the opening above the suspended video board", "opening": { "length": 100, "width": 85, "unit": "m" } },
+    },
+];