@johnmorrisdotca/kyogijo-stadiums 0.51.0 → 0.53.0

package/dist/turn.dom.js

@@ -12,6 +12,20 @@ import { turnBoardMarkup } from "./overlay.js";
 import { attachOutside3d } from "./outside.dom.js";
 import { TIER_PROFILES, createGovernor, handheld, layerBudget, qualityOf, rasterOf, rasterShares, tierOf, viewShare, FLOOR_SHARE } from "./quality.js";
 import { size } from "./turn.kit.js";
+/**
+ * The replay's own code, which `turn.replay.dom.ts` puts in when it is loaded (the `/turn` entry and the element load it): a page that only turns a view (a district, a tournament layout) carries none of the replay
+ * and its layers.
+ */
+let replayKit;
+/** Put the replay's code in: called once by `turn.replay.dom.ts`. */
+export function useTurnReplay(kit) {
+    replayKit = kit;
+}
+const kitOf = () => {
+    if (replayKit === undefined)
+        throw new Error("the replay is not loaded: import mountKyogijoTurn from @johnmorrisdotca/kyogijo-stadiums/turn");
+    return replayKit;
+};
 /** True where the page can draw a plane in 3D by one `matrix3d`: that is, nearly everywhere with a stylesheet. */
 export function turnSupported(win = typeof window === "undefined" ? undefined : window) {
     const css = win?.CSS;
@@ -34,13 +48,13 @@ const between = (from, to, t) => ({ yaw: from.yaw + (nearest(from.yaw, to.yaw) -
  * ```
  */
 export function mountKyogijoTurn(host, options, settings = {}) {
-    return mountTurn(host, options, settings, buildTurn);
+    return mountTurn(host, options, settings, buildTurn, true);
 }
 /**
  * Mount any 3D model (`mountKyogijoTurn` is this with the model of one surface; `mountMultiTurn` with a tournament layout's): `build` makes the model from what `update` is given, and the rest, the controls, the pointer, the keys
  * and the auto-turn, is the same.
  */
-export function mountTurn(host, options, settings, build) {
+export function mountTurn(host, options, settings, build, replayable = false) {
     const doc = host.ownerDocument;
     const win = doc.defaultView;
     /** The venue's settings as they are now: the mounted ones, altered by `update`. */
@@ -71,6 +85,10 @@ export function mountTurn(host, options, settings, build) {
     };
     const sameRaster = (a, b) => (typeof a === "number" || typeof b === "number" ? a === b : a.length === b.length && a.every((x, i) => x === b[i]));
     let current = options;
+    /** What a replay lays on a model (its floor at the replay's time, and the players standing on it), and what it does once the world is drawn again: both unset without a replay. */
+    let decorate;
+    let rendered;
+    let replaying;
     let model = build(options, { ...settings, quality: tier });
     if (model.tiered !== true)
         tier = "high";
@@ -89,7 +107,12 @@ export function mountTurn(host, options, settings, build) {
     let alive = true;
     if (!supported) {
         // The flat drawing, with a sentence that says why it does not turn when the browser is the reason.
+        let flatReplay;
         const flat = (next) => {
+            if (flatReplay !== undefined) {
+                flatReplay.view.draw(floorOptions(next));
+                return;
+            }
             host.innerHTML = `<div class="ky-turn" data-mode="flat"><style>${KYOGIJO_TURN_STYLE}</style>${model.flat ?? drawKyogijo({ ...floorOptions(next), board: next.board })}${model.turnable ? `<p class="ky-turn-flat">${esc(turnWords(model).flat)}</p>` : ""}</div>`;
         };
         flat(options);
@@ -111,12 +134,33 @@ export function mountTurn(host, options, settings, build) {
             update: (next, change) => {
                 if (change?.venue !== undefined)
                     venue = { ...(typeof venue === "object" ? venue : {}), ...change.venue };
+                current = next;
                 model = build(next, { ...settings, id: settings.id ?? model.id, venue });
                 flat(next);
             },
             svg: () => (alive ? host.querySelector("svg.kyogijo") : null),
+            // The flat replay, where the 3D view cannot be drawn.
+            replay(timeline, replaySettings = {}) {
+                if (!replayable)
+                    throw new Error("a replay plays on one surface, not on a layout");
+                flatReplay?.view.destroy();
+                const view = kitOf().flat(host, timeline, replaySettings, floorOptions(current));
+                const mine = { view, timeline, settings: replaySettings };
+                flatReplay = mine;
+                return {
+                    ...view.controller,
+                    destroy() {
+                        if (flatReplay !== mine)
+                            return;
+                        view.destroy();
+                        flatReplay = undefined;
+                        flat(current);
+                    },
+                };
+            },
             destroy: () => {
                 alive = false;
+                flatReplay?.view.destroy();
                 host.replaceChildren();
             },
         };
@@ -239,9 +283,11 @@ export function mountTurn(host, options, settings, build) {
     };
     /** Draw the world again, from the model of the tier and the options now: the camera, the auto-turn and the pointer are not touched (the elements are the only thing replaced). */
     const renderWorld = () => {
-        const known = made.get(tier);
-        model = known ?? build(current, { ...settings, quality: tier, id: settings.id ?? baseId, venue, preset: undefined, view });
-        made.set(tier, model);
+        // A model with a replay on it is made fresh each time, at the replay's time: only a plain one is kept.
+        const known = decorate === undefined ? made.get(tier) : undefined;
+        const plain = known ?? (decorate === undefined ? undefined : made.get(tier)) ?? build(current, { ...settings, quality: tier, id: settings.id ?? baseId, venue, preset: undefined, view });
+        made.set(tier, plain);
+        model = decorate === undefined ? plain : decorate(plain);
         ceiling = ceilingFor(model, stage.clientWidth || 960, stage.clientHeight || 600, shown.zoom);
         raster = rasterFor(model);
         const layout = layoutOf(model, shown, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens, false, raster);
@@ -263,6 +309,7 @@ export function mountTurn(host, options, settings, build) {
         root.dataset.quality = quality;
         root.dataset.tier = tier;
         root.dataset.share = String(ceiling);
+        rendered?.();
     };
     /** The governor stepped: draw at the new tier. */
     const retier = (next) => {
@@ -419,11 +466,36 @@ export function mountTurn(host, options, settings, build) {
         go(opening, 560, "none");
         say(turnWords(model).reset);
     };
+    // ---- One frame request a frame: the auto-turn and a replay on the view ask through this, and share one animation frame when both run. ----
+    const queued = new Map();
+    let queueId = 0;
+    let pendingFrame = 0;
+    const requestFrame = (callback) => {
+        queueId += 1;
+        queued.set(queueId, callback);
+        if (pendingFrame === 0 && win !== null) {
+            pendingFrame = win.requestAnimationFrame((stamp) => {
+                pendingFrame = 0;
+                const run = [...queued.values()];
+                queued.clear();
+                for (const one of run)
+                    one(stamp);
+            });
+        }
+        return queueId;
+    };
+    const cancelFrame = (id) => {
+        queued.delete(id);
+        if (queued.size === 0 && pendingFrame !== 0) {
+            win?.cancelAnimationFrame(pendingFrame);
+            pendingFrame = 0;
+        }
+    };
     // ---- The auto-turn: a trophy case's slow turn. It runs only when asked, holds while the pointer holds the view, and does nothing while the page is hidden. ----
     const hidden = () => doc.hidden === true;
     const stopTick = () => {
         if (tickFrame !== undefined)
-            win?.cancelAnimationFrame(tickFrame);
+            cancelFrame(tickFrame);
         tickFrame = undefined;
         lastTick = undefined;
     };
@@ -455,7 +527,7 @@ export function mountTurn(host, options, settings, build) {
     };
     const loop = () => {
         if (tickFrame === undefined && playing && alive && win !== null)
-            tickFrame = win.requestAnimationFrame(tick);
+            tickFrame = requestFrame(tick);
     };
     /** Start or stop the auto-turn. `quiet` leaves the live region alone (a key or a drag stopped it, and says its own thing). */
     const setPlaying = (next, quiet = false) => {
@@ -531,7 +603,7 @@ export function mountTurn(host, options, settings, build) {
     root.addEventListener("click", onClick);
     // ---- Keys. ----
     const onKey = (event) => {
-        if (event.ctrlKey || event.metaKey || event.altKey || KEYS[event.key] !== true)
+        if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey || KEYS[event.key] !== true)
             return;
         const big = event.shiftKey;
         const yaw = big ? STEP.yawBig : STEP.yaw;
@@ -764,10 +836,51 @@ export function mountTurn(host, options, settings, build) {
             return last === undefined ? undefined : { ms: last.ms, people: last.stats.people, mode: last.stats.mode, pixels: last.pixels };
         },
         svg: () => (alive ? root.querySelector(".ky-turn-floor svg.kyogijo") : null),
+        replay(timeline, replaySettings = {}) {
+            if (!alive)
+                throw new Error("this view was destroyed");
+            if (!replayable)
+                throw new Error("a replay plays on one surface, not on a layout");
+            replaying?.destroy();
+            const internals = {
+                doc,
+                root,
+                stage,
+                model: () => model,
+                setDecorate(next, after) {
+                    decorate = next;
+                    rendered = after;
+                    // (A view that is going away is not drawn again.)
+                    if (!alive)
+                        return;
+                    renderWorld();
+                    paint(shown);
+                },
+                repaint: () => {
+                    if (alive)
+                        paint(shown);
+                },
+                requestFrame,
+                cancelFrame,
+            };
+            const mine = kitOf().attach(internals, timeline, replaySettings);
+            replaying = mine;
+            return {
+                ...mine,
+                destroy() {
+                    if (replaying !== mine)
+                        return;
+                    replaying = undefined;
+                    mine.destroy();
+                },
+            };
+        },
         destroy() {
             if (!alive)
                 return;
             alive = false;
+            replaying?.destroy();
+            replaying = undefined;
             clearTimeout(settling);
             outside?.destroy();
             stop();

package/dist/turn.kit.d.ts

@@ -1,7 +1,8 @@
+import type { HungBoard } from "./venue.boards.ts";
 /** A point or a direction: x, y, z in feet. */
 export type V3 = readonly [number, number, number];
 /** What a plane is a part of: it is the class of its element (`ky-up-<kind>`) and what a test finds it by. */
-export type PartKind = "mast" | "post" | "net" | "tape" | "antenna" | "board" | "glass" | "rim" | "stanchion" | "frame" | "goal" | "flag" | "stump" | "leg" | "table" | "pylon" | "wall" | "screen" | "pole" | "ground" | "target" | "seats" | "concourse" | "fascia" | "roof" | "banner" | "platform" | "rail" | "matedge" | "shrine" | "surround" | "chair" | "desk" | "card" | "sign" | "apron" | "bench" | "floor" | "ribbon" | "hung-board" | "block";
+export type PartKind = "mast" | "post" | "net" | "tape" | "antenna" | "board" | "glass" | "rim" | "stanchion" | "frame" | "goal" | "flag" | "stump" | "leg" | "table" | "pylon" | "wall" | "screen" | "pole" | "ground" | "target" | "seats" | "concourse" | "fascia" | "roof" | "banner" | "platform" | "rail" | "matedge" | "shrine" | "surround" | "chair" | "desk" | "card" | "sign" | "apron" | "bench" | "floor" | "ribbon" | "hung-board" | "block" | "player";
 /** One flat rectangle. Its own x runs along `u` (its whole length) and its own y along `v`; `o` is the corner both start from. `svg` is what is drawn on it, in feet along `u` and `v`. */
 export interface Plane {
     /** A name that says what it is and where: `net`, `post-left`, `goal-right-back`. */
@@ -74,6 +75,8 @@ export interface Upright {
     /** A second height worth saying (a net's height at the centre, a post's crossbar), in feet. */
     low?: number;
     planes: Plane[];
+    /** What a scoreboard hung over the surface was made from, so that a replay can draw its faces again with the score and the clock of a time (`replayTurnModel`). */
+    hung?: HungBoard;
 }
 /** The four numbers a plane's SVG needs: its length along `u` and along `v`, in feet. */
 export declare const size: (p: Pick<Plane, "u" | "v">) => [number, number];

package/dist/turn.replay.board.d.ts

@@ -0,0 +1,23 @@
+import { type ReplayBoardState } from "./replay.board.ts";
+import type { ReplayChange, ReplayTimeline } from "./replay.types.ts";
+import type { Plane } from "./turn.kit.ts";
+import type { TurnModel } from "./turn.model.ts";
+import { type HungBoard } from "./venue.boards.ts";
+/** The scoreboards a model has hung over its surface, with what each was made from. */
+export declare const hungBoards: (model: Pick<TurnModel, "uprights">) => HungBoard[];
+/** The planes of a hung scoreboard with the replay's board on it: the same planes (the same ids, in the same places), the faces drawn with the score, the period and the clock. */
+export declare function hungBoardPlanes(hung: HungBoard, state: ReplayBoardState): Plane[];
+/** What is written on a board, as one string: it changes when, and only when, the score, the period or the clock does. */
+export declare const boardKey: (state: ReplayBoardState) => string;
+/** The longest the game clock goes without a write while the replay plays, in milliseconds. */
+export declare const CLOCK_EVERY = 1000;
+/** A scoreboard in the page: its planes' SVG elements, what was last written to each, and what it shows. */
+export interface BoardFollower {
+    /** Find the board's elements in the page after the view drew its world: the model was made at this time, so it already shows `state`. */
+    bind(root: ParentNode, model: TurnModel, state: ReplayBoardState | undefined): void;
+    /** Follow the clock to `t`: write the board if what it shows changed (and, while playing, if the clock has not just been written). */
+    follow(t: number, model: TurnModel, change?: ReplayChange): void;
+    clear(): void;
+}
+/** The follower of a replay's scoreboard. It is idle (no elements, no work) where the view has none. */
+export declare function boardFollower(timeline: ReplayTimeline, now: () => number): BoardFollower;

package/dist/turn.replay.board.js

@@ -0,0 +1,81 @@
+// The scoreboard hung over a 3D view, following a replay: the faces drawn with the score, the period and the game clock of the time the replay is at (`replayBoard`), in the model (pure) and in the
+// page (a few SVG strings written when the board changes, never the view). A goal, a new period, a seek, a step or a pause is written at once; the clock, while the replay plays, once a second at most.
+import { replayBoard } from "./replay.board.js";
+import { centreBoard, safeClock } from "./venue.boards.js";
+/** The scoreboards a model has hung over its surface, with what each was made from. */
+export const hungBoards = (model) => model.uprights.items.flatMap((item) => (item.kind === "hung-board" && item.hung !== undefined ? [item.hung] : []));
+/** The planes of a hung scoreboard with the replay's board on it: the same planes (the same ids, in the same places), the faces drawn with the score, the period and the clock. */
+export function hungBoardPlanes(hung, state) {
+    const clock = safeClock(state.clock);
+    const live = clock === "" ? undefined : { clock, ...(state.period === undefined ? {} : { period: state.period }) };
+    return centreBoard(hung.id, hung.box, hung.lift, { ...hung.look, score: state.score, ...(live === undefined ? {} : { live }) });
+}
+/** What is written on a board, as one string: it changes when, and only when, the score, the period or the clock does. */
+export const boardKey = (state) => `${state.score[0]}-${state.score[1]} ${state.period ?? ""} ${state.clock}`;
+/** The longest the game clock goes without a write while the replay plays, in milliseconds. */
+export const CLOCK_EVERY = 1000;
+const FACE = /-(south|north|east|west)$/;
+/** The follower of a replay's scoreboard. It is idle (no elements, no work) where the view has none. */
+export function boardFollower(timeline, now) {
+    let found = new Map();
+    let shown = "";
+    let state;
+    let wroteAt = Number.NEGATIVE_INFINITY;
+    /** The figures on the faces as text, for a test and for a reader of the page's markup. */
+    const label = (s) => {
+        for (const [id, one] of found) {
+            if (!FACE.test(id))
+                continue;
+            one.face.dataset.score = `${s.score[0]}-${s.score[1]}`;
+            one.face.dataset.period = s.period === undefined ? "" : String(s.period);
+            one.face.dataset.clock = s.clock;
+        }
+    };
+    return {
+        bind(root, model, at) {
+            found = new Map();
+            state = at;
+            if (at === undefined)
+                return;
+            const written = new Map(model.planes.filter((p) => p.kind === "hung-board").map((p) => [p.id, p.svg]));
+            for (const face of root.querySelectorAll(".ky-up-hung-board")) {
+                const svg = face.querySelector(":scope > svg");
+                const id = face.dataset.part ?? "";
+                if (svg !== null && written.has(id))
+                    found.set(id, { svg, face, written: written.get(id) ?? "" });
+            }
+            shown = boardKey(at);
+            wroteAt = now();
+            label(at);
+        },
+        follow(t, model, change) {
+            if (found.size === 0)
+                return;
+            const next = replayBoard(timeline, t);
+            const key = boardKey(next);
+            if (key === shown)
+                return;
+            const moved = state === undefined || state.score[0] !== next.score[0] || state.score[1] !== next.score[1] || state.period !== next.period;
+            const at = now();
+            if (!moved && change?.reason === "tick" && change.state.playing && at - wroteAt < CLOCK_EVERY)
+                return;
+            shown = key;
+            state = next;
+            wroteAt = at;
+            for (const hung of hungBoards(model)) {
+                for (const plane of hungBoardPlanes(hung, next)) {
+                    const one = found.get(plane.id);
+                    if (one === undefined || one.written === plane.svg)
+                        continue;
+                    one.svg.innerHTML = plane.svg;
+                    one.written = plane.svg;
+                }
+            }
+            label(next);
+        },
+        clear() {
+            found = new Map();
+            state = undefined;
+        },
+    };
+}

package/dist/turn.replay.d.ts

@@ -0,0 +1,61 @@
+import { type ReplayBoardState } from "./replay.board.ts";
+import { type ReplayGroup } from "./replay.ts";
+import type { ReplayLook, ReplayObject, ReplayTeam, ReplayTimeline } from "./replay.types.ts";
+import { type Plane } from "./turn.kit.ts";
+import type { TurnModel } from "./turn.model.ts";
+import type { ScoreOptions, SurfaceOptions } from "./types.ts";
+/** Who stands up on a 3D view: the players and the officials. The ball and the puck stay on the floor. */
+export declare const STANDING: readonly ReplayTeam[];
+/** Whether a group of the replay stays on the floor of a 3D view: the trails, the passes, the shots, the goals and the ball do, and the players, their numbers and the officials stand up. */
+export declare const keepOnFloor: (group: Pick<ReplayGroup, "id">) => boolean;
+/** The settings a 3D replay takes beyond the flat replay's look: `stand: false` keeps the players flat on the floor, as the flat replay draws them. */
+export interface TurnReplayLook extends ReplayLook {
+    stand?: boolean;
+    /** `false` leaves a scoreboard hung over the surface as the options made it; by default it shows the replay's score, period and clock (`replayBoard`). */
+    board?: boolean;
+}
+/**
+ * The size of a disc, in feet: a share of the playing surface's diagonal (the area the view is fitted to, not the ground or the building round it), so that it reads on a rink and on a pitch
+ * alike (about 6.5 feet on a hockey rink, 12 on a soccer pitch), times the look's `scale`. It is a mark, not a person: its size says nothing of a player's height.
+ */
+export declare function discSize(area: {
+    w: number;
+    h: number;
+}, look?: ReplayLook): number;
+/** The playing surface of a model, in feet: what stands on it says, else the whole floor. */
+export declare const playingArea: (model: Pick<TurnModel, "viewBox" | "uprights">) => {
+    w: number;
+    h: number;
+};
+/** The custom properties a floor drawing sets on its root (the teams' colours among them): the discs stand outside that SVG and take the same. */
+export declare function floorVars(floor: string): string;
+/** What is drawn on a disc of `d` feet: the flat replay's mark for the side, and the number over it, in the drawing's own classes so that they take its colours, light and dark. */
+export declare function discMarkup(o: Pick<ReplayObject, "team" | "number">, d: number, sport: string, theme: string | undefined, vars: string): string;
+/** The plane of one disc: a billboard that leans to face the eye, its lower edge on the floor when it stands, its middle over (x, y). */
+export declare function discPlane(o: Pick<ReplayObject, "id" | "team" | "number">, x: number, y: number, d: number, lift: number, svg: string): Plane;
+/** Put a disc over a new place on the floor, as `discPlane` does: the plane is the caller's, changed in place, so that a page moving many does not make new ones. */
+export declare function moveDisc(plane: Plane, x: number, y: number, d: number, lift: number): void;
+/** A replay laid on a 3D view's model: what `replayTurnModel` gives back. */
+export interface TurnReplayModel {
+    model: TurnModel;
+    /** The disc of each one standing, by id, and whether it is on the surface at the time. */
+    discs: Map<string, {
+        plane: Plane;
+        on: boolean;
+    }>;
+    /** The disc's size, in feet. */
+    size: number;
+    /** The options the floor was drawn with, its `id` among them. */
+    floorOptions: SurfaceOptions | ScoreOptions;
+    /** What the hung scoreboard shows at the time, when the model has one and the look lets the replay drive it. */
+    board?: ReplayBoardState;
+}
+/** The floor's options for a replay: the model's own, and an id of its own, so that the replay's groups are found in it. */
+export declare const replayFloorOptions: (model: Pick<TurnModel, "id" | "options">) => SurfaceOptions | ScoreOptions;
+/**
+ * A 3D view's model with a replay on it at a time: the floor drawn as the replay's frame (without the players when they stand), and a disc for each player and official the timeline
+ * tracks, after the model's own planes. One that is not on the surface at the time is still a plane, and says so (`on`), so that the elements stay the same while it plays. Pure.
+ */
+export declare function replayTurnModel(model: TurnModel, timeline: ReplayTimeline, t: number, look?: TurnReplayLook): TurnReplayModel;
+/** A number for a test or a page that wants to know where a disc stands: its middle on the floor, in feet. */
+export declare const discAt: (plane: Plane) => string;

package/dist/turn.replay.dom.d.ts

@@ -0,0 +1,23 @@
+import type { KyogijoReplay } from "./mount.ts";
+import type { ReplaySettings, ReplayTimeline } from "./replay.types.ts";
+import type { TurnModel } from "./turn.model.ts";
+import { type TurnReplayLook } from "./turn.replay.ts";
+/** What a 3D view lends a replay: its elements, its model, a way to lay the replay on the model, and a way to paint the view again. */
+export interface TurnInternals {
+    doc: Document;
+    /** The view's root (`.ky-turn`) and the element that turns (`.ky-turn-view`). */
+    root: HTMLElement;
+    stage: HTMLElement;
+    model(): TurnModel;
+    /** Lay a replay on every model the view makes from now on (`undefined` takes it off), draw the world again with it, and call `after` once it is drawn, then and each time after. */
+    setDecorate(decorate: ((model: TurnModel) => TurnModel) | undefined, after?: () => void): void;
+    /** Paint the view as it is now: the planes whose place changed are written, the others are not touched. */
+    repaint(): void;
+    /** The view's own frame requests, which the auto-turn shares: one animation frame a frame, whatever runs. */
+    requestFrame(callback: FrameRequestCallback): number;
+    cancelFrame(id: number): void;
+}
+/** Settings of a replay on a 3D view: the flat replay's, and `stand`. */
+export type TurnReplaySettings = ReplaySettings & TurnReplayLook;
+/** Attach a replay to a 3D view. The controller it gives back has `destroy`, which takes the replay away and leaves the view as it was. */
+export declare function attachTurnReplay(view: TurnInternals, timeline: ReplayTimeline, settings: TurnReplaySettings): KyogijoReplay;

package/dist/turn.replay.dom.js

@@ -0,0 +1,147 @@
+import { createReplayView, replayDriver, replayPainter } from "./replay.dom.js";
+import { useTurnReplay } from "./turn.dom.js";
+import { drawFrameOf, replayPlacer, replaySnapshot } from "./replay.js";
+import { boardFollower } from "./turn.replay.board.js";
+import { keepOnFloor, moveDisc, replayTurnModel } from "./turn.replay.js";
+/** Attach a replay to a 3D view. The controller it gives back has `destroy`, which takes the replay away and leaves the view as it was. */
+export function attachTurnReplay(view, timeline, settings) {
+    const { doc, root, stage } = view;
+    const look = settings;
+    let language = view.model().language;
+    let laid;
+    let floorSvg = null;
+    /** The element of each disc, and whether it was last shown. */
+    let discs = new Map();
+    let placedAt = Number.NaN;
+    /** The scoreboard hung over the surface, which follows the game. */
+    const board = boardFollower(timeline, () => doc.defaultView?.performance.now() ?? 0);
+    const painter = replayPainter({
+        doc,
+        timeline,
+        look,
+        svg: () => floorSvg,
+        options: () => laid?.floorOptions ?? view.model().options,
+        language: () => language,
+        keep: look.stand === false ? undefined : keepOnFloor,
+        redraw: (t) => {
+            // The floor alone is drawn again (a mark that cannot be matched): the planes round it stay.
+            if (floorSvg === null || laid === undefined)
+                return;
+            const scratch = doc.createElement("div");
+            scratch.innerHTML = drawFrameOf(laid.floorOptions, timeline, t, look, look.stand === false ? () => true : keepOnFloor);
+            const fresh = scratch.querySelector("svg.kyogijo");
+            if (fresh === null)
+                return;
+            floorSvg.replaceWith(fresh);
+            floorSvg = fresh;
+        },
+    });
+    /** Move the discs to a time: a plane's place changes, and an element is shown or hidden only when that changes. */
+    const place = (t) => {
+        if (laid === undefined || t === placedAt)
+            return;
+        placedAt = t;
+        const snap = replaySnapshot(timeline, t, look);
+        const placed = replayPlacer(laid.floorOptions, timeline)(snap.objects.map((o) => [o.x, o.y]));
+        const here = new Map();
+        snap.objects.forEach((o, i) => here.set(o.id, placed[i]));
+        const lift = view.model().uprights.lift;
+        for (const [id, disc] of laid.discs) {
+            const at = here.get(id);
+            if (at !== undefined)
+                moveDisc(disc.plane, at[0], at[1], laid.size, lift);
+            const node = discs.get(id);
+            if (node?.el !== null && node !== undefined && node.shown !== (at !== undefined)) {
+                node.shown = at !== undefined;
+                node.el.style.visibility = node.shown ? "" : "hidden";
+            }
+        }
+    };
+    const wrap = doc.createElement("div");
+    wrap.className = "ky-replay ky-turn-replay";
+    const driver = replayDriver(doc, timeline, settings, {
+        paint: (t, change) => {
+            painter.paint(t);
+            place(t);
+            if (look.board !== false)
+                board.follow(t, view.model(), change);
+            view.repaint();
+        },
+        language,
+        keysOn: wrap,
+        holder: wrap,
+        seen: stage,
+        help: "turn",
+        frames: { request: view.requestFrame, cancel: view.cancelFrame },
+    });
+    const { style, hint, bar, live } = driver.parts;
+    wrap.append(style, hint, bar, live);
+    const controls = root.querySelector(".ky-turn-controls");
+    if (controls !== null)
+        controls.after(wrap);
+    else
+        root.append(wrap);
+    // The view's own description, and the replay's keys after it.
+    const described = stage.getAttribute("aria-describedby");
+    stage.setAttribute("aria-describedby", `${described ?? ""} ${hint.id}`.trim());
+    const shortcuts = stage.getAttribute("aria-keyshortcuts");
+    stage.setAttribute("aria-keyshortcuts", `${shortcuts ?? ""} , . Shift+, Shift+. End`.trim());
+    // The keys of the view itself: Space plays and pauses the replay (the Auto-turn button still turns the view), comma and full stop step, End goes to the end. The arrows stay the view's.
+    const onStageKey = (event) => {
+        const target = event.target;
+        if (target === null || (target !== stage && !stage.contains(target)))
+            return;
+        driver.key(event, "stage");
+    };
+    root.addEventListener("keydown", onStageKey, true);
+    // Each time the view draws its world (now, and again after `update` or a change of quality), the model has the replay at the clock's time: the elements are found again.
+    const after = () => {
+        language = view.model().language;
+        driver.setLanguage(language);
+        floorSvg = root.querySelector(".ky-turn-floor > svg.kyogijo");
+        discs = new Map();
+        if (laid !== undefined) {
+            const byPart = new Map([...root.querySelectorAll(".ky-up-player")].map((el) => [el.dataset.part ?? "", el]));
+            for (const [id, disc] of laid.discs) {
+                const el = byPart.get(disc.plane.id) ?? null;
+                if (el !== null && !disc.on)
+                    el.style.visibility = "hidden";
+                discs.set(id, { el, shown: disc.on });
+            }
+        }
+        const t = driver.controller.state().t;
+        placedAt = t;
+        painter.bind(t);
+        // The scoreboard was drawn by the model at this time: its elements are found again.
+        board.bind(root, view.model(), laid?.board);
+    };
+    view.setDecorate((model) => {
+        laid = replayTurnModel(model, timeline, driver.controller.state().t, look);
+        return laid.model;
+    }, after);
+    if (settings.autoplay === true && driver.controller.state().motion === "smooth" && doc.visibilityState !== "hidden")
+        driver.controller.play();
+    return {
+        ...driver.controller,
+        destroy() {
+            driver.destroy();
+            root.removeEventListener("keydown", onStageKey, true);
+            if (described === null)
+                stage.removeAttribute("aria-describedby");
+            else
+                stage.setAttribute("aria-describedby", described);
+            if (shortcuts === null)
+                stage.removeAttribute("aria-keyshortcuts");
+            else
+                stage.setAttribute("aria-keyshortcuts", shortcuts);
+            wrap.remove();
+            laid = undefined;
+            discs = new Map();
+            board.clear();
+            floorSvg = null;
+            view.setDecorate(undefined);
+        },
+    };
+}
+// The view's `replay` plays with this file's code once it is loaded.
+useTurnReplay({ attach: attachTurnReplay, flat: createReplayView });