@johnmorrisdotca/kyogijo-stadiums 0.26.0 → 0.28.0

package/dist/district.js

@@ -0,0 +1,291 @@
+// A district: several real venues of one city placed on one plan at their real relative positions and orientations, read from the same OpenStreetMap outlines each venue is drawn from (`venues.ts`, `stadiums.ts`).
+// It is generic: a district is a list of venue keys, whichever kinds they are (an NHL arena, a football or soccer stadium, a ballpark later), and the plan fits itself to them. Two modes say how far apart the venues are:
+// `neighbours` fits the plan tight round buildings that stand within a few hundred metres of each other, with no more than a margin between them; `city` keeps the real distances between venues that are kilometres
+// apart, with a grid, a scale and a name beside each. Nothing is drawn but what the venues are drawn from: no street, no park and no mark of a team, a league or a tournament; the credit
+// `VENUE_ATTRIBUTION` goes with it. Pure: options in, a plan, and markup, out; `district.turn.ts` raises it in 3D.
+import { arenaById, arenaNameIn } from "./arenas.js";
+import { crowdStands, drawKyogijo } from "./draw.js";
+import { FEET_PER_METRE } from "./geometry.js";
+import { KYOGIJO_STRINGS } from "./strings.js";
+import { esc, hash } from "./format.js";
+import { groundNameIn } from "./grounds.js";
+import { STADIUM_IDS, groundOfStadium, stadiumById, stadiumSeats } from "./stadiums.js";
+import { VENUE_ATTRIBUTION, VENUE_IDS, venueById } from "./venues.js";
+import { hullOf, metresFrom, middleOf, smallestBox } from "./venues.geo.js";
+export const DISTRICT_MODES = ["neighbours", "city"];
+const venueMember = (venue, language) => {
+    const arena = arenaById(venue.id);
+    if (arena === undefined)
+        throw new Error(`${venue.id} is not an arena`);
+    return {
+        key: venue.id,
+        id: venue.id,
+        kind: "arena",
+        name: { en: arenaNameIn(arena, undefined, "en"), ja: arenaNameIn(arena, undefined, "ja") },
+        ring: venue.osm.ring,
+        centre: venue.osm.axis.centre,
+        heading: venue.osm.axis.heading,
+        basis: venue.osm.axis.basis,
+        seats: venue.seats.hockey,
+        options: { sport: "nhl", arena: venue.id, crowd: { real: true }, language },
+    };
+};
+const stadiumMember = (stadium, config, language) => {
+    const ground = groundOfStadium(stadium);
+    return {
+        key: `${stadium.id}:${config}`,
+        id: stadium.id,
+        kind: "stadium",
+        config,
+        name: { en: groundNameIn(ground, undefined, "en"), ja: groundNameIn(ground, undefined, "ja") },
+        ring: stadium.osm.ring,
+        centre: stadium.osm.axis.centre,
+        heading: stadium.osm.axis.heading,
+        basis: stadium.osm.axis.basis,
+        seats: stadiumSeats(stadium, config),
+        options: { sport: config, stadium: stadium.id, crowd: { real: true }, language },
+    };
+};
+/** Every key a district can be asked for: the arenas of `VENUES` and the stadiums of `STADIUMS`. */
+export const DISTRICT_IDS = Object.freeze([...VENUE_IDS, ...STADIUM_IDS]);
+/** Whether a key is a venue a district can place. */
+export const isDistrictId = (id) => DISTRICT_IDS.includes(id);
+/**
+ * A venue of a district, from its key: `rogers-arena` (an arena), `bc-place` or `bc-place:soccer` (a stadium in its first configuration or the one named). Throws for a key no venue has, and says which keys there are.
+ * @example
+ * ```ts
+ * import { districtMember } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const member = districtMember("bc-place:soccer");
+ * console.log(member.key, member.kind, member.seats);
+ * // bc-place:soccer stadium 52497
+ * ```
+ */
+export function districtMember(input, language = "en") {
+    const [id, named] = typeof input === "string" ? input.split(":") : [input.id, input.config];
+    const venue = venueById(id);
+    if (venue !== undefined) {
+        if (named !== undefined && named !== "nhl")
+            throw new Error(`${id} is an arena with one configuration, not ${named}`);
+        return venueMember(venue, language);
+    }
+    const stadium = stadiumById(id);
+    if (stadium !== undefined) {
+        const config = (named ?? Object.keys(stadium.configs)[0]);
+        if (stadium.configs[config] === undefined)
+            throw new Error(`${id} has no configuration ${String(named)}: ${Object.keys(stadium.configs).join(", ")}`);
+        return stadiumMember(stadium, config, language);
+    }
+    throw new Error(`no venue ${String(id)}: the venues are ${DISTRICT_IDS.join(", ")}`);
+}
+// ---- The plan. ----
+const RAD = Math.PI / 180;
+/** Turn a point of the map (east, down the page) by `degrees` clockwise on the page. */
+const turnBy = ([x, y], degrees) => [x * Math.cos(degrees * RAD) - y * Math.sin(degrees * RAD), x * Math.sin(degrees * RAD) + y * Math.cos(degrees * RAD)];
+/** The margin round the buildings, as a share of the longer side of the district: tight for neighbours, wide for a city's grid and names. */
+export const DISTRICT_MARGIN = { neighbours: 0.09, city: 0.12 };
+const EARTH = 6371008.8;
+const haversine = (a, b) => {
+    const [p, q] = [a[1] * RAD, b[1] * RAD];
+    const h = Math.sin((q - p) / 2) ** 2 + Math.cos(p) * Math.cos(q) * Math.sin(((b[0] - a[0]) * RAD) / 2) ** 2;
+    return 2 * EARTH * Math.asin(Math.sqrt(h));
+};
+/**
+ * The plan of a district: each venue's surface placed where it is on the ground (the distance and the direction between middles come from the coordinates of OpenStreetMap's outlines, to a metre or so) and turned so
+ * that its long side points where it does in the world, and the frame that fits them. A venue whose orientation is not known (an arena the building gives no axis for) is placed with its rink east-west, as it is drawn alone.
+ * @example
+ * ```ts
+ * import { planDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const plan = planDistrict({ venues: ["bc-place", "rogers-arena"] });
+ * console.log(plan.mode, plan.members.length, Math.round(plan.between[0].metres));
+ * // neighbours 2 380
+ * ```
+ */
+export function planDistrict(options) {
+    if (options.venues.length === 0)
+        throw new Error("a district needs a venue");
+    const language = options.language === "ja" ? "ja" : "en";
+    const mode = options.mode === "city" ? "city" : "neighbours";
+    const members = options.venues.map((v) => districtMember(v, language));
+    const keys = new Set();
+    for (const m of members) {
+        if (keys.has(m.key))
+            throw new Error(`${m.key} is in the district twice`);
+        keys.add(m.key);
+    }
+    const origin = middleOf(members.map((m) => m.centre));
+    const ground = (ring) => metresFrom(origin, ring).map(([east, north]) => [east * FEET_PER_METRE, -north * FEET_PER_METRE]);
+    const raw = members.map((m) => ({ at: ground([m.centre])[0], footprint: ground(m.ring) }));
+    // The map's turn: as asked, or the one that lays the district's long way across the page (the smallest box round every building).
+    const all = raw.flatMap((r) => r.footprint);
+    let turn = 0;
+    if (typeof options.turn === "number" && Number.isFinite(options.turn))
+        turn = ((options.turn % 360) + 360) % 360;
+    else if (options.turn === "auto" && members.length > 1) {
+        // `smallestBox` reads its points as east and north; these are east and down the page, so its heading is 90 degrees less the long side's angle on the page, and turning the map by (heading - 90) lays that side along x.
+        const box = smallestBox(all);
+        turn = (((box.heading - 90) % 360) + 360) % 360;
+    }
+    const placed = members.map((member, i) => {
+        const footprint = raw[i].footprint.map((p) => turnBy(p, turn));
+        return { member, at: turnBy(raw[i].at, turn), angle: member.heading - 90 + turn, footprint, hull: hullOf(footprint) };
+    });
+    const xs = placed.flatMap((p) => p.footprint.map((q) => q[0]));
+    const ys = placed.flatMap((p) => p.footprint.map((q) => q[1]));
+    const [x0, x1, y0, y1] = [Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys)];
+    const margin = Math.max(x1 - x0, y1 - y0) * DISTRICT_MARGIN[mode];
+    const view = { x: x0 - margin, y: y0 - margin, w: x1 - x0 + 2 * margin, h: y1 - y0 + 2 * margin };
+    const between = [];
+    members.forEach((a, i) => members.slice(i + 1).forEach((b) => between.push({ a: a.key, b: b.key, metres: Math.round(haversine(a.centre, b.centre) * 10) / 10 })));
+    return { options, mode, turn, north: turn, members: placed, view, between };
+}
+// ---- The drawing. ----
+/** The colours and the type of a district's drawing, light and dark. Defaults sit in `:where()`, so a page's own rule wins. */
+export const KYOGIJO_DISTRICT_STYLE = `
+:where(.ky-district){--ky-dist-ground:#e1e4da;--ky-dist-grid:rgba(40,46,42,.16);--ky-dist-ink:#1f2320;--ky-dist-halo:rgba(255,255,255,.9)}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .ky-district:not([data-theme=light])){--ky-dist-ground:#1b2025;--ky-dist-grid:rgba(220,226,220,.16);--ky-dist-ink:#e8ece8;--ky-dist-halo:rgba(14,18,16,.85)}}
+:where(html[data-theme=dark] .ky-district,.ky-district[data-theme=dark]){--ky-dist-ground:#1b2025;--ky-dist-grid:rgba(220,226,220,.16);--ky-dist-ink:#e8ece8;--ky-dist-halo:rgba(14,18,16,.85)}
+.ky-district .ky-dist-ground{fill:var(--ky-dist-ground)}
+.ky-district .ky-dist-grid{fill:none;stroke:var(--ky-dist-grid);stroke-width:1}
+.ky-district .ky-dist-ink{fill:none;stroke:var(--ky-dist-ink);stroke-linecap:round;stroke-linejoin:round}
+.ky-district .ky-dist-text{fill:var(--ky-dist-ink);font-family:var(--ky-font,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif);font-weight:600;paint-order:stroke;stroke:var(--ky-dist-halo);stroke-linejoin:round}`;
+const ROOT = /^<svg([^>]*)>/;
+const VIEWBOX = /viewBox="(-?[\d.]+) (-?[\d.]+) ([\d.]+) ([\d.]+)"/;
+/** The north arrow of a venue's drawing and the apron under it: a district has one of each of its own. */
+const withoutOwn = (svg) => svg.replace(/<rect class="ky-apron"[^>]*\/>/, "").replace(/<path class="ky-cr-north"[^>]*\/>/, "").replace(/<path class="ky-cr-north-n"[^>]*\/>/, "");
+/**
+ * A venue's drawing as a part of the district's: its root made a nested `svg` that keeps the class, the sport and the colours the drawing's stylesheet reads, its box laid in its own frame (so that the group's turn
+ * and shift put it in place), and its title, description, apron, arrow and stylesheet taken out (the stylesheet is given back in `styles`).
+ */
+export function nestedDrawing(svg) {
+    const root = ROOT.exec(svg);
+    const found = root === null ? null : VIEWBOX.exec(root[1]);
+    if (root === null || found === null)
+        throw new Error("a venue's drawing is an SVG with a viewBox");
+    const [x, y, w, h] = found.slice(1).map(Number);
+    const keep = [...root[1].matchAll(/\s(class|data-[\w-]+|style)="([^"]*)"/g)].map((m) => ` ${m[1]}="${m[2]}"`).join("");
+    // The drawing's stylesheet is taken out and given back apart: the district writes each distinct one once (venues of one family share the base style, which is most of it).
+    const styles = [];
+    const body = withoutOwn(svg.slice(root[0].length))
+        .replace(/<style>[\s\S]*?<\/style>/g, (block) => {
+        styles.push(block);
+        return "";
+    })
+        .replace(/<title\b[^>]*>[\s\S]*?<\/title>|<desc\b[^>]*>[\s\S]*?<\/desc>/g, "")
+        .replace(/<\/svg>\s*$/, "");
+    return { markup: `<svg${keep} x="${x}" y="${y}" width="${w}" height="${h}" viewBox="${x} ${y} ${w} ${h}" aria-hidden="true" focusable="false">${body}</svg>`, box: { x, y, w, h }, styles };
+}
+const num = (value) => String(Math.round(value * 100) / 100);
+/** The middle of a venue's surface in its own drawing's frame (the box the stands are laid round), which its drawing is turned about. */
+export function surfaceCentre(options) {
+    const stands = crowdStands(options);
+    if (stands === undefined)
+        throw new Error("a district's venue has a crowd");
+    return [stands.box.x + stands.box.w / 2, stands.box.y + stands.box.h / 2];
+}
+/** A length in metres worth drawing as a scale: the largest of 50, 100, 200, 500, 1000, 2000, 5000 that is not more than a fifth of the plan's width. */
+export function scaleOf(view) {
+    const fifth = (view.w / FEET_PER_METRE) / 5;
+    return [5000, 2000, 1000, 500, 200, 100, 50].find((m) => m <= fifth) ?? 50;
+}
+/** The distance a scale says, as it is read: metres under a kilometre, else kilometres. */
+export const metresText = (metres) => (metres >= 1000 ? `${metres / 1000} km` : `${metres} m`);
+/** The id of a district's drawing: the option's, or a hash of the options. */
+export const districtId = (options) => (typeof options.id === "string" && options.id !== "" ? options.id : `ky-district-${hash(JSON.stringify([options.venues, options.mode, options.turn, options.language, options.theme, options.stands]))}`);
+/** The title and the description of a district, in its language: what is drawn, where each venue stands from the first, how far apart they are, and the credit. */
+export function describeDistrict(options, plan = planDistrict(options)) {
+    const language = options.language === "ja" ? "ja" : "en";
+    const names = plan.members.map((p) => p.member.name[language]);
+    const words = KYOGIJO_STRINGS[language].said;
+    const list = language === "ja" ? (names.length > 1 ? `${names.slice(0, -1).join("、")}と${names[names.length - 1]}` : names[0]) : names.length > 1 ? `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}` : names[0];
+    const title = language === "ja" ? `${list}の位置関係` : `${list}: where they stand`;
+    const gap = language === "ja" ? "" : " ";
+    const first = plan.between[0];
+    const nameOf = (key) => plan.members.find((p) => p.member.key === key).member.name[language];
+    const apart = first === undefined ? "" : language === "ja" ? `${gap}${nameOf(first.a)}と${nameOf(first.b)}の中心は約${Math.round(first.metres)}m離れています。` : `${gap}The middles of ${nameOf(first.a)} and ${nameOf(first.b)} are about ${Math.round(first.metres)} metres apart.`;
+    const text = fillWords(words.district, { count: String(plan.members.length), mode: words[plan.mode === "city" ? "districtCity" : "districtNeighbours"] });
+    return { title, description: `${text}${apart}${gap}${words.districtCredit}${gap}${VENUE_ATTRIBUTION}${language === "ja" ? "。" : "."}` };
+}
+const fillWords = (text, values) => text.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
+/** How a venue is drawn for a district: its own options with the district's language, theme and ids, in 2D with its stands or as the floor of the 3D view (its building only). */
+export function drawMember(member, options, index, id, how = {}) {
+    const stands = options.stands !== false && how.floor !== true;
+    return drawKyogijo({
+        ...member.options,
+        crowd: { real: true, ...(stands ? {} : { stands: false }) },
+        language: options.language === "ja" ? "ja" : "en",
+        ...(options.theme === undefined ? {} : { theme: options.theme }),
+        id: `${id}-m${index}`,
+    });
+}
+/**
+ * The plan of a district as one SVG: the ground, a grid and a scale, a north arrow, and each venue's own drawing (its stands, or its building only for `stands: false`) put where it stands and turned as it lies, with a name beside each
+ * where `labels` says. `drawing` is how each venue is drawn; the 3D view gives it the building-only floor.
+ * @example
+ * ```ts
+ * import { drawDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const svg = drawDistrict({ venues: ["bc-place", "rogers-arena"] });
+ * console.log(svg.includes("ky-district"), svg.includes("ky-cr-shell"));
+ * // true true
+ * ```
+ */
+export function drawDistrict(options, plan = planDistrict(options), drawing) {
+    const language = options.language === "ja" ? "ja" : "en";
+    const id = districtId(options);
+    const { view } = plan;
+    const labels = options.labels ?? plan.mode === "city";
+    const { title, description } = describeDistrict(options, plan);
+    const diag = Math.max(view.w, view.h);
+    const parts = [];
+    // A grid every `step` feet of the ground: the kilometre in a city, the hundred metres among neighbours.
+    const step = (plan.mode === "city" ? 1000 : 100) * FEET_PER_METRE;
+    const grid = [];
+    const reach = Math.hypot(view.w, view.h);
+    // The grid lines run along the map's east and north, turned with it: lines of constant east and of constant north through the district's origin (the plan's centre of the venues), drawn long enough to cross the frame.
+    const origin = [0, 0];
+    for (let k = -Math.ceil(reach / step); k <= Math.ceil(reach / step); k += 1) {
+        const [ax, ay] = turnBy([k * step, -reach], plan.turn);
+        const [bx, by] = turnBy([k * step, reach], plan.turn);
+        const [cx, cy] = turnBy([-reach, k * step], plan.turn);
+        const [dx, dy] = turnBy([reach, k * step], plan.turn);
+        grid.push(`M${num(origin[0] + ax)} ${num(origin[1] + ay)}L${num(origin[0] + bx)} ${num(origin[1] + by)}M${num(origin[0] + cx)} ${num(origin[1] + cy)}L${num(origin[0] + dx)} ${num(origin[1] + dy)}`);
+    }
+    parts.push(`<rect class="ky-dist-ground" x="${num(view.x)}" y="${num(view.y)}" width="${num(view.w)}" height="${num(view.h)}"/>`);
+    parts.push(`<clipPath id="${id}-clip"><rect x="${num(view.x)}" y="${num(view.y)}" width="${num(view.w)}" height="${num(view.h)}"/></clipPath>`);
+    parts.push(`<path class="ky-dist-grid" clip-path="url(#${id}-clip)" d="${grid.join("")}"/>`);
+    const styles = [];
+    plan.members.forEach((placed, i) => {
+        const svg = drawing === undefined ? drawMember(placed.member, options, i, id) : drawing(placed.member, i);
+        const { markup, styles: own } = nestedDrawing(svg);
+        for (const block of own)
+            if (!styles.includes(block))
+                styles.push(block);
+        const centre = surfaceCentre(placed.member.options);
+        parts.push(`<g class="ky-dist-venue" data-venue="${esc(placed.member.key)}" transform="translate(${num(placed.at[0])} ${num(placed.at[1])}) rotate(${num(placed.angle)}) translate(${num(-centre[0])} ${num(-centre[1])})">${markup}</g>`);
+    });
+    if (labels) {
+        const size = diag * (plan.mode === "city" ? 0.018 : 0.026);
+        plan.members.forEach((placed) => {
+            const bottom = Math.max(...placed.footprint.map((p) => p[1]));
+            const x = placed.footprint.reduce((s, p) => s + p[0], 0) / placed.footprint.length;
+            parts.push(`<text class="ky-dist-text" x="${num(x)}" y="${num(bottom + size * 1.3)}" text-anchor="middle" font-size="${num(size)}" stroke-width="${num(size * 0.22)}">${esc(placed.member.name[language])}</text>`);
+        });
+    }
+    // The north arrow, in the top right corner of the frame, and the scale bar at the bottom left.
+    const arrow = diag * 0.05;
+    const [ax, ay] = [view.x + view.w - arrow * 1.2, view.y + arrow * 1.6];
+    const tip = turnBy([0, -arrow], plan.turn);
+    const tail = turnBy([0, arrow * 0.6], plan.turn);
+    const left = turnBy([-arrow * 0.28, 0], plan.turn);
+    const right = turnBy([arrow * 0.28, 0], plan.turn);
+    const nPos = turnBy([0, -arrow * 1.35], plan.turn);
+    parts.push(`<g class="ky-dist-north" aria-hidden="true"><path class="ky-dist-ink" stroke-width="${num(arrow * 0.06)}" d="M${num(ax + tail[0])} ${num(ay + tail[1])}L${num(ax + tip[0])} ${num(ay + tip[1])}M${num(ax + left[0])} ${num(ay + left[1])}L${num(ax + tip[0])} ${num(ay + tip[1])}L${num(ax + right[0])} ${num(ay + right[1])}"/><text class="ky-dist-text" x="${num(ax + nPos[0])}" y="${num(ay + nPos[1] + arrow * 0.18)}" text-anchor="middle" font-size="${num(arrow * 0.5)}" stroke-width="${num(arrow * 0.1)}">N</text></g>`);
+    const metres = scaleOf(view);
+    const bar = metres * FEET_PER_METRE;
+    const [sx, sy] = [view.x + diag * 0.03, view.y + view.h - diag * 0.04];
+    parts.push(`<g class="ky-dist-scale" aria-hidden="true"><path class="ky-dist-ink" stroke-width="${num(diag * 0.004)}" d="M${num(sx)} ${num(sy - diag * 0.01)}V${num(sy)}H${num(sx + bar)}V${num(sy - diag * 0.01)}"/><text class="ky-dist-text" x="${num(sx + bar / 2)}" y="${num(sy - diag * 0.018)}" text-anchor="middle" font-size="${num(diag * 0.022)}" stroke-width="${num(diag * 0.005)}">${metresText(metres)}</text></g>`);
+    const sheet = options.style === "none" ? "" : `<style>${KYOGIJO_DISTRICT_STYLE}</style>${styles.join("")}`;
+    const theme = options.theme === "light" || options.theme === "dark" ? ` data-theme="${options.theme}"` : "";
+    return `<svg xmlns="http://www.w3.org/2000/svg" class="kyogijo ky-district" viewBox="${num(view.x)} ${num(view.y)} ${num(view.w)} ${num(view.h)}" role="img" aria-labelledby="${id}-t ${id}-d" data-sport="district" data-mode="${plan.mode}"${theme} lang="${language}"><title id="${id}-t">${esc(title)}</title><desc id="${id}-d">${esc(description)}</desc>${sheet}${parts.join("")}</svg>`;
+}
+/** The venues a district was asked for that the package has no key for: none when it can be drawn. */
+export const unknownVenues = (venues) => venues.map((v) => (typeof v === "string" ? v.split(":")[0] : v.id)).filter((id) => !isDistrictId(id));

package/dist/district.turn.d.ts

@@ -0,0 +1,27 @@
+import { type DistrictOptions, type DistrictPlan } from "./district.ts";
+import { type PresetTable } from "./turn.camera.ts";
+import { type KyogijoTurn } from "./turn.dom.ts";
+import { type TurnModel, type TurnSettings } from "./turn.model.ts";
+/** What can be asked of a district's 3D view beyond a surface's: `roof` and `roofOpen` for every venue that has one (as `venue: { roof, roofOpen }` of a single venue's view). */
+export type DistrictTurnSettings = TurnSettings;
+/** The four viewpoints of a district, turned with the map: the main camera looks from the south over the district (north at the top of the page), the end-on view from the west and the low corner from the south-west. */
+export declare function districtPresets(plan: Pick<DistrictPlan, "turn">): PresetTable;
+/**
+ * A district as a 3D model: the floor is the district's flat plan with each venue's building only, and on it stands each venue as it stands on its own (turned about the middle of its surface and moved to its place in the
+ * district), with a name over each where the district has labels. A `TurnModel` like any other: `turnMarkupOf` and `mountDistrictTurn` make a view of it.
+ */
+export declare function buildDistrictTurn(options: DistrictOptions, settings?: DistrictTurnSettings): TurnModel;
+/**
+ * Mount a district as a 3D view in a container: the same view as `mountKyogijoTurn`'s, with the controls, the pointer, the keys and the auto-turn of every 3D view, over the district's plan with each venue standing on it.
+ * @example
+ * ```ts no-run
+ * import { mountDistrictTurn } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const view = mountDistrictTurn(document.querySelector("#city")!, { venues: ["bc-place", "rogers-arena"] }, { preset: "broadcast" });
+ * view.set({ yaw: 40 });
+ * ```
+ */
+export declare function mountDistrictTurn(host: HTMLElement, options: DistrictOptions, settings?: DistrictTurnSettings): KyogijoTurn<DistrictOptions>;
+/** A district as the markup of a 3D view, still until a page's script makes it turn: pure, so a server can make it. */
+export declare function districtTurnMarkup(options: DistrictOptions, settings?: DistrictTurnSettings): string;
+/** The distance in feet that a number of metres is: what a test or a caller needs to compare the plan with the ground. */
+export declare const feetOf: (metres: number) => number;

package/dist/district.turn.js

@@ -0,0 +1,157 @@
+// A district in 3D: the 3D view of `turn.ts` with several real venues standing on one ground at their real relative positions and orientations. Nothing here is drawn a second way. Each venue is built as it is on its own
+// (`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, planDistrict, surfaceCentre } from "./district.js";
+import { n, plane } from "./turn.kit.js";
+import { TURN_PRESETS, wrap } from "./turn.camera.js";
+import { mountTurn } from "./turn.dom.js";
+import { turnMarkupOf } from "./turn.markup.js";
+import { buildTurn, openingView, sceneBox, WORLD_PX } from "./turn.model.js";
+import { planesOf } from "./uprights.js";
+import { FEET_PER_METRE } from "./geometry.js";
+import { hullOf } from "./venues.geo.js";
+/** The four viewpoints of a district, turned with the map: the main camera looks from the south over the district (north at the top of the page), the end-on view from the west and the low corner from the south-west. */
+export function districtPresets(plan) {
+    const turn = plan.turn;
+    return {
+        overhead: { ...TURN_PRESETS.overhead, yaw: wrap(turn) },
+        broadcast: { yaw: wrap(turn - 20), pitch: 58, zoom: 1 },
+        end: { yaw: wrap(turn - 90), pitch: 64, zoom: 1 },
+        corner: { yaw: wrap(turn - 38), pitch: 66, zoom: 1 },
+    };
+}
+/** Turn a point about the origin by `degrees` clockwise on the page. */
+const rot = ([x, y], degrees) => {
+    const a = (degrees * Math.PI) / 180;
+    return [x * Math.cos(a) - y * Math.sin(a), x * Math.sin(a) + y * Math.cos(a)];
+};
+/** A plane of a venue's own frame (its surface's middle at `centre`) put in the district's: turned by the venue's angle about that middle and moved to where the plan puts it. */
+function placeInDistrict(p, placed, centre, prefix, group) {
+    const at = (x, y) => {
+        const [rx, ry] = rot([x - centre[0], y - centre[1]], placed.angle);
+        return [rx + placed.at[0], ry + placed.at[1]];
+    };
+    const dir = (x, y) => rot([x, y], placed.angle);
+    const [ox, oy] = at(p.o[0], p.o[1]);
+    const [ux, uy] = dir(p.u[0], p.u[1]);
+    const [vx, vy] = dir(p.v[0], p.v[1]);
+    const moved = { ...p, id: `${prefix}${p.id}`, o: [ox, oy, p.o[2]], u: [ux, uy, p.u[2]], v: [vx, vy, p.v[2]], group };
+    if (p.shy !== undefined)
+        moved.shy = dir(p.shy[0], p.shy[1]);
+    if (p.crop === true) {
+        // A picture of the floor over a rectangle keeps its sides along x and y.
+        const corners = [at(p.o[0], p.o[1]), at(p.o[0] + p.u[0], p.o[1] + p.u[1]), at(p.o[0] + p.v[0], p.o[1] + p.v[1]), at(p.o[0] + p.u[0] + p.v[0], p.o[1] + p.u[1] + p.v[1])];
+        const [x0, x1] = [Math.min(...corners.map((c) => c[0])), Math.max(...corners.map((c) => c[0]))];
+        const [y0, y1] = [Math.min(...corners.map((c) => c[1])), Math.max(...corners.map((c) => c[1]))];
+        moved.o = [x0, y0, p.o[2]];
+        moved.u = [x1 - x0, 0, 0];
+        moved.v = [0, y1 - y0, 0];
+    }
+    return moved;
+}
+/** A name that faces the eye, standing over a building: its text on a plate. */
+function sign(id, text, at, bottom, size, group) {
+    const wide = Math.max(size * 2.2, size * 0.62 * text.length + size * 1.2);
+    const tall = size * 1.7;
+    const svg = `<rect width="${n(wide)}" height="${n(tall)}" rx="${n(size * 0.3)}" class="u-signplate"/><text class="u-sign" x="${n(wide / 2)}" y="${n(tall * 0.68)}" text-anchor="middle" font-size="${n(size)}">${text.replace(/&/g, "&amp;").replace(/</g, "&lt;")}</text>`;
+    return { ...plane(id, "sign", [at[0] - wide / 2, at[1], bottom + tall], [wide, 0, 0], [0, 0, -tall], svg), billboard: true, lean: true, group };
+}
+/**
+ * A district as a 3D model: the floor is the district's flat plan with each venue's building only, and on it stands each venue as it stands on its own (turned about the middle of its surface and moved to its place in the
+ * district), with a name over each where the district has labels. A `TurnModel` like any other: `turnMarkupOf` and `mountDistrictTurn` make a view of it.
+ */
+export function buildDistrictTurn(options, settings = {}) {
+    const language = options.language === "ja" ? "ja" : "en";
+    const plan = planDistrict(options);
+    const base = districtId(options);
+    const id = settings.id ?? `${base}-turn`;
+    const labels = options.labels ?? plan.mode === "city";
+    const items = [];
+    const defs = [];
+    let crowdStyle = "";
+    plan.members.forEach((placed, i) => {
+        const member = placed.member;
+        const memberId = `${id}-m${i}`;
+        // Each venue is built as its own 3D view is, with the crowd drawn without its seats on its floor and the stands raised.
+        const model = buildTurn({ ...member.options, language, ...(options.theme === undefined ? {} : { theme: options.theme }), id: `${base}-m${i}` }, { ...settings, id: memberId, venue: { roof: true, ...(typeof settings.venue === "object" ? settings.venue : {}) }, preset: undefined, view: undefined });
+        const centre = surfaceCentre(member.options);
+        const prefix = `m${i}-`;
+        for (const item of model.uprights.items) {
+            const planes = item.planes.filter((p) => p.kind !== "ground").map((p) => placeInDistrict(p, placed, centre, prefix, i));
+            if (planes.length > 0) {
+                const [ax, ay] = item.at;
+                const [rx, ry] = rot([ax - centre[0], ay - centre[1]], placed.angle);
+                items.push({ ...item, id: `${prefix}${item.id}`, at: [rx + placed.at[0], ry + placed.at[1]], planes });
+            }
+        }
+        if (model.defs !== "")
+            defs.push(model.defs);
+        if (crowdStyle === "" && model.crowdStyle !== "")
+            crowdStyle = model.crowdStyle;
+    });
+    if (labels) {
+        const size = Math.max(plan.view.w, plan.view.h) * (plan.mode === "city" ? 0.016 : 0.022);
+        plan.members.forEach((placed, i) => {
+            const top = Math.max(...items.filter((it) => it.id.startsWith(`m${i}-`)).map((it) => it.height), 60);
+            const middle = [placed.footprint.reduce((s, p) => s + p[0], 0) / placed.footprint.length, placed.footprint.reduce((s, p) => s + p[1], 0) / placed.footprint.length];
+            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)] });
+        });
+    }
+    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];
+    const area = { x0: view.x, y0: view.y, x1: view.x + view.w, y1: view.y + view.h };
+    const uprights = { items, lift: 0, thin: Math.hypot(view.w, view.h) * 0.0012, area, whole: true, ...(defs.length === 0 ? {} : { defs: defs.join("") }) };
+    const planes = planesOf(uprights);
+    const box = sceneBox(planes, area, 0, centre, scale);
+    // (The floor has no names: the 3D view's own signs, which face the eye, carry them.)
+    const floor = drawDistrict({ ...options, id: base, labels: false }, plan, (member, i) => drawMember(member, { ...options, id: base }, i, base, { floor: true }));
+    const { title, description } = describeDistrict(options, plan);
+    const presets = districtPresets(plan);
+    const surfaceLike = { sport: "soccer", language, ...(options.theme === undefined ? {} : { theme: options.theme }), ...(options.style === undefined ? {} : { style: options.style }) };
+    return {
+        id,
+        language,
+        options: surfaceLike,
+        title,
+        description,
+        standing: "",
+        floor,
+        viewBox: { x: view.x, y: view.y, w: view.w, h: view.h },
+        scale,
+        uprights,
+        defs: defs.join(""),
+        crowdStyle,
+        venue: true,
+        look: undefined,
+        planes,
+        box,
+        centre,
+        view: openingView(settings, presets),
+        turnable: true,
+        presets,
+        // A scene that turns about its middle with buildings far from it wants a longer lens, so that what swings toward the eye does not swell.
+        lens: 12,
+        flat: drawDistrict(options, plan),
+        groups: plan.members.map((p) => ({ hull: hullOf(p.footprint) })),
+    };
+}
+/**
+ * Mount a district as a 3D view in a container: the same view as `mountKyogijoTurn`'s, with the controls, the pointer, the keys and the auto-turn of every 3D view, over the district's plan with each venue standing on it.
+ * @example
+ * ```ts no-run
+ * import { mountDistrictTurn } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const view = mountDistrictTurn(document.querySelector("#city")!, { venues: ["bc-place", "rogers-arena"] }, { preset: "broadcast" });
+ * view.set({ yaw: 40 });
+ * ```
+ */
+export function mountDistrictTurn(host, options, settings = {}) {
+    return mountTurn(host, options, settings, buildDistrictTurn);
+}
+/** A district as the markup of a 3D view, still until a page's script makes it turn: pure, so a server can make it. */
+export function districtTurnMarkup(options, settings = {}) {
+    return turnMarkupOf(buildDistrictTurn(options, settings), settings);
+}
+/** The distance in feet that a number of metres is: what a test or a caller needs to compare the plan with the ground. */
+export const feetOf = (metres) => metres * FEET_PER_METRE;

package/dist/draw.js

@@ -11,6 +11,7 @@ import { FOOTBALL } from "./geometry.js";
 import { renderLayers } from "./layers.js";
 import { arenaById, arenaCourtIn, arenaNameIn, arenaOfficialName, arenaRinkIn } from "./arenas.js";
 import { venueById, venueBowl } from "./venues.js";
+import { groundOfStadium, stadiumBowl, stadiumById, stadiumConfigOf, stadiumSeats } from "./stadiums.js";
 import { groundById, groundNameIn, groundOfficialName } from "./grounds.js";
 import { BOARD, courtFor, hasSetsBoard, isNetLeague, isNetSport } from "./court.js";
 import { cricketBoardMarkup } from "./cricket.board.js";
@@ -435,6 +436,11 @@ function standsFor(o, surface, crowd) {
     // (No visitors' block: no source says where a real arena puts them.)
     if (venue !== undefined)
         return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: venueBowl(venue, box) });
+    // A football field or a soccer pitch in a real stadium: its building and a bowl of the configuration's seats.
+    const config = crowd.real ? stadiumConfigOf(sport) : undefined;
+    const stadium = config !== undefined && chooseLeague(o).league === undefined ? stadiumById(o.stadium ?? o.ground) : undefined;
+    if (stadium !== undefined && config !== undefined)
+        return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: stadiumBowl(stadium, config, box) });
     // A dojo's crowd sits in its gallery, from the room's balcony data (in feet here); the arenas (the Budokan, the Kokugikan) keep their bowls.
     const hall = sport === "dojo" ? dojoGallery(o) : undefined;
     const gallery = hall === undefined ? undefined : { offset: hall.offset / 0.3048, depth: hall.depth / 0.3048, height: [hall.height[0] / 0.3048, hall.height[1] / 0.3048], rows: hall.rows, aisles: hall.aisles };
@@ -727,7 +733,10 @@ export function describe(o) {
     const realCrowd = o.crowd === undefined || o.crowd === false ? undefined : resolveCrowd(o.crowd);
     const venue = sport === "nhl" && league === undefined && realCrowd?.real === true ? venueById(o.arena) : undefined;
     const realLine = venue === undefined || arenaName === undefined ? "" : `${gap}${fill(words.said.real, { arena: arenaName, seats: String(venue.seats.hockey), tiers: String(venue.tiers.count) })}${gap}${words.said[venue.osm.axis.basis === "mapped" ? "realMapped" : venue.osm.axis.basis === "building" ? "realBuilding" : "realNone"]}`;
-    const parkLine = (parkName === undefined ? `${groundLine}${halfLine}${arenaLine}${realLine}` : `${gap}${fill(words.said.park, { park: parkName })}${officially(parkOfficial)}${ballpark === undefined ? "" : ballparkSentences(ballpark).map((line) => `${gap}${line}`).join("")}`) + (special === undefined ? "" : `${gap}${special.text}`);
+    const config = realCrowd?.real === true ? stadiumConfigOf(sport) : undefined;
+    const realStadium = config !== undefined && league === undefined ? stadiumById(o.stadium ?? o.ground) : undefined;
+    const stadiumLine = realStadium === undefined || config === undefined ? "" : `${gap}${fill(words.said.stadium, { stadium: groundNameIn(groundOfStadium(realStadium), o.year, language), seats: String(stadiumSeats(realStadium, config)), tiers: String(realStadium.tiers.count) })}${gap}${words.said[realStadium.osm.axis.basis === "opening" ? "stadiumOpening" : realStadium.osm.axis.basis === "building" ? "stadiumBuilding" : "stadiumNone"]}`;
+    const parkLine = (parkName === undefined ? `${groundLine}${halfLine}${arenaLine}${realLine}${stadiumLine}` : `${gap}${fill(words.said.park, { park: parkName })}${officially(parkOfficial)}${ballpark === undefined ? "" : ballparkSentences(ballpark).map((line) => `${gap}${line}`).join("")}`) + (special === undefined ? "" : `${gap}${special.text}`);
     // A drawing of a past season says which: the markings are those of that season.
     const dated = typeof o.year === "number" && Number.isFinite(o.year);
     const eraLine = dated && league !== undefined

package/dist/flythrough.dom.js

@@ -6,6 +6,7 @@ import { arenaById, arenaNameIn } from "./arenas.js";
 import { STAGE_IDS, cameraAt, coverSide, flightPlan, foldTime, glide, glideSeconds, lengthWords, mainView, mapBox, mapFrame, nextRate, niceLength, stageAt, startOf, stagesOf, } from "./flythrough.path.js";
 import { flythroughMarkup, graticuleMarkup, gridPath, mapMarkup, stageWords } from "./flythrough.markup.js";
 import { FLYTHROUGH_WORDS, say } from "./flythrough.words.js";
+import { LENS } from "./turn.camera.js";
 import { mountKyogijoTurn } from "./turn.dom.js";
 import { arenaOfVenue, planVenue, venueById, venueOrientation, venueRink } from "./venues.js";
 /**
@@ -43,7 +44,7 @@ export function mountFlythrough(host, options, settings = {}) {
         }
     })();
     const place = `${arena.city}, ${region}`;
-    const values = { arena: name, place };
+    const values = { arena: name, place, seats: venue.seats.hockey.toLocaleString(language), tiers: venue.tiers.count };
     const wanted = (options.stages ?? STAGE_IDS).filter((stage, i, all) => STAGE_IDS.includes(stage) && all.indexOf(stage) === i);
     const stageList = STAGE_IDS.filter((stage) => wanted.includes(stage));
     if (stageList.length === 0)
@@ -68,7 +69,7 @@ export function mountFlythrough(host, options, settings = {}) {
         frame = { at: [0, 0], metresX: 1, metresY: 1 };
     }
     const mapFrameNow = frame;
-    host.innerHTML = flythroughMarkup({ id, language, theme: options.theme, arena: name, place, stages: stageList, map: mapSvg, mapCredit: chizu, controls: settings.controls });
+    host.innerHTML = flythroughMarkup({ id, language, theme: options.theme, arena: name, place, stages: stageList, map: mapSvg, mapCredit: chizu, controls: settings.controls, seats: values.seats, tiers: values.tiers });
     const root = host.querySelector(".kf");
     const stage = root.querySelector(".kf-stage");
     const mapLayer = root.querySelector(".kf-map");
@@ -89,8 +90,10 @@ export function mountFlythrough(host, options, settings = {}) {
     // ---- The 3D arena, from above to begin with: the view the path hands over at. ----
     const drawing = { sport: "nhl", arena: venue.id, crowd: { real: true }, language, ...(options.theme === undefined ? {} : { theme: options.theme }) };
     let turn;
-    if (stageList.includes("arena"))
-        turn = mountKyogijoTurn(turnHost, drawing, { preset: "overhead", controls: false, venue: { roof: true }, motion: "none", id: `${id}-turn` });
+    // The settings object is kept: the view reads its `lens` at every paint, and the path shortens the lens as the camera comes into the bowl.
+    const turnSettings = { preset: "overhead", controls: false, venue: { roof: true }, motion: "none", id: `${id}-turn`, lens: LENS };
+    if (stageList.some((one) => one === "arena" || one === "bowl" || one === "rink"))
+        turn = mountKyogijoTurn(turnHost, drawing, turnSettings);
     // ---- The site plan: the building's outline and the rink, in the drawing's own feet; the sheet under it is the floor's. ----
     const plan = planVenue(venue);
     const rink = venueRink(venue);
@@ -126,6 +129,9 @@ export function mountFlythrough(host, options, settings = {}) {
         if (turn !== undefined && floor !== null) {
             // Measure the arena seen from straight above, as the 3D view lays it out in this container: where the rink stands and how big a foot is.
             const was = turn.view();
+            const lens = turnSettings.lens;
+            // The hand-over is seen from straight above through the usual long lens, whatever the lens is now.
+            turnSettings.lens = LENS;
             turn.set({ yaw: 0, pitch: 0, zoom: 1 }, false);
             const box = floor.getBoundingClientRect();
             // The stage's own area, inside its border: the layers are laid out in it.
@@ -141,6 +147,7 @@ export function mountFlythrough(host, options, settings = {}) {
                 sheet = { x: vb.x, y: vb.y, w: vb.width, h: vb.height };
                 drawPlan();
             }
+            turnSettings.lens = lens;
             turn.set(was, false);
         }
         const startSpan = start?.span ?? 9000000;
@@ -201,9 +208,12 @@ export function mountFlythrough(host, options, settings = {}) {
         put("3d", turnHost, "visibility", live3d ? "visible" : "hidden");
         if (live3d && turn !== undefined) {
             put("3d", turnHost, "opacity", num(cam.arena, 3));
-            const view = `${num(cam.yaw, 3)}|${num(cam.pitch, 3)}|${num(cam.logZoom, 4)}`;
+            put("3d", turnHost, "--kf-roof", num(cam.roof, 3));
+            put("3d", turnHost, "@data-roof", cam.roof > 0.004 ? "1" : "0");
+            const view = `${num(cam.yaw, 3)}|${num(cam.pitch, 3)}|${num(cam.logZoom, 4)}|${num(cam.logLens, 4)}`;
             if (written["3d:view"] !== view) {
                 written["3d:view"] = view;
+                turnSettings.lens = Math.exp(cam.logLens);
                 turn.set({ yaw: cam.yaw, pitch: cam.pitch, zoom: Math.exp(cam.logZoom) }, false);
             }
         }

package/dist/flythrough.markup.d.ts

@@ -25,6 +25,9 @@ export interface MarkupInput {
     /** The arena's name, and where it is (`Anaheim, United States`), in the page's language. */
     arena: string;
     place: string;
+    /** The venue's seats for ice hockey and its seating tiers, in the words of the bowl's stage (`{seats}`, `{tiers}`). */
+    seats?: number | string;
+    tiers?: number | string;
     /** The stages flown, in order. */
     stages: readonly StageId[];
     /** The drawn map (already through `mapMarkup`), and whether it is chizu's (so that the credit names it). */
@@ -38,6 +41,8 @@ export interface MarkupInput {
 export declare const stageWords: (language: Language, stage: StageId, values: {
     arena: string;
     place: string;
+    seats?: number | string;
+    tiers?: number | string;
 }) => {
     name: string;
     text: string;

package/dist/flythrough.markup.js

@@ -63,7 +63,7 @@ export function controlsMarkup(words, stages, current, playing) {
 /** The whole fly-through as markup. */
 export function flythroughMarkup(input) {
     const words = FLYTHROUGH_WORDS[input.language];
-    const values = { arena: input.arena, place: input.place };
+    const values = { arena: input.arena, place: input.place, seats: input.seats, tiers: input.tiers };
     const first = input.stages[0];
     const intro = stageWords(input.language, first, values);
     const label = say(words.title, values);