@johnmorrisdotca/kyogijo-stadiums 0.43.0 → 0.44.1

package/dist/cityctx.js

@@ -0,0 +1,34 @@
+import { SEATTLE_CENTER, SEATTLE_CITY, SEATTLE_SODO, VANCOUVER_NATURE } from "./cityctx.data.js";
+import { VANCOUVER_CENTRE } from "./osm.context.data.js";
+/** The venues each area is drawn round, by their ids (the part of a district's key before the colon). */
+export const CITYCTX_VENUES = Object.freeze({
+    vancouver: ["bc-place", "rogers-arena"],
+    sodo: ["lumen-field", "t-mobile-park"],
+    center: ["climate-pledge-arena"],
+});
+/**
+ * The areas of context that go with some venues, for a district's `context` option: downtown Vancouver's buildings and streets (`VANCOUVER_CENTRE`, of `./osm`) with its water, green and trees (`VANCOUVER_NATURE`) for BC Place and
+ * Rogers Arena; Seattle's SoDo for Lumen Field and T-Mobile Park, Seattle Center's for Climate Pledge Arena, and the city's own, with streets and the buildings that matter from far, for a district that holds venues of both (they are
+ * three kilometres apart, so the detail of either would be a speck). A venue of neither city has none.
+ * @example
+ * ```ts
+ * import { contextFor } from "@johnmorrisdotca/kyogijo-stadiums/cityctx";
+ * console.log(contextFor(["bc-place:cfl", "rogers-arena"]).map((area) => area.key));
+ * // [ 'vancouver', 'vancouver-nature' ]
+ * ```
+ */
+export function contextFor(venues) {
+    const ids = new Set(venues.map((key) => key.split(":")[0]));
+    const has = (list) => list.some((id) => ids.has(id));
+    const areas = [];
+    if (has(CITYCTX_VENUES.vancouver))
+        areas.push(VANCOUVER_CENTRE, VANCOUVER_NATURE);
+    const [sodo, center] = [has(CITYCTX_VENUES.sodo), has(CITYCTX_VENUES.center)];
+    if (sodo && center)
+        areas.push(SEATTLE_CITY);
+    else if (sodo)
+        areas.push(SEATTLE_SODO);
+    else if (center)
+        areas.push(SEATTLE_CENTER);
+    return areas;
+}

package/dist/context.d.ts

@@ -17,9 +17,12 @@ export interface ContextLayer {
     rows: readonly (readonly number[])[];
 }
 /**
- * An area of context round a district: ONE coordinate frame (the origin, the grid step and the radius, in metres east and north of the origin) and separate layers laid in it. Today there is one layer, `buildings`; trees and land
- * cover are added beside it later as layers of their own, each with its own source and licence, with no change to the frame or to the layers that are there. A layer a caller does not ask for or an area lacks is simply not drawn.
- * The row of a `buildings` layer: the height and the rise of the roof (0 for a flat one) in grid steps, then the first point (east, north) and each step to the next, in grid steps from the origin.
+ * An area of context round a district: ONE coordinate frame (the origin, the grid step and the radius, in metres east and north of the origin) and separate layers laid in it, each with its own source and licence. A layer an
+ * area lacks is simply not drawn. The rows of each layer, all in grid steps from the origin:
+ * - `buildings`: the height and the rise of the roof (0 for a flat one), then the first point (east, north) and each step to the next.
+ * - `streets`: the kind (0 a carriageway at street level, 1 one on a viaduct or a bridge, 2 a railway, 3 a sidewalk or a path) and the width in grid steps, then the first point and each step to the next, a line.
+ * - `landCover`: the class (0 water, 1 green, 2 wood), then the first point and each step to the next, an outline (a hole is an outline of its own, filled even-odd).
+ * - `trees`: one row: the first tree's east, north and crown radius, then each next tree's step in east and north from the one before and its crown radius.
  */
 export interface ContextArea {
     key: string;
@@ -55,7 +58,7 @@ export interface ContextBlock {
     area: number;
     /** A venue stands in this building (Korakuen Hall's building, which would hide it): it is drawn as a ghost. */
     ghost: boolean;
-    /** The middle a see-through building's walls give way from, in feet: the venue raised in it (the Kodokan's main dojo). Set only by `shellBlock`. */
+    /** The middle of what is seen through a see-through building (the room or rooms raised in it), in feet: each wall gives way to the eye when the eye is on its side of that middle. Set only by `shellBlock`. */
     xray?: Pt;
     /** Whether the building lies wholly inside the plan's frame: only such a building stands up in the 3D view, one the frame cuts is a part of the floor. */
     whole: boolean;
@@ -66,11 +69,26 @@ export interface ContextStreet {
     width: number;
     points: Pt[];
 }
+/** A water, green or wood outline in feet in the district's frame (a hole is an outline of its own). */
+export interface ContextShape {
+    /** 0 water, 1 green, 2 wood. */
+    cls: number;
+    ring: Pt[];
+}
+/** A tree in feet in the district's frame, its crown's radius in feet. */
+export interface ContextTree {
+    at: Pt;
+    r: number;
+}
 /** What a district's context is: the buildings kept, and how many were left out because they are a venue's own. */
 export interface ContextPlan {
     blocks: ContextBlock[];
     /** The streets, from a `streets` layer: drawn flat on the floor, under the buildings. */
     streets?: ContextStreet[];
+    /** The water, green and wood outlines of a `landCover` layer that reach the frame: drawn flat, under the streets. */
+    land?: ContextShape[];
+    /** The trees of a `trees` layer inside the frame: drawn as dots, over the streets and under the buildings. */
+    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 credits of the areas used, in each language. */
@@ -131,11 +149,27 @@ export declare function placeContext(areas: readonly ContextArea[], origin: LonL
 export declare const toneOf: (feet: number) => number;
 /** The streets flat on the floor, under the buildings: a path for each kind and width (a foot), widest and lowest kinds first, so that a sidewalk lies over the carriageway beside it and a viaduct's deck over the street under it. */
 export declare function streetsFloor(streets: readonly ContextStreet[]): string;
-/** The buildings flat on the floor of a district: one path for each tone, and one for the ghosts, drawn under the venues. Empty for a district with no context. */
+/** Water, green and wood flat on the floor, the lowest of what a context draws: one path for each class, filled even-odd so that a hole is a hole. */
+export declare function landFloor(land: readonly ContextShape[]): string;
+/** Trees as dots: one path for each of three sizes (the crown's diameter on the floor, in feet), a dot being a round cap on a line of no length, so that a thousand trees are three elements. */
+export declare function treesFloor(trees: readonly ContextTree[]): string;
+/**
+ * What lies flat on the floor of a district under the venues, from the lowest up: water, green and wood, the streets, the trees as dots, and the buildings in four tones by height with the ghosts. All of it faint, so that a crowd
+ * reads on it. Empty for a district with no context.
+ */
 export declare function contextFloor(plan: ContextPlan): string;
 /** One building as the planes of a block: its walls up to the eaves, and over them a flat roof, or a hip roof where it has a pitched one. A ghost's planes are always mostly cut away, so that a venue inside it shows. */
 export declare function blockPlanes(b: ContextBlock, prefix: string): Plane[];
+/**
+ * A floor of a building as a slab: a top face at `level` and sides down `thickness` below it, shaded by the way each side faces, so that it is a solid piece with an edge from every side and never a sheet one pixel thick.
+ * `look`: `chosen` is picked out (its top is the blue plate, drawn under whatever stands on it), `faint` is a floor of the building that is not the one chosen, `plain` has no top (a floor that is drawn by something else, a dojo's mats).
+ * `top` and `side` are the ids of the planes (a side's has its place in the ring after it).
+ */
+export declare function slabPlanes(ring: readonly Pt[], level: number, thickness: number, ids: {
+    top: string;
+    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[];
-/** The building a raised venue stands in as a block: its outline in feet, its height, `xray` the middle its walls give way from (or none for a solid one). */
+/** 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

@@ -111,8 +111,43 @@ export function placeContext(areas, origin, turn, frame, venues) {
             streets.push({ kind: row[0], width: row[1] * area.grid * FEET_PER_METRE, points });
         }
     }
+    // The water, green and wood of the areas, and their trees.
+    const land = [];
+    const trees = [];
+    for (const area of areas) {
+        const [east, north] = metresFrom(origin, [area.origin])[0];
+        const g = area.grid;
+        const put = (x, y) => rotate([(x * g + east) * FEET_PER_METRE, -(y * g + north) * FEET_PER_METRE], turn);
+        for (const row of area.layers.landCover?.rows ?? []) {
+            const ring = [];
+            let [x, y] = [row[1], row[2]];
+            ring.push(put(x, y));
+            for (let i = 3; i + 1 < row.length; i += 2) {
+                x += row[i];
+                y += row[i + 1];
+                ring.push(put(x, y));
+            }
+            const box = boxOf(ring);
+            if (!(box.x1 < fx0 || box.x0 > fx1 || box.y1 < fy0 || box.y0 > fy1))
+                land.push({ cls: row[0], ring });
+        }
+        for (const row of area.layers.trees?.rows ?? []) {
+            let [x, y] = [row[0], row[1]];
+            for (let i = 0; i + 2 < row.length; i += 3) {
+                if (i > 0) {
+                    x += row[i];
+                    y += row[i + 1];
+                }
+                const at = put(x, y);
+                if (at[0] >= fx0 && at[0] <= fx1 && at[1] >= fy0 && at[1] <= fy1)
+                    trees.push({ at, r: row[i + 2] * g * FEET_PER_METRE });
+            }
+        }
+    }
+    // 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));
-    return { blocks, streets, owned, attribution: { en: [...new Set(layers.map((l) => l.attribution.en))], ja: [...new Set(layers.map((l) => l.attribution.ja))] } };
+    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") } };
 }
 /** The tone (0 low to 3 tall) of a building of `feet` height. */
 export const toneOf = (feet) => CONTEXT_TONES.filter((m) => feet / FEET_PER_METRE >= m).length;
@@ -133,16 +168,36 @@ export function streetsFloor(streets) {
     const keys = [...groups.keys()].sort((a, b) => order.indexOf(Number(a.split(" ")[0])) - order.indexOf(Number(b.split(" ")[0])) || Number(b.split(" ")[1]) - Number(a.split(" ")[1]));
     return `<g class="ky-dist-streets" aria-hidden="true" fill="none">${keys.map((key) => `<path class="ky-dist-street ky-dist-street-${key.split(" ")[0]}" stroke-width="${key.split(" ")[1]}" d="${groups.get(key).join("")}"/>`).join("")}</g>`;
 }
-/** The buildings flat on the floor of a district: one path for each tone, and one for the ghosts, drawn under the venues. Empty for a district with no context. */
+const one = (value) => String(Math.round(value * 10) / 10);
+/** Water, green and wood flat on the floor, the lowest of what a context draws: one path for each class, filled even-odd so that a hole is a hole. */
+export function landFloor(land) {
+    const classes = ["ky-dist-water", "ky-dist-green", "ky-dist-wood"];
+    return classes.map((cls, i) => {
+        const rings = land.filter((s) => s.cls === i);
+        return rings.length === 0 ? "" : `<path class="ky-dist-land ${cls}" fill-rule="evenodd" d="${rings.map((s) => `M${s.ring.map(([x, y]) => `${one(x)} ${one(y)}`).join("L")}Z`).join("")}"/>`;
+    }).join("");
+}
+/** Trees as dots: one path for each of three sizes (the crown's diameter on the floor, in feet), a dot being a round cap on a line of no length, so that a thousand trees are three elements. */
+export function treesFloor(trees) {
+    const sizes = [[0, 11, 9], [11, 17, 14], [17, Infinity, 20]];
+    return sizes.map(([from, to, width]) => {
+        const dots = trees.filter((t) => t.r * 2 >= from && t.r * 2 < to);
+        return dots.length === 0 ? "" : `<path class="ky-dist-tree" stroke-width="${width}" d="${dots.map((t) => `M${one(t.at[0])} ${one(t.at[1])}h0`).join("")}"/>`;
+    }).join("");
+}
+/**
+ * What lies flat on the floor of a district under the venues, from the lowest up: water, green and wood, the streets, the trees as dots, and the buildings in four tones by height with the ghosts. All of it faint, so that a crowd
+ * reads on it. Empty for a district with no context.
+ */
 export function contextFloor(plan) {
-    const roads = streetsFloor(plan.streets ?? []);
+    const under = `${landFloor(plan.land ?? [])}${streetsFloor(plan.streets ?? [])}${treesFloor(plan.trees ?? [])}`;
     if (plan.blocks.length === 0)
-        return roads;
+        return under;
     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 `${roads}<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>`;
 }
 // ---- The blocks of the 3D view. ----
 /** How much a building matters to the view: tall and wide first. */
@@ -269,6 +324,30 @@ export function blockPlanes(b, prefix) {
     });
     return planes;
 }
+const SLAB_SIDES = ["u-slab-a", "u-slab-b", "u-slab-c"];
+/**
+ * A floor of a building as a slab: a top face at `level` and sides down `thickness` below it, shaded by the way each side faces, so that it is a solid piece with an edge from every side and never a sheet one pixel thick.
+ * `look`: `chosen` is picked out (its top is the blue plate, drawn under whatever stands on it), `faint` is a floor of the building that is not the one chosen, `plain` has no top (a floor that is drawn by something else, a dojo's mats).
+ * `top` and `side` are the ids of the planes (a side's has its place in the ring after it).
+ */
+export function slabPlanes(ring, level, thickness, ids, look) {
+    const wound = signedArea(ring);
+    const planes = [];
+    const faint = (p) => (look === "faint" ? { ...p, shy: [0, 0], fadeAt: -10, fadeTo: 0.18 } : p);
+    ring.forEach((p, i) => {
+        const q = ring[(i + 1) % ring.length];
+        const long = Math.hypot(q[0] - p[0], q[1] - p[1]);
+        if (long < 1)
+            return;
+        planes.push(faint(wall(`${ids.side}${i}`, "floor", p[0], p[1], q[0], q[1], level - thickness, level, `<rect class="u-slab ${SLAB_SIDES[sideOf(p, q, wound)]}" width="${n(long)}" height="${n(thickness)}"/>`)));
+    });
+    if (look !== "plain") {
+        const top = raked(ids.top, "floor", ring, { x0: ring[0][0], y0: ring[0][1], z0: level, gx: 0, gy: 0 }, [1, 0], (corners) => `<polygon class="${look === "chosen" ? "u-floorplate" : "u-slab-top"}" points="${pointList(corners)}"/>`);
+        if (top !== undefined)
+            planes.push(faint(look === "chosen" ? { ...top, under: true } : top));
+    }
+    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) {
     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));
@@ -284,7 +363,7 @@ export function contextUprights(plan, most = CONTEXT_BLOCKS) {
     }
     return items;
 }
-/** The building a raised venue stands in as a block: its outline in feet, its height, `xray` the middle its walls give way from (or none for a solid one). */
+/** 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 function shellBlock(key, ring, height, xray) {
     return { id: `shell-${key}`, ring: [...ring], height, rise: 0, area: Math.abs(signedArea(ring)), ghost: false, whole: true, ...(xray === undefined ? {} : { xray }) };
 }

package/dist/district-entry.d.ts

@@ -1,9 +1,10 @@
 export { DISTRICT_IDS, DISTRICT_MARGIN, DISTRICT_MODES, KYOGIJO_DISTRICT_STYLE, describeDistrict, districtId, districtMember, drawDistrict, isDistrictId, metresText, planDistrict, scaleOf, unknownVenues } from "./district.ts";
-export type { DistrictMember, DistrictMode, DistrictOptions, DistrictPlaced, DistrictPlan, DistrictVenueInput } from "./district.ts";
+export type { 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 { KODOKAN, KODOKAN_DOJO, KODOKAN_FLOOR_HEIGHT, KODOKAN_ROOM_HEIGHT, kodokanMember } from "./kodokan.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";
 export { mountDistrict } from "./district.dom.ts";
 export type { KyogijoDistrict } from "./district.dom.ts";

package/dist/district-entry.js

@@ -1,7 +1,7 @@
 // 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 { 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";
 // 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.

package/dist/district.d.ts

@@ -46,6 +46,11 @@ export interface DistrictOptions {
      * 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 {
@@ -82,6 +87,35 @@ export interface DistrictMember {
         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[];
@@ -97,16 +131,24 @@ 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. */
@@ -170,7 +212,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}\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}";
+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`).
@@ -203,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.
@@ -215,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.js

@@ -4,6 +4,7 @@
 // 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";
@@ -63,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) {
@@ -82,7 +83,7 @@ export function districtMember(input, language = "en") {
     if (id === "kodokan") {
         if (named !== undefined)
             throw new Error(`kodokan has one configuration, not ${named}`);
-        return kodokanMember(language);
+        return kodokanMember(language, floor);
     }
     throw new Error(`no venue ${String(id)}: the venues are ${DISTRICT_IDS.join(", ")}`);
 }
@@ -116,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))
@@ -138,7 +139,9 @@ 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]));
@@ -161,9 +164,9 @@ export function planDistrict(options) {
 // ---- 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);--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}
+: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}
@@ -176,10 +179,16 @@ export const KYOGIJO_DISTRICT_STYLE = `
 .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([^>]*)>/;
@@ -214,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];
@@ -226,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, ...(options.context === undefined || options.context.length === 0 ? [] : [options.context.map((a) => a.key)]), ...(options.building === undefined ? [] : [options.building])]))}`);
+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";
@@ -248,14 +262,16 @@ export function describeDistrict(options, plan = planDistrict(options)) {
 }
 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}`}`,
     });
 }
 /**
@@ -302,21 +318,23 @@ export function drawDistrict(options, plan = planDistrict(options), drawing) {
             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"/>`);
+            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);
-        // 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>`);
+        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.