@johnmorrisdotca/kyogijo-stadiums 0.59.0 → 0.60.0

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

@@ -96,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);

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.59.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.59.0";
+export const VERSION = "0.60.0";

package/package.json

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