@johnmorrisdotca/kyogijo-stadiums 0.36.0 → 0.38.0

package/CHANGELOG.md

@@ -7,6 +7,23 @@ 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
+
+- **LED boards** (`boards`, [the LED boards](./docs/venues.md#led-boards), `src/venue.boards.ts`): the ribbon boards along the fascia between the seating levels, and a scoreboard hung over the middle of the playing surface, for every real venue (the thirty-two arenas of the NHL, BC Place, Lumen Field, Korakuen Hall and the ballparks), for the usual stands, in a district, and, as `stadium: { boards }`, round a tournament hall. `venue: { boards: true | { ribbon, scoreboard, colors, pattern, score } }` in the 3D view, `crowd: { boards }` in the plan (and read by the 3D view where `venue.boards` says nothing); off by default, and a drawing without it is exactly what it was. The content is generic and ours: panels of colour in `bands`, `blocks`, `chevrons` or `waves`, and a plain score in seven-segment digits (paths, no font); the colours are the asker's, else the crowd's `home` and `away`, else amber, blue and white (any other string than a hex, `rgb()`, `hsl()` or a name is ignored). In 3D a ribbon is the top 3.8 feet of the suite level's wall, a plane of its own (the walk below it is the walk less that strip; a venue with one level has its ribbon on the front of that level), and the scoreboard is four faces with the score on each, a ring of display under them, a cap and a strut, hung over the surface by a fifth of its longer side and sized by it (an arena's is about 28 by 19 feet). A ballpark has no scoreboard over the field, a hall has the layout's own (only ribbons there), and a score drawing's own scoreboard replaces the venue's. Every lit shape carries the class `u-led` (`ky-cr-led` in the plan) over a dark housing, for a lighting layer to make glow; the planes are the kinds `ribbon` and `hung-board` (uprights `ribbon-boards` and `hung-board`, said in words in English and Japanese). `turn.update(options, { venue: { boards } })` changes them while the view turns. New exports: `LedBoardOptions` and `LedBoardPattern`. About 17 KB of source in the one new module (`dist/venue.boards.js`), a ribbon of a 32-arena venue being a few dozen planes.
+- **An LED boards switch on the demo** (kept in the address as `boards=1`): a button in the bar over the venues page's view and the home page's featured arena, which draws it in the plan and in 3D and, in 3D, changes it without stopping or sending back the turn; a checkbox on the stadiums, tournament layouts and district pages.
+
 ## [0.36.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)). 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, 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, 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;
@@ -188,6 +188,10 @@ export interface Crowd {
     /** Whether the seats are drawn (a real venue's building is, without them, when this is false). */
     stands: boolean;
     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

@@ -3,6 +3,8 @@
 // All of it is patterns, paths and rectangles, which every renderer of the package reads. The tiles are made from a seed with a generator of our own, so the same options give
 // 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;
@@ -67,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;
@@ -193,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)
@@ -210,13 +217,26 @@ export function drawCrowd(stands, o) {
                 body += el("path", { d: outlinePath(ring.region), fill: "none", stroke: "#000", "stroke-opacity": 0.16, "stroke-width": 18 });
         }
     }
+    // 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 }, 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) {
@@ -255,4 +275,12 @@ export const KYOGIJO_CROWD_STYLE = `
 .kyogijo .ky-cr-north-n{fill:none;stroke:var(--ky-cr-rim);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
 .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}`.trim();
+.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

@@ -34,6 +34,8 @@ export function resolveCrowd(value) {
         real: o.real === true,
         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, 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

@@ -15,6 +15,7 @@ import { outlineOf } from "./outline.js";
 import { fill } from "./strings.js";
 import { textWidth } from "./text.js";
 import { uprightsFor } from "./uprights.js";
+import { hallBoards } from "./venue.boards.js";
 import { VERSION } from "./version.js";
 const metres = (ft) => ft / FEET_PER_METRE;
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
@@ -267,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" });
+        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";
@@ -177,7 +177,7 @@ export function buildMultiTurn(options, settings = {}) {
     let crowdStyle = "";
     if (drawn.stands !== undefined && keep("stands")) {
         const roof = typeof settings.venue === "object" && settings.venue.roof !== undefined ? settings.venue.roof : typeof options.stadium === "object" && options.stadium.roof === true;
-        const venue = standsVenueOf(drawn.stands.stands, drawn.stands.crowd, { sport: drawn.stands.standsLike }, { fill: true, ...(typeof settings.venue === "object" ? settings.venue : {}), roof, id }, 0);
+        const venue = standsVenueOf(drawn.stands.stands, drawn.stands.crowd, { sport: drawn.stands.standsLike }, { fill: true, ...(typeof settings.venue === "object" ? settings.venue : {}), roof, id, noCentre: true }, 0);
         items.push(...venue.items.filter((item) => item.kind !== "roof" || roof));
         defs = venue.defs;
         crowdStyle = "--ky-cr-home:#8b94a3;--ky-cr-away:#8b94a3";
@@ -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 { 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). */
@@ -247,6 +247,8 @@ export interface MultiOptions {
         roof?: boolean;
         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/strings.d.ts

@@ -1046,7 +1046,7 @@ export interface KyogijoWords {
         item: string;
         itemSag: string;
         /** The names of what stands on the surface, by kind. */
-        parts: Record<"scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge" | "surrounds" | "officials" | "judges" | "deck" | "cage-fence" | "cage-posts" | "ring-ropes" | "ring-posts", string>;
+        parts: Record<"scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge" | "surrounds" | "officials" | "judges" | "deck" | "cage-fence" | "cage-posts" | "ring-ropes" | "ring-posts" | "ribbon-boards" | "hung-board", string>;
     };
     /** The names of the zones that `zoneAt` answers with (rules.ts), by id. */
     rules: Record<RuleId, string>;

package/dist/strings.js

@@ -455,7 +455,7 @@ export const KYOGIJO_STRINGS = {
             announce: "{name} view", announceAngle: "Turned to {yaw} degrees, seen from {pitch} degrees above the floor.",
             flat: "This browser cannot draw the 3D view, so the flat drawing is shown.",
             standing: "Standing on it, in the 3D view: {list}.", item: "{name} {h}", itemSag: "{name} {h} at the posts, {low} at the middle",
-            parts: { scoreboard: "scoreboard (lower edge)", net: "net", antennae: "antennae", goalposts: "goal posts", netposts: "net posts", hoop: "baskets", goal: "goals", boards: "boards and glass", stumps: "stumps", pylons: "pylons", flags: "corner flags", fence: "fence", backstop: "backstop", "foul-poles": "foul poles", "table-legs": "table top", walls: "walls", "starting-blocks": "starting blocks", "backstroke-flags": "backstroke flags", "false-start-rope": "false start rope", springboards: "springboards", platforms: "platforms", "judges-stand": "judges' stand", hurdles: "hurdles", steeplechase: "steeplechase barriers", "high-jump": "high jump uprights and bar", "pole-vault": "pole vault uprights and bar", cage: "discus and hammer cage", padding: "padding", "rink-boards": "boards", mound: "clay mound", azuchi: "azuchi", targets: "targets", stands: "stands", "wall-seats": "seats on top of the wall", roof: "roof", gallery: "gallery", dais: "dais", banner: "banner", shrine: "shrine", "mat-edge": "mat thickness", surrounds: "surrounds", officials: "umpires' chairs and score tables", judges: "name cards on the judges' table", deck: "platform", "cage-fence": "fence", "cage-posts": "padded posts", "ring-ropes": "ropes", "ring-posts": "corner posts" },
+            parts: { scoreboard: "scoreboard (lower edge)", net: "net", antennae: "antennae", goalposts: "goal posts", netposts: "net posts", hoop: "baskets", goal: "goals", boards: "boards and glass", stumps: "stumps", pylons: "pylons", flags: "corner flags", fence: "fence", backstop: "backstop", "foul-poles": "foul poles", "table-legs": "table top", walls: "walls", "starting-blocks": "starting blocks", "backstroke-flags": "backstroke flags", "false-start-rope": "false start rope", springboards: "springboards", platforms: "platforms", "judges-stand": "judges' stand", hurdles: "hurdles", steeplechase: "steeplechase barriers", "high-jump": "high jump uprights and bar", "pole-vault": "pole vault uprights and bar", cage: "discus and hammer cage", padding: "padding", "rink-boards": "boards", mound: "clay mound", azuchi: "azuchi", targets: "targets", stands: "stands", "wall-seats": "seats on top of the wall", roof: "roof", gallery: "gallery", dais: "dais", banner: "banner", shrine: "shrine", "mat-edge": "mat thickness", surrounds: "surrounds", officials: "umpires' chairs and score tables", judges: "name cards on the judges' table", deck: "platform", "cage-fence": "fence", "cage-posts": "padded posts", "ring-ropes": "ropes", "ring-posts": "corner posts", "ribbon-boards": "LED ribbon boards", "hung-board": "centre-hung scoreboard" },
         },
         rules: {
             "defensive-zone": "Defensive zone",
@@ -1014,7 +1014,7 @@ export const KYOGIJO_STRINGS = {
             announce: "{name}の視点", announceAngle: "向きは{yaw}度、見下ろす角度は{pitch}度です。",
             flat: "このブラウザーでは3D表示ができないため、平面の図を表示しています。",
             standing: "3D表示で立って見えるもの：{list}。", item: "{name} {h}", itemSag: "{name} 支柱の位置で{h}（中央は{low}）",
-            parts: { scoreboard: "スコアボードの下端", net: "ネット", antennae: "アンテナ", goalposts: "ゴールポスト", netposts: "支柱", hoop: "バスケットゴール", goal: "ゴール", boards: "ボードとガラス", stumps: "ウィケットのスタンプ", pylons: "パイロン", flags: "コーナーフラッグ", fence: "外野フェンス", backstop: "バックネット", "foul-poles": "ファウルポール", "table-legs": "天板", walls: "壁", "starting-blocks": "スタート台", "backstroke-flags": "背泳ぎ用フラッグ", "false-start-rope": "フォルススタートロープ", springboards: "飛板", platforms: "固定台", "judges-stand": "ジャッジ台", hurdles: "ハードル", steeplechase: "障害物", "high-jump": "走高跳の支柱とバー", "pole-vault": "棒高跳の支柱とバー", cage: "円盤投・ハンマー投の囲い", padding: "防護マット", "rink-boards": "フェンス", mound: "土の台", azuchi: "安土", targets: "的", stands: "スタンド", "wall-seats": "壁の上の観客席", roof: "屋根", gallery: "見学席", dais: "上座の台", banner: "垂れ幕", shrine: "神棚", "mat-edge": "畳の厚み", surrounds: "競技エリアのフェンス", officials: "審判席と記録台", judges: "審判員席の名札", deck: "台", "cage-fence": "金網", "cage-posts": "パッド付き支柱", "ring-ropes": "ロープ", "ring-posts": "コーナーポスト" },
+            parts: { scoreboard: "スコアボードの下端", net: "ネット", antennae: "アンテナ", goalposts: "ゴールポスト", netposts: "支柱", hoop: "バスケットゴール", goal: "ゴール", boards: "ボードとガラス", stumps: "ウィケットのスタンプ", pylons: "パイロン", flags: "コーナーフラッグ", fence: "外野フェンス", backstop: "バックネット", "foul-poles": "ファウルポール", "table-legs": "天板", walls: "壁", "starting-blocks": "スタート台", "backstroke-flags": "背泳ぎ用フラッグ", "false-start-rope": "フォルススタートロープ", springboards: "飛板", platforms: "固定台", "judges-stand": "ジャッジ台", hurdles: "ハードル", steeplechase: "障害物", "high-jump": "走高跳の支柱とバー", "pole-vault": "棒高跳の支柱とバー", cage: "円盤投・ハンマー投の囲い", padding: "防護マット", "rink-boards": "フェンス", mound: "土の台", azuchi: "安土", targets: "的", stands: "スタンド", "wall-seats": "壁の上の観客席", roof: "屋根", gallery: "見学席", dais: "上座の台", banner: "垂れ幕", shrine: "神棚", "mat-edge": "畳の厚み", surrounds: "競技エリアのフェンス", officials: "審判席と記録台", judges: "審判員席の名札", deck: "台", "cage-fence": "金網", "cage-posts": "パッド付き支柱", "ring-ropes": "ロープ", "ring-posts": "コーナーポスト", "ribbon-boards": "LEDリボンビジョン", "hung-board": "センタービジョン（吊り下げ式スコアボード）" },
         },
         rules: {
             "defensive-zone": "ディフェンディングゾーン",

package/dist/turn-entry.d.ts

@@ -13,4 +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, 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.kit.d.ts

@@ -1,7 +1,7 @@
 /** A point or a direction: x, y, z in feet. */
 export type V3 = readonly [number, number, number];
 /** What a plane is a part of: it is the class of its element (`ky-up-<kind>`) and what a test finds it by. */
-export type PartKind = "post" | "net" | "tape" | "antenna" | "board" | "glass" | "rim" | "stanchion" | "frame" | "goal" | "flag" | "stump" | "leg" | "table" | "pylon" | "wall" | "screen" | "pole" | "ground" | "target" | "seats" | "concourse" | "fascia" | "roof" | "banner" | "platform" | "rail" | "matedge" | "shrine" | "surround" | "chair" | "desk" | "card" | "sign" | "apron" | "bench" | "floor";
+export type PartKind = "post" | "net" | "tape" | "antenna" | "board" | "glass" | "rim" | "stanchion" | "frame" | "goal" | "flag" | "stump" | "leg" | "table" | "pylon" | "wall" | "screen" | "pole" | "ground" | "target" | "seats" | "concourse" | "fascia" | "roof" | "banner" | "platform" | "rail" | "matedge" | "shrine" | "surround" | "chair" | "desk" | "card" | "sign" | "apron" | "bench" | "floor" | "ribbon" | "hung-board";
 /** One flat rectangle. Its own x runs along `u` (its whole length) and its own y along `v`; `o` is the corner both start from. `svg` is what is drawn on it, in feet along `u` and `v`. */
 export interface Plane {
     /** A name that says what it is and where: `net`, `post-left`, `goal-right-back`. */
@@ -42,7 +42,7 @@ export interface Plane {
     group?: number;
 }
 /** What stands on the surface as a thing a reader would name: a net, a basket, a goal, a pair of posts. */
-export type UprightKind = "scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge" | "surrounds" | "officials" | "judges" | "deck" | "cage-fence" | "cage-posts" | "ring-ropes" | "ring-posts";
+export type UprightKind = "scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge" | "surrounds" | "officials" | "judges" | "deck" | "cage-fence" | "cage-posts" | "ring-ropes" | "ring-posts" | "ribbon-boards" | "hung-board";
 /** A thing that stands on the surface: where, how high, and the planes it is made of. */
 export interface Upright {
     id: string;

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" };
@@ -23,7 +29,7 @@ export function floorOptions(options) {
 }
 const VIEWBOX = /viewBox="(-?[\d.]+) (-?[\d.]+) ([\d.]+) ([\d.]+)"/;
 /** The kinds of thing the venue makes. */
-const VENUE_KINDS = ["stands", "wall-seats", "roof", "gallery", "dais", "banner", "shrine", "mat-edge", "walls"];
+const VENUE_KINDS = ["stands", "wall-seats", "roof", "gallery", "dais", "banner", "shrine", "mat-edge", "walls", "ribbon-boards", "hung-board"];
 /** The sport and look a floor drawing says it is painted in (`data-sport` and `data-look` on its root), for the planes round it to be painted in the same. */
 function lookOf(floor) {
     const found = /^<svg[^>]*\sdata-sport="([\w-]+)" data-look="([\w-]+)"/.exec(floor);
@@ -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

@@ -86,6 +86,19 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-penb-side{fill:color-mix(in srgb,var(--ky-up-glass,#bcd2e0) 80%,#5d7a8f);filter:brightness(.72)}
 .ky-turn .u-teamb{fill:color-mix(in srgb,var(--ky-up-wood,#8a6a47) 80%,#2a2f36)}
 .ky-turn .u-teamb-side{fill:color-mix(in srgb,var(--ky-up-wood,#8a6a47) 80%,#2a2f36);filter:brightness(.7)}
+/* 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,32 @@ 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";
+/**
+ * The LED boards of a venue (`crowd.boards`, or `venue.boards` of the 3D view): the ribbon boards along the fascia between the seating levels, and a scoreboard hung over the playing surface. The content is generic: bands of colour,
+ * abstract patterns and a plain score, never a logo, a sponsor or text from a real board. `true` is both, in the package's own colours. Off by default.
+ */
+export interface LedBoardOptions {
+    /** The ribbon boards along the fascia between the levels (the front of the single level of a hall that has one). On by default. */
+    ribbon?: boolean;
+    /** The scoreboard hung over the middle of the playing surface, four sided, with a ring of display under it. On by default, and left out of a ballpark (whose scoreboard stands behind the outfield). */
+    scoreboard?: boolean;
+    /** One to three colours of the lights, as CSS colours (`#e03c31`, `rgb(...)`, a name). The crowd's `home` and `away` colours when left out and the crowd has them, else amber, blue and white. */
+    colors?: readonly string[];
+    /** What the ribbon boards show. `bands` by default. */
+    pattern?: LedBoardPattern;
+    /** The plain score on the scoreboard: home, then away, whole numbers 0 to 99. 0 and 0 by default. */
+    score?: readonly [number, number];
+}
 /**
  * The stands and the crowd round a surface (`crowd`). Every part is optional. `true` is the sport's usual venue, 85 percent full, with an away end, drawn in detail.
  * See `docs/crowd.md`.
@@ -324,6 +350,13 @@ export interface CrowdOptions {
     wallSeats?: boolean;
     /** How much is drawn: `fine` (the crowd as heads and shoulders, empty seats, aisles), `plain` (blocks of colour), or `auto` (`plain` for `detail: "simple"` or a `width` under 480 pixels). */
     detail?: "auto" | "fine" | "plain";
+    /**
+     * LED boards: ribbon boards along the front of the upper tiers (drawn as a lit line in the flat plan, raised on the fascia of the suite level in the 3D view, where `venue.boards` says the same and wins) and a scoreboard over the
+     * 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/uprights.js

@@ -141,6 +141,8 @@ export function uprightsFor(o, settings = {}) {
     // The score, hung up: the badge on a board that turns to face the eye.
     const scored = o.home !== undefined && o.away !== undefined && o.size !== "badge";
     if (scored && settings.score !== "floor" && area !== undefined) {
+        // The score has a board of its own: the venue's hung scoreboard does not stand beside it.
+        items = items.filter((item) => item.kind !== "hung-board");
         const board = scoreboard(drawKyogijo({ ...o, size: "badge", style: "none", id: `${drawingId(o)}-board` }), sport, area, thin);
         if (board !== undefined)
             items.push(board);

package/dist/venue.boards.d.ts

@@ -0,0 +1,111 @@
+import { type CrowdStands, type Pt, type StandRing } from "./crowd.ts";
+import { type Plane } from "./turn.kit.ts";
+import type { LedBoardOptions, LedBoardPattern } from "./types.ts";
+/** The boards a venue has, with every part's value. */
+export interface Boards {
+    ribbon: boolean;
+    scoreboard: boolean;
+    /** Three colours of light (a ribbon's bands and chevrons take them in turn). */
+    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];
+export declare const BOARD_PATTERNS: readonly LedBoardPattern[];
+/** The sizes of the boards, in feet (ours: the usual ones, no plan of a real board). */
+export declare const BOARD: {
+    /** How tall a ribbon is, and how long one of its panels. */
+    readonly ribbon: 3.8;
+    readonly panel: 9;
+    /** The scoreboard's share of the surface's length and width, its least and most, and how far its lower edge hangs over the surface (a share of the surface's longer side, least and most). */
+    readonly share: {
+        readonly w: 0.14;
+        readonly d: 0.22;
+    };
+    readonly wide: readonly [18, 52];
+    readonly deep: readonly [12, 30];
+    readonly hang: {
+        readonly share: 0.2;
+        readonly least: 28;
+        readonly most: 70;
+    };
+    /** The ring of display under the main board, its inset on each side, and the strut it hangs from. */
+    readonly ring: {
+        readonly rise: readonly [2.5, 4.5];
+        readonly inset: 0.06;
+    };
+    readonly strut: 9;
+};
+export declare const safeColor: (value: unknown) => string | 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 declare function resolveBoards(ask: boolean | LedBoardOptions | undefined | null, team?: {
+    home?: string;
+    away?: string;
+}, 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"> & {
+    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. */
+export interface TierLink {
+    c: CrowdStands["concourses"][number];
+    before: StandRing;
+    after: StandRing;
+}
+/** The walks between the tiers of a stands model, each with the tier it leaves and the tier it leads to. */
+export declare function tierLinks(stands: CrowdStands): TierLink[];
+/** The share of a plane of `rise` feet over a slope `g` (rise per foot across) that a ribbon of `BOARD.ribbon` feet takes at its top; 0 for a plane too flat to be a facade. */
+export declare function ribbonShare(rise: number, g: number): number;
+/** The size of the scoreboard over a surface of `w` by `h` feet (its long side along the surface's), and how high its lower edge hangs. */
+export declare function boardSize(w: number, h: number): {
+    w: number;
+    d: number;
+    hang: number;
+};
+/** Whether a sport has a scoreboard hung over its surface: a ballpark's stands behind the outfield, so it has none here. */
+export declare const hangsOver: (sport: string | undefined) => boolean;
+/**
+ * The scoreboard hung over the middle of a surface: a four sided board with its score on every face, a ring of display under it, a cap on top and a strut up to the rafters. `box` is the surface, `lift` how high the surface stands.
+ * Its faces look outwards, each the right way round for an eye outside it.
+ */
+export declare function centreBoard(id: string, box: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}, lift: number, look: Boards): Plane[];
+/** The size of the scoreboard in the flat plan, from the surface's box. */
+export declare const planBoard: (box: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}) => {
+    x: number;
+    y: number;
+    w: number;
+    d: number;
+};
+/** The ribbon boards in the flat plan: a lit line along the front of every tier that has a walk below it (the front of the tiers there is no walk to, where the venue has one level), panels of the colours in turn. */
+export declare function planRibbons(stands: CrowdStands, look: Boards): string;
+/** 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 declare function planScoreboard(box: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}, look: Boards): string;
+/** How tall the ribbon on the front of a tier is, for a front `top` feet high: the usual ribbon, or less where the front is low. */
+export declare const ribbonHigh: (top: number) => number;
+/** The ribbon on the top of a wall that stands over the line from `a` to `b` and is `top` feet high (the front of a tier): a wall of its own, as tall as `ribbonHigh` says. `run` is how far along the ribbon the wall starts. */
+export declare const fasciaRibbon: (id: string, a: Pt, b: Pt, top: number, look: Boards, run: number) => Plane;
+/** A hall's boards as its stadium asks for them: the layout has scoreboards of its own, so the hall has the ribbons and no scoreboard hung over its middle. */
+export declare const hallBoards: (ask: boolean | LedBoardOptions | undefined) => boolean | LedBoardOptions | undefined;

package/dist/venue.boards.js

@@ -0,0 +1,273 @@
+// The LED boards of a venue: the ribbon boards along the fascia between the seating levels, and the scoreboard hung over the middle of the playing surface, in the flat plan and in 3D. The content is generic and ours: panels
+// of colour in bands, blocks, chevrons or waves, and a plain score in seven-segment digits (paths, so that no font is needed): never a logo, a sponsor or a line of text from a real board. The colours are the asker's, else
+// the crowd's home and away colours, else the package's own amber, blue and white. Every lit shape carries the class `u-led` (`ky-cr-led` in the plan), so that a lighting layer can make it glow. Pure: data in, planes and markup out.
+import { outlinePath } from "./crowd.js";
+import { el } from "./format.js";
+import { bar, flat, n, plane, wall } from "./turn.kit.js";
+/** The package's own colours of light: amber, blue and a white with a little blue in it. */
+export const BOARD_COLORS = ["#ffb020", "#2bc4ff", "#f4f7ff"];
+export const BOARD_PATTERNS = ["bands", "blocks", "chevrons", "waves"];
+/** The sizes of the boards, in feet (ours: the usual ones, no plan of a real board). */
+export const BOARD = {
+    /** How tall a ribbon is, and how long one of its panels. */
+    ribbon: 3.8,
+    panel: 9,
+    /** The scoreboard's share of the surface's length and width, its least and most, and how far its lower edge hangs over the surface (a share of the surface's longer side, least and most). */
+    share: { w: 0.14, d: 0.22 },
+    wide: [18, 52],
+    deep: [12, 30],
+    hang: { share: 0.2, least: 28, most: 70 },
+    /** The ring of display under the main board, its inset on each side, and the strut it hangs from. */
+    ring: { rise: [2.5, 4.5], inset: 0.06 },
+    strut: 9,
+};
+/** A CSS colour that is safe to write into an attribute: a hex, `rgb()`, `hsl()` or a plain name. */
+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 = {}, glow = false) {
+    if (ask === undefined || ask === null || ask === false)
+        return undefined;
+    const o = ask === true ? {} : ask;
+    const given = (Array.isArray(o.colors) ? o.colors : [team.home, team.away]).map(safeColor).filter((c) => c !== undefined).slice(0, 3);
+    const colors = [0, 1, 2].map((i) => given[i] ?? (given.length > 0 ? (i === 2 ? given[0] : BOARD_COLORS[2]) : BOARD_COLORS[i]));
+    const whole = (v) => (typeof v === "number" && Number.isFinite(v) ? Math.min(99, Math.max(0, Math.trunc(v))) : 0);
+    const boards = {
+        ribbon: o.ribbon !== false,
+        scoreboard: o.scoreboard !== false,
+        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;
+}
+const lerp = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const at = (p) => `${n(p[0])} ${n(p[1])}`;
+const loop = (pts) => `M${pts.map(at).join("L")}Z`;
+/**
+ * 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 function ledStrip(corners, look, run = 0) {
+    const bed = `<path class="u-led-bed" d="${loop(corners)}"/>`;
+    if (corners.length !== 4)
+        return bed;
+    const [a, b, c, d] = corners;
+    const across = (s, t) => lerp(lerp(a, b, s), lerp(d, c, s), t);
+    const long = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const panels = Math.max(1, Math.round(long / BOARD.panel));
+    const first = Math.floor(run / BOARD.panel);
+    const lit = new Map();
+    const paint = (color, shape) => {
+        const list = lit.get(color) ?? [];
+        list.push(shape);
+        lit.set(color, list);
+    };
+    const [lo, hi] = [0.14, 0.86];
+    const gap = Math.min(0.06, 0.4 / panels);
+    if (look.pattern === "waves") {
+        // Three waves along the whole quad, one in each colour, a little apart.
+        const steps = Math.max(8, Math.round(long / 1.2));
+        look.colors.forEach((color, w) => {
+            const pts = Array.from({ length: steps + 1 }, (_, k) => {
+                const s = k / steps;
+                return across(s, 0.5 + 0.3 * Math.sin(((run + s * long) / BOARD.panel) * Math.PI * 1.2 + (w * 2 * Math.PI) / 3));
+            });
+            paint(color, `M${pts.map(at).join("L")}`);
+        });
+        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) {
+        const k = first + i;
+        const [s0, s1] = [i / panels + gap / 2, (i + 1) / panels - gap / 2];
+        const mine = look.colors[k % 3];
+        const other = look.colors[(k + 1) % 3];
+        if (look.pattern === "blocks") {
+            paint(mine, loop([across(s0, lo), across(s1, lo), across(s1, hi), across(s0, hi)]));
+        }
+        else if (look.pattern === "chevrons") {
+            // An arrow along the ribbon: a thick chevron pointing the way the run goes, in this panel's colour.
+            const w = s1 - s0;
+            const cell = (x, t) => across(s0 + x * w, lo + t * (hi - lo));
+            paint(mine, loop([cell(0, 0), cell(0.55, 0), cell(1, 0.5), cell(0.55, 1), cell(0, 1), cell(0.45, 0.5)]));
+        }
+        else {
+            const mid = (lo + hi) / 2;
+            paint(mine, loop([across(s0, lo), across(s1, lo), across(s1, mid - 0.03), across(s0, mid - 0.03)]));
+            paint(other, loop([across(s0, mid + 0.03), across(s1, mid + 0.03), across(s1, hi), across(s0, hi)]));
+        }
+    }
+    // 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);
+/** The walks between the tiers of a stands model, each with the tier it leaves and the tier it leads to. */
+export function tierLinks(stands) {
+    const links = [];
+    stands.concourses.forEach((c, ci) => {
+        let at = stands.rings.findIndex((r) => r.hole === c.region);
+        if (at < 1)
+            at = Math.min(ci + 1, stands.rings.length - 1);
+        const [before, after] = [stands.rings[at - 1], stands.rings[at]];
+        if (before !== undefined && after !== undefined)
+            links.push({ c, before, after });
+    });
+    return links;
+}
+/** The share of a plane of `rise` feet over a slope `g` (rise per foot across) that a ribbon of `BOARD.ribbon` feet takes at its top; 0 for a plane too flat to be a facade. */
+export function ribbonShare(rise, g) {
+    if (g < 0.25 || rise < BOARD.ribbon)
+        return 0;
+    const slant = (rise / g) * Math.hypot(1, g);
+    return clamp(BOARD.ribbon / slant, 0.06, 0.4);
+}
+// ---- The scoreboard. ----
+/** The size of the scoreboard over a surface of `w` by `h` feet (its long side along the surface's), and how high its lower edge hangs. */
+export function boardSize(w, h) {
+    const pick = (share, [lo, hi], side) => clamp(side * share, Math.min(lo, side * 0.6), hi);
+    return { w: pick(BOARD.share.w, BOARD.wide, w), d: pick(BOARD.share.d, BOARD.deep, h), hang: clamp(Math.max(w, h) * BOARD.hang.share, BOARD.hang.least, BOARD.hang.most) };
+}
+/** Whether a sport has a scoreboard hung over its surface: a ballpark's stands behind the outfield, so it has none here. */
+export const hangsOver = (sport) => sport !== "mlb";
+/** The segments of a seven-segment digit, a to g, that are lit for each digit. */
+const SEGMENTS = ["abcdef", "bc", "abged", "abgcd", "fgbc", "afgcd", "afgedc", "abc", "abcdefg", "abcdfg"];
+/** A number of one or two digits in seven segments, `high` feet tall, from (x, y) at its top left: the path and the width it takes. */
+function digits(value, x, y, high) {
+    const text = String(Math.min(99, Math.max(0, Math.trunc(value))));
+    const w = high * 0.56;
+    const t = high * 0.13;
+    const half = high / 2;
+    const rects = {
+        a: [t * 0.6, 0, w - t * 1.2, t],
+        b: [w - t, t * 0.6, t, half - t * 0.9],
+        c: [w - t, half + t * 0.3, t, half - t * 0.9],
+        d: [t * 0.6, high - t, w - t * 1.2, t],
+        e: [0, half + t * 0.3, t, half - t * 0.9],
+        f: [0, t * 0.6, t, half - t * 0.9],
+        g: [t * 0.6, half - t / 2, w - t * 1.2, t],
+    };
+    let d = "";
+    [...text].forEach((ch, i) => {
+        for (const s of SEGMENTS[Number(ch)]) {
+            const [rx, ry, rw, rh] = rects[s];
+            d += `M${n(x + i * (w + t) + rx)} ${n(y + ry)}h${n(rw)}v${n(rh)}h${n(-rw)}z`;
+        }
+    });
+    return { d, width: text.length * w + (text.length - 1) * t };
+}
+/** The face of the main board, `w` by `h` feet: a dark screen with a band of light along its top and bottom, a block of colour at each end, and the score between them. */
+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;
+    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];
+    svg += `<path class="u-led" fill="${c0}" d="M${n(edge * 2)} ${n(yb)}h${n(block)}v${n(hb)}h${n(-block)}z"/><path class="u-led" fill="${c1}" d="M${n(w - edge * 2 - block)} ${n(yb)}h${n(block)}v${n(hb)}h${n(-block)}z"/>`;
+    // The score: two numbers and a dash, as large as the face between the blocks lets them be.
+    const room = w - 2 * (block + edge * 4);
+    const digitCount = String(look.score[0]).length + String(look.score[1]).length;
+    const dash = 0.4;
+    const high = Math.min(h * 0.5, room / (digitCount * 0.56 + (digitCount - 2) * 0.13 + dash + 0.5));
+    const [home, away] = [digits(look.score[0], 0, 0, high), digits(look.score[1], 0, 0, high)];
+    const gap = high * 0.3;
+    const total = home.width + gap + high * dash + gap + away.width;
+    const x0 = (w - total) / 2;
+    const y0 = (h - high) / 2;
+    const [h0, a0] = [digits(look.score[0], x0, y0, high), digits(look.score[1], x0 + home.width + gap * 2 + high * dash, y0, high)];
+    svg += `<path class="u-led" fill="${c2}" d="${h0.d}${a0.d}M${n(x0 + home.width + gap)} ${n(y0 + high / 2 - high * 0.065)}h${n(high * dash)}v${n(high * 0.13)}h${n(-high * dash)}z"/>`;
+    return svg;
+}
+/**
+ * The scoreboard hung over the middle of a surface: a four sided board with its score on every face, a ring of display under it, a cap on top and a strut up to the rafters. `box` is the surface, `lift` how high the surface stands.
+ * Its faces look outwards, each the right way round for an eye outside it.
+ */
+export function centreBoard(id, box, lift, look) {
+    const size = boardSize(box.w, box.h);
+    const [cx, cy] = [box.x + box.w / 2, box.y + box.h / 2];
+    const [x0, x1, y0, y1] = [cx - size.w / 2, cx + size.w / 2, cy - size.d / 2, cy + size.d / 2];
+    const ring = clamp(size.w * 0.16, BOARD.ring.rise[0], BOARD.ring.rise[1]);
+    const body = clamp(size.w * 0.45, 8, 16);
+    const [z0, z1, z2] = [lift + size.hang, lift + size.hang + ring, lift + size.hang + ring + body];
+    const ins = size.w * BOARD.ring.inset;
+    const insD = size.d * BOARD.ring.inset;
+    // The faces, each from the left of an eye outside it to its right: +y, -y, +x, -x.
+    const faces = [
+        { name: "south", from: [x0, y1], to: [x1, y1] },
+        { name: "north", from: [x1, y0], to: [x0, y0] },
+        { name: "east", from: [x1, y1], to: [x1, y0] },
+        { name: "west", from: [x0, y0], to: [x0, y1] },
+    ];
+    const planes = [];
+    let run = 0;
+    for (const f of faces) {
+        const long = Math.hypot(f.to[0] - f.from[0], f.to[1] - f.from[1]);
+        planes.push(plane(`${id}-${f.name}`, "hung-board", [f.from[0], f.from[1], z2], [f.to[0] - f.from[0], f.to[1] - f.from[1], 0], [0, 0, z1 - z2], boardFace(long, body, look)));
+        // The ring of display under it, set in a little on every side, in the pattern the ribbons have.
+        const grow = (p, q) => {
+            const [dx, dy] = [(q[0] - p[0]) / long, (q[1] - p[1]) / long];
+            const cut = f.name === "south" || f.name === "north" ? ins : insD;
+            return [[p[0] + dx * cut, p[1] + dy * cut], [q[0] - dx * cut, q[1] - dy * cut]];
+        };
+        const [r0, r1] = grow(f.from, f.to);
+        const span = Math.hypot(r1[0] - r0[0], r1[1] - r0[1]);
+        planes.push(plane(`${id}-${f.name}-ring`, "hung-board", [r0[0], r0[1], z1], [r1[0] - r0[0], r1[1] - r0[1], 0], [0, 0, z0 - z1], ledWall(span, ring, look, run)));
+        run += long;
+    }
+    // The cap, a dark top with a thin line of light round its edge, and the strut the board hangs from.
+    const [w, d] = [x1 - x0, y1 - y0];
+    const rim = Math.min(0.5, d * 0.05);
+    const capSvg = `<rect class="u-led-bed" width="${n(w)}" height="${n(d)}"/><path class="u-led" fill="none" stroke="${look.colors[0]}" stroke-width="${n(rim)}" d="M${n(rim * 2)} ${n(rim * 2)}h${n(w - rim * 4)}v${n(d - rim * 4)}h${n(-(w - rim * 4))}z"/>`;
+    planes.push(flat(`${id}-cap`, "hung-board", x0, y0, x1, y1, z2, capSvg));
+    planes.push(...bar(`${id}-strut`, "frame", [cx, cy, z2], [cx, cy, z2 + BOARD.strut], 0.9, "u-led-bed"));
+    return planes;
+}
+// ---- The flat plan. ----
+/** The size of the scoreboard in the flat plan, from the surface's box. */
+export const planBoard = (box) => {
+    const s = boardSize(box.w, box.h);
+    return { x: box.x + (box.w - s.w) / 2, y: box.y + (box.h - s.d) / 2, w: s.w, d: s.d };
+};
+/** The ribbon boards in the flat plan: a lit line along the front of every tier that has a walk below it (the front of the tiers there is no walk to, where the venue has one level), panels of the colours in turn. */
+export function planRibbons(stands, look) {
+    const links = tierLinks(stands);
+    const fronts = links.length > 0 ? links.map((l) => l.after) : stands.rings.filter((r) => r.tier !== "wall" && r.tier !== "bleachers").slice(0, 1);
+    const paths = fronts.flatMap((ring) => (ring.hole === null ? [] : [outlinePath(ring.hole)])).join("");
+    if (paths === "")
+        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 }));
+    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) {
+    const b = planBoard(box);
+    const [c0, c1, c2] = look.colors;
+    const rim = b.d * 0.07;
+    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" }, (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) +
+        edge(inner.x + inner.w - rim, inner.y, rim, inner.d, c2));
+}
+/** How tall the ribbon on the front of a tier is, for a front `top` feet high: the usual ribbon, or less where the front is low. */
+export const ribbonHigh = (top) => Math.min(BOARD.ribbon, top * 0.6);
+/** The ribbon on the top of a wall that stands over the line from `a` to `b` and is `top` feet high (the front of a tier): a wall of its own, as tall as `ribbonHigh` says. `run` is how far along the ribbon the wall starts. */
+export const fasciaRibbon = (id, a, b, top, look, run) => {
+    const high = ribbonHigh(top);
+    return wall(id, "ribbon", a[0], a[1], b[0], b[1], top - high, top, ledWall(Math.hypot(b[0] - a[0], b[1] - a[1]), high, look, run));
+};
+/** A hall's boards as its stadium asks for them: the layout has scoreboards of its own, so the hall has the ribbons and no scoreboard hung over its middle. */
+export const hallBoards = (ask) => (ask === undefined || ask === false ? undefined : { ...(ask === true ? {} : ask), scoreboard: false });

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 { 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. */
@@ -12,12 +12,24 @@ export interface VenueSettings {
     walls?: boolean;
     /** Fill the empty places of the stands (the apron round the surface, the back of each bowl): on for a real venue's, off for the usual stands (where it is a tournament layout's hall that asks for it). */
     fill?: boolean;
+    /**
+     * The LED boards: ribbon boards along the fascia between the seating levels (on the front of the one level a venue has, where there is no walk) and a scoreboard hung over the middle of the playing surface. `true` for both in the package's
+     * 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;
 }
 /** The settings a venue is built from: the asker's, and the prefix of the ids of what it draws, which the view gives. */
 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;
 }
 /** 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

@@ -7,8 +7,10 @@ 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 };
 /** The sports played under a roof: their stands have a lid and not a canopy. */
@@ -72,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 = "";
@@ -89,19 +93,20 @@ 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;
     };
     // The tiers. A ring that no concourse leads to is the first of its chain: a low wall stands under its first row.
     const chained = new Set();
-    const links = stands.concourses.map((c, ci) => {
-        let at = stands.rings.findIndex((r) => r.hole === c.region);
-        if (at < 1)
-            at = Math.min(ci + 1, stands.rings.length - 1);
-        chained.add(stands.rings[at]);
-        return { c, before: stands.rings[at - 1], after: stands.rings[at] };
-    });
+    const links = tierLinks(stands);
+    for (const l of links)
+        chained.add(l.after);
+    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;
     for (const ring of stands.rings) {
         const strips = stripsOf(ring.region, ring.hole, ring.more ?? [], cut);
         const into = ring.tier === "wall" ? wallSeats : seatPlanes;
@@ -124,24 +129,45 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
                     if (Math.hypot(b[0] - a[0], b[1] - a[1]) < 0.5 || inCover([(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]))
                         continue;
                     const h = lift + ring.height[0];
-                    const w = wall(`${ring.id}-front-${si === 0 ? "" : `s${si}-`}${i}`, "fascia", a[0], a[1], b[0], b[1], 0, h, `<rect class="u-fascia" width="${n(Math.hypot(b[0] - a[0], b[1] - a[1]))}" height="${n(h)}"/>`);
+                    const id = `${ring.id}-front-${si === 0 ? "" : `s${si}-`}${i}`;
+                    const long = Math.hypot(b[0] - a[0], b[1] - a[1]);
+                    // A venue with one level has its ribbon on the front of that level: the front is the wall below the ribbon, and the ribbon a wall of its own over it.
+                    const ribbon = boards?.ribbon === true && links.length === 0 && ring.height[0] >= 5 ? ribbonHigh(h) : 0;
+                    const w = wall(id, "fascia", a[0], a[1], b[0], b[1], 0, h - ribbon, `<rect class="u-fascia" width="${n(long)}" height="${n(h - ribbon)}"/>`);
                     seatPlanes.push(shy(w, centre));
+                    if (ribbon > 0 && boards !== undefined) {
+                        ribbons.push(shy(fasciaRibbon(`${id}-ribbon`, a, b, h, boards, run), centre));
+                        run += long;
+                    }
                 }
             });
         }
     }
     // The walks between the tiers: a plane from the outer edge of one tier up to the first row of the next.
     for (const { c, before, after } of links) {
-        if (before === undefined || after === undefined)
-            continue;
+        run = 0;
+        const rise = after.height[0] - before.height[1];
         for (const q of quadsOf(stripsOf(c.region, c.hole, [], cut))) {
             const slope = slopeOf(q, lift + before.height[1], lift + after.height[0]);
             if (slope === undefined)
                 continue;
+            const share = boards?.ribbon === true ? ribbonShare(rise, Math.hypot(slope.slope.gx, slope.slope.gy)) : 0;
             for (const piece of pieces(tidy(q))) {
                 count += 1;
+                // A ribbon board is the top of the walk, a plane of its own over the same slope: the walk below it is the walk less that strip.
+                let walk = piece;
+                if (share > 0 && boards !== undefined && piece.length === 4) {
+                    const [a, b, c2, d] = piece;
+                    const cut1 = (p, q2) => [p[0] + (q2[0] - p[0]) * (1 - share), p[1] + (q2[1] - p[1]) * (1 - share)];
+                    const [e, f] = [cut1(a, d), cut1(b, c2)];
+                    walk = [a, b, f, e];
+                    const rib = raked(`ribbon-${count}`, "ribbon", [e, f, c2, d], slope.slope, slope.along, (corners) => ledStrip(corners, boards, run));
+                    if (rib !== undefined)
+                        ribbons.push({ ...rib, shy: slope.out });
+                    run += Math.hypot(b[0] - a[0], b[1] - a[1]);
+                }
                 // Where the empty places are filled, the walk between two tiers is the suite level: a facing wall with a band of windows, not a bare shelf.
-                const p = raked(`walk-${count}`, "concourse", piece, slope.slope, slope.along, (corners) => (filled ? suiteWall(corners) : `<polygon class="u-conc" points="${pointList(corners)}"/>`));
+                const p = raked(`walk-${count}`, "concourse", walk, slope.slope, slope.along, (corners) => (filled ? suiteWall(corners) : `<polygon class="u-conc" points="${pointList(corners)}"/>`));
                 if (p !== undefined)
                     seatPlanes.push({ ...p, shy: slope.out });
             }
@@ -165,9 +191,19 @@ 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 });
+    if (ribbons.length > 0)
+        items.push({ id: "ribbon-boards", kind: "ribbon-boards", at: centre, height: topOf(ribbons), planes: ribbons });
+    // The scoreboard hung over the middle of the surface (a ballpark has none, and a hall's own scoreboards stand in its place).
+    if (boards?.scoreboard === true && v.noCentre !== true && hangsOver(String(o.sport))) {
+        const planes = centreBoard("centre-board", stands.box, lift, boards);
+        items.push({ id: "centre-board", kind: "hung-board", at: centre, height: topOf(planes), planes });
+    }
     if (wallSeats.length > 0)
         items.push({ id: "wall-seats", kind: "wall-seats", at: centre, height: topOf(wallSeats), planes: wallSeats });
     // The roof: a canopy over the back of the top tier, or a lid over it in a hall. A real venue has its own: the walls of its building and a roof of its kind over them.

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

package/package.json

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