@johnmorrisdotca/kyogijo-stadiums 0.40.2 → 0.43.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,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));

package/dist/district.turn.js

@@ -2,8 +2,9 @@
 // (`buildTurn`: the stands, the walls and the roof, the goals and posts of its field), its planes are turned about the middle of its surface and moved to where the plan puts it, and the floor is the district's flat
 // plan drawn with each venue's building only. The model it makes is a `TurnModel`, so the camera, the controls, the pointer, the auto-turn and the steady fit of every other 3D view are this one's; its
 // buildings are stacked building by building (`Plane.group`), the far one first, so that a roof never shows through a nearer building.
-import { describeDistrict, districtId, drawDistrict, drawMember, planDistrict, surfaceCentre } from "./district.js";
-import { n, plane } from "./turn.kit.js";
+import { describeDistrict, districtId, drawDistrict, drawMember, nestedDrawing, planDistrict, surfaceCentre } from "./district.js";
+import { blockPlanes, contextUprights, shellBlock } from "./context.js";
+import { APART, n, plane } from "./turn.kit.js";
 import { TURN_PRESETS, wrap } from "./turn.camera.js";
 import { mountTurn } from "./turn.dom.js";
 import { turnMarkupOf } from "./turn.markup.js";
@@ -11,6 +12,7 @@ import { buildTurn, lightingOf, openingView, sceneBox, WORLD_PX } from "./turn.m
 import { planesOf } from "./uprights.js";
 import { FEET_PER_METRE } from "./geometry.js";
 import { hullOf } from "./venues.geo.js";
+import { hasOutside, outsideCrowd, outsideLevelOf } from "./outside.js";
 /** The four viewpoints of a district, turned with the map: the main camera looks from the south over the district (north at the top of the page), the end-on view from the west and the low corner from the south-west. */
 export function districtPresets(plan) {
     const turn = plan.turn;
@@ -27,7 +29,7 @@ const rot = ([x, y], degrees) => {
     return [x * Math.cos(a) - y * Math.sin(a), x * Math.sin(a) + y * Math.cos(a)];
 };
 /** A plane of a venue's own frame (its surface's middle at `centre`) put in the district's: turned by the venue's angle about that middle and moved to where the plan puts it. */
-function placeInDistrict(p, placed, centre, prefix, group) {
+function placeInDistrict(p, placed, centre, prefix, group, lift = 0) {
     const at = (x, y) => {
         const [rx, ry] = rot([x - centre[0], y - centre[1]], placed.angle);
         return [rx + placed.at[0], ry + placed.at[1]];
@@ -36,7 +38,7 @@ function placeInDistrict(p, placed, centre, prefix, group) {
     const [ox, oy] = at(p.o[0], p.o[1]);
     const [ux, uy] = dir(p.u[0], p.u[1]);
     const [vx, vy] = dir(p.v[0], p.v[1]);
-    const moved = { ...p, id: `${prefix}${p.id}`, o: [ox, oy, p.o[2]], u: [ux, uy, p.u[2]], v: [vx, vy, p.v[2]], group };
+    const moved = { ...p, id: `${prefix}${p.id}`, o: [ox, oy, p.o[2] + lift], u: [ux, uy, p.u[2]], v: [vx, vy, p.v[2]], group };
     if (p.shy !== undefined)
         moved.shy = dir(p.shy[0], p.shy[1]);
     if (p.crop === true) {
@@ -77,19 +79,39 @@ export function buildDistrictTurn(options, settings = {}) {
         const model = buildTurn({ ...member.options, language, ...(options.theme === undefined ? {} : { theme: options.theme }), id: `${base}-m${i}` }, { ...settings, id: memberId, venue: { roof: true, ...(typeof settings.venue === "object" ? settings.venue : {}) }, preset: undefined, view: undefined });
         const centre = surfaceCentre(member.options);
         const prefix = `m${i}-`;
+        // A venue on an upper floor (the Kodokan's main dojo) stands that high over the ground, on a floor drawn in the air; the ground under it is left bare.
+        const lift = placed.member.elevation ?? 0;
         for (const item of model.uprights.items) {
-            const planes = item.planes.filter((p) => p.kind !== "ground").map((p) => placeInDistrict(p, placed, centre, prefix, i));
+            const planes = item.planes.filter((p) => p.kind !== "ground").map((p) => placeInDistrict(p, placed, centre, prefix, i, lift));
             if (planes.length > 0) {
                 const [ax, ay] = item.at;
                 const [rx, ry] = rot([ax - centre[0], ay - centre[1]], placed.angle);
-                items.push({ ...item, id: `${prefix}${item.id}`, at: [rx + placed.at[0], ry + placed.at[1]], planes });
+                items.push({ ...item, id: `${prefix}${item.id}`, at: [rx + placed.at[0], ry + placed.at[1]], height: item.height + lift, planes });
             }
         }
+        if (lift > 0) {
+            const { markup, box, styles } = nestedDrawing(drawMember(member, { ...options, id: base }, i, base, { floor: true }));
+            for (const block of styles)
+                if (!defs.includes(block))
+                    defs.push(block);
+            const floor = plane("floor", "floor", [box.x, box.y, 0], [box.w, 0, 0], [0, box.h, 0], `<g transform="translate(${n(-box.x)} ${n(-box.y)})">${markup}</g>`);
+            items.push({ id: `${prefix}floor`, kind: "deck", at: placed.at, height: lift, planes: [placeInDistrict(floor, placed, centre, prefix, i, lift)] });
+        }
+        // The building it stands in: see-through (its walls give way to the eye) or solid, in the venue's group so that it is stacked with it.
+        if (member.shell !== undefined && options.building !== "none") {
+            const block = shellBlock(member.key, placed.footprint, member.shell.height, options.building === "solid" ? undefined : placed.at);
+            const planes = blockPlanes(block, `${prefix}shell-`).map((p) => ({ ...p, group: i }));
+            items.push({ id: `${prefix}shell`, kind: "blocks", at: placed.at, height: member.shell.height, planes });
+        }
         if (model.defs !== "")
             defs.push(model.defs);
         if (crowdStyle === "" && model.crowdStyle !== "")
             crowdStyle = model.crowdStyle;
     });
+    // The buildings round the venues stand apart from them: each block's planes are of no venue's group.
+    if (plan.context !== undefined)
+        for (const item of contextUprights(plan.context))
+            items.push({ ...item, planes: item.planes.map((p) => ({ ...p, group: APART })) });
     if (labels) {
         const size = Math.max(plan.view.w, plan.view.h) * (plan.mode === "city" ? 0.016 : 0.022);
         plan.members.forEach((placed, i) => {
@@ -136,6 +158,8 @@ export function buildDistrictTurn(options, settings = {}) {
         lens: 12,
         flat: drawDistrict(options, plan),
         groups: plan.members.map((p) => ({ hull: hullOf(p.footprint) })),
+        // The crowd outside, when the district asks for one and has a mask to put it on: the mount paints it on a canvas on the floor.
+        ...(options.outside !== undefined && hasOutside(plan) ? { outside: { level: outsideLevelOf(options), crowd: () => outsideCrowd(plan), viewBox: { x: view.x, y: view.y, w: view.w, h: view.h } } } : {}),
     };
 }
 /**

package/dist/gates.d.ts

@@ -0,0 +1,56 @@
+import { type LonLat } from "./venues.geo.ts";
+/** How a gate is known: `documented` is what a source cited with it says; `plausible` is ours. */
+export type GateBasis = "documented" | "plausible";
+/** What is said of a venue's gate: the way it faces, and what is read from where. */
+export interface GateFact {
+    /** A key that is the same on every run: `south`, `south-west-corner`. */
+    id: string;
+    /** The bearing of the gate's outward normal, degrees clockwise from north, 0 to under 360. */
+    bearing: number;
+    /** The name where a source gives one (`Gate G`); a plain description of where it is otherwise. */
+    name?: {
+        en: string;
+        ja: string;
+    };
+    basis: GateBasis;
+    read: string;
+}
+/** A gate, placed on a venue's outline. */
+export interface Gate {
+    /** `bc-place:south`: the venue's id and the gate's. */
+    key: string;
+    venue: string;
+    id: string;
+    name: {
+        en: string;
+        ja: string;
+    };
+    /** Where it stands on the outline, `[longitude, latitude]`. */
+    at: LonLat;
+    /** The bearing of its outward normal, degrees clockwise from north: the way a queue at it runs. */
+    bearing: number;
+    basis: GateBasis;
+    read: string;
+}
+/**
+ * The facts of each venue's gates. BC Place: the English Wikipedia article (revision 1372065649) says a tear in the old roof was "close to Gate G on the south side where the roof meets the top of the concrete bowl", so there is a
+ * Gate G on the south side (documented); the other seven are ours, one to each side of the building, on the street sides the brief names (Pacific Boulevard to the south, Robson and Beatty Streets). Rogers Arena: the brief's corner
+ * entrance plazas on the Pat Quinn Way side, the south front and the two south corners, and one at the north-west, all ours.
+ */
+export declare const GATE_FACTS: Readonly<Record<string, readonly GateFact[]>>;
+/** The ids of the venues that have gates. */
+export declare const GATE_VENUES: readonly string[];
+/** The name of a gate in a language: the source's where there is one, else its side (`South-west gate`). */
+export declare function gateName(fact: GateFact, language: "en" | "ja"): string;
+/**
+ * The gates of a venue (`bc-place`, `rogers-arena`), each on the building's outline where a ray from the middle of the surface at its bearing meets it; empty for a venue with none. A gate whose ray misses the outline is left out
+ * (none does for the venues here: a test holds it).
+ * @example
+ * ```ts
+ * import { venueGates } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const gates = venueGates("bc-place");
+ * console.log(gates.length, gates.filter((g) => g.basis === "documented").map((g) => g.name.en).join(", "));
+ * // 8 Gate G
+ * ```
+ */
+export declare function venueGates(id: string): Gate[];

package/dist/gates.js

@@ -0,0 +1,95 @@
+// The gates of a real venue: where the crowd goes in. A gate is a point on the building's outline (OpenStreetMap's, ODbL 1.0) with the way it faces (the bearing of its outward normal, degrees clockwise from north), a name in English
+// and Japanese, and how it is known: `documented` where a source cited with it says it, `plausible` where it is ours (a gate on each street side, put where a ray from the middle of the surface at the bearing meets the outline).
+// The data is the gates' list of facts (`GATE_FACTS`, with what each cites); the positions are worked out from the outline, so a venue whose outline changes keeps its gates on it. This is the data the crowd's timelapse will use
+// for queues and entrances: where people stand in a line, which way the line runs (away from the gate along its bearing) and where the walkable ground starts. Pure: ids in, gates out.
+import { stadiumById } from "./stadiums.js";
+import { venueById } from "./venues.js";
+import { lonLatFrom, metresFrom } from "./venues.geo.js";
+const WIND = [
+    { en: "north", ja: "北" },
+    { en: "north-east", ja: "北東" },
+    { en: "east", ja: "東" },
+    { en: "south-east", ja: "南東" },
+    { en: "south", ja: "南" },
+    { en: "south-west", ja: "南西" },
+    { en: "west", ja: "西" },
+    { en: "north-west", ja: "北西" },
+];
+const ours = (reason) => `ours: ${reason}`;
+/** A gate on each of the eight sides of a building: ours, the sources say that a stadium has gates and not where each is. */
+const SIDES = (venue) => WIND.map((_, i) => ({ id: WIND[i].en, bearing: i * 45, basis: "plausible", read: ours(`one gate on each of the eight sides of ${venue}'s building: the sources say that it has gates round the bowl and not where each is`) }));
+/**
+ * The facts of each venue's gates. BC Place: the English Wikipedia article (revision 1372065649) says a tear in the old roof was "close to Gate G on the south side where the roof meets the top of the concrete bowl", so there is a
+ * Gate G on the south side (documented); the other seven are ours, one to each side of the building, on the street sides the brief names (Pacific Boulevard to the south, Robson and Beatty Streets). Rogers Arena: the brief's corner
+ * entrance plazas on the Pat Quinn Way side, the south front and the two south corners, and one at the north-west, all ours.
+ */
+export const GATE_FACTS = Object.freeze({
+    "bc-place": SIDES("BC Place").map((g) => (g.id === "south" ? { ...g, name: { en: "Gate G", ja: "ゲートG" }, basis: "documented", read: "the English Wikipedia article on BC Place, revision 1372065649: a tear in the old roof 'close to Gate G on the south side'; where on the south side is ours" } : g)),
+    "rogers-arena": [
+        { id: "south", bearing: 180, basis: "plausible", read: ours("the main front of the building faces Pat Quinn Way to the south, as the brief says") },
+        { id: "south-west", bearing: 225, basis: "plausible", read: ours("a corner entrance plaza on the Pat Quinn Way side, as the brief says") },
+        { id: "south-east", bearing: 135, basis: "plausible", read: ours("a corner entrance plaza on the Pat Quinn Way side, as the brief says") },
+        { id: "north-west", bearing: 315, basis: "plausible", read: ours("a gate on the side of the Georgia Viaduct and the towers, one of those the brief asks for at the corners") },
+    ],
+});
+/** The ids of the venues that have gates. */
+export const GATE_VENUES = Object.freeze(Object.keys(GATE_FACTS));
+/** The point where a ray from the origin at a compass bearing first meets a ring (both in metres east and north of the origin), or `undefined`. */
+function hit(ring, bearing) {
+    const a = (bearing * Math.PI) / 180;
+    const [dx, dy] = [Math.sin(a), Math.cos(a)];
+    let best;
+    ring.forEach(([ax, ay], i) => {
+        const [bx, by] = ring[(i + 1) % ring.length];
+        const [ex, ey] = [bx - ax, by - ay];
+        const den = dx * ey - dy * ex;
+        if (Math.abs(den) < 1e-12)
+            return;
+        const t = (ax * ey - ay * ex) / den;
+        const u = (ax * dy - ay * dx) / den;
+        if (t > 1e-6 && u >= 0 && u <= 1 && (best === undefined || t < best))
+            best = t;
+    });
+    return best === undefined ? undefined : [dx * best, dy * best];
+}
+/** The outline and the middle of a venue's surface that its gates are placed from, `[longitude, latitude]`: an arena's, or a stadium's. */
+function outlineOf(id) {
+    const venue = venueById(id);
+    if (venue !== undefined)
+        return { ring: venue.osm.ring, centre: venue.osm.axis.centre };
+    const stadium = stadiumById(id);
+    return stadium === undefined ? undefined : { ring: stadium.osm.ring, centre: stadium.osm.axis.centre };
+}
+/** The name of a gate in a language: the source's where there is one, else its side (`South-west gate`). */
+export function gateName(fact, language) {
+    if (fact.name !== undefined)
+        return fact.name[language];
+    const side = WIND.find((w) => w.en === fact.id.replace(/-corner$/, ""));
+    return language === "ja" ? `${side?.ja ?? fact.id}ゲート` : `${(side?.en ?? fact.id).replace(/^./, (c) => c.toUpperCase())} gate`;
+}
+/**
+ * The gates of a venue (`bc-place`, `rogers-arena`), each on the building's outline where a ray from the middle of the surface at its bearing meets it; empty for a venue with none. A gate whose ray misses the outline is left out
+ * (none does for the venues here: a test holds it).
+ * @example
+ * ```ts
+ * import { venueGates } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const gates = venueGates("bc-place");
+ * console.log(gates.length, gates.filter((g) => g.basis === "documented").map((g) => g.name.en).join(", "));
+ * // 8 Gate G
+ * ```
+ */
+export function venueGates(id) {
+    const facts = GATE_FACTS[id];
+    const outline = outlineOf(id);
+    if (facts === undefined || outline === undefined)
+        return [];
+    const ring = metresFrom(outline.centre, outline.ring);
+    const gates = [];
+    for (const fact of facts) {
+        const p = hit(ring, fact.bearing);
+        if (p === undefined)
+            continue;
+        gates.push({ key: `${id}:${fact.id}`, venue: id, id: fact.id, name: { en: gateName(fact, "en"), ja: gateName(fact, "ja") }, at: lonLatFrom(outline.centre, p).map((x) => Math.round(x * 1e6) / 1e6), bearing: fact.bearing, basis: fact.basis, read: fact.read });
+    }
+    return gates;
+}

package/dist/halls.d.ts

@@ -61,5 +61,7 @@ export interface Hall {
         ja: string;
     };
 }
+/** The Kodokan's main dojo as drawn: a square floor of 420 jō's area, four contest areas, the seat of honour, the banner, the wood and the gallery, in the two looks the owner's photographs show. The years of both are unknown. */
+export declare const KODOKAN_MAIN: DojoSpec;
 /** The halls, in the order of their surfaces' fame: the Kodokan, the Budokan, the Kokugikan, the Butokuden and the Budokwai. */
 export declare const HALLS: readonly Hall[];