@johnmorrisdotca/kyogijo-stadiums 0.44.1 → 0.45.0

package/dist/turn.markup.js

@@ -9,6 +9,8 @@ import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 import { esc } from "./format.js";
 import { turnBoardMarkup } from "./overlay.js";
 const px = (value) => `${Math.round(value * 1000) / 1000}`;
+/** The share of the layer at `index` (0 the floor, then the planes). */
+const shareOf = (raster, index) => (typeof raster === "number" ? raster : (raster[index] ?? 1));
 /**
  * The matrix that stands a plane in the scene, before the camera: its x along `u`, its y along `v`, its corner `o`, in pixels from the middle of the scene
  * (`centre`, in feet).
@@ -53,20 +55,88 @@ export function groupRanks(groups, yaw) {
     }));
     return rank;
 }
-/** Work a view out in a container `width` by `height` pixels. */
-export function layoutOf(model, view, width, height, lens) {
+const RAD = Math.PI / 180;
+const prepared = new WeakMap();
+function prepare(model) {
+    const known = prepared.get(model.planes);
+    if (known !== undefined && known.scale === model.scale && known.centre[0] === model.centre[0] && known.centre[1] === model.centre[1])
+        return known;
+    const s = model.scale;
+    const centre = model.centre;
+    const base = [];
+    const mid = [];
+    for (const p of model.planes) {
+        if (p.billboard === true) {
+            base.push(undefined);
+            mid.push(undefined);
+            continue;
+        }
+        base.push(planeMatrix(p, s, centre));
+        if (p.under === true) {
+            mid.push(undefined);
+            continue;
+        }
+        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 };
+    prepared.set(model.planes, made);
+    return made;
+}
+/**
+ * Whether a plane is turned away from the eye, given its matrix: the sign of the determinant of the 3 by 3 map from the plane's own x and y to the screen says which side of it faces the eye (positive: the side that its `u` x `v`
+ * points out of), and `Plane.cull` says which side is the solid's outside. A plane edge-on to the eye has no area to draw.
+ */
+const turnedAway = (m, side) => side * (m[0] * (m[5] * m[15] - m[13] * m[7]) - m[4] * (m[1] * m[15] - m[13] * m[3]) + m[12] * (m[1] * m[7] - m[5] * m[3])) <= 0;
+/**
+ * Work a view out in a container `width` by `height` pixels. With `cull`, the faces of a closed solid that are turned away from the eye (`Plane.cull`) are left out: they have no transform and no place in the stack, and `culled` says
+ * 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) {
     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 s = model.scale;
     const centre = model.centre;
+    const known = prepare(model);
     const floor = { id: "floor", kind: "ground", o: [model.viewBox.x, model.viewBox.y, model.uprights.lift], u: [model.viewBox.w, 0, 0], v: [0, model.viewBox.h, 0], svg: "" };
+    const count = model.planes.length;
+    const widen = (m, index) => {
+        const share = shareOf(raster, index);
+        if (share === 1)
+            return m;
+        const back = 1 / share;
+        for (let i = 0; i < 8; i += 1)
+            m[i] *= back;
+        return m;
+    };
+    const transforms = new Array(count + 1);
+    const culled = cull ? new Array(count + 1).fill(false) : undefined;
     // A billboard faces the eye at this view.
-    const planes = model.planes.map((p) => facing(p, view.yaw, view.pitch));
-    const transforms = [floor, ...planes].map((p) => matrix3d(multiply(camera, planeMatrix(p, s, centre))));
+    const planes = new Array(count);
+    for (let i = 0; i < count; i += 1)
+        planes[i] = facing(model.planes[i], view.yaw, view.pitch);
+    transforms[0] = matrix3d(widen(multiply(camera, planeMatrix(floor, s, centre)), 0));
+    for (let i = 0; i < count; i += 1) {
+        const m = widen(multiply(camera, known.base[i] ?? planeMatrix(planes[i], s, centre)), i + 1);
+        const side = planes[i].cull;
+        if (culled !== undefined && side !== undefined && turnedAway(m, side)) {
+            culled[i + 1] = true;
+            transforms[i + 1] = "";
+        }
+        else
+            transforms[i + 1] = matrix3d(m);
+    }
     // Far to near: a plane's depth is that of its middle. The ground of a hall is under everything. The floor is next, unless it stands raised on something (a table tennis table's top, on its legs): then it is
     // sorted with the rest, by its middle, so that the legs and the skirt on the far side are drawn under it and the ones on the near side over it, and nothing under the top shows through it.
-    const depth = (p) => {
+    const [sinYaw, cosYaw, sinPitch, cosPitch] = [Math.sin(view.yaw * RAD), Math.cos(view.yaw * RAD), Math.sin(view.pitch * RAD), Math.cos(view.pitch * RAD)];
+    const k = at.k * view.zoom;
+    const depthAt = (x, y, z) => (x * k * sinYaw + y * k * cosYaw) * sinPitch + z * k * cosPitch;
+    const depth = (p, i) => {
+        const pre = i < 0 ? undefined : known.mid[i];
+        if (pre !== undefined)
+            return depthAt(pre[0], pre[1], p.fadeSide === true ? (fadeOf(p, view.yaw, view.pitch) >= 1 ? pre[3] : pre[4]) : pre[2]);
         // A see-through building's wall is a tall plane round what stands in it: a far wall is behind all of it and a near one in front of all of it, however high its middle is, so a far wall is placed by its foot and a near one by its top.
         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]];
         const z = p.fadeSide === true ? (fadeOf(p, view.yaw, view.pitch) >= 1 ? Math.min(...zs) : Math.max(...zs)) : (p.o[2] + (p.u[2] + p.v[2]) / 2);
@@ -75,7 +145,12 @@ export function layoutOf(model, view, width, height, lens) {
         return depthOf([(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, z * s], view, at);
     };
     const raised = model.uprights.lift > 0;
-    const order = [...planes.map((p, i) => ({ i: i + 1, ground: p.kind === "ground", depth: depth(p), group: p.group })), ...(raised ? [{ i: 0, ground: false, depth: depth(floor), group: undefined }] : [])].filter((one) => !one.ground);
+    const order = [];
+    for (let i = 0; i < count; i += 1)
+        if (planes[i].kind !== "ground" && culled?.[i + 1] !== true)
+            order.push({ i: i + 1, depth: depth(planes[i], i), group: planes[i].group });
+    if (raised)
+        order.push({ i: 0, depth: depth(floor, -1), group: undefined });
     // Buildings that stand apart are drawn one after another, the far one first; a plane of none (the floor) goes by its depth alone.
     const rank = model.groups === undefined ? undefined : groupRanks(model.groups, view.yaw);
     // The planes of the blocks that stand round the buildings (`APART`) are stacked by depth among themselves and then woven into the buildings' by depth, each list keeping its own order.
@@ -84,24 +159,28 @@ export function layoutOf(model, view, width, height, lens) {
     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++]);
-    const stack = new Array(model.planes.length + 1).fill(0);
+    const stack = new Array(count + 1).fill(0);
     stack[0] = 1;
     order.forEach((one, rank) => {
         stack[one.i] = rank + 2;
     });
-    const fade = [1, ...model.planes.map((p) => fadeOf(p, view.yaw, view.pitch))];
-    return { at, transforms, stack, fade };
+    const fade = new Array(count + 1);
+    fade[0] = 1;
+    for (let i = 0; i < count; i += 1)
+        fade[i + 1] = fadeOf(model.planes[i], view.yaw, view.pitch);
+    return { at, transforms, stack, fade, ...(culled === undefined ? {} : { culled }) };
 }
 /** One plane as an element: its box in pixels and the SVG drawn on it in feet. */
-export function planeMarkup(p, scale, transform, stack, fade = 1) {
+export function planeMarkup(p, scale, transform, stack, fade = 1, raster = 1) {
     const [w, h] = size(p);
-    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" style="width:${px(w * scale)}px;height:${px(h * scale)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(w)} ${n(h)}" width="${px(w * scale)}" height="${px(h * scale)}" aria-hidden="true" focusable="false">${p.svg}</svg></div>`;
+    const [bw, bh] = [px(w * scale * raster), px(h * scale * raster)];
+    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" style="width:${bw}px;height:${bh}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(w)} ${n(h)}" width="${bw}" height="${bh}" aria-hidden="true" focusable="false">${p.svg}</svg></div>`;
 }
 /**
  * A plane that is the floor's own drawing seen through its rectangle (`Plane.crop`): the floor's SVG again, its viewBox cut down to the plane's rectangle, in the plane's own box. It is a picture, not a second
  * description: it carries no role, title or description of its own.
  */
-export function cropMarkup(model, p, transform, stack, fade = 1) {
+export function cropMarkup(model, p, transform, stack, fade = 1, raster = 1) {
     const [w, h] = size(p);
     const box = `${px(p.o[0])} ${px(p.o[1])} ${px(w)} ${px(h)}`;
     const picture = model.floor
@@ -111,12 +190,12 @@ export function cropMarkup(model, p, transform, stack, fade = 1) {
         .replace(/^<svg([^>]*?)\srole="img"/, '<svg$1 aria-hidden="true"')
         .replace(/^<svg([^>]*?)\saria-labelledby="[^"]*"/, "<svg$1")
         .replace(/<title\b[^>]*>[\s\S]*?<\/title>|<desc\b[^>]*>[\s\S]*?<\/desc>/g, "");
-    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" data-crop="floor" style="width:${px(w * model.scale)}px;height:${px(h * model.scale)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}">${picture}</div>`;
+    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" data-crop="floor" style="width:${px(w * model.scale * raster)}px;height:${px(h * model.scale * raster)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}">${picture}</div>`;
 }
 /** The floor as an element: the flat drawing, in the pixels of the scene. */
-export function floorMarkup(model, transform, stack) {
+export function floorMarkup(model, transform, stack, raster = 1) {
     const vb = model.viewBox;
-    return `<div class="ky-turn-floor" style="width:${px(vb.w * model.scale)}px;height:${px(vb.h * model.scale)}px;transform:${transform};z-index:${stack}">${model.floor}</div>`;
+    return `<div class="ky-turn-floor"${raster === 1 ? "" : ` data-raster="${raster}"`} style="width:${px(vb.w * model.scale * raster)}px;height:${px(vb.h * model.scale * raster)}px;transform:${transform};z-index:${stack}">${model.floor}</div>`;
 }
 /** The patterns the venue's planes are drawn with, once, in a box of no size: every plane's SVG reads them by id, and the crowd's colours are on this element. */
 export function defsMarkup(model) {
@@ -131,8 +210,8 @@ export function worldAttributes(model) {
     return model.look === undefined ? 'class="ky-turn-world"' : `class="ky-turn-world kyogijo" data-sport="${esc(model.look.sport)}" data-look="${esc(model.look.look)}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""}`;
 }
 /** The floor and the planes of a model, laid out. */
-export function worldMarkup(model, layout) {
-    return defsMarkup(model) + floorMarkup(model, layout.transforms[0], layout.stack[0]) + model.planes.map((p, i) => (p.crop === true ? cropMarkup(model, p, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1]) : planeMarkup(p, model.scale, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1]))).join("");
+export function worldMarkup(model, layout, raster = 1) {
+    return defsMarkup(model) + floorMarkup(model, layout.transforms[0], layout.stack[0], shareOf(raster, 0)) + model.planes.map((p, i) => (p.crop === true ? cropMarkup(model, p, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1], shareOf(raster, i + 1)) : planeMarkup(p, model.scale, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1], shareOf(raster, i + 1)))).join("");
 }
 /** The buttons under the view. */
 export function controlsMarkup(model, view, playing = false, direction = "counterclockwise") {
@@ -157,18 +236,18 @@ export function controlsMarkup(model, view, playing = false, direction = "counte
 /** The size, in pixels, the first view is worked out for. */
 export const sizeOf = (settings) => settings.size ?? { width: 960, height: 600 };
 /** The 3D view of a model as markup, laid out for `settings.size`; a page's script then makes it turn. */
-export function turnMarkupOf(model, settings = {}) {
+export function turnMarkupOf(model, settings = {}, raster = 1) {
     const words = turnWords(model);
     const { width, height } = sizeOf(settings);
     const view = model.view;
-    const layout = layoutOf(model, view, width, height, settings.lens);
+    const layout = layoutOf(model, view, width, height, settings.lens, false, raster);
     const keys = `${words.keys}${model.standing === "" ? "" : ` ${model.standing}`}`;
     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, model.presets ?? sport) ?? "custom"}"${model.lighting === undefined ? "" : ` data-lighting="${model.lighting}"`}${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>${model.board === undefined ? "" : turnBoardMarkup(model.board)}</div>` +
+        `<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, raster)}</div>${model.board === undefined ? "" : turnBoardMarkup(model.board)}</div>` +
         `<p class="ky-turn-help" id="${esc(model.id)}-help">${esc(keys)}</p>` +
         (settings.controls === false ? "" : controlsMarkup(model, view, false, turnDirection(settings.direction))) +
         `<div class="ky-turn-live" role="status" aria-live="polite"></div>` +

package/dist/turn.model.d.ts

@@ -6,6 +6,7 @@ import { type ResolvedBoard } from "./overlay.ts";
 import type { VenueSettings } from "./venue.ts";
 import type { Box3 } from "./turn.camera.ts";
 import type { OutsideSpec } from "./outside.dom.ts";
+import type { GovernorTuning, Quality, QualityTier } from "./quality.ts";
 import type { Language, LightingOptions, LightingPreset, ScoreOptions, SurfaceOptions } from "./types.ts";
 /** What can be asked of a 3D view. */
 export interface TurnSettings {
@@ -53,6 +54,16 @@ export interface TurnSettings {
     onDirectionChange?: (direction: TurnDirection) => void;
     /** Called with `true` when the auto-turn starts and `false` when it stops, whatever stopped it. */
     onPlayChange?: (playing: boolean) => void;
+    /**
+     * How much the view draws, so that it turns well on every device: `"auto"` (the default) starts on `high` and watches the frames the view makes while it turns, stepping a tier down when they run over budget for a while and back up
+     * when they have been steady for longer; `"high"` is everything as it always was; `"medium"` and `"low"` draw less (the buildings round a district stand up fewer, the trees and the crowd are thinner, a small venue is a block, and the layers
+     * are rastered at a lower pixel ratio). A tier asked for by name is kept; `setQuality` changes it at once, and the camera and the auto-turn go on. See `docs/quality.md`.
+     */
+    quality?: Quality;
+    /** How the frames are judged in `auto` (see `GovernorTuning`): for a test or a screen that is unusual; the defaults suit a 60 Hz display. */
+    qualityTuning?: Partial<GovernorTuning>;
+    /** Called with the tier the view is drawn at when it is first mounted and each time `auto` or `setQuality` changes it. */
+    onQualityChange?: (tier: QualityTier, quality: Quality) => void;
     /** Called after the view has changed by a key, a button or the pointer, with the view and the viewpoint it is (`undefined` when it has been turned by hand). */
     onChange?: (view: TurnView, preset: TurnPreset | undefined) => void;
 }
@@ -113,6 +124,8 @@ export interface TurnModel {
     }[];
     /** The board the options ask for (`board`), laid over the view: a layer of its own, never a plane of the scene. */
     board?: ResolvedBoard;
+    /** Whether the model has tiers: a district's does (`quality`), a single surface's does not, and the view does not time its frames or make its layers smaller for one that has none. */
+    tiered?: boolean;
     /** The crowd outside the venues of a district, asked for (`DistrictOptions.outside`): a canvas on the floor that the mount paints (`outside.dom.ts`), never a plane of the scene. */
     outside?: OutsideSpec;
 }

package/dist/turn.style.js

@@ -80,6 +80,12 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-slab-top{fill:var(--ky-up-blk-roof);stroke:var(--ky-up-blk-line);stroke-width:.5}
 .ky-turn .u-floorplate{fill:var(--ky-up-plate);stroke:var(--ky-up-plate-line);stroke-width:1.2;stroke-linejoin:round}
 .ky-turn .u-block-roof{fill:var(--ky-up-blk-roof);stroke:var(--ky-up-blk-line);stroke-width:.5;stroke-linejoin:round}
+/* A venue drawn as a proxy in the lower tiers (district.turn.ts): the tones of the buildings round it, darker and bluer, as a stadium's concrete and roof read against a city's. */
+.ky-turn .u-proxy{stroke:var(--ky-up-blk-line);stroke-width:.6}
+.ky-turn .u-proxy-a{fill:color-mix(in srgb,var(--ky-up-blk-a) 52%,#4d6fa0)}
+.ky-turn .u-proxy-b{fill:color-mix(in srgb,var(--ky-up-blk-b) 52%,#3f5c88)}
+.ky-turn .u-proxy-c{fill:color-mix(in srgb,var(--ky-up-blk-c) 52%,#324b72)}
+.ky-turn .u-proxy-roof{fill:color-mix(in srgb,var(--ky-up-blk-roof) 60%,#5f7fae);stroke:var(--ky-up-blk-line);stroke-width:.6;stroke-linejoin:round}
 .ky-turn .u-roof{fill:var(--ky-up-roof);stroke:var(--ky-up-roofline);stroke-width:.8;stroke-linejoin:round}
 .ky-turn .u-signplate{fill:var(--ky-turn-bg);fill-opacity:.9;stroke:var(--ky-turn-rule);stroke-width:.5}
 .ky-turn .u-sign{fill:var(--ky-turn-ink);font-family:var(--ky-font,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif);font-weight:600}

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.44.1";
+export declare const VERSION = "0.45.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.44.1";
+export const VERSION = "0.45.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.44.1",
+  "version": "0.45.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",
@@ -153,6 +153,11 @@
       "import": "./dist/cityctx-entry.js",
       "default": "./dist/cityctx-entry.js"
     },
+    "./areas": {
+      "types": "./dist/areas-entry.d.ts",
+      "import": "./dist/areas-entry.js",
+      "default": "./dist/areas-entry.js"
+    },
     "./osm": {
       "types": "./dist/osm-entry.d.ts",
       "import": "./dist/osm-entry.js",