@johnmorrisdotca/kyogijo-stadiums 0.57.0 → 0.59.0

package/dist/district.js

@@ -16,6 +16,7 @@ import { VENUE_ATTRIBUTION, VENUE_IDS, venueById } from "./venues.js";
 import { hullOf, metresFrom, middleOf, smallestBox } from "./venues.geo.js";
 import { venueGates } from "./gates.js";
 import { walkIdFor } from "./walk.js";
+import { circuitSupport } from "./district.circuit.js";
 export const DISTRICT_MODES = ["neighbours", "city"];
 const venueMember = (venue, language) => {
     const arena = heldArena(venue.id);
@@ -111,6 +112,11 @@ export function districtRing(input) {
 const RAD = Math.PI / 180;
 /** Turn a point of the map (east, down the page) by `degrees` clockwise on the page. */
 export 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)];
+/** A point of a circuit's own plan (feet, `circuitPlan`) where the district puts it: for a page that draws something on the lap (a race's cars) in a district's frame. */
+export function circuitPointIn(placed, p) {
+    const [x, y] = turnBy(p, placed.angle);
+    return [x + placed.at[0], y + placed.at[1]];
+}
 /** 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 };
 /** The ground kept round the buildings for the crowd outside, in metres, when a district asks for one. */
@@ -133,8 +139,10 @@ const haversine = (a, b) => {
  * ```
  */
 export function planDistrict(options) {
-    if (options.venues.length === 0)
-        throw new Error("a district needs a venue");
+    // (An unknown circuit throws here, naming the keys.)
+    const circuit = options.circuit === undefined ? undefined : circuitSupport().circuitOf(options.circuit);
+    if (options.venues.length === 0 && circuit === undefined)
+        throw new Error("a district needs a venue or a circuit");
     const language = options.language === "ja" ? "ja" : "en";
     const mode = options.mode === "city" ? "city" : "neighbours";
     const members = options.venues.map((v) => districtMember(v, language, options.floor));
@@ -144,15 +152,23 @@ export function planDistrict(options) {
             throw new Error(`${m.key} is in the district twice`);
         keys.add(m.key);
     }
-    const origin = middleOf(members.map((m) => m.centre));
+    const lap = circuit === undefined ? undefined : circuitSupport().circuitPlan(circuit);
+    const origin = middleOf([...members.map((m) => m.centre), ...(lap === undefined ? [] : [lap.origin])]);
     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);
+    // The circuit, unturned: its plan's middle on the ground, and its own frame turned back to east and down the page (its plan lies with its long side along x, turned `90 - heading` from the map).
+    const lapBox = lap === undefined ? [] : [[lap.box.x0, lap.box.y0], [lap.box.x1, lap.box.y0], [lap.box.x1, lap.box.y1], [lap.box.x0, lap.box.y1]];
+    const lapAt = lap === undefined ? undefined : ground([lap.origin])[0];
+    const lapGround = (p) => {
+        const [x, y] = turnBy(p, lap.heading - 90);
+        return [x + lapAt[0], y + lapAt[1]];
+    };
+    // 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, and the circuit's ground).
+    const all = [...raw.flatMap((r) => r.footprint), ...lapBox.map(lapGround)];
     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) {
+    else if (options.turn === "auto" && members.length + (lap === undefined ? 0 : 1) > 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;
@@ -163,8 +179,17 @@ export function planDistrict(options) {
         const parts = (member.parts ?? [{ key: member.key, options: member.options, centre: member.centre, heading: member.heading, ...(member.elevation === undefined ? {} : { elevation: member.elevation }) }]).map((part) => ({ part, at: turnBy(ground([part.centre])[0], turn), angle: part.heading - 90 + turn }));
         return { member, parts, 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 placedCircuit = lap === undefined
+        ? undefined
+        : (() => {
+            const at = turnBy(lapAt, turn);
+            const angle = lap.heading - 90 + turn;
+            const put = (p) => circuitPointIn({ at, angle }, p);
+            return { plan: lap, at, angle, footprint: lapBox.map(put), ...(lap.building === undefined ? {} : { building: lap.building.ring.map(put) }) };
+        })();
+    const outlines = [...placed.map((p) => p.footprint), ...(placedCircuit === undefined ? [] : [placedCircuit.footprint])];
+    const xs = outlines.flatMap((f) => f.map((q) => q[0]));
+    const ys = outlines.flatMap((f) => f.map((q) => q[1]));
     const [x0, x1, y0, y1] = [Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys)];
     const context = options.context !== undefined && options.context.length > 0;
     // A district that asks for a crowd outside (and has a mask to put it on) keeps room round its buildings for it, whatever the level, so that the plan stays where it is as the level changes.
@@ -177,9 +202,11 @@ export function planDistrict(options) {
     const view = { x: framed.x0, y: framed.y0, w: framed.x1 - framed.x0, h: framed.y1 - framed.y0 };
     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 })));
-    const around = context ? placeContext(options.context, origin, turn, view, placed.map((p) => ({ footprint: p.footprint, shell: p.member.shell !== undefined }))) : undefined;
+    // (The circuit's pit building is the circuit's: a building of the context that is the same one is left out. Its ground and its lap are not buildings, and every building on them stays.)
+    const owners = [...placed.map((p) => ({ footprint: p.footprint, shell: p.member.shell !== undefined })), ...(placedCircuit?.building === undefined ? [] : [{ footprint: placedCircuit.building }])];
+    const around = context ? placeContext(options.context, origin, turn, view, owners) : undefined;
     const gates = options.gates !== true ? [] : placed.flatMap((p) => venueGates(p.member.id).map((g) => ({ key: g.key, venue: p.member.key, name: g.name, at: turnBy(ground([g.at])[0], turn), angle: ((g.bearing + turn) % 360 + 360) % 360, basis: g.basis })));
-    return { options, mode, turn, north: turn, members: placed, origin, context: around, gates, view, between };
+    return { options, mode, turn, north: turn, members: placed, origin, context: around, gates, view, between, ...(placedCircuit === undefined ? {} : { circuit: placedCircuit }) };
 }
 // ---- 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. */
@@ -204,6 +231,7 @@ export const KYOGIJO_DISTRICT_STYLE = `
 .ky-district .ky-dist-green{fill:var(--ky-dist-green)}
 .ky-district .ky-dist-wood{fill:var(--ky-dist-wood)}
 .ky-district .ky-dist-tree{fill:none;stroke:var(--ky-dist-tree);stroke-linecap:round}
+.ky-district .ky-dist-jet{fill:none;stroke:var(--ky-dist-halo);stroke-linecap:round}
 .ky-district .ky-dist-gate rect{fill:var(--ky-dist-gate);stroke:var(--ky-dist-gate);stroke-width:2.4}
 .ky-district .ky-dist-gate-plausible rect{fill:var(--ky-dist-ground);fill-opacity:.85}
 .ky-district .ky-dist-gate-queue{fill:none;stroke:var(--ky-dist-gate);stroke-width:3;stroke-dasharray:9 7}
@@ -260,19 +288,25 @@ export function scaleOf(view) {
 /** 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, ...(options.context === undefined || options.context.length === 0 ? [] : [options.context.map((a) => a.key)]), ...(options.building === undefined ? [] : [options.building]), ...(options.floor === undefined ? [] : [`floor${options.floor}`])]))}`);
+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, ...(options.context === undefined || options.context.length === 0 ? [] : [options.context.map((a) => a.key)]), ...(options.building === undefined ? [] : [options.building]), ...(options.floor === undefined ? [] : [`floor${options.floor}`]), ...(options.circuit === undefined ? [] : [`circuit:${options.circuit}`])]))}`);
 /** 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 lap = plan.circuit?.plan.circuit;
+    const names = [...(lap === undefined ? [] : [lap.names[language]]), ...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 title = plan.members.length === 0 && lap !== undefined ? fillWords(circuitSupport().words[language].districtTitle, { name: lap.names[language] }) : 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"] });
+    const cw = lap === undefined ? undefined : circuitSupport().words[language];
+    const km = lap === undefined ? "" : (lap.length.value / 1000).toLocaleString(language === "ja" ? "ja-JP" : "en-US", { minimumFractionDigits: 3, maximumFractionDigits: 3 });
+    // A district of a circuit alone says what the circuit's own plan does; with venues, the venues' sentence, then the circuit's.
+    const text = plan.members.length === 0 && lap !== undefined
+        ? fillWords(cw.districtAlone, { name: lap.names[language], km })
+        : `${fillWords(words.district, { count: String(plan.members.length), mode: words[plan.mode === "city" ? "districtCity" : "districtNeighbours"] })}${lap === undefined ? "" : `${gap}${fillWords(cw.inDistrict, { name: lap.names[language], km })}`}`;
     const level = options.outside?.level ?? 0;
     const standing = level > 0 ? Math.round(plan.members.filter((p) => walkIdFor([p.member.id]) !== undefined).reduce((sum, p) => sum + p.member.seats, 0) * level / 100) : 0;
     const crowd = standing > 0 ? `${gap}${fillWords(words.districtOutside, { percent: String(level), people: String(standing).replace(/\B(?=(\d{3})+(?!\d))/g, ",") })}` : "";
@@ -342,6 +376,14 @@ export function drawDistrict(options, plan = planDistrict(options), drawing) {
         }
     }
     const styles = [];
+    // The circuit, on the ground under the venues: its own drawing without its frame (no ground, name, arrow, scale or credit), turned and put where it lies.
+    if (plan.circuit !== undefined) {
+        const { markup, styles: own } = nestedDrawing(circuitSupport().circuitDrawing(circuitInDistrict(options, id, drawing !== undefined)).svg);
+        for (const block of own)
+            if (!styles.includes(block))
+                styles.push(block);
+        parts.push(`<g class="ky-dist-circuit" data-circuit="${esc(plan.circuit.plan.circuit.id)}" transform="translate(${num(plan.circuit.at[0])} ${num(plan.circuit.at[1])}) rotate(${num(plan.circuit.angle)})">${markup}</g>`);
+    }
     plan.members.forEach((placed, i) => {
         placed.parts.forEach((pp, j) => {
             const svg = drawing === undefined ? drawMember(placed.member, options, i, id, {}, j) : drawing(placed.member, i, j);
@@ -363,6 +405,18 @@ export function drawDistrict(options, plan = planDistrict(options), drawing) {
     }
     if (labels) {
         const size = diag * (plan.mode === "city" ? 0.018 : 0.026);
+        // The landmarks' names, smaller, under each.
+        for (const l of plan.context?.landmarks ?? []) {
+            const bottom = Math.max(...l.ring.map((p) => p[1]));
+            parts.push(`<text class="ky-dist-text" data-name="${esc(l.key)}" x="${num(l.label[0])}" y="${num(l.shape === "named" ? l.label[1] : bottom + size)}" text-anchor="middle" font-size="${num(size * 0.72)}" stroke-width="${num(size * 0.16)}">${esc(l.name[language])}</text>`);
+        }
+        if (plan.circuit !== undefined) {
+            // The circuit's name under its ground, as a venue's is under its building.
+            const bottom = Math.max(...plan.circuit.footprint.map((p) => p[1]));
+            const x = plan.circuit.footprint.reduce((sum, p) => sum + p[0], 0) / plan.circuit.footprint.length;
+            const y = Math.min(bottom + size * 1.3, plan.view.y + plan.view.h - size * 0.4);
+            parts.push(`<text class="ky-dist-text" data-name="circuit" x="${num(x)}" y="${num(y)}" text-anchor="middle" font-size="${num(size)}" stroke-width="${num(size * 0.22)}">${esc(plan.circuit.plan.circuit.names[language])}</text>`);
+        }
         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;
@@ -380,11 +434,27 @@ export function drawDistrict(options, plan = planDistrict(options), drawing) {
     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];
+    // At the bottom left, unless a venue or its name is there (T-Mobile Arena, at the south-west corner of the Las Vegas district): then at the bottom right.
+    const named = (placed) => [...placed.footprint, ...(labels ? [[placed.footprint.reduce((sum, p) => sum + p[0], 0) / placed.footprint.length, Math.max(...placed.footprint.map((p) => p[1])) + diag * 0.03]] : [])];
+    const corner = { x0: view.x, x1: view.x + diag * 0.06 + bar, y0: view.y + view.h - diag * 0.08 };
+    const crowded = plan.members.some((placed) => named(placed).some(([x, y]) => x >= corner.x0 && x <= corner.x1 && y >= corner.y0));
+    const [sx, sy] = [crowded ? view.x + view.w - diag * 0.03 - bar : 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}"${(options.outside?.level ?? 0) > 0 ? ` data-outside="${options.outside?.level}"` : ""}${theme} lang="${language}"><title id="${id}-t">${esc(title)}</title><desc id="${id}-d">${esc(description)}</desc>${sheet}${parts.join("")}</svg>`;
 }
+/** The options a district's circuit is drawn from: the circuit's own drawing in the district's language and theme, without its frame, and for the floor of the 3D view without its turns' numbers (they stand up). */
+export function circuitInDistrict(options, id, floor) {
+    return {
+        circuit: options.circuit,
+        language: options.language === "ja" ? "ja" : "en",
+        ...(options.theme === undefined ? {} : { theme: options.theme }),
+        id: `${id}-ci`,
+        label: false,
+        frame: false,
+        ...(floor ? { turns: false } : {}),
+    };
+}
 /** 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.race.d.ts

@@ -0,0 +1,40 @@
+import type { KyogijoRace, RaceViewSettings } from "./circuits.race.dom.ts";
+import type { CircuitRace, RaceOptions } from "./circuits.race.ts";
+import { type DistrictOptions } from "./district.ts";
+import { type DistrictTurnSettings } from "./district.turn.ts";
+/** What a race on a district's ground is drawn from: the district's options, its `circuit` named, and the race's (`seed`, `laps`, `cars`). */
+export type DistrictRaceOptions = DistrictOptions & {
+    circuit: string;
+} & Omit<RaceOptions, "circuit">;
+/** A race on a district's ground at a moment: the district's and the race's options, and the seconds from the start (0, the grid, by default). */
+export type DistrictRaceDrawOptions = DistrictRaceOptions & {
+    t?: number;
+};
+/** How a race on a district's ground is shown and played: as a circuit's race, with the district's 3D view's settings (its viewpoint, the walls and roofs of its venues, its quality). */
+export type DistrictRaceSettings = RaceViewSettings & {
+    turn?: DistrictTurnSettings;
+};
+/**
+ * A race on a district's ground at a moment, as one SVG string: the district's plan with a dot for each car where the race has it then, on the circuit where the district lays it, in its team's colour with the position it holds
+ * written on it. The race is the simulation the options make (made-up cars, from a seed), or the one given (from a feed, `raceFromFeed`).
+ * @example
+ * ```ts
+ * import { drawDistrictRace } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const svg = drawDistrictRace({ venues: ["t-mobile-arena"], circuit: "las-vegas", laps: 3, cars: 6, t: 120 });
+ * console.log(svg.match(/class="ky-ci-car"/g)!.length, svg.includes('data-circuit="las-vegas"'));
+ * // 6 true
+ * ```
+ */
+export declare function drawDistrictRace(options: DistrictRaceDrawOptions, given?: CircuitRace): string;
+/**
+ * Mount a race on a district's ground in a page: the district flat (or in 3D, with its venues, its landmarks and the circuit's pit building standing) with a dot for each car on the circuit, and the race's clock, controls and
+ * timing board, as `mountCircuitRace` has them. It does nothing until it is played, and nothing while it is paused, hidden or out of sight; in 3D the view's turn and the race share one frame. The lean district reads the
+ * circuits first (`await loadCircuits()`), with the venues' records and the area round them as for any district.
+ * @example
+ * ```ts no-run
+ * import { mountDistrictRace } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const race = mountDistrictRace(document.querySelector("#strip")!, { venues: ["t-mobile-arena"], circuit: "las-vegas", labels: true }, { view: "3d", speed: 10 });
+ * race.play();
+ * ```
+ */
+export declare function mountDistrictRace(host: HTMLElement, options: DistrictRaceOptions, settings?: DistrictRaceSettings): KyogijoRace<DistrictRaceOptions, DistrictOptions>;

package/dist/district.race.js

@@ -0,0 +1,60 @@
+import { circuitSupport } from "./district.circuit.js";
+import { circuitPointIn, drawDistrict, planDistrict } from "./district.js";
+import { buildDistrictTurn } from "./district.turn.js";
+import { esc } from "./format.js";
+import { fill } from "./strings.core.js";
+/** Where a point of the circuit's plan lies on a district's ground. */
+function placer(plan) {
+    const placed = plan.circuit;
+    if (placed === undefined)
+        throw new Error("a race on a district needs the district's `circuit`");
+    return (p) => circuitPointIn(placed, p);
+}
+/** The size of the cars' dots on a district: a thousandth of its longer side, as on a circuit's own drawing, so that they read as large on the page. */
+const sizeOf = (plan) => Math.max(plan.view.w, plan.view.h) / 1000;
+/**
+ * A race on a district's ground at a moment, as one SVG string: the district's plan with a dot for each car where the race has it then, on the circuit where the district lays it, in its team's colour with the position it holds
+ * written on it. The race is the simulation the options make (made-up cars, from a seed), or the one given (from a feed, `raceFromFeed`).
+ * @example
+ * ```ts
+ * import { drawDistrictRace } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const svg = drawDistrictRace({ venues: ["t-mobile-arena"], circuit: "las-vegas", laps: 3, cars: 6, t: 120 });
+ * console.log(svg.match(/class="ky-ci-car"/g)!.length, svg.includes('data-circuit="las-vegas"'));
+ * // 6 true
+ * ```
+ */
+export function drawDistrictRace(options, given) {
+    const { simulateRace, raceAt, carsMarkup, carRadius, words } = circuitSupport().race;
+    const language = options.language === "ja" ? "ja" : "en";
+    const plan = planDistrict(options);
+    const put = placer(plan);
+    const race = given ?? simulateRace(options);
+    const moment = raceAt(race, options.t ?? 0);
+    const onGround = { ...moment, standings: moment.standings.map((line) => ({ ...line, at: put(line.at) })) };
+    const w = words[language];
+    const extra = fill(given === undefined ? w.description : w.fromFeed, { cars: race.cars.length, laps: race.laps });
+    return drawDistrict(options, plan)
+        .replace(/<desc id="([^"]+)">([^<]*)<\/desc>/, (_, id, text) => `<desc id="${id}">${text}${language === "ja" ? "" : " "}${esc(extra)}</desc>`)
+        .replace(/<\/svg>$/, `${carsMarkup(onGround, carRadius(sizeOf(plan)), language)}</svg>`);
+}
+/**
+ * Mount a race on a district's ground in a page: the district flat (or in 3D, with its venues, its landmarks and the circuit's pit building standing) with a dot for each car on the circuit, and the race's clock, controls and
+ * timing board, as `mountCircuitRace` has them. It does nothing until it is played, and nothing while it is paused, hidden or out of sight; in 3D the view's turn and the race share one frame. The lean district reads the
+ * circuits first (`await loadCircuits()`), with the venues' records and the area round them as for any district.
+ * @example
+ * ```ts no-run
+ * import { mountDistrictRace } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const race = mountDistrictRace(document.querySelector("#strip")!, { venues: ["t-mobile-arena"], circuit: "las-vegas", labels: true }, { view: "3d", speed: 10 });
+ * race.play();
+ * ```
+ */
+export function mountDistrictRace(host, options, settings = {}) {
+    const support = circuitSupport();
+    const scene = {
+        flat: (o, t, given) => drawDistrictRace({ ...o, t }, given),
+        view: (o) => o,
+        build: buildDistrictTurn,
+        point: (o) => placer(planDistrict(o)),
+    };
+    return support.race.mountRaceIn(host, options, scene, settings);
+}

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/draw.js

@@ -436,7 +436,7 @@ function realStadiumOf(o, sport, real) {
     return stadium !== undefined && stadium.configs[config] !== undefined && (stadiumKind(stadium) === "park") === (config === "mlb") ? { stadium, config } : undefined;
 }
 /** The stands round a surface, laid out from its box (or, for a ballpark, from its fence). */
-function standsFor(o, surface, crowd) {
+function standsFor(o, surface, crowd, floor) {
     const { sport } = chooseLeague(o);
     const awaySide = resolveHomeSide({ ...o, sport }) === "left" ? "right" : "left";
     if (sport === "mlb") {
@@ -469,7 +469,19 @@ function standsFor(o, surface, crowd) {
     // 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 };
-    return crowdLayout({ sport, box, crowd, awaySide, ground: o.ground, arena: o.budo?.hall === "budokan", ...(gallery === undefined ? {} : { gallery }) });
+    return crowdLayout({ sport, box, crowd, awaySide, ground: o.ground, arena: o.budo?.hall === "budokan", ...(gallery === undefined ? {} : { gallery }), ...(floor === undefined ? {} : { floor }) });
+}
+/** A surface's floor with no margin (its view, and its outline where it has one); none for a close-up. */
+function floorOf(probe) {
+    if (probe.whole !== undefined)
+        return undefined;
+    const view = wideView(probe);
+    if (probe.floor === undefined)
+        return { box: view };
+    const xs = [view.x, view.x + view.w, ...probe.floor.map((p) => p[0])];
+    const ys = [view.y, view.y + view.h, ...probe.floor.map((p) => p[1])];
+    const [x0, y0] = [Math.min(...xs), Math.min(...ys)];
+    return { box: { x: x0, y: y0, w: Math.max(...xs) - x0, h: Math.max(...ys) - y0 }, points: probe.floor };
 }
 /** True when the drawing is asked to be small: `detail: "simple"` or a `width` under 480 pixels. */
 const smallDrawing = (o) => {
@@ -493,17 +505,20 @@ function venueFrame(o, crowd, surface) {
 /** A surface with the stands and the crowd round it: the ground is made as wide as the stands need, then the stands are laid on it under the surface. */
 function buildCrowded(o, portrait, id, score, scored, extra, crowd) {
     let margin = extra.margin;
+    // The floor the stands' opening clears and is centred on.
+    const probe = buildWhole({ ...o, margin: 0 }, portrait, id, score, scored, { ...extra, margin: undefined });
+    const floor = floorOf(probe);
     if (!(typeof o.margin === "number" && Number.isFinite(o.margin) && o.margin >= 0)) {
         // How much ground the stands need beyond what the surface has with none, then the surface is made again with it.
-        const probe = buildWhole({ ...o, margin: 0 }, portrait, id, score, scored, { ...extra, margin: undefined });
-        const stands = standsFor(o, probe, crowd);
+        const stands = standsFor(o, probe, crowd, floor);
         const view = wideView(probe);
         const have = { left: stands.box.x - view.x, right: view.x + view.w - stands.box.x - stands.box.w, top: stands.box.y - view.y, bottom: view.y + view.h - stands.box.y - stands.box.h };
         const need = Math.max(stands.reach.left - have.left, stands.reach.right - have.right, stands.reach.top - have.top, stands.reach.bottom - have.bottom);
-        margin = Math.max(margin ?? 0, need + 6);
+        // (and the roof's shade, 9 feet beyond the upper tier)
+        margin = Math.max(margin ?? 0, need + (crowd.roof ? 10 : 6));
     }
     const surface = buildWhole(o, portrait, id, score, scored, { ...extra, margin });
-    const stands = standsFor(o, surface, crowd);
+    const stands = standsFor(o, surface, crowd, floor);
     const seats = stands.seats;
     const ground = heldGround(o.ground)?.capacity;
     const fine = crowd.detail === "fine" || (crowd.detail === "auto" && !smallDrawing(o));
@@ -1220,5 +1235,5 @@ export function crowdStands(o) {
     if (crowd === undefined)
         return undefined;
     const probe = buildWhole({ ...o, margin: 0 }, false, drawingId(o), false, false, { features: undefined });
-    return standsFor(o, probe, crowd);
+    return standsFor(o, probe, crowd, floorOf(probe));
 }

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[];