@johnmorrisdotca/kyogijo-stadiums 0.58.0 → 0.60.0

package/dist/surfaces/artistic.js

@@ -59,7 +59,9 @@ export function artistic(o, plan, ctx = {}) {
     }
     const top = -jy + 0.4;
     const bottom = sy + start.depth + 0.4 - W;
-    const view0 = { x: -m, y: -feet(top) - m * 0.4, w: feet(L) + 2 * m, h: feet(W) + feet(top + bottom) + m * 0.8 };
+    // The deck is narrower along the sides than at the ends; a margin that is asked for (the ground the stands of a crowd stand on) is the same all round.
+    const across = o.margin === undefined ? m * 0.4 : m;
+    const view0 = { x: -m, y: -feet(top) - across, w: feet(L) + 2 * m, h: feet(W) + feet(top + bottom) + 2 * across };
     base = (ctx.bare === true ? "" : deckMarkup(o, ids, plan.deck, view0.x, view0.y, view0.w, view0.h)) + base + deck;
     const Lf = feet(L);
     const Wf = feet(W);

package/dist/surfaces/athletics.js

@@ -96,6 +96,8 @@ export function athleticsSurface(o, plan, embedded, margin) {
         onColour: false,
     };
     surface.box = { x: 0, y: 0, w: W, h: H };
+    if (plan.outline !== undefined && sv === undefined)
+        surface.floor = plan.outline.map(([x, y]) => [(x - ox) * K, (y - oy) * K]);
     surface.lineRef = { width: thick, feet: K };
     const ranges = {};
     for (const [name, r] of Object.entries(plan.ranges))

package/dist/surfaces/hockey.js

@@ -2,7 +2,7 @@ import { el, num } from "../format.js";
 import { rulesFor } from "../eras.js";
 import { NHL } from "../geometry.js";
 import { NHL_RINK } from "../leagues/hockey.js";
-import { atEnds, edges, ft, quarterTurn, roundedRect } from "./surface.js";
+import { atEnds, edges, ft, quarterTurn, roundedOutline, roundedRect } from "./surface.js";
 /** Where the boards' curve is at a distance x from the end: the y at which it meets a line across the rink. The corner's radius is the NHL's unless given. */
 export function boardsY(x, radius = NHL.cornerRadius) {
     const r = radius;
@@ -128,6 +128,8 @@ export function hockey(o, era, rink = NHL_RINK) {
     };
     surface.lineRef = { width: thin, feet: 1 };
     surface.box = { x: 0, y: 0, w: L, h: W };
+    // The floor the stands of a crowd clear: the boards round the rounded corners, not the apron's square corners.
+    surface.floor = roundedOutline(-bw, -bw, L + 2 * bw, W + 2 * bw, r + bw);
     surface.centreRadius = rink.circleRadius;
     surface.anchors = { kind: "hockey", length: L, width: W, blueLine, goalLine: g, cornerRadius: r, net: net_ };
     // The zones of the ice: from the end boards to a blue line, and between the blue lines.

package/dist/surfaces/surface.d.ts

@@ -153,6 +153,11 @@ export interface Surface {
         width: number;
         feet: number;
     };
+    /**
+     * For a surface whose floor is not the rectangle of its view (an athletics track, its sprint straight and runways): the outline of everything it draws round its playing area, as points in the wide frame
+     * in feet. The stands of a crowd clear it.
+     */
+    floor?: (readonly [number, number])[];
     /** For a surface with a crowd: the margin it was drawn with, which holds the stands. */
     crowdMargin?: number;
     /** A real stadium of more than one configuration laid out in the venue's own frame: where the middle of its field is in the surface's frame (the surface is shifted to lie there), and the ground, building, stands and crowd under it, in the venue's frame. */
@@ -254,6 +259,8 @@ export declare function quarterTurn(view: {
 };
 /** A box from its edges: the left, the top, the right and the bottom. */
 export declare const edges: (x0: number, y0: number, x1: number, y1: number) => Box;
+/** A rounded rectangle's outline as points (each corner in 12 steps), for a surface's `floor`. */
+export declare function roundedOutline(x: number, y: number, w: number, h: number, r: number): [number, number][];
 /** A range that has an end: its box at the left end and at the right, made by a function of the end. */
 export declare const atEnds: (box: (end: "left" | "right") => Box) => {
     left: Box;

package/dist/surfaces/surface.js

@@ -45,5 +45,14 @@ export function quarterTurn(view) {
 }
 /** A box from its edges: the left, the top, the right and the bottom. */
 export const edges = (x0, y0, x1, y1) => ({ x: Math.min(x0, x1), y: Math.min(y0, y1), w: Math.abs(x1 - x0), h: Math.abs(y1 - y0) });
+/** A rounded rectangle's outline as points (each corner in 12 steps), for a surface's `floor`. */
+export function roundedOutline(x, y, w, h, r) {
+    const rr = Math.max(0, Math.min(r, w / 2, h / 2));
+    const out = [];
+    for (const [cx, cy, a0] of [[x + w - rr, y + rr, -90], [x + w - rr, y + h - rr, 0], [x + rr, y + h - rr, 90], [x + rr, y + rr, 180]])
+        for (let i = 0; i <= 12; i += 1)
+            out.push([cx + rr * Math.cos(((a0 + i * 7.5) * Math.PI) / 180), cy + rr * Math.sin(((a0 + i * 7.5) * Math.PI) / 180)]);
+    return out;
+}
 /** A range that has an end: its box at the left end and at the right, made by a function of the end. */
 export const atEnds = (box) => ({ left: box("left"), right: box("right") });

package/dist/turn.camera.d.ts

@@ -129,9 +129,10 @@ export declare function multiply(a: Mat4, b: Mat4): number[];
 /**
  * The matrix that puts a point of the scene on the screen for a view in a placement: the scene (whose middle is the origin) is scaled, turned about the vertical,
  * tipped back, shifted to where the fit puts it, and seen with a perspective `distance` pixels deep. This is `project`'s arithmetic as one matrix, so that an
- * element can be given its whole place in one `matrix3d` and need no 3D context of the browser's: a browser that draws nested 3D layers flat still draws it right.
+ * element can be given its whole place in one `matrix3d` and need no 3D context of the browser's: a browser that draws nested 3D layers flat still draws it right. `focus`, a point of the floor
+ * in the scene's pixels from its middle, is put where the middle would be (and, by its third number from 0 to 1, that share of the way to the container's middle): the camera looks at it, and turns and tips about it.
  */
-export declare function cameraMatrix(view: TurnView, at: Placement, distance: number): number[];
+export declare function cameraMatrix(view: TurnView, at: Placement, distance: number, focus?: readonly [number, number] | readonly [number, number, number]): number[];
 /** A matrix as the CSS `transform` that applies it. */
 export declare const matrix3d: (m: Mat4) => string;
 /** How far a point is from the eye's plane after the scene is turned and tipped, in pixels towards the eye: bigger is nearer. Planes are drawn far first. */

package/dist/turn.camera.js

@@ -208,9 +208,10 @@ const translation = (x, y, z) => [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1
 /**
  * The matrix that puts a point of the scene on the screen for a view in a placement: the scene (whose middle is the origin) is scaled, turned about the vertical,
  * tipped back, shifted to where the fit puts it, and seen with a perspective `distance` pixels deep. This is `project`'s arithmetic as one matrix, so that an
- * element can be given its whole place in one `matrix3d` and need no 3D context of the browser's: a browser that draws nested 3D layers flat still draws it right.
+ * element can be given its whole place in one `matrix3d` and need no 3D context of the browser's: a browser that draws nested 3D layers flat still draws it right. `focus`, a point of the floor
+ * in the scene's pixels from its middle, is put where the middle would be (and, by its third number from 0 to 1, that share of the way to the container's middle): the camera looks at it, and turns and tips about it.
  */
-export function cameraMatrix(view, at, distance) {
+export function cameraMatrix(view, at, distance, focus) {
     const k = at.k * view.zoom;
     const [yaw, pitch] = [view.yaw * RAD, view.pitch * RAD];
     const [cy, sy, cp, sp] = [Math.cos(yaw), Math.sin(yaw), Math.cos(pitch), Math.sin(pitch)];
@@ -218,10 +219,14 @@ export function cameraMatrix(view, at, distance) {
     const rotateZ = [cy, sy, 0, 0, -sy, cy, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
     const rotateX = [1, 0, 0, 0, 0, cp, sp, 0, 0, -sp, cp, 0, 0, 0, 0, 1];
     const eye = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -1 / distance, 0, 0, 0, 1];
-    let m = multiply(eye, translation(at.tx, at.ty, 0));
+    // A focus is brought toward the middle of the container by its share (the fit puts the scene's middle where its whole box is centred, which a tall scoreboard moves).
+    const centring = 1 - Math.min(1, Math.max(0, focus?.[2] ?? 0));
+    let m = multiply(eye, translation(at.tx * centring, at.ty * centring, 0));
     m = multiply(m, rotateX);
     m = multiply(m, rotateZ);
-    return multiply(m, scale);
+    m = multiply(m, scale);
+    // A point of the floor to look at (a camera following the play), in the scene's pixels from its middle: it takes the place the middle had.
+    return focus === undefined || (focus[0] === 0 && focus[1] === 0) ? m : multiply(m, translation(-focus[0], -focus[1], 0));
 }
 /**
  * A number of a matrix as CSS writes it: to ten decimals, with no exponent. The perspective terms of a camera matrix are tiny (a few ten-thousandths) and are multiplied by

package/dist/turn.dom.d.ts

@@ -81,6 +81,11 @@ export declare function turnSupported(win?: {
         supports?: (property: string, value: string) => boolean;
     } | null;
 } | undefined): boolean;
+/** Where a camera that follows the play looks: a point of the floor, in the scene's pixels from its middle, and a zoom on top of the view's own. */
+export interface Aim {
+    focus: [number, number];
+    zoom: number;
+}
 /**
  * Mount a surface as a 3D view in a container, over the static drawing it would otherwise hold: the drawing is the floor, tilted and turned by the pointer, the
  * touch, the wheel and the keys, with what stands on the surface (a net and its posts, a basket, a goal, the posts of a football field) standing on it.

package/dist/turn.dom.js

@@ -35,6 +35,13 @@ export function turnSupported(win = typeof window === "undefined" ? undefined :
     return css.supports("transform", "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)");
 }
 const KEYS = { " ": true, ArrowLeft: true, ArrowRight: true, ArrowUp: true, ArrowDown: true, "+": true, "=": true, "-": true, _: true, "0": true, Home: true, "1": true, "2": true, "3": true, "4": true };
+/** The point an aim looks at, brought toward the middle of the view as it closes in: not at all at its zoom of 1, so that turning it on does not move the view. */
+const focusOf = (aim) => (aim === undefined ? undefined : [aim.focus[0], aim.focus[1], 1 - 1 / Math.max(1, aim.zoom)]);
+/** An aim part of the way from one to another (none is the middle at a zoom of 1). */
+const aimBetween = (from, to, t) => {
+    const [a, b] = [from ?? { focus: [0, 0], zoom: 1 }, to ?? { focus: [0, 0], zoom: 1 }];
+    return { focus: [a.focus[0] + (b.focus[0] - a.focus[0]) * t, a.focus[1] + (b.focus[1] - a.focus[1]) * t], zoom: a.zoom * Math.pow(b.zoom / a.zoom, t) };
+};
 /** The view part of the way from one to another, `t` from 0 to 1, the turn taken the short way round. */
 const between = (from, to, t) => ({ yaw: from.yaw + (nearest(from.yaw, to.yaw) - from.yaw) * t, pitch: from.pitch + (to.pitch - from.pitch) * t, zoom: from.zoom * Math.pow(to.zoom / from.zoom, t) });
 /**
@@ -176,6 +183,14 @@ export function mountTurn(host, options, settings, build, replayable = false, le
     let shown = view;
     let opening = model.view;
     let flight;
+    /** What a camera that follows the play looks at (a point of the floor, and a zoom on top of the view's), where it is going in a glide, and who is told when the reader takes the view over. */
+    let aim;
+    let aimTo;
+    const users = new Set();
+    const took = (kind) => {
+        for (const user of [...users])
+            user(kind);
+    };
     let spoken;
     // The auto-turn: whether it is on, the frame that will advance it, the time of the last one, and whether it has moved the view since the page was last told.
     let playing = false;
@@ -273,7 +288,7 @@ export function mountTurn(host, options, settings, build, replayable = false, le
         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);
+        const layout = layoutOf(model, aim === undefined ? shown : { ...shown, zoom: shown.zoom * aim.zoom }, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens, false, raster, focusOf(aim));
         const world = root.querySelector(".ky-turn-world");
         world.innerHTML = worldMarkup(model, layout, raster);
         // The look the floor is painted in (and the theme) are attributes of the world.
@@ -342,10 +357,11 @@ export function mountTurn(host, options, settings, build, replayable = false, le
         settling = next === ceiling ? undefined : win.setTimeout(settleRaster, next > ceiling ? 160 : 1500);
     };
     /** Put a view on the screen. */
-    const paint = (now) => {
+    const paint = (asked) => {
         const width = stage.clientWidth || 960;
         const height = stage.clientHeight || 600;
-        const layout = layoutOf(model, now, width, height, settings.lens, true, raster);
+        const now = aim === undefined ? asked : { ...asked, zoom: asked.zoom * aim.zoom };
+        const layout = layoutOf(model, now, width, height, settings.lens, true, raster, focusOf(aim));
         outside?.zoom(now.zoom);
         const culled = layout.culled;
         elements.forEach((one, i) => {
@@ -389,11 +405,16 @@ export function mountTurn(host, options, settings, build, replayable = false, le
     };
     /** Go to a view: by a glide of `ms` milliseconds, or at once. */
     const show = (to, ms) => {
+        // A camera that follows the play and is asked to let go glides back with the view (and goes on doing so when another glide takes over).
+        const aiming = aimTo !== undefined ? { from: aim, to: aimTo.to } : flight?.aim === undefined ? undefined : { from: aim, to: flight.aim.to };
+        aimTo = undefined;
         stop();
         view = to;
         label();
         if (ms <= 0 || calm() || win === null) {
             shown = to;
+            if (aiming !== undefined)
+                aim = aiming.to;
             paint(shown);
             return;
         }
@@ -404,13 +425,15 @@ export function mountTurn(host, options, settings, build, replayable = false, le
             const t = Math.min(1, (stamp - flight.start) / flight.ms);
             const eased = 1 - Math.pow(1 - t, 3);
             shown = t >= 1 ? flight.to : between(flight.from, flight.to, eased);
+            if (flight.aim !== undefined)
+                aim = t >= 1 ? flight.aim.to : aimBetween(flight.aim.from, flight.aim.to, eased);
             paint(shown);
             if (t < 1)
                 flight.frame = win.requestAnimationFrame(run);
             else
                 flight = undefined;
         };
-        flight = { from, to, start: win.performance.now(), ms, frame: 0 };
+        flight = { from, to, start: win.performance.now(), ms, frame: 0, aim: aiming };
         flight.frame = win.requestAnimationFrame(run);
     };
     const say = (text, wait = 0) => {
@@ -543,6 +566,12 @@ export function mountTurn(host, options, settings, build, replayable = false, le
         if (target === null || target === undefined || !root.contains(target))
             return;
         const name = target.dataset.preset;
+        const act = target.dataset.act ?? "";
+        if (name !== undefined || act === "reset")
+            took("preset");
+        // (The replay's own buttons are in the view too: only the view's turn it.)
+        else if (act !== "" && act !== "play" && act !== "reverse")
+            took("turn");
         if (name !== undefined)
             return toPreset(name);
         const big = event.shiftKey === true;
@@ -569,6 +598,8 @@ export function mountTurn(host, options, settings, build, replayable = false, le
         const yaw = big ? STEP.yawBig : STEP.yaw;
         const pitch = big ? STEP.pitchBig : STEP.pitch;
         event.preventDefault();
+        if (event.key !== " ")
+            took(/^[0-4]$|^Home$/.test(event.key) ? "preset" : "turn");
         switch (event.key) {
             // A key takes the surface toward its side as a drag toward that side does: the side nearest the eye goes to the right on ArrowRight, and ArrowUp tips it as a drag up does.
             case "ArrowLeft": return go(nudge(view, "left", yaw), 120);
@@ -629,9 +660,13 @@ export function mountTurn(host, options, settings, build, replayable = false, le
         }
         else {
             view = drag(view, here.x - before.x, here.y - before.y, tilts(event.pointerType));
-            if (Math.abs(here.x - before.x) + Math.abs(here.y - before.y) > 0)
+            if (Math.abs(here.x - before.x) + Math.abs(here.y - before.y) > 0 && !moved) {
                 moved = true;
+                took("turn");
+            }
         }
+        if (pinch !== undefined)
+            took("turn");
         shown = view;
         paint(shown);
     };
@@ -655,7 +690,11 @@ export function mountTurn(host, options, settings, build, replayable = false, le
     stage.addEventListener("pointermove", onMove);
     stage.addEventListener("pointerup", onUp);
     stage.addEventListener("pointercancel", onUp);
-    stage.addEventListener("dblclick", toOpening);
+    const onDouble = () => {
+        took("preset");
+        toOpening();
+    };
+    stage.addEventListener("dblclick", onDouble);
     // ---- The wheel over the view zooms it, as a map does; with the pointer anywhere else the page scrolls. Ctrl or Command and the wheel (a pinch on a trackpad) zoom too. Shift and the
     // wheel, or a sideways swipe, turn it. Tipping is a drag, the keys and the buttons. A wheel that starts while the zoom is already at its end that way goes on to scroll the page, so the page is
     // never trapped; one that reaches the end part-way through stops there rather than flinging the page. ----
@@ -667,6 +706,7 @@ export function mountTurn(host, options, settings, build, replayable = false, le
         if (!pinch && (event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))) {
             event.preventDefault();
             wheelTaken = now;
+            took("turn");
             grab();
             view = clampView({ ...view, yaw: view.yaw + (event.deltaX || event.deltaY) * 0.25 });
         }
@@ -680,6 +720,7 @@ export function mountTurn(host, options, settings, build, replayable = false, le
             wheelTaken = now;
             if (next.zoom === view.zoom)
                 return;
+            took("turn");
             grab();
             view = next;
         }
@@ -721,6 +762,21 @@ export function mountTurn(host, options, settings, build, replayable = false, le
             if (alive)
                 paint(shown);
         },
+        aim(next, glide = false) {
+            if (!alive)
+                return;
+            if (glide) {
+                aimTo = { to: next };
+                // (A glide of the view that is about to start carries it; otherwise it glides alone.)
+                show(view, 560);
+                return;
+            }
+            aim = next;
+        },
+        onUser(listener) {
+            users.add(listener);
+            return () => void users.delete(listener);
+        },
         requestFrame,
         cancelFrame,
     });
@@ -864,6 +920,7 @@ export function mountTurn(host, options, settings, build, replayable = false, le
             probe?.stop();
             frames.clear();
             seen?.disconnect();
+            users.clear();
             doc.removeEventListener("visibilitychange", onVisible);
             clearTimeout(spoken);
             observer?.disconnect();

package/dist/turn.follow.d.ts

@@ -0,0 +1,22 @@
+import type { ReplayController } from "./replay.control.ts";
+import { type FollowShot } from "./replay.follow.ts";
+import type { ReplayChange, ReplayLook, ReplayTimeline } from "./replay.types.ts";
+import type { Aim } from "./turn.dom.ts";
+import type { TurnModel } from "./turn.model.ts";
+import type { TurnInternals } from "./turn.replay.dom.ts";
+import type { ScoreOptions, SurfaceOptions } from "./types.ts";
+/**
+ * What a 3D view looks at for a shot: the shot's middle as a point of the floor in the scene's pixels from its middle, and the zoom on top of the view's. The scene at a zoom of 1 holds more
+ * than the surface (the boards, the stands): the zoom is worked out against how much more, so that the closest shot frames the same share of the surface as a flat drawing's.
+ */
+export declare function aimOf(shot: FollowShot, model: Pick<TurnModel, "scale" | "centre" | "box">, surface: {
+    w: number;
+    h: number;
+}): Aim;
+/** What `turnFollow` gives back: the paint the replay calls on each change of its clock, and `destroy`. */
+export interface TurnFollow {
+    paint(change: ReplayChange): void;
+    destroy(): void;
+}
+/** The camera of a replay on a 3D view. `floor` is the options the floor is drawn with (the replay's), or `undefined` before it is laid. */
+export declare function turnFollow(view: TurnInternals, controller: () => ReplayController, timeline: ReplayTimeline, look: ReplayLook, floor: () => SurfaceOptions | ScoreOptions | undefined): TurnFollow;

package/dist/turn.follow.js

@@ -0,0 +1,46 @@
+// Following the play on a 3D view: the shot of replay.follow.ts turned into what the view looks at (a point of the floor, and a zoom on top of the view's own), so that the auto-turn, the
+// tip and every viewpoint go on as they were while the camera follows. The reader's own turn, tip or zoom holds it until Resume; a viewpoint or Reset also takes it back to the whole surface,
+// in the same glide. It runs in the replay's own paint, inside the view's one animation frame, and never asks for a frame of its own.
+import { outlineOf } from "./outline.js";
+import { followRunner, zoomFor } from "./replay.follow.js";
+import { replayPlacer, replaySnapshot } from "./replay.js";
+/**
+ * What a 3D view looks at for a shot: the shot's middle as a point of the floor in the scene's pixels from its middle, and the zoom on top of the view's. The scene at a zoom of 1 holds more
+ * than the surface (the boards, the stands): the zoom is worked out against how much more, so that the closest shot frames the same share of the surface as a flat drawing's.
+ */
+export function aimOf(shot, model, surface) {
+    const s = model.scale;
+    const room = Math.hypot(model.box.x1 - model.box.x0, model.box.y1 - model.box.y0) / Math.max(1e-9, Math.hypot(surface.w * s, surface.h * s));
+    return { focus: [(shot.x - model.centre[0]) * s, (shot.y - model.centre[1]) * s], zoom: zoomFor(shot.zoom, Math.min(3, room)) };
+}
+/** The camera of a replay on a 3D view. `floor` is the options the floor is drawn with (the replay's), or `undefined` before it is laid. */
+export function turnFollow(view, controller, timeline, look, floor) {
+    const surface = () => outlineOf((floor() ?? view.model().options)).box;
+    const runner = followRunner({
+        timeline,
+        now: () => view.doc.defaultView?.performance.now() ?? 0,
+        at(t, stop) {
+            const place = replayPlacer(floor() ?? view.model().options, timeline);
+            const objects = replaySnapshot(timeline, t, look).objects;
+            const placed = place(objects.map((o) => [o.x, o.y]));
+            return { box: surface(), objects: objects.map((o, i) => ({ team: o.team, x: placed[i][0], y: placed[i][1] })), stop: stop === undefined ? undefined : place([[stop[0], stop[1]]])[0] };
+        },
+        show: (shot) => view.aim(shot === undefined ? undefined : aimOf(shot, view.model(), surface())),
+    });
+    const stop = view.onUser((kind) => {
+        if (controller().state().follow === "off")
+            return;
+        controller().holdFollow(true);
+        if (kind === "preset") {
+            runner.reset();
+            view.aim(undefined, true);
+        }
+    });
+    return {
+        paint: (change) => runner.paint(change),
+        destroy() {
+            stop();
+            view.aim(undefined);
+        },
+    };
+}

package/dist/turn.markup.d.ts

@@ -33,7 +33,7 @@ export interface Layout {
  * which, so that a page need not write them at all; without it every plane is laid out, as a still picture needs. `raster` is the share of its size an element is made at (`rasterOf`): each element's matrix widens it back, so that the
  * picture is the same and the layers hold `raster` squared as many pixels.
  */
-export declare function layoutOf(model: TurnModel, view: TurnView, width: number, height: number, lens?: number, cull?: boolean, raster?: Raster): Layout;
+export declare function layoutOf(model: TurnModel, view: TurnView, width: number, height: number, lens?: number, cull?: boolean, raster?: Raster, focus?: readonly [number, number] | readonly [number, number, number]): Layout;
 /** One plane as an element: its box in pixels and the SVG drawn on it in feet. */
 export declare function planeMarkup(p: Plane, scale: number, transform: string, stack: number, fade?: number, raster?: number): string;
 /**

package/dist/turn.markup.js

@@ -56,6 +56,8 @@ export function groupRanks(groups, yaw) {
     return rank;
 }
 const RAD = Math.PI / 180;
+/** The things of a venue's bowl: they stand on the ground round the surface, never under a raised floor. */
+const BOWL = new Set(["stands", "wall-seats", "gallery", "roof", "ribbon-boards", "hung-board"]);
 const prepared = new WeakMap();
 function prepare(model) {
     const known = prepared.get(model.planes);
@@ -79,7 +81,8 @@ function prepare(model) {
         const zs = [p.o[2], p.o[2] + p.u[2], p.o[2] + p.v[2], p.o[2] + p.u[2] + p.v[2]];
         mid.push([(p.o[0] + (p.u[0] + p.v[0]) / 2 - centre[0]) * s, (p.o[1] + (p.u[1] + p.v[1]) / 2 - centre[1]) * s, (p.o[2] + (p.u[2] + p.v[2]) / 2) * s, Math.min(...zs) * s, Math.max(...zs) * s]);
     }
-    const made = { planes: model.planes, scale: s, centre, base, mid };
+    const ofBowl = new Set(model.uprights.items.filter((item) => BOWL.has(item.kind)).flatMap((item) => item.planes));
+    const made = { planes: model.planes, scale: s, centre, base, mid, bowl: model.planes.map((p) => ofBowl.has(p)) };
     prepared.set(model.planes, made);
     return made;
 }
@@ -93,10 +96,10 @@ const turnedAway = (m, side) => side * (m[0] * (m[5] * m[15] - m[13] * m[7]) - m
  * which, so that a page need not write them at all; without it every plane is laid out, as a still picture needs. `raster` is the share of its size an element is made at (`rasterOf`): each element's matrix widens it back, so that the
  * picture is the same and the layers hold `raster` squared as many pixels.
  */
-export function layoutOf(model, view, width, height, lens, cull = false, raster = 1) {
+export function layoutOf(model, view, width, height, lens, cull = false, raster = 1, focus) {
     const distance = eyeDistance(width, height, lens ?? model.lens);
     const at = fit(model.box, { ...view, zoom: 1 }, width, height, distance);
-    const camera = cameraMatrix(view, at, distance);
+    const camera = cameraMatrix(view, at, distance, focus);
     const s = model.scale;
     const centre = model.centre;
     const known = prepare(model);
@@ -159,6 +162,14 @@ export function layoutOf(model, view, width, height, lens, cull = false, raster
     order.length = 0;
     for (let i = 0, j = 0; i < own.length || j < apart.length;)
         order.push(j >= apart.length || (i < own.length && own[i].depth <= apart[j].depth) ? own[i++] : apart[j++]);
+    // A raised floor (a table's top) carries the ground the bowl stands on, so it is sorted by its middle among the surface's own things only: the parts of the bowl that are farther than its middle
+    // come after it, still in their own order, or the floor would be drawn over the far stands.
+    if (raised) {
+        const at = order.findIndex((one) => one.i === 0);
+        const far = order.slice(0, at).filter((one) => known.bowl[one.i - 1]);
+        if (far.length > 0)
+            order.splice(0, at + 1, ...order.slice(0, at).filter((one) => !known.bowl[one.i - 1]), order[at], ...far);
+    }
     const stack = new Array(count + 1).fill(0);
     stack[0] = 1;
     order.forEach((one, rank) => {

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

@@ -1,4 +1,5 @@
 import type { KyogijoReplay } from "./mount.ts";
+import { type Aim } from "./turn.dom.ts";
 import type { ReplaySettings, ReplayTimeline } from "./replay.types.ts";
 import type { TurnModel } from "./turn.model.ts";
 import { type TurnReplayLook } from "./turn.replay.ts";
@@ -13,6 +14,10 @@ export interface TurnInternals {
     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;
+    /** Look at a point of the floor with a zoom on top of the view's (a camera following the play), at once or in a glide; `undefined` gives the view back. Painted at the next `repaint`. */
+    aim(next: Aim | undefined, glide?: boolean): void;
+    /** Be told when the reader turns, tips or zooms the view (`turn`) or presses a viewpoint or Reset (`preset`). */
+    onUser(listener: (kind: "preset" | "turn") => void): () => 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;

package/dist/turn.replay.dom.js

@@ -2,6 +2,7 @@ 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 { turnFollow } from "./turn.follow.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) {
@@ -57,6 +58,8 @@ export function attachTurnReplay(view, timeline, settings) {
             }
         }
     };
+    // The camera that follows the play.
+    const camera = turnFollow(view, () => driver.controller, timeline, look, () => laid?.floorOptions);
     const wrap = doc.createElement("div");
     wrap.className = "ky-replay ky-turn-replay";
     const driver = replayDriver(doc, timeline, settings, {
@@ -65,6 +68,8 @@ export function attachTurnReplay(view, timeline, settings) {
             place(t);
             if (look.board !== false)
                 board.follow(t, view.model(), change);
+            if (change !== undefined)
+                camera.paint(change);
             view.repaint();
         },
         language,
@@ -119,12 +124,15 @@ export function attachTurnReplay(view, timeline, settings) {
         laid = replayTurnModel(model, timeline, driver.controller.state().t, look);
         return laid.model;
     }, after);
+    camera.paint({ state: driver.controller.state(), reason: "follow", crossed: [] });
+    view.repaint();
     if (settings.autoplay === true && driver.controller.state().motion === "smooth" && doc.visibilityState !== "hidden")
         driver.controller.play();
     return {
         ...driver.controller,
         destroy() {
             driver.destroy();
+            camera.destroy();
             root.removeEventListener("keydown", onStageKey, true);
             if (described === null)
                 stage.removeAttribute("aria-describedby");

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.58.0";
+export declare const VERSION = "0.60.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.58.0";
+export const VERSION = "0.60.0";

package/package.json

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