@johnmorrisdotca/kyogijo-stadiums 0.51.0 → 0.52.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,7 @@
 /** 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`. */

package/dist/turn.replay.d.ts

@@ -0,0 +1,56 @@
+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;
+}
+/**
+ * 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;
+}
+/** 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,139 @@
+import { createReplayView, replayDriver, replayPainter } from "./replay.dom.js";
+import { useTurnReplay } from "./turn.dom.js";
+import { drawFrameOf, replayPlacer, replaySnapshot } from "./replay.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;
+    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) => {
+            painter.paint(t);
+            place(t);
+            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);
+    };
+    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();
+            floorSvg = null;
+            view.setDecorate(undefined);
+        },
+    };
+}
+// The view's `replay` plays with this file's code once it is loaded.
+useTurnReplay({ attach: attachTurnReplay, flat: createReplayView });

package/dist/turn.replay.js

@@ -0,0 +1,82 @@
+// A replay on the 3D view, as data: the floor is the replay's frame with the ball or the puck, its trail and the events on it, and every player and official stands up on it as a
+// disc that faces the eye (a circle for the home side, a square for the away side, a triangle for an official, each with its number), the marks of the flat replay stood up. Pure:
+// the same model, timeline, time and look give the same model. `turn.replay.dom.ts` moves it in a page.
+import { esc, num } from "./format.js";
+import { drawFrameOf, replayCast, replayPlacer, replaySnapshot } from "./replay.js";
+import { n } from "./turn.kit.js";
+/** Who stands up on a 3D view: the players and the officials. The ball and the puck stay on the floor. */
+export const STANDING = ["home", "away", "official"];
+/** What stands up is in these groups of the flat replay; the 3D view's floor draws the rest (`keepOnFloor`). */
+const STOOD = new Set(["replay-players", "replay-numbers", "replay-officials"]);
+/** 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 const keepOnFloor = (group) => !STOOD.has(group.id);
+/**
+ * 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 function discSize(area, look = {}) {
+    const scale = typeof look.scale === "number" && Number.isFinite(look.scale) && look.scale > 0 ? look.scale : 1;
+    return Math.hypot(area.w, area.h) * 0.03 * scale;
+}
+/** The playing surface of a model, in feet: what stands on it says, else the whole floor. */
+export const playingArea = (model) => {
+    const area = model.uprights.area;
+    return area === undefined ? model.viewBox : { w: area.x1 - area.x0, h: area.y1 - area.y0 };
+};
+/** 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 function floorVars(floor) {
+    const style = /^<svg[^>]*\sstyle="([^"]*)"/.exec(floor)?.[1];
+    return style === undefined ? "" : style.split(";").filter((rule) => /^--ky-[\w-]+:/.test(rule)).join(";");
+}
+/** 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 function discMarkup(o, d, sport, theme, vars) {
+    const r = d / 2;
+    const edge = d * 0.06;
+    const shape = o.team === "home"
+        ? `<circle class="ky-h" cx="${n(r)}" cy="${n(r)}" r="${n(r - edge)}"/>`
+        : o.team === "away"
+            ? `<rect class="ky-a" x="${n(edge)}" y="${n(edge)}" width="${n(d - 2 * edge)}" height="${n(d - 2 * edge)}" rx="${n(d * 0.08)}"/>`
+            : `<path d="M${n(r)} ${n(edge)}L${n(d - edge)} ${n(d - edge)}L${n(edge)} ${n(d - edge)}Z"/>`;
+    const number = o.number === undefined || o.number === "" || o.team === "official" ? "" : `<text class="ky-lt" x="${n(r)}" y="${n(r)}" text-anchor="middle" dominant-baseline="central" font-size="${n(d * 0.46)}">${esc(String(o.number))}</text>`;
+    const themed = theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : "";
+    return `<g class="kyogijo" data-sport="${esc(sport)}"${themed}${vars === "" ? "" : ` style="${esc(vars)}"`}><g class="ky-pts" style="--w:${n(d * 0.05)}">${shape}</g>${number}</g>`;
+}
+/** 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 function discPlane(o, x, y, d, lift, svg) {
+    return { id: `replay-${o.id}`, kind: "player", o: [x - d / 2, y, lift + d], u: [d, 0, 0], v: [0, 0, -d], svg, billboard: true, lean: true };
+}
+/** 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 function moveDisc(plane, x, y, d, lift) {
+    plane.o = [x - d / 2, y, lift + d];
+}
+/** 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 const replayFloorOptions = (model) => ({ ...model.options, id: `${model.id}-replay` });
+/**
+ * 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 function replayTurnModel(model, timeline, t, look = {}) {
+    const stand = look.stand !== false;
+    const floorOptions = replayFloorOptions(model);
+    const floor = drawFrameOf(floorOptions, timeline, t, look, stand ? keepOnFloor : () => true);
+    const size = discSize(playingArea(model), look);
+    const discs = new Map();
+    if (!stand)
+        return { model: { ...model, floor }, discs, size, floorOptions };
+    const sport = String(model.options.sport ?? "");
+    const theme = model.options.theme;
+    const vars = floorVars(floor);
+    const lift = model.uprights.lift;
+    const snap = replaySnapshot(timeline, t, look);
+    const placed = replayPlacer(floorOptions, timeline)(snap.objects.map((o) => [o.x, o.y]));
+    const here = new Map(snap.objects.map((o, i) => [o.id, placed[i]]));
+    for (const o of replayCast(timeline)) {
+        if (!STANDING.includes(o.team))
+            continue;
+        const at = here.get(o.id);
+        discs.set(o.id, { plane: discPlane(o, at?.[0] ?? 0, at?.[1] ?? 0, size, lift, discMarkup(o, size, sport, theme, vars)), on: at !== undefined });
+    }
+    return { model: { ...model, floor, planes: [...model.planes, ...[...discs.values()].map((disc) => disc.plane)] }, discs, size, floorOptions };
+}
+/** A number for a test or a page that wants to know where a disc stands: its middle on the floor, in feet. */
+export const discAt = (plane) => `${num(plane.o[0] + plane.u[0] / 2)} ${num(plane.o[1])}`;

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export declare const VERSION = "0.51.0";
+export declare const VERSION = "0.52.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export const VERSION = "0.51.0";
+export const VERSION = "0.52.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Kyogijo Stadiums 競技場, 40 sports' surfaces as SVG, drawn to scale from the rulebooks: NFL, CFL and IFAF football fields, an NHL rink, an NBA court, MLB ballparks, soccer pitches, curling sheets, athletics stadiums, speed skating, short track and figure skating rinks, swimming pools, water polo fields, diving wells, artistic swimming areas, and the courts and fields of tennis, volleyball (indoor, beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet, netball, lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budo of judo, karate, kendo, sumo and kyudo with a dojo of tatami laid as real units, the MMA cage, with each team's name and logo on its side and the score in the middle, stands and a crowd, a pageant of flags, and a 3D view. Light and dark, accessible, a compact badge for lists, a helper for React and a custom element. Zero dependencies.",
   "keywords": [
     "sports",
@@ -67,6 +67,7 @@
   "type": "module",
   "sideEffects": [
     "./dist/element-define.js",
+    "./dist/turn.replay.dom.js",
     "./dist/frames.providers.js",
     "./dist/full.js",
     "./dist/arenas.js",