@johnmorrisdotca/kyogijo-stadiums 0.54.0 → 0.56.0

package/dist/circuits.race.words.js

@@ -0,0 +1,48 @@
+export const RACE_WORDS = Object.freeze({
+    en: {
+        simulated: "A simulated race: made-up cars and drivers, worked out from a seed. No real race, driver or team.",
+        feedNote: "A race from a feed you chose: its names, times and results are the feed's, shown in this page only. Between the times it gives, each car runs at the lap's own speeds.",
+        lap: "Lap {lap} / {laps}",
+        finalLap: "Final lap",
+        flag: "Chequered flag",
+        grid: "On the grid",
+        elapsed: "Race time {time}",
+        group: "Race",
+        play: "Play the race",
+        pause: "Pause the race",
+        nextLap: "Next lap",
+        speed: "Speed",
+        speedValue: "{speed}×",
+        position: "Race time",
+        positionValue: "{time} of {total}",
+        board: { caption: "Timing board", position: "Pos", driver: "Driver", team: "Team", gap: "Gap", interval: "Interval", last: "Last lap", best: "Best lap", stops: "Pits", leader: "Leader", lapDown: "+1 lap", lapsDown: "+{n} laps", pit: "In the pit lane", out: "Out", finished: "Finished", fastest: "Fastest lap" },
+        car: "{position}: {name}, {team}",
+        leads: "{name} leads, lap {lap}.",
+        wins: "Chequered flag: {name} wins.",
+        description: "{cars} made-up cars race {laps} laps from the grid to the chequered flag: a simulation, not a real race.",
+        fromFeed: "{cars} cars race {laps} laps, from a feed the reader chose: where each car is between the times it gives is worked out at the lap's own speeds.",
+    },
+    ja: {
+        simulated: "シミュレーションによるレースです。架空のマシンとドライバーで、シード値から計算しています。実在のレース・ドライバー・チームとは関係ありません。",
+        feedNote: "選んだフィードのレースです。名前、タイム、結果はフィードのもので、このページの中だけに表示します。フィードが示す時刻の間は、各マシンがそのコースの速度で走るものとして計算しています。",
+        lap: "{lap} / {laps}周",
+        finalLap: "ファイナルラップ",
+        flag: "チェッカーフラッグ",
+        grid: "スタート前",
+        elapsed: "レース経過時間 {time}",
+        group: "レース",
+        play: "レースを再生",
+        pause: "レースを一時停止",
+        nextLap: "次の周へ",
+        speed: "再生速度",
+        speedValue: "{speed}倍",
+        position: "レース経過時間",
+        positionValue: "{time} / {total}",
+        board: { caption: "タイミングボード", position: "順位", driver: "ドライバー", team: "チーム", gap: "トップ差", interval: "前車との差", last: "前周タイム", best: "ベストラップ", stops: "ピット回数", leader: "トップ", lapDown: "+1周", lapsDown: "+{n}周", pit: "ピットレーン", out: "リタイア", finished: "完走", fastest: "ファステストラップ" },
+        car: "{position}位：{name}（{team}）",
+        leads: "{lap}周目、{name}がトップ。",
+        wins: "チェッカーフラッグ：{name}が優勝。",
+        description: "架空のマシン{cars}台が、グリッドからチェッカーフラッグまで{laps}周を走ります。実際のレースではなく、シミュレーションです。",
+        fromFeed: "選んだフィードから、{cars}台のマシンが{laps}周を走ります。フィードが示す時刻の間の各マシンの位置は、そのコースの速度から計算しています。",
+    },
+});

package/dist/turn.dom.d.ts

@@ -97,5 +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, replayable?: boolean): KyogijoTurn<O>;
+export declare function mountTurn<O>(host: HTMLElement, options: O, settings: TurnSettings, build: (options: O, settings: TurnSettings) => TurnModel, replayable?: boolean, lend?: (internals: TurnInternals) => void): KyogijoTurn<O>;
 export {};

package/dist/turn.dom.js

@@ -2,6 +2,7 @@
 // tips it, a pinch or Ctrl and the wheel zoom, the arrow keys step it, four viewpoints and a reset are a button or a number key away, a reader who prefers
 // reduced motion gets jumps for glides, and where the browser cannot draw in 3D the flat drawing stays. Nothing is polled and nothing runs while the view is
 // still: the elements' `transform`s are written when the view changes, and a glide between viewpoints is a short run of animation frames.
+import { displayProbe, frameBatch } from "./turn.frames.js";
 import { drawKyogijo } from "./draw.js";
 import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step, turnDirection, viewScale, wheelTip } from "./turn.camera.js";
 import { buildTurn, floorOptions, openingView, turnWords } from "./turn.model.js";
@@ -54,7 +55,7 @@ export function mountKyogijoTurn(host, options, settings = {}) {
  * 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, replayable = false) {
+export function mountTurn(host, options, settings, build, replayable = false, lend) {
     const doc = host.ownerDocument;
     const win = doc.defaultView;
     /** The venue's settings as they are now: the mounted ones, altered by `update`. */
@@ -222,30 +223,10 @@ export function mountTurn(host, options, settings, build, replayable = false) {
     const probeDisplay = () => {
         if (win === null || probe !== undefined || displayMs !== undefined)
             return;
-        const found = [];
-        let before;
-        const step = (stamp) => {
-            probe = undefined;
-            if (!alive || win === null)
-                return;
-            if (doc.hidden === true) {
-                // Hidden: start over when it can be seen.
-                found.length = 0;
-                before = undefined;
-                probe = win.setTimeout(() => (probe = win.requestAnimationFrame(step)), 400);
-                return;
-            }
-            if (before !== undefined)
-                found.push(stamp - before);
-            before = stamp;
-            if (found.length < 24)
-                probe = win.requestAnimationFrame(step);
-            else {
-                displayMs = [...found].sort((a, b) => a - b)[Math.floor(found.length * 0.1)];
-                governor?.display(displayMs);
-            }
-        };
-        probe = win.setTimeout(() => (probe = win.requestAnimationFrame(step)), 350);
+        probe = displayProbe(win, () => doc.hidden === true, (ms) => {
+            displayMs = ms;
+            governor?.display(ms);
+        });
     };
     const stopMeter = () => {
         if (meterFrame !== undefined)
@@ -467,30 +448,9 @@ export function mountTurn(host, options, settings, build, replayable = false) {
         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;
-        }
-    };
+    const frames = frameBatch(win);
+    const requestFrame = (callback) => frames.request(callback);
+    const cancelFrame = (id) => frames.cancel(id);
     // ---- 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 = () => {
@@ -729,7 +689,29 @@ export function mountTurn(host, options, settings, build, replayable = false) {
     // Nothing moves until the reader asks, unless the page did: `autoPlay` starts it, but not for a reader who prefers reduced motion (`"force"` does).
     if (settings.autoPlay === "force" || (settings.autoPlay === true && !calm()))
         setPlaying(true, true);
-    return {
+    /** What the view lends a replay, or another moving layer of the package's own (a race on a circuit): its elements, its model, a way to lay planes on it, and its frames. */
+    const internalsOf = () => ({
+        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 mounted = {
         mode: "3d",
         view: () => ({ ...view }),
         set(next, glide = true) {
@@ -842,28 +824,7 @@ export function mountTurn(host, options, settings, build, replayable = false) {
             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);
+            const mine = kitOf().attach(internalsOf(), timeline, replaySettings);
             replaying = mine;
             return {
                 ...mine,
@@ -886,6 +847,9 @@ export function mountTurn(host, options, settings, build, replayable = false) {
             stop();
             stopTick();
             stopMeter();
+            // Nothing of the view asks for a frame once it is gone: the display's measure, and every callback of the shared frame (one asked for in this same tick too).
+            probe?.stop();
+            frames.clear();
             seen?.disconnect();
             doc.removeEventListener("visibilitychange", onVisible);
             clearTimeout(spoken);
@@ -893,4 +857,6 @@ export function mountTurn(host, options, settings, build, replayable = false) {
             host.replaceChildren();
         },
     };
+    lend?.(internalsOf());
+    return mounted;
 }

package/dist/turn.frames.d.ts

@@ -0,0 +1,33 @@
+/** The part of a window the frames use. */
+export interface FrameWindow {
+    requestAnimationFrame(callback: FrameRequestCallback): number;
+    cancelAnimationFrame(id: number): void;
+    setTimeout(callback: () => void, ms: number): number;
+    clearTimeout(id: number | undefined): void;
+}
+/** One animation frame a frame, shared: what `frameBatch` gives back. */
+export interface FrameBatch {
+    /** Ask for the next frame: every callback asked for before it comes runs in that one frame. Gives an id for `cancel`. */
+    request(callback: FrameRequestCallback): number;
+    /** Take a callback back: it does not run, even when its frame has begun; the window's frame is cancelled when nothing is left. */
+    cancel(id: number): void;
+    /** Take everything back and cancel the window's frame: nothing asked for runs. */
+    clear(): void;
+    /** How many callbacks wait for the next frame. */
+    readonly waiting: number;
+}
+/**
+ * One window frame for everything a view moves: callbacks asked for in the same frame run together in the next. A callback taken back while its frame runs (one before it stopped the view) does not run, and `clear`
+ * leaves nothing that can ask for a frame.
+ */
+export declare function frameBatch(win: Pick<FrameWindow, "requestAnimationFrame" | "cancelAnimationFrame"> | null): FrameBatch;
+/** The measure of the display's interval: what `displayProbe` gives back. */
+export interface DisplayProbe {
+    /** Stop it, wherever it is (waiting to begin, or between two frames): it asks for nothing after. */
+    stop(): void;
+}
+/**
+ * Measure the display's own interval once, a moment after a view is mounted: wait `delay` ms, then time `count` idle frames and give the lower decile of their intervals to `done` (a busy moment does not count). A hidden
+ * page starts over when it is shown. `stop` ends it at once.
+ */
+export declare function displayProbe(win: FrameWindow, hidden: () => boolean, done: (ms: number) => void, delay?: number, count?: number): DisplayProbe;

package/dist/turn.frames.js

@@ -0,0 +1,102 @@
+// The animation frames of a 3D view: one frame a frame for everything that moves on it (the auto-turn, a replay, a race), and the one-time measure of the display's own interval. Each can be stopped at any moment,
+// a request made in the same tick as the stop included, and once stopped nothing of it asks for a frame again. The page's window is passed in, so a test can count what is asked with a window of its own.
+/**
+ * One window frame for everything a view moves: callbacks asked for in the same frame run together in the next. A callback taken back while its frame runs (one before it stopped the view) does not run, and `clear`
+ * leaves nothing that can ask for a frame.
+ */
+export function frameBatch(win) {
+    const queued = new Map();
+    /** The callbacks of the frame that is running, until each has run: one taken back in the meantime is left out. */
+    let running;
+    let next = 0;
+    let pending = 0;
+    const flush = (stamp) => {
+        pending = 0;
+        running = new Map(queued);
+        queued.clear();
+        for (const [id, callback] of [...running]) {
+            if (running?.has(id) !== true)
+                continue;
+            running.delete(id);
+            callback(stamp);
+        }
+        running = undefined;
+    };
+    const drop = () => {
+        if (pending !== 0)
+            win?.cancelAnimationFrame(pending);
+        pending = 0;
+    };
+    return {
+        request(callback) {
+            next += 1;
+            queued.set(next, callback);
+            if (pending === 0 && win !== null)
+                pending = win.requestAnimationFrame(flush);
+            return next;
+        },
+        cancel(id) {
+            queued.delete(id);
+            running?.delete(id);
+            if (queued.size === 0)
+                drop();
+        },
+        clear() {
+            queued.clear();
+            running?.clear();
+            drop();
+        },
+        get waiting() {
+            return queued.size;
+        },
+    };
+}
+/**
+ * Measure the display's own interval once, a moment after a view is mounted: wait `delay` ms, then time `count` idle frames and give the lower decile of their intervals to `done` (a busy moment does not count). A hidden
+ * page starts over when it is shown. `stop` ends it at once.
+ */
+export function displayProbe(win, hidden, done, delay = 350, count = 24) {
+    let timer;
+    let frame;
+    let stopped = false;
+    const found = [];
+    let before;
+    const wait = (ms) => {
+        timer = win.setTimeout(() => {
+            timer = undefined;
+            if (!stopped)
+                frame = win.requestAnimationFrame(step);
+        }, ms);
+    };
+    function step(stamp) {
+        frame = undefined;
+        if (stopped)
+            return;
+        if (hidden()) {
+            // Hidden: start over when it can be seen.
+            found.length = 0;
+            before = undefined;
+            wait(400);
+            return;
+        }
+        if (before !== undefined)
+            found.push(stamp - before);
+        before = stamp;
+        if (found.length < count)
+            frame = win.requestAnimationFrame(step);
+        else
+            done([...found].sort((a, b) => a - b)[Math.floor(found.length * 0.1)]);
+    }
+    wait(delay);
+    return {
+        stop() {
+            stopped = true;
+            if (timer !== undefined)
+                win.clearTimeout(timer);
+            if (frame !== undefined)
+                win.cancelAnimationFrame(frame);
+            timer = undefined;
+            frame = undefined;
+        },
+    };
+}

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.54.0";
+export declare const VERSION = "0.56.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.54.0";
+export const VERSION = "0.56.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.54.0",
+  "version": "0.56.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",