@johnmorrisdotca/kyogijo-stadiums 0.40.1 → 0.43.0

package/dist/crowd.d.ts

@@ -48,11 +48,13 @@ export interface StandRing {
     seats: number;
     /** The aisles and vomitories across the band, each from a point on its inner edge to its outer: across the sides, fanning round the corners. */
     aisles: [Pt, Pt][];
+    /** The band is closed in this configuration (a real stadium's seats a configuration does not open): drawn as empty seats, with no people, in the same place every time. */
+    closed?: boolean;
 }
 /** A block of the stands that is not the home fans': the visitors', or a card display. A polygon in the wide frame. */
 export interface StandSector {
     ring: string;
-    kind: "away" | "tifo-home" | "tifo-away";
+    kind: "away" | "tifo-home" | "tifo-away" | "closed";
     points: Pt[];
 }
 /** A place left open or built on: a tunnel through the lower stands, a bench, the camera platform of the media side. A box in the wide frame. */
@@ -96,6 +98,11 @@ export interface CrowdStands {
     gallery?: boolean;
     /** The stands are a real venue's (see `src/venues.ts`): the outline of its building, the way north lies on the page and the roof. */
     real?: RealShell;
+    /**
+     * A real stadium of more than one configuration is laid out in its own frame, the venue's, with the middle of its field at the origin whichever field it is: `shift` is where that middle is in the drawing's own
+     * frame (the surface's), so that what belongs to the field is drawn there and the building, the bowl and the crowd are the same numbers for every configuration.
+     */
+    shift?: [number, number];
 }
 /** The room above a real venue's building that the arrow saying where north is takes, in feet, and how far above the building's box the middle of the arrow stands. */
 export declare const NORTH_ROOM = 60;
@@ -144,12 +151,23 @@ export interface RealShell {
         rise: number;
         opening: Pt[];
     };
+    /** The height of the building's podium, a lower band of its walls under the concourse levels, in feet; the walls are drawn in two bands where a venue has one (ours where the sources do not say). */
+    podium?: number;
+    /** A `fixed` roof closed in the middle by a cap with a long skylight along the surface's long side (Rogers Arena's): ours, from the brief. */
+    skylight?: boolean;
+    /** A `cable` roof's masts round its rim: how many, and how high they rise over the rim, in feet. */
+    masts?: {
+        count: number;
+        height: number;
+    };
     /** The height of the roof's lowest edge above the surface, in feet. */
     edge: number;
 }
 /** The stands of a real venue, worked out from its building (`venueBowl`): what `layoutOf` takes in place of a sport's usual tiers. */
 export interface RealBowl {
     rings: StandRing[];
+    /** Blocks of a band a configuration closes (its seats beyond the configuration's own): drawn over the band as empty seats, in the same place every time. */
+    closedSectors?: StandSector[];
     /** How far the first row stands from the surface's edge at each side, in feet (the bench side has more). */
     off: {
         left: number;
@@ -220,8 +238,22 @@ export declare function rrectAt(o: Extract<Outline, {
     p: Pt;
     n: Pt;
 };
+/** The aisles a band has, as parameters of its inner outline: one at each end of every straight side (about every 30 feet along it) and one in the middle of every corner. */
+export declare function aisleParameters(hole: Extract<Outline, {
+    kind: "rrect";
+}>): {
+    us: number[];
+    nh: number;
+    nv: number;
+};
 /** The aisles of a band as lines from its inner edge to its outer. */
 export declare function aislesOf(region: Outline, hole: Outline | null): [Pt, Pt][];
+/** The polygon of a band between two parameters, cut finely (a thirty-second of a side at a time) so that a block at a corner follows its curve as the band does. */
+export declare function sectorPolygon(region: Extract<Outline, {
+    kind: "rrect";
+}>, hole: Extract<Outline, {
+    kind: "rrect";
+}>, u0: number, u1: number): Pt[];
 /** What the layout needs of the options and the surface. */
 export interface LayoutInput {
     sport: Sport;

package/dist/crowd.draw.d.ts

@@ -3,7 +3,7 @@ import { type Crowd, type CrowdStands, type RealShell } from "./crowd.ts";
 export declare function patterns(id: string, crowd: Crowd, density: number, tifo: {
     home: boolean;
     away: boolean;
-} | undefined, neutral?: boolean, rows?: boolean): string;
+} | undefined, neutral?: boolean, rows?: boolean, shut?: boolean): string;
 /** How the crowd is drawn: the prefix of ids, the options read, the share of seats taken, the detail, and the class of the ground the stands stand on. */
 export interface DrawInput {
     id: string;

package/dist/crowd.draw.js

@@ -52,11 +52,14 @@ function tile(seed, density, share, team, neutral = false) {
     return el("g", { fill: "none", "stroke-linecap": "round", "stroke-width": 2.3 }, out + headPaths);
 }
 /** The tiles a crowd needs: the home tile, the home tile of the upper tiers (emptier) and the visitors', and the display tiles. */
-export function patterns(id, crowd, density, tifo, neutral = false, rows = false) {
+export function patterns(id, crowd, density, tifo, neutral = false, rows = false, shut = false) {
     // A 3D view's tiles carry the lines of the rows too (a row every third of a tile, along the tile's x), so that a raked plane is textured and not drawn seat by seat.
     const rowLines = rows ? el("path", { class: "ky-cr-row", d: `M0 .3H${TILE}M0 ${TILE / 3 + 0.3}H${TILE}M0 ${(2 * TILE) / 3 + 0.3}H${TILE}`, fill: "none" }) : "";
     const make = (suffix, body, size = TILE) => el("pattern", { id: `${id}-cr-${suffix}`, width: size, height: size, patternUnits: "userSpaceOnUse" }, size === TILE ? body + rowLines : body);
     let out = make("h", tile(crowd.seed * 7 + 1, density, neutral ? 0 : 0.88, "ky-cr-h", neutral)) + make("a", tile(crowd.seed * 7 + 3, Math.min(1, density * 1.04), 0.94, "ky-cr-a"));
+    // The seats of a closed band: the same seats, every one empty.
+    if (shut)
+        out += make("e", tile(crowd.seed * 7 + 5, 0, 0, "ky-cr-h", true));
     if (tifo !== undefined) {
         const stripes = (cls) => el("rect", { class: cls, width: 3, height: 6 }) + el("rect", { class: "ky-cr-tw", x: 3, width: 3, height: 6 });
         const checks = (cls) => el("rect", { class: cls, width: 3, height: 3 }) + el("rect", { class: cls, x: 3, y: 3, width: 3, height: 3 }) + el("rect", { class: "ky-cr-tw", x: 3, width: 3, height: 3 }) + el("rect", { class: "ky-cr-tw", y: 3, width: 3, height: 3 });
@@ -185,6 +188,11 @@ export function drawCrowd(stands, o) {
         // The bed of seats under the tile, so that no seam of the pattern shows light.
         const bed = stands.gallery === true ? "ky-cr-bed ky-bud-gbed" : "ky-cr-bed";
         // A hall's gallery, seen from above, is neat rows of seats along its band (a few people are not drawn: it is subtle).
+        if (ring.closed === true) {
+            // Closed seats: the bed and the same seats, every one empty, so that the closed part is the same drawing in every configuration that closes it.
+            body += el("path", { class: bed, d: path(ring) }) + (fine ? el("path", { class: "ky-cr-shut", d: path(ring), fill: `url(#${id}-cr-e)` }) + el("path", { class: "ky-cr-shut-veil", d: path(ring) }) : el("path", { class: "ky-cr-blk", d: path(ring), "fill-opacity": num(0.28) }));
+            continue;
+        }
         if (stands.gallery === true && fine)
             body += el("path", { class: bed, d: path(ring) }) + galleryRows(ring) + (density > 0 ? el("path", { class: "ky-cr-people", d: path(ring), fill: `url(#${id}-cr-h)` }) : "");
         else if (fine)
@@ -254,10 +262,15 @@ export function drawCrowd(stands, o) {
         const [x0, y0, x1, y1] = g.box;
         body += el("rect", { class: `ky-cr-${g.kind}`, x: n1(x0), y: n1(y0), width: n1(x1 - x0), height: n1(y1 - y0), rx: g.kind === "bench" ? 1 : undefined });
     }
-    return { defs: (fine && (stands.gallery !== true || density > 0) ? patterns(id, crowd, density, tifo.home || tifo.away ? tifo : undefined, stands.gallery === true || stands.real !== undefined) : "") + pool, markup: el("g", { class: light === undefined ? "ky-crowd" : light.house === "dark" ? "ky-crowd ky-night ky-down" : light.house === "half" ? "ky-crowd ky-night ky-half" : "ky-crowd ky-night" }, body) + lit, over };
+    return { defs: (fine && (stands.gallery !== true || density > 0) ? patterns(id, crowd, density, tifo.home || tifo.away ? tifo : undefined, stands.gallery === true || stands.real !== undefined, false, stands.rings.some((r) => r.closed === true) || stands.sectors.some((s) => s.kind === "closed")) : "") + pool, markup: el("g", { class: light === undefined ? "ky-crowd" : light.house === "dark" ? "ky-crowd ky-night ky-down" : light.house === "half" ? "ky-crowd ky-night ky-half" : "ky-crowd ky-night" }, body) + lit, over };
 }
 /** A block of visitors or a card display, a polygon over the band it is in. */
 function sector(s, id, fine, density) {
+    // A block of closed seats: the bed and the same seats, every one empty.
+    if (s.kind === "closed") {
+        const d = `M${s.points.map(([x, y]) => `${n1(x)} ${n1(y)}`).join("L")}Z`;
+        return el("path", { class: "ky-cr-bed", d }) + (fine ? el("path", { class: "ky-cr-shut", d, fill: `url(#${id}-cr-e)` }) + el("path", { class: "ky-cr-shut-veil", d }) : el("path", { class: "ky-cr-blk", d, "fill-opacity": num(0.28) }));
+    }
     if (s.kind === "away")
         return fine ? el("path", { class: "ky-cr-people", d: poly(s.points), fill: `url(#${id}-cr-a)` }) : el("path", { class: "ky-cr-blk-a", d: poly(s.points), "fill-opacity": num(0.3 + 0.6 * density) });
     const team = s.kind === "tifo-home" ? "th" : "ta";
@@ -270,6 +283,7 @@ export const KYOGIJO_CROWD_STYLE = `
 :where(html[data-theme=dark] .kyogijo,.kyogijo[data-theme=dark]){--ky-cr-bed:#242a32;--ky-cr-empty:#4a535f;--ky-cr-gap:#050709;--ky-cr-conc:#2a3038;--ky-cr-rim:#07090c;--ky-cr-dim:.82}
 .kyogijo .ky-crowd{opacity:var(--ky-cr-dim)}
 .kyogijo .ky-cr-bed{fill:var(--ky-cr-bed);stroke:var(--ky-cr-rim);stroke-width:1.8;stroke-opacity:.55;stroke-linejoin:round}
+.kyogijo .ky-cr-shut-veil{fill:var(--ky-cr-empty);fill-opacity:.42}
 .kyogijo .ky-cr-seat{fill:none;stroke:var(--ky-cr-empty);stroke-width:1.3;stroke-opacity:.65}
 .kyogijo .ky-cr-h{stroke:var(--ky-cr-home,var(--ky-right))}
 .kyogijo .ky-cr-a{stroke:var(--ky-cr-away,var(--ky-left))}

package/dist/crowd.js

@@ -274,7 +274,7 @@ export function rrectAt(o, u) {
     }
 }
 /** The aisles a band has, as parameters of its inner outline: one at each end of every straight side (about every 30 feet along it) and one in the middle of every corner. */
-function aisleParameters(hole) {
+export function aisleParameters(hole) {
     const r = Math.min(hole.r, (hole.x1 - hole.x0) / 2, (hole.y1 - hole.y0) / 2);
     const nh = Math.max(2, Math.round((hole.x1 - hole.x0 - 2 * r) / 30));
     const nv = Math.max(2, Math.round((hole.y1 - hole.y0 - 2 * r) / 30));
@@ -304,6 +304,12 @@ export function aislesOf(region, hole) {
 function galleryAisles(region, hole, shares) {
     return [0, 2, 4, 6].flatMap((side) => shares.map((f) => [rrectAt(hole, side + f).p, rrectAt(region, side + f).p]));
 }
+/** The polygon of a band between two parameters, cut finely (a thirty-second of a side at a time) so that a block at a corner follows its curve as the band does. */
+export function sectorPolygon(region, hole, u0, u1) {
+    const steps = Math.max(2, Math.ceil((u1 - u0) * 32));
+    const us = Array.from({ length: steps + 1 }, (_, i) => u0 + ((u1 - u0) * i) / steps);
+    return [...us.map((u) => rrectAt(region, u).p), ...us.map((u) => rrectAt(hole, u).p).reverse()];
+}
 /** The polygon of a band between two aisle parameters: along the outer edge, then back along the inner. */
 function sectionBetween(region, hole, u0, u1) {
     const us = [u0];
@@ -394,6 +400,8 @@ export function layoutOf(input) {
     const stands = { sport, shape, box, rings, covers, concourses, sectors: [], gaps: [], reach: reachOf, seats: rings.reduce((n, r) => n + r.seats, 0) };
     if (input.real !== undefined)
         stands.real = input.real.shell;
+    if (input.real?.closedSectors !== undefined)
+        stands.sectors.push(...input.real.closedSectors);
     if (stadium !== undefined)
         stands.stadium = stadium;
     if (gal !== undefined)

package/dist/district-entry.d.ts

@@ -2,4 +2,18 @@ export { DISTRICT_IDS, DISTRICT_MARGIN, DISTRICT_MODES, KYOGIJO_DISTRICT_STYLE,
 export type { DistrictMember, DistrictMode, DistrictOptions, DistrictPlaced, DistrictPlan, DistrictVenueInput } 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 { KODOKAN, KODOKAN_DOJO, KODOKAN_FLOOR_HEIGHT, KODOKAN_ROOM_HEIGHT, kodokanMember } from "./kodokan.ts";
 export { VENUE_ATTRIBUTION } from "./venues.ts";
+export { mountDistrict } from "./district.dom.ts";
+export type { KyogijoDistrict } from "./district.dom.ts";
+export { OUTSIDE_DENSITY, OUTSIDE_LEVELS, OUTSIDE_REACH, OUTSIDE_VENUES, hasOutside, isOutsideLevel, outsideCount, outsideCrowd, outsideLevelOf } from "./outside.ts";
+export type { OutsideCrowd, OutsideLevel, OutsideOptions } from "./outside.ts";
+export { PERSON_METRES, frameOf, rasterOutside } from "./outside.paint.ts";
+export type { OutsideFrame, OutsideStats } from "./outside.paint.ts";
+export { OUTSIDE_ROOM } from "./district.ts";
+export { WALK_CELL, WALK_IDS, walkMask, walkable } from "./walk.ts";
+export type { WalkData, WalkMask } from "./walk.ts";
+export { GATE_FACTS, GATE_VENUES, gateName, venueGates } from "./gates.ts";
+export type { Gate, GateBasis, GateFact } from "./gates.ts";
+export type { DistrictGate } from "./district.ts";

package/dist/district-entry.js

@@ -1,4 +1,13 @@
 // 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, drawDistrict, isDistrictId, metresText, planDistrict, scaleOf, unknownVenues } from "./district.js";
 export { buildDistrictTurn, districtPresets, districtTurnMarkup, mountDistrictTurn } from "./district.turn.js";
+export { KODOKAN, KODOKAN_DOJO, KODOKAN_FLOOR_HEIGHT, KODOKAN_ROOM_HEIGHT, kodokanMember } from "./kodokan.js";
 export { VENUE_ATTRIBUTION } from "./venues.js";
+export { mountDistrict } from "./district.dom.js";
+// The crowd outside the venues, on ground people may stand on (OpenStreetMap, ODbL 1.0), at 0, 25, 50, 75 or 100 percent of the seats.
+export { OUTSIDE_DENSITY, OUTSIDE_LEVELS, OUTSIDE_REACH, OUTSIDE_VENUES, hasOutside, isOutsideLevel, outsideCount, outsideCrowd, outsideLevelOf } from "./outside.js";
+export { PERSON_METRES, frameOf, rasterOutside } from "./outside.paint.js";
+export { OUTSIDE_ROOM } from "./district.js";
+export { WALK_CELL, WALK_IDS, walkMask, walkable } from "./walk.js";
+// The gates of a venue: where the crowd goes in, on the building's outline, with the way each faces and how it is known.
+export { GATE_FACTS, GATE_VENUES, gateName, venueGates } from "./gates.js";

package/dist/district.d.ts

@@ -1,4 +1,6 @@
+import { type ContextPlan, type ContextArea } from "./context.ts";
 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";
 /** How a district is fitted: `neighbours` tight round venues that stand close together, `city` at the real distances between venues that are kilometres apart. */
@@ -27,6 +29,23 @@ export interface DistrictOptions {
     style?: "none";
     /** Draw every venue's stands in 2D (true, the default) or its building only. */
     stands?: boolean;
+    /** Mark each venue's gates on the plan (`venueGates`: a door's bar on the building's outline and a dashed stub the way a queue runs). Off when left out. */
+    gates?: boolean;
+    /**
+     * The crowd outside the venues (`outside.ts`): `{ level: 25 }` puts a quarter of the seats' worth of people on the sidewalks, plazas and grounds round them, in the mounted views (`mountDistrict`, `mountDistrictTurn`). Off when left out. Asking
+     * for it at all, even at level 0, makes room round the buildings for the crowd (`OUTSIDE_ROOM`), so that the plan does not move when the level does; only a district with a venue that has a walkable mask (`OUTSIDE_VENUES`) is changed.
+     */
+    outside?: OutsideOptions;
+    /**
+     * The buildings round the venues, as areas of data a page passes in (`TOKYO_DOME_CITY` of `@johnmorrisdotca/kyogijo-stadiums/plateau`): low in detail, flat on the floor shaded by height and, for the biggest and the tallest, standing
+     * in the 3D view. The frame is widened to take in the streets round the venues. None (the default) draws the district as it always was, and carries no data. The credit of each area goes into the description.
+     */
+    context?: readonly ContextArea[];
+    /**
+     * The building a raised venue stands in (the Kodokan's main dojo, on the 7th floor): `xray` (the default) draws it with its walls giving way to the eye as it looks in, `solid` draws it whole, `none` leaves it out, and the dojo floats on its floor
+     * alone. Only a venue that stands in a building (`DistrictMember.shell`) is changed.
+     */
+    building?: "xray" | "solid" | "none";
 }
 /** A venue of a district as the district needs it: what it is called, where it stands, how it lies, and how it is drawn. */
 export interface DistrictMember {
@@ -51,6 +70,18 @@ export interface DistrictMember {
     seats: number;
     /** The options the venue is drawn from. */
     options: SurfaceOptions;
+    /** How high the venue's floor stands above the ground, in feet: the Kodokan's main dojo is on the 7th floor of its building, drawn in the air on its real floor. Missing: on the ground. */
+    elevation?: number;
+    /** The building the venue stands in, when the district draws it (`building`): its outline is `ring`, and its height in feet and storeys are these. */
+    shell?: {
+        height: number;
+        storeys: number;
+    };
+    /** The credit of data this venue is made from that is not OpenStreetMap's (the Kodokan's building: Project PLATEAU). */
+    attribution?: {
+        en: string;
+        ja: string;
+    };
 }
 /** Every key a district can be asked for: the arenas of `VENUES` and the stadiums of `STADIUMS`. */
 export declare const DISTRICT_IDS: readonly string[];
@@ -67,6 +98,8 @@ export declare const isDistrictId: (id: string) => boolean;
  * ```
  */
 export declare function districtMember(input: DistrictVenueInput, language?: Language): DistrictMember;
+/** Turn a point of the map (east, down the page) by `degrees` clockwise on the page. */
+export declare const turnBy: ([x, y]: Pt, degrees: number) => Pt;
 /** A venue placed in the district: where its surface's middle is, how far its drawing is turned, and where its building stands, all in feet in the district's frame (x to the right, y down the page). */
 export interface DistrictPlaced {
     member: DistrictMember;
@@ -79,6 +112,18 @@ export interface DistrictPlaced {
     /** Its convex hull, which the depth order of the 3D view separates buildings by. */
     hull: Pt[];
 }
+/** A gate placed in a district: where it is on its venue's outline in the plan's frame, in feet, and the way it faces on the page, in degrees clockwise from the top. */
+export interface DistrictGate {
+    key: string;
+    venue: string;
+    name: {
+        en: string;
+        ja: string;
+    };
+    at: Pt;
+    angle: number;
+    basis: "documented" | "plausible";
+}
 /** What a district is: its venues placed, the box that fits them, and how the map lies. */
 export interface DistrictPlan {
     options: DistrictOptions;
@@ -88,6 +133,10 @@ export interface DistrictPlan {
     /** The way north points on the page, degrees clockwise from the top. */
     north: number;
     members: DistrictPlaced[];
+    /** The buildings round the venues that the options' `context` brings, placed in the frame; `undefined` without it. */
+    context: ContextPlan | undefined;
+    /** The gates of the venues, where the options ask for them: each on its building's outline in the plan's frame (feet), and the way it faces on the page. Empty otherwise. */
+    gates: DistrictGate[];
     /** The frame the plan is drawn in, in feet: the venues' buildings with the margin the mode gives them. */
     view: {
         x: number;
@@ -101,9 +150,13 @@ export interface DistrictPlan {
         b: string;
         metres: number;
     }[];
+    /** The `[longitude, latitude]` the plan's metres are measured from: the middle of the venues' surfaces. */
+    origin: readonly [number, number];
 }
 /** 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>>;
+/** The ground kept round the buildings for the crowd outside, in metres, when a district asks for one. */
+export declare const OUTSIDE_ROOM = 160;
 /**
  * The plan of a district: each venue's surface placed where it is on the ground (the distance and the direction between middles come from the coordinates of OpenStreetMap's outlines, to a metre or so) and turned so
  * that its long side points where it does in the world, and the frame that fits them. A venue whose orientation is not known (an arena the building gives no axis for) is placed with its rink east-west, as it is drawn alone.
@@ -117,7 +170,7 @@ export declare const DISTRICT_MARGIN: Readonly<Record<DistrictMode, number>>;
  */
 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)}\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)}}\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)}\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-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}\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}}\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}\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-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-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`).

package/dist/district.dom.d.ts

@@ -0,0 +1,31 @@
+import { type DistrictOptions } from "./district.ts";
+import type { OutsideLevel } from "./outside.paint.ts";
+/** What `mountDistrict` gives back. */
+export interface KyogijoDistrict {
+    readonly mode: "2d";
+    /** Draw again with other options (venues, fit, theme, level): the container's contents are replaced. */
+    update(options: DistrictOptions): void;
+    /** Show another level of the crowd outside at once, without drawing the plan again. A district with no crowd does nothing. */
+    setOutside(level: OutsideLevel): void;
+    /** What the crowd's last paint cost, in milliseconds, how many people it drew and how, or `undefined` where there is no crowd or it has not been drawn. */
+    outsideCost(): {
+        ms: number;
+        people: number;
+        mode: string;
+        pixels: number;
+    } | undefined;
+    /** The plan's SVG, or `null` after `destroy`. */
+    svg(): SVGSVGElement | null;
+    /** Empty the container and stop listening. */
+    destroy(): void;
+}
+/**
+ * Mount a district's plan in a container, with the crowd outside over it when `options.outside` asks for one.
+ * @example
+ * ```ts no-run
+ * import { mountDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const plan = mountDistrict(document.querySelector("#city")!, { venues: ["bc-place", "rogers-arena"], outside: { level: 50 } });
+ * plan.setOutside(100);
+ * ```
+ */
+export declare function mountDistrict(host: HTMLElement, options: DistrictOptions): KyogijoDistrict;

package/dist/district.dom.js

@@ -0,0 +1,52 @@
+// A district's 2D plan in a page, with the crowd outside over it: `mountDistrict` writes `drawDistrict`'s SVG into a container and, where the district asks for a crowd (`DistrictOptions.outside`) and has a mask to put it on,
+// lays one canvas over the drawing (`outside.dom.ts`). The plan is still: nothing animates, and the crowd is painted when its level or the box's size changes. Without a crowd it is `drawDistrict` written into the container.
+import { drawDistrict, planDistrict } from "./district.js";
+import { hasOutside, outsideCrowd, outsideLevelOf } from "./outside.js";
+import { attachOutsidePlan } from "./outside.dom.js";
+/**
+ * Mount a district's plan in a container, with the crowd outside over it when `options.outside` asks for one.
+ * @example
+ * ```ts no-run
+ * import { mountDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const plan = mountDistrict(document.querySelector("#city")!, { venues: ["bc-place", "rogers-arena"], outside: { level: 50 } });
+ * plan.setOutside(100);
+ * ```
+ */
+export function mountDistrict(host, options) {
+    let layer;
+    let alive = true;
+    const draw = (next) => {
+        layer?.destroy();
+        layer = undefined;
+        const plan = planDistrict(next);
+        host.innerHTML = `<div class="ky-district-view" style="position:relative">${drawDistrict(next, plan)}</div>`;
+        const wrap = host.firstElementChild;
+        const svg = wrap.querySelector("svg.ky-district");
+        if (next.outside !== undefined && svg !== null && hasOutside(plan))
+            layer = attachOutsidePlan(wrap, svg, { level: outsideLevelOf(next), crowd: () => outsideCrowd(plan), viewBox: plan.view });
+    };
+    draw(options);
+    return {
+        mode: "2d",
+        update(next) {
+            if (alive)
+                draw(next);
+        },
+        setOutside(level) {
+            if (alive)
+                layer?.setLevel(level);
+        },
+        outsideCost() {
+            const last = layer?.last;
+            return last === undefined ? undefined : { ms: last.ms, people: last.stats.people, mode: last.stats.mode, pixels: last.pixels };
+        },
+        svg: () => (alive ? host.querySelector("svg.ky-district") : null),
+        destroy() {
+            if (!alive)
+                return;
+            alive = false;
+            layer?.destroy();
+            host.replaceChildren();
+        },
+    };
+}

package/dist/district.js

@@ -4,6 +4,8 @@
 // apart, with a grid, a scale and a name beside each. Nothing is drawn but what the venues are drawn from: no street, no park and no mark of a team, a league or a tournament; the credit
 // `VENUE_ATTRIBUTION` goes with it. Pure: options in, a plan, and markup, out; `district.turn.ts` raises it in 3D.
 import { arenaById, arenaNameIn } from "./arenas.js";
+import { kodokanMember } from "./kodokan.js";
+import { contextFloor, contextFrame, placeContext, toneOf } from "./context.js";
 import { crowdStands, drawKyogijo } from "./draw.js";
 import { FEET_PER_METRE } from "./geometry.js";
 import { KYOGIJO_STRINGS } from "./strings.js";
@@ -11,6 +13,8 @@ import { esc, hash } from "./format.js";
 import { STADIUM_IDS, stadiumById, stadiumConfigs, stadiumFrameHeading, stadiumKind, stadiumNames, stadiumSeats } from "./stadiums.js";
 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";
 export const DISTRICT_MODES = ["neighbours", "city"];
 const venueMember = (venue, language) => {
     const arena = arenaById(venue.id);
@@ -46,7 +50,7 @@ const stadiumMember = (stadium, config, language) => {
     };
 };
 /** Every key a district can be asked for: the arenas of `VENUES` and the stadiums of `STADIUMS`. */
-export const DISTRICT_IDS = Object.freeze([...VENUE_IDS, ...STADIUM_IDS]);
+export const DISTRICT_IDS = Object.freeze([...VENUE_IDS, ...STADIUM_IDS, "kodokan"]);
 /** Whether a key is a venue a district can place. */
 export const isDistrictId = (id) => DISTRICT_IDS.includes(id);
 /**
@@ -74,14 +78,22 @@ export function districtMember(input, language = "en") {
             throw new Error(`${id} has no configuration ${String(named)}: ${stadiumConfigs(stadium).join(", ")}`);
         return stadiumMember(stadium, config, language);
     }
+    // The Kodokan: a hall of the budō, its main dojo in the air in its building (`kodokan.ts`).
+    if (id === "kodokan") {
+        if (named !== undefined)
+            throw new Error(`kodokan has one configuration, not ${named}`);
+        return kodokanMember(language);
+    }
     throw new Error(`no venue ${String(id)}: the venues are ${DISTRICT_IDS.join(", ")}`);
 }
 // ---- The plan. ----
 const RAD = Math.PI / 180;
 /** Turn a point of the map (east, down the page) by `degrees` clockwise on the page. */
-const turnBy = ([x, y], degrees) => [x * Math.cos(degrees * RAD) - y * Math.sin(degrees * RAD), x * Math.sin(degrees * RAD) + y * Math.cos(degrees * RAD)];
+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)];
 /** 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. */
+export const OUTSIDE_ROOM = 160;
 const EARTH = 6371008.8;
 const haversine = (a, b) => {
     const [p, q] = [a[1] * RAD, b[1] * RAD];
@@ -131,20 +143,43 @@ export function planDistrict(options) {
     const xs = placed.flatMap((p) => p.footprint.map((q) => q[0]));
     const ys = placed.flatMap((p) => p.footprint.map((q) => q[1]));
     const [x0, x1, y0, y1] = [Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys)];
-    const margin = Math.max(x1 - x0, y1 - y0) * DISTRICT_MARGIN[mode];
-    const view = { x: x0 - margin, y: y0 - margin, w: x1 - x0 + 2 * margin, h: y1 - y0 + 2 * margin };
+    const 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.
+    const room = options.outside !== undefined && walkIdFor(members.map((m) => m.id)) !== undefined ? OUTSIDE_ROOM * FEET_PER_METRE : 0;
+    const margin = Math.max(Math.max(x1 - x0, y1 - y0) * DISTRICT_MARGIN[mode], room);
+    // With context the frame takes in the streets round the buildings (and any landmark near them) as well.
+    const round = { x0: x0 - margin, y0: y0 - margin, x1: x1 + margin, y1: y1 + margin };
+    const wide = context ? contextFrame(options.context, origin, turn, { x0, y0, x1, y1 }) : round;
+    const framed = { x0: Math.min(round.x0, wide.x0), y0: Math.min(round.y0, wide.y0), x1: Math.max(round.x1, wide.x1), y1: Math.max(round.y1, wide.y1) };
+    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 })));
-    return { options, mode, turn, north: turn, members: placed, view, between };
+    const around = context ? placeContext(options.context, origin, turn, view, placed.map((p) => ({ footprint: p.footprint, shell: p.member.shell !== undefined }))) : 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 };
 }
 // ---- The drawing. ----
 /** The colours and the type of a district's drawing, light and dark. Defaults sit in `:where()`, so a page's own rule wins. */
 export const KYOGIJO_DISTRICT_STYLE = `
-:where(.ky-district){--ky-dist-ground:#e1e4da;--ky-dist-grid:rgba(40,46,42,.16);--ky-dist-ink:#1f2320;--ky-dist-halo:rgba(255,255,255,.9)}
-@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .ky-district:not([data-theme=light])){--ky-dist-ground:#1b2025;--ky-dist-grid:rgba(220,226,220,.16);--ky-dist-ink:#e8ece8;--ky-dist-halo:rgba(14,18,16,.85)}}
-:where(html[data-theme=dark] .ky-district,.ky-district[data-theme=dark]){--ky-dist-ground:#1b2025;--ky-dist-grid:rgba(220,226,220,.16);--ky-dist-ink:#e8ece8;--ky-dist-halo:rgba(14,18,16,.85)}
+: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}
+@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}}
+: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-district .ky-dist-ground{fill:var(--ky-dist-ground)}
 .ky-district .ky-dist-grid{fill:none;stroke:var(--ky-dist-grid);stroke-width:1}
+.ky-district .ky-dist-block{stroke:var(--ky-dist-bline);stroke-width:.5;stroke-linejoin:round}
+.ky-district .ky-dist-b0{fill:var(--ky-dist-b0)}
+.ky-district .ky-dist-b1{fill:var(--ky-dist-b1)}
+.ky-district .ky-dist-b2{fill:var(--ky-dist-b2)}
+.ky-district .ky-dist-b3{fill:var(--ky-dist-b3)}
+.ky-district .ky-dist-street{stroke-linejoin:round;stroke-linecap:butt}
+.ky-district .ky-dist-street-0{stroke:var(--ky-dist-road)}
+.ky-district .ky-dist-street-1{stroke:var(--ky-dist-deck)}
+.ky-district .ky-dist-street-2{stroke:var(--ky-dist-rail);stroke-dasharray:6 3}
+.ky-district .ky-dist-street-3{stroke:var(--ky-dist-walk)}
+.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}
+.ky-district .ky-dist-ghost{fill:var(--ky-dist-b1);fill-opacity:.35}
 .ky-district .ky-dist-ink{fill:none;stroke:var(--ky-dist-ink);stroke-linecap:round;stroke-linejoin:round}
 .ky-district .ky-dist-text{fill:var(--ky-dist-ink);font-family:var(--ky-font,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif);font-weight:600;paint-order:stroke;stroke:var(--ky-dist-halo);stroke-linejoin:round}`;
 const ROOT = /^<svg([^>]*)>/;
@@ -191,7 +226,7 @@ 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]))}`);
+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])]))}`);
 /** 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";
@@ -204,7 +239,12 @@ export function describeDistrict(options, plan = planDistrict(options)) {
     const nameOf = (key) => plan.members.find((p) => p.member.key === key).member.name[language];
     const apart = first === undefined ? "" : language === "ja" ? `${gap}${nameOf(first.a)}と${nameOf(first.b)}の中心は約${Math.round(first.metres)}m離れています。` : `${gap}The middles of ${nameOf(first.a)} and ${nameOf(first.b)} are about ${Math.round(first.metres)} metres apart.`;
     const text = fillWords(words.district, { count: String(plan.members.length), mode: words[plan.mode === "city" ? "districtCity" : "districtNeighbours"] });
-    return { title, description: `${text}${apart}${gap}${words.districtCredit}${gap}${VENUE_ATTRIBUTION}${language === "ja" ? "。" : "."}` };
+    const 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, ",") })}` : "";
+    const credits = [...new Set([...(plan.context?.attribution[language] ?? []), ...plan.members.flatMap((p) => (p.member.attribution === undefined ? [] : [p.member.attribution[language]]))])];
+    const credit = credits.length === 0 ? "" : `${gap}${credits.join(language === "ja" ? "。" : "; ")}${language === "ja" ? "。" : "."}`;
+    return { title, description: `${text}${apart}${crowd}${gap}${words.districtCredit}${gap}${VENUE_ATTRIBUTION}${language === "ja" ? "。" : "."}${credit}` };
 }
 const fillWords = (text, values) => text.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
 /** How a venue is drawn for a district: its own options with the district's language, theme and ids, in 2D with its stands or as the floor of the 3D view (its building only). */
@@ -253,6 +293,18 @@ export function drawDistrict(options, plan = planDistrict(options), drawing) {
     parts.push(`<rect class="ky-dist-ground" x="${num(view.x)}" y="${num(view.y)}" width="${num(view.w)}" height="${num(view.h)}"/>`);
     parts.push(`<clipPath id="${id}-clip"><rect x="${num(view.x)}" y="${num(view.y)}" width="${num(view.w)}" height="${num(view.h)}"/></clipPath>`);
     parts.push(`<path class="ky-dist-grid" clip-path="url(#${id}-clip)" d="${grid.join("")}"/>`);
+    if (plan.context !== undefined)
+        parts.push(`<g clip-path="url(#${id}-clip)">${contextFloor(plan.context)}</g>`);
+    // The building a raised venue stands in, flat under it: pale as a ghost where it is see-through, in its tone of height where it is solid.
+    if (options.building !== "none") {
+        for (const placed of plan.members) {
+            const shell = placed.member.shell;
+            if (shell === undefined)
+                continue;
+            const tone = options.building === "solid" ? `ky-dist-b${toneOf(shell.height)}` : "ky-dist-ghost";
+            parts.push(`<path class="ky-dist-block ${tone}" data-shell="${esc(placed.member.key)}" clip-path="url(#${id}-clip)" d="M${placed.footprint.map(([x, y]) => `${num(x)} ${num(y)}`).join("L")}Z"/>`);
+        }
+    }
     const styles = [];
     plan.members.forEach((placed, i) => {
         const svg = drawing === undefined ? drawMember(placed.member, options, i, id) : drawing(placed.member, i);
@@ -260,9 +312,17 @@ export function drawDistrict(options, plan = planDistrict(options), drawing) {
         for (const block of own)
             if (!styles.includes(block))
                 styles.push(block);
+        // The 3D view draws a raised floor in the air itself: the ground under it is left bare.
+        if (drawing !== undefined && (placed.member.elevation ?? 0) > 0)
+            return;
         const centre = surfaceCentre(placed.member.options);
         parts.push(`<g class="ky-dist-venue" data-venue="${esc(placed.member.key)}" transform="translate(${num(placed.at[0])} ${num(placed.at[1])}) rotate(${num(placed.angle)}) translate(${num(-centre[0])} ${num(-centre[1])})">${markup}</g>`);
     });
+    if (plan.gates.length > 0) {
+        // A door's bar on the outline, and a dashed stub out from it the way a queue would run; a gate a source names is filled, one that is ours is drawn hollow.
+        const bars = plan.gates.map((g) => `<g class="ky-dist-gate ky-dist-gate-${g.basis}" data-gate="${esc(g.key)}" transform="translate(${num(g.at[0])} ${num(g.at[1])}) rotate(${num(g.angle)})"><path class="ky-dist-gate-queue" d="M0 -9V-90"/><rect x="-24" y="-5" width="48" height="10" rx="3.5"/></g>`);
+        parts.push(`<g class="ky-dist-gates" aria-hidden="true">${bars.join("")}</g>`);
+    }
     if (labels) {
         const size = diag * (plan.mode === "city" ? 0.018 : 0.026);
         plan.members.forEach((placed) => {
@@ -286,7 +346,7 @@ export function drawDistrict(options, plan = planDistrict(options), drawing) {
     parts.push(`<g class="ky-dist-scale" aria-hidden="true"><path class="ky-dist-ink" stroke-width="${num(diag * 0.004)}" d="M${num(sx)} ${num(sy - diag * 0.01)}V${num(sy)}H${num(sx + bar)}V${num(sy - diag * 0.01)}"/><text class="ky-dist-text" x="${num(sx + bar / 2)}" y="${num(sy - diag * 0.018)}" text-anchor="middle" font-size="${num(diag * 0.022)}" stroke-width="${num(diag * 0.005)}">${metresText(metres)}</text></g>`);
     const sheet = options.style === "none" ? "" : `<style>${KYOGIJO_DISTRICT_STYLE}</style>${styles.join("")}`;
     const theme = options.theme === "light" || options.theme === "dark" ? ` data-theme="${options.theme}"` : "";
-    return `<svg xmlns="http://www.w3.org/2000/svg" class="kyogijo ky-district" viewBox="${num(view.x)} ${num(view.y)} ${num(view.w)} ${num(view.h)}" role="img" aria-labelledby="${id}-t ${id}-d" data-sport="district" data-mode="${plan.mode}"${theme} lang="${language}"><title id="${id}-t">${esc(title)}</title><desc id="${id}-d">${esc(description)}</desc>${sheet}${parts.join("")}</svg>`;
+    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 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));