@johnmorrisdotca/kyogijo-stadiums 0.51.0 → 0.53.0

package/dist/turn.replay.js

@@ -0,0 +1,94 @@
+// A replay on the 3D view, as data: the floor is the replay's frame with the ball or the puck, its trail and the events on it, and every player and official stands up on it as a
+// disc that faces the eye (a circle for the home side, a square for the away side, a triangle for an official, each with its number), the marks of the flat replay stood up. Pure:
+// the same model, timeline, time and look give the same model. `turn.replay.dom.ts` moves it in a page.
+import { esc, num } from "./format.js";
+import { replayBoard } from "./replay.board.js";
+import { drawFrameOf, replayCast, replayPlacer, replaySnapshot } from "./replay.js";
+import { n } from "./turn.kit.js";
+import { hungBoardPlanes, hungBoards } from "./turn.replay.board.js";
+/** Who stands up on a 3D view: the players and the officials. The ball and the puck stay on the floor. */
+export const STANDING = ["home", "away", "official"];
+/** What stands up is in these groups of the flat replay; the 3D view's floor draws the rest (`keepOnFloor`). */
+const STOOD = new Set(["replay-players", "replay-numbers", "replay-officials"]);
+/** Whether a group of the replay stays on the floor of a 3D view: the trails, the passes, the shots, the goals and the ball do, and the players, their numbers and the officials stand up. */
+export const keepOnFloor = (group) => !STOOD.has(group.id);
+/**
+ * The size of a disc, in feet: a share of the playing surface's diagonal (the area the view is fitted to, not the ground or the building round it), so that it reads on a rink and on a pitch
+ * alike (about 6.5 feet on a hockey rink, 12 on a soccer pitch), times the look's `scale`. It is a mark, not a person: its size says nothing of a player's height.
+ */
+export function discSize(area, look = {}) {
+    const scale = typeof look.scale === "number" && Number.isFinite(look.scale) && look.scale > 0 ? look.scale : 1;
+    return Math.hypot(area.w, area.h) * 0.03 * scale;
+}
+/** The playing surface of a model, in feet: what stands on it says, else the whole floor. */
+export const playingArea = (model) => {
+    const area = model.uprights.area;
+    return area === undefined ? model.viewBox : { w: area.x1 - area.x0, h: area.y1 - area.y0 };
+};
+/** The custom properties a floor drawing sets on its root (the teams' colours among them): the discs stand outside that SVG and take the same. */
+export function floorVars(floor) {
+    const style = /^<svg[^>]*\sstyle="([^"]*)"/.exec(floor)?.[1];
+    return style === undefined ? "" : style.split(";").filter((rule) => /^--ky-[\w-]+:/.test(rule)).join(";");
+}
+/** What is drawn on a disc of `d` feet: the flat replay's mark for the side, and the number over it, in the drawing's own classes so that they take its colours, light and dark. */
+export function discMarkup(o, d, sport, theme, vars) {
+    const r = d / 2;
+    const edge = d * 0.06;
+    const shape = o.team === "home"
+        ? `<circle class="ky-h" cx="${n(r)}" cy="${n(r)}" r="${n(r - edge)}"/>`
+        : o.team === "away"
+            ? `<rect class="ky-a" x="${n(edge)}" y="${n(edge)}" width="${n(d - 2 * edge)}" height="${n(d - 2 * edge)}" rx="${n(d * 0.08)}"/>`
+            : `<path d="M${n(r)} ${n(edge)}L${n(d - edge)} ${n(d - edge)}L${n(edge)} ${n(d - edge)}Z"/>`;
+    const number = o.number === undefined || o.number === "" || o.team === "official" ? "" : `<text class="ky-lt" x="${n(r)}" y="${n(r)}" text-anchor="middle" dominant-baseline="central" font-size="${n(d * 0.46)}">${esc(String(o.number))}</text>`;
+    const themed = theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : "";
+    return `<g class="kyogijo" data-sport="${esc(sport)}"${themed}${vars === "" ? "" : ` style="${esc(vars)}"`}><g class="ky-pts" style="--w:${n(d * 0.05)}">${shape}</g>${number}</g>`;
+}
+/** The plane of one disc: a billboard that leans to face the eye, its lower edge on the floor when it stands, its middle over (x, y). */
+export function discPlane(o, x, y, d, lift, svg) {
+    return { id: `replay-${o.id}`, kind: "player", o: [x - d / 2, y, lift + d], u: [d, 0, 0], v: [0, 0, -d], svg, billboard: true, lean: true };
+}
+/** Put a disc over a new place on the floor, as `discPlane` does: the plane is the caller's, changed in place, so that a page moving many does not make new ones. */
+export function moveDisc(plane, x, y, d, lift) {
+    plane.o = [x - d / 2, y, lift + d];
+}
+/** The floor's options for a replay: the model's own, and an id of its own, so that the replay's groups are found in it. */
+export const replayFloorOptions = (model) => ({ ...model.options, id: `${model.id}-replay` });
+/**
+ * A 3D view's model with a replay on it at a time: the floor drawn as the replay's frame (without the players when they stand), and a disc for each player and official the timeline
+ * tracks, after the model's own planes. One that is not on the surface at the time is still a plane, and says so (`on`), so that the elements stay the same while it plays. Pure.
+ */
+export function replayTurnModel(model, timeline, t, look = {}) {
+    const stand = look.stand !== false;
+    const floorOptions = replayFloorOptions(model);
+    // A scoreboard hung over the surface follows the game: its faces are drawn again with the score, the period and the clock at the time.
+    const hung = look.board === false ? [] : hungBoards(model);
+    const state = hung.length === 0 ? undefined : replayBoard(timeline, t);
+    const drawn = new Map();
+    if (state !== undefined)
+        for (const h of hung)
+            for (const plane of hungBoardPlanes(h, state))
+                drawn.set(plane.id, plane);
+    const base = drawn.size === 0 ? model : { ...model, planes: model.planes.map((p) => drawn.get(p.id) ?? p) };
+    const board = state === undefined ? {} : { board: state };
+    const floor = drawFrameOf(floorOptions, timeline, t, look, stand ? keepOnFloor : () => true);
+    const size = discSize(playingArea(model), look);
+    const discs = new Map();
+    if (!stand)
+        return { model: { ...base, floor }, discs, size, floorOptions, ...board };
+    const sport = String(model.options.sport ?? "");
+    const theme = model.options.theme;
+    const vars = floorVars(floor);
+    const lift = model.uprights.lift;
+    const snap = replaySnapshot(timeline, t, look);
+    const placed = replayPlacer(floorOptions, timeline)(snap.objects.map((o) => [o.x, o.y]));
+    const here = new Map(snap.objects.map((o, i) => [o.id, placed[i]]));
+    for (const o of replayCast(timeline)) {
+        if (!STANDING.includes(o.team))
+            continue;
+        const at = here.get(o.id);
+        discs.set(o.id, { plane: discPlane(o, at?.[0] ?? 0, at?.[1] ?? 0, size, lift, discMarkup(o, size, sport, theme, vars)), on: at !== undefined });
+    }
+    return { model: { ...base, floor, planes: [...base.planes, ...[...discs.values()].map((disc) => disc.plane)] }, discs, size, floorOptions, ...board };
+}
+/** A number for a test or a page that wants to know where a disc stands: its middle on the floor, in feet. */
+export const discAt = (plane) => `${num(plane.o[0] + plane.u[0] / 2)} ${num(plane.o[1])}`;

package/dist/venue.boards.d.ts

@@ -11,6 +11,28 @@ export interface Boards {
     score: [number, number];
     /** Each lit panel has a halo under it (the venue is lit as at night). */
     glow: boolean;
+    /** What a replay adds to the scoreboard's face: the period and the game clock. Missing, the face is the score alone, as it always was. */
+    live?: BoardLive;
+}
+/** The period and the clock a scoreboard shows while a game is replayed on it. */
+export interface BoardLive {
+    /** The period (1, 2, 3...), or `undefined` for a game with none. */
+    period?: number;
+    /** The clock as it is written, `19:20`: digits and one colon. */
+    clock: string;
+}
+/** The scoreboard hung over a surface, with what it is made from: a replay draws its faces again with the score and the clock of the time it is at. */
+export interface HungBoard {
+    id: string;
+    box: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    /** How high the surface stands, in feet. */
+    lift: number;
+    look: Boards;
 }
 /** The package's own colours of light: amber, blue and a white with a little blue in it. */
 export declare const BOARD_COLORS: readonly [string, string, string];
@@ -72,6 +94,8 @@ export declare function boardSize(w: number, h: number): {
 };
 /** Whether a sport has a scoreboard hung over its surface: a ballpark's stands behind the outfield, so it has none here. */
 export declare const hangsOver: (sport: string | undefined) => boolean;
+/** A clock a scoreboard may write: one or two digits, a colon and two digits. Anything else is left off (the text goes into a drawing). */
+export declare const safeClock: (value: unknown) => string;
 /**
  * The scoreboard hung over the middle of a surface: a four sided board with its score on every face, a ring of display under it, a cap on top and a strut up to the rafters. `box` is the surface, `lift` how high the surface stands.
  * Its faces look outwards, each the right way round for an eye outside it.

package/dist/venue.boards.js

@@ -136,9 +136,10 @@ export function boardSize(w, h) {
 export const hangsOver = (sport) => sport !== "mlb";
 /** The segments of a seven-segment digit, a to g, that are lit for each digit. */
 const SEGMENTS = ["abcdef", "bc", "abged", "abgcd", "fgbc", "afgcd", "afgedc", "abc", "abcdefg", "abcdfg"];
-/** A number of one or two digits in seven segments, `high` feet tall, from (x, y) at its top left: the path and the width it takes. */
-function digits(value, x, y, high) {
-    const text = String(Math.min(99, Math.max(0, Math.trunc(value))));
+/** How wide a colon is, as a share of the height of the digits beside it. */
+const COLON = 0.3;
+/** A text of digits and colons in seven segments, `high` feet tall, from (x, y) at its top left: the path and the width it takes. */
+function segments(text, x, y, high) {
     const w = high * 0.56;
     const t = high * 0.13;
     const half = high / 2;
@@ -152,13 +153,46 @@ function digits(value, x, y, high) {
         g: [t * 0.6, half - t / 2, w - t * 1.2, t],
     };
     let d = "";
+    let at = x;
     [...text].forEach((ch, i) => {
-        for (const s of SEGMENTS[Number(ch)]) {
-            const [rx, ry, rw, rh] = rects[s];
-            d += `M${n(x + i * (w + t) + rx)} ${n(y + ry)}h${n(rw)}v${n(rh)}h${n(-rw)}z`;
+        if (i > 0)
+            at += t;
+        if (ch === ":") {
+            const cw = high * COLON;
+            const dot = t * 1.1;
+            for (const cy of [high * 0.3, high * 0.7])
+                d += `M${n(at + (cw - dot) / 2)} ${n(y + cy - dot / 2)}h${n(dot)}v${n(dot)}h${n(-dot)}z`;
+            at += cw;
+            return;
+        }
+        for (const seg of SEGMENTS[Number(ch)] ?? "") {
+            const [rx, ry, rw, rh] = rects[seg];
+            d += `M${n(at + rx)} ${n(y + ry)}h${n(rw)}v${n(rh)}h${n(-rw)}z`;
         }
+        at += w;
     });
-    return { d, width: text.length * w + (text.length - 1) * t };
+    return { d, width: at - x };
+}
+/** A number of one or two digits in seven segments, `high` feet tall, from (x, y) at its top left: the path and the width it takes. */
+const digits = (value, x, y, high) => segments(String(Math.min(99, Math.max(0, Math.trunc(value)))), x, y, high);
+/** A clock a scoreboard may write: one or two digits, a colon and two digits. Anything else is left off (the text goes into a drawing). */
+export const safeClock = (value) => (typeof value === "string" && /^\d{1,2}:\d{2}$/.test(value) ? value : "");
+/** The row over the score while a game is replayed: the period in a small frame and the game clock beside it, in seven segments, centred on the face between its end blocks. A game with no period has the clock alone. */
+function liveRow(w, h, room, live, color) {
+    const high = Math.min(h * 0.24, room / 6);
+    const y = h * 0.18;
+    const clockWidth = segments(live.clock, 0, y, high).width;
+    const period = live.period === undefined ? "" : String(Math.min(99, Math.max(0, Math.trunc(live.period))));
+    const pad = high * 0.3;
+    const frame = period === "" ? 0 : segments(period, 0, y, high).width + pad * 2;
+    const gap = period === "" ? 0 : high * 0.5;
+    const x0 = (w - (frame + gap + clockWidth)) / 2;
+    let svg = "";
+    if (period !== "") {
+        const line = high * 0.07;
+        svg += `<path class="u-led" fill="none" stroke="${color}" stroke-width="${n(line)}" d="M${n(x0)} ${n(y - pad * 0.6)}h${n(frame)}v${n(high + pad * 1.2)}h${n(-frame)}z"/><path class="u-led" fill="${color}" d="${segments(period, x0 + pad, y, high).d}"/>`;
+    }
+    return svg + `<path class="u-led" fill="${color}" d="${segments(live.clock, x0 + frame + gap, y, high).d}"/>`;
 }
 /** The face of the main board, `w` by `h` feet: a dark screen with a band of light along its top and bottom, a block of colour at each end, and the score between them. */
 function boardFace(w, h, look) {
@@ -171,18 +205,21 @@ function boardFace(w, h, look) {
     const block = Math.min(w * 0.2, h * 0.5);
     const [yb, hb] = [h * 0.28, h * 0.44];
     svg += `<path class="u-led" fill="${c0}" d="M${n(edge * 2)} ${n(yb)}h${n(block)}v${n(hb)}h${n(-block)}z"/><path class="u-led" fill="${c1}" d="M${n(w - edge * 2 - block)} ${n(yb)}h${n(block)}v${n(hb)}h${n(-block)}z"/>`;
-    // The score: two numbers and a dash, as large as the face between the blocks lets them be.
+    // The score: two numbers and a dash, as large as the face between the blocks lets them be. A replayed game also has the clock and the period over it, so the score is a little smaller and lower.
     const room = w - 2 * (block + edge * 4);
+    const live = look.live !== undefined && safeClock(look.live.clock) !== "" ? look.live : undefined;
     const digitCount = String(look.score[0]).length + String(look.score[1]).length;
     const dash = 0.4;
-    const high = Math.min(h * 0.5, room / (digitCount * 0.56 + (digitCount - 2) * 0.13 + dash + 0.5));
+    const high = Math.min(h * (live === undefined ? 0.5 : 0.33), room / (digitCount * 0.56 + (digitCount - 2) * 0.13 + dash + 0.5));
     const [home, away] = [digits(look.score[0], 0, 0, high), digits(look.score[1], 0, 0, high)];
     const gap = high * 0.3;
     const total = home.width + gap + high * dash + gap + away.width;
     const x0 = (w - total) / 2;
-    const y0 = (h - high) / 2;
+    const y0 = live === undefined ? (h - high) / 2 : h * 0.46;
     const [h0, a0] = [digits(look.score[0], x0, y0, high), digits(look.score[1], x0 + home.width + gap * 2 + high * dash, y0, high)];
     svg += `<path class="u-led" fill="${c2}" d="${h0.d}${a0.d}M${n(x0 + home.width + gap)} ${n(y0 + high / 2 - high * 0.065)}h${n(high * dash)}v${n(high * 0.13)}h${n(-high * dash)}z"/>`;
+    if (live !== undefined)
+        svg += liveRow(w, h, room, live, c2);
     return svg;
 }
 /**

package/dist/venue.js

@@ -227,7 +227,7 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     // The scoreboard hung over the middle of the surface (a ballpark has none, and a hall's own scoreboards stand in its place).
     if (boards?.scoreboard === true && v.noCentre !== true && hangsOver(String(o.sport))) {
         const planes = centreBoard("centre-board", stands.box, lift, boards);
-        items.push({ id: "centre-board", kind: "hung-board", at: centre, height: topOf(planes), planes });
+        items.push({ id: "centre-board", kind: "hung-board", at: centre, height: topOf(planes), planes, hung: { id: "centre-board", box: stands.box, lift, look: boards } });
     }
     if (wallSeats.length > 0)
         items.push({ id: "wall-seats", kind: "wall-seats", at: centre, height: topOf(wallSeats), planes: wallSeats });

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

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