@johnmorrisdotca/kyogijo-stadiums 0.12.2 → 0.14.0

package/dist/turn.dom.js

@@ -30,16 +30,24 @@ const between = (from, to, t) => ({ yaw: from.yaw + (nearest(from.yaw, to.yaw) -
  * ```
  */
 export function mountKyogijoTurn(host, options, settings = {}) {
+    return mountTurn(host, options, settings, buildTurn);
+}
+/**
+ * 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) {
     const doc = host.ownerDocument;
     const win = doc.defaultView;
-    let model = buildTurn(options, settings);
-    const sport = () => model.options.sport;
+    let model = build(options, settings);
+    /** What names the four viewpoints: the model's own table (a tournament layout has one), else the sport's. */
+    const sport = () => model.presets ?? model.options.sport;
     const supported = turnSupported(win ?? undefined) && model.turnable;
     let alive = true;
     if (!supported) {
         // The flat drawing, with a sentence that says why it does not turn when the browser is the reason.
         const flat = (next) => {
-            host.innerHTML = `<div class="ky-turn" data-mode="flat"><style>${KYOGIJO_TURN_STYLE}</style>${drawKyogijo(floorOptions(next))}${model.turnable ? `<p class="ky-turn-flat">${esc(turnWords(model).flat)}</p>` : ""}</div>`;
+            host.innerHTML = `<div class="ky-turn" data-mode="flat"><style>${KYOGIJO_TURN_STYLE}</style>${model.flat ?? drawKyogijo(floorOptions(next))}${model.turnable ? `<p class="ky-turn-flat">${esc(turnWords(model).flat)}</p>` : ""}</div>`;
         };
         flat(options);
         return {
@@ -53,7 +61,7 @@ export function mountKyogijoTurn(host, options, settings = {}) {
             pause: () => undefined,
             togglePlay: () => false,
             update: (next) => {
-                model = buildTurn(next, settings);
+                model = build(next, settings);
                 flat(next);
             },
             svg: () => (alive ? host.querySelector("svg.kyogijo") : null),
@@ -430,7 +438,7 @@ export function mountKyogijoTurn(host, options, settings = {}) {
         update(next) {
             if (!alive)
                 return;
-            model = buildTurn(next, { ...settings, preset: undefined, view });
+            model = build(next, { ...settings, preset: undefined, view });
             view = clampView(view);
             opening = openingView(settings, sport());
             const layout = layoutOf(model, shown, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens);

package/dist/turn.kit.d.ts

@@ -1,7 +1,7 @@
 /** A point or a direction: x, y, z in feet. */
 export type V3 = readonly [number, number, number];
 /** What a plane is a part of: it is the class of its element (`ky-up-<kind>`) and what a test finds it by. */
-export type PartKind = "post" | "net" | "tape" | "antenna" | "board" | "glass" | "rim" | "stanchion" | "frame" | "goal" | "flag" | "stump" | "leg" | "table" | "pylon" | "wall" | "screen" | "pole" | "ground" | "target" | "seats" | "concourse" | "fascia" | "roof" | "banner" | "platform" | "rail" | "matedge" | "shrine";
+export type PartKind = "post" | "net" | "tape" | "antenna" | "board" | "glass" | "rim" | "stanchion" | "frame" | "goal" | "flag" | "stump" | "leg" | "table" | "pylon" | "wall" | "screen" | "pole" | "ground" | "target" | "seats" | "concourse" | "fascia" | "roof" | "banner" | "platform" | "rail" | "matedge" | "shrine" | "surround" | "chair" | "desk";
 /** One flat rectangle. Its own x runs along `u` (its whole length) and its own y along `v`; `o` is the corner both start from. `svg` is what is drawn on it, in feet along `u` and `v`. */
 export interface Plane {
     /** A name that says what it is and where: `net`, `post-left`, `goal-right-back`. */
@@ -28,9 +28,11 @@ export interface Plane {
     crop?: boolean;
     /** How much of a `shy` plane is left when it is cut away altogether: 0.08 when missing. A plane that others lie over on the screen (the steps of a gallery) takes less, so that they do not add up to a veil. */
     fadeTo?: number;
+    /** How low the eye must be for a `shy` plane to begin to give way: the share (of the plane's side being towards the eye, times the sine of the pitch) at which the fade starts; 0.1 when missing. A low barrier takes a high one, so that it stays whole until the eye is nearly level with it. */
+    fadeAt?: number;
 }
 /** What stands on the surface as a thing a reader would name: a net, a basket, a goal, a pair of posts. */
-export type UprightKind = "scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge";
+export type UprightKind = "scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge" | "surrounds" | "officials";
 /** A thing that stands on the surface: where, how high, and the planes it is made of. */
 export interface Upright {
     id: string;
@@ -90,4 +92,4 @@ export declare function shy(p: Plane, centre: readonly [number, number]): Plane;
  * How much of a wall is left (1 whole, down to 0.08) at a view: none is cut away unless the wall is on the eye's side of the surface, and then more the lower the eye is, because a wall seen
  * from straight above hides nothing. `yaw` and `pitch` are the view's, in degrees.
  */
-export declare function fadeOf(p: Pick<Plane, "shy" | "fadeTo">, yaw: number, pitch: number): number;
+export declare function fadeOf(p: Pick<Plane, "shy" | "fadeTo" | "fadeAt">, yaw: number, pitch: number): number;

package/dist/turn.kit.js

@@ -105,6 +105,7 @@ export function fadeOf(p, yaw, pitch) {
     // The horizontal direction from the surface to the eye (the same sum as the depth of a point).
     const toward = p.shy[0] * Math.sin(a) + p.shy[1] * Math.cos(a);
     const hides = toward * Math.sin((pitch * Math.PI) / 180);
-    const t = Math.min(1, Math.max(0, (hides - 0.1) / 0.25));
+    const from = p.fadeAt ?? 0.1;
+    const t = Math.min(1, Math.max(0, (hides - from) / 0.25));
     return Math.round((1 - (1 - (p.fadeTo ?? 0.08)) * t) * 1000) / 1000;
 }

package/dist/turn.markup.js

@@ -88,7 +88,7 @@ export function worldMarkup(model, layout) {
 /** The buttons under the view. */
 export function controlsMarkup(model, view, playing = false) {
     const words = turnWords(model);
-    const here = presetOf(view, model.options.sport);
+    const here = presetOf(view, model.presets ?? model.options.sport);
     const presets = TURN_PRESET_NAMES.map((name, i) => `<button type="button" data-preset="${name}" aria-pressed="${here === name}" aria-keyshortcuts="${i + 1}">${esc(words[name])}</button>`).join("");
     const tools = [
         ["turn-left", "↺", words.turnLeft],
@@ -115,7 +115,7 @@ export function turnMarkupOf(model, settings = {}) {
     const sheet = model.options.style === "none" ? "" : `<style>${KYOGIJO_TURN_STYLE}</style>`;
     const theme = model.options.theme;
     const sport = model.options.sport;
-    return (`<div class="ky-turn" id="${esc(model.id)}" data-sport="${esc(String(sport))}" data-mode="3d" data-touch="${settings.touch === "turn" ? "turn" : "scroll"}" data-preset="${presetOf(view, sport) ?? "custom"}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""} lang="${model.language}">` +
+    return (`<div class="ky-turn" id="${esc(model.id)}" data-sport="${esc(String(sport))}" data-mode="3d" data-touch="${settings.touch === "turn" ? "turn" : "scroll"}" data-preset="${presetOf(view, model.presets ?? sport) ?? "custom"}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""} lang="${model.language}">` +
         sheet +
         `<div class="ky-turn-view" tabindex="0" role="group" aria-roledescription="${esc(words.region)}" aria-label="${esc(model.title)}" aria-describedby="${esc(model.id)}-help" aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1 2 3 4 Home Space"><div ${worldAttributes(model)}>${worldMarkup(model, layout)}</div></div>` +
         `<p class="ky-turn-help" id="${esc(model.id)}-help">${esc(keys)}</p>` +

package/dist/turn.model.d.ts

@@ -1,5 +1,5 @@
 import { KYOGIJO_STRINGS } from "./strings.ts";
-import { type TurnPreset, type TurnView } from "./turn.camera.ts";
+import { type PresetTable, type TurnPreset, type TurnView } from "./turn.camera.ts";
 import type { Plane } from "./turn.kit.ts";
 import { type UprightOptions, type Uprights } from "./uprights.ts";
 import type { VenueSettings } from "./venue.ts";
@@ -93,11 +93,25 @@ export interface TurnModel {
     view: TurnView;
     /** False when there is nothing to turn: a badge is a strip, not a surface. */
     turnable: boolean;
+    /** The four viewpoints, when the model has its own (a tournament layout's); the sport's when missing. */
+    presets?: PresetTable;
+    /** The flat drawing to show where the 3D view cannot be drawn, when it is not `drawKyogijo`'s of `options` (a tournament layout's). */
+    flat?: string;
 }
 /** The options with what makes the floor of a 3D view: the whole surface, lying wide, at its full size. */
 export declare function floorOptions(options: SurfaceOptions | ScoreOptions): SurfaceOptions | ScoreOptions;
 /** The view a set of settings opens on. */
-export declare const openingView: (settings: Pick<TurnSettings, "preset" | "view">, sport?: string) => TurnView;
+export declare const openingView: (settings: Pick<TurnSettings, "preset" | "view">, sport?: string | PresetTable) => TurnView;
+/**
+ * The scene's extent in pixels from its middle: the area it is fitted to (in feet, in the drawing's frame) widened to take in every plane that is not the ground, and as high as the highest of them (or of `lift`, the height
+ * of the floor itself).
+ */
+export declare function sceneBox(planes: readonly Plane[], area: {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+}, lift: number, centre: readonly [number, number], scale: number): Box3;
 /** Work out a 3D view from the options of a drawing. */
 export declare function buildTurn(options: SurfaceOptions | ScoreOptions, settings?: TurnSettings): TurnModel;
 /** The words of the 3D view in the model's language. */

package/dist/turn.model.js

@@ -33,6 +33,38 @@ function crowdVars(floor) {
 }
 /** The view a set of settings opens on. */
 export const openingView = (settings, sport) => clampView({ ...(presetView(settings.preset, sport) ?? presetView(TURN_DEFAULT, sport)), ...settings.view });
+/**
+ * The scene's extent in pixels from its middle: the area it is fitted to (in feet, in the drawing's frame) widened to take in every plane that is not the ground, and as high as the highest of them (or of `lift`, the height
+ * of the floor itself).
+ */
+export function sceneBox(planes, area, lift, centre, scale) {
+    let [x0, y0, x1, y1] = [area.x0, area.y0, area.x1, area.y1];
+    let top = lift;
+    for (const p of planes) {
+        // A billboard turns about its middle: whichever way it faces, it lies within a circle as wide as it is.
+        const reach = p.billboard === true ? Math.hypot(...p.u) / 2 : 0;
+        for (const [a, b] of [[0, 0], [1, 0], [0, 1], [1, 1]]) {
+            const point = [p.o[0] + a * p.u[0] + b * p.v[0], p.o[1] + a * p.u[1] + b * p.v[1], p.o[2] + a * p.u[2] + b * p.v[2]];
+            if (reach > 0) {
+                const middle = [p.o[0] + (p.u[0] + p.v[0]) / 2, p.o[1] + (p.u[1] + p.v[1]) / 2];
+                x0 = Math.min(x0, middle[0] - reach);
+                x1 = Math.max(x1, middle[0] + reach);
+                y0 = Math.min(y0, middle[1] - reach);
+                y1 = Math.max(y1, middle[1] + reach);
+                top = Math.max(top, point[2]);
+                continue;
+            }
+            if (p.kind !== "ground") {
+                x0 = Math.min(x0, point[0]);
+                x1 = Math.max(x1, point[0]);
+                y0 = Math.min(y0, point[1]);
+                y1 = Math.max(y1, point[1]);
+            }
+            top = Math.max(top, point[2]);
+        }
+    }
+    return { x0: (x0 - centre[0]) * scale, x1: (x1 - centre[0]) * scale, y0: (y0 - centre[1]) * scale, y1: (y1 - centre[1]) * scale, z0: 0, z1: top * scale };
+}
 /** Work out a 3D view from the options of a drawing. */
 export function buildTurn(options, settings = {}) {
     const asked = floorOptions(options);
@@ -67,32 +99,7 @@ export function buildTurn(options, settings = {}) {
     // The scene's extent: the playing surface (the whole floor where it has no uprights), and whatever stands beyond it (a net behind a goal line). The ground
     // round the surface is not counted, so that the view is fitted to what is played on and the ground runs out of the picture.
     const area = uprights.whole === true || uprights.area === undefined ? { x0: vx, y0: vy, x1: vx + vw, y1: vy + vh } : uprights.area;
-    let [x0, y0, x1, y1] = [area.x0, area.y0, area.x1, area.y1];
-    let top = uprights.lift;
-    for (const p of planes) {
-        // A billboard turns about its middle: whichever way it faces, it lies within a circle as wide as it is.
-        const reach = p.billboard === true ? Math.hypot(...p.u) / 2 : 0;
-        for (const [a, b] of [[0, 0], [1, 0], [0, 1], [1, 1]]) {
-            const point = [p.o[0] + a * p.u[0] + b * p.v[0], p.o[1] + a * p.u[1] + b * p.v[1], p.o[2] + a * p.u[2] + b * p.v[2]];
-            if (reach > 0) {
-                const middle = [p.o[0] + (p.u[0] + p.v[0]) / 2, p.o[1] + (p.u[1] + p.v[1]) / 2];
-                x0 = Math.min(x0, middle[0] - reach);
-                x1 = Math.max(x1, middle[0] + reach);
-                y0 = Math.min(y0, middle[1] - reach);
-                y1 = Math.max(y1, middle[1] + reach);
-                top = Math.max(top, point[2]);
-                continue;
-            }
-            if (p.kind !== "ground") {
-                x0 = Math.min(x0, point[0]);
-                x1 = Math.max(x1, point[0]);
-                y0 = Math.min(y0, point[1]);
-                y1 = Math.max(y1, point[1]);
-            }
-            top = Math.max(top, point[2]);
-        }
-    }
-    const box = { x0: (x0 - centre[0]) * scale, x1: (x1 - centre[0]) * scale, y0: (y0 - centre[1]) * scale, y1: (y1 - centre[1]) * scale, z0: 0, z1: top * scale };
+    const box = sceneBox(planes, area, uprights.lift, centre, scale);
     const { title, description } = describe(o);
     const standing = describeUprights(o, uprights, language);
     return {

package/dist/turn.style.js

@@ -99,6 +99,10 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-seatback{fill:var(--ky-up-seatb)}
 .ky-turn .u-railline{stroke:var(--ky-up-railw);stroke-width:.3;stroke-linecap:square}
 .ky-turn .u-matedge{fill:var(--ky-up-matedge)}
+.ky-turn .u-surround{fill:var(--ky-mu-barrier,#161a1f);fill-opacity:.92}
+.ky-turn .u-surround-rim{fill:var(--ky-mu-chair,#ece7da);fill-opacity:.55}
+.ky-turn .u-chair{fill:var(--ky-mu-chair,#ece7da);stroke:var(--ky-mu-chair-edge,#4a4f56);stroke-width:.06}
+.ky-turn .u-chair-side{fill:color-mix(in srgb,var(--ky-mu-chair,#ece7da) 62%,#000);stroke:var(--ky-mu-chair-edge,#4a4f56);stroke-width:.04}
 .ky-turn-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
 .ky-turn-group{display:flex;flex-wrap:wrap;gap:6px}
 .ky-turn-controls button{font:inherit;font-size:.9rem;font-weight:600;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--ky-turn-rule);background:var(--ky-turn-chip);color:var(--ky-turn-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}

package/dist/venue.d.ts

@@ -1,3 +1,4 @@
+import { type Crowd, type CrowdStands } from "./crowd.ts";
 import { type Cut } from "./venue.geom.ts";
 import { type Upright } from "./turn.kit.ts";
 import type { SurfaceOptions } from "./types.ts";
@@ -29,3 +30,8 @@ export declare const ROOF: {
 };
 /** The stands of a surface as planes: `undefined`-free, an empty venue when the options have no crowd (or the crowd is a hall's gallery, which `venue.room.ts` raises). */
 export declare function standsVenue(o: SurfaceOptions, v: VenueBuild, lift: number): Venue;
+/**
+ * The stands the model says (`crowdStands`, or the stands of a tournament layout's hall) as planes: what `standsVenue` makes of a surface's, for stands that were worked out some other way. `o` is the little of the
+ * drawing's options it reads: the sport (whether a roof is a lid), the detail (`simple` is the plain crowd) and the ground (whose capacity sets the density).
+ */
+export declare function standsVenueOf(stands: CrowdStands, crowd: Crowd, o: Pick<SurfaceOptions, "sport" | "detail" | "ground">, v: VenueBuild, lift: number): Venue;

package/dist/venue.js

@@ -33,6 +33,13 @@ export function standsVenue(o, v, lift) {
     const crowd = resolveCrowd(o.crowd);
     if (stands === undefined || crowd === undefined || stands.gallery === true)
         return NO_VENUE;
+    return standsVenueOf(stands, crowd, { sport: o.sport, detail: o.detail, ground: o.ground }, v, lift);
+}
+/**
+ * The stands the model says (`crowdStands`, or the stands of a tournament layout's hall) as planes: what `standsVenue` makes of a surface's, for stands that were worked out some other way. `o` is the little of the
+ * drawing's options it reads: the sport (whether a roof is a lid), the detail (`simple` is the plain crowd) and the ground (whose capacity sets the density).
+ */
+export function standsVenueOf(stands, crowd, o, v, lift) {
     const cut = v.detail ?? "auto";
     const fine = crowd.detail !== "plain" && o.detail !== "simple";
     const density = densityOf(crowd, stands.seats, groundById(o.ground)?.capacity);

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.12.2";
+export declare const VERSION = "0.14.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.12.2";
+export const VERSION = "0.14.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.12.2",
+  "version": "0.14.0",
   "description": "Kyogijo Stadiums 競技場, 39 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, 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",