@johnmorrisdotca/kyogijo-stadiums 0.37.0 → 0.38.0

package/CHANGELOG.md

@@ -7,6 +7,16 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.38.0] - 2026-10-21
+
+### Added
+
+- **Night lighting** (`lighting: "night"`, [night lighting](./docs/venues.md#night-lighting), `src/venue.lighting.ts`): a venue lit as at night. The house goes down (a veil over the seats, the venue's colours set dark in the light theme and in the dark one), the playing surface stays lit with a pool of light round it that is clear over the markings, small lights show along the aisles and stairs, the exits (every fourth aisle, the vomitories) are green, the ribbon boards and the scoreboard of [the LED boards](./docs/venues.md#led-boards) glow with a halo under every panel, and the windows, the coping and the lanes of the concourse are softly lit. `venue: { lighting }` in the 3D view, `crowd: { lighting }` in the plan (and read by the 3D view where `venue.lighting` says nothing), `stadium: { lighting }` round a tournament hall; `"night"`, `true` and `{ preset: "night" }` are the same and `false` is none. It is the base later lightings are added to: the option is a preset name, and `TurnModel.lighting` and the view's `data-lighting` say which. Off by default, and a drawing without it is exactly what it was. Nothing is worked out again as the view turns: the lights are custom properties (`--ky-night-aisle`, `--ky-night-exit`, `--ky-night-rim`) and a few static shapes, one added plane (`night-pool`) to a venue; `turn.update(options, { venue: { lighting } })` changes it while the view turns. The lights are at least seven to one against the seats in both themes (a test holds it). New exports: `LightingOptions` and `LightingPreset`. About 3 KB of source in the one new module.
+- **A Night switch on the demo** (kept in the address as `night=1`): a button in the bar over the venues page's view and the home page's featured arena, which lights the plan and the 3D view and, in 3D, changes it without stopping or sending back the turn; a checkbox on the stadiums, tournament layouts and district pages.
+
+### Changed
+
+- **The plan's ribbon boards are outside the crowd's group** (`<g class="ky-cr-ribbon">` follows `<g class="ky-crowd">` and no longer sits inside it), so that the crowd's dimming and the night veil do not reach them.
 ## [0.37.0] - 2026-10-20
 
 ### Added

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, 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, night, building, markings and labels switched on the view while it turns.
 
 ```ts
 import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

package/dist/crowd.d.ts

@@ -1,4 +1,4 @@
-import type { CrowdShape, LedBoardOptions, Side, Sport, SurfaceOptions } from "./types.ts";
+import type { CrowdShape, LedBoardOptions, LightingOptions, Side, Sport, SurfaceOptions } from "./types.ts";
 export type Pt = [number, number];
 export type Box = {
     x: number;
@@ -190,6 +190,8 @@ export interface Crowd {
     detail: "auto" | "fine" | "plain";
     /** The LED boards as asked (`resolveBoards` reads them), or `undefined` for none. */
     boards: boolean | LedBoardOptions | undefined;
+    /** The lighting as asked (`resolveLighting` reads it), or `undefined`. */
+    lighting: LightingOptions | undefined;
 }
 /** The crowd the options ask for, or `undefined` for none. */
 export declare function resolveCrowd(value: SurfaceOptions["crowd"]): Crowd | undefined;

package/dist/crowd.draw.js

@@ -4,6 +4,7 @@
 // the same crowd. Written for this package; no photograph or other drawing was copied.
 import { el, num } from "./format.js";
 import { hangsOver, planRibbons, planScoreboard, resolveBoards } from "./venue.boards.js";
+import { POOL, resolveLighting } from "./venue.lighting.js";
 import { NORTH_AT, generator, outlinePath } from "./crowd.js";
 /** The width and the height of a tile of the crowd, in feet, and the seats' pitch. */
 const TILE = 14.4;
@@ -68,11 +69,11 @@ export function patterns(id, crowd, density, tifo, neutral = false, rows = false
 }
 const path = (ring) => [ring.region, ...(ring.more ?? [])].map((o) => outlinePath(o)).join("") + (ring.hole === null ? "" : outlinePath(ring.hole, true));
 /** The aisles of a band as one path: the lines the stands data gives, every fourth a vomitory, drawn wider. */
-function aisles(ring) {
+function aisles(ring, night = false) {
     const line = ([[x0, y0], [x1, y1]]) => `M${Math.round(x0)} ${Math.round(y0)}L${Math.round(x1)} ${Math.round(y1)}`;
     const plain = ring.aisles.filter((_, i) => i % 4 !== 0).map(line).join("");
     const vomitories = ring.aisles.filter((_, i) => i % 4 === 0).map(line).join("");
-    return (plain === "" ? "" : el("path", { class: "ky-cr-aisle", d: plain, "stroke-width": 1.2 })) + (vomitories === "" ? "" : el("path", { class: "ky-cr-aisle", d: vomitories, "stroke-width": 2.6 }));
+    return (plain === "" ? "" : el("path", { class: "ky-cr-aisle", d: plain, "stroke-width": 1.2 })) + (vomitories === "" ? "" : el("path", { class: night ? "ky-cr-aisle ky-cr-vom" : "ky-cr-aisle", d: vomitories, "stroke-width": 2.6 }));
 }
 /** The pitch of the row lines, in feet: every second row of seats. */
 const ROW = 5;
@@ -194,9 +195,14 @@ 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 night = resolveLighting(crowd.lighting) === "night" && stands.gallery !== true;
+    if (night)
+        for (const ring of stands.rings)
+            body += el("path", { class: "ky-cr-veil", d: path(ring) });
     if (fine)
         for (const ring of stands.rings)
-            body += stands.gallery === true ? "" : rows(ring) + aisles(ring);
+            body += stands.gallery === true ? "" : rows(ring) + aisles(ring, night);
     // Depth: the front wall of a tier throws a shade on its first rows (and the ground in front of it), the roof's edge on the last rows of the upper tier.
     // A gallery's railing: a line along its front edge, over the seats.
     if (stands.gallery === true)
@@ -212,18 +218,25 @@ export function drawCrowd(stands, o) {
         }
     }
     // The LED boards: a lit line along the front of the upper tiers, and the scoreboard over the middle of the surface (over it, in `over`).
-    const boards = resolveBoards(crowd.boards, { home: crowd.home, away: crowd.away });
-    if (boards?.ribbon === true)
-        body += planRibbons(stands, boards);
+    const boards = resolveBoards(crowd.boards, { home: crowd.home, away: crowd.away }, night);
+    const lit = boards?.ribbon === true ? planRibbons(stands, boards) : "";
     if (boards?.scoreboard === true && hangsOver(stands.sport))
         over += planScoreboard(stands.box, boards);
+    // The surface is lit: a pool of light round it, clear over the markings.
+    let pool = "";
+    if (night) {
+        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(""));
+        over += el("rect", { class: "ky-cr-pool", x: n1(b.x - POOL.reach), y: n1(b.y - POOL.reach), width: n1(w), height: n1(h), fill: `url(#${id}-pool)` });
+    }
     for (const [x0, y0, x1, y1] of stands.covers)
         body += el("rect", { class: o.ground, x: n1(x0), y: n1(y0), width: n1(x1 - x0), height: n1(y1 - y0) });
     for (const g of stands.gaps) {
         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) : ""), markup: el("g", { class: "ky-crowd" }, body), 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: night ? "ky-crowd ky-night" : "ky-crowd" }, 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) {
@@ -263,6 +276,11 @@ export const KYOGIJO_CROWD_STYLE = `
 .kyogijo .ky-cr-plaza{fill:var(--ky-apron);stroke:var(--ky-apron);stroke-width:8;stroke-linejoin:round}
 .kyogijo .ky-cr-ez{fill:var(--ky-line);fill-opacity:.16}
 .kyogijo .ky-cr-yard{stroke:var(--ky-line);stroke-opacity:.5;fill:none}
+.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-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}
+.kyogijo .ky-night .ky-cr-shell{fill:#171c22}
 .kyogijo .ky-cr-led-bed{fill:#0b0f14}
 .kyogijo .ky-cr-led-line{fill:none;stroke:#0b0f14;stroke-linejoin:round}
 .kyogijo .ky-cr-led{stroke-linecap:butt}`.trim();

package/dist/crowd.js

@@ -35,6 +35,7 @@ export function resolveCrowd(value) {
         stands: o.stands !== false,
         detail: o.detail === "fine" || o.detail === "plain" ? o.detail : "auto",
         boards: o.boards === true || (typeof o.boards === "object" && o.boards !== null) ? o.boards : undefined,
+        lighting: o.lighting,
     };
 }
 /** How full the stands are: a density, else attendance over capacity (the ground's, else the model's seats), else 0.85. */

package/dist/district.turn.js

@@ -7,7 +7,7 @@ import { 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";
-import { buildTurn, openingView, sceneBox, WORLD_PX } from "./turn.model.js";
+import { buildTurn, lightingOf, openingView, sceneBox, WORLD_PX } from "./turn.model.js";
 import { planesOf } from "./uprights.js";
 import { FEET_PER_METRE } from "./geometry.js";
 import { hullOf } from "./venues.geo.js";
@@ -124,6 +124,7 @@ export function buildDistrictTurn(options, settings = {}) {
         defs: defs.join(""),
         crowdStyle,
         venue: true,
+        ...lightingOf(typeof settings.venue === "object" ? settings.venue : {}, undefined),
         look: undefined,
         planes,
         box,

package/dist/index.d.ts

@@ -76,4 +76,4 @@ export type { SoccerPitchClass, SoccerPitchId, SoccerSize, SoccerSpec } from "./
 export { SOCCER_PROVIDER_IDS, SOCCER_PROVIDERS, frameMatrix, rescale, soccerFrame, soccerLandmarks } from "./surfaces/soccer-providers.ts";
 export type { Rescaler, SoccerFrame, SoccerProvider, SoccerProviderId } from "./surfaces/soccer-providers.ts";
 export { VERSION } from "./version.ts";
-export type { AxesOptions, Box, Colors, CourtStyle, CrowdOptions, LedBoardOptions, LedBoardPattern, CrowdShape, Detail, DirectionOptions, BudoSport, FieldSport, FieldStyle, Fence, GoalInfo, GoalStyle, HardwoodOptions, Language, NetStyle, LineDash, LineWidth, LookName, Orientation, PoolSport, PoolStyle, QuirkName, QuirkOptions, RangeBox, PageantOptions, PageantStyle, RangeName, RangeNamed, ScoreOptions, Side, Size, Sport, StatusWord, StripePattern, SurfaceOptions, Team, TeamMark, Theme, WallOptions, } from "./types.ts";
+export type { AxesOptions, Box, Colors, CourtStyle, CrowdOptions, LedBoardOptions, LedBoardPattern, LightingOptions, LightingPreset, CrowdShape, Detail, DirectionOptions, BudoSport, FieldSport, FieldStyle, Fence, GoalInfo, GoalStyle, HardwoodOptions, Language, NetStyle, LineDash, LineWidth, LookName, Orientation, PoolSport, PoolStyle, QuirkName, QuirkOptions, RangeBox, PageantOptions, PageantStyle, RangeName, RangeNamed, ScoreOptions, Side, Size, Sport, StatusWord, StripePattern, SurfaceOptions, Team, TeamMark, Theme, WallOptions, } from "./types.ts";

package/dist/multi.draw.js

@@ -268,7 +268,7 @@ export function multiDrawing(options, raise, uprights = true) {
     }
     if (stadium !== undefined) {
         const standsLike = venue?.standsLike ?? spec.sport;
-        const crowd = resolveCrowd({ gaps: false, awayEnd: "none", roof: stadium.roof, shape: stadium.shape, density: stadium.density, detail: stadium.detail === "plain" ? "plain" : "fine", boards: hallBoards(stadium.boards) });
+        const crowd = resolveCrowd({ gaps: false, awayEnd: "none", roof: stadium.roof, shape: stadium.shape, density: stadium.density, detail: stadium.detail === "plain" ? "plain" : "fine", boards: hallBoards(stadium.boards), lighting: stadium.lighting });
         const stands = layoutOf({ sport: standsLike, box: wide, crowd, awaySide: "right", arena: venue?.shape === "octagon" });
         const wall = venue?.shape === "octagon" ? el("path", { class: "ky-mu-wall", d: octagonD(hall.w / 2, hall.w / 2, hall.w / 2) }) : el("rect", { class: "ky-mu-wall", x: 0, y: 0, width: num(hall.w), height: num(hall.h), rx: 0.5 });
         if (raise)

package/dist/multi.turn.js

@@ -10,7 +10,7 @@ import { TURN_PRESETS, NET_PRESETS, wrap } from "./turn.camera.js";
 import { box, flat, n, plane, rect, shy, thinnest, wall } from "./turn.kit.js";
 import { mountTurn } from "./turn.dom.js";
 import { turnMarkupOf } from "./turn.markup.js";
-import { openingView, sceneBox } from "./turn.model.js";
+import { lightingOf, openingView, sceneBox } from "./turn.model.js";
 import { describeUprights, planesOf, uprightsFor } from "./uprights.js";
 import { standsVenueOf } from "./venue.js";
 import { isNetSport } from "./court.js";
@@ -207,6 +207,7 @@ export function buildMultiTurn(options, settings = {}) {
         defs,
         crowdStyle,
         venue: drawn.stands !== undefined,
+        ...(drawn.stands === undefined ? {} : lightingOf({ lighting: typeof settings.venue === "object" && settings.venue.lighting !== undefined ? settings.venue.lighting : drawn.stands.crowd.lighting }, undefined)),
         look: { sport: spec.sport, look: look ?? "plain" },
         planes,
         box: box3,

package/dist/multi.types.d.ts

@@ -1,4 +1,4 @@
-import type { LedBoardOptions, Sport, SurfaceOptions } from "./types.ts";
+import type { LedBoardOptions, LightingOptions, Sport, SurfaceOptions } from "./types.ts";
 /** The unit a layout's lengths are written in: the one its rulebook prints. */
 export type MultiUnit = "m" | "ft";
 /** A length along the layout (`x`, left to right) and across it (`y`, top to bottom). */
@@ -248,6 +248,7 @@ export interface MultiOptions {
         shape?: "bowl" | "sides";
         detail?: "fine" | "plain";
         boards?: boolean | LedBoardOptions;
+        lighting?: LightingOptions;
     };
     /** The empty places for the event's words and marks, and the boards: on by default; `false` draws neither. */
     slots?: boolean;

package/dist/turn-entry.d.ts

@@ -13,5 +13,5 @@ export { describeUprights, heightUnit, planesOf, uprightsFor } from "./uprights.
 export type { UprightOptions, Uprights } from "./uprights.ts";
 export { ROOF } from "./venue.ts";
 export type { Venue, VenueBuild, VenueSettings } from "./venue.ts";
-export type { LedBoardOptions, LedBoardPattern } from "./types.ts";
+export type { LedBoardOptions, LedBoardPattern, LightingOptions, LightingPreset } from "./types.ts";
 export type { Plane, PartKind, Upright, UprightKind, V3 } from "./turn.kit.ts";

package/dist/turn.dom.js

@@ -483,6 +483,11 @@ export function mountTurn(host, options, settings, build) {
                 stage.insertAdjacentHTML("beforeend", turnBoardMarkup(model.board));
             stage.setAttribute("aria-label", model.title);
             root.querySelector(".ky-turn-help").textContent = `${turnWords(model).keys}${model.standing === "" ? "" : ` ${model.standing}`}`;
+            // The lighting is an attribute of the root, which the stylesheet reads: it changes with the scene, the view's turn is not touched.
+            if (model.lighting === undefined)
+                root.removeAttribute("data-lighting");
+            else
+                root.setAttribute("data-lighting", model.lighting);
             const theme = model.options.theme;
             if (theme === "light" || theme === "dark")
                 root.dataset.theme = theme;

package/dist/turn.markup.js

@@ -154,7 +154,7 @@ export function turnMarkupOf(model, settings = {}) {
     const sheet = model.options.style === "none" ? "" : `<style>${KYOGIJO_TURN_STYLE}</style>`;
     const theme = model.options.theme;
     const sport = model.options.sport;
-    return (`<div class="ky-turn" id="${esc(model.id)}" data-sport="${esc(String(sport))}" data-mode="3d" data-touch="${settings.touch === "turn" ? "turn" : "scroll"}" data-preset="${presetOf(view, model.presets ?? sport) ?? "custom"}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""} lang="${model.language}">` +
+    return (`<div class="ky-turn" id="${esc(model.id)}" data-sport="${esc(String(sport))}" data-mode="3d" data-touch="${settings.touch === "turn" ? "turn" : "scroll"}" data-preset="${presetOf(view, model.presets ?? sport) ?? "custom"}"${model.lighting === undefined ? "" : ` data-lighting="${model.lighting}"`}${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""} lang="${model.language}">` +
         sheet +
         `<div class="ky-turn-view" tabindex="0" role="group" aria-roledescription="${esc(words.region)}" aria-label="${esc(model.title)}" aria-describedby="${esc(model.id)}-help" aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1 2 3 4 Home Space"><div ${worldAttributes(model)}>${worldMarkup(model, layout)}</div>${model.board === undefined ? "" : turnBoardMarkup(model.board)}</div>` +
         `<p class="ky-turn-help" id="${esc(model.id)}-help">${esc(keys)}</p>` +

package/dist/turn.model.d.ts

@@ -5,7 +5,7 @@ import { type UprightOptions, type Uprights } from "./uprights.ts";
 import { type ResolvedBoard } from "./overlay.ts";
 import type { VenueSettings } from "./venue.ts";
 import type { Box3 } from "./turn.camera.ts";
-import type { Language, ScoreOptions, SurfaceOptions } from "./types.ts";
+import type { Language, LightingOptions, LightingPreset, ScoreOptions, SurfaceOptions } from "./types.ts";
 /** What can be asked of a 3D view. */
 export interface TurnSettings {
     /** The viewpoint it opens on: `overhead`, `broadcast`, `end` or `corner` (the default). */
@@ -85,6 +85,8 @@ export interface TurnModel {
     crowdStyle: string;
     /** Whether the venue is raised. */
     venue: boolean;
+    /** The lighting of the venue (`data-lighting` on the view's root, which the stylesheet reads), or `undefined`. */
+    lighting?: LightingPreset;
     /** The sport and look the floor is painted in, when it has one (a budō surface's mats): the planes of its room are painted in the same look. */
     look: {
         sport: string;
@@ -111,6 +113,12 @@ export interface TurnModel {
     /** The board the options ask for (`board`), laid over the view: a layer of its own, never a plane of the scene. */
     board?: ResolvedBoard;
 }
+/** The lighting a venue is built with, as a model's field: the venue's own setting, else the crowd's, and none where there is no venue. */
+export declare const lightingOf: (venue: {
+    lighting?: LightingOptions;
+} | undefined, crowd: SurfaceOptions["crowd"]) => {
+    lighting?: LightingPreset;
+};
 /** The options with what makes the floor of a 3D view: the whole surface, lying wide, at its full size. */
 export declare function floorOptions(options: SurfaceOptions | ScoreOptions): SurfaceOptions | ScoreOptions;
 /** The view a set of settings opens on. */

package/dist/turn.model.js

@@ -9,8 +9,14 @@ import { TURN_DEFAULT, clampView, presetView } from "./turn.camera.js";
 import { describeUprights, planesOf, uprightsFor } from "./uprights.js";
 import { resolveCrowd } from "./crowd.js";
 import { resolveBoard } from "./overlay.js";
+import { resolveLighting } from "./venue.lighting.js";
 /** The pixels in one foot of the scene at a zoom of 1: the floor is drawn this big, and scaled down to fit. A larger floor is sharper. */
 export const WORLD_PX = 1400;
+/** The lighting a venue is built with, as a model's field: the venue's own setting, else the crowd's, and none where there is no venue. */
+export const lightingOf = (venue, crowd) => {
+    const lighting = venue === undefined ? undefined : resolveLighting(venue.lighting !== undefined ? venue.lighting : resolveCrowd(crowd)?.lighting);
+    return lighting === undefined ? {} : { lighting };
+};
 /** The options with what makes the floor of a 3D view: the whole surface, lying wide, at its full size. */
 export function floorOptions(options) {
     const rest = { ...options, orientation: "landscape" };
@@ -122,6 +128,7 @@ export function buildTurn(options, settings = {}) {
         // The colours the crowd has in the flat drawing (which the floor no longer carries) are read from a small drawing of the same options.
         crowdStyle: uprights.defs === undefined ? "" : crowdVars(drawKyogijo({ ...asked, size: "badge", style: "none" })),
         venue: venue !== undefined,
+        ...lightingOf(venue, asked.crowd),
         look: lookOf(floor),
         planes,
         box,

package/dist/turn.style.js

@@ -89,6 +89,16 @@ export const KYOGIJO_TURN_STYLE = `
 /* LED boards: the housing and the screen are dark; the lit parts (class u-led) carry their own colours, and are what a lighting layer makes glow. */
 .ky-turn .u-led-bed{fill:#0b0f14}
 .ky-turn .u-led-screen{fill:#06121d}
+/* Night: the house is down. The venue's own colours go dark in either theme (the page's theme is the page's), the seats under a veil, small lights show along the aisles, the exits are green, and the windows, the coping and the lanes of the concourse are softly lit. */
+.ky-turn[data-lighting=night]{--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[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=night] .u-suite-win{fill:color-mix(in srgb,var(--ky-night-aisle) 50%,#2a2218)}
+.ky-turn[data-lighting=night] .u-coping{fill:color-mix(in srgb,var(--ky-night-rim) 55%,var(--ky-up-fascia))}
+.ky-turn[data-lighting=night] .u-suite-ledge{fill:color-mix(in srgb,var(--ky-night-rim) 45%,var(--ky-up-fascia))}
+.ky-turn[data-lighting=night] .u-clane{stroke:var(--ky-night-rim);stroke-opacity:.4}
+.ky-turn[data-lighting=night] .u-apron{fill:#30363e}
 .ky-turn .u-back{fill:color-mix(in srgb,var(--ky-up-fascia) 66%,var(--ky-cr-bed))}
 .ky-turn .u-backrib{stroke:var(--ky-cr-bed);stroke-width:.7;stroke-opacity:.7}
 .ky-turn .u-coping{fill:color-mix(in srgb,var(--ky-up-fascia) 70%,var(--ky-cr-conc))}

package/dist/types.d.ts

@@ -274,6 +274,14 @@ export type SheetShow = "sheet" | "half" | "house" | "folded";
 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. The named presets are the base other lightings are added to; `false` is no lighting. Off by default.
+ */
+export type LightingPreset = "night";
+export type LightingOptions = LightingPreset | boolean | {
+    preset?: LightingPreset;
+};
 /** The patterns a ribbon board shows: `bands` (two bands of colour, in panels), `blocks` (a block of colour to a panel), `chevrons` (arrows running along it) or `waves`. */
 export type LedBoardPattern = "bands" | "blocks" | "chevrons" | "waves";
 /**
@@ -347,6 +355,8 @@ export interface CrowdOptions {
      * middle of the surface. `true` for both in the package's colours, or `{ ribbon, scoreboard, colors, pattern, score }`. Generic content only. Off by default. See `docs/boards.md`.
      */
     boards?: boolean | LedBoardOptions;
+    /** The lighting of the venue: `"night"` dims the house and lights the surface, the aisles, the boards and the exits. Off by default. See `docs/venues.md`. */
+    lighting?: LightingOptions;
 }
 /**
  * The parts of a surface a drawing can be cropped to (`range`). Football: `red-zone`, `between-the-20s`, `end-zone`, `field-of-play`, `own-half`, `opponent-half`.

package/dist/venue.boards.d.ts

@@ -9,6 +9,8 @@ export interface Boards {
     colors: [string, string, string];
     pattern: LedBoardPattern;
     score: [number, number];
+    /** Each lit panel has a halo under it (the venue is lit as at night). */
+    glow: boolean;
 }
 /** The package's own colours of light: amber, blue and a white with a little blue in it. */
 export declare const BOARD_COLORS: readonly [string, string, string];
@@ -42,12 +44,14 @@ export declare const safeColor: (value: unknown) => string | undefined;
 export declare function resolveBoards(ask: boolean | LedBoardOptions | undefined | null, team?: {
     home?: string;
     away?: string;
-}): Boards | undefined;
+}, glow?: boolean): Boards | undefined;
 /**
  * A ribbon on a quad `[a, b, c, d]` of a plane (a and b along its lower edge, d and c along its upper): a dark housing with panels of light in it, in the pattern asked. `run` is how far along the ribbon this quad starts, in feet,
  * so that the panels carry on in the colour they were from one quad to the next. A quad that is not a quad is the housing alone.
  */
-export declare function ledStrip(corners: readonly Pt[], look: Pick<Boards, "colors" | "pattern">, run?: number): string;
+export declare function ledStrip(corners: readonly Pt[], look: Pick<Boards, "colors" | "pattern"> & {
+    glow?: boolean;
+}, run?: number): string;
 /** The ribbon on a wall, `length` feet long and `height` feet high: the same strip, on a rectangle (its lower edge is the wall's lower edge). */
 export declare const ledWall: (length: number, height: number, look: Pick<Boards, "colors" | "pattern">, run?: number) => string;
 /** A walk between two tiers: the tier below it, the one above and the walk's own outlines. */

package/dist/venue.boards.js

@@ -25,7 +25,7 @@ export const BOARD = {
 const COLOR = /^(#[0-9a-f]{3,8}|(?:rgb|hsl)a?\([\d\s.,%/-]{3,40}\)|[a-z]{3,24})$/i;
 export const safeColor = (value) => (typeof value === "string" && COLOR.test(value.trim()) ? value.trim() : undefined);
 /** The boards a `boards` option asks for (the crowd's `home` and `away` are the colours when it names none), or `undefined` for none. */
-export function resolveBoards(ask, team = {}) {
+export function resolveBoards(ask, team = {}, glow = false) {
     if (ask === undefined || ask === null || ask === false)
         return undefined;
     const o = ask === true ? {} : ask;
@@ -38,6 +38,7 @@ export function resolveBoards(ask, team = {}) {
         colors,
         pattern: BOARD_PATTERNS.includes(o.pattern) ? o.pattern : "bands",
         score: [whole(o.score?.[0]), whole(o.score?.[1])],
+        glow,
     };
     return boards.ribbon || boards.scoreboard ? boards : undefined;
 }
@@ -76,7 +77,7 @@ export function ledStrip(corners, look, run = 0) {
             });
             paint(color, `M${pts.map(at).join("L")}`);
         });
-        const waves = [...lit].map(([color, shapes]) => `<path class="u-led" fill="none" stroke="${color}" stroke-width="${n(BOARD.ribbon * 0.2)}" stroke-linecap="round" stroke-linejoin="round" d="${shapes.join("")}"/>`);
+        const waves = [...lit].map(([color, shapes]) => (look.glow === true ? `<path class="u-led-glow" fill="none" stroke="${color}" stroke-opacity=".3" stroke-width="${n(BOARD.ribbon * 0.7)}" stroke-linecap="round" d="${shapes.join("")}"/>` : "") + `<path class="u-led" fill="none" stroke="${color}" stroke-width="${n(BOARD.ribbon * 0.2)}" stroke-linecap="round" stroke-linejoin="round" d="${shapes.join("")}"/>`);
         return bed + waves.join("");
     }
     for (let i = 0; i < panels; i += 1) {
@@ -99,7 +100,9 @@ export function ledStrip(corners, look, run = 0) {
             paint(other, loop([across(s0, mid + 0.03), across(s1, mid + 0.03), across(s1, hi), across(s0, hi)]));
         }
     }
-    return bed + [...lit].map(([color, shapes]) => `<path class="u-led" fill="${color}" d="${shapes.join("")}"/>`).join("");
+    // A halo under each colour's panels: the same shapes, stroked wide and faint, so that the light seems to spill over the housing and the wall beside it.
+    const halo = (color, shapes) => (look.glow === true ? `<path class="u-led-glow" fill="${color}" fill-opacity=".3" stroke="${color}" stroke-opacity=".3" stroke-width="${n(BOARD.ribbon * 0.6)}" stroke-linejoin="round" d="${shapes.join("")}"/>` : "");
+    return bed + [...lit].map(([color, shapes]) => `${halo(color, shapes)}<path class="u-led" fill="${color}" d="${shapes.join("")}"/>`).join("");
 }
 /** The ribbon on a wall, `length` feet long and `height` feet high: the same strip, on a rectangle (its lower edge is the wall's lower edge). */
 export const ledWall = (length, height, look, run = 0) => ledStrip([[0, height], [length, height], [length, 0], [0, 0]], look, run);
@@ -162,7 +165,8 @@ function boardFace(w, h, look) {
     const [c0, c1, c2] = look.colors;
     const edge = Math.min(0.5, h * 0.06);
     const band = h * 0.1;
-    let svg = `<rect class="u-led-bed" width="${n(w)}" height="${n(h)}"/><rect class="u-led-screen" x="${n(edge)}" y="${n(edge)}" width="${n(w - 2 * edge)}" height="${n(h - 2 * edge)}"/>`;
+    const halo = look.glow ? `<rect class="u-led-glow" x="${n(-0.8)}" y="${n(-0.8)}" width="${n(w + 1.6)}" height="${n(h + 1.6)}" rx="1" fill="${c2}" fill-opacity=".2"/>` : "";
+    let svg = `${halo}<rect class="u-led-bed" width="${n(w)}" height="${n(h)}"/><rect class="u-led-screen" x="${n(edge)}" y="${n(edge)}" width="${n(w - 2 * edge)}" height="${n(h - 2 * edge)}"/>`;
     svg += `<path class="u-led" fill="${c2}" d="M${n(edge)} ${n(edge)}h${n(w - 2 * edge)}v${n(band)}h${n(-(w - 2 * edge))}zM${n(edge)} ${n(h - edge - band)}h${n(w - 2 * edge)}v${n(band)}h${n(-(w - 2 * edge))}z"/>`;
     const block = Math.min(w * 0.2, h * 0.5);
     const [yb, hb] = [h * 0.28, h * 0.44];
@@ -240,7 +244,8 @@ export function planRibbons(stands, look) {
         return "";
     const cell = BOARD.panel;
     const lit = look.colors.map((color, k) => el("path", { class: "ky-cr-led", d: paths, fill: "none", stroke: color, "stroke-width": 2.2, "stroke-dasharray": `${cell} ${cell * 2}`, "stroke-dashoffset": -cell * k }));
-    return el("g", { class: "ky-cr-ribbon" }, el("path", { class: "ky-cr-led-line", d: paths, "stroke-width": 3.4 }) + lit.join(""));
+    const glow = look.glow ? look.colors.map((color, k) => el("path", { class: "ky-cr-led-glow", d: paths, fill: "none", stroke: color, "stroke-opacity": 0.3, "stroke-width": 7, "stroke-dasharray": `${cell} ${cell * 2}`, "stroke-dashoffset": -cell * k })).join("") : "";
+    return el("g", { class: "ky-cr-ribbon" }, el("path", { class: "ky-cr-led-line", d: paths, "stroke-width": 3.4 }) + glow + lit.join(""));
 }
 /** The scoreboard in the flat plan, as the board hangs over the surface seen from above: its dark cap with a line of light round it and its four edges' colours. */
 export function planScoreboard(box, look) {
@@ -250,7 +255,8 @@ export function planScoreboard(box, look) {
     const inner = { x: b.x + rim * 2, y: b.y + rim * 2, w: b.w - rim * 4, d: b.d - rim * 4 };
     const rect = (cls, r, extra = {}) => el("rect", { class: cls, x: n(r.x), y: n(r.y), width: n(r.w), height: n(r.d), rx: n(rim), ...extra });
     const edge = (x, y, w, h, color) => el("rect", { class: "ky-cr-led", x: n(x), y: n(y), width: n(w), height: n(h), fill: color });
-    return el("g", { class: "ky-cr-board" }, rect("ky-cr-led-bed", b) +
+    return el("g", { class: "ky-cr-board" }, (look.glow ? rect("ky-cr-led-glow", { x: b.x - rim * 2, y: b.y - rim * 2, w: b.w + rim * 4, d: b.d + rim * 4 }, { fill: c2, "fill-opacity": 0.22 }) : "") +
+        rect("ky-cr-led-bed", b) +
         edge(inner.x, inner.y, inner.w, rim, c0) +
         edge(inner.x, inner.y + inner.d - rim, inner.w, rim, c1) +
         edge(inner.x, inner.y, rim, inner.d, c2) +

package/dist/venue.d.ts

@@ -1,7 +1,7 @@
 import { type Crowd, type CrowdStands } from "./crowd.ts";
 import { type Cut } from "./venue.geom.ts";
 import { type Upright } from "./turn.kit.ts";
-import type { LedBoardOptions, SurfaceOptions } from "./types.ts";
+import type { LedBoardOptions, LightingOptions, SurfaceOptions } from "./types.ts";
 /** What can be asked of the venue. */
 export interface VenueSettings {
     /** Roofs and canopies over the top tier of the stands: a canopy over the back of the top tier in the open, a lid over a hall. They give way to the eye as the walls do. Off by default. */
@@ -17,6 +17,11 @@ export interface VenueSettings {
      * colours, or `{ ribbon, scoreboard, colors, pattern, score }`. Generic content, never a logo, a sponsor or a real board's text. Off by default; it wins over the crowd's own `boards`, and `false` turns that one off. See `docs/boards.md`.
      */
     boards?: boolean | LedBoardOptions;
+    /**
+     * The lighting: `"night"` (or `true`, or `{ preset: "night" }`) dims the seats, lights the surface with a pool of light round it, shows small lights along the aisles and the exits, makes the boards glow and lights the rim of the concourse.
+     * Off by default; it wins over the crowd's own `lighting`, and `false` turns that one off. See `docs/venues.md`.
+     */
+    lighting?: LightingOptions;
     /** How finely the curves are cut: `low` a facet to each corner, `auto` (the default) three, `high` six; an oval is 12, 28 or 56 facets round. */
     detail?: Cut;
 }

package/dist/venue.js

@@ -7,8 +7,9 @@ import { patterns } from "./crowd.draw.js";
 import { crowdStands } from "./draw.js";
 import { groundById } from "./grounds.js";
 import { ARC_STEPS, clipAround, clipConvex, clipSegment, areaOf, pointList, raked, slopeOf, stripsOf, tidy } from "./venue.geom.js";
-import { apronPlanes, backEdges, backWall, concourseFloor, rimAt, suiteWall } from "./venue.fill.js";
+import { APRON_RISE, apronPlanes, backEdges, backWall, concourseFloor, rimAt, suiteWall } from "./venue.fill.js";
 import { firstHit, realBuilding } from "./venue.real.js";
+import { lightPool, resolveLighting } 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 };
@@ -73,6 +74,8 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
             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}"/>`;
         }
+        if (night)
+            svg += `<polygon class="u-veil" points="${pointList(corners)}"/>`;
         if (fine) {
             let plain = "";
             let vomitory = "";
@@ -90,7 +93,7 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
             if (plain !== "")
                 svg += `<path class="ky-cr-aisle" fill="none" stroke-width="1.1" d="${plain}"/>`;
             if (vomitory !== "")
-                svg += `<path class="ky-cr-aisle" fill="none" stroke-width="2.4" d="${vomitory}"/>`;
+                svg += `<path class="${night ? "ky-cr-aisle ky-cr-vom" : "ky-cr-aisle"}" fill="none" stroke-width="2.4" d="${vomitory}"/>`;
         }
         return svg;
     };
@@ -99,7 +102,8 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     const links = tierLinks(stands);
     for (const l of links)
         chained.add(l.after);
-    const boards = resolveBoards(v.boards !== undefined ? v.boards : crowd.boards, { home: crowd.home, away: crowd.away });
+    const night = resolveLighting(v.lighting !== undefined ? v.lighting : crowd.lighting) === "night";
+    const boards = resolveBoards(v.boards !== undefined ? v.boards : crowd.boards, { home: crowd.home, away: crowd.away }, night);
     const ribbons = [];
     /** How far along the ribbon of one level the next piece of it starts, in feet, so that its panels carry on. */
     let run = 0;
@@ -187,6 +191,9 @@ 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)
+        seatPlanes.push(lightPool("night-pool", stands.box, lift + APRON_RISE + 0.03));
     const items = [];
     if (seatPlanes.length > 0)
         items.push({ id: "stands", kind: "stands", at: centre, height: topOf(seatPlanes), planes: seatPlanes });

package/dist/venue.lighting.d.ts

@@ -0,0 +1,18 @@
+import { type Plane } from "./turn.kit.ts";
+import type { LightingOptions, LightingPreset } from "./types.ts";
+export declare const LIGHTING_PRESETS: readonly LightingPreset[];
+/** The lighting an option asks for: a named preset, `true` for the first (night), `{ preset }`, or `undefined` for none (false, nothing, an unknown name). */
+export declare function resolveLighting(ask: LightingOptions | undefined | null): LightingPreset | 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;
+    readonly edge: 0.7;
+    readonly strength: 0.34;
+};
+/** The pool of light on the floor round the playing surface: a flat plane under the seats with a radial gradient that is clear over the middle (the markings stay as they are) and glows round its edge. */
+export declare function lightPool(id: string, box: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}, z: number): Plane;

package/dist/venue.lighting.js

@@ -0,0 +1,26 @@
+// The lighting of a venue. `night` is the first preset: the house goes down, the playing surface stays lit, small lights show along the aisles and stairs, the ribbon boards and the scoreboard glow and the exits and the concourse rim are
+// softly lit. It is made of what the venue already has: the colours are custom properties a stylesheet sets on the 3D view's root (`data-lighting="night"`, see turn.style.ts) and on the plan's crowd (`ky-night`), a veil over each
+// plane of seats, a pool of light on the floor round the surface and a halo under each lit board panel; nothing is worked out again as the view turns. Later presets (a show's colours and chases) are added to the same option.
+// Pure: data in, planes out.
+import { flat, n } from "./turn.kit.js";
+export const LIGHTING_PRESETS = ["night"];
+/** The lighting an option asks for: a named preset, `true` for the first (night), `{ preset }`, or `undefined` for none (false, nothing, an unknown name). */
+export function resolveLighting(ask) {
+    if (ask === undefined || ask === null || ask === false)
+        return undefined;
+    if (ask === true)
+        return "night";
+    const name = typeof ask === "string" ? ask : ask.preset ?? "night";
+    return LIGHTING_PRESETS.includes(name) ? name : 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 const POOL = { reach: 20, edge: 0.7, strength: 0.34 };
+/** The pool of light on the floor round the playing surface: a flat plane under the seats with a radial gradient that is clear over the middle (the markings stay as they are) and glows round its edge. */
+export function lightPool(id, box, z) {
+    const [w, h] = [box.w + 2 * POOL.reach, box.h + 2 * POOL.reach];
+    const gid = `${id}-g`;
+    const svg = `<defs><radialGradient id="${gid}" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#fff4dc" stop-opacity="0"/><stop offset="${POOL.edge - 0.12}" stop-color="#fff4dc" stop-opacity="0"/>` +
+        `<stop offset="${POOL.edge}" stop-color="#fff4dc" stop-opacity="${POOL.strength}"/><stop offset="1" stop-color="#fff4dc" stop-opacity="0"/></radialGradient></defs>` +
+        `<rect class="u-pool" width="${n(w)}" height="${n(h)}" fill="url(#${gid})"/>`;
+    return flat(id, "apron", box.x - POOL.reach, box.y - POOL.reach, box.x + box.w + POOL.reach, box.y + box.h + POOL.reach, z, svg);
+}

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

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

package/package.json

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