@johnmorrisdotca/kyogijo-stadiums 0.39.1 → 0.40.1

package/CHANGELOG.md

@@ -7,6 +7,25 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.40.1] - 2026-10-21
+
+### Fixed
+
+- **Switching a stadium between football and soccer reshaped the whole drawing** (BC Place, Lumen Field): the view was fitted to the field and the bowl was rebuilt from the configuration's seats, so the building's outline, the scale, the frame and the tint of the ground all changed. Now only the field changes. The view is the building's with a little ground round it, about the middle of the field (the same outline and scale for every configuration, in 2D and in 3D), the bowl is the building's and holds the most seats any configuration has (BC Place's soccer 52,497 opens from the lowest bowl up and draws the other 2,003 seats empty, as Lumen Field's does), and the ground round the building is the football field's beige whichever field lies in it (`data-stadium` on the drawing's root; the dark ground is one for every sport). `planStadium(...).total` for BC Place's soccer is now 54,500, the bowl's, with `open` the configuration's 52,497.
+- **The stadiums page's buttons were the browser's own** (the venue buttons) and its field choice differed from the family's: the venues are chips and the field a segmented choice, as on the venues and home pages, 48 pixels high, with a pressed state, in light and dark, and on a phone the chips scroll sideways. A new demo test (`e2e/controls.demo.mjs`) fails on any visible button or select of any demo page that is left in the browser's own style, in light and dark.
+
+## [0.40.0] - 2026-10-21
+
+### Added
+
+- **The named lighting presets** ([the presets](./docs/venues.md#the-lighting-presets)): `lighting: "game" | "intro" | "concert"` join `"night"` and `"lightsDown"`. `game` is white light with the house half lit (a light veil, `u-veil-half`) and a pool of white light round the surface, `intro` the house dark with the home team's colour washed over the surface and the visitors' (the second colour) in the aisle beams, `concert` the house dark with warm amber beams and a purple surface. The presets are a table of constants, `LIGHT_PRESETS` (each preset's `house`, `aisles`, `pool`, and wash and beam colours), with `LIGHTING_PRESETS` (the names) and `LIGHT_COLORS` (the named colours); `LIGHT_PRESETS`, `LIGHTING_PRESETS`, `LIGHT_COLORS` and `resolveLighting` are exported from the main entry and from `/turn` (the 0.39.0 notes named `LIGHT_COLORS` without exporting it), and `WASH` from `/turn`. The `intro`'s team colours are the package's where it has them: the crowd's `home` and `away`, else the colours of a score's two teams, else blue and amber. `lighting: { preset, colors }` passes colours (the first stands for the home team's, the second for the visitors'), and `wash` and `aisles` win over them, for any preset. `resolveLighting(option, team)` now answers `{ preset, house, aisles, pool, beam, wash }`. `TurnModel.lighting` and the view's `data-lighting` say the preset (the stylesheet has a rule for `game` and one for the three dark ones); in the plan the stands' group has `ky-half` or `ky-down`. The `celebration` (colours chasing round the bowl) is to come. Off by default, and a drawing without lighting is exactly what it was.
+- **A Lighting choice on the demo**, in place of the Night and Lights down buttons (kept in the address as `lighting=intro` and so on, with `wash=` for the colour of light over the preset's own; an old address's `night=1` and `lights=1` still work): a choice in the bar over the venues page's view and the home page's featured arena, and on the stadiums, tournament layouts and district pages. The intro is shown with sample team colours (a red and a blue that are nobody's). In 3D a change goes in while the view turns, without stopping it or sending it back.
+
+### Fixed
+
+- **A test that raced another** (`src/docs-language.test.js`): it walks the Markdown files from the root, and met the docs examples' scratch folder `.cache` while that test was removing it, so that `pnpm check` failed now and then with an error reading a file that had just gone. `.cache` is skipped.
+- **The demo's selects were 24 pixels high on a phone in WebKit** (`e2e/looks.demo.mjs`, "every control is a finger wide", failing on `webkit-phone` since 0.39.0): the bar's colour choice took the chip class, whose `display: inline-flex` WebKit does not honour on a select. The bar's selects are `display: inline-block`, 44 pixels high, no wider than 12 rem (they had taken the venue choice's 16 rem minimum).
+
 ## [0.39.1] - 2026-10-21
 
 ### Fixed

package/README.md

@@ -581,7 +581,7 @@ console.log(layout.needs.length, layout.needs.width);
 
 ### The real venues
 
-`crowd: { real: true }` draws an NHL arena in its building: the outline from OpenStreetMap, the rink lying along the building where it says so, and a plausible bowl of the seats, tiers and roof the sources give. All thirty-two arenas of the league, division by division ([the real venues](./docs/venues.md)). `boards: true` adds LED ribbon boards and a hung scoreboard, generic content ([LED boards](./docs/venues.md#led-boards)). In 3D the demo's [venues page](https://johnmorrisdotca.github.io/kyogijo-stadiums/venues.html) turns while the pointer is over it, with the stands, walls, roof, LED boards, night, lights down, building, markings and labels switched on the view while it turns.
+`crowd: { real: true }` draws an NHL arena in its building: the outline from OpenStreetMap, the rink lying along the building where it says so, and a plausible bowl of the seats, tiers and roof the sources give. All thirty-two arenas of the league, division by division ([the real venues](./docs/venues.md)). `boards: true` adds LED ribbon boards and a hung scoreboard, generic content ([LED boards](./docs/venues.md#led-boards)). In 3D the demo's [venues page](https://johnmorrisdotca.github.io/kyogijo-stadiums/venues.html) turns while the pointer is over it, with the stands, walls, roof, LED boards, lighting, building, markings and labels switched on the view while it turns.
 
 ```ts
 import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

package/dist/crowd.draw.d.ts

@@ -11,6 +11,11 @@ export interface DrawInput {
     density: number;
     fine: boolean;
     ground: string;
+    /** The teams' colours of the drawing's score, where it has them: what a lighting's team colours are (the crowd's own `home` and `away` come first). */
+    team?: {
+        home?: string;
+        away?: string;
+    };
 }
 /** The building of a real venue and, where its rink's orientation is known, a small arrow with an N that says where north lies. The N is a path of three strokes, so that no font is needed. */
 export declare function realMarkup(real: RealShell): string;

package/dist/crowd.draw.js

@@ -197,12 +197,12 @@ export function drawCrowd(stands, o) {
     for (const s of stands.sectors)
         body += sector(s, id, fine, density);
     // The house is down: a dark veil over the seats, under the aisles' lights.
-    const light = stands.gallery === true ? undefined : resolveLighting(crowd.lighting);
-    const night = light?.preset === "night";
-    const down = light?.preset === "lightsDown";
+    const light = stands.gallery === true ? undefined : resolveLighting(crowd.lighting, { home: crowd.home ?? o.team?.home, away: crowd.away ?? o.team?.away });
+    const night = light?.aisles === "dots";
+    const down = light?.aisles === "beams";
     if (light !== undefined)
         for (const ring of stands.rings)
-            body += el("path", { class: down ? "ky-cr-veil ky-cr-veil-down" : "ky-cr-veil", d: path(ring) });
+            body += el("path", { class: light.house === "dark" ? "ky-cr-veil ky-cr-veil-down" : light.house === "half" ? "ky-cr-veil ky-cr-veil-half" : "ky-cr-veil", d: path(ring) });
     if (fine) {
         for (const ring of stands.rings) {
             if (stands.gallery === true)
@@ -211,8 +211,8 @@ export function drawCrowd(stands, o) {
                 body += rows(ring) + aisles(ring, night);
             else {
                 // The lights down: the front of each tier edged with light, each stair aisle a beam from above with its rails (a vomitory a broader one).
-                body += rows(ring) + (ring.hole === null ? "" : el("path", { class: "ky-cr-edge", d: outlinePath(ring.hole), fill: "none", stroke: light.aisles, "stroke-opacity": 0.6, "stroke-width": 0.6 }));
-                ring.aisles.forEach(([[x0, y0], [x1, y1]], i) => (body += beamSvg([x0, y0], [x1, y1], light.aisles, "ky-cr-beam", i % 4 === 0)));
+                body += rows(ring) + (ring.hole === null ? "" : el("path", { class: "ky-cr-edge", d: outlinePath(ring.hole), fill: "none", stroke: light.beam, "stroke-opacity": 0.6, "stroke-width": 0.6 }));
+                ring.aisles.forEach(([[x0, y0], [x1, y1]], i) => (body += beamSvg([x0, y0], [x1, y1], light.beam, "ky-cr-beam", i % 4 === 0)));
             }
         }
     }
@@ -242,7 +242,7 @@ export function drawCrowd(stands, o) {
         pool += el("radialGradient", { id: `${id}-wash`, cx: 0.5, cy: 0.5, r: 0.72 }, el("stop", { offset: 0, "stop-color": light.wash, "stop-opacity": WASH.middle }) + el("stop", { offset: 1, "stop-color": light.wash, "stop-opacity": WASH.edge }));
         over += el("rect", { class: "ky-cr-wash", x: n1(b.x), y: n1(b.y), width: n1(b.w), height: n1(b.h), rx: stands.sport === "nhl" ? NHL.cornerRadius : undefined, fill: `url(#${id}-wash)` });
     }
-    if (night) {
+    if (light?.pool === true) {
         const b = stands.box;
         const [w, h] = [b.w + 2 * POOL.reach, b.h + 2 * POOL.reach];
         pool += el("radialGradient", { id: `${id}-pool`, cx: 0.5, cy: 0.5, r: 0.5 }, [[0, 0], [POOL.edge - 0.12, 0], [POOL.edge, POOL.strength], [1, 0]].map(([offset, opacity]) => el("stop", { offset, "stop-color": "#fff4dc", "stop-opacity": opacity })).join(""));
@@ -254,7 +254,7 @@ 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: down ? "ky-crowd ky-night ky-down" : night ? "ky-crowd ky-night" : "ky-crowd" }, 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) : "") + 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) {
@@ -297,6 +297,8 @@ export const KYOGIJO_CROWD_STYLE = `
 .kyogijo .ky-night{--ky-cr-bed:#11151a;--ky-cr-empty:#2a313a;--ky-cr-gap:#020304;--ky-cr-conc:#171c22;--ky-cr-rim:#07090c}
 .kyogijo .ky-cr-veil{fill:#04060a;fill-opacity:.6}
 .kyogijo .ky-cr-veil-down{fill-opacity:.8}
+.kyogijo .ky-cr-veil-half{fill-opacity:.3}
+.kyogijo .ky-half{--ky-cr-bed:#2a3039;--ky-cr-empty:#4a535f;--ky-cr-gap:#0a0c0f;--ky-cr-conc:#2a3038}
 .kyogijo .ky-cr-beam,.kyogijo .ky-cr-edge{stroke-linecap:butt}
 .kyogijo .ky-night .ky-cr-aisle{stroke:#ffd9a3;stroke-opacity:.95;stroke-dasharray:1.1 3.4;stroke-linecap:round}
 .kyogijo .ky-night .ky-cr-vom{stroke:#7dffb0;stroke-opacity:.6;stroke-dasharray:none}

package/dist/draw.js

@@ -11,7 +11,7 @@ import { FOOTBALL } from "./geometry.js";
 import { renderLayers } from "./layers.js";
 import { arenaById, arenaCourtIn, arenaNameIn, arenaOfficialName, arenaRinkIn } from "./arenas.js";
 import { venueById, venueBowl } from "./venues.js";
-import { planPark, stadiumBowl, stadiumById, stadiumConfigOf, stadiumKind, stadiumNames, stadiumSeats } from "./stadiums.js";
+import { KYOGIJO_STADIUM_STYLE, planPark, stadiumBowl, stadiumById, stadiumConfigOf, stadiumConfigs, stadiumKind, stadiumNames, stadiumSeats } from "./stadiums.js";
 import { groundById, groundNameIn, groundOfficialName } from "./grounds.js";
 import { BOARD, courtFor, hasSetsBoard, isNetLeague, isNetSport } from "./court.js";
 import { cricketBoardMarkup } from "./cricket.board.js";
@@ -61,6 +61,7 @@ import { overlayMarkup, placeBoard, resolveBoard } from "./overlay.js";
 import { KYOGIJO_HARDWOOD_STYLE, resolveHardwood } from "./hardwood.js";
 import { WALL_SEATS, densityOf, layoutOf as crowdLayout, resolveCrowd } from "./crowd.js";
 import { drawCrowd, KYOGIJO_CROWD_STYLE } from "./crowd.draw.js";
+import { teamColors } from "./venue.lighting.js";
 import { parkLayout } from "./crowd.park.js";
 import { featureColours, featureStyle } from "./features.js";
 import { isLook, lookStyle } from "./look.js";
@@ -468,6 +469,13 @@ const smallDrawing = (o) => {
     const w = typeof o.width === "number" ? o.width : typeof o.width === "string" && /^\s*\d+(?:\.\d+)?(?:px)?\s*$/.test(o.width) ? parseFloat(o.width) : undefined;
     return o.detail === "simple" || (w !== undefined && w < 480);
 };
+/** The ground, in feet, a stadium's frame holds beyond its building. */
+const VENUE_PAD = 6;
+/** Whether the options draw a real stadium of more than one configuration (a football field and a soccer pitch in one building): its frame is the building's, not the field's. */
+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;
+}
 /** 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;
@@ -482,6 +490,13 @@ 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));
@@ -489,7 +504,7 @@ function buildCrowded(o, portrait, id, score, scored, extra, crowd) {
     const bg = /class="([^"]*)"/.exec(first)?.[1] ?? "ky-apron";
     // 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 });
+    const drawn = drawCrowd(stands, { id, crowd, density: taken, fine, ground: bg, team: teamColors(o) });
     surface.base = first + drawn.markup + surface.base.slice(first.length);
     surface.defs += drawn.defs;
     surface.lines += drawn.over;
@@ -929,6 +944,9 @@ function drawnKyogijo(o) {
     const walled = sport === "mlb" && ballparkDrawn(ballparkFor(o));
     const hardwood = sport === "nba" && o.court?.hardwood !== undefined && o.court.hardwood !== false;
     const crowded = crowdOf(o) !== undefined;
+    // The stadium a drawing is in, where it has more than one configuration: its ground is its own, whichever field lies in it (the stylesheet reads it).
+    const crowdHere = crowdOf(o);
+    const stadiumOfDrawing = crowdHere !== undefined && stadiumHasConfigs(o, crowdHere) ? realStadiumOf(o, sport, crowdHere.real)?.stadium.id : undefined;
     const style = colourStyle(o, { left: leftTeam, right: rightTeam, home: isScore(o) ? o.home : undefined, away: isScore(o) ? o.away : undefined }, featured);
     const palette = isLook(o.look) ? o.look : undefined;
     const budoLook = isMatSport(sport) ? budoLookOf(sport, o.budo?.look ?? (sport === "dojo" ? dojoSpecOf(o.dojo).look : undefined)) : undefined;
@@ -1121,6 +1139,7 @@ function drawnKyogijo(o) {
         role: "img",
         "aria-labelledby": `${titleId} ${descId}`,
         "data-sport": sport,
+        "data-stadium": stadiumOfDrawing,
         "data-league": o.league === undefined || o.league === "" ? (chooseLeague(o).league?.id ?? undefined) : o.league,
         "data-range": isScore(o) && sport === "curling" ? undefined : rangeLabel(o),
         "data-event": o.host !== undefined && typeof o.event === "string" ? safeClass(o.event) : undefined,
@@ -1139,7 +1158,7 @@ function drawnKyogijo(o) {
         part: parts ? "svg" : undefined,
         style: style === "" ? undefined : style,
     }, `<title id="${titleId}">${esc(title)}</title><desc id="${descId}">${esc(description)}</desc>` +
-        (o.style === "none" ? "" : `<style>${KYOGIJO_BASE_STYLE}${left?.round === true || right?.round === true || (pg !== undefined && pageant?.style === "stage") || (pg !== undefined && pageant?.emblem?.shape !== "plain" && pageant?.emblem !== undefined) ? `\n${KYOGIJO_MARK_STYLE}` : ""}${pg === undefined ? "" : `\n${KYOGIJO_PAGEANT_STYLE}${pageant?.animate === undefined || pageant.animate === "none" ? "" : `\n${KYOGIJO_PAGEANT_MOTION}`}`}${sport === "curling" ? `\n${KYOGIJO_CURLING_STYLE}` : ""}${foldedSheet ? `\n${KYOGIJO_FOLD_STYLE}` : ""}${isPoolSport(sport) ? `\n${o.pool?.venue !== undefined ? KYOGIJO_POOL_STYLE : poolStyle({ sport, ...commonOf(o.pool ?? {}), race: o.pool?.race !== undefined, section: o.pool?.section !== undefined && o.pool.section !== false })}` : ""}${plan === undefined ? "" : `\n${courtStyle(plan.sport, plan.look)}`}${fieldsStyle(sport) === "" ? "" : `\n${fieldsStyle(sport)}`}${athleticsStyle(sport) === "" ? "" : `\n${athleticsStyle(sport)}`}${skatingStyle(sport) === "" ? "" : `\n${skatingStyle(sport)}`}${budoLook === undefined ? "" : `\n${budoStyle(sport, budoLook)}`}${palette === undefined ? "" : `\n${lookStyle(palette)}`}${athleticsTrackRules(sport, o.athletics?.track) === "" ? "" : `\n${athleticsTrackRules(sport, o.athletics?.track)}`}${walled ? `\n${KYOGIJO_WALLS_STYLE}` : ""}${hardwood ? `\n${KYOGIJO_HARDWOOD_STYLE}` : ""}${features === undefined ? "" : `\n${featureStyle(sport, features)}`}${notes === undefined || notes.svg === "" ? "" : `\n${KYOGIJO_NOTE_STYLE}`}${grounded ? `\n${KYOGIJO_BACKGROUND_STYLE}` : ""}${crowded ? `\n${KYOGIJO_CROWD_STYLE}` : ""}${crowded && sport === "dojo" ? KYOGIJO_BUDO_GALLERY_STYLE : ""}${situation === undefined ? "" : `\n${KYOGIJO_SITUATION_STYLE}`}${o.host === undefined ? "" : `\n${specialStyle(hostSport(o.host))}`}</style>`) +
+        (o.style === "none" ? "" : `<style>${KYOGIJO_BASE_STYLE}${left?.round === true || right?.round === true || (pg !== undefined && pageant?.style === "stage") || (pg !== undefined && pageant?.emblem?.shape !== "plain" && pageant?.emblem !== undefined) ? `\n${KYOGIJO_MARK_STYLE}` : ""}${pg === undefined ? "" : `\n${KYOGIJO_PAGEANT_STYLE}${pageant?.animate === undefined || pageant.animate === "none" ? "" : `\n${KYOGIJO_PAGEANT_MOTION}`}`}${sport === "curling" ? `\n${KYOGIJO_CURLING_STYLE}` : ""}${foldedSheet ? `\n${KYOGIJO_FOLD_STYLE}` : ""}${isPoolSport(sport) ? `\n${o.pool?.venue !== undefined ? KYOGIJO_POOL_STYLE : poolStyle({ sport, ...commonOf(o.pool ?? {}), race: o.pool?.race !== undefined, section: o.pool?.section !== undefined && o.pool.section !== false })}` : ""}${plan === undefined ? "" : `\n${courtStyle(plan.sport, plan.look)}`}${fieldsStyle(sport) === "" ? "" : `\n${fieldsStyle(sport)}`}${athleticsStyle(sport) === "" ? "" : `\n${athleticsStyle(sport)}`}${skatingStyle(sport) === "" ? "" : `\n${skatingStyle(sport)}`}${budoLook === undefined ? "" : `\n${budoStyle(sport, budoLook)}`}${palette === undefined ? "" : `\n${lookStyle(palette)}`}${athleticsTrackRules(sport, o.athletics?.track) === "" ? "" : `\n${athleticsTrackRules(sport, o.athletics?.track)}`}${walled ? `\n${KYOGIJO_WALLS_STYLE}` : ""}${hardwood ? `\n${KYOGIJO_HARDWOOD_STYLE}` : ""}${features === undefined ? "" : `\n${featureStyle(sport, features)}`}${notes === undefined || notes.svg === "" ? "" : `\n${KYOGIJO_NOTE_STYLE}`}${grounded ? `\n${KYOGIJO_BACKGROUND_STYLE}` : ""}${stadiumOfDrawing === undefined ? "" : `\n${KYOGIJO_STADIUM_STYLE}`}${crowded ? `\n${KYOGIJO_CROWD_STYLE}` : ""}${crowded && sport === "dojo" ? KYOGIJO_BUDO_GALLERY_STYLE : ""}${situation === undefined ? "" : `\n${KYOGIJO_SITUATION_STYLE}`}${o.host === undefined ? "" : `\n${specialStyle(hostSport(o.host))}`}</style>`) +
         (defs === "" ? "" : `<defs>${defs}</defs>`) +
         body);
     return root;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { HOME_FIRST, HOME_FIRST_LEAGUES, homeSideFor } from "./homeside.ts";
 export { inkOn, luminance, rgbOf, safeColour, safePicture } from "./colour.ts";
 export { safeLogo } from "./logo.ts";
 export { useEmblems } from "./emblems-source.ts";
+export { LIGHTING_PRESETS, LIGHT_COLORS, LIGHT_PRESETS, resolveLighting } from "./venue.lighting.ts";
 export type { EmblemDrawOptions, EmblemId, EmblemRef, EmblemRenderer, EmblemStyleName } from "./emblems-source.ts";
 export { useFlags } from "./flags-source.ts";
 export type { FlagRenderer, FlagRequest, FlagShape } from "./flags-source.ts";

package/dist/index.js

@@ -4,6 +4,7 @@ export { HOME_FIRST, HOME_FIRST_LEAGUES, homeSideFor } from "./homeside.js";
 export { inkOn, luminance, rgbOf, safeColour, safePicture } from "./colour.js";
 export { safeLogo } from "./logo.js";
 export { useEmblems } from "./emblems-source.js";
+export { LIGHTING_PRESETS, LIGHT_COLORS, LIGHT_PRESETS, resolveLighting } from "./venue.lighting.js";
 export { useFlags } from "./flags-source.js";
 export { OUTCOMES, drawLayers, layerTable } from "./layers.js";
 export { RANGES } from "./ranges.names.js";

package/dist/stadiums.d.ts

@@ -181,6 +181,11 @@ export declare const stadiumOrientation: (stadium: RealStadium) => StadiumOrient
 export declare const stadiumConfigOf: (sport: string | undefined) => StadiumConfigId | undefined;
 /** The seats of a stadium for a configuration (0 for one it has none of). */
 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.
+ */
+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). */
 export declare const HALL_FIRST_ROW = 8;
 /** The height of the first row above the field, in feet, the rise of a bowl's rows by the number of bowls (what the lowest, a middle and the upper rise, at most), and the rise of the walk between two bowls (a suite level): ours, no source gives them. */
@@ -225,7 +230,7 @@ export interface StadiumPlan {
  * import { planStadium, stadiumById } from "@johnmorrisdotca/kyogijo-stadiums/stadiums";
  * const plan = planStadium(stadiumById("bc-place")!, "soccer", { x: 0, y: 0, w: 344.5, h: 223.1 });
  * console.log(plan.orientation.basis, plan.seats.map((t) => `${t.tier} ${t.seats}`).join(", "), plan.total);
- * // opening lower 27695, upper 24802 52497
+ * // opening lower 27695, upper 26805 54500
  * ```
  */
 export declare function planStadium(stadium: RealStadium, config: StadiumConfigId, box: Box): StadiumPlan;

package/dist/stadiums.js

@@ -59,6 +59,12 @@ export const stadiumOrientation = (stadium) => ({ heading: stadium.osm.axis.head
 export const stadiumConfigOf = (sport) => (sport === "cfl" || sport === "nfl" || sport === "soccer" || sport === "mlb" || sport === "boxing" ? sport : undefined);
 /** The seats of a stadium for a configuration (0 for one it has none of). */
 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.
+ */
+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" +
+    ":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. */
 const FIRST_ROW = { cfl: { side: 42, end: 28, corner: 60 }, nfl: { side: 40, end: 26, corner: 60 } };
@@ -105,7 +111,7 @@ const PLANS = new WeakMap();
  * import { planStadium, stadiumById } from "@johnmorrisdotca/kyogijo-stadiums/stadiums";
  * const plan = planStadium(stadiumById("bc-place")!, "soccer", { x: 0, y: 0, w: 344.5, h: 223.1 });
  * console.log(plan.orientation.basis, plan.seats.map((t) => `${t.tier} ${t.seats}`).join(", "), plan.total);
- * // opening lower 27695, upper 24802 52497
+ * // opening lower 27695, upper 26805 54500
  * ```
  */
 export function planStadium(stadium, config, box) {
@@ -133,6 +139,8 @@ function plan(stadium, config, rink) {
     const place = (ring) => ring.map(([x, y]) => [round((x - middle[0]) * FEET_PER_METRE + at[0], 2), round((y - middle[1]) * FEET_PER_METRE + at[1], 2)]);
     const footprint = place(outline);
     const fb = boxOf(footprint);
+    // How far the building reaches from the middle of the field on each side, worked out from the outline as it is (not as placed and rounded): one answer for every configuration, which is the stadium's frame.
+    const around = boxOf(outline.map(([x, y]) => [(x - middle[0]) * FEET_PER_METRE, (y - middle[1]) * FEET_PER_METRE]));
     const openingRing = stadium.osm.roof?.opening?.ring;
     const opening = openingRing === undefined ? undefined : place(turned(openingRing));
     // The first row round a football field's footprint, and the largest bowl-shaped outline that fits inside the building round the middle of the field.
@@ -163,7 +171,8 @@ function plan(stadium, config, rink) {
     const depth = (first.x0 - outer.x0) + (first.y0 - outer.y0) + (outer.x1 - first.x1) + (outer.y1 - first.y1);
     const gap = GAP / Math.max(20, depth / 4);
     const open = stadium.configs[config]?.seats ?? 0;
-    const seatsTotal = stadium.bowlSeats ?? open;
+    // The bowl is the building's, the same for every configuration: it holds the most seats any of them opens (or the seats the data gives the bowl), and a configuration that opens fewer closes the rest.
+    const seatsTotal = stadium.bowlSeats ?? Math.max(...Object.values(stadium.configs).map((c) => c?.seats ?? 0));
     const count = Math.min(3, stadium.tiers.count);
     const lower = stadium.tiers.lowerSeats === undefined ? (count === 1 ? 1 : count === 2 ? LOWER_SHARE : 0.36) : stadium.tiers.lowerSeats / seatsTotal;
     const shares = count === 1 ? [1] : count === 2 ? [lower, 1 - lower] : [lower, (1 - lower) * 0.36, (1 - lower) * 0.64];
@@ -256,7 +265,7 @@ function plan(stadium, config, rink) {
     const bowl = {
         rings,
         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.x - fb.x0), right: Math.max(0, fb.x1 - rink.x - rink.w), top: Math.max(0, rink.y - fb.y0) + room, bottom: Math.max(0, fb.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: {
             footprint,
             hall: { ...outer, x0: outer.x0 - HALL, y0: outer.y0 - HALL, x1: outer.x1 + HALL, y1: outer.y1 + HALL, r: outer.r + HALL },

package/dist/turn-entry.d.ts

@@ -12,6 +12,8 @@ export type { Box3, Mat4, Placement, TurnPreset, TurnToward, TurnView } from "./
 export { describeUprights, heightUnit, planesOf, uprightsFor } from "./uprights.ts";
 export type { UprightOptions, Uprights } from "./uprights.ts";
 export { ROOF } from "./venue.ts";
+export { LIGHTING_PRESETS, LIGHT_COLORS, LIGHT_PRESETS, WASH, resolveLighting } from "./venue.lighting.ts";
+export type { House, LightPreset, Lighting } from "./venue.lighting.ts";
 export type { Venue, VenueBuild, VenueSettings } from "./venue.ts";
 export type { LedBoardOptions, LedBoardPattern, LightingOptions, LightingPreset } from "./types.ts";
 export type { Plane, PartKind, Upright, UprightKind, V3 } from "./turn.kit.ts";

package/dist/turn-entry.js

@@ -7,3 +7,4 @@ export { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 export { CURLING_PRESETS, LONG_PRESETS, NET_PRESETS, PITCH_MAX, STEP, TURN_DEFAULT, TURN_PRESETS, TURN_PRESET_NAMES, ZOOM_MAX, ZOOM_MIN, cameraMatrix, clampView, depthOf, drag, eyeDistance, fit, matrix3d, multiply, nudge, presetOf, presetView, presetsFor, project, step } from "./turn.camera.js";
 export { describeUprights, heightUnit, planesOf, uprightsFor } from "./uprights.js";
 export { ROOF } from "./venue.js";
+export { LIGHTING_PRESETS, LIGHT_COLORS, LIGHT_PRESETS, WASH, resolveLighting } from "./venue.lighting.js";

package/dist/turn.style.js

@@ -93,11 +93,13 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn[data-lighting]{--ky-cr-bed:#11151a;--ky-cr-empty:#2a313a;--ky-cr-gap:#020304;--ky-cr-conc:#171c22;--ky-cr-dim:1;--ky-up-fascia:#272c29;--ky-up-ground:#1d211e;--ky-night-aisle:#ffd9a3;--ky-night-exit:#7dffb0;--ky-night-rim:#ffe0b0}
 .ky-turn .u-veil{fill:#04060a;fill-opacity:.62}
 .ky-turn .u-veil-down{fill-opacity:.8}
-.ky-turn[data-lighting=lightsDown]{--ky-cr-bed:#0a0d11;--ky-cr-conc:#101419;--ky-up-fascia:#1b1f1d;--ky-up-ground:#15181a}
+.ky-turn .u-veil-half{fill-opacity:.3}
+.ky-turn:is([data-lighting=lightsDown],[data-lighting=intro],[data-lighting=concert]){--ky-cr-bed:#0a0d11;--ky-cr-conc:#101419;--ky-up-fascia:#1b1f1d;--ky-up-ground:#15181a}
+.ky-turn[data-lighting=game]{--ky-cr-bed:#2a3039;--ky-cr-empty:#4a535f;--ky-cr-gap:#0a0c0f;--ky-cr-conc:#2a3038;--ky-up-fascia:#3b403c;--ky-up-ground:#242823}
 .ky-turn[data-lighting=night] .ky-cr-aisle{stroke:var(--ky-night-aisle);stroke-opacity:.95;stroke-dasharray:1.1 3.4;stroke-linecap:round}
 .ky-turn[data-lighting=night] .ky-cr-vom{stroke:var(--ky-night-exit);stroke-opacity:.6;stroke-dasharray:none}
 .ky-turn[data-lighting] .u-suite-win{fill:color-mix(in srgb,var(--ky-night-aisle) 50%,#2a2218)}
-.ky-turn[data-lighting=lightsDown] .u-suite-win{fill:color-mix(in srgb,var(--ky-night-aisle) 10%,#0d1116)}
+.ky-turn:is([data-lighting=lightsDown],[data-lighting=intro],[data-lighting=concert]) .u-suite-win{fill:color-mix(in srgb,var(--ky-night-aisle) 10%,#0d1116)}
 .ky-turn[data-lighting] .u-coping{fill:color-mix(in srgb,var(--ky-night-rim) 55%,var(--ky-up-fascia))}
 .ky-turn[data-lighting] .u-suite-ledge{fill:color-mix(in srgb,var(--ky-night-rim) 45%,var(--ky-up-fascia))}
 .ky-turn[data-lighting] .u-clane{stroke:var(--ky-night-rim);stroke-opacity:.4}

package/dist/types.d.ts

@@ -275,13 +275,16 @@ export type SheetEnd = Side | "top" | "bottom";
 /** The shape of a venue's stands round the playing surface. */
 export type CrowdShape = "bowl" | "sides" | "horseshoe" | "grandstand";
 /**
- * The lighting of a venue (`crowd.lighting` in the plan, `venue.lighting` in the 3D view). `"night"` (or `true`, or `{ preset: "night" }`) dims the house, lights the playing surface and shows small lights along the aisles and stairs, the ribbon
- * boards and the scoreboard glowing, the exits and the concourse rim softly lit. `"lightsDown"` is a show's house: nearly black, each stair aisle lit from above as a beam with a soft falloff on the steps either side, the rails and the front of
- * every step edged with light. `wash` colours the playing surface with a light (a CSS colour, or `white`, `amber`, `purple`, `magenta`, `blue`, `cyan`; the markings stay visible) and `aisles` the beams (`lightsDown`). `false` is no lighting. Off by default.
+ * The lighting of a venue (`crowd.lighting` in the plan, `venue.lighting` in the 3D view): a named preset (`LIGHT_PRESETS`), `true` (the night), or `{ preset, colors, aisles, wash }`. `"night"` dims the house, lights the playing surface and shows small
+ * lights along the aisles and stairs, the ribbon boards and the scoreboard glowing, the exits and the concourse rim softly lit. `"game"` is white light with the house half lit. `"lightsDown"` is a show's house: nearly black, each stair aisle lit from
+ * above as a beam with a soft falloff on the steps either side, the rails and the front of every step edged with light. `"intro"` is the same house with the home team's colour washed over the surface and the visitors' in the beams (the teams'
+ * colours where the options have them, else blue and amber); `"concert"` has warm amber beams and a purple surface. `colors` are one or two colours that stand for the home and the visitors (before the options' teams); `wash` colours the playing surface
+ * with a light (a CSS colour, or `white`, `amber`, `purple`, `magenta`, `blue`, `cyan`; the markings stay visible) and `aisles` the beams, and both win over the preset's. `false` is no lighting. Off by default.
  */
-export type LightingPreset = "night" | "lightsDown";
+export type LightingPreset = "night" | "game" | "lightsDown" | "intro" | "concert";
 export type LightingOptions = LightingPreset | boolean | {
     preset?: LightingPreset;
+    colors?: readonly string[];
     aisles?: string;
     wash?: string;
 };

package/dist/venue.d.ts

@@ -30,6 +30,11 @@ export interface VenueBuild extends VenueSettings {
     id: string;
     /** Leave the scoreboard hung over the middle out (a tournament hall has scoreboards of its own). */
     noCentre?: boolean;
+    /** The teams' colours the drawing has (a crowd's `home` and `away`, or a score's teams'): what a lighting's team colours are. */
+    team?: {
+        home?: string;
+        away?: string;
+    };
 }
 /** What the venue is made of: the things that stand, and the patterns they are drawn with (the contents of a `defs`). */
 export interface Venue {

package/dist/venue.js

@@ -10,7 +10,7 @@ import { groundById } from "./grounds.js";
 import { ARC_STEPS, clipAround, clipConvex, clipSegment, areaOf, pointList, raked, slopeOf, stripsOf, tidy } from "./venue.geom.js";
 import { APRON_RISE, apronPlanes, backEdges, backWall, concourseFloor, rimAt, suiteWall } from "./venue.fill.js";
 import { firstHit, realBuilding } from "./venue.real.js";
-import { beamSvg, edgeSvg, lightPool, lightWash, resolveLighting } from "./venue.lighting.js";
+import { beamSvg, edgeSvg, lightPool, lightWash, resolveLighting, teamColors } from "./venue.lighting.js";
 import { centreBoard, fasciaRibbon, hangsOver, ledStrip, resolveBoards, ribbonHigh, ribbonShare, tierLinks } from "./venue.boards.js";
 import { n, shy, wall } from "./turn.kit.js";
 export const NO_VENUE = { items: [], defs: "", reach: 0 };
@@ -38,7 +38,7 @@ export function standsVenue(o, v, lift) {
     const crowd = resolveCrowd(o.crowd);
     if (stands === undefined || crowd === undefined || stands.gallery === true)
         return NO_VENUE;
-    return standsVenueOf(stands, crowd, { sport: o.sport, detail: o.detail, ground: o.ground }, v, lift);
+    return standsVenueOf(stands, crowd, { sport: o.sport, detail: o.detail, ground: o.ground }, { ...v, team: v.team ?? teamColors(o, crowd) }, lift);
 }
 /**
  * The stands the model says (`crowdStands`, or the stands of a tournament layout's hall) as planes: what `standsVenue` makes of a surface's, for stands that were worked out some other way. `o` is the little of the
@@ -76,17 +76,17 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
                 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}"/>`;
         }
         if (light !== undefined)
-            svg += `<polygon class="${down ? "u-veil u-veil-down" : "u-veil"}" points="${pointList(corners)}"/>`;
+            svg += `<polygon class="${light.house === "dark" ? "u-veil u-veil-down" : light.house === "half" ? "u-veil u-veil-half" : "u-veil"}" points="${pointList(corners)}"/>`;
         // The lights down: the front of each step is edged with light, and each stair aisle is a beam from above with the rails beside it (the aisle lines the stands' dark ones are, are left out).
         if (down && light !== undefined) {
             if (corners.length === 4)
-                svg += edgeSvg(corners[0], corners[1], light.aisles, "u-edge");
+                svg += edgeSvg(corners[0], corners[1], light.beam, "u-edge");
             if (fine) {
                 ring.aisles.forEach(([a, b], i) => {
                     const seg = clipSegment(a, b, piece);
                     if (seg === undefined || Math.hypot(seg[1][0] - seg[0][0], seg[1][1] - seg[0][1]) < 0.5)
                         return;
-                    svg += beamSvg(local(seg[0]), local(seg[1]), light.aisles, "u-beam", i % 4 === 0);
+                    svg += beamSvg(local(seg[0]), local(seg[1]), light.beam, "u-beam", i % 4 === 0);
                 });
             }
         }
@@ -116,9 +116,9 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     const links = tierLinks(stands);
     for (const l of links)
         chained.add(l.after);
-    const light = resolveLighting(v.lighting !== undefined ? v.lighting : crowd.lighting);
-    const night = light?.preset === "night";
-    const down = light?.preset === "lightsDown";
+    const light = resolveLighting(v.lighting !== undefined ? v.lighting : crowd.lighting, v.team ?? teamColors({}, crowd));
+    const night = light?.aisles === "dots";
+    const down = light?.aisles === "beams";
     const boards = resolveBoards(v.boards !== undefined ? v.boards : crowd.boards, { home: crowd.home, away: crowd.away }, light !== undefined);
     const ribbons = [];
     /** How far along the ribbon of one level the next piece of it starts, in feet, so that its panels carry on. */
@@ -208,7 +208,7 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
         }
     }
     // The surface is lit: a pool of light on the floor round it, under the seats.
-    if (night)
+    if (light?.pool === true)
         seatPlanes.push(lightPool("night-pool", stands.box, lift + APRON_RISE + 0.03, light?.wash));
     // A colour of light on the surface (a show's wash), over the markings, which stay visible through it.
     if (light?.wash !== undefined)

package/dist/venue.lighting.d.ts

@@ -1,7 +1,6 @@
 import { type Plane } from "./turn.kit.ts";
 import type { LightingOptions, LightingPreset } from "./types.ts";
-export declare const LIGHTING_PRESETS: readonly LightingPreset[];
-/** The named colours of light: `wash` and `aisles` take these by name (ours, a little saturated, for a light seen on dark). */
+/** The named colours of light: `wash`, `aisles` and `colors` take these by name (ours, a little saturated, for a light seen on dark). */
 export declare const LIGHT_COLORS: {
     readonly white: "#fff6e6";
     readonly amber: "#ffb830";
@@ -10,14 +9,57 @@ export declare const LIGHT_COLORS: {
     readonly blue: "#2b7bff";
     readonly cyan: "#27d6ff";
 };
-/** The lighting as asked, with every part's value. `aisles` is the colour of the beams and `wash` the surface's colour of light (none for the surface as it is). */
+/** How dark the house is: `half` (a light veil, the game's), `dim` (the night's) or `dark` (a show's). */
+export type House = "half" | "dim" | "dark";
+/**
+ * A named lighting. `house` is how dark the stands are; `aisles` how the aisles are lit (`none`, small `dots`, or a `beam` of light from above down each); `pool` whether a pool of light lies on the floor round the surface; `wash` and `beam` are the colours
+ * of the light on the surface and of the beams: a colour (a name of `LIGHT_COLORS`), or `home` and `away`, the teams' colours where the options have them (`crowd.home` and `crowd.away`, the colours of a score's teams), else `fallback`'s.
+ */
+export interface LightPreset {
+    house: House;
+    aisles: "none" | "dots" | "beams";
+    pool: boolean;
+    wash?: keyof typeof LIGHT_COLORS | "home" | "away";
+    beam?: keyof typeof LIGHT_COLORS | "home" | "away";
+    /** What `home` and `away` are where the options name no team colour. */
+    fallback?: {
+        home: keyof typeof LIGHT_COLORS;
+        away: keyof typeof LIGHT_COLORS;
+    };
+}
+/**
+ * The named lightings. `night`: the calm dim house with small lights along the aisles. `game`: white light, the house half lit, a pool of light round the surface. `lightsDown`: the house nearly black, a white beam down each aisle. `intro`: the
+ * house dark, the home team's colour washed over the surface and the visitors' (the second colour) in the beams. `concert`: warm amber beams and a purple surface. (The `celebration` of the plan, colours chasing round the bowl, is a later one.)
+ */
+export declare const LIGHT_PRESETS: Readonly<Record<LightingPreset, LightPreset>>;
+export declare const LIGHTING_PRESETS: readonly LightingPreset[];
+/** The lighting as asked, with every part's value. */
 export interface Lighting {
     preset: LightingPreset;
-    aisles: string;
+    house: House;
+    aisles: "none" | "dots" | "beams";
+    pool: boolean;
+    /** The colour of the beams. */
+    beam: string;
+    /** The surface's colour of light (none for the surface as it is). */
     wash: string | undefined;
 }
-/** The lighting an option asks for: a named preset, `true` for the first (night), `{ preset, aisles, wash }`, or `undefined` for none (false, nothing, an unknown name). */
-export declare function resolveLighting(ask: LightingOptions | undefined | null): Lighting | undefined;
+/** The teams' colours the options have: a score's teams' `color`, over which a crowd's `home` and `away` stand. */
+export declare function teamColors(o: object, crowd?: {
+    home?: string;
+    away?: string;
+}): {
+    home?: string;
+    away?: string;
+};
+/**
+ * The lighting an option asks for: a preset's name, `true` for the first (night), or `{ preset, colors, aisles, wash }`, or `undefined` for none (false, nothing, an unknown name). A colour comes from, in order: `wash` or `aisles`, `colors` (the first
+ * is what the preset's `home` is, the second its `away`), the teams' colours (`team`), the preset's own.
+ */
+export declare function resolveLighting(ask: LightingOptions | undefined | null, team?: {
+    home?: string;
+    away?: string;
+}): Lighting | undefined;
 /** How far the pool of light round the surface reaches beyond its box, in feet, and the share of the pool that is bright (the surface's own edge). The surface itself stays as drawn: the pool is brightest just outside its markings. */
 export declare const POOL: {
     readonly reach: 20;

package/dist/venue.lighting.js

@@ -4,19 +4,43 @@
 // Pure: data in, planes out.
 import { flat, n } from "./turn.kit.js";
 import { safeColor } from "./venue.boards.js";
-export const LIGHTING_PRESETS = ["night", "lightsDown"];
-/** The named colours of light: `wash` and `aisles` take these by name (ours, a little saturated, for a light seen on dark). */
+/** The named colours of light: `wash`, `aisles` and `colors` take these by name (ours, a little saturated, for a light seen on dark). */
 export const LIGHT_COLORS = { white: "#fff6e6", amber: "#ffb830", purple: "#9b4dff", magenta: "#ff2bd6", blue: "#2b7bff", cyan: "#27d6ff" };
+/**
+ * The named lightings. `night`: the calm dim house with small lights along the aisles. `game`: white light, the house half lit, a pool of light round the surface. `lightsDown`: the house nearly black, a white beam down each aisle. `intro`: the
+ * house dark, the home team's colour washed over the surface and the visitors' (the second colour) in the beams. `concert`: warm amber beams and a purple surface. (The `celebration` of the plan, colours chasing round the bowl, is a later one.)
+ */
+export const LIGHT_PRESETS = {
+    night: { house: "dim", aisles: "dots", pool: true },
+    game: { house: "half", aisles: "none", pool: true },
+    lightsDown: { house: "dark", aisles: "beams", pool: false },
+    intro: { house: "dark", aisles: "beams", pool: false, wash: "home", beam: "away", fallback: { home: "blue", away: "amber" } },
+    concert: { house: "dark", aisles: "beams", pool: false, wash: "purple", beam: "amber" },
+};
+export const LIGHTING_PRESETS = Object.keys(LIGHT_PRESETS);
 const colorOf = (value) => (typeof value === "string" && Object.hasOwn(LIGHT_COLORS, value) ? LIGHT_COLORS[value] : safeColor(value));
-/** The lighting an option asks for: a named preset, `true` for the first (night), `{ preset, aisles, wash }`, or `undefined` for none (false, nothing, an unknown name). */
-export function resolveLighting(ask) {
+/** The teams' colours the options have: a score's teams' `color`, over which a crowd's `home` and `away` stand. */
+export function teamColors(o, crowd) {
+    const teams = o;
+    return { home: safeColor(crowd?.home) ?? safeColor(teams.home?.color), away: safeColor(crowd?.away) ?? safeColor(teams.away?.color) };
+}
+/**
+ * The lighting an option asks for: a preset's name, `true` for the first (night), or `{ preset, colors, aisles, wash }`, or `undefined` for none (false, nothing, an unknown name). A colour comes from, in order: `wash` or `aisles`, `colors` (the first
+ * is what the preset's `home` is, the second its `away`), the teams' colours (`team`), the preset's own.
+ */
+export function resolveLighting(ask, team = {}) {
     if (ask === undefined || ask === null || ask === false)
         return undefined;
     const o = typeof ask === "object" ? ask : {};
     const name = typeof ask === "string" ? ask : ask === true ? "night" : o.preset ?? "night";
     if (!LIGHTING_PRESETS.includes(name))
         return undefined;
-    return { preset: name, aisles: colorOf(o.aisles) ?? LIGHT_COLORS.white, wash: colorOf(o.wash) };
+    const preset = name;
+    const base = LIGHT_PRESETS[preset];
+    const given = (Array.isArray(o.colors) ? o.colors : []).map(colorOf).filter((c) => c !== undefined);
+    const side = (which) => (which === "home" ? given[0] ?? team.home : given[1] ?? team.away) ?? LIGHT_COLORS[base.fallback?.[which] ?? (which === "home" ? "blue" : "amber")];
+    const pick = (token) => (token === undefined ? undefined : token === "home" || token === "away" ? side(token) : LIGHT_COLORS[token]);
+    return { preset, house: base.house, aisles: base.aisles, pool: base.pool, beam: colorOf(o.aisles) ?? pick(base.beam) ?? LIGHT_COLORS.white, wash: colorOf(o.wash) ?? pick(base.wash) };
 }
 /** How far the pool of light round the surface reaches beyond its box, in feet, and the share of the pool that is bright (the surface's own edge). The surface itself stays as drawn: the pool is brightest just outside its markings. */
 export const POOL = { reach: 20, edge: 0.7, strength: 0.34 };

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.39.1";
+export declare const VERSION = "0.40.1";

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.39.1";
+export const VERSION = "0.40.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.39.1",
+  "version": "0.40.1",
   "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",