@johnmorrisdotca/kyogijo-stadiums 0.40.1 → 0.40.2

package/CHANGELOG.md

@@ -7,6 +7,13 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.40.2] - 2026-10-21
+
+### Fixed
+
+- **BC Place and Lumen Field still differed between football and soccer, by a few pixels**: 0.40.1 made the frame the building's, but the view's origin still moved with the field, so the picture shifted and its margin changed, and the crowd's tiles started at the field's corner, so the people were a different pattern in each. A stadium of more than one configuration is now laid out in **the venue's own frame**, the middle of its field at the origin: the `viewBox` is the same text for every configuration, the building, the bowl and the crowd are the same numbers and the same tiles (`crowdStands(...).shift` is where the field's middle is in the surface's own frame, and the surface group is shifted by it), and the 3D view's floor, stands and what stands on the field are in the same frame (`uprightsFor` moves the field's things into it). Rendered at one size in a browser, the two configurations differ in no pixel outside the field's surround and the closed seats, in 2D and from overhead in 3D (`e2e/venue.demo.mjs`, Lumen Field too, light and dark, in Chromium and WebKit on macOS and Linux). In the dark the crowd's dimming (`opacity` on `.ky-crowd`) is kept on a layer of its own for a stadium of more than one configuration (`will-change: opacity`): without it Chromium on Linux rounded the dimmed crowd a level or two differently depending on what was drawn over it.
+- **The seats a configuration does not open are closed in the same place every time**: BC Place's soccer pitch opens 52,497 of the bowl's 54,500 and Lumen Field's 37,722 of 68,740. A whole bowl that does not open is drawn as empty seats under a pale veil (`ring.closed`), and the seats left over are a block of the next bowl at the middle of the left side, as wide as comes nearest (`bowl.closedSectors`, a `closed` sector in the stands, painted in 2D and on the raked planes in 3D). It replaces the thinner crowd that the upper bowl had in 0.40.1; no random number is used.
+
 ## [0.40.1] - 2026-10-21
 
 ### Fixed

package/dist/crowd.d.ts

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

package/dist/crowd.draw.d.ts

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

package/dist/crowd.draw.js

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

package/dist/crowd.js

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

package/dist/draw.js

@@ -457,8 +457,13 @@ function standsFor(o, surface, crowd) {
         return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: venueBowl(venue, box) });
     // A football field or a soccer pitch in a real stadium: its building and a bowl of the configuration's seats.
     const real = realStadiumOf(o, sport, crowd.real);
-    if (real !== undefined)
-        return crowdLayout({ sport, box, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: stadiumBowl(real.stadium, real.config, box) });
+    if (real !== undefined) {
+        const stands = (at) => crowdLayout({ sport, box: at, crowd: crowd.awayEnd === "auto" ? { ...crowd, awayEnd: "none" } : crowd, awaySide, real: stadiumBowl(real.stadium, real.config, at) });
+        if (!venueFrame(o, crowd, surface))
+            return stands(box);
+        // In the venue's frame the middle of the field is the origin, so the same building, bowl and crowd are laid out whichever field is in it.
+        return { ...stands({ x: -box.w / 2, y: -box.h / 2, w: box.w, h: box.h }), shift: [box.x + box.w / 2, box.y + box.h / 2] };
+    }
     // A dojo's crowd sits in its gallery, from the room's balcony data (in feet here); the arenas (the Budokan, the Kokugikan) keep their bowls.
     const hall = sport === "dojo" ? dojoGallery(o) : undefined;
     const gallery = hall === undefined ? undefined : { offset: hall.offset / 0.3048, depth: hall.depth / 0.3048, height: [hall.height[0] / 0.3048, hall.height[1] / 0.3048], rows: hall.rows, aisles: hall.aisles };
@@ -476,6 +481,13 @@ function stadiumHasConfigs(o, crowd) {
     const real = realStadiumOf(o, chooseLeague(o).sport, crowd.real);
     return real !== undefined && stadiumKind(real.stadium) === "stadium" && stadiumConfigs(real.stadium).length > 1;
 }
+/**
+ * Whether a stadium of more than one configuration is laid out in the venue's own frame: its field is placed in it, and the building, the bowl, the crowd and the view are the same numbers whichever field it is. Not for a portrait drawing,
+ * a cropped one, or one that asks for annotations, a situation, a pageant or the pointer, which are worked out in the surface's own frame.
+ */
+function venueFrame(o, crowd, surface) {
+    return surface.turn === undefined && o.range === undefined && o.situation === undefined && o.pageant === undefined && o.pointer !== true && !annotated(o) && stadiumHasConfigs(o, crowd);
+}
 /** A surface with the stands and the crowd round it: the ground is made as wide as the stands need, then the stands are laid on it under the surface. */
 function buildCrowded(o, portrait, id, score, scored, extra, crowd) {
     let margin = extra.margin;
@@ -490,13 +502,6 @@ function buildCrowded(o, portrait, id, score, scored, extra, crowd) {
     }
     const surface = buildWhole(o, portrait, id, score, scored, { ...extra, margin });
     const stands = standsFor(o, surface, crowd);
-    // A stadium that stages more than one field is framed by its building, once, whichever field is drawn: the view is the building's with a small margin, about the middle of the field.
-    const field = stands.box;
-    if (surface.turn === undefined && o.range === undefined && stadiumHasConfigs(o, crowd)) {
-        const [cx, cy] = [field.x + field.w / 2, field.y + field.h / 2];
-        const [left, right, top, bottom] = [field.w / 2 + stands.reach.left, field.w / 2 + stands.reach.right, field.h / 2 + stands.reach.top, field.h / 2 + stands.reach.bottom].map((d) => d + VENUE_PAD);
-        surface.view = { x: cx - left, y: cy - top, w: left + right, h: top + bottom };
-    }
     const seats = stands.seats;
     const ground = groundById(o.ground)?.capacity;
     const fine = crowd.detail === "fine" || (crowd.detail === "auto" && !smallDrawing(o));
@@ -505,6 +510,22 @@ function buildCrowded(o, portrait, id, score, scored, extra, crowd) {
     // A gallery is empty unless the options say how full: its seats are the detail.
     const taken = stands.gallery === true && crowd.density === undefined && crowd.attendance === undefined ? 0 : densityOf(crowd, seats, ground);
     const drawn = drawCrowd(stands, { id, crowd, density: taken, fine, ground: bg, team: teamColors(o) });
+    if (stands.shift !== undefined) {
+        // A stadium of more than one configuration: the ground, the building, the stands and the crowd are laid in the venue's own frame (the middle of the field at the origin), under a surface that is shifted to lie in it, and the view is the
+        // building's with a little ground round it: the same frame, the same numbers, the same crowd whichever field is drawn. What stands over the field comes back to the surface's frame.
+        const [sx, sy] = stands.shift;
+        const { reach, box } = stands;
+        const [left, right, top, bottom] = [box.w / 2 + reach.left, box.w / 2 + reach.right, box.h / 2 + reach.top, box.h / 2 + reach.bottom].map((d) => Math.round((d + VENUE_PAD) * 100) / 100);
+        const view = { x: -left, y: -top, w: left + right, h: top + bottom };
+        const apron = first.replace(/\sx="[^"]*"/, ` x="${view.x - 1}"`).replace(/\sy="[^"]*"/, ` y="${view.y - 1}"`).replace(/\swidth="[^"]*"/, ` width="${view.w + 2}"`).replace(/\sheight="[^"]*"/, ` height="${view.h + 2}"`);
+        surface.venue = { shift: [sx, sy], under: apron + drawn.markup };
+        surface.base = surface.base.slice(first.length);
+        surface.view = view;
+        surface.defs += drawn.defs;
+        surface.lines += drawn.over === "" ? "" : el("g", { transform: `translate(${sx.toFixed(4)} ${sy.toFixed(4)})` }, drawn.over);
+        surface.crowdMargin = margin;
+        return surface;
+    }
     surface.base = first + drawn.markup + surface.base.slice(first.length);
     surface.defs += drawn.defs;
     surface.lines += drawn.over;
@@ -1011,8 +1032,10 @@ function drawnKyogijo(o) {
         if (lines !== undefined)
             surface.lines = restyleLines(surface.lines, lines);
         // A ground (a pattern, a colour or a photograph) is laid on the apron, under the surface.
-        const ground = laidOn(surface.base, o.background, id);
-        grounded = ground.base !== surface.base;
+        // A stadium laid out in the venue's frame has its ground, building and stands under the surface, which is shifted to lie in it.
+        const venue = surface.venue;
+        const ground = laidOn(venue === undefined ? surface.base : venue.under, o.background, id);
+        grounded = ground.base !== (venue === undefined ? surface.base : venue.under);
         defs = surface.defs + ground.defs;
         // The situation: a tint under the lines, and the rest over them and the data (cut with the surface when it is cropped).
         const sit = situation === undefined
@@ -1026,7 +1049,7 @@ function drawnKyogijo(o) {
                 strip: stripped && sized === "compact",
             });
         const cutSit = (markup) => (markup !== "" && surface.defs.includes(`id="${id}-rg"`) ? el("g", { "clip-path": `url(#${id}-rg)` }, markup) : markup);
-        let inner = ground.base + (sit === undefined ? "" : cutSit(sit.under));
+        let inner = (venue === undefined ? ground.base : surface.base) + (sit === undefined ? "" : cutSit(sit.under));
         if (sit !== undefined)
             defs += sit.defs;
         let teams = "";
@@ -1110,7 +1133,8 @@ function drawnKyogijo(o) {
             else
                 inner += plateMarkup(surface.plate, left, right, { competition: o.competition, foot: foot === "" ? undefined : foot }, { turned: surface.turned, parts, surfaceSport: sport });
         }
-        const group = el("g", { class: "ky-surface-group", transform: surface.turn, part: parts ? "surface" : undefined, ...(o.pointer === true ? fieldAttributes({ ...o, sport }) : {}) }, inner);
+        const field = el("g", { class: "ky-surface-group", transform: venue === undefined ? surface.turn : `translate(${(-venue.shift[0]).toFixed(4)} ${(-venue.shift[1]).toFixed(4)})`, part: parts ? "surface" : undefined, ...(o.pointer === true ? fieldAttributes({ ...o, sport }) : {}) }, inner);
+        const group = venue === undefined ? field : ground.base + field;
         const v = surface.view;
         if (isScore(o) && left !== undefined && right !== undefined && sized === "compact") {
             const badge = badgeMarkup(left, right, { sport, status, parts, id, situation: situation === undefined ? undefined : badgeSituation(situation, language) });

package/dist/stadiums.d.ts

@@ -183,7 +183,7 @@ export declare const stadiumConfigOf: (sport: string | undefined) => StadiumConf
 export declare const stadiumSeats: (stadium: RealStadium, config: StadiumConfigId) => number;
 /**
  * The stylesheet of a stadium that stages more than one field (`data-stadium` on the drawing's root): the ground round the building is its own, the football field's, whichever field lies in it, so that a soccer pitch does not tint it
- * green. Light only: the dark ground is one for every sport.
+ * green (light only: the dark ground is one for every sport), and the crowd's dimming in the dark kept on a layer of its own.
  */
 export declare const KYOGIJO_STADIUM_STYLE: string;
 /** How far a hall's first row is from the box of the ring, on every side, in feet (ours: the seats at the ringside are a few feet from the ropes). */

package/dist/stadiums.js

@@ -3,7 +3,7 @@
 // field and not a rink: level one is the building, level two a plausible bowl, and it stops there (no team's, ticket seller's or federation's seat map is read or copied, no section or row is named, and no mark of a club, a
 // league or a tournament is drawn). The drawing is `drawKyogijo({ sport: "cfl", stadium, crowd: { real: true } })` (or `sport: "soccer"` with a `ground` or a `stadium`, `sport: "mlb"` with a `park`) and, in 3D, the same options
 // in `buildTurn`.
-import { NORTH_ROOM, aislesOf, areaOfOutline, outlinePoints } from "./crowd.js";
+import { NORTH_ROOM, aisleParameters, aislesOf, areaOfOutline, outlinePoints, sectorPolygon } from "./crowd.js";
 import { parkLayout } from "./crowd.park.js";
 import { FEET_PER_METRE, FOOTBALL } from "./geometry.js";
 import { groundById } from "./grounds.js";
@@ -61,9 +61,12 @@ export const stadiumConfigOf = (sport) => (sport === "cfl" || sport === "nfl" ||
 export const stadiumSeats = (stadium, config) => stadium.configs[config]?.seats ?? 0;
 /**
  * The stylesheet of a stadium that stages more than one field (`data-stadium` on the drawing's root): the ground round the building is its own, the football field's, whichever field lies in it, so that a soccer pitch does not tint it
- * green. Light only: the dark ground is one for every sport.
+ * green (light only: the dark ground is one for every sport), and the crowd's dimming in the dark kept on a layer of its own.
  */
-export const KYOGIJO_STADIUM_STYLE = "@media (prefers-color-scheme:light){:where(html:not([data-theme=dark]) .kyogijo[data-sport=soccer][data-stadium]:not([data-theme=dark])){--ky-apron:#dcd8c9}}\n" +
+export const KYOGIJO_STADIUM_STYLE = 
+// The crowd dims in the dark as a group (`opacity`): on a layer of its own it is drawn the same whatever is drawn over it (the field), so that two configurations of a stadium are the same crowd to the last level of a pixel.
+".kyogijo[data-stadium] .ky-crowd{will-change:opacity}\n" +
+    "@media (prefers-color-scheme:light){:where(html:not([data-theme=dark]) .kyogijo[data-sport=soccer][data-stadium]:not([data-theme=dark])){--ky-apron:#dcd8c9}}\n" +
     ":where(html[data-theme=light] .kyogijo[data-sport=soccer][data-stadium],.kyogijo[data-theme=light][data-sport=soccer][data-stadium]){--ky-apron:#dcd8c9}";
 // ---- The bowl. ----
 /** How far the first row is from a football field's footprint (the league's field and its end zones) along a side and at an end, and the corner's radius: the package's own gridiron profile (`crowd.ts`), so that a real stadium's first row is the usual one. */
@@ -100,6 +103,42 @@ function solveFor(f, lo, hi, target) {
     }
     return (a + b) / 2;
 }
+/**
+ * The bowl with `closedSeats` of its seats closed, the ones a configuration does not open: whole bands from the last (outermost) inward, marked `closed` and drawn as empty seats, and where the seats left to close are part of a band, a block of
+ * that band at the middle of its left side (an end of the field, where the long axis ends), as many seats as comes nearest, drawn as empty seats over it. The same place every time: no random number. `area` is
+ * the floor a seat takes in the plan.
+ */
+function shut(rings, closedSeats, area) {
+    const out = rings.map((ring) => ({ ...ring }));
+    const sectors = [];
+    let left = closedSeats;
+    for (let k = out.length - 1; k >= 0 && left > 0; k -= 1) {
+        const ring = out[k];
+        if (left >= ring.seats - 2) {
+            ring.fill = 0;
+            ring.closed = true;
+            left -= ring.seats;
+            continue;
+        }
+        if (ring.region.kind === "rrect" && ring.hole?.kind === "rrect") {
+            const [region, hole] = [ring.region, ring.hole];
+            // A block centred on the middle of the left side (6.5), widened by a tenth of a side's length (about 30 feet) at a time, as wide as comes nearest to the seats to close.
+            const step = 1 / Math.max(aisleParameters(hole).nv, 2);
+            const seatsOf = (w) => Math.round(areaOfOutline({ kind: "poly", points: sectorPolygon(region, hole, 6.5 - w / 2, 6.5 + w / 2) }) / area);
+            let width = step;
+            let made = seatsOf(width);
+            for (let i = 0; made < left && width + step < 8; i += 1) {
+                const next = seatsOf(width + step);
+                if (Math.abs(next - left) > Math.abs(made - left))
+                    break;
+                [width, made] = [width + step, next];
+            }
+            sectors.push({ ring: ring.id, kind: "closed", points: sectorPolygon(region, hole, 6.5 - width / 2, 6.5 + width / 2) });
+        }
+        left = 0;
+    }
+    return { rings: out, sectors };
+}
 /** Plans already made, by stadium, configuration and field: a plan is a pure function of them, and a drawing asks for it more than once. */
 const PLANS = new WeakMap();
 /**
@@ -244,14 +283,8 @@ function plan(stadium, config, rink) {
         }
     }
     const total = rings.reduce((sum, ring) => sum + ring.seats, 0);
-    // A configuration that opens fewer seats than the bowl holds opens them from the lowest bowl up: a bowl's people are its open share of them, and a closed one is empty.
-    if (open < seatsTotal) {
-        let before = 0;
-        for (const ring of rings) {
-            ring.fill = round(ring.fill * Math.min(1, Math.max(0, (open - before) / Math.max(1, ring.seats))), 3);
-            before += ring.seats;
-        }
-    }
+    // A configuration that opens fewer seats than the bowl holds opens them from the lowest bowl up: the seats it does not open are the top tier's, closed, drawn empty and in the same place every time.
+    const closing = open < seatsTotal ? shut(rings, seatsTotal - open, seatArea) : { rings, sectors: [] };
     const top = rings[rings.length - 1].height[1];
     const roof = stadium.osm.roof;
     const rise = roof?.rise === undefined ? 0 : round(roof.rise * FEET_PER_METRE);
@@ -263,7 +296,8 @@ function plan(stadium, config, rink) {
     const north = orientation.basis === "none" ? undefined : orientation.north;
     const room = north === undefined ? 0 : NORTH_ROOM;
     const bowl = {
-        rings,
+        rings: closing.rings,
+        ...(closing.sectors.length === 0 ? {} : { closedSectors: closing.sectors }),
         off: { left: rink.x - first.x0, right: first.x1 - rink.x - rink.w, top: rink.y - first.y0, bottom: first.y1 - rink.y - rink.h },
         reach: { left: Math.max(0, -rink.w / 2 - around.x0), right: Math.max(0, around.x1 - rink.w / 2), top: Math.max(0, -rink.h / 2 - around.y0) + room, bottom: Math.max(0, around.y1 - rink.h / 2) },
         shell: {

package/dist/surfaces/surface.d.ts

@@ -155,6 +155,11 @@ export interface Surface {
     };
     /** For a surface with a crowd: the margin it was drawn with, which holds the stands. */
     crowdMargin?: number;
+    /** A real stadium of more than one configuration laid out in the venue's own frame: where the middle of its field is in the surface's frame (the surface is shifted to lie there), and the ground, building, stands and crowd under it, in the venue's frame. */
+    venue?: {
+        shift: [number, number];
+        under: string;
+    };
     /** Where the parts a situation is drawn against are: a rink's lines and nets, a diamond's bases, a gridiron's goal lines. */
     anchors?: SituationAnchors;
 }

package/dist/turn.style.js

@@ -120,6 +120,7 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .ky-cr-ta{fill:var(--ky-cr-away)}
 .ky-turn .ky-cr-tw{fill:#f2f0ea}
 .ky-turn .ky-cr-aisle{fill:none;stroke:var(--ky-cr-gap);stroke-opacity:.8}
+.ky-turn .ky-cr-shut-veil{fill:var(--ky-cr-empty);fill-opacity:.42}
 .ky-turn .ky-cr-row{fill:none;stroke:var(--ky-cr-gap);stroke-opacity:.5;stroke-width:.5}
 .ky-turn .ky-bud-gseat{stroke:var(--ky-up-rail);stroke-opacity:.3}
 .ky-turn .u-door{fill:var(--ky-up-door)}

package/dist/uprights.js

@@ -3,7 +3,7 @@
 // stylesheet. `describeUprights` says the same in words, for a reader who cannot see it.
 import { courtFor, courtGeometry, isNetSport } from "./court.js";
 import { drawingId, feetFence, lengthUnit } from "./common.js";
-import { drawKyogijo, pitchOf } from "./draw.js";
+import { crowdStands, drawKyogijo, pitchOf } from "./draw.js";
 import { rulesFor, footballIn } from "./eras.js";
 import { fieldPlan, isFieldSport } from "./fields.js";
 import { footballLength } from "./geometry.js";
@@ -126,6 +126,14 @@ export function uprightsFor(o, settings = {}) {
         thin = thinnest(sheet.length, sheet.width);
         area = { x0: 0, y0: 0, x1: sheet.length, y1: sheet.width };
     }
+    // A real stadium of more than one configuration is drawn in the venue's own frame (the middle of its field at the origin): what stands on the field is moved there with it, and the stands are already in it.
+    const shift = crowdStands(o)?.shift;
+    if (shift !== undefined) {
+        const [dx, dy] = shift;
+        items = items.map((item) => ({ ...item, at: [item.at[0] - dx, item.at[1] - dy], planes: item.planes.map((p) => ({ ...p, o: [p.o[0] - dx, p.o[1] - dy, p.o[2]] })) }));
+        if (area !== undefined)
+            area = { x0: area.x0 - dx, y0: area.y0 - dy, x1: area.x1 - dx, y1: area.y1 - dy };
+    }
     // The venue: the stands and the room, raised. A dojo's own walls are the room's, with their doors and windows.
     let defs = "";
     let reach = 0;

package/dist/venue.js

@@ -50,7 +50,7 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     const density = densityOf(crowd, stands.seats, groundById(o.ground)?.capacity);
     const tifo = { home: stands.sectors.some((s) => s.kind === "tifo-home"), away: stands.sectors.some((s) => s.kind === "tifo-away") };
     const pid = `${v.id}-v`;
-    const defs = fine ? patterns(pid, crowd, density, tifo.home || tifo.away ? tifo : undefined, stands.real !== undefined, true) : "";
+    const defs = fine ? patterns(pid, crowd, density, tifo.home || tifo.away ? tifo : undefined, stands.real !== undefined, true, stands.rings.some((r) => r.closed === true) || stands.sectors.some((s) => s.kind === "closed")) : "";
     const centre = [stands.box.x + stands.box.w / 2, stands.box.y + stands.box.h / 2];
     const covers = stands.covers;
     const inCover = (p) => covers.some(([x0, y0, x1, y1]) => p[0] >= x0 && p[0] <= x1 && p[1] >= y0 && p[1] <= y1);
@@ -62,7 +62,11 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     const paint = (ring, piece) => (corners, local) => {
         let svg = `<polygon class="u-bed" points="${pointList(corners)}"/>`;
         const people = ring.fill < 0.95 ? ` fill-opacity="${round(1 - Math.min(0.5, (1 - ring.fill) * 1.6))}"` : "";
-        svg += fine ? `<polygon fill="url(#${pid}-cr-h)"${people} points="${pointList(corners)}"/>` : `<polygon class="u-blk" fill-opacity="${round(0.28 + 0.6 * density * ring.fill)}" points="${pointList(corners)}"/>`;
+        // Closed seats are the same seats, every one empty.
+        if (ring.closed === true)
+            svg += fine ? `<polygon fill="url(#${pid}-cr-e)" points="${pointList(corners)}"/><polygon class="ky-cr-shut-veil" points="${pointList(corners)}"/>` : `<polygon class="u-blk" fill-opacity="0.28" points="${pointList(corners)}"/>`;
+        else
+            svg += fine ? `<polygon fill="url(#${pid}-cr-h)"${people} points="${pointList(corners)}"/>` : `<polygon class="u-blk" fill-opacity="${round(0.28 + 0.6 * density * ring.fill)}" points="${pointList(corners)}"/>`;
         for (const s of stands.sectors) {
             if (s.ring !== ring.id)
                 continue;
@@ -70,7 +74,9 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
             if (part.length < 3 || Math.abs(areaOf(part)) < 0.05)
                 continue;
             const points = pointList(part.map(local));
-            if (s.kind === "away")
+            if (s.kind === "closed")
+                svg += fine ? `<polygon class="u-bed" points="${points}"/><polygon fill="url(#${pid}-cr-e)" points="${points}"/><polygon class="ky-cr-shut-veil" points="${points}"/>` : `<polygon class="u-blk" fill-opacity="0.28" points="${points}"/>`;
+            else if (s.kind === "away")
                 svg += fine ? `<polygon fill="url(#${pid}-cr-a)" points="${points}"/>` : `<polygon class="u-blk-a" fill-opacity="${round(0.3 + 0.6 * density)}" points="${points}"/>`;
             else
                 svg += fine ? `<polygon fill="url(#${pid}-cr-${s.kind === "tifo-home" ? "th" : "ta"})" points="${points}"/>` : `<polygon class="${s.kind === "tifo-home" ? "u-th" : "u-ta"}" points="${points}"/>`;

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export declare const VERSION = "0.40.1";
+export declare const VERSION = "0.40.2";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export const VERSION = "0.40.1";
+export const VERSION = "0.40.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.40.1",
+  "version": "0.40.2",
   "description": "Kyogijo Stadiums 競技場, 40 sports' surfaces as SVG, drawn to scale from the rulebooks: NFL, CFL and IFAF football fields, an NHL rink, an NBA court, MLB ballparks, soccer pitches, curling sheets, athletics stadiums, speed skating, short track and figure skating rinks, swimming pools, water polo fields, diving wells, artistic swimming areas, and the courts and fields of tennis, volleyball (indoor, beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet, netball, lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budo of judo, karate, kendo, sumo and kyudo with a dojo of tatami laid as real units, the MMA cage, with each team's name and logo on its side and the score in the middle, stands and a crowd, a pageant of flags, and a 3D view. Light and dark, accessible, a compact badge for lists, a helper for React and a custom element. Zero dependencies.",
   "keywords": [
     "sports",