@johnmorrisdotca/kyogijo-stadiums 0.35.0 → 0.37.0

package/CHANGELOG.md

@@ -7,6 +7,20 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [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
+
+- **A diamond mowing pattern** (`stripePattern: "diamonds"`, `菱形` in the demo): the crosshatch of a ballpark's outfield, as in a photograph of T-Mobile Park. On a ballpark it is squares of 30 feet with their sides along the foul lines, from home plate out, lighter and darker alternately (two passes of 45-degree stripes crossing); on a football field and a soccer pitch it is squares of a band turned 45 degrees, one of them centred on the turf so that both ends are mown alike, whatever the size. It is cut to the fair ground or to the turf by a clip path. The infield grass stays one tone, and a separate infield pattern is not offered: the pattern is the outfield's. [Theming](./docs/theming.md), the gallery's mowing sections.
+- **The demo's Mowing choice is for every grass sport**: a football field and a ballpark have it too (it was the soccer pitch's alone), with Diamonds among the choices; the soccer section of the home page shows the diamonds as one more card.
+
 ## [0.35.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, 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, Side, Sport, SurfaceOptions } from "./types.ts";
 export type Pt = [number, number];
 export type Box = {
     x: number;
@@ -188,6 +188,8 @@ 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 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,7 @@
 // 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 { 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;
@@ -210,6 +211,12 @@ 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 });
+    if (boards?.ribbon === true)
+        body += planRibbons(stands, boards);
+    if (boards?.scoreboard === true && hangsOver(stands.sport))
+        over += planScoreboard(stands.box, boards);
     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) {
@@ -255,4 +262,7 @@ 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-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,7 @@ 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,
     };
 }
 /** How full the stands are: a density, else attendance over capacity (the ground's, else the model's seats), else 0.85. */

package/dist/draw.js

@@ -222,7 +222,7 @@ const safeLength = (value) => {
         return Number.isFinite(value) && value > 0 ? num(value) : undefined;
     return typeof value === "string" && /^\d+(?:\.\d+)?(?:px|%|em|rem|vw|vh)?$/.test(value.trim()) ? value.trim() : undefined;
 };
-const PATTERNS = ["bands", "wide", "narrow", "lengthwise", "checks", "diagonal", "circles", "rings", "fan", "none"];
+const PATTERNS = ["bands", "wide", "narrow", "lengthwise", "checks", "diagonal", "diamonds", "circles", "rings", "fan", "none"];
 const GOALS = ["box", "line", "strip", "none"];
 /** The pitch the options ask for: a `pitch` of the caller's, else the size a `ground` publishes, else none (the international pitch). */
 export function pitchOf(o) {

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, 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/mow.d.ts

@@ -18,7 +18,8 @@ export declare const oddCells: (length: number, cell: number) => number;
 /**
  * The lighter tone of a pattern on a rectangle of turf. `band` is the width of the usual stripe, along x; `wide` and `narrow` are twice and half of it.
  * `bands` run across the turf (side by side along x), `lengthwise` along it, `checks` are squares of about `band`, `diagonal` are 45-degree stripes
- * `band` wide across, and `circles` are rings `band` wide about the middle. A pattern that is not one of these (`none`, `rings`, `fan`) has no tone here.
+ * `band` wide across, `diamonds` are the squares of `checks` turned 45 degrees (the crosshatch of a ballpark's outfield: two passes of 45-degree stripes, `band` wide
+ * across, crossing), laid so that a diamond is centred on the turf and both ends are mown alike, and `circles` are rings `band` wide about the middle. A pattern that is not one of these (`none`, `rings`, `fan`) has no tone here.
  */
 export declare function mowTurf(pattern: StripePattern, turf: Turf, band: number): Mown;
 /** A ballpark's fair ground, as the field of its stripes: how far it reaches either side of the line to centre field and how far out. */
@@ -30,7 +31,8 @@ export interface Park {
 /**
  * The lighter tone of a pattern on a ballpark: coordinates are the field's screen frame (x across, y minus the distance out from home plate). `band` is
  * 30 feet, the width of a stripe of the usual rings. `bands` run across the field at fixed distances out from home, `lengthwise` along the line to centre
- * field, `checks` are squares, `diagonal` run at 45 degrees, `fan` is wedges out from home plate, 6 degrees each. `rings` and `circles` are the park's own
+ * field, `checks` are squares, `diagonal` run at 45 degrees, `diamonds` are squares of `band` with their sides along the foul lines (two passes of stripes parallel to the
+ * lines, crossing, from home plate out), `fan` is wedges out from home plate, 6 degrees each. `rings` and `circles` are the park's own
  * arcs about home plate (drawn by the field itself) and `none` is plain, so they have no tone here. The path runs past the fence and must be cut to the fair ground.
  */
 export declare function mowPark(pattern: StripePattern, park: Park, band?: number): Mown;

package/dist/mow.js

@@ -5,6 +5,10 @@ import { num } from "./format.js";
 const NONE = { path: "", clip: false, evenodd: false };
 /** An odd whole number of cells nearest to a length over a cell: odd, so that both ends of the turf are mown alike. */
 export const oddCells = (length, cell) => Math.max(3, 2 * Math.round((length / cell - 1) / 2) + 1);
+/** A convex polygon from its corners, as a closed subpath. */
+const poly = (corners) => `M${corners.map(([px, py]) => `${num(px)} ${num(py)}`).join("L")}z`;
+/** The corners of the square of a lattice turned a quarter of a right angle: the cell between `a0` and `a1` along the first axis `(ex, ey)` and `b0` and `b1` along the second, from the origin `(ox, oy)`. */
+const lattice = (ox, oy, ex, ey, fx, fy, a0, a1, b0, b1) => [[a0, b0], [a1, b0], [a1, b1], [a0, b1]].map(([a, b]) => [ox + a * ex + b * fx, oy + a * ey + b * fy]);
 const box = (x, y, w, h) => `M${num(x)} ${num(y)}h${num(w)}v${num(h)}h${num(-w)}z`;
 /** An annulus between two radii about a centre, as two circles of one path. */
 const ring = (cx, cy, inner, outer) => {
@@ -14,7 +18,8 @@ const ring = (cx, cy, inner, outer) => {
 /**
  * The lighter tone of a pattern on a rectangle of turf. `band` is the width of the usual stripe, along x; `wide` and `narrow` are twice and half of it.
  * `bands` run across the turf (side by side along x), `lengthwise` along it, `checks` are squares of about `band`, `diagonal` are 45-degree stripes
- * `band` wide across, and `circles` are rings `band` wide about the middle. A pattern that is not one of these (`none`, `rings`, `fan`) has no tone here.
+ * `band` wide across, `diamonds` are the squares of `checks` turned 45 degrees (the crosshatch of a ballpark's outfield: two passes of 45-degree stripes, `band` wide
+ * across, crossing), laid so that a diamond is centred on the turf and both ends are mown alike, and `circles` are rings `band` wide about the middle. A pattern that is not one of these (`none`, `rings`, `fan`) has no tone here.
  */
 export function mowTurf(pattern, turf, band) {
     const { x, y, w, h } = turf;
@@ -49,6 +54,26 @@ export function mowTurf(pattern, turf, band) {
                 parts.push(`M${num(a)} ${num(y + h)}L${num(a + h)} ${num(y)}L${num(a + h + across)} ${num(y)}L${num(a + across)} ${num(y + h)}z`);
             return { path: parts.join(""), clip: true, evenodd: false };
         }
+        case "diamonds": {
+            // A lattice of squares of side `band` turned 45 degrees, one square centred on the turf: both ends of the turf then have the same tone, whatever its size.
+            const cx = x + w / 2;
+            const cy = y + h / 2;
+            const r = Math.SQRT1_2;
+            const reach = Math.ceil((Math.hypot(w, h) / 2) / band) + 1;
+            for (let i = -reach; i <= reach; i += 1) {
+                for (let j = -reach; j <= reach; j += 1) {
+                    if (Math.abs(i + j) % 2 !== 1)
+                        continue;
+                    const corners = lattice(cx, cy, r, r, -r, r, (i - 0.5) * band, (i + 0.5) * band, (j - 0.5) * band, (j + 0.5) * band);
+                    const xs = corners.map((c) => c[0]);
+                    const ys = corners.map((c) => c[1]);
+                    if (Math.max(...xs) <= x || Math.min(...xs) >= x + w || Math.max(...ys) <= y || Math.min(...ys) >= y + h)
+                        continue;
+                    parts.push(poly(corners));
+                }
+            }
+            return { path: parts.join(""), clip: true, evenodd: false };
+        }
         case "circles": {
             const cx = x + w / 2;
             const cy = y + h / 2;
@@ -64,7 +89,8 @@ export function mowTurf(pattern, turf, band) {
 /**
  * The lighter tone of a pattern on a ballpark: coordinates are the field's screen frame (x across, y minus the distance out from home plate). `band` is
  * 30 feet, the width of a stripe of the usual rings. `bands` run across the field at fixed distances out from home, `lengthwise` along the line to centre
- * field, `checks` are squares, `diagonal` run at 45 degrees, `fan` is wedges out from home plate, 6 degrees each. `rings` and `circles` are the park's own
+ * field, `checks` are squares, `diagonal` run at 45 degrees, `diamonds` are squares of `band` with their sides along the foul lines (two passes of stripes parallel to the
+ * lines, crossing, from home plate out), `fan` is wedges out from home plate, 6 degrees each. `rings` and `circles` are the park's own
  * arcs about home plate (drawn by the field itself) and `none` is plain, so they have no tone here. The path runs past the fence and must be cut to the fair ground.
  */
 export function mowPark(pattern, park, band = 30) {
@@ -96,6 +122,24 @@ export function mowPark(pattern, park, band = 30) {
                 parts.push(`M${num(a)} 0L${num(a + reach)} ${num(-reach)}L${num(a + reach + across)} ${num(-reach)}L${num(a + across)} 0z`);
             return { path: parts.join(""), clip: true, evenodd: false };
         }
+        case "diamonds": {
+            // The foul lines are the axes: a cell is `band` along each, from home plate, and the cells either side of a corner alternate.
+            const r = Math.SQRT1_2;
+            const last = Math.ceil((reach * Math.SQRT2) / band) + 1;
+            for (let i = 0; i < last; i += 1) {
+                for (let j = 0; j < last; j += 1) {
+                    if ((i + j) % 2 !== 1)
+                        continue;
+                    const corners = lattice(0, 0, r, -r, -r, -r, i * band, (i + 1) * band, j * band, (j + 1) * band);
+                    const xs = corners.map((c) => c[0]);
+                    const ys = corners.map((c) => c[1]);
+                    if (Math.max(...xs) < umin - band || Math.min(...xs) > umax + band || Math.min(...ys) > band || Math.max(...ys) < -reach)
+                        continue;
+                    parts.push(poly(corners));
+                }
+            }
+            return { path: parts.join(""), clip: true, evenodd: false };
+        }
         case "fan": {
             const step = (6 * Math.PI) / 180;
             const R = reach * 1.5;

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) });
         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

@@ -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";

package/dist/multi.types.d.ts

@@ -1,4 +1,4 @@
-import type { Sport, SurfaceOptions } from "./types.ts";
+import type { LedBoardOptions, 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,7 @@ export interface MultiOptions {
         roof?: boolean;
         shape?: "bowl" | "sides";
         detail?: "fine" | "plain";
+        boards?: boolean | LedBoardOptions;
     };
     /** 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/surfaces/soccer.js

@@ -13,10 +13,10 @@ const BANDS = { bands: 19, wide: 9, narrow: 39 };
 function stripes(pattern, L, W, id) {
     if (pattern === "none")
         return { path: "", defs: "" };
-    if (pattern === "circles") {
-        // Rings about the middle, as wide as a usual band, cut to the pitch.
-        const mown = mowTurf("circles", { x: 0, y: 0, w: L, h: W }, L / BANDS.bands);
-        return { path: mown.path, defs: `<clipPath id="${id}-turf"><rect x="0" y="0" width="${n(L)}" height="${n(W)}"/></clipPath>`, evenodd: true };
+    if (pattern === "circles" || pattern === "diamonds") {
+        // Rings about the middle, or squares turned 45 degrees about it, as wide as a usual band, cut to the pitch.
+        const mown = mowTurf(pattern, { x: 0, y: 0, w: L, h: W }, L / BANDS.bands);
+        return { path: mown.path, defs: `<clipPath id="${id}-turf"><rect x="0" y="0" width="${n(L)}" height="${n(W)}"/></clipPath>`, evenodd: mown.evenodd };
     }
     const rect = (x, y, w, h) => `M${n(x)} ${n(y)}h${n(w)}v${n(h)}h${n(-w)}z`;
     const parts = [];

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 } from "./types.ts";
 export type { Plane, PartKind, Upright, UprightKind, V3 } from "./turn.kit.ts";

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.model.js

@@ -23,7 +23,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);

package/dist/turn.style.js

@@ -86,6 +86,9 @@ 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}
 .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

@@ -73,11 +73,11 @@ export interface Placement {
 /** How much of the surface's markings are drawn. `simple` leaves out the small ones, such as hash marks. */
 export type Detail = "full" | "simple";
 /**
- * How grass is mown: bands across the surface (the usual), wide ones or narrow ones, along it, in checks, on the diagonal, in rings round the
+ * How grass is mown: bands across the surface (the usual), wide ones or narrow ones, along it, in checks, on the diagonal, in diamonds (the checks turned 45 degrees: a ballpark outfield's crosshatch, its sides along the foul lines), in rings round the
  * middle (`circles`), or `none`. A ballpark is mown in `rings` by default (arcs about home plate) and may also be mown in a `fan` (wedges out from
  * home plate). A football field and a ballpark take the same options as a soccer pitch; a surface that is not grass ignores them.
  */
-export type StripePattern = "bands" | "wide" | "narrow" | "lengthwise" | "checks" | "diagonal" | "circles" | "rings" | "fan" | "none";
+export type StripePattern = "bands" | "wide" | "narrow" | "lengthwise" | "checks" | "diagonal" | "diamonds" | "circles" | "rings" | "fan" | "none";
 /**
  * How a goal is drawn, seen from above. A soccer goal: the net as a box behind the goal line, a line on it, a solid strip, or not at all.
  * A hockey net: the same four (`box` is the open frame behind the goal line, `strip` a filled net). A basketball basket: `box` is the backboard,
@@ -274,6 +274,24 @@ 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 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 +342,11 @@ 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 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,107 @@
+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];
+}
+/** 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;
+}): 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;
+/** 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,267 @@
+// 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 = {}) {
+    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])],
+    };
+    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]) => `<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)]));
+        }
+    }
+    return bed + [...lit].map(([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;
+    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)}"/>`;
+    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 }));
+    return el("g", { class: "ky-cr-ribbon" }, el("path", { class: "ky-cr-led-line", d: paths, "stroke-width": 3.4 }) + 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" }, 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, 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,19 @@ 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;
     /** 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

@@ -9,6 +9,7 @@ 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 { firstHit, realBuilding } from "./venue.real.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. */
@@ -95,13 +96,13 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     };
     // 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 boards = resolveBoards(v.boards !== undefined ? v.boards : crowd.boards, { home: crowd.home, away: crowd.away });
+    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 +125,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 });
             }
@@ -168,6 +190,13 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     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/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.35.0";
+export declare const VERSION = "0.37.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.35.0";
+export const VERSION = "0.37.0";

package/package.json

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