@johnmorrisdotca/kyogijo-stadiums 0.56.0 → 0.58.0

package/dist/district.turn.js

@@ -2,7 +2,9 @@
 // (`buildTurn`: the stands, the walls and the roof, the goals and posts of its field), its planes are turned about the middle of its surface and moved to where the plan puts it, and the floor is the district's flat
 // plan drawn with each venue's building only. The model it makes is a `TurnModel`, so the camera, the controls, the pointer, the auto-turn and the steady fit of every other 3D view are this one's; its
 // buildings are stacked building by building (`Plane.group`), the far one first, so that a roof never shows through a nearer building.
-import { describeDistrict, districtId, drawDistrict, drawMember, nestedDrawing, planDistrict, surfaceCentre } from "./district.js";
+import { circuitInDistrict, circuitPointIn, describeDistrict, districtId, drawDistrict, drawMember, nestedDrawing, planDistrict, surfaceCentre } from "./district.js";
+import { circuitSupport } from "./district.circuit.js";
+import { landmarkUprights } from "./landmarks.js";
 import { blockPlanes, contextUprights, shellBlock, slabPlanes, thinTrees } from "./context.js";
 import { TIER_PROFILES, tierOf } from "./quality.js";
 import { dojo } from "./budo/dojo.api.js";
@@ -193,10 +195,27 @@ export function buildDistrictTurn(options, settings = {}) {
             items.push({ id: `${prefix}plate-name`, kind: "scoreboard", at: placed.at, height: level + size * 1.7, planes: [sign(`${prefix}plate-name`, label, placed.at, level + size * 0.4, size, i)] });
         }
     });
+    // The circuit's pit building and its turns' numbers, standing where the district puts the circuit, apart from every venue's group.
+    if (plan.circuit !== undefined) {
+        const placed = plan.circuit;
+        const { circuitUprights, circuitDrawing } = circuitSupport();
+        for (const item of circuitUprights(circuitDrawing(circuitInDistrict(options, base, true)), Math.hypot(plan.view.w, plan.view.h) * 0.0012)) {
+            items.push({ ...item, id: `ci-${item.id}`, at: circuitPointIn(placed, [item.at[0], item.at[1]]), planes: item.planes.map((p) => placeInDistrict(p, placed, [0, 0], "ci-", APART)) });
+        }
+    }
     // The buildings round the venues stand apart from them: each block's planes are of no venue's group.
     if (plan.context !== undefined)
         for (const item of contextUprights(plan.context, profile.blocks))
             items.push({ ...item, planes: item.planes.map((p) => ({ ...p, group: APART })) });
+    // The landmarks round them, each by its own shape (a dome, a wheel, the jets of a fountain), apart from every venue too; and with names, each one's name over it.
+    const landmarks = plan.context?.landmarks ?? [];
+    for (const item of landmarkUprights(landmarks, profile.simple))
+        items.push({ ...item, planes: item.planes.map((p) => ({ ...p, group: APART })) });
+    if (labels) {
+        const size = Math.max(plan.view.w, plan.view.h) * (plan.mode === "city" ? 0.013 : 0.018);
+        for (const l of landmarks)
+            items.push({ id: `lm-${l.key}-name`, kind: "scoreboard", at: l.label, height: l.height + size * 2.3, planes: [sign(`lm-${l.key}-name`, l.name[language], l.label, l.height + size * 0.5, size, APART)] });
+    }
     if (labels) {
         const size = Math.max(plan.view.w, plan.view.h) * (plan.mode === "city" ? 0.016 : 0.022);
         plan.members.forEach((placed, i) => {
@@ -205,6 +224,13 @@ export function buildDistrictTurn(options, settings = {}) {
             items.push({ id: `m${i}-name`, kind: "scoreboard", at: middle, height: top + size * 1.7, planes: [sign(`m${i}-name`, placed.member.name[language], middle, top + size * 0.6, size, i)] });
         });
     }
+    if (labels && plan.circuit !== undefined) {
+        const size = Math.max(plan.view.w, plan.view.h) * (plan.mode === "city" ? 0.016 : 0.022);
+        // Over the start, where the pits are, so that it does not stand in front of what the lap goes round.
+        const at = circuitPointIn(plan.circuit, plan.circuit.plan.start.at);
+        const top = (plan.circuit.plan.building?.height ?? 0) + size * 0.6;
+        items.push({ id: "ci-name", kind: "scoreboard", at, height: top + size * 1.7, planes: [sign("ci-name", plan.circuit.plan.circuit.names[language], at, top, size, APART)] });
+    }
     const view = plan.view;
     const scale = WORLD_PX / Math.max(view.w, view.h);
     const centre = [view.x + view.w / 2, view.y + view.h / 2];

package/dist/landmarks.d.ts

@@ -0,0 +1,105 @@
+import type { Pt } from "./crowd.ts";
+import { type Plane, type Upright } from "./turn.kit.ts";
+import { type LonLat } from "./venues.geo.ts";
+/** How a landmark is drawn. */
+export type LandmarkShape = "dome" | "wheel" | "fountains" | "named";
+export declare const LANDMARK_SHAPES: readonly LandmarkShape[];
+/**
+ * A landmark of an area, as its data holds it:
+ * - `dome`: a sphere cut by the ground (the Sphere), `width` across at its widest and `height` tall; its outline is its footprint, and the building the area has there is the dome's own.
+ * - `wheel`: a big wheel standing upright along the long way of its outline (OpenStreetMap maps the High Roller's footprint), `width` across, its top `height` over the ground.
+ * - `fountains`: a row of jets along the long way of the water its outline is, reaching up to `height` (the most a published figure says they reach); the water is the area's land cover.
+ * - `named`: a name over the buildings inside its outline (they are the area's own, standing at their own heights), at `height`, the top of the tallest.
+ */
+export interface ContextLandmark {
+    key: string;
+    /** The Wikidata item its names come from. */
+    wikidata: string;
+    name: {
+        en: string;
+        ja: string;
+    };
+    shape: LandmarkShape;
+    /** The OpenStreetMap element its outline is, `way/<id>`. */
+    source: string;
+    /** Its outline, metres east and north of the area's origin. */
+    ring: readonly (readonly [number, number])[];
+    /** Its height over the ground, in metres. */
+    height: number;
+    /** A dome's or a wheel's diameter, in metres. */
+    width?: number;
+    /** A named landmark's tallest building, where its name stands: metres east and north of the area's origin. */
+    top?: readonly [number, number];
+    /** Where the figures were read, in our own words. */
+    read: string;
+}
+/** A landmark placed in a district's frame: its outline in feet (x to the right, y down the page), its middle, its height and width in feet, and for a wheel or fountains the unit direction its long way runs. */
+export interface PlacedLandmark {
+    key: string;
+    name: {
+        en: string;
+        ja: string;
+    };
+    shape: LandmarkShape;
+    ring: Pt[];
+    at: Pt;
+    /** Where its name stands: over its middle, or a named landmark's tallest building. */
+    label: Pt;
+    height: number;
+    width?: number;
+    along: Pt;
+}
+/** The landmarks of some areas placed in a district: turned as the plan is and kept where they stand in the frame (`frame` is the plan's box in feet). */
+export declare function placeLandmarks(areas: readonly {
+    origin: readonly [number, number];
+    landmarks?: readonly ContextLandmark[];
+}[], origin: LonLat, turn: number, frame: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}): PlacedLandmark[];
+/** Whether a building's outline is a landmark's own (most of it inside a dome's footprint): the dome draws it, and the block is left out. */
+export declare const ownedByLandmark: (landmarks: readonly PlacedLandmark[], ring: readonly Pt[]) => boolean;
+/** Whether a building stands under a named landmark (its middle inside the landmark's outline): it is raised in the 3D view whatever the count of blocks. */
+export declare const underLandmark: (landmarks: readonly PlacedLandmark[], ring: readonly Pt[]) => boolean;
+/** The jets of fountains, in feet: where each stands along the long way of the water (from its middle) and how high it reaches, as a share of the most. Ours: the published figure is the most they reach, the row is a pattern. */
+export declare const FOUNTAIN_JETS: readonly (readonly [number, number])[];
+/** What the floor has of the landmarks: a dome's footprint and a wheel's line on the ground, in the tone of the tallest buildings, and the jets' feet as dots on the water. Empty for none. */
+export declare function landmarksFloor(landmarks: readonly PlacedLandmark[]): string;
+/** How finely a dome is cut: sides round it and bands up it. Fewer in the lower tiers. */
+export declare const DOME_CUT: Readonly<{
+    high: {
+        sides: number;
+        bands: number;
+    };
+    simple: {
+        sides: number;
+        bands: number;
+    };
+}>;
+/** The planes of a dome: a sphere `width` across whose top is `height` over the ground, cut by the ground, as bands of flat facets, each lit by the way it faces. */
+export declare function domePlanes(prefix: string, at: Pt, height: number, width: number, cut: {
+    sides: number;
+    bands: number;
+}): Plane[];
+/** How a wheel is drawn: segments round its rim and spokes to its hub. */
+export declare const WHEEL_CUT: Readonly<{
+    high: {
+        rim: number;
+        spokes: number;
+    };
+    simple: {
+        rim: number;
+        spokes: number;
+    };
+}>;
+/** The planes of a big wheel standing upright along `along`: its rim, its spokes and the two legs from its hub to the ground, each a thin bar seen from every side. */
+export declare function wheelPlanes(prefix: string, at: Pt, along: Pt, height: number, width: number, cut: {
+    rim: number;
+    spokes: number;
+}): Plane[];
+/** The planes of fountains: a row of jets along the long way of the water, each a thin upright strip reaching to its share of `height`. */
+export declare function fountainPlanes(prefix: string, l: Pick<PlacedLandmark, "ring" | "at" | "along" | "height">): Plane[];
+/** The 3D view's landmarks: each one's shape standing where it is, cut more coarsely in a simple tier. A named landmark has no shape of its own: its buildings are the area's. */
+export declare function landmarkUprights(landmarks: readonly PlacedLandmark[], simple: boolean): Upright[];

package/dist/landmarks.js

@@ -0,0 +1,160 @@
+import { FEET_PER_METRE } from "./geometry.js";
+import { bar, n, plane } from "./turn.kit.js";
+import { hullOf, inside, metresFrom, smallestBox } from "./venues.geo.js";
+export const LANDMARK_SHAPES = ["dome", "wheel", "fountains", "named"];
+const RAD = Math.PI / 180;
+const rotate = ([x, y], degrees) => [x * Math.cos(degrees * RAD) - y * Math.sin(degrees * RAD), x * Math.sin(degrees * RAD) + y * Math.cos(degrees * RAD)];
+const middleOf = (ring) => [ring.reduce((s, p) => s + p[0], 0) / ring.length, ring.reduce((s, p) => s + p[1], 0) / ring.length];
+/** The landmarks of some areas placed in a district: turned as the plan is and kept where they stand in the frame (`frame` is the plan's box in feet). */
+export function placeLandmarks(areas, origin, turn, frame) {
+    const placed = [];
+    for (const area of areas) {
+        const [east, north] = metresFrom(origin, [area.origin])[0];
+        for (const l of area.landmarks ?? []) {
+            const ring = l.ring.map(([e, nn]) => rotate([(e + east) * FEET_PER_METRE, -(nn + north) * FEET_PER_METRE], turn));
+            const at = middleOf(ring);
+            if (at[0] < frame.x || at[0] > frame.x + frame.w || at[1] < frame.y || at[1] > frame.y + frame.h)
+                continue;
+            // The long way of the outline, on the page: `smallestBox` reads east and north, and the page's y runs down.
+            const heading = smallestBox(ring.map(([x, y]) => [x, -y])).heading;
+            const along = [Math.sin(heading * RAD), -Math.cos(heading * RAD)];
+            const label = l.top === undefined ? at : rotate([(l.top[0] + east) * FEET_PER_METRE, -(l.top[1] + north) * FEET_PER_METRE], turn);
+            placed.push({ key: l.key, name: l.name, shape: l.shape, ring, at, label, height: l.height * FEET_PER_METRE, ...(l.width === undefined ? {} : { width: l.width * FEET_PER_METRE }), along });
+        }
+    }
+    return placed;
+}
+/** Whether a building's outline is a landmark's own (most of it inside a dome's footprint): the dome draws it, and the block is left out. */
+export const ownedByLandmark = (landmarks, ring) => landmarks.some((l) => l.shape === "dome" && (inside(hullOf([...l.ring]), middleOf(ring)) || ring.filter((p) => inside(l.ring, p)).length * 10 >= ring.length * 7));
+/** Whether a building stands under a named landmark (its middle inside the landmark's outline): it is raised in the 3D view whatever the count of blocks. */
+export const underLandmark = (landmarks, ring) => landmarks.some((l) => l.shape === "named" && inside(l.ring, middleOf(ring)));
+const num = (value) => String(Math.round(value * 10) / 10);
+/** The jets of fountains, in feet: where each stands along the long way of the water (from its middle) and how high it reaches, as a share of the most. Ours: the published figure is the most they reach, the row is a pattern. */
+export const FOUNTAIN_JETS = [[-0.36, 0.3], [-0.27, 0.48], [-0.18, 0.66], [-0.09, 0.84], [0, 1], [0.09, 0.84], [0.18, 0.66], [0.27, 0.48], [0.36, 0.3]];
+/** The extent of an outline along a unit direction from its middle: the least and the most. */
+const extent = (ring, at, along) => {
+    const t = ring.map((p) => (p[0] - at[0]) * along[0] + (p[1] - at[1]) * along[1]);
+    return [Math.min(...t), Math.max(...t)];
+};
+/** What the floor has of the landmarks: a dome's footprint and a wheel's line on the ground, in the tone of the tallest buildings, and the jets' feet as dots on the water. Empty for none. */
+export function landmarksFloor(landmarks) {
+    const parts = [];
+    for (const l of landmarks) {
+        if (l.shape === "dome")
+            parts.push(`<path class="ky-dist-block ky-dist-b3 ky-dist-landmark" data-landmark="${l.key}" d="M${l.ring.map(([x, y]) => `${num(x)} ${num(y)}`).join("L")}Z"/>`);
+        if (l.shape === "wheel") {
+            const r = (l.width ?? 0) / 2;
+            parts.push(`<path class="ky-dist-ink ky-dist-landmark" data-landmark="${l.key}" stroke-width="${num(Math.max(r * 0.06, 3))}" d="M${num(l.at[0] - l.along[0] * r)} ${num(l.at[1] - l.along[1] * r)}L${num(l.at[0] + l.along[0] * r)} ${num(l.at[1] + l.along[1] * r)}"/>`);
+        }
+        if (l.shape === "fountains") {
+            // The water the jets stand in, as the land cover draws water (an area's lake mapped as the fountains' own outline is not in its land cover).
+            parts.push(`<path class="ky-dist-land ky-dist-water" data-landmark="${l.key}" d="M${l.ring.map(([x, y]) => `${num(x)} ${num(y)}`).join("L")}Z"/>`);
+            const [t0, t1] = extent(l.ring, l.at, l.along);
+            const long = t1 - t0;
+            const d = FOUNTAIN_JETS.map(([s]) => `M${num(l.at[0] + l.along[0] * (t0 + long * (0.5 + s)))} ${num(l.at[1] + l.along[1] * (t0 + long * (0.5 + s)))}h0`).join("");
+            parts.push(`<path class="ky-dist-jet ky-dist-landmark" data-landmark="${l.key}" stroke-width="${num(Math.max(long * 0.02, 6))}" d="${d}"/>`);
+        }
+    }
+    return parts.length === 0 ? "" : `<g class="ky-dist-landmarks" aria-hidden="true">${parts.join("")}</g>`;
+}
+/** A plane through three or more points of one flat polygon in 3D, painted with `cls`, and `cull` set so that its face away from `inward` is the one drawn (it is hidden from inside). */
+function facet(id, points, cls, inward) {
+    const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+    const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+    const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+    const unit = (a) => {
+        const l = Math.hypot(...a);
+        return l < 1e-9 ? [0, 0, 0] : [a[0] / l, a[1] / l, a[2] / l];
+    };
+    const [p0, p1] = points;
+    const u = unit(sub(p1, p0));
+    const normal = unit(cross(sub(p1, p0), sub(points[points.length - 1], p0)));
+    if (Math.hypot(...normal) < 0.5)
+        return undefined;
+    const v = unit(cross(normal, u));
+    const local = points.map((p) => [dot(sub(p, p0), u), dot(sub(p, p0), v)]);
+    const [a0, a1] = [Math.min(...local.map((p) => p[0])), Math.max(...local.map((p) => p[0]))];
+    const [b0, b1] = [Math.min(...local.map((p) => p[1])), Math.max(...local.map((p) => p[1]))];
+    const o = [p0[0] + u[0] * a0 + v[0] * b0, p0[1] + u[1] * a0 + v[1] * b0, p0[2] + u[2] * a0 + v[2] * b0];
+    const svg = `<polygon class="${cls}" points="${local.map(([a, b]) => `${n(a - a0)},${n(b - b0)}`).join(" ")}"/>`;
+    const out = sub(points[0], inward);
+    // `u` x `v` is the normal; the face that is drawn is the one the normal points out of.
+    return { ...plane(id, "block", o, [u[0] * (a1 - a0), u[1] * (a1 - a0), u[2] * (a1 - a0)], [v[0] * (b1 - b0), v[1] * (b1 - b0), v[2] * (b1 - b0)], svg), cull: dot(normal, out) >= 0 ? 1 : -1 };
+}
+/** The tone of a facet by the way it faces the light (from up the page, to the left, and above): three tones, as a building's walls have. */
+const toneOf = (normal) => {
+    const lit = normal[0] * -0.4 + normal[1] * -0.5 + normal[2] * 0.75;
+    return lit > 0.45 ? "u-block-a" : lit > 0 ? "u-block-b" : "u-block-c";
+};
+/** How finely a dome is cut: sides round it and bands up it. Fewer in the lower tiers. */
+export const DOME_CUT = Object.freeze({ high: { sides: 16, bands: 6 }, simple: { sides: 10, bands: 4 } });
+/** The planes of a dome: a sphere `width` across whose top is `height` over the ground, cut by the ground, as bands of flat facets, each lit by the way it faces. */
+export function domePlanes(prefix, at, height, width, cut) {
+    const r = width / 2;
+    const zc = height - r;
+    const low = Math.asin(Math.max(-1, Math.min(1, -zc / r)));
+    const centre = [at[0], at[1], zc];
+    const point = (side, band) => {
+        const lat = low + ((Math.PI / 2 - low) * band) / cut.bands;
+        const lon = (2 * Math.PI * side) / cut.sides;
+        return [at[0] + r * Math.cos(lat) * Math.cos(lon), at[1] + r * Math.cos(lat) * Math.sin(lon), zc + r * Math.sin(lat)];
+    };
+    const planes = [];
+    for (let band = 0; band < cut.bands; band += 1) {
+        for (let side = 0; side < cut.sides; side += 1) {
+            const top = band + 1 === cut.bands;
+            const pts = top ? [point(side, band), point(side + 1, band), point(side, band + 1)] : [point(side, band), point(side + 1, band), point(side + 1, band + 1), point(side, band + 1)];
+            const mid = [pts.reduce((s, p) => s + p[0], 0) / pts.length - centre[0], pts.reduce((s, p) => s + p[1], 0) / pts.length - centre[1], pts.reduce((s, p) => s + p[2], 0) / pts.length - centre[2]];
+            const l = Math.hypot(...mid);
+            const f = facet(`${prefix}d${band}-${side}`, pts, `u-block ${toneOf([mid[0] / l, mid[1] / l, mid[2] / l])}`, centre);
+            if (f !== undefined)
+                planes.push(f);
+        }
+    }
+    return planes;
+}
+/** How a wheel is drawn: segments round its rim and spokes to its hub. */
+export const WHEEL_CUT = Object.freeze({ high: { rim: 24, spokes: 12 }, simple: { rim: 12, spokes: 6 } });
+/** The planes of a big wheel standing upright along `along`: its rim, its spokes and the two legs from its hub to the ground, each a thin bar seen from every side. */
+export function wheelPlanes(prefix, at, along, height, width, cut) {
+    const r = width / 2;
+    const hub = [at[0], at[1], height - r];
+    const on = (angle, radius = r) => [at[0] + along[0] * radius * Math.cos(angle), at[1] + along[1] * radius * Math.cos(angle), hub[2] + radius * Math.sin(angle)];
+    const thick = Math.max(width * 0.025, 2);
+    const planes = [];
+    for (let i = 0; i < cut.rim; i += 1)
+        planes.push(...bar(`${prefix}rim${i}`, "pole", on((2 * Math.PI * i) / cut.rim), on((2 * Math.PI * (i + 1)) / cut.rim), thick, "u-leg"));
+    for (let i = 0; i < cut.spokes; i += 1)
+        planes.push(...bar(`${prefix}spoke${i}`, "pole", hub, on((2 * Math.PI * i) / cut.spokes), thick * 0.35, "u-leg"));
+    // Two legs, leaning out across the wheel's plane to the ground.
+    const across = [-along[1], along[0]];
+    for (const [i, side] of [[0, 1], [1, -1]])
+        planes.push(...bar(`${prefix}leg${i}`, "pole", hub, [at[0] + across[0] * side * r * 0.3, at[1] + across[1] * side * r * 0.3, 0], thick * 1.4, "u-leg"));
+    return planes;
+}
+/** The planes of fountains: a row of jets along the long way of the water, each a thin upright strip reaching to its share of `height`. */
+export function fountainPlanes(prefix, l) {
+    const [t0, t1] = extent(l.ring, l.at, l.along);
+    const long = t1 - t0;
+    const planes = [];
+    FOUNTAIN_JETS.forEach(([s, share], i) => {
+        const t = t0 + long * (0.5 + s);
+        const [x, y] = [l.at[0] + l.along[0] * t, l.at[1] + l.along[1] * t];
+        planes.push(...bar(`${prefix}jet${i}`, "pole", [x, y, 0], [x, y, l.height * share], Math.max(long * 0.012, 3), "u-jet"));
+    });
+    return planes;
+}
+/** The 3D view's landmarks: each one's shape standing where it is, cut more coarsely in a simple tier. A named landmark has no shape of its own: its buildings are the area's. */
+export function landmarkUprights(landmarks, simple) {
+    const items = [];
+    for (const l of landmarks) {
+        const prefix = `lm-${l.key}-`;
+        if (l.shape === "dome" && l.width !== undefined)
+            items.push({ id: `lm-${l.key}`, kind: "blocks", at: l.at, height: l.height, planes: domePlanes(prefix, l.at, l.height, l.width, simple ? DOME_CUT.simple : DOME_CUT.high) });
+        if (l.shape === "wheel" && l.width !== undefined)
+            items.push({ id: `lm-${l.key}`, kind: "flags", at: l.at, height: l.height, planes: wheelPlanes(prefix, l.at, l.along, l.height, l.width, simple ? WHEEL_CUT.simple : WHEEL_CUT.high) });
+        if (l.shape === "fountains" && !simple)
+            items.push({ id: `lm-${l.key}`, kind: "flags", at: l.at, height: l.height, planes: fountainPlanes(prefix, l) });
+    }
+    return items;
+}

package/dist/turn.camera.d.ts

@@ -78,11 +78,14 @@ export declare function nudge(view: TurnView, toward: TurnToward, amount: number
  * yaw falls) and a drag down tips the top toward the eye (the pitch falls).
  */
 export declare function drag(view: TurnView, dx: number, dy: number, tilt?: boolean, degreesPerPixel?: number): TurnView;
+/** Wheel steps closer together than this, in milliseconds, are one turn of the wheel or one swipe (with its glide). */
+export declare const WHEEL_GESTURE_MS = 300;
 /**
- * The view after the wheel turns by `deltaY` (positive is down, as `WheelEvent.deltaY` says) while the view has focus: the wheel up tips the surface as a drag up does (the near edge goes up, the
- * front is lifted: the pitch rises) and the wheel down as a drag down does.
+ * The view after the wheel turns by `deltaY` (positive is down, as `WheelEvent.deltaY` says; `deltaMode` 1 is lines and 2 is pages): the wheel up zooms in and the wheel down zooms out,
+ * about the view's middle, as the pinch and the buttons do (the view has no pan). A trackpad's pinch (`pinch`: it arrives as Ctrl and the wheel) comes in small steps; a plain wheel's
+ * notch is about 100 pixels and zooms about 1.2 times, as the + key does, and one step of it never zooms more than twice either way.
  */
-export declare const wheelTip: (view: TurnView, deltaY: number) => TurnView;
+export declare function wheelZoom(view: TurnView, deltaY: number, deltaMode?: number, pinch?: boolean): TurnView;
 /** A box in the scene, in pixels from the scene's middle, the floor at `z0` and the highest thing at `z1`. */
 export interface Box3 {
     x0: number;

package/dist/turn.camera.js

@@ -100,11 +100,18 @@ export function nudge(view, toward, amount) {
 export function drag(view, dx, dy, tilt = true, degreesPerPixel = 0.4) {
     return clampView({ ...view, yaw: view.yaw - dx * degreesPerPixel, pitch: tilt ? view.pitch - dy * degreesPerPixel * 0.75 : view.pitch });
 }
+/** Wheel steps closer together than this, in milliseconds, are one turn of the wheel or one swipe (with its glide). */
+export const WHEEL_GESTURE_MS = 300;
 /**
- * The view after the wheel turns by `deltaY` (positive is down, as `WheelEvent.deltaY` says) while the view has focus: the wheel up tips the surface as a drag up does (the near edge goes up, the
- * front is lifted: the pitch rises) and the wheel down as a drag down does.
+ * The view after the wheel turns by `deltaY` (positive is down, as `WheelEvent.deltaY` says; `deltaMode` 1 is lines and 2 is pages): the wheel up zooms in and the wheel down zooms out,
+ * about the view's middle, as the pinch and the buttons do (the view has no pan). A trackpad's pinch (`pinch`: it arrives as Ctrl and the wheel) comes in small steps; a plain wheel's
+ * notch is about 100 pixels and zooms about 1.2 times, as the + key does, and one step of it never zooms more than twice either way.
  */
-export const wheelTip = (view, deltaY) => clampView({ ...view, pitch: view.pitch - deltaY * 0.15 });
+export function wheelZoom(view, deltaY, deltaMode = 0, pinch = false) {
+    const pixels = deltaMode === 1 ? deltaY * (pinch ? 5 : 33) : deltaMode === 2 ? deltaY * 800 : deltaY;
+    const factor = pinch ? Math.exp(clamp(-pixels * 0.01, -10, 10)) : clamp(Math.exp(-pixels * 0.002), 0.5, 2);
+    return clampView({ ...view, zoom: view.zoom * factor });
+}
 const RAD = Math.PI / 180;
 /** Where a point of the scene falls on the screen, in pixels from the middle of the container, when the scene is placed as given and the eye is `distance` pixels away. */
 export function project(point, view, at, distance) {

package/dist/turn.dom.js

@@ -1,10 +1,10 @@
 // The 3D view in a page: `mountKyogijoTurn` writes the scene (`turn.markup.ts`) into a container and makes it turn, as the cube of kyuubu turns: a drag turns and
-// tips it, a pinch or Ctrl and the wheel zoom, the arrow keys step it, four viewpoints and a reset are a button or a number key away, a reader who prefers
+// tips it, the wheel or a pinch zooms, the arrow keys step it, four viewpoints and a reset are a button or a number key away, a reader who prefers
 // reduced motion gets jumps for glides, and where the browser cannot draw in 3D the flat drawing stays. Nothing is polled and nothing runs while the view is
 // still: the elements' `transform`s are written when the view changes, and a glide between viewpoints is a short run of animation frames.
 import { displayProbe, frameBatch } from "./turn.frames.js";
 import { drawKyogijo } from "./draw.js";
-import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step, turnDirection, viewScale, wheelTip } from "./turn.camera.js";
+import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step, turnDirection, viewScale, wheelZoom, WHEEL_GESTURE_MS, ZOOM_MAX, ZOOM_MIN } from "./turn.camera.js";
 import { buildTurn, floorOptions, openingView, turnWords } from "./turn.model.js";
 import { controlsMarkup, layoutOf, turnMarkupOf, worldMarkup } from "./turn.markup.js";
 import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
@@ -212,6 +212,8 @@ export function mountTurn(host, options, settings, build, replayable = false, le
     root.dataset.quality = quality;
     root.dataset.tier = tier;
     root.dataset.share = String(ceiling);
+    // ---- One frame request a frame: the auto-turn, a replay or a race on the view, and the quality's timing of the frames ask through this, and share one animation frame when they run together. ----
+    const frames = frameBatch(win);
     // ---- Quality: in `auto`, the frames the view makes while it turns decide the tier. ----
     let governor = quality === "auto" && win !== null && model.tiered === true ? createGovernor(tier, settings.qualityTuning) : undefined;
     let meterFrame;
@@ -230,7 +232,7 @@ export function mountTurn(host, options, settings, build, replayable = false, le
     };
     const stopMeter = () => {
         if (meterFrame !== undefined)
-            win?.cancelAnimationFrame(meterFrame);
+            frames.cancel(meterFrame);
         meterFrame = undefined;
         lastStamp = undefined;
     };
@@ -252,7 +254,7 @@ export function mountTurn(host, options, settings, build, replayable = false, le
         if (next !== undefined)
             retier(next);
         if (meterFrame === undefined)
-            meterFrame = win.requestAnimationFrame(meterTick);
+            meterFrame = frames.request(meterTick);
     };
     /** The view was painted: the frames are timed from now until it is still. */
     const touched = () => {
@@ -260,7 +262,7 @@ export function mountTurn(host, options, settings, build, replayable = false, le
             return;
         lastPaint = win.performance.now();
         if (meterFrame === undefined)
-            meterFrame = win.requestAnimationFrame(meterTick);
+            meterFrame = frames.request(meterTick);
     };
     /** Draw the world again, from the model of the tier and the options now: the camera, the auto-turn and the pointer are not touched (the elements are the only thing replaced). */
     const renderWorld = () => {
@@ -447,8 +449,6 @@ export function mountTurn(host, options, settings, build, replayable = false, le
         go(opening, 560, "none");
         say(turnWords(model).reset);
     };
-    // ---- One frame request a frame: the auto-turn and a replay on the view ask through this, and share one animation frame when both run. ----
-    const frames = frameBatch(win);
     const requestFrame = (callback) => frames.request(callback);
     const cancelFrame = (id) => frames.cancel(id);
     // ---- The auto-turn: a trophy case's slow turn. It runs only when asked, holds while the pointer holds the view, and does nothing while the page is hidden. ----
@@ -656,20 +656,33 @@ export function mountTurn(host, options, settings, build, replayable = false, le
     stage.addEventListener("pointerup", onUp);
     stage.addEventListener("pointercancel", onUp);
     stage.addEventListener("dblclick", toOpening);
-    // ---- The wheel: Ctrl and the wheel (a pinch on a trackpad) zoom; with the view focused the wheel tips and turns it; otherwise the page scrolls as ever. ----
+    // ---- 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. ----
+    let wheelTaken = Number.NEGATIVE_INFINITY;
     const onWheel = (event) => {
-        if (event.ctrlKey) {
+        const pinch = event.ctrlKey || event.metaKey;
+        const now = Number.isFinite(event.timeStamp) ? event.timeStamp : 0;
+        const continuing = now >= wheelTaken && now - wheelTaken < WHEEL_GESTURE_MS;
+        if (!pinch && (event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))) {
             event.preventDefault();
+            wheelTaken = now;
             grab();
-            view = clampView({ ...view, zoom: view.zoom * Math.exp(-event.deltaY * 0.01) });
+            view = clampView({ ...view, yaw: view.yaw + (event.deltaX || event.deltaY) * 0.25 });
         }
-        else if (doc.activeElement === stage) {
+        else {
+            const next = wheelZoom(view, event.deltaY, event.deltaMode, pinch);
+            const atEnd = event.deltaY <= 0 ? view.zoom >= ZOOM_MAX : view.zoom <= ZOOM_MIN;
+            // Ctrl and the wheel is always the view's, or the browser would zoom the whole page.
+            if (!pinch && atEnd && !continuing)
+                return;
             event.preventDefault();
+            wheelTaken = now;
+            if (next.zoom === view.zoom)
+                return;
             grab();
-            view = event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY) ? clampView({ ...view, yaw: view.yaw + (event.deltaX || event.deltaY) * 0.25 }) : wheelTip(view, event.deltaY);
+            view = next;
         }
-        else
-            return;
         shown = view;
         paint(shown);
         label();

package/dist/turn.style.js

@@ -28,6 +28,7 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-orange{fill:var(--ky-up-orange)}
 .ky-turn .u-wood{fill:var(--ky-up-wood)}
 .ky-turn .u-leg{fill:var(--ky-up-leg)}
+.ky-turn .u-jet{fill:var(--ky-up-jet,rgba(222,240,252,.82))}
 .ky-turn .u-pad{fill:var(--ky-up-pad)}
 .ky-turn .u-table{fill:var(--ky-up-table)}
 .ky-turn .u-foot{fill:var(--ky-up-foot)}

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.56.0";
+export declare const VERSION = "0.58.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.56.0";
+export const VERSION = "0.58.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.56.0",
+  "version": "0.58.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",
@@ -75,6 +75,7 @@
     "./dist/grounds.js",
     "./dist/venues.all.js",
     "./dist/walk.full.js",
+    "./dist/circuits.held.js",
     "./dist/strings.js",
     "./dist/strings.en.js",
     "./dist/strings.ja.js"