@johnmorrisdotca/kyogijo-stadiums 0.50.0 → 0.52.0

package/dist/replay.dom.js

@@ -33,60 +33,30 @@ const ICONS = {
 const icon = (d) => `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="${d}"/></svg>`;
 const pathOf = (points) => points.map(([x, y], i) => `${i === 0 ? "M" : "L"}${num(x)} ${num(y)}`).join("");
 /**
- * Attach a replay to a container: the stage with the drawing, the controls under it, the keyboard and the live region. The drawing is written once
- * and then only the marks that move are moved, on `requestAnimationFrame`; a mark that comes or goes (an object that enters, an event that
- * begins) redraws the replay's own layers, never the surface. With `prefers-reduced-motion` nothing plays by itself and play steps instead.
+ * The painter of a replay: it moves the marks that move and nothing else. A mark that comes or goes (an object that enters, an event that begins) draws the replay's own group
+ * again, never the surface; a group whose marks cannot be matched to elements one for one is drawn again each time.
  */
-export function createReplayView(host, timeline, settings, initial) {
-    const doc = host.ownerDocument;
-    const info = replayInfo(timeline);
-    const media = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : undefined;
-    const motionNow = () => (settings.motion === "smooth" ? "smooth" : settings.motion === "step" ? "step" : media?.matches === true ? "step" : "smooth");
-    const controller = createReplay(timeline, { ...settings, motion: motionNow() });
-    const id = initial.id ?? `ky-r${++counter}`;
-    let options = { ...initial, id };
-    let language = options.language === "ja" ? "ja" : "en";
-    const words = () => KYOGIJO_STRINGS[language].replay;
-    const root = doc.createElement("div");
-    root.className = "ky-replay";
-    const style = doc.createElement("style");
-    style.textContent = REPLAY_STYLE;
-    const stage = doc.createElement("div");
-    stage.className = "ky-stage";
-    stage.tabIndex = 0;
-    stage.setAttribute("role", "group");
-    const hint = doc.createElement("p");
-    hint.className = "ky-hint";
-    hint.id = `${id}-keys`;
-    const bar = doc.createElement("div");
-    bar.className = "ky-controls";
-    bar.setAttribute("role", "group");
-    const live = doc.createElement("div");
-    live.className = "ky-live";
-    live.setAttribute("role", "status");
-    live.setAttribute("aria-live", "polite");
-    root.append(style, stage, hint, bar, live);
-    host.replaceChildren(root);
-    // ---- The painter. ----
-    let svg = null;
-    let placer = replayPlacer(options, timeline);
+export function replayPainter(source) {
+    const { doc, timeline, look } = source;
+    let placer = replayPlacer(source.options(), timeline);
     /** For each group of the replay in the drawing, the marks it holds (their keys): a group whose keys changed is drawn again, the others only move. */
     let shown = new Map();
     let bound = new Map();
     /** The groups whose marks cannot be matched to elements one for one, so that they are drawn again each time. */
     const loose = new Set();
     let painted = Number.NaN;
-    const look = settings;
+    const keep = source.keep ?? (() => true);
+    const idOf = () => source.options().id ?? "";
     const groupsAt = (t) => {
         const snap = replaySnapshot(timeline, t, look);
-        const groups = replayGroups(timeline, snap, look, language);
+        const groups = replayGroups(timeline, snap, look, source.language()).filter(keep);
         const places = placer(snap.objects.map((o) => [o.x, o.y]));
         return { groups, placed: new Map(snap.objects.map((o, i) => [o.id, places[i]])) };
     };
     const positions = (g, placed) => (g.kind === "lines" ? g.coords.map((path) => placer(path)) : g.keys.map((k) => placed.get(k) ?? [0, 0]));
-    const holderOf = (g) => svg?.querySelector(`[id="${id}-${typeof g === "string" ? g : g.id}"]`) ?? null;
+    const holderOf = (g) => source.svg()?.querySelector(`[id="${idOf()}-${typeof g === "string" ? g : g.id}"]`) ?? null;
     /** Match the elements of a group that was just drawn to its marks, remembering where they are. */
-    const bind = (g, placed) => {
+    const bindGroup = (g, placed) => {
         bound.delete(g.id);
         loose.delete(g.id);
         if (!g.moving)
@@ -104,8 +74,9 @@ export function createReplayView(host, timeline, settings, initial) {
     };
     /** Draw the groups that changed again, in their place among the others, and take away the ones that are gone. The surface and the groups that only move are left. */
     const patch = (groups, changed, gone, placed) => {
+        const svg = source.svg();
         const container = svg?.querySelector("g.ky-layers") ?? null;
-        if (svg === null || container === null)
+        if (svg === null || svg === undefined || container === null)
             return false;
         for (const gid of gone) {
             holderOf(gid)?.remove();
@@ -115,7 +86,7 @@ export function createReplayView(host, timeline, settings, initial) {
         }
         for (const g of changed) {
             const scratch = doc.createElementNS(SVG_NS, "g");
-            scratch.innerHTML = renderLayers(options, [g.layer]).svg;
+            scratch.innerHTML = renderLayers(source.options(), [g.layer]).svg;
             const made = scratch.querySelector("g.ky-layers > g.ky-layer");
             if (made === null)
                 return false;
@@ -133,7 +104,7 @@ export function createReplayView(host, timeline, settings, initial) {
                     before.before(made);
             }
             shown.set(g.id, g.keys.join(","));
-            bind(g, placed);
+            bindGroup(g, placed);
         }
         container.setAttribute("data-layers", String(container.querySelectorAll(":scope > g.ky-layer").length));
         return true;
@@ -164,34 +135,59 @@ export function createReplayView(host, timeline, settings, initial) {
             }
         }
     };
-    const paint = (t) => {
-        if (svg === null || t === painted)
-            return;
-        painted = t;
-        const { groups, placed } = groupsAt(t);
-        const changed = groups.filter((g) => loose.has(g.id) || shown.get(g.id) !== g.keys.join(","));
-        const gone = [...shown.keys()].filter((gid) => !groups.some((g) => g.id === gid));
-        if (changed.length > 0 || gone.length > 0) {
-            if (!patch(groups, changed, gone, placed)) {
-                drawStage(t);
-                return;
-            }
-        }
-        move(groups, placed);
-    };
-    function drawStage(t) {
-        stage.innerHTML = drawFrame(options, timeline, t, look);
-        svg = stage.querySelector("svg.kyogijo");
-        placer = replayPlacer(options, timeline);
+    const bind = (t) => {
+        placer = replayPlacer(source.options(), timeline);
         const { groups, placed } = groupsAt(t);
         shown = new Map(groups.map((g) => [g.id, g.keys.join(",")]));
         bound = new Map();
         loose.clear();
         painted = t;
         for (const g of groups)
-            bind(g, placed);
-    }
-    // ---- The controls. ----
+            bindGroup(g, placed);
+    };
+    return {
+        bind,
+        paint(t) {
+            if (source.svg() === null || t === painted)
+                return;
+            painted = t;
+            const { groups, placed } = groupsAt(t);
+            const changed = groups.filter((g) => loose.has(g.id) || shown.get(g.id) !== g.keys.join(","));
+            const gone = [...shown.keys()].filter((gid) => !groups.some((g) => g.id === gid));
+            if (changed.length > 0 || gone.length > 0) {
+                if (!patch(groups, changed, gone, placed)) {
+                    source.redraw(t);
+                    bind(t);
+                    return;
+                }
+            }
+            move(groups, placed);
+        },
+    };
+}
+/** Make the clock, the controls and the keys of a replay. Nothing runs until the reader (or `autoplay`) plays it, and nothing runs while it is paused, hidden or out of sight. */
+export function replayDriver(doc, timeline, settings, source) {
+    const info = replayInfo(timeline);
+    const media = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : undefined;
+    const motionNow = () => (settings.motion === "smooth" ? "smooth" : settings.motion === "step" ? "step" : media?.matches === true ? "step" : "smooth");
+    const controller = createReplay(timeline, { ...settings, motion: motionNow() });
+    const id = `ky-rd${++counter}`;
+    let language = source.language;
+    const words = () => KYOGIJO_STRINGS[language].replay;
+    const style = doc.createElement("style");
+    style.textContent = REPLAY_STYLE;
+    const hint = doc.createElement("p");
+    hint.className = "ky-hint";
+    hint.id = `${id}-keys`;
+    const bar = doc.createElement("div");
+    bar.className = "ky-controls";
+    bar.setAttribute("role", "group");
+    const live = doc.createElement("div");
+    live.className = "ky-live";
+    live.setAttribute("role", "status");
+    live.setAttribute("aria-live", "polite");
+    if (settings.controls === false)
+        bar.hidden = true;
     let sync = () => { };
     const buildBar = () => {
         const w = words();
@@ -241,17 +237,19 @@ export function createReplayView(host, timeline, settings, initial) {
         speed.hidden = stepMode;
         loop.hidden = stepMode;
         bar.append(back, play, forward, speed, loop, range, clock);
-        hint.textContent = stepMode ? w.keysStep : w.keys;
-        stage.setAttribute("aria-label", w.region);
-        stage.setAttribute("aria-describedby", hint.id);
-        stage.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight Home End");
-        let shown = "";
+        hint.textContent = source.help === "turn" ? (stepMode ? w.keysTurnStep : w.keysTurn) : stepMode ? w.keysStep : w.keys;
+        if (source.labelled !== undefined) {
+            source.labelled.setAttribute("aria-label", w.region);
+            source.labelled.setAttribute("aria-describedby", hint.id);
+            source.labelled.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight Home End");
+        }
+        let said = "";
         sync = () => {
             const s = controller.state();
             const total = replayClock(info.duration);
             const text = `${replayClock(s.t - info.start)} / ${total}`;
-            if (text !== shown) {
-                shown = text;
+            if (text !== said) {
+                said = text;
                 clock.textContent = text;
                 range.setAttribute("aria-valuetext", fill(w.positionValue, { t: replaySpoken(s.t - info.start, w), total: replaySpoken(info.duration, w) }));
             }
@@ -267,79 +265,101 @@ export function createReplayView(host, timeline, settings, initial) {
             if (speed.value !== String(s.speed))
                 speed.value = String(s.speed);
             loop.setAttribute("aria-pressed", String(s.loop));
-            root.dataset.state = s.ended ? "ended" : s.playing ? "playing" : "paused";
-            root.dataset.motion = s.motion;
+            source.holder.dataset.state = s.ended ? "ended" : s.playing ? "playing" : "paused";
+            source.holder.dataset.motion = s.motion;
         };
         sync(undefined);
     };
-    if (settings.controls === false)
-        bar.hidden = true;
-    // ---- The clock on the page: animation frames while playing, and the events said aloud. ----
+    // ---- The clock on the page: animation frames while playing and in sight, and the events said aloud. ----
     let raf = 0;
     let last = 0;
-    const frame = (now) => {
+    let onScreen = true;
+    const request = source.frames?.request ?? ((callback) => requestAnimationFrame(callback));
+    const cancel = source.frames?.cancel ?? ((id) => cancelAnimationFrame(id));
+    const want = () => {
+        if (raf !== 0 || !onScreen || !controller.state().playing)
+            return;
+        last = performance.now();
+        raf = request(frame);
+    };
+    function frame(now) {
         raf = 0;
-        if (!controller.state().playing)
+        if (!controller.state().playing || !onScreen)
             return;
         const dt = Math.min(0.25, Math.max(0, (now - last) / 1000));
         last = now;
         controller.advance(dt);
-        if (controller.state().playing && raf === 0)
-            raf = requestAnimationFrame(frame);
-    };
+        if (controller.state().playing && raf === 0 && onScreen)
+            raf = request(frame);
+    }
     const stop = controller.subscribe((change) => {
         sync(change);
-        paint(change.state.t);
+        source.paint(change.state.t);
         if (settings.announce !== false && change.crossed.length > 0 && (change.reason === "tick" || change.reason === "step")) {
             live.textContent = change.crossed.map((e) => describeEvent(e, language, info.start)).join(". ");
         }
-        if (change.reason === "play" && raf === 0) {
-            last = performance.now();
-            raf = requestAnimationFrame(frame);
-        }
+        if (change.reason === "play")
+            want();
         if (!change.state.playing && raf !== 0) {
-            cancelAnimationFrame(raf);
+            cancel(raf);
             raf = 0;
         }
     });
-    const keys = (event) => {
+    // Scrolled out of sight, the clock holds (no frame is asked for) and goes on when it is back.
+    let seen;
+    if (source.seen !== undefined && typeof IntersectionObserver === "function") {
+        seen = new IntersectionObserver((entries) => {
+            onScreen = entries[entries.length - 1]?.isIntersecting !== false;
+            if (onScreen)
+                want();
+            else if (raf !== 0) {
+                cancel(raf);
+                raf = 0;
+            }
+        });
+        seen.observe(source.seen);
+    }
+    const act = (event, scope) => {
         if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
-            return;
+            return false;
         const tag = event.target?.tagName ?? "";
         if (tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA")
-            return;
-        switch (event.key) {
-            case " ":
-            case "Spacebar":
+            return false;
+        // Over a 3D view the arrows and Home are the view's: the stage's own keys are Space, comma, full stop and End.
+        const key = scope === "stage" ? (event.code === "Comma" ? "back" : event.code === "Period" ? "on" : event.key === " " || event.key === "Spacebar" ? "toggle" : event.key === "End" ? "end" : "") : event.key === " " || event.key === "Spacebar" ? "toggle" : event.key === "ArrowRight" ? "on" : event.key === "ArrowLeft" ? "back" : event.key === "Home" ? "home" : event.key === "End" ? "end" : "";
+        switch (key) {
+            case "toggle":
                 // A button takes the space itself.
                 if (tag === "BUTTON")
-                    return;
+                    return false;
                 controller.toggle();
                 break;
-            case "ArrowRight":
+            case "on":
                 if (event.shiftKey)
                     controller.jump(5);
                 else
                     controller.step(1);
                 break;
-            case "ArrowLeft":
+            case "back":
                 if (event.shiftKey)
                     controller.jump(-5);
                 else
                     controller.step(-1);
                 break;
-            case "Home":
+            case "home":
                 controller.seek(info.start);
                 break;
-            case "End":
+            case "end":
                 controller.seek(info.end);
                 break;
             default:
-                return;
+                return false;
         }
         event.preventDefault();
+        return true;
     };
-    root.addEventListener("keydown", keys);
+    const keys = (event) => void act(event, "bar");
+    source.keysOn.addEventListener("keydown", keys);
     // A page that is hidden does no work: the clock stops, and the reader starts it again.
     const hidden = () => {
         if (doc.visibilityState === "hidden")
@@ -357,31 +377,84 @@ export function createReplayView(host, timeline, settings, initial) {
             media.addListener(motion);
     }
     buildBar();
-    drawStage(controller.state().t);
-    if (settings.autoplay === true && controller.state().motion === "smooth" && doc.visibilityState !== "hidden")
-        controller.play();
     return {
         controller,
-        stage,
-        draw(next) {
-            const before = language;
-            options = { ...next, id };
-            language = options.language === "ja" ? "ja" : "en";
-            // The controls are made again only when the words change: a reader's focus on one of them stays where it is when a score moves.
-            if (language !== before)
-                buildBar();
-            drawStage(controller.state().t);
+        parts: { style, hint, bar, live },
+        setLanguage(next) {
+            if (next === language)
+                return;
+            language = next;
+            buildBar();
         },
+        key: act,
         destroy() {
             stop();
             if (raf !== 0)
-                cancelAnimationFrame(raf);
+                cancel(raf);
+            raf = 0;
+            seen?.disconnect();
+            source.keysOn.removeEventListener("keydown", keys);
             doc.removeEventListener("visibilitychange", hidden);
             if (typeof media?.removeEventListener === "function")
                 media.removeEventListener("change", motion);
             else if (typeof media?.removeListener === "function")
                 media.removeListener(motion);
             controller.pause();
+        },
+    };
+}
+/**
+ * Attach a replay to a container: the stage with the drawing, the controls under it, the keyboard and the live region. The drawing is written once
+ * and then only the marks that move are moved, on `requestAnimationFrame`; a mark that comes or goes (an object that enters, an event that
+ * begins) redraws the replay's own layers, never the surface. With `prefers-reduced-motion` nothing plays by itself and play steps instead.
+ */
+export function createReplayView(host, timeline, settings, initial) {
+    const doc = host.ownerDocument;
+    const id = initial.id ?? `ky-r${++counter}`;
+    let options = { ...initial, id };
+    let language = options.language === "ja" ? "ja" : "en";
+    const root = doc.createElement("div");
+    root.className = "ky-replay";
+    const stage = doc.createElement("div");
+    stage.className = "ky-stage";
+    stage.tabIndex = 0;
+    stage.setAttribute("role", "group");
+    let svg = null;
+    const painter = replayPainter({
+        doc,
+        timeline,
+        look: settings,
+        svg: () => svg,
+        options: () => options,
+        language: () => language,
+        redraw: (t) => drawStage(t),
+    });
+    function drawStage(t) {
+        stage.innerHTML = drawFrame(options, timeline, t, settings);
+        svg = stage.querySelector("svg.kyogijo");
+    }
+    const driver = replayDriver(doc, timeline, settings, { paint: (t) => painter.paint(t), language, keysOn: root, holder: root, labelled: stage });
+    const { style, hint, bar, live } = driver.parts;
+    root.append(style, stage, hint, bar, live);
+    host.replaceChildren(root);
+    drawStage(driver.controller.state().t);
+    painter.bind(driver.controller.state().t);
+    if (settings.autoplay === true && driver.controller.state().motion === "smooth" && doc.visibilityState !== "hidden")
+        driver.controller.play();
+    return {
+        controller: driver.controller,
+        stage,
+        draw(next) {
+            options = { ...next, id };
+            language = options.language === "ja" ? "ja" : "en";
+            // The controls are made again only when the words change: a reader's focus on one of them stays where it is when a score moves.
+            driver.setLanguage(language);
+            const t = driver.controller.state().t;
+            drawStage(t);
+            painter.bind(t);
+        },
+        destroy() {
+            driver.destroy();
             host.replaceChildren();
         },
     };

package/dist/replay.js

@@ -160,6 +160,11 @@ export function replayInfo(timeline) {
     const p = prepare(timeline);
     return { start: p.start, end: p.end, duration: p.end - p.start, frames: p.frames.length, objects: p.ids.length, events: p.events.length, step: p.step };
 }
+/** Everything a timeline tracks, each as it first appears (its id, team, number and label), in that order. */
+export function replayCast(timeline) {
+    const p = prepare(timeline);
+    return p.ids.map((id) => p.first.get(id));
+}
 /** The times of the frames, and of the events, in order: the moments a step can land on. */
 export function replayTimes(timeline) {
     return prepare(timeline).times;
@@ -541,10 +546,14 @@ export function replayPlacer(options, timeline) {
  * ```
  */
 export function drawFrame(options, timeline, t, look = {}) {
+    return drawFrameOf(options, timeline, t, look);
+}
+/** `drawFrame` with only the groups `keep` says yes to: a 3D view keeps the players off its floor, where they stand up instead. */
+export function drawFrameOf(options, timeline, t, look = {}, keep = () => true) {
     const language = options.language === "ja" ? "ja" : "en";
     const id = options.id ?? replayId(options, timeline);
     const withId = { ...options, id };
-    const layers = replayLayers(timeline, t, look, language);
+    const layers = replayGroups(timeline, replaySnapshot(timeline, t, look), look, language).filter(keep).map((group) => group.layer);
     let description = options.description;
     if (description === undefined) {
         // The drawing's own description is made from its layers' summaries; a replay's layers change with the time, so its sentence is fixed.

package/dist/strings.core.d.ts

@@ -1006,6 +1006,9 @@ export interface KyogijoWords {
         /** What the replay is and the keys it answers to, in smooth motion and in steps. */
         keys: string;
         keysStep: string;
+        /** The same on a 3D view, where the arrow keys turn the view: in smooth motion and in steps. */
+        keysTurn: string;
+        keysTurnStep: string;
         region: string;
     };
     /** The words of the 3D view: its name, the keys, the viewpoints, the controls, what is announced, and the names of what stands on the surface. */

package/dist/strings.en.js

@@ -444,6 +444,8 @@ export const WORDS_EN = {
         group: "Replay controls", play: "Play", pause: "Pause", back: "Previous frame", forward: "Next frame", stepBack: "Back", stepForward: "Forward", speed: "Speed", loop: "Loop", position: "Position", time: "Time", event: "Event", spokenSeconds: "0:{ss}", spokenMinutes: "{m}:{ss}", spokenHours: "{h}:{mm}:{ss}", positionValue: "{t} of {total}",
         keys: "Replay of the play. Space plays or pauses, the left and right arrow keys step by a frame, Shift with an arrow key moves 5 seconds, and Home and End go to the ends.",
         keysStep: "Replay of the play, in steps. Space or the right arrow key moves on, the left arrow key goes back, and Home and End go to the ends.",
+        keysTurn: "Replay of the play on the 3D view. Space plays or pauses; comma and full stop step back and on by a frame, and with Shift by 5 seconds; End goes to the end. The arrow keys still turn the view. On the replay's controls the arrow keys step, and Home and End go to the ends.",
+        keysTurnStep: "Replay of the play on the 3D view, in steps. Space or full stop moves on, comma goes back, and End goes to the end. The arrow keys still turn the view. On the replay's controls the right arrow key moves on and the left goes back.",
         region: "Replay",
     },
     turn: {

package/dist/strings.ja.js

@@ -469,6 +469,8 @@ export const WORDS_JA = {
         group: "リプレイの操作", play: "再生", pause: "一時停止", back: "前のコマ", forward: "次のコマ", stepBack: "前へ", stepForward: "次へ", speed: "再生速度", loop: "繰り返し", position: "再生位置", time: "時間", event: "イベント", spokenSeconds: "{s}秒", spokenMinutes: "{m}分{s}秒", spokenHours: "{h}時間{m}分{s}秒", positionValue: "{total}中{t}",
         keys: "プレーのリプレイです。スペースキーで再生と一時停止、左右の矢印キーで1コマずつ前後に移動、Shiftキーを押しながら矢印キーで5秒ずつ移動、Homeキーで最初、Endキーで最後に移動します。",
         keysStep: "プレーのリプレイです。コマ送りで表示しています。スペースキーまたは右矢印キーで進み、左矢印キーで戻り、Homeキーで最初、Endキーで最後に移動します。",
+        keysTurn: "3Dビューでのプレーのリプレイです。スペースキーで再生と一時停止、カンマキーで1コマ戻り、ピリオドキーで1コマ進みます。Shiftキーを押しながらカンマキーかピリオドキーで5秒ずつ移動し、Endキーで最後に移動します。矢印キーではこれまでどおりビューを回せます。リプレイの操作ボタンにフォーカスがあるときは、左右の矢印キーで1コマずつ前後に移動し、Homeキーで最初、Endキーで最後に移動します。",
+        keysTurnStep: "3Dビューでのプレーのリプレイです。コマ送りで表示しています。スペースキーまたはピリオドキーで進み、カンマキーで戻り、Endキーで最後に移動します。矢印キーではこれまでどおりビューを回せます。リプレイの操作ボタンにフォーカスがあるときは、右矢印キーで進み、左矢印キーで戻ります。",
         region: "リプレイ",
     },
     turn: {

package/dist/turn-entry.d.ts

@@ -2,6 +2,10 @@ import "./full.ts";
 import "./venues.all.ts";
 export { mountKyogijoTurn, mountTurn, turnSupported } from "./turn.dom.ts";
 export type { KyogijoTurn } from "./turn.dom.ts";
+export { discSize, keepOnFloor, replayTurnModel } from "./turn.replay.ts";
+export type { TurnReplayLook, TurnReplayModel } from "./turn.replay.ts";
+export type { TurnReplaySettings } from "./turn.replay.dom.ts";
+import "./turn.replay.dom.ts";
 export { buildTurn, floorOptions, openingView } from "./turn.model.ts";
 export { turnDirection } from "./turn.camera.ts";
 export type { TurnDirection } from "./turn.camera.ts";

package/dist/turn-entry.js

@@ -3,6 +3,8 @@ import "./full.js";
 // The real venues of the NHL's arenas, as this entry has always had them (the lean district reads the ones it shows).
 import "./venues.all.js";
 export { mountKyogijoTurn, mountTurn, turnSupported } from "./turn.dom.js";
+export { discSize, keepOnFloor, replayTurnModel } from "./turn.replay.js";
+import "./turn.replay.dom.js";
 export { buildTurn, floorOptions, openingView } from "./turn.model.js";
 export { turnDirection } from "./turn.camera.js";
 export { GOVERNOR_TUNING, QUALITIES, QUALITY_TIERS, TIER_PROFILES, createGovernor, handheld, isQuality, qualityOf, rasterOf, tierOf } from "./quality.js";

package/dist/turn.dom.d.ts

@@ -4,6 +4,20 @@ import type { ScoreOptions, SurfaceOptions } from "./types.ts";
 import type { VenueSettings } from "./venue.ts";
 import { type Quality, type QualityTier } from "./quality.ts";
 import type { OutsideLevel } from "./outside.paint.ts";
+import type { ReplaySettings, ReplayTimeline } from "./replay.types.ts";
+import type { KyogijoReplay } from "./mount.ts";
+import type { TurnInternals } from "./turn.replay.dom.ts";
+import type { ReplayView } from "./replay.dom.ts";
+/**
+ * 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.
+ */
+declare let replayKit: {
+    attach(view: TurnInternals, timeline: ReplayTimeline, settings: ReplaySettings): KyogijoReplay;
+    flat(host: HTMLElement, timeline: ReplayTimeline, settings: ReplaySettings, options: SurfaceOptions | ScoreOptions): ReplayView;
+} | undefined;
+/** Put the replay's code in: called once by `turn.replay.dom.ts`. */
+export declare function useTurnReplay(kit: NonNullable<typeof replayKit>): void;
 /** What `mountKyogijoTurn` gives back. `O` is what `update` takes: the options of a drawing, or (for `mountMultiTurn`) of a tournament layout. */
 export interface KyogijoTurn<O = SurfaceOptions | ScoreOptions> {
     /** `3d`, or `flat` where the browser cannot draw the 3D view (or there is nothing to turn): the flat drawing is shown and the rest of this does nothing. */
@@ -52,6 +66,12 @@ export interface KyogijoTurn<O = SurfaceOptions | ScoreOptions> {
     setQuality(quality: Quality): void;
     /** The flat drawing that is the floor, or `null` after `destroy`. */
     svg(): SVGSVGElement | null;
+    /**
+     * Play tracking data on the view: the players stand up on the surface as discs that face the eye (home circles, away squares, numbers), the ball or the puck runs on the floor with its trail, and the passes, shots and
+     * goals are drawn on the floor as in the flat replay. The replay's controls go under the view's; the view still turns, tips and zooms while it plays. Space on the view plays and pauses, comma and full stop step; the
+     * arrow keys still turn the view. `destroy` on what it gives takes the replay away and leaves the view. A tournament layout has no replay. Where the browser cannot draw the 3D view, the flat replay plays instead.
+     */
+    replay(timeline: ReplayTimeline, settings?: ReplaySettings): KyogijoReplay;
     /** Stop listening and empty the container. */
     destroy(): void;
 }
@@ -77,4 +97,5 @@ export declare function mountKyogijoTurn(host: HTMLElement, options: SurfaceOpti
  * 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 declare function mountTurn<O>(host: HTMLElement, options: O, settings: TurnSettings, build: (options: O, settings: TurnSettings) => TurnModel): KyogijoTurn<O>;
+export declare function mountTurn<O>(host: HTMLElement, options: O, settings: TurnSettings, build: (options: O, settings: TurnSettings) => TurnModel, replayable?: boolean): KyogijoTurn<O>;
+export {};