@johnmorrisdotca/kyogijo-stadiums 0.24.0 → 0.27.0

package/dist/flythrough.path.d.ts

@@ -0,0 +1,145 @@
+/** The stages of the fly-through, in order. */
+export type StageId = "map" | "city" | "arena";
+/** 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 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.
+ */
+export type Camera = Record<Channel, number>;
+/** What the path needs to know of the page and the venue. */
+export interface FlightInput {
+    /** How far the venue's plan is turned from north-up, in degrees clockwise (`venueOrientation(venue).north`). */
+    north: number;
+    /** The metres the container's width shows when the 3D arena seen from straight above is as large as the site plan is: where the plan hands over to the 3D arena. */
+    siteSpan: number;
+    /** The metres the width shows at the start, on the map. 9,000 km by default. */
+    startSpan?: number;
+    /** The metres the width shows when the camera reaches the city. Eight times the site span, and at least 1.5 km, by default. */
+    citySpan?: number;
+    /** Where the arena stands on the screen at the start and at the 3D arena, as shares of the width and the height from the middle: `[0, 0]` for both by default. */
+    anchorStart?: readonly [number, number];
+    anchorEnd?: readonly [number, number];
+    /** The stages to fly, in the order of the path (the others are left out, and the camera goes from where the stage before them ended): all by default. */
+    stages?: readonly StageId[];
+    /** The 3D view the arena settles in: the sport's main camera by default. */
+    view?: {
+        yaw: number;
+        pitch: number;
+    };
+    /** Degrees a second the arena turns at, once it is turning: 12 by default. */
+    turn?: 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 {
+    t: number;
+    camera: Camera;
+    /** Channels' speeds (units a second) to pass through this keyframe at, in place of the monotone cubic's own. */
+    slope?: Partial<Camera>;
+}
+/** A path: the keyframes, where each stage starts, and what happens after the last keyframe. */
+export interface Flight {
+    keys: readonly Keyframe[];
+    /** The stages flown and the time each starts at, in order. */
+    stages: readonly {
+        id: StageId;
+        start: number;
+    }[];
+    /** 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. */
+    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">> & {
+        anchorStart: readonly [number, number];
+        anchorEnd: readonly [number, number];
+        view: {
+            yaw: number;
+            pitch: number;
+        };
+    };
+}
+/** Zero to one with a zero slope at both ends. */
+export declare const smooth: (t: number) => number;
+/**
+ * The speeds a monotone cubic passes the keyframes of one channel at: zero at both ends and where the neighbours' slopes change sign (a plateau or a turning point), else the weighted harmonic mean of the
+ * two slopes (Fritsch and Butland), which keeps every piece between its two values.
+ */
+export declare function monotoneSlopes(t: readonly number[], y: readonly number[]): number[];
+/** The camera at a moment of a path. After the last keyframe the arena goes on turning and nothing else moves. Before the first, the first. */
+export declare function cameraAt(flight: Flight, time: number): Camera;
+/** The stage a moment is in: the last whose start is not after it. */
+export declare function stageAt(flight: Flight, time: number): StageId;
+/** When a stage starts, or `undefined` for a stage the path does not fly. */
+export declare const startOf: (flight: Flight, id: StageId) => number | undefined;
+/** The stages a path flies, in order. */
+export declare const stagesOf: (flight: Flight) => StageId[];
+/** The seconds one turn of the arena takes once it is turning, and so how far a moment after the end can be brought back to without a change of view. */
+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. */
+export declare const PACE: {
+    readonly dwell: 1.6;
+    readonly step: 1.25;
+    readonly cityDwell: 0.9;
+    readonly approach: 1.6;
+    readonly rise: 0.8;
+    readonly hand: 0.7;
+    readonly tilt: 3.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
+ * 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.
+ */
+export declare function flightPlan(input: FlightInput): Flight;
+/** The 3D view the arena settles in, as the sport's main camera: its yaw and pitch. */
+export declare const mainView: (sport?: string) => {
+    yaw: number;
+    pitch: number;
+};
+/** A glide of the clock from one moment of the path to another: zero to one with a zero slope at both ends, so that a skip starts and ends at rest. */
+export declare const glide: (from: number, to: number, elapsed: number, seconds: number) => number;
+/** How long a skip over `distance` seconds of the path takes: quick, and never so long that a long skip is slow or so short that it is a cut. */
+export declare const glideSeconds: (distance: number) => number;
+/** The seconds the clock takes to go from still to the path's pace and back. */
+export declare const RAMP = 0.45;
+/** The speed the clock runs at after `dt` seconds: it goes to 1 while playing and to 0 when not, at one steady rate of change, reaching it in `RAMP` seconds and never at once. */
+export declare function nextRate(rate: number, playing: boolean, dt: number): number;
+/** The metres in a degree of latitude on the sphere the venues' geometry uses, and its radius. */
+export declare const METRES_PER_DEGREE: number;
+/** How a map's canvas relates to the ground round the arena: the canvas point it stands at and the metres one unit of the canvas is, across and down. */
+export interface MapFrame {
+    /** The arena on the map's canvas. */
+    at: readonly [number, number];
+    /** Metres in one canvas unit, along x and along y, at the arena. */
+    metresX: number;
+    metresY: number;
+}
+/**
+ * The map's frame at an arena, from the map's own projection: the canvas point of the arena and of a point a hundredth of a degree east of it and north of it give the metres a unit is, so that the
+ * map can be drawn true to the ground round the arena (the world's projection is not, and a map stretched to be square on the ground there is the same map, stretched). `project` answers `null` where the map has no
+ * place for a point, and then there is no frame.
+ */
+export declare function mapFrame(project: (lon: number, lat: number) => readonly [number, number] | null, lon: number, lat: number): MapFrame | undefined;
+/**
+ * The viewBox of the map layer: a square of `metres` on the ground, centred on the arena, as canvas units (`metres` along x over the metres of a unit, and along y). Drawn into a square box with `preserveAspectRatio="none"`.
+ */
+export declare function mapBox(frame: MapFrame, metres: number): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** The side, in pixels, of the square the map is drawn in so that it covers a `width` by `height` container whichever way it is turned about the arena, which stands at `(x, y)` in it. */
+export declare const coverSide: (width: number, height: number, x: number, y: number) => number;
+/** A distance a scale bar can show: 1, 2 or 5 times a power of ten metres, the longest that fits in `maxPixels` at `metresPerPixel`. */
+export declare function niceLength(metresPerPixel: number, maxPixels: number): number;
+/** A length in metres as a scale bar says it: `500 m`, `2 km`. */
+export declare const lengthWords: (metres: number) => string;

package/dist/flythrough.path.js

@@ -0,0 +1,253 @@
+// The path of the fly-through, as plain numbers: where the camera is at any moment of one smooth run from a map to an arena. The camera is a handful of channels (how far
+// in it is, where the arena stands on the screen, how the map is turned, how much of each layer shows, and the 3D view's turn, tip and zoom); the path is a short list of
+// 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";
+/** The stages that exist, in the order of the path. */
+export const STAGE_IDS = ["map", "city", "arena"];
+/** The channels of the camera. */
+export const CHANNELS = ["logSpan", "ax", "ay", "north", "map", "site", "arena", "yaw", "pitch", "logZoom"];
+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. */
+export const smooth = (t) => {
+    const u = clamp(t, 0, 1);
+    return u * u * (3 - 2 * u);
+};
+/** An angle in degrees brought to the range -180 to 180. */
+const wrap180 = (angle) => ((((angle + 180) % 360) + 360) % 360) - 180;
+/**
+ * The speeds a monotone cubic passes the keyframes of one channel at: zero at both ends and where the neighbours' slopes change sign (a plateau or a turning point), else the weighted harmonic mean of the
+ * two slopes (Fritsch and Butland), which keeps every piece between its two values.
+ */
+export function monotoneSlopes(t, y) {
+    const n = t.length;
+    const d = new Array(n).fill(0);
+    if (n < 3)
+        return d;
+    const h = t.slice(1).map((time, i) => time - t[i]);
+    const delta = h.map((step, i) => (y[i + 1] - y[i]) / step);
+    for (let k = 1; k < n - 1; k += 1) {
+        if (delta[k - 1] * delta[k] <= 0)
+            continue;
+        const w1 = 2 * h[k] + h[k - 1];
+        const w2 = h[k] + 2 * h[k - 1];
+        d[k] = (w1 + w2) / (w1 / delta[k - 1] + w2 / delta[k]);
+    }
+    return d;
+}
+/** The cubic Hermite of one channel at `time`, through its keyframes with these slopes. Outside the keyframes it is the first or the last value. */
+function hermite(times, values, slopes, time) {
+    const last = times.length - 1;
+    if (time <= times[0])
+        return values[0];
+    if (time >= times[last])
+        return values[last];
+    let i = 0;
+    while (i < last - 1 && time >= times[i + 1])
+        i += 1;
+    const h = times[i + 1] - times[i];
+    const s = (time - times[i]) / h;
+    const s2 = s * s;
+    const s3 = s2 * s;
+    return (2 * s3 - 3 * s2 + 1) * values[i] + (s3 - 2 * s2 + s) * h * slopes[i] + (-2 * s3 + 3 * s2) * values[i + 1] + (s3 - s2) * h * slopes[i + 1];
+}
+/** The speeds of every channel at every keyframe, worked out once for a path. */
+const SLOPES = new WeakMap();
+function slopesOf(keys) {
+    const known = SLOPES.get(keys);
+    if (known !== undefined)
+        return known;
+    const times = keys.map((key) => key.t);
+    const made = {};
+    for (const channel of CHANNELS) {
+        const slopes = monotoneSlopes(times, keys.map((key) => key.camera[channel]));
+        keys.forEach((key, i) => {
+            const own = key.slope?.[channel];
+            if (own !== undefined)
+                slopes[i] = own;
+        });
+        made[channel] = slopes;
+    }
+    SLOPES.set(keys, made);
+    return made;
+}
+/** The camera at a moment of a path. After the last keyframe the arena goes on turning and nothing else moves. Before the first, the first. */
+export function cameraAt(flight, time) {
+    const { keys } = flight;
+    const slopes = slopesOf(keys);
+    const times = keys.map((key) => key.t);
+    const out = {};
+    for (const channel of CHANNELS)
+        out[channel] = hermite(times, keys.map((key) => key.camera[channel]), slopes[channel], time);
+    if (time > flight.end)
+        out.yaw += flight.tail * (time - flight.end);
+    return out;
+}
+/** The stage a moment is in: the last whose start is not after it. */
+export function stageAt(flight, time) {
+    let found = flight.stages[0].id;
+    for (const stage of flight.stages)
+        if (stage.start <= time + 1e-9)
+            found = stage.id;
+    return found;
+}
+/** When a stage starts, or `undefined` for a stage the path does not fly. */
+export const startOf = (flight, id) => flight.stages.find((stage) => stage.id === id)?.start;
+/** The stages a path flies, in order. */
+export const stagesOf = (flight) => flight.stages.map((stage) => stage.id);
+/** The seconds one turn of the arena takes once it is turning, and so how far a moment after the end can be brought back to without a change of view. */
+export const turnPeriod = (flight) => (flight.tail === 0 ? Infinity : 360 / Math.abs(flight.tail));
+/** 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 function foldTime(flight, time) {
+    if (time <= flight.end + turnPeriod(flight))
+        return time;
+    const period = turnPeriod(flight);
+    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 };
+/**
+ * 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
+ * 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.
+ */
+export function flightPlan(input) {
+    const startSpan = input.startSpan ?? 9000000;
+    const citySpan = input.citySpan ?? Math.max(1500, input.siteSpan * 8);
+    const [ax0, ay0] = input.anchorStart ?? [0, 0];
+    const [ax1, ay1] = input.anchorEnd ?? [0, 0];
+    const north = wrap180(input.north);
+    const turn = input.turn ?? 12;
+    const view = input.view ?? { yaw: LONG_PRESETS.broadcast.yaw, pitch: LONG_PRESETS.broadcast.pitch };
+    const ln = Math.log;
+    const L0 = ln(startSpan);
+    const L1 = ln(citySpan);
+    const L2 = ln(input.siteSpan);
+    // The descent, in four equal steps of the logarithm of the distance: where each is, how far the map is turned, how much of the map and of the plan shows.
+    const fall = (k) => {
+        const f = k / 4;
+        const g = smooth((f - 0.35) / 0.65);
+        return {
+            logSpan: lerp(L0, L1, f),
+            ax: lerp(ax0, ax1, smooth(f)),
+            ay: lerp(ay0, ay1, smooth(f)),
+            north: north * g,
+            map: [1, 1, 1, 0.5, 0][k],
+            site: [0, 0, 0, 0.5, 1][k],
+        };
+    };
+    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 };
+    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 } }] },
+        {
+            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 } },
+            ],
+        },
+    ];
+    const wanted = (input.stages ?? STAGE_IDS).filter((id, i, all) => all.indexOf(id) === i);
+    const flown = blocks.filter((block) => wanted.includes(block.id));
+    if (flown.length === 0)
+        throw new Error("a fly-through needs at least one stage");
+    const keys = [];
+    const stages = [];
+    let time = 0;
+    let camera = { ...BASE };
+    // A stage left out keeps its seconds: the camera crosses them in one smooth run from where the stage before ended to where the stage after starts, so that it never jumps.
+    let carry = 0;
+    for (const block of blocks) {
+        if (!wanted.includes(block.id)) {
+            carry += block.keys.reduce((sum, key) => sum + key.dt, 0);
+            continue;
+        }
+        block.keys.forEach((key, i) => {
+            if (keys.length > 0)
+                time += key.dt + (i === 0 ? carry : 0);
+            camera = { ...camera, ...key.camera };
+            // A stage starts at its first key; the key that arrives from the stage before is the one that stage ended on.
+            if (i === 0)
+                stages.push({ id: block.id, start: time });
+            keys.push({ t: time, camera, ...(key.slope === undefined ? {} : { slope: key.slope }) });
+        });
+        carry = 0;
+    }
+    const rest = {
+        map: { ...BASE, ...start },
+        city: { ...BASE, ...arrive },
+        arena: { ...BASE, ...near, map: 0, site: 0, arena: 1, yaw: view.yaw, pitch: view.pitch, logZoom: 0 },
+    };
+    return {
+        keys,
+        stages,
+        end: time,
+        tail: flown.some((block) => block.id === "arena") ? -turn : 0,
+        rest,
+        input: { north, siteSpan: input.siteSpan, startSpan, citySpan, turn, anchorStart: [ax0, ay0], anchorEnd: [ax1, ay1], view },
+    };
+}
+/** The 3D view the arena settles in, as the sport's main camera: its yaw and pitch. */
+export const mainView = (sport = "nhl") => {
+    const view = presetView("broadcast", sport) ?? LONG_PRESETS.broadcast;
+    return { yaw: view.yaw, pitch: view.pitch };
+};
+// ---- Time: how the clock of the fly-through moves, so that nothing starts or stops with a jump. ----
+/** A glide of the clock from one moment of the path to another: zero to one with a zero slope at both ends, so that a skip starts and ends at rest. */
+export const glide = (from, to, elapsed, seconds) => lerp(from, to, smooth(seconds <= 0 ? 1 : elapsed / seconds));
+/** How long a skip over `distance` seconds of the path takes: quick, and never so long that a long skip is slow or so short that it is a cut. */
+export const glideSeconds = (distance) => clamp(0.55 + 0.14 * Math.abs(distance), 0.6, 1.8);
+/** The seconds the clock takes to go from still to the path's pace and back. */
+export const RAMP = 0.45;
+/** The speed the clock runs at after `dt` seconds: it goes to 1 while playing and to 0 when not, at one steady rate of change, reaching it in `RAMP` seconds and never at once. */
+export function nextRate(rate, playing, dt) {
+    const target = playing ? 1 : 0;
+    return rate + clamp(target - rate, -dt / RAMP, dt / RAMP);
+}
+// ---- The map's frame: how the viewBox follows the camera. ----
+/** The metres in a degree of latitude on the sphere the venues' geometry uses, and its radius. */
+export const METRES_PER_DEGREE = (6371008.8 * Math.PI) / 180;
+/**
+ * The map's frame at an arena, from the map's own projection: the canvas point of the arena and of a point a hundredth of a degree east of it and north of it give the metres a unit is, so that the
+ * map can be drawn true to the ground round the arena (the world's projection is not, and a map stretched to be square on the ground there is the same map, stretched). `project` answers `null` where the map has no
+ * place for a point, and then there is no frame.
+ */
+export function mapFrame(project, lon, lat) {
+    const step = 0.01;
+    const at = project(lon, lat);
+    const east = project(lon + step, lat);
+    const north = project(lon, lat + step);
+    if (at === null || east === null || north === null)
+        return undefined;
+    const unitsX = Math.abs(east[0] - at[0]) / step;
+    const unitsY = Math.abs(north[1] - at[1]) / step;
+    if (!(unitsX > 0) || !(unitsY > 0))
+        return undefined;
+    return { at, metresX: (METRES_PER_DEGREE * Math.cos((lat * Math.PI) / 180)) / unitsX, metresY: METRES_PER_DEGREE / unitsY };
+}
+/**
+ * The viewBox of the map layer: a square of `metres` on the ground, centred on the arena, as canvas units (`metres` along x over the metres of a unit, and along y). Drawn into a square box with `preserveAspectRatio="none"`.
+ */
+export function mapBox(frame, metres) {
+    const w = metres / frame.metresX;
+    const h = metres / frame.metresY;
+    return { x: frame.at[0] - w / 2, y: frame.at[1] - h / 2, w, h };
+}
+/** The side, in pixels, of the square the map is drawn in so that it covers a `width` by `height` container whichever way it is turned about the arena, which stands at `(x, y)` in it. */
+export const coverSide = (width, height, x, y) => 2 * Math.hypot(Math.max(x, width - x), Math.max(y, height - y));
+/** A distance a scale bar can show: 1, 2 or 5 times a power of ten metres, the longest that fits in `maxPixels` at `metresPerPixel`. */
+export function niceLength(metresPerPixel, maxPixels) {
+    const wanted = metresPerPixel * maxPixels;
+    const power = 10 ** Math.floor(Math.log10(wanted));
+    const steps = [5, 2, 1].map((n) => n * power);
+    return steps.find((step) => step <= wanted) ?? power / 2;
+}
+/** A length in metres as a scale bar says it: `500 m`, `2 km`. */
+export const lengthWords = (metres) => (metres >= 1000 ? `${metres / 1000} km` : `${metres} m`);

package/dist/flythrough.style.d.ts

@@ -0,0 +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}";

package/dist/flythrough.style.js

@@ -0,0 +1,40 @@
+// The fly-through's stylesheet, written into the mount (as the 3D view writes its own): the stage with its layers, the controls under it, light and dark. The colours are custom properties of
+// `.kf`, so that a page can set them; `data-theme` on `.kf` forces a theme, and without it the device's setting decides.
+const LIGHT = "--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";
+const 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";
+/** The fly-through's stylesheet. */
+export const FLYTHROUGH_STYLE = `.kf{${LIGHT};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}
+@media (prefers-color-scheme:dark){.kf:not([data-theme=light]){${DARK}}}
+.kf[data-theme=dark]{${DARK};color-scheme:dark}
+.kf[data-theme=light]{color-scheme:light}
+.kf *{box-sizing:border-box}
+.kf [hidden]{display:none!important}
+.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}
+.kf-stage:focus-visible{outline:3px solid var(--kf-accent)}
+@media (max-width:560px){.kf-stage{aspect-ratio:4/5}}
+.kf-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
+.kf-map{overflow:hidden}
+.kf-map-box{position:absolute;transform-origin:50% 50%;background:var(--kf-sea)}
+.kf-map-box svg{display:block;width:100%;height:100%}
+.kf-map-box .chizu{--cz-sea:var(--kf-sea);--cz-land:var(--kf-land);--cz-line:var(--kf-coast)}
+.kf-site{overflow:hidden}
+.kf-grid{fill:none;stroke:var(--kf-grid);stroke-width:1}
+.kf-rink{fill:var(--kf-bg);fill-opacity:.9;stroke:var(--kf-muted);stroke-width:.6;vector-effect:non-scaling-stroke}
+.kf-3d{overflow:hidden}
+.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-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}
+.kf-scale-bar{display:block;height:6px;border:2px solid var(--kf-ink);border-top:0}
+.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}
+.kf-title{display:block;font-weight:800}
+.kf-text{display:block;font-size:.92rem;color:var(--kf-muted)}
+.kf-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}
+.kf-group{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
+.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}
+.kf button[aria-pressed=true],.kf button[aria-current=step]{background:var(--kf-button-on);color:var(--kf-button-on-ink)}
+.kf button:focus-visible{outline:3px solid var(--kf-accent);outline-offset:2px}
+.kf-help,.kf-credit,.kf-still{margin:8px 0 0;font-size:.85rem;color:var(--kf-muted)}
+.kf-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;

package/dist/flythrough.words.d.ts

@@ -0,0 +1,33 @@
+import type { StageId } from "./flythrough.path.ts";
+import type { Language } from "./types.ts";
+/** The words of one language. */
+export interface FlythroughWords {
+    /** The name of the whole thing, for the region's label: `{arena}`. */
+    title: string;
+    /** What the region is, for a screen reader. */
+    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}`). */
+    stage: Record<StageId, {
+        name: string;
+        text: string;
+    }>;
+    /** Said when the stage changes: `{n}`, `{total}`, `{name}`, `{text}`. */
+    announce: string;
+    play: string;
+    pause: string;
+    back: string;
+    next: string;
+    stages: string;
+    /** The keys, under the view. */
+    keys: string;
+    /** The credit of the map and of the building's outline, drawn with the picture. */
+    creditMap: string;
+    creditPlain: string;
+    /** The sentence on a still stage, for a reader who prefers reduced motion. */
+    still: string;
+}
+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;

package/dist/flythrough.words.js

@@ -0,0 +1,44 @@
+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.",
+        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." },
+        },
+        announce: "Stage {n} of {total}: {name}. {text}",
+        play: "Play",
+        pause: "Pause",
+        back: "Back",
+        next: "Next",
+        stages: "Stages",
+        keys: "Space plays or pauses. Left and right arrows go back and forward a stage; the number keys choose a stage; Home starts again.",
+        creditMap: "Map: Natural Earth (public domain), drawn with chizu. Building outline: (c) OpenStreetMap contributors, ODbL 1.0, openstreetmap.org/copyright.",
+        creditPlain: "Building outline: (c) OpenStreetMap contributors, ODbL 1.0, openstreetmap.org/copyright.",
+        still: "Each stage is shown as a still picture, because this device is set to reduce motion.",
+    },
+    ja: {
+        title: "フライスルー：{arena}",
+        region: "フライスルー",
+        about: "地図から{place}の{arena}まで進むフライスルーです。地図、都市、3Dのアリーナの順に見られます。ボタンまたはキーで、再生・一時停止、前後の場面への移動、場面の選択ができます。",
+        stage: {
+            map: { name: "地図", text: "{arena}は{place}にあります。" },
+            city: { name: "都市", text: "{arena}の建物を真上から見たところです（OpenStreetMapの記録による）。" },
+            arena: { name: "アリーナ", text: "{arena}を3Dで回転させて表示しています。" },
+        },
+        announce: "場面{n}／{total}：{name}。{text}",
+        play: "再生",
+        pause: "一時停止",
+        back: "戻る",
+        next: "次へ",
+        stages: "場面",
+        keys: "スペースキーで再生・一時停止。左右の矢印キーで前後の場面へ、数字キーで場面を選び、Homeキーで最初に戻ります。",
+        creditMap: "地図：Natural Earth（パブリックドメイン）、chizuで描画。建物の輪郭：(c) OpenStreetMap contributors、ODbL 1.0、openstreetmap.org/copyright。",
+        creditPlain: "建物の輪郭：(c) OpenStreetMap contributors、ODbL 1.0、openstreetmap.org/copyright。",
+        still: "この端末は動きを減らす設定のため、各場面を静止画で表示しています。",
+    },
+};
+/** A sentence with its `{name}` slots filled in. */
+export const say = (text, values) => text.replace(/\{(\w+)\}/g, (_, key) => String(values[key] ?? ""));

package/dist/index.d.ts

@@ -63,6 +63,8 @@ export { ERA_CURRENT, ERA_SOURCES, ERA_SPORTS, eraChanges, eraRange, eraStates,
 export type { EraChange, EraRules, EraRulesOf, EraSource, EraSpan, EraSport, FootballRules, MlbRules, NbaRules, NhlRules } from "./eras.ts";
 export { ARENA_IDS, ARENAS, arenaById, arenaByName, arenaByWikidata, arenaCourtIn, arenaNameIn, arenaOfficialName, arenaRinkIn, arenaSourceUrl, arenasByName } from "./arenas.ts";
 export type { Arena, ArenaCapacity, ArenaData, ArenaName, ArenaSize, ArenaSource } from "./arenas.ts";
+export { VENUE_ATTRIBUTION, VENUE_IDS, VENUES, arenaOfVenue, bowlInside, planVenue, venueBowl, venueById, venueByWikidata, venueOrientation, venueRink, venuesIn } from "./venues.ts";
+export type { RealVenue, RealVenueData, VenueBasis, VenueDivision, VenueOrientation, VenueOsm, VenuePlan, VenueRoof } from "./venues.ts";
 export { GROUND_IDS, GROUNDS, groundById, groundByName, groundByWikidata, groundNameIn, groundOfficialName, groundSourceUrl, groundsByName, groundsHosting } from "./grounds.ts";
 export type { Ground, GroundCompetition, GroundData, GroundName, GroundSource, GroundTournament } from "./grounds.ts";
 export { AFL_GROUNDS, FAMILY_OF, LEAGUES, LEAGUE_SOURCES, VARIANTS, chooseLeague, hasHistory, leagueAt, leagueById, leagueChanges, leagueFigures, leagueIds, leagueSeason, leagueSize } from "./leagues.ts";

package/dist/index.js

@@ -39,6 +39,7 @@ export { PARKS, PARK_IDS, fenceFor, parkById, parkByName, parkByWikidata, parkNa
 export { officialName, plainName } from "./names.js";
 export { ERA_CURRENT, ERA_SOURCES, ERA_SPORTS, eraChanges, eraRange, eraStates, footballIn, rulesFor, seasonLabel } from "./eras.js";
 export { ARENA_IDS, ARENAS, arenaById, arenaByName, arenaByWikidata, arenaCourtIn, arenaNameIn, arenaOfficialName, arenaRinkIn, arenaSourceUrl, arenasByName } from "./arenas.js";
+export { VENUE_ATTRIBUTION, VENUE_IDS, VENUES, arenaOfVenue, bowlInside, planVenue, venueBowl, venueById, venueByWikidata, venueOrientation, venueRink, venuesIn } from "./venues.js";
 export { GROUND_IDS, GROUNDS, groundById, groundByName, groundByWikidata, groundNameIn, groundOfficialName, groundSourceUrl, groundsByName, groundsHosting } from "./grounds.js";
 export { AFL_GROUNDS, FAMILY_OF, LEAGUES, LEAGUE_SOURCES, VARIANTS, chooseLeague, hasHistory, leagueAt, leagueById, leagueChanges, leagueFigures, leagueIds, leagueSeason, leagueSize } from "./leagues.js";
 export { SURFACE_UNITS, UNITS, convertLength, isUnit } from "./units.js";

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";