@johnmorrisdotca/kyogijo-stadiums 0.28.0 → 0.31.0

package/dist/draw.js

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

package/dist/flythrough-entry.d.ts

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

package/dist/flythrough-entry.js

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

package/dist/flythrough.dom.js

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

package/dist/flythrough.game.d.ts

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

package/dist/flythrough.game.js

@@ -0,0 +1,145 @@
+// The game of the fly-through: a short play on the rink, made up for the picture and said to be: five skaters and a goalie a side, a breakout, two passes, a rush and a goal, as a replay's timeline
+// (`ReplayTimeline` of `replay.types.ts`, the format the package already animates), so that the dots, their numbers, the puck, its trail and the events are drawn by the replay's own layers. It is NOT a real game's tracking data
+// and nothing in it is a real player, a real team or a real play: the shirt numbers are only numbers. Pure and deterministic: the same moment always gives the same frame.
+import { renderLayers } from "./layers.js";
+import { replayLayers } from "./replay.js";
+/** How long the play runs, and how long it is held at the end (the goal's marks still on the ice) before it starts again. */
+export const PLAY_SECONDS = 10;
+export const PLAY_HOLD = 1.5;
+/** The seconds of the whole run, the play and the hold: what the loop's period is. */
+export const PLAY_PERIOD = PLAY_SECONDS + PLAY_HOLD;
+/** The moment a still of the play (for a reader who prefers reduced motion) is taken at: the shot has just been taken. */
+export const PLAY_STILL = 6.4;
+/** The seconds the dots fade in and out at the ends of a run, so that the play does not jump back to its start in view. */
+export const PLAY_FADE = 0.5;
+/** The home skaters, as waypoints `[seconds, x, y]`: the home team attacks to the right. */
+const HOME = {
+    h4: { number: 4, way: [[0, 24, 26], [1.2, 30, 30], [3.5, 60, 24], [6, 110, 30], [8, 130, 35], [10, 135, 38]] },
+    h6: { number: 6, way: [[0, 24, 58], [1.5, 40, 60], [3.5, 75, 58], [6, 120, 55], [8, 140, 50], [10, 145, 48]] },
+    h17: { number: 17, way: [[0, 45, 12], [1.2, 48, 12], [2.6, 85, 14], [4, 130, 12], [5.4, 165, 18], [6.8, 176, 28], [10, 170, 30]] },
+    h9: { number: 9, way: [[0, 60, 40], [2.4, 80, 40], [3.6, 105, 36], [5, 150, 42], [6.2, 166, 42], [7, 180, 44], [10, 178, 46]] },
+    h22: { number: 22, way: [[0, 55, 70], [2.6, 90, 70], [4.2, 135, 64], [5.6, 165, 60], [6.4, 178, 50], [10, 176, 52]] },
+};
+/** The away skaters, who fall back into their own end as the rush comes. */
+const AWAY = {
+    a11: { number: 11, way: [[0, 95, 40], [2, 110, 42], [4, 150, 44], [6, 170, 43], [10, 180, 44]] },
+    a14: { number: 14, way: [[0, 100, 20], [3, 125, 22], [5, 160, 24], [6.5, 175, 26], [10, 178, 30]] },
+    a27: { number: 27, way: [[0, 98, 65], [3, 128, 62], [5, 158, 62], [6.5, 176, 62], [10, 178, 60]] },
+    a5: { number: 5, way: [[0, 150, 30], [4, 160, 30], [6, 172, 34], [10, 180, 32]] },
+    a8: { number: 8, way: [[0, 150, 55], [4, 162, 54], [6, 172, 52], [10, 180, 54]] },
+};
+/** The goalies: the home one stays on his line, the away one moves across his crease as the shot comes. */
+const HOME_GOALIE = [11, 42.5];
+const AWAY_GOAL = [189, 42.5];
+/** A point of a way at a time: a cubic through the waypoints with the slope between the neighbours at each, so that a skater never stops or turns on a corner. */
+export function at(way, t) {
+    const last = way.length - 1;
+    if (t <= way[0][0])
+        return [way[0][1], way[0][2]];
+    if (t >= way[last][0])
+        return [way[last][1], way[last][2]];
+    let i = 0;
+    while (i < last - 1 && t >= way[i + 1][0])
+        i += 1;
+    const [t0, x0, y0] = way[i];
+    const [t1, x1, y1] = way[i + 1];
+    const slope = (k) => {
+        const a = way[Math.max(0, k - 1)];
+        const b = way[Math.min(last, k + 1)];
+        const span = b[0] - a[0];
+        return span === 0 ? [0, 0] : [(b[1] - a[1]) / span, (b[2] - a[2]) / span];
+    };
+    const [m0, m1] = [slope(i), slope(i + 1)];
+    const h = t1 - t0;
+    const s = (t - t0) / h;
+    const [s2, s3] = [s * s, s * s * s];
+    const [h00, h10, h01, h11] = [2 * s3 - 3 * s2 + 1, s3 - 2 * s2 + s, -2 * s3 + 3 * s2, s3 - s2];
+    return [h00 * x0 + h10 * h * m0[0] + h01 * x1 + h11 * h * m1[0], h00 * y0 + h10 * h * m0[1] + h01 * y1 + h11 * h * m1[1]];
+}
+const lerp = (a, b, u) => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u];
+const round = (n) => Math.round(n * 100) / 100;
+const LEGS = [
+    { from: 0, to: 1.2, carrier: "h4" },
+    { from: 1.2, to: 1.8, carrier: null },
+    { from: 1.8, to: 2.6, carrier: "h17" },
+    { from: 2.6, to: 3.6, carrier: null },
+    { from: 3.6, to: 6.2, carrier: "h9" },
+    { from: 6.2, to: 6.55, carrier: null },
+    { from: 6.55, to: PLAY_SECONDS, carrier: "net" },
+];
+const WAYS = Object.fromEntries([...Object.entries(HOME), ...Object.entries(AWAY)].map(([id, one]) => [id, one.way]));
+const where = (id, t) => (id === "net" ? AWAY_GOAL : at(WAYS[id], t));
+/** The puck at a time. */
+export function puckAt(t) {
+    const time = Math.min(Math.max(t, 0), PLAY_SECONDS);
+    const index = LEGS.findIndex((leg) => time <= leg.to);
+    const leg = LEGS[index < 0 ? LEGS.length - 1 : index];
+    const carried = (id, when) => {
+        if (id === "net")
+            return AWAY_GOAL;
+        const [x, y] = where(id, when);
+        return [x + 2.5, y];
+    };
+    if (leg.carrier !== null)
+        return carried(leg.carrier, time);
+    // A pass or a shot goes from the carrier before it, at its start, to the carrier after it, at its end.
+    const [before, after] = [LEGS[LEGS.indexOf(leg) - 1], LEGS[LEGS.indexOf(leg) + 1]];
+    return lerp(carried(before.carrier, leg.from), after.carrier === "net" ? AWAY_GOAL : carried(after.carrier, leg.to), (time - leg.from) / (leg.to - leg.from));
+}
+/** The away goalie's place: across his crease a little as the shot is taken, and back. */
+function awayGoalie(t) {
+    const bump = Math.max(0, 1 - Math.abs(t - 6.45) / 0.6);
+    return [AWAY_GOAL[0] - 1, AWAY_GOAL[1] - 3 * bump];
+}
+/** Who has the puck at a time, as a replay says it: a skater's id, or `null` while it is passed or shot. */
+const possessionAt = (t) => {
+    const leg = LEGS.find((one) => t >= one.from && t < one.to);
+    return leg === undefined || leg.carrier === null || leg.carrier === "net" ? null : leg.carrier;
+};
+/** The frames of the play, a tenth of a second apart. */
+function frames() {
+    const out = [];
+    for (let step = 0; step <= PLAY_SECONDS * 10; step += 1) {
+        const t = step / 10;
+        const objects = [];
+        for (const [id, one] of Object.entries(HOME))
+            objects.push({ id, team: "home", number: one.number, x: round(at(one.way, t)[0]), y: round(at(one.way, t)[1]) });
+        objects.push({ id: "h30", team: "home", number: 30, x: HOME_GOALIE[0], y: HOME_GOALIE[1] });
+        for (const [id, one] of Object.entries(AWAY))
+            objects.push({ id, team: "away", number: one.number, x: round(at(one.way, t)[0]), y: round(at(one.way, t)[1]) });
+        const goalie = awayGoalie(t);
+        objects.push({ id: "a35", team: "away", number: 35, x: round(goalie[0]), y: round(goalie[1]) });
+        const puck = puckAt(t);
+        objects.push({ id: "puck", team: "puck", x: round(puck[0]), y: round(puck[1]) });
+        const holder = possessionAt(t);
+        out.push({ t, objects, possession: holder });
+    }
+    return out;
+}
+const EVENTS = [
+    { t: 1.2, kind: "pass", team: "home", by: "h4", to: "h17", until: 1.8 },
+    { t: 2.6, kind: "pass", team: "home", by: "h17", to: "h9", until: 3.6 },
+    { t: 6.2, kind: "shot", team: "home", by: "h9", x2: AWAY_GOAL[0], y2: AWAY_GOAL[1], until: 6.55 },
+    { t: 6.55, kind: "goal", team: "home", by: "h9", x: AWAY_GOAL[0], y: AWAY_GOAL[1] },
+];
+/** The play, as a replay's timeline in the surface's own feet. It is made once. */
+export const ILLUSTRATIVE_PLAY = Object.freeze({ frames: frames(), events: EVENTS });
+/** How the play is drawn: a short trail behind the puck, the dots large enough to see from the stands, events that stay a moment. */
+export const PLAY_LOOK = Object.freeze({ trail: 1.2, hold: 1.5, scale: 1.7, numbers: true });
+/** Where a moment of a run is in the play, looping: `seconds` after the run began, brought into one period. */
+export const playMoment = (seconds) => ((seconds % PLAY_PERIOD) + PLAY_PERIOD) % PLAY_PERIOD;
+/** How much of the play shows at a moment of a run: it fades in at the start and out at the end of each run. 0 to 1. */
+export function playAlpha(moment) {
+    const m = Math.min(Math.max(moment, 0), PLAY_PERIOD);
+    return Math.min(1, m / PLAY_FADE, (PLAY_PERIOD - m) / PLAY_FADE);
+}
+/**
+ * The play at a moment of a run, as the layers' SVG (a `g.ky-layers` in the drawing's own feet, to go inside an `svg.kyogijo` with the floor's viewBox): the dots with their numbers, the puck and its trail, and the events that are on
+ * the ice at that time, drawn by the replay's own layers. The same moment always gives the same string.
+ */
+export function playMarkup(moment, options) {
+    const t = Math.min(playMoment(moment), PLAY_SECONDS);
+    const language = options.language === "ja" ? "ja" : "en";
+    const surface = { sport: "nhl", id: options.id, language };
+    return renderLayers(surface, replayLayers(ILLUSTRATIVE_PLAY, t, PLAY_LOOK, language)).svg;
+}

package/dist/flythrough.markup.js

@@ -75,6 +75,7 @@ export function flythroughMarkup(input) {
         `<div class="kf-layer kf-3d" inert></div>` +
         `<div class="kf-pin" aria-hidden="true"></div>` +
         `<div class="kf-scale" aria-hidden="true"><span class="kf-scale-bar"></span><span class="kf-scale-text"></span></div>` +
+        `<div class="kf-badge" aria-hidden="true">${esc(words.illustrative)}</div>` +
         `<div class="kf-caption" aria-hidden="true"><span class="kf-title">${esc(intro.name)}</span><span class="kf-text">${esc(intro.text)}</span></div>` +
         `</div>` +
         `<p class="kf-help" id="${esc(input.id)}-help">${esc(words.keys)}</p>` +

package/dist/flythrough.path.d.ts

@@ -1,15 +1,16 @@
 /** The stages of the fly-through, in order. */
-export type StageId = "map" | "city" | "arena" | "bowl" | "rink";
+export type StageId = "map" | "city" | "arena" | "bowl" | "rink" | "game";
 /** 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", "logLens", "roof"];
+export declare const CHANNELS: readonly ["logSpan", "ax", "ay", "north", "map", "site", "arena", "yaw", "pitch", "logZoom", "logLens", "roof", "game"];
 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;
- * `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).
+ * `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), `roof` is how much of the building's roof shows and `game` how much of the
+ * play on the ice shows (each 0 to 1).
  */
 export type Camera = Record<Channel, number>;
 /** What the path needs to know of the page and the venue. */
@@ -92,7 +93,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. `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. */
+/** 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 the rink turns bare before the play comes onto it, and `fade` how long the play takes to show. */
 export declare const PACE: {
     readonly dwell: 1.6;
     readonly step: 1.25;
@@ -105,6 +106,7 @@ export declare const PACE: {
     readonly over: 2.2;
     readonly settle: 2.2;
     readonly stay: 2;
+    readonly fade: 0.6;
 };
 /**
  * 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

package/dist/flythrough.path.js

@@ -5,9 +5,9 @@
 // Node, tested frame by frame, and handed to the mount, which draws it.
 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", "bowl", "rink"];
+export const STAGE_IDS = ["map", "city", "arena", "bowl", "rink", "game"];
 /** The channels of the camera. */
-export const CHANNELS = ["logSpan", "ax", "ay", "north", "map", "site", "arena", "yaw", "pitch", "logZoom", "logLens", "roof"];
+export const CHANNELS = ["logSpan", "ax", "ay", "north", "map", "site", "arena", "yaw", "pitch", "logZoom", "logLens", "roof", "game"];
 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. */
@@ -53,34 +53,33 @@ function hermite(times, values, slopes, time) {
     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);
+const TABLES = new WeakMap();
+function tableOf(keys) {
+    const known = TABLES.get(keys);
     if (known !== undefined)
         return known;
     const times = keys.map((key) => key.t);
-    const made = {};
+    const values = {};
+    const slopes = {};
     for (const channel of CHANNELS) {
-        const slopes = monotoneSlopes(times, keys.map((key) => key.camera[channel]));
+        values[channel] = keys.map((key) => key.camera[channel]);
+        slopes[channel] = monotoneSlopes(times, values[channel]);
         keys.forEach((key, i) => {
             const own = key.slope?.[channel];
             if (own !== undefined)
-                slopes[i] = own;
+                slopes[channel][i] = own;
         });
-        made[channel] = slopes;
     }
-    SLOPES.set(keys, made);
+    const made = { times, values, slopes };
+    TABLES.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 { times, values, slopes } = tableOf(flight.keys);
     const out = {};
     for (const channel of CHANNELS)
-        out[channel] = hermite(times, keys.map((key) => key.camera[channel]), slopes[channel], time);
+        out[channel] = hermite(times, values[channel], slopes[channel], time);
     if (time > flight.end)
         out.yaw += flight.tail * (time - flight.end);
     return out;
@@ -107,9 +106,9 @@ 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, 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 };
+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, game: 0 };
+/** 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 the rink turns bare before the play comes onto it, and `fade` how long the play takes to show. */
+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, fade: 0.6 };
 /**
  * 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,
@@ -148,7 +147,7 @@ export function flightPlan(input) {
     // 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]]) {
+    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], [rinkTurn, rinkTurn, PACE.fade]]) {
         yaw -= ((from + to) / 2) * seconds;
         yaws.push(yaw);
     }
@@ -171,9 +170,13 @@ export function flightPlan(input) {
         },
         {
             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, game: 0 }, slope: { yaw: -rinkTurn } }],
+        },
+        {
+            id: "game",
             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 } },
+                { 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, game: 0 }, slope: { yaw: -rinkTurn } },
+                { dt: PACE.fade, camera: { ...near, arena: 1, site: 0, yaw: yaws[5], pitch: seat.pitch, logZoom: ln(seat.zoom), logLens: ln(seat.lens), roof: 0, game: 1 }, slope: { yaw: -rinkTurn } },
             ],
         },
     ];
@@ -208,7 +211,8 @@ export function flightPlan(input) {
         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 },
+        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, game: 0 },
+        game: { ...BASE, ...near, map: 0, site: 0, arena: 1, yaw: view.yaw, pitch: seat.pitch, logZoom: ln(seat.zoom), logLens: ln(seat.lens), roof: 0, game: 1 },
     };
     return {
         keys,

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-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}";
+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-badge{position:absolute;left:12px;top:12px;padding:3px 10px;border-radius:999px;background:var(--kf-panel);border:1px solid var(--kf-line);font-size:.8rem;font-weight:700;color:var(--kf-ink);pointer-events:none;opacity:0;visibility:hidden}\n.kf-game{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;z-index:1}\n.kf-game svg{display:block;width:100%;height:100%;overflow:visible}\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

@@ -33,6 +33,9 @@ export const FLYTHROUGH_STYLE = `.kf{${LIGHT};color:var(--kf-ink);font:16px/1.45
 .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-badge{position:absolute;left:12px;top:12px;padding:3px 10px;border-radius:999px;background:var(--kf-panel);border:1px solid var(--kf-line);font-size:.8rem;font-weight:700;color:var(--kf-ink);pointer-events:none;opacity:0;visibility:hidden}
+.kf-game{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;z-index:1}
+.kf-game svg{display:block;width:100%;height:100%;overflow:visible}
 .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}

package/dist/flythrough.words.d.ts

@@ -25,6 +25,8 @@ export interface FlythroughWords {
     /** The credit of the map and of the building's outline, drawn with the picture. */
     creditMap: string;
     creditPlain: string;
+    /** The label on the picture while the play is on the ice: it is made up for the picture. */
+    illustrative: string;
     /** The sentence on a still stage, for a reader who prefers reduced motion. */
     still: string;
 }