@johnmorrisdotca/kyogijo-stadiums 0.57.0 → 0.58.0

package/dist/context.d.ts

@@ -1,6 +1,7 @@
 import { type LonLat } from "./venues.geo.ts";
 import { type Plane, type Upright } from "./turn.kit.ts";
 import type { Pt } from "./crowd.ts";
+import { type ContextLandmark, type PlacedLandmark } from "./landmarks.ts";
 /** One layer of an area's data: its rows, and where they came from and under what terms, since a layer has a source of its own (buildings from PLATEAU; trees and land cover from another). */
 export interface ContextLayer {
     /** What it was made from: the dataset and its page. */
@@ -44,6 +45,11 @@ export interface ContextArea {
         trees?: ContextLayer;
         landCover?: ContextLayer;
     };
+    /** The most of this area's buildings the 3D view raises, when that is fewer than the tier's count (`CONTEXT_BLOCKS` at its best): a city of big, many-sided buildings (the casinos of the Las Vegas Strip) raises fewer, to stay within the
+     * district's budget of planes. Missing: the tier's count. */
+    blocks?: number;
+    /** The area's famous landmarks, each drawn by a shape of its own and named (`landmarks.ts`): the Sphere, the High Roller and the Fountains of Bellagio round the Las Vegas Strip Circuit. Missing: none. */
+    landmarks?: readonly ContextLandmark[];
 }
 /** One building as the district holds it: its outline in feet in the district's frame (x to the right, y down the page), its height and the rise of its roof in feet. */
 export interface ContextBlock {
@@ -91,6 +97,10 @@ export interface ContextPlan {
     trees?: ContextTree[];
     /** The buildings of the model that are a venue (the Dome's own parts), left out: the venue draws them. */
     owned: number;
+    /** The landmarks of the areas in the frame, each with its own shape; missing when the areas have none. */
+    landmarks?: PlacedLandmark[];
+    /** The most buildings the areas let the 3D view raise (the least of their `blocks`); missing when none sets it. */
+    most?: number;
     /** The credits of the areas used, in each language. */
     attribution: {
         en: string[];
@@ -172,6 +182,6 @@ export declare function slabPlanes(ring: readonly Pt[], level: number, thickness
     side: string;
 }, look: "chosen" | "faint" | "plain"): Plane[];
 /** The blocks of the 3D view: the `most` buildings that matter most (the tallest and widest, by height times the side of their ground), each a few planes, in the order the plan lists them. */
-export declare function contextUprights(plan: ContextPlan, most?: number): Upright[];
+export declare function contextUprights(plan: ContextPlan, asked?: number): Upright[];
 /** The building a raised venue stands in as a block: its outline in feet, its height, `xray` the middle of what is seen through its walls (none for a solid one). */
 export declare function shellBlock(key: string, ring: readonly Pt[], height: number, xray: Pt | undefined): ContextBlock;

package/dist/context.js

@@ -6,6 +6,7 @@ import { FEET_PER_METRE } from "./geometry.js";
 import { boxOf, hullOf, inside, metresFrom } from "./venues.geo.js";
 import { n, shy, wall } from "./turn.kit.js";
 import { pointList, raked } from "./venue.geom.js";
+import { landmarksFloor, ownedByLandmark, placeLandmarks, underLandmark } from "./landmarks.js";
 /** How many buildings are raised as blocks in the 3D view (the biggest and the tallest of those on the plan): the rest are the floor's own, flat. Every block is a few elements of the page. */
 export const CONTEXT_BLOCKS = 130;
 /** Feet of the plan's frame beyond the venues' buildings that a district with context shows, so that the streets round them are in it: 150 metres. */
@@ -79,6 +80,7 @@ export function placeContext(areas, origin, turn, frame, venues) {
     let owned = 0;
     const hulls = venues.map((v) => hullOf([...v.footprint]));
     const [fx0, fy0, fx1, fy1] = [frame.x, frame.y, frame.x + frame.w, frame.y + frame.h];
+    const landmarks = placeLandmarks(areas, origin, turn, frame);
     for (const area of areas) {
         const [east, north] = metresFrom(origin, [area.origin])[0];
         (area.layers.buildings?.rows ?? []).forEach((row, index) => {
@@ -96,6 +98,11 @@ export function placeContext(areas, origin, turn, frame, venues) {
                 owned += 1;
                 return;
             }
+            // A building that is a landmark's own (the Sphere's, drawn as a dome) is left out too.
+            if (ownedByLandmark(landmarks, ring)) {
+                owned += 1;
+                return;
+            }
             blocks.push({ id: `${area.key}-${index}`, ring, height: b.height * FEET_PER_METRE, rise: b.rise * FEET_PER_METRE, area: Math.abs(signedArea(ring)), ghost: holds, whole: box.x0 >= fx0 && box.x1 <= fx1 && box.y0 >= fy0 && box.y1 <= fy1 });
         });
     }
@@ -147,7 +154,8 @@ export function placeContext(areas, origin, turn, frame, venues) {
     // An empty credit (a layer whose credit another layer of the area has said) adds nothing.
     const layers = areas.flatMap((a) => Object.values(a.layers));
     const credits = (language) => [...new Set(layers.map((l) => l.attribution[language]).filter((text) => text !== ""))];
-    return { blocks, streets, land, trees, owned, attribution: { en: credits("en"), ja: credits("ja") } };
+    const most = areas.reduce((least, a) => (a.blocks === undefined ? least : Math.min(least, a.blocks)), Infinity);
+    return { blocks, streets, land, trees, owned, ...(landmarks.length === 0 ? {} : { landmarks }), ...(Number.isFinite(most) ? { most } : {}), attribution: { en: credits("en"), ja: credits("ja") } };
 }
 /** A share of the trees, spread evenly over the lot: every tree at 1, none at 0, and at 0.5 every other. The same trees every time, so that a view drawn again at a tier keeps the ones it kept. */
 export function thinTrees(trees, share) {
@@ -209,12 +217,12 @@ export function treesFloor(trees) {
 export function contextFloor(plan) {
     const under = `${landFloor(plan.land ?? [])}${streetsFloor(plan.streets ?? [])}${treesFloor(plan.trees ?? [])}`;
     if (plan.blocks.length === 0)
-        return under;
+        return `${under}${landmarksFloor(plan.landmarks ?? [])}`;
     const paths = [[], [], [], [], []];
     for (const b of plan.blocks)
         paths[b.ghost ? 4 : toneOf(b.height)].push(`M${b.ring.map(([x, y]) => `${num(x)} ${num(y)}`).join("L")}Z`);
     const classes = ["ky-dist-b0", "ky-dist-b1", "ky-dist-b2", "ky-dist-b3", "ky-dist-ghost"];
-    return `${under}<g class="ky-dist-context" aria-hidden="true">${paths.map((d, i) => (d.length === 0 ? "" : `<path class="ky-dist-block ${classes[i]}" d="${d.join("")}"/>`)).join("")}</g>`;
+    return `${under}<g class="ky-dist-context" aria-hidden="true">${paths.map((d, i) => (d.length === 0 ? "" : `<path class="ky-dist-block ${classes[i]}" d="${d.join("")}"/>`)).join("")}</g>${landmarksFloor(plan.landmarks ?? [])}`;
 }
 // ---- The blocks of the 3D view. ----
 /** How much a building matters to the view: tall and wide first. */
@@ -368,8 +376,14 @@ export function slabPlanes(ring, level, thickness, ids, look) {
     return planes;
 }
 /** The blocks of the 3D view: the `most` buildings that matter most (the tallest and widest, by height times the side of their ground), each a few planes, in the order the plan lists them. */
-export function contextUprights(plan, most = CONTEXT_BLOCKS) {
+export function contextUprights(plan, asked = CONTEXT_BLOCKS) {
+    const most = Math.min(asked, plan.most ?? Infinity);
     const wanted = new Set(plan.blocks.filter((b) => b.whole).sort((a, b) => weight(b) - weight(a) || (a.id < b.id ? -1 : 1)).slice(0, Math.max(0, most)).map((b) => b.id));
+    // The buildings of a named landmark stand whatever the count (at a tier that raises any).
+    if (most > 0)
+        for (const b of plan.blocks)
+            if (b.whole && underLandmark(plan.landmarks ?? [], b.ring))
+                wanted.add(b.id);
     const items = [];
     for (const b of plan.blocks) {
         if (!wanted.has(b.id))

package/dist/district-entry.d.ts

@@ -1,4 +1,5 @@
 import "./full.ts";
 import "./venues.all.ts";
 import "./walk.full.ts";
+import "./circuits.held.ts";
 export * from "./district.api.ts";

package/dist/district-entry.js

@@ -5,4 +5,6 @@ import "./full.js";
 import "./venues.all.js";
 // The walkable ground of every district, for the crowd outside, as the district has always had it (the lean district reads one when `loadOutside` is asked to).
 import "./walk.full.js";
+// Every circuit, as a district's `circuit` option asks for one (the lean district reads them when `loadCircuits` is asked to).
+import "./circuits.held.js";
 export * from "./district.api.js";

package/dist/district.api.d.ts

@@ -1,8 +1,15 @@
-export { DISTRICT_IDS, DISTRICT_MARGIN, DISTRICT_MODES, KYOGIJO_DISTRICT_STYLE, describeDistrict, districtId, districtMember, districtRing, drawDistrict, isDistrictId, metresText, planDistrict, scaleOf, unknownVenues } from "./district.ts";
-export type { DistrictMember, DistrictMode, DistrictOptions, DistrictPart, DistrictPlaced, DistrictPlan, DistrictVenueInput, PlacedPart } from "./district.ts";
+export { DISTRICT_IDS, DISTRICT_MARGIN, DISTRICT_MODES, KYOGIJO_DISTRICT_STYLE, circuitPointIn, describeDistrict, districtId, districtMember, districtRing, drawDistrict, isDistrictId, metresText, planDistrict, scaleOf, unknownVenues } from "./district.ts";
+export type { DistrictCircuit, DistrictMember, DistrictMode, DistrictOptions, DistrictPart, DistrictPlaced, DistrictPlan, DistrictVenueInput, PlacedPart } from "./district.ts";
 export { buildDistrictTurn, districtPresets, districtTurnMarkup, mountDistrictTurn } from "./district.turn.ts";
 export type { DistrictTurnSettings } from "./district.turn.ts";
 export type { ContextArea } from "./context.ts";
+export { CIRCUIT_INDEX, loadCircuits } from "./circuits.index.ts";
+export { circuitsHeld } from "./district.circuit.ts";
+export { drawDistrictRace, mountDistrictRace } from "./district.race.ts";
+export type { DistrictRaceDrawOptions, DistrictRaceOptions, DistrictRaceSettings } from "./district.race.ts";
+export type { KyogijoRace, RaceState } from "./circuits.race.dom.ts";
+export { LANDMARK_SHAPES } from "./landmarks.ts";
+export type { ContextLandmark, LandmarkShape, PlacedLandmark } from "./landmarks.ts";
 export { KODOKAN, KODOKAN_DOJO, KODOKAN_FLOOR_HEIGHT, KODOKAN_FLOOR_IDS, KODOKAN_FLOORS, KODOKAN_ROOM_HEIGHT, kodokanLevel, kodokanMember } from "./kodokan.ts";
 export type { KodokanFloor, KodokanRoom } from "./kodokan.ts";
 export { VENUE_ATTRIBUTION } from "./venues.ts";

package/dist/district.api.js

@@ -1,6 +1,12 @@
 // A district: several real venues of one city on one plan at their real relative positions and orientations (OpenStreetMap, ODbL 1.0), in 2D and in 3D, tight round neighbours or at the real distances of a city.
-export { DISTRICT_IDS, DISTRICT_MARGIN, DISTRICT_MODES, KYOGIJO_DISTRICT_STYLE, describeDistrict, districtId, districtMember, districtRing, drawDistrict, isDistrictId, metresText, planDistrict, scaleOf, unknownVenues } from "./district.js";
+export { DISTRICT_IDS, DISTRICT_MARGIN, DISTRICT_MODES, KYOGIJO_DISTRICT_STYLE, circuitPointIn, describeDistrict, districtId, districtMember, districtRing, drawDistrict, isDistrictId, metresText, planDistrict, scaleOf, unknownVenues } from "./district.js";
 export { buildDistrictTurn, districtPresets, districtTurnMarkup, mountDistrictTurn } from "./district.turn.js";
+// A race circuit on the same ground (`circuit`: the district entry has every circuit, the lean district reads them with `loadCircuits`), and the famous landmarks an area of context has round it.
+export { CIRCUIT_INDEX, loadCircuits } from "./circuits.index.js";
+export { circuitsHeld } from "./district.circuit.js";
+// A race on that circuit, among the venues and the city (the circuits' race, made-up cars or a feed's): drawn at a moment, or played in a page flat or in 3D.
+export { drawDistrictRace, mountDistrictRace } from "./district.race.js";
+export { LANDMARK_SHAPES } from "./landmarks.js";
 export { KODOKAN, KODOKAN_DOJO, KODOKAN_FLOOR_HEIGHT, KODOKAN_FLOOR_IDS, KODOKAN_FLOORS, KODOKAN_ROOM_HEIGHT, kodokanLevel, kodokanMember } from "./kodokan.js";
 export { VENUE_ATTRIBUTION } from "./venues.js";
 export { mountDistrict } from "./district.dom.js";

package/dist/district.circuit.d.ts

@@ -0,0 +1,34 @@
+import type { CircuitDrawing } from "./circuits.draw.ts";
+import type { carRadius, carsMarkup } from "./circuits.race.draw.ts";
+import type { mountRaceIn } from "./circuits.race.dom.ts";
+import type { raceAt } from "./circuits.race.moment.ts";
+import type { simulateRace } from "./circuits.race.ts";
+import type { RaceWords } from "./circuits.race.words.ts";
+import type { CircuitPlan } from "./circuits.ts";
+import type { Circuit, CircuitOptions } from "./circuits.types.ts";
+import type { CircuitWords } from "./circuits.words.ts";
+import type { Language } from "./types.ts";
+import type { Upright } from "./turn.kit.ts";
+/** The circuits' code a district uses. */
+export interface CircuitSupport {
+    circuitOf: (id: string) => Circuit;
+    circuitPlan: (circuit: Circuit) => CircuitPlan;
+    circuitDrawing: (options: CircuitOptions) => CircuitDrawing;
+    circuitUprights: (drawn: CircuitDrawing, thin: number) => Upright[];
+    words: Readonly<Record<Language, CircuitWords>>;
+    /** A race on the circuit (`mountDistrictRace`, `drawDistrictRace`): the simulation, its moments, its cars' markup and its view in a page. */
+    race: {
+        simulateRace: typeof simulateRace;
+        raceAt: typeof raceAt;
+        carsMarkup: typeof carsMarkup;
+        carRadius: typeof carRadius;
+        mountRaceIn: typeof mountRaceIn;
+        words: Readonly<Record<Language, RaceWords>>;
+    };
+}
+/** Fill the table: `circuits.held.ts` does it when it is imported. */
+export declare function holdCircuits(support: CircuitSupport): void;
+/** The circuits' code, or an error that says how to have it. */
+export declare function circuitSupport(): CircuitSupport;
+/** Whether the circuits are held (the district entry, or the lean district after `loadCircuits()`). */
+export declare const circuitsHeld: () => boolean;

package/dist/district.circuit.js

@@ -0,0 +1,13 @@
+let held;
+/** Fill the table: `circuits.held.ts` does it when it is imported. */
+export function holdCircuits(support) {
+    held = support;
+}
+/** The circuits' code, or an error that says how to have it. */
+export function circuitSupport() {
+    if (held === undefined)
+        throw new Error("a district with a circuit needs the circuits: the district entry has them, and the lean district reads them with `await loadCircuits()` first");
+    return held;
+}
+/** Whether the circuits are held (the district entry, or the lean district after `loadCircuits()`). */
+export const circuitsHeld = () => held !== undefined;

package/dist/district.d.ts

@@ -3,6 +3,8 @@ import { type StadiumConfigId } from "./stadiums.ts";
 import type { OutsideOptions } from "./outside.ts";
 import type { Pt } from "./crowd.ts";
 import type { Language, SurfaceOptions } from "./types.ts";
+import type { CircuitPlan } from "./circuits.ts";
+import type { CircuitOptions } from "./circuits.types.ts";
 /** How a district is fitted: `neighbours` tight round venues that stand close together, `city` at the real distances between venues that are kilometres apart. */
 export type DistrictMode = "neighbours" | "city";
 export declare const DISTRICT_MODES: readonly DistrictMode[];
@@ -13,8 +15,13 @@ export type DistrictVenueInput = string | {
 };
 /** What can be asked of a district. */
 export interface DistrictOptions {
-    /** The venues, by key: any key of `VENUES` (the arenas) and `STADIUMS` (the stadiums); at least one. */
+    /** The venues, by key: any key of `VENUES` (the arenas) and `STADIUMS` (the stadiums); at least one, unless the district has a `circuit`. */
     venues: readonly DistrictVenueInput[];
+    /**
+     * A race circuit laid on the same ground (a key of `CIRCUIT_IDS`: `las-vegas`): its lap, pit lane, ground and pit building where OpenStreetMap maps them, under the venues, turned as it lies; in 3D its pit building and its turns'
+     * numbers stand up and a lap that crosses itself stands its pass over on a bridge, as in the circuit's own view. Missing: no circuit.
+     */
+    circuit?: string;
     /** `neighbours` (the default) or `city`. */
     mode?: DistrictMode;
     /** How far the plan is turned, in degrees clockwise: 0 (the default) has north at the top; `"auto"` turns it so that the district's long way lies across the page. */
@@ -171,6 +178,19 @@ export interface DistrictGate {
     angle: number;
     basis: "documented" | "plausible";
 }
+/** A circuit placed in a district: its own plan (feet round its own middle, its long side along x), and where that middle is put and how far the plan is turned to lie as it does in the world. */
+export interface DistrictCircuit {
+    plan: CircuitPlan;
+    /** Where the circuit's own origin (the middle of its plan) is in the district's frame, in feet. */
+    at: Pt;
+    /** The degrees the circuit's plan is turned clockwise to lie in the district (its heading less a quarter turn, and the map's turn). */
+    angle: number;
+    /** The outline of everything it draws on the ground (its plan's box), and of its pit building, in the district's frame. */
+    footprint: Pt[];
+    building?: Pt[];
+}
+/** 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 declare function circuitPointIn(placed: Pick<DistrictCircuit, "at" | "angle">, p: Pt): Pt;
 /** What a district is: its venues placed, the box that fits them, and how the map lies. */
 export interface DistrictPlan {
     options: DistrictOptions;
@@ -197,8 +217,10 @@ export interface DistrictPlan {
         b: string;
         metres: number;
     }[];
-    /** The `[longitude, latitude]` the plan's metres are measured from: the middle of the venues' surfaces. */
+    /** The `[longitude, latitude]` the plan's metres are measured from: the middle of the venues' surfaces (and of the circuit's plan, where there is one). */
     origin: readonly [number, number];
+    /** The circuit on the ground, where the options name one. */
+    circuit?: DistrictCircuit;
 }
 /** 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 declare const DISTRICT_MARGIN: Readonly<Record<DistrictMode, number>>;
@@ -217,7 +239,7 @@ export declare const OUTSIDE_ROOM = 160;
  */
 export declare function planDistrict(options: DistrictOptions): DistrictPlan;
 /** 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 declare const KYOGIJO_DISTRICT_STYLE = "\n: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);--ky-dist-people:#c2410c;--ky-dist-b0:#d1d4cb;--ky-dist-b1:#c3c7be;--ky-dist-b2:#b2b7ae;--ky-dist-b3:#9ea49b;--ky-dist-bline:rgba(40,46,42,.28);--ky-dist-road:#cbcfc4;--ky-dist-deck:#bdc2b7;--ky-dist-walk:#eef0e8;--ky-dist-rail:#8b9288;--ky-dist-gate:#1f5fa8;--ky-dist-water:#c7d5dc;--ky-dist-green:#d2dcc4;--ky-dist-wood:#c3d0b6;--ky-dist-tree:#b3c2a3;--ky-dist-floor:#2f6db0}\n@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);--ky-dist-people:#fbbf24;--ky-dist-b0:#262c31;--ky-dist-b1:#2e353b;--ky-dist-b2:#394148;--ky-dist-b3:#474f57;--ky-dist-bline:rgba(220,226,220,.22);--ky-dist-road:#2b3239;--ky-dist-deck:#353d45;--ky-dist-walk:#242b31;--ky-dist-rail:#5b646c;--ky-dist-gate:#7fb2ee;--ky-dist-water:#1c2d3b;--ky-dist-green:#202d26;--ky-dist-wood:#1c2b23;--ky-dist-tree:#2e4337;--ky-dist-floor:#7fb0e8}}\n: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-dist-people:#fbbf24;--ky-dist-b0:#262c31;--ky-dist-b1:#2e353b;--ky-dist-b2:#394148;--ky-dist-b3:#474f57;--ky-dist-bline:rgba(220,226,220,.22);--ky-dist-road:#2b3239;--ky-dist-deck:#353d45;--ky-dist-walk:#242b31;--ky-dist-rail:#5b646c;--ky-dist-gate:#7fb2ee;--ky-dist-water:#1c2d3b;--ky-dist-green:#202d26;--ky-dist-wood:#1c2b23;--ky-dist-tree:#2e4337;--ky-dist-floor:#7fb0e8}\n.ky-district .ky-dist-ground{fill:var(--ky-dist-ground)}\n.ky-district .ky-dist-grid{fill:none;stroke:var(--ky-dist-grid);stroke-width:1}\n.ky-district .ky-dist-block{stroke:var(--ky-dist-bline);stroke-width:.5;stroke-linejoin:round}\n.ky-district .ky-dist-b0{fill:var(--ky-dist-b0)}\n.ky-district .ky-dist-b1{fill:var(--ky-dist-b1)}\n.ky-district .ky-dist-b2{fill:var(--ky-dist-b2)}\n.ky-district .ky-dist-b3{fill:var(--ky-dist-b3)}\n.ky-district .ky-dist-street{stroke-linejoin:round;stroke-linecap:butt}\n.ky-district .ky-dist-street-0{stroke:var(--ky-dist-road)}\n.ky-district .ky-dist-street-1{stroke:var(--ky-dist-deck)}\n.ky-district .ky-dist-street-2{stroke:var(--ky-dist-rail);stroke-dasharray:6 3}\n.ky-district .ky-dist-street-3{stroke:var(--ky-dist-walk)}\n.ky-district .ky-dist-land{stroke:none}\n.ky-district .ky-dist-water{fill:var(--ky-dist-water)}\n.ky-district .ky-dist-green{fill:var(--ky-dist-green)}\n.ky-district .ky-dist-wood{fill:var(--ky-dist-wood)}\n.ky-district .ky-dist-tree{fill:none;stroke:var(--ky-dist-tree);stroke-linecap:round}\n.ky-district .ky-dist-gate rect{fill:var(--ky-dist-gate);stroke:var(--ky-dist-gate);stroke-width:2.4}\n.ky-district .ky-dist-gate-plausible rect{fill:var(--ky-dist-ground);fill-opacity:.85}\n.ky-district .ky-dist-gate-queue{fill:none;stroke:var(--ky-dist-gate);stroke-width:3;stroke-dasharray:9 7}\n.ky-district .ky-dist-ghost{fill:var(--ky-dist-b1);fill-opacity:.35}\n.ky-district .ky-dist-floor{stroke:var(--ky-dist-floor);stroke-width:2}\n.ky-district .ky-dist-ink{fill:none;stroke:var(--ky-dist-ink);stroke-linecap:round;stroke-linejoin:round}\n.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}";
+export declare const KYOGIJO_DISTRICT_STYLE = "\n: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);--ky-dist-people:#c2410c;--ky-dist-b0:#d1d4cb;--ky-dist-b1:#c3c7be;--ky-dist-b2:#b2b7ae;--ky-dist-b3:#9ea49b;--ky-dist-bline:rgba(40,46,42,.28);--ky-dist-road:#cbcfc4;--ky-dist-deck:#bdc2b7;--ky-dist-walk:#eef0e8;--ky-dist-rail:#8b9288;--ky-dist-gate:#1f5fa8;--ky-dist-water:#c7d5dc;--ky-dist-green:#d2dcc4;--ky-dist-wood:#c3d0b6;--ky-dist-tree:#b3c2a3;--ky-dist-floor:#2f6db0}\n@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);--ky-dist-people:#fbbf24;--ky-dist-b0:#262c31;--ky-dist-b1:#2e353b;--ky-dist-b2:#394148;--ky-dist-b3:#474f57;--ky-dist-bline:rgba(220,226,220,.22);--ky-dist-road:#2b3239;--ky-dist-deck:#353d45;--ky-dist-walk:#242b31;--ky-dist-rail:#5b646c;--ky-dist-gate:#7fb2ee;--ky-dist-water:#1c2d3b;--ky-dist-green:#202d26;--ky-dist-wood:#1c2b23;--ky-dist-tree:#2e4337;--ky-dist-floor:#7fb0e8}}\n: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-dist-people:#fbbf24;--ky-dist-b0:#262c31;--ky-dist-b1:#2e353b;--ky-dist-b2:#394148;--ky-dist-b3:#474f57;--ky-dist-bline:rgba(220,226,220,.22);--ky-dist-road:#2b3239;--ky-dist-deck:#353d45;--ky-dist-walk:#242b31;--ky-dist-rail:#5b646c;--ky-dist-gate:#7fb2ee;--ky-dist-water:#1c2d3b;--ky-dist-green:#202d26;--ky-dist-wood:#1c2b23;--ky-dist-tree:#2e4337;--ky-dist-floor:#7fb0e8}\n.ky-district .ky-dist-ground{fill:var(--ky-dist-ground)}\n.ky-district .ky-dist-grid{fill:none;stroke:var(--ky-dist-grid);stroke-width:1}\n.ky-district .ky-dist-block{stroke:var(--ky-dist-bline);stroke-width:.5;stroke-linejoin:round}\n.ky-district .ky-dist-b0{fill:var(--ky-dist-b0)}\n.ky-district .ky-dist-b1{fill:var(--ky-dist-b1)}\n.ky-district .ky-dist-b2{fill:var(--ky-dist-b2)}\n.ky-district .ky-dist-b3{fill:var(--ky-dist-b3)}\n.ky-district .ky-dist-street{stroke-linejoin:round;stroke-linecap:butt}\n.ky-district .ky-dist-street-0{stroke:var(--ky-dist-road)}\n.ky-district .ky-dist-street-1{stroke:var(--ky-dist-deck)}\n.ky-district .ky-dist-street-2{stroke:var(--ky-dist-rail);stroke-dasharray:6 3}\n.ky-district .ky-dist-street-3{stroke:var(--ky-dist-walk)}\n.ky-district .ky-dist-land{stroke:none}\n.ky-district .ky-dist-water{fill:var(--ky-dist-water)}\n.ky-district .ky-dist-green{fill:var(--ky-dist-green)}\n.ky-district .ky-dist-wood{fill:var(--ky-dist-wood)}\n.ky-district .ky-dist-tree{fill:none;stroke:var(--ky-dist-tree);stroke-linecap:round}\n.ky-district .ky-dist-jet{fill:none;stroke:var(--ky-dist-halo);stroke-linecap:round}\n.ky-district .ky-dist-gate rect{fill:var(--ky-dist-gate);stroke:var(--ky-dist-gate);stroke-width:2.4}\n.ky-district .ky-dist-gate-plausible rect{fill:var(--ky-dist-ground);fill-opacity:.85}\n.ky-district .ky-dist-gate-queue{fill:none;stroke:var(--ky-dist-gate);stroke-width:3;stroke-dasharray:9 7}\n.ky-district .ky-dist-ghost{fill:var(--ky-dist-b1);fill-opacity:.35}\n.ky-district .ky-dist-floor{stroke:var(--ky-dist-floor);stroke-width:2}\n.ky-district .ky-dist-ink{fill:none;stroke:var(--ky-dist-ink);stroke-linecap:round;stroke-linejoin:round}\n.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}";
 /**
  * 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`).
@@ -263,5 +285,7 @@ export declare function drawMember(member: DistrictMember, options: DistrictOpti
  * ```
  */
 export declare function drawDistrict(options: DistrictOptions, plan?: DistrictPlan, drawing?: (member: DistrictMember, index: number, part: number) => string): string;
+/** 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 declare function circuitInDistrict(options: DistrictOptions, id: string, floor: boolean): CircuitOptions;
 /** The venues a district was asked for that the package has no key for: none when it can be drawn. */
 export declare const unknownVenues: (venues: readonly DistrictVenueInput[]) => string[];

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);
+}