@johnmorrisdotca/kyogijo-stadiums 0.40.2 → 0.44.0

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,28 @@ 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";
+    /**
+     * The floor of the Kodokan's building to show, 0 (the basement) to 8: the 7th is the great dojo, the 8th its gallery, the 5th and 6th their dojos as the Kodokan's floor guide counts them, the others a plain floor plate; the chosen floor's plate is picked out
+     * and what is drawn on the other floors is left out. Missing: the great dojo as it stands, on its floor, with nothing picked out. Only a venue that is a building of floors (`kodokan`) is changed.
+     */
+    floor?: number;
 }
 /** 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 +75,47 @@ 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;
+    };
+    /**
+     * What is drawn inside the venue, when it is not one surface: the rooms of a floor of a building (the Kodokan's 5th and 6th floors have two or three dojos), each its own surface with its own place. Missing: the venue's one surface, `options`
+     * at `centre` turned `heading`. An empty list draws no surface at all (a floor of plain rooms).
+     */
+    parts?: DistrictPart[];
+    /** The floor of the building the venue is drawn at, and the height of its level above the ground in feet: the building's plate at that level is drawn in 3D, picked out from the see-through walls. */
+    plate?: {
+        floor: number;
+        level: number;
+    };
+    /** Every floor of the building with the height of its level in feet, and how thick a floor is in metres: each is drawn as a slab with an edge, the chosen one (`plate`) picked out and the rest faint. */
+    slabs?: {
+        floor: number;
+        level: number;
+    }[];
+    slabThickness?: number;
+}
+/** One surface of a venue that has several (`DistrictMember.parts`): what it is drawn from, where it stands, how it lies and how high its floor is. */
+export interface DistrictPart {
+    key: string;
+    options: SurfaceOptions;
+    /** The middle of the surface, \`[longitude, latitude]\`. */
+    centre: readonly [number, number];
+    /** The compass heading of the surface's x axis, 0 to under 180. */
+    heading: number;
+    /** How high its floor stands above the ground, in feet. */
+    elevation?: number;
+    /** Which part of the surface's room is drawn: `room` (the floor, the walls and what stands on it, not the gallery over it) or `gallery` (what stands above the room's walls: the seats, the rail, the roof). Everything when missing. */
+    show?: "room" | "gallery";
 }
 /** Every key a district can be asked for: the arenas of `VENUES` and the stadiums of `STADIUMS`. */
 export declare const DISTRICT_IDS: readonly string[];
@@ -66,19 +131,41 @@ export declare const isDistrictId: (id: string) => boolean;
  * // bc-place:soccer stadium 52497
  * ```
  */
-export declare function districtMember(input: DistrictVenueInput, language?: Language): DistrictMember;
+export declare function districtMember(input: DistrictVenueInput, language?: Language, floor?: number): 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 PlacedPart {
+    part: DistrictPart;
+    /** The middle of the surface, and the degrees its drawing is turned clockwise, as for the venue's own. */
+    at: Pt;
+    angle: number;
+}
 export interface DistrictPlaced {
     member: DistrictMember;
     /** The middle of the surface. */
     at: Pt;
     /** The degrees the venue's own drawing (its field along x) is turned clockwise to lie as it does in the world. */
     angle: number;
+    /** The surfaces of the venue as the plan places them (one, unless the venue has `parts`). */
+    parts: PlacedPart[];
     /** The building's outline. */
     footprint: Pt[];
     /** 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 +175,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 +192,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 +212,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;--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}";
 /**
  * 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`).
@@ -150,7 +245,7 @@ export declare function describeDistrict(options: DistrictOptions, plan?: Distri
 /** How a venue is drawn for a district: its own options with the district's language, theme and ids, in 2D with its stands or as the floor of the 3D view (its building only). */
 export declare function drawMember(member: DistrictMember, options: DistrictOptions, index: number, id: string, how?: {
     floor?: boolean;
-}): string;
+}, partIndex?: number): string;
 /**
  * The plan of a district as one SVG: the ground, a grid and a scale, a north arrow, and each venue's own drawing (its stands, or its building only for `stands: false`) put where it stands and turned as it lies, with a name beside each
  * where `labels` says. `drawing` is how each venue is drawn; the 3D view gives it the building-only floor.
@@ -162,6 +257,6 @@ export declare function drawMember(member: DistrictMember, options: DistrictOpti
  * // true true
  * ```
  */
-export declare function drawDistrict(options: DistrictOptions, plan?: DistrictPlan, drawing?: (member: DistrictMember, index: number) => string): string;
+export declare function drawDistrict(options: DistrictOptions, plan?: DistrictPlan, drawing?: (member: DistrictMember, index: number, part: number) => string): string;
 /** 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.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,9 @@
 // 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 { dojo } from "./budo/dojo.api.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 +14,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 +51,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);
 /**
@@ -59,7 +64,7 @@ export const isDistrictId = (id) => DISTRICT_IDS.includes(id);
  * // bc-place:soccer stadium 52497
  * ```
  */
-export function districtMember(input, language = "en") {
+export function districtMember(input, language = "en", floor) {
     const [id, named] = typeof input === "string" ? input.split(":") : [input.id, input.config];
     const venue = venueById(id);
     if (venue !== undefined) {
@@ -74,14 +79,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, floor);
+    }
     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];
@@ -104,7 +117,7 @@ export function planDistrict(options) {
         throw new Error("a district needs a venue");
     const language = options.language === "ja" ? "ja" : "en";
     const mode = options.mode === "city" ? "city" : "neighbours";
-    const members = options.venues.map((v) => districtMember(v, language));
+    const members = options.venues.map((v) => districtMember(v, language, options.floor));
     const keys = new Set();
     for (const m of members) {
         if (keys.has(m.key))
@@ -126,25 +139,56 @@ export function planDistrict(options) {
     }
     const placed = members.map((member, i) => {
         const footprint = raw[i].footprint.map((p) => turnBy(p, turn));
-        return { member, at: turnBy(raw[i].at, turn), angle: member.heading - 90 + turn, footprint, hull: hullOf(footprint) };
+        // The venue's surfaces: its own, or the parts it is drawn from, each placed by its own middle and heading.
+        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 [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;--ky-dist-water:#c7d5dc;--ky-dist-green:#d2dcc4;--ky-dist-wood:#c3d0b6;--ky-dist-tree:#b3c2a3;--ky-dist-floor:#2f6db0}
+@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}}
+: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}
 .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-land{stroke:none}
+.ky-district .ky-dist-water{fill:var(--ky-dist-water)}
+.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-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-floor{stroke:var(--ky-dist-floor);stroke-width:2}
 .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([^>]*)>/;
@@ -179,6 +223,11 @@ export function surfaceCentre(options) {
     if (options.sport === "mlb")
         return [0, 0];
     const stands = crowdStands(options);
+    // A room with no crowd (a dojo of a floor of rooms) has its mats from the corner of its drawing.
+    if (stands === undefined && options.sport === "dojo" && options.dojo !== undefined) {
+        const floor = dojo(options.dojo);
+        return [(floor.width * FEET_PER_METRE) / 2, (floor.length * FEET_PER_METRE) / 2];
+    }
     if (stands === undefined)
         throw new Error("a district's venue has a crowd");
     return [stands.box.x + stands.box.w / 2, stands.box.y + stands.box.h / 2];
@@ -191,7 +240,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]), ...(options.floor === undefined ? [] : [`floor${options.floor}`])]))}`);
 /** 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,18 +253,25 @@ 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). */
-export function drawMember(member, options, index, id, how = {}) {
+export function drawMember(member, options, index, id, how = {}, partIndex = 0) {
     const stands = options.stands !== false && how.floor !== true;
+    const own = member.parts?.[partIndex]?.options ?? member.options;
     return drawKyogijo({
-        ...member.options,
-        crowd: { real: true, ...(stands ? {} : { stands: false }) },
+        ...own,
+        // A room that is drawn without a crowd stays so.
+        crowd: own.crowd === false ? false : { real: true, ...(stands ? {} : { stands: false }) },
         language: options.language === "ja" ? "ja" : "en",
         ...(options.theme === undefined ? {} : { theme: options.theme }),
-        id: `${id}-m${index}`,
+        id: `${id}-m${index}${partIndex === 0 ? "" : `-p${partIndex}`}`,
     });
 }
 /**
@@ -253,16 +309,38 @@ 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}${placed.member.plate === undefined ? "" : " ky-dist-floor"}" data-shell="${esc(placed.member.key)}"${placed.member.plate === undefined ? "" : ` data-floor="${placed.member.plate.floor}"`} 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);
-        const { markup, styles: own } = nestedDrawing(svg);
-        for (const block of own)
-            if (!styles.includes(block))
-                styles.push(block);
-        const centre = surfaceCentre(placed.member.options);
-        parts.push(`<g class="ky-dist-venue" data-venue="${esc(placed.member.key)}" transform="translate(${num(placed.at[0])} ${num(placed.at[1])}) rotate(${num(placed.angle)}) translate(${num(-centre[0])} ${num(-centre[1])})">${markup}</g>`);
+        placed.parts.forEach((pp, j) => {
+            const svg = drawing === undefined ? drawMember(placed.member, options, i, id, {}, j) : drawing(placed.member, i, j);
+            const { markup, styles: own } = nestedDrawing(svg);
+            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 && (pp.part.elevation ?? 0) > 0)
+                return;
+            const centre = surfaceCentre(pp.part.options);
+            parts.push(`<g class="ky-dist-venue" data-venue="${esc(placed.member.key)}"${j === 0 ? "" : ` data-part="${esc(pp.part.key)}"`} transform="translate(${num(pp.at[0])} ${num(pp.at[1])}) rotate(${num(pp.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 +364,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));