@johnmorrisdotca/kyogijo-stadiums 0.34.0 → 0.35.0

package/CHANGELOG.md

@@ -7,6 +7,23 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.35.0] - 2026-10-20
+
+### Added
+
+- **The auto-turn goes either way** (`TurnSettings.direction`, `KyogijoTurn.direction()` and `setDirection()`, `turnDirection()`, `TurnSettings.onDirectionChange`, the element's `turn-direction`): `"counterclockwise"` is how it has always turned, the near side swinging to the viewer's right, and stays the default; `"clockwise"` is the other way. The 3D view has a **Reverse** button (`逆回転`), a toggle pressed while it goes clockwise, that changes the way at once without stopping the turn and says so aloud; a drag, the keys and the other buttons are not reversed. Every 3D view has it: the stadiums, the districts, the tournament layouts and the judging view too. [The 3D view](./docs/turn.md#the-auto-turn).
+
+### Changed
+
+- **The demo waits still and turns on the pointer** (`demo/turn-way.js`): every 3D page of the demo (the home page and its featured arena, the venues, stadiums, districts, tournament layouts, judging and boards pages) opens still, turns while the pointer is over the view, and holds when it leaves; a tap on a phone starts it and a second tap holds it; Auto-turn still starts it for good (`spin=on` on the venues page's address), and a reader who prefers reduced motion is never turned for by the pointer. The pages turn at half the old speed (6 degrees a second; the package's own default, 12, is unchanged), and Reverse is kept in the address as `dir=cw`. The replays play while the pointer is over them in the same way. The fly-through page opens still and flies on the pointer at `speed=0.5`, half the pace (`?play=1` has it fly from the start).
+- **The README opens on the still pictures again**: the two turning pictures at the head are gone, and each moving picture is beside its own section (the real venues, the tournament layouts, the fly-through), at half the speed (100 milliseconds a frame for the arenas, 260 for the fly-through); the real venues' pictures are taken again with the filled bowls of 0.34.1. The pictures only a page of docs shows are in `docs/pictures`, so that `docs/images` holds the README's own: the family's README lint (`scripts/readme-lint.mjs`) is again its own file with one rule added, the moving pictures' budget.
+
+## [0.34.1] - 2026-10-20
+
+### Fixed
+
+- **No gray empty areas in the 3D view of a real venue** (`src/venue.fill.ts`, [the venues](./docs/venues.md), [the stadiums](./docs/stadiums.md)): the 3D arenas showed flat gray nothing in three places. **The shelf between the bowls** is now the suite level: a facing wall with a band of windows, a pane to every 7 feet, and a ledge. **The apron between the surface and the first row** is a thin dark floor, with the players' benches, the penalty boxes and the timekeeper's table at the usual places on the bench side of an ice rink. **The slab between the back of the bowl and the building** is closed by a back wall with a coping (it gives way to the eye as the building's walls do, keeping a little of itself) and a darker concourse floor with its lanes and joints, out to the building's outline, the annexes included. Every arena of the NHL, every stadium and the hall, and a tournament layout's stadium (`VenueSettings.fill`) have the fill; the usual stands (`crowd: true`) are unchanged. New part kinds `apron`, `bench` and `floor`; a ballpark gets the suite wall and the back wall, and no apron or floor of its own.
+
 ## [0.34.0] - 2026-10-20
 
 ### Added

package/README.md

@@ -13,25 +13,6 @@ The surfaces of forty-three sports, from football and curling to the budō and t
 
 <p align="center"><a href="https://johnmorrisdotca.github.io/kyogijo-stadiums/"><strong>Open the demo →</strong></a> · <a href="https://johnmorrisdotca.github.io/kyogijo-stadiums/docs/">Documentation</a> · <a href="https://johnmorrisdotca.github.io/kyogijo-stadiums/docs/gallery.html">Gallery</a> · <a href="./docs/compare.md">How it compares</a> · <a href="https://johnmorrisdotca.github.io/kyogijo-stadiums/api.html">API reference</a></p>
 
-<table align="center">
-<tr>
-<td align="center" valign="top">
-<picture>
-<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-venue-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-venue-desk-light.webp" alt="A real arena turning once round in 3D: Climate Pledge Arena in the outline of its building, two tiers of seats round the rink." width="410">
-</picture>
-<br><em>A real arena, turning: Climate Pledge Arena in the outline of its building (OpenStreetMap).</em>
-</td>
-<td align="center" valign="top">
-<picture>
-<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-hall-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-hall-desk-light.webp" alt="A tournament layout turning once round in 3D: four table tennis areas on one floor, a surround round each and a scoreboard hung over them." width="410">
-</picture>
-<br><em>A tournament layout, turning: four table tennis areas under one scoreboard.</em>
-</td>
-</tr>
-</table>
-
 > **Renamed.** Previously `@johnmorrisdotca/kyogijo`; renamed in 0.4.0 to `@johnmorrisdotca/kyogijo-stadiums`. The product is still Kyogijo Stadiums (競技場); only the package and the repository names changed. See the [changelog](./CHANGELOG.md).
 
 <table align="center">
@@ -409,6 +390,7 @@ import { mountKyogijoTurn } from "@johnmorrisdotca/kyogijo-stadiums/turn";
 
 const view = mountKyogijoTurn(document.querySelector("#court")!, { sport: "volleyball", status: "live" }, { preset: "end" });
 view.preset("corner");
+view.setDirection("clockwise"); // the auto-turn goes the other way (`direction` in the settings says it at the start)
 ```
 
 ```ts
@@ -420,7 +402,7 @@ console.log(items.map((item) => item.kind).join(), html.includes("preserve-3d"))
 // net,netposts,antennae false
 ```
 
-The flat drawing is the floor, turned by a drag, a swipe, the keys or four viewpoints, with what the rulebook stands on it at its height; each part is one `matrix3d`. In the element: `<kyogijo-field sport="nhl" turn turn-view="broadcast">`. [The 3D view](./docs/turn.md).
+The flat drawing is the floor, turned by a drag, a swipe, the keys or four viewpoints, with what the rulebook stands on it at its height; each part is one `matrix3d`. The auto-turn waits for Play, and turns either way: `counterclockwise` (the near side swinging to the viewer's right) by default, `clockwise` on the Reverse button. In the element: `<kyogijo-field sport="nhl" turn turn-view="broadcast">`. [The 3D view](./docs/turn.md).
 
 <p align="center">
 <picture>
@@ -561,6 +543,14 @@ console.log(layout.needs.length, layout.needs.width);
 // 47 19
 ```
 
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-hall-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-hall-desk-light.webp" alt="A tournament layout turning once round in 3D, slowly: four table tennis areas on one floor, a surround round each and a scoreboard hung over them." width="640">
+</picture>
+<br><em>A tournament layout, turning: four table tennis areas under one scoreboard.</em>
+</p>
+
 ### Boards over a surface
 
 `board` lays a results board, a bout presentation or a medal table, any SVG, over a surface in 2D and 3D, off its middle and never stretched ([boards](./docs/boards.md)).
@@ -591,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 by itself, 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)). 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.
 
 ```ts
 import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
@@ -602,6 +592,14 @@ console.log(svg.includes("ky-cr-shell"), planVenue(venueById("climate-pledge-are
 // true 17151
 ```
 
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-venue-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turning-venue-desk-light.webp" alt="A real arena turning once round in 3D, slowly: Climate Pledge Arena in the outline of its building, two tiers of seats with a suite level of windows between them, and a darker concourse floor round the bowl." width="640">
+</picture>
+<br><em>A real arena, turning: Climate Pledge Arena in the outline of its building (OpenStreetMap).</em>
+</p>
+
 ### A real stadium, and a district
 
 `stadium: "bc-place"` draws BC Place for football or soccer under its cable roof, and Lumen Field, T-Mobile Park, Tokyo Dome, Koshien Stadium (`park`) and Korakuen Hall (`sport: "boxing"`) likewise ([stadiums](./docs/stadiums.md)); `drawDistrict({ venues: ["bc-place", "rogers-arena"] })` puts venues at their real positions, tight as neighbours or spread as a city, to turn together in 3D ([districts](./docs/district.md)).

package/dist/element.d.ts

@@ -6,7 +6,7 @@ import type { ScoreOptions, SurfaceOptions } from "./types.ts";
 /** The tag of the element. */
 export declare const KYOGIJO_TAG = "kyogijo-field";
 /** The attributes the element reads. */
-export declare const KYOGIJO_ATTRIBUTES: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed"];
+export declare const KYOGIJO_ATTRIBUTES: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed", "turn-direction"];
 /** The settings of a 3D view an element's attributes make: `turn-view` names the viewpoint it opens on, `turn-controls="false"` and `turn-uprights="false"` leave the buttons and what stands on the surface out, `turn-score="floor"` leaves the score panel on the floor, `turn-touch="turn"` keeps every touch for the view, `turn-venue="false"` leaves out the stands and the room (they are raised for a drawing with a crowd and for a dojo), `turn-roof` puts a roof or canopy over the stands, `turn-autoplay` starts the auto-turn (`force` even for a reader who prefers reduced motion) and `turn-speed` is its degrees a second. */
 export declare function turnSettingsFromAttributes(read: (name: string) => string | null, base?: TurnSettings): TurnSettings;
 /** Whether an element's `turn` attribute asks for the 3D view: present, and not `false`. */
@@ -24,7 +24,7 @@ export declare function optionsFromAttributes(read: (name: string) => string | n
 declare const Base: typeof HTMLElement;
 export declare class KyogijoField extends Base {
     #private;
-    static observedAttributes: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed"];
+    static observedAttributes: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed", "turn-direction"];
     /** The options given as a property: an object, laid under the attributes. */
     get options(): Partial<ScoreOptions> | undefined;
     set options(value: Partial<ScoreOptions> | undefined);

package/dist/element.js

@@ -25,7 +25,7 @@ export const KYOGIJO_ATTRIBUTES = [
     "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color",
     "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options",
     "loop", "speed", "autoplay", "controls", "trail",
-    "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed",
+    "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed", "turn-direction",
 ];
 /** The attributes that are about a replay and not about the drawing. */
 const REPLAY_ATTRIBUTES = ["loop", "speed", "autoplay", "controls", "trail"];
@@ -57,6 +57,9 @@ export function turnSettingsFromAttributes(read, base = {}) {
     const speed = Number(read("turn-speed"));
     if (read("turn-speed") !== null && Number.isFinite(speed))
         out.speed = speed;
+    const direction = read("turn-direction");
+    if (direction === "clockwise" || direction === "counterclockwise")
+        out.direction = direction;
     return out;
 }
 /** Whether an element's `turn` attribute asks for the 3D view: present, and not `false`. */

package/dist/judging.mount.js

@@ -59,6 +59,8 @@ export function mountJudgingBroadcast(host, options, settings = {}) {
         },
         play: () => turn.play(),
         pause: () => turn.pause(),
+        direction: () => turn.direction(),
+        setDirection: (direction) => turn.setDirection(direction),
         togglePlay: () => turn.togglePlay(),
         svg: () => turn.svg(),
         destroy: () => {

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 }, { ...(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 }, 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/strings.d.ts

@@ -1030,6 +1030,11 @@ export interface KyogijoWords {
         playOff: string;
         announcePlay: string;
         announcePause: string;
+        /** The Reverse button's name (pressed while the auto-turn goes clockwise), what it is for, and what is announced when the direction changes. */
+        reverse: string;
+        reverseLabel: string;
+        announceClockwise: string;
+        announceCounterclockwise: string;
         /** What is announced after a key or a button: {name} for a viewpoint, and the angles: {yaw} and {pitch} in degrees. */
         announce: string;
         announceAngle: string;

package/dist/strings.js

@@ -451,7 +451,7 @@ export const KYOGIJO_STRINGS = {
             keys: "A 3D view you can turn. Drag, or use the arrow keys, to turn and tilt it; plus and minus zoom; 1 to 4 pick a viewpoint; 0 or Home puts it back; Space starts and stops the auto-turn. Pinch, or hold Ctrl and scroll, to zoom.",
             overhead: "Overhead", broadcast: "Broadcast", end: "End-on", corner: "Low corner",
             reset: "Reset the view", turnLeft: "Turn left", turnRight: "Turn right", raise: "Tip the surface away", lower: "Tip the surface toward you", zoomIn: "Zoom in", zoomOut: "Zoom out",
-            play: "Auto-turn", playOn: "Start the auto-turn", playOff: "Pause the auto-turn", announcePlay: "Auto-turn on", announcePause: "Auto-turn paused",
+            play: "Auto-turn", playOn: "Start the auto-turn", playOff: "Pause the auto-turn", announcePlay: "Auto-turn on", announcePause: "Auto-turn paused", reverse: "Reverse", reverseLabel: "Turn the other way", announceClockwise: "Turning clockwise", announceCounterclockwise: "Turning counterclockwise",
             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",
@@ -1010,7 +1010,7 @@ export const KYOGIJO_STRINGS = {
             keys: "回して見られる3D表示です。ドラッグするか矢印キーで回転と傾きを変え、プラスとマイナスのキーで拡大と縮小、1から4のキーで視点を選び、0キーまたはHomeキーで元に戻し、スペースキーで自動回転を始めたり止めたりします。ピンチ操作、またはCtrlキーを押しながらのスクロールでも拡大・縮小できます。",
             overhead: "真上", broadcast: "中継カメラ", end: "エンド側から", corner: "低い角度から",
             reset: "元に戻す", turnLeft: "左へ回す", turnRight: "右へ回す", raise: "床面を奥へ傾ける", lower: "床面を手前へ傾ける", zoomIn: "拡大", zoomOut: "縮小",
-            play: "自動回転", playOn: "自動回転を始める", playOff: "自動回転を一時停止する", announcePlay: "自動回転を始めました", announcePause: "自動回転を一時停止しました",
+            play: "自動回転", playOn: "自動回転を始める", playOff: "自動回転を一時停止する", announcePlay: "自動回転を始めました", announcePause: "自動回転を一時停止しました", reverse: "逆回転", reverseLabel: "逆向きに回す", announceClockwise: "時計回りに回転しています", announceCounterclockwise: "反時計回りに回転しています",
             announce: "{name}の視点", announceAngle: "向きは{yaw}度、見下ろす角度は{pitch}度です。",
             flat: "このブラウザーでは3D表示ができないため、平面の図を表示しています。",
             standing: "3D表示で立って見えるもの：{list}。", item: "{name} {h}", itemSag: "{name} 支柱の位置で{h}（中央は{low}）",

package/dist/turn-entry.d.ts

@@ -1,6 +1,8 @@
 export { mountKyogijoTurn, mountTurn, turnSupported } from "./turn.dom.ts";
 export type { KyogijoTurn } from "./turn.dom.ts";
 export { buildTurn, floorOptions, openingView } from "./turn.model.ts";
+export { turnDirection } from "./turn.camera.ts";
+export type { TurnDirection } from "./turn.camera.ts";
 export type { TurnModel, TurnSettings } from "./turn.model.ts";
 export { layoutOf, planeMarkup, planeMatrix, turnMarkup, turnMarkupOf } from "./turn.markup.ts";
 export type { Layout } from "./turn.markup.ts";

package/dist/turn-entry.js

@@ -1,6 +1,7 @@
 // The 3D view: a surface as a floor that turns, with a net, a basket, a goal or a pair of posts standing on it.
 export { mountKyogijoTurn, mountTurn, turnSupported } from "./turn.dom.js";
 export { buildTurn, floorOptions, openingView } from "./turn.model.js";
+export { turnDirection } from "./turn.camera.js";
 export { layoutOf, planeMarkup, planeMatrix, turnMarkup, turnMarkupOf } from "./turn.markup.js";
 export { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 export { CURLING_PRESETS, LONG_PRESETS, NET_PRESETS, PITCH_MAX, STEP, TURN_DEFAULT, TURN_PRESETS, TURN_PRESET_NAMES, ZOOM_MAX, ZOOM_MIN, cameraMatrix, clampView, depthOf, drag, eyeDistance, fit, matrix3d, multiply, nudge, presetOf, presetView, presetsFor, project, step } from "./turn.camera.js";

package/dist/turn.camera.d.ts

@@ -7,6 +7,13 @@ export interface TurnView {
 /** The named viewpoints. */
 export type TurnPreset = "overhead" | "broadcast" | "end" | "corner";
 /** The viewpoints, in the order the controls and the number keys list them. */
+/**
+ * Which way the auto-turn goes, seen from above. `"counterclockwise"` is how it has always turned: the near side swings to the viewer's right. `"clockwise"` is the other way: the near side swings to the left.
+ * A drag, the keys and the buttons are not reversed.
+ */
+export type TurnDirection = "clockwise" | "counterclockwise";
+/** A direction from anything: `"clockwise"` is clockwise, and everything else is the default, `"counterclockwise"`. */
+export declare function turnDirection(value: unknown): TurnDirection;
 export declare const TURN_PRESET_NAMES: readonly TurnPreset[];
 /**
  * The four viewpoints. `overhead` looks straight down; `broadcast` is the main camera, high on one side line and turned a little towards the near end so that the boards, the nets and the goals show their faces; `end` stands behind an end line, along the

package/dist/turn.camera.js

@@ -3,7 +3,10 @@
 // worked out in Node, tested, and handed to a stylesheet as one `transform`.
 //
 // CSS has x to the right, y down and z towards the eye, and the scene is built that way: the floor lies in the x-y plane facing the eye, heights are z.
-/** The viewpoints, in the order the controls and the number keys list them. */
+/** A direction from anything: `"clockwise"` is clockwise, and everything else is the default, `"counterclockwise"`. */
+export function turnDirection(value) {
+    return value === "clockwise" ? "clockwise" : "counterclockwise";
+}
 export const TURN_PRESET_NAMES = ["overhead", "broadcast", "end", "corner"];
 /**
  * The four viewpoints. `overhead` looks straight down; `broadcast` is the main camera, high on one side line and turned a little towards the near end so that the boards, the nets and the goals show their faces; `end` stands behind an end line, along the

package/dist/turn.dom.d.ts

@@ -1,4 +1,4 @@
-import { type TurnPreset, type TurnView } from "./turn.camera.ts";
+import { type TurnDirection, type TurnPreset, type TurnView } from "./turn.camera.ts";
 import { type TurnModel, type TurnSettings } from "./turn.model.ts";
 import type { ScoreOptions, SurfaceOptions } from "./types.ts";
 import type { VenueSettings } from "./venue.ts";
@@ -27,6 +27,10 @@ export interface KyogijoTurn<O = SurfaceOptions | ScoreOptions> {
     play(): boolean;
     /** Stop the auto-turn. */
     pause(): void;
+    /** Which way the auto-turn goes. */
+    direction(): TurnDirection;
+    /** Change which way the auto-turn goes, at once and without stopping it (the Reverse button does). */
+    setDirection(direction: TurnDirection): void;
     /** Start the auto-turn if it is stopped and stop it if it is running; it gives whether it is running now. */
     togglePlay(): boolean;
     /** The flat drawing that is the floor, or `null` after `destroy`. */

package/dist/turn.dom.js

@@ -3,7 +3,7 @@
 // reduced motion gets jumps for glides, and where the browser cannot draw in 3D the flat drawing stays. Nothing is polled and nothing runs while the view is
 // still: the elements' `transform`s are written when the view changes, and a glide between viewpoints is a short run of animation frames.
 import { drawKyogijo } from "./draw.js";
-import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step } from "./turn.camera.js";
+import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step, turnDirection } from "./turn.camera.js";
 import { buildTurn, floorOptions, openingView, turnWords } from "./turn.model.js";
 import { controlsMarkup, layoutOf, turnMarkupOf, worldMarkup } from "./turn.markup.js";
 import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
@@ -62,6 +62,8 @@ export function mountTurn(host, options, settings, build) {
             playing: false,
             play: () => false,
             pause: () => undefined,
+            direction: () => turnDirection(settings.direction),
+            setDirection: () => undefined,
             togglePlay: () => false,
             update: (next, change) => {
                 if (change?.venue !== undefined)
@@ -93,6 +95,7 @@ export function mountTurn(host, options, settings, build) {
     let lastTick;
     let advanced = false;
     const speed = typeof settings.speed === "number" && Number.isFinite(settings.speed) ? settings.speed : 12;
+    let way = turnDirection(settings.direction);
     const calm = () => settings.motion === "none" || (settings.motion !== "smooth" && media?.matches === true);
     // The elements, floor first, and what was written to each, so that only a change is written.
     let elements = [];
@@ -236,7 +239,7 @@ export function mountTurn(host, options, settings, build) {
         lastTick = stamp;
         if (dt > 0) {
             stop();
-            view = clampView({ ...view, yaw: view.yaw - speed * dt });
+            view = clampView({ ...view, yaw: view.yaw - (way === "clockwise" ? -1 : 1) * speed * dt });
             shown = view;
             advanced = true;
             paint(shown);
@@ -266,6 +269,16 @@ export function mountTurn(host, options, settings, build) {
             say(next ? turnWords(model).announcePlay : turnWords(model).announcePause);
         settings.onPlayChange?.(next);
     };
+    /** Change the direction; the Reverse button says which it is, and the page is told. */
+    const setWay = (next, quiet = false) => {
+        if (next === way)
+            return;
+        way = next;
+        root.querySelector("button[data-act=reverse]")?.setAttribute("aria-pressed", String(way === "clockwise"));
+        if (!quiet)
+            say(way === "clockwise" ? turnWords(model).announceClockwise : turnWords(model).announceCounterclockwise);
+        settings.onDirectionChange?.(way);
+    };
     // A view scrolled out of sight does not turn.
     let onScreen = true;
     let seen;
@@ -304,6 +317,7 @@ export function mountTurn(host, options, settings, build) {
             case "zoom-in": return go(step(view, { zoom: STEP.zoom }), 180, "none", true);
             case "zoom-out": return go(step(view, { zoom: 1 / STEP.zoom }), 180, "none", true);
             case "play": return void setPlaying(!playing);
+            case "reverse": return setWay(way === "clockwise" ? "counterclockwise" : "clockwise");
             case "reset": return toOpening();
             default:
         }
@@ -476,7 +490,7 @@ export function mountTurn(host, options, settings, build) {
                 root.removeAttribute("data-theme");
             const controls = root.querySelector(".ky-turn-controls");
             if (controls !== null)
-                controls.outerHTML = controlsMarkup(model, view, playing);
+                controls.outerHTML = controlsMarkup(model, view, playing, way);
             paint(shown);
             label();
         },
@@ -490,6 +504,10 @@ export function mountTurn(host, options, settings, build) {
         pause() {
             setPlaying(false);
         },
+        direction: () => way,
+        setDirection(next) {
+            setWay(turnDirection(next));
+        },
         togglePlay() {
             setPlaying(!playing);
             return playing;

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";
+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";
 /** 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`. */

package/dist/turn.markup.d.ts

@@ -1,4 +1,4 @@
-import { type Placement, type TurnView } from "./turn.camera.ts";
+import { type Placement, type TurnDirection, type TurnView } from "./turn.camera.ts";
 import { type Plane } from "./turn.kit.ts";
 import { type TurnModel, type TurnSettings } from "./turn.model.ts";
 import type { ScoreOptions, SurfaceOptions } from "./types.ts";
@@ -45,7 +45,7 @@ export declare function worldAttributes(model: TurnModel): string;
 /** The floor and the planes of a model, laid out. */
 export declare function worldMarkup(model: TurnModel, layout: Layout): string;
 /** The buttons under the view. */
-export declare function controlsMarkup(model: TurnModel, view: TurnView, playing?: boolean): string;
+export declare function controlsMarkup(model: TurnModel, view: TurnView, playing?: boolean, direction?: TurnDirection): string;
 /** The size, in pixels, the first view is worked out for. */
 export declare const sizeOf: (settings: TurnSettings) => {
     width: number;

package/dist/turn.markup.js

@@ -2,7 +2,7 @@
 // `perspective` on a parent): every element carries its whole place on the screen in one `matrix3d`, worked out here from the way the scene is looked at, and
 // the elements are stacked far to near by `z-index`. A browser that cannot keep nested 3D layers (Safari on a phone can lose them) draws it as it is meant.
 // The same text is what a page is given from `turnMarkup` and what the mount writes; the mount then makes it turn.
-import { TURN_PRESET_NAMES, cameraMatrix, depthOf, eyeDistance, fit, matrix3d, multiply, presetOf } from "./turn.camera.js";
+import { TURN_PRESET_NAMES, cameraMatrix, depthOf, eyeDistance, fit, matrix3d, multiply, presetOf, turnDirection } from "./turn.camera.js";
 import { cross, facing, fadeOf, n, size, unit } from "./turn.kit.js";
 import { buildTurn, turnWords } from "./turn.model.js";
 import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
@@ -123,7 +123,7 @@ export function worldMarkup(model, layout) {
     return defsMarkup(model) + floorMarkup(model, layout.transforms[0], layout.stack[0]) + model.planes.map((p, i) => (p.crop === true ? cropMarkup(model, p, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1]) : planeMarkup(p, model.scale, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1]))).join("");
 }
 /** The buttons under the view. */
-export function controlsMarkup(model, view, playing = false) {
+export function controlsMarkup(model, view, playing = false, direction = "counterclockwise") {
     const words = turnWords(model);
     const here = presetOf(view, model.presets ?? model.options.sport);
     const presets = TURN_PRESET_NAMES.map((name, i) => `<button type="button" data-preset="${name}" aria-pressed="${here === name}" aria-keyshortcuts="${i + 1}">${esc(words[name])}</button>`).join("");
@@ -138,7 +138,9 @@ export function controlsMarkup(model, view, playing = false) {
     const buttons = tools.map(([act, glyph, label]) => `<button type="button" data-act="${act}" aria-label="${esc(label)}" title="${esc(label)}">${glyph}</button>`).join("");
     // The auto-turn: a toggle named for what it is, pressed while the view turns; its glyph and tooltip say what pressing it does.
     const play = `<button type="button" data-act="play" data-wide aria-pressed="${playing}" aria-keyshortcuts="Space" title="${esc(playing ? words.playOff : words.playOn)}"><span data-glyph aria-hidden="true">${playing ? "❚❚" : "▶"}</span>${esc(words.play)}</button>`;
-    return `<div class="ky-turn-controls"><div class="ky-turn-group" role="group" aria-label="${esc(words.group)}">${presets}</div><div class="ky-turn-group">${buttons}<button type="button" data-act="reset" aria-keyshortcuts="0 Home">${esc(words.reset)}</button>${play}</div></div>`;
+    // The other way round: a toggle, pressed while the auto-turn goes clockwise (the default is how it has always turned, the near side swinging to the right).
+    const reverse = `<button type="button" data-act="reverse" aria-pressed="${direction === "clockwise"}" aria-label="${esc(words.reverseLabel)}" title="${esc(words.reverseLabel)}">${esc(words.reverse)}</button>`;
+    return `<div class="ky-turn-controls"><div class="ky-turn-group" role="group" aria-label="${esc(words.group)}">${presets}</div><div class="ky-turn-group">${buttons}<button type="button" data-act="reset" aria-keyshortcuts="0 Home">${esc(words.reset)}</button>${play}${reverse}</div></div>`;
 }
 /** The size, in pixels, the first view is worked out for. */
 export const sizeOf = (settings) => settings.size ?? { width: 960, height: 600 };
@@ -156,7 +158,7 @@ export function turnMarkupOf(model, settings = {}) {
         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>` +
-        (settings.controls === false ? "" : controlsMarkup(model, view)) +
+        (settings.controls === false ? "" : controlsMarkup(model, view, false, turnDirection(settings.direction))) +
         `<div class="ky-turn-live" role="status" aria-live="polite"></div>` +
         `</div>`);
 }

package/dist/turn.model.d.ts

@@ -1,5 +1,5 @@
 import { KYOGIJO_STRINGS } from "./strings.ts";
-import { type PresetTable, type TurnPreset, type TurnView } from "./turn.camera.ts";
+import { type PresetTable, type TurnDirection, type TurnPreset, type TurnView } from "./turn.camera.ts";
 import type { Plane } from "./turn.kit.ts";
 import { type UprightOptions, type Uprights } from "./uprights.ts";
 import { type ResolvedBoard } from "./overlay.ts";
@@ -46,6 +46,10 @@ export interface TurnSettings {
     autoPlay?: boolean | "force";
     /** Degrees of yaw a second the auto-turn goes by: 12 by default, positive turning the near side to the right as a drag to the right does, negative the other way. */
     speed?: number;
+    /** Which way the auto-turn goes: `"counterclockwise"` (the way it has always turned, the near side swinging to the viewer's right) by default, or `"clockwise"`. The Reverse button, `setDirection` and `update` change it; a negative `speed` reverses it too. */
+    direction?: TurnDirection;
+    /** Called with the direction when the Reverse button or `setDirection` changes it. */
+    onDirectionChange?: (direction: TurnDirection) => void;
     /** Called with `true` when the auto-turn starts and `false` when it stops, whatever stopped it. */
     onPlayChange?: (playing: boolean) => void;
     /** Called after the view has changed by a key, a button or the pointer, with the view and the viewpoint it is (`undefined` when it has been turned by hand). */

package/dist/turn.style.js

@@ -74,6 +74,24 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-cable{fill:none;stroke:var(--ky-up-roofline);stroke-width:1}
 .ky-turn .u-fabric{fill:var(--ky-up-roof);fill-opacity:.55;stroke:none}
 .ky-turn .u-pod{fill:var(--ky-up-fascia);stroke:var(--ky-up-roofline);stroke-width:.6}
+/* A real venue's empty places, filled: the suite level between two bowls, the apron round the surface, the back of each bowl and the concourse floor behind it. */
+.ky-turn .u-suite{fill:color-mix(in srgb,var(--ky-up-fascia) 78%,var(--ky-cr-bed))}
+.ky-turn .u-suite-win{fill:color-mix(in srgb,var(--ky-cr-gap) 55%,#6f93b3)}
+.ky-turn .u-suite-bar{stroke:var(--ky-up-fascia);stroke-width:.5}
+.ky-turn .u-suite-ledge{fill:color-mix(in srgb,var(--ky-up-fascia) 60%,var(--ky-cr-conc))}
+.ky-turn .u-apron{fill:color-mix(in srgb,var(--ky-cr-bed) 82%,#000)}
+.ky-turn .u-timeb{fill:color-mix(in srgb,var(--ky-cr-conc) 70%,#3a3f46)}
+.ky-turn .u-timeb-side{fill:color-mix(in srgb,var(--ky-cr-conc) 70%,#3a3f46);filter:brightness(.7)}
+.ky-turn .u-penb{fill:color-mix(in srgb,var(--ky-up-glass,#bcd2e0) 80%,#5d7a8f)}
+.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)}
+.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))}
+.ky-turn .u-cfloor{fill:color-mix(in srgb,var(--ky-cr-bed) 60%,var(--ky-cr-conc))}
+.ky-turn .u-clane{stroke:color-mix(in srgb,var(--ky-cr-conc) 55%,#fff);stroke-opacity:.6;stroke-width:1.1}
+.ky-turn .kyogijo .ky-cr-shell:not(.ky-cr-ivy){fill:color-mix(in srgb,var(--ky-cr-bed) 70%,var(--ky-cr-conc));fill-opacity:.9}
 .ky-turn .ky-up-seats svg{opacity:var(--ky-cr-dim)}
 .ky-turn .ky-cr-seat{fill:none;stroke:var(--ky-cr-empty);stroke-width:1.3;stroke-opacity:.65}
 .ky-turn .ky-cr-h{stroke:var(--ky-cr-home)}
@@ -137,7 +155,7 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn-group{display:flex;flex-wrap:wrap;gap:6px}
 .ky-turn-controls button{font:inherit;font-size:.9rem;font-weight:600;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--ky-turn-rule);background:var(--ky-turn-chip);color:var(--ky-turn-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
 .ky-turn-controls button[aria-pressed=true]{background:var(--ky-turn-chip-on);color:var(--ky-turn-chip-on-ink);border-color:var(--ky-turn-chip-on)}
-.ky-turn-controls button[data-act]:not([data-act=reset]):not([data-act=play]){font-size:1.2rem}
+.ky-turn-controls button[data-act]:not([data-act=reset]):not([data-act=play]):not([data-act=reverse]){font-size:1.2rem}
 .ky-turn-controls button[data-act=play]{gap:.45em;padding:0 16px}
 .ky-turn-controls button[data-act=play] [data-glyph]{font-size:.8em;letter-spacing:-.1em}
 .ky-turn-controls button:focus-visible{outline:3px solid var(--ky-turn-ink);outline-offset:2px}

package/dist/venue.d.ts

@@ -10,6 +10,8 @@ export interface VenueSettings {
     roofOpen?: boolean;
     /** The walls of a real venue's building (`crowd: { real: true }`), raised on its outline: they follow `roof` where left out (a roof and walls together, as before), and `walls: true` with `roof` off raises the walls alone, `roof: true` with `walls: false` the roof alone. */
     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;
     /** How finely the curves are cut: `low` a facet to each corner, `auto` (the default) three, `high` six; an oval is 12, 28 or 56 facets round. */
     detail?: Cut;
 }

package/dist/venue.fill.d.ts

@@ -0,0 +1,40 @@
+import { type CrowdStands, type Outline, type Pt, type StandRing } from "./crowd.ts";
+import { type Plane } from "./turn.kit.ts";
+import { type Cut } from "./venue.geom.ts";
+/** The suite level's windows stand between these shares of the way across the facing wall (the bottom is a parapet, the top a ledge), and a pane is about this wide, in feet (ours). */
+export declare const SUITE: {
+    readonly from: 0.3;
+    readonly to: 0.82;
+    readonly pane: 7;
+};
+/** The thin floor of the apron lies this far over the surface, in feet, so that it shows over the floor's own drawing. */
+export declare const APRON_RISE = 0.06;
+/** The bench side's furniture, in feet along the boards from the middle of the rink: the timekeeper's table, the penalty boxes either side of it, and each team's bench beyond (ours: the usual layout of a rink, no plan of a real one). */
+export declare const BENCH_SIDE: {
+    readonly table: 6;
+    readonly penalty: readonly [8, 20];
+    readonly bench: readonly [24, 62];
+    readonly depth: 5;
+    readonly gap: 1.5;
+    readonly height: 3.4;
+};
+/** How much of a bowl's back wall is left where it is between the eye and the surface (the walls of the building take 0.02: the back of a bowl keeps a little of its body). */
+export declare const BACK_FADE = 0.08;
+/** A piece of the concourse floor smaller than this, in square feet, is a sliver a corner leaves (where the hall's rim meets the building's outline): it is left to the floor drawn under it, which has the same dark tone. */
+export declare const SLIVER = 80;
+/** The suite level seen square on: the facing wall of a quad `[inner a, inner b, outer b, outer a]` (the plane's own corners), with a band of windows and a pane to every `SUITE.pane` feet. */
+export declare function suiteWall(corners: Pt[]): string;
+/** The apron: the floor between the playing surface and the first row, a thin dark floor, and where the bowl is an ice rink's the benches, the penalty boxes and the timekeeper's table on the bench side. */
+export declare function apronPlanes(stands: CrowdStands, first: StandRing, cut: Cut, lift: number): Plane[];
+/** The plan of a ring's back: the outer edge of every strip of a tier that no walk leads on from, as the loop of points the wall is raised on. */
+export declare const backEdges: (ring: StandRing, cut: Cut) => Pt[][];
+/** The back wall of one bowl: from the floor up to the top row and a coping over it, on each stretch of the edge, painted with its ribs. It gives way to the eye as the walls of the building do, but keeps a little of itself. */
+export declare function backWall(id: string, edge: readonly Pt[], top: number, lift: number, centre: readonly [number, number]): Plane[];
+/**
+ * The concourse floor behind a bowl: flat quads, painted dark with two lanes, in rays from the middle: from the bowl's outer edge out to the rim of the hall (the nearer of the hall's rounded outline and the
+ * building's own), and from there on out to the building's outline, where the building has annexes beyond the hall (the walls and the roof stand on the hall only; the rest is floor too, not a bare sheet).
+ * The two rings are cut at the rim, so that a wall standing on it is drawn between them in the right order.
+ */
+export declare function concourseFloor(id: string, edge: Outline, middle: Pt, rim: (angle: number) => Pt, far: (angle: number) => Pt | undefined, steps: number, lift: number): Plane[];
+/** The rim of a real venue's hall along an angle from `middle`: the nearer of the hall's rounded outline and the building's own outline. */
+export declare const rimAt: (hall: Outline, footprint: readonly Pt[], middle: Pt) => (angle: number) => Pt;

package/dist/venue.fill.js

@@ -0,0 +1,174 @@
+// What fills the empty places of a real venue's 3D view, so that no big flat sheet is left in it: the suite level between two bowls (a facing wall with a band of windows, not a bare shelf), the apron between the
+// playing surface and the first row (a thin dark floor, and for ice hockey the players' benches, the penalty boxes and the timekeeper's table), the back of each bowl (a wall that closes it) and, between that wall and
+// the walls of the hall, a darker concourse floor with its lanes. All of it is ours, plausible and no plan of a real building: where a source gives a figure for none of it, the sizes are the usual ones.
+// Pure: data in, planes out.
+import { rayAt } from "./crowd.js";
+import { NHL } from "./geometry.js";
+import { n, shy, wall, box } from "./turn.kit.js";
+import { areaOf, pointList, raked, stripsOf, tidy } from "./venue.geom.js";
+import { firstHit } from "./venue.real.js";
+/** The suite level's windows stand between these shares of the way across the facing wall (the bottom is a parapet, the top a ledge), and a pane is about this wide, in feet (ours). */
+export const SUITE = { from: 0.3, to: 0.82, pane: 7 };
+/** The thin floor of the apron lies this far over the surface, in feet, so that it shows over the floor's own drawing. */
+export const APRON_RISE = 0.06;
+/** The bench side's furniture, in feet along the boards from the middle of the rink: the timekeeper's table, the penalty boxes either side of it, and each team's bench beyond (ours: the usual layout of a rink, no plan of a real one). */
+export const BENCH_SIDE = { table: 6, penalty: [8, 20], bench: [24, 62], depth: 5, gap: 1.5, height: 3.4 };
+/** How much of a bowl's back wall is left where it is between the eye and the surface (the walls of the building take 0.02: the back of a bowl keeps a little of its body). */
+export const BACK_FADE = 0.08;
+/** How high the coping stands over the top row on the back wall, in feet, and the walks of the concourse floor are this many feet from its two edges (ours). */
+const COPING = 3;
+/** The joints of the concourse floor: one about every this many feet along it, at most so many to a quad (ours). */
+const JOINT = 22;
+/** A piece of the concourse floor smaller than this, in square feet, is a sliver a corner leaves (where the hall's rim meets the building's outline): it is left to the floor drawn under it, which has the same dark tone. */
+export const SLIVER = 80;
+const JOINTS_MOST = 8;
+const lerp = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+const flatAt = (z) => ({ x0: 0, y0: 0, z0: z, gx: 0, gy: 0 });
+/** The suite level seen square on: the facing wall of a quad `[inner a, inner b, outer b, outer a]` (the plane's own corners), with a band of windows and a pane to every `SUITE.pane` feet. */
+export function suiteWall(corners) {
+    const base = `<polygon class="u-suite" points="${pointList(corners)}"/>`;
+    if (corners.length !== 4)
+        return base;
+    const [a, b, c, d] = corners;
+    const across = (s, t) => lerp(lerp(a, b, s), lerp(d, c, s), t);
+    const panes = Math.max(1, Math.round(Math.hypot(b[0] - a[0], b[1] - a[1]) / SUITE.pane));
+    const band = `<polygon class="u-suite-win" points="${pointList([across(0, SUITE.from), across(1, SUITE.from), across(1, SUITE.to), across(0, SUITE.to)])}"/>`;
+    let bars = "";
+    for (let j = 1; j < panes; j += 1) {
+        const [p, q] = [across(j / panes, SUITE.from), across(j / panes, SUITE.to)];
+        bars += `M${n(p[0])} ${n(p[1])}L${n(q[0])} ${n(q[1])}`;
+    }
+    const ledge = `<polygon class="u-suite-ledge" points="${pointList([across(0, SUITE.to), across(1, SUITE.to), across(1, SUITE.to + 0.07), across(0, SUITE.to + 0.07)])}"/>`;
+    return `${base}${band}${bars === "" ? "" : `<path class="u-suite-bar" fill="none" d="${bars}"/>`}${ledge}`;
+}
+/** The floor strips of a ring of quads painted as a floor: a base and the walks along it, at the shares `lanes` of the way across. */
+function floorOf(cls, lanes) {
+    return (corners) => {
+        const base = `<polygon class="${cls}" points="${pointList(corners)}"/>`;
+        if (corners.length === 3) {
+            // A triangle (where two rays meet at a corner of the building): its outline drawn again, smaller, round its middle.
+            const mid = [(corners[0][0] + corners[1][0] + corners[2][0]) / 3, (corners[0][1] + corners[1][1] + corners[2][1]) / 3];
+            const inner = lanes.map((t) => `M${corners.map((p) => `${n(mid[0] + (p[0] - mid[0]) * (1 - t))} ${n(mid[1] + (p[1] - mid[1]) * (1 - t))}`).join("L")}Z`);
+            return `${base}<path class="u-clane" fill="none" d="${inner.join("")}"/>`;
+        }
+        if (corners.length !== 4)
+            return base;
+        const [a, b, c, d] = corners;
+        const lines = lanes.map((t) => {
+            const [p, q] = [lerp(a, d, t), lerp(b, c, t)];
+            return `M${n(p[0])} ${n(p[1])}L${n(q[0])} ${n(q[1])}`;
+        });
+        // Joints across the floor, a paving's worth, so that a wide floor is not one flat sheet.
+        const joints = Math.min(JOINTS_MOST, Math.max(0, Math.round(Math.hypot(b[0] - a[0], b[1] - a[1]) / JOINT)));
+        for (let j = 1; j < joints; j += 1) {
+            const [p, q] = [lerp(a, b, j / joints), lerp(d, c, j / joints)];
+            lines.push(`M${n(p[0])} ${n(p[1])}L${n(q[0])} ${n(q[1])}`);
+        }
+        return `${base}<path class="u-clane" fill="none" d="${lines.join("")}"/>`;
+    };
+}
+/** The quads of a strip, as `[inner i, inner i + 1, outer i + 1, outer i]`, those with a width. */
+function* quadsOf(strip) {
+    for (let i = 0; i + 1 < strip.inner.length; i += 1) {
+        const q = [strip.inner[i], strip.inner[i + 1], strip.outer[i + 1], strip.outer[i]];
+        if (Math.hypot(q[1][0] - q[0][0], q[1][1] - q[0][1]) < 1e-6 && Math.hypot(q[2][0] - q[3][0], q[2][1] - q[3][1]) < 1e-6)
+            continue;
+        yield q;
+    }
+}
+/** The direction along a quad's first edge (or its outer edge where the inner has shrunk to a point). */
+const alongOf = (q) => {
+    const [from, to] = Math.hypot(q[1][0] - q[0][0], q[1][1] - q[0][1]) >= Math.hypot(q[2][0] - q[3][0], q[2][1] - q[3][1]) ? [q[0], q[1]] : [q[3], q[2]];
+    const long = Math.hypot(to[0] - from[0], to[1] - from[1]);
+    return long < 1e-9 ? [1, 0] : [(to[0] - from[0]) / long, (to[1] - from[1]) / long];
+};
+/** A ring of flat quads lying at `z`, between two outlines, painted as `paint` says, with the ids `${id}-${i}`. */
+function floorRing(id, kind, strips, z, paint, least = 0.05) {
+    const planes = [];
+    let count = 0;
+    for (const strip of strips) {
+        for (const q of quadsOf(strip)) {
+            const poly = tidy(q);
+            if (poly.length < 3 || Math.abs(areaOf(poly)) < least)
+                continue;
+            count += 1;
+            const p = raked(`${id}-${count}`, kind, poly, flatAt(z), alongOf(q), (corners) => paint(corners));
+            if (p !== undefined)
+                planes.push(p);
+        }
+    }
+    return planes;
+}
+/** The apron: the floor between the playing surface and the first row, a thin dark floor, and where the bowl is an ice rink's the benches, the penalty boxes and the timekeeper's table on the bench side. */
+export function apronPlanes(stands, first, cut, lift) {
+    const hole = first.hole;
+    if (hole === null || hole.kind !== "rrect")
+        return [];
+    const b = stands.box;
+    const rink = { kind: "rrect", x0: b.x, y0: b.y, x1: b.x + b.w, y1: b.y + b.h, r: stands.sport === "nhl" ? NHL.cornerRadius : 0 };
+    const planes = floorRing("apron", "apron", stripsOf(hole, rink, [], cut), lift + APRON_RISE, (corners) => `<polygon class="u-apron" points="${pointList(corners)}"/>`);
+    if (stands.sport !== "nhl")
+        return planes;
+    // The bench side is the one with the deeper apron (the NHL's first row stands further from that side); the furniture stands in the clear between the boards and the first row.
+    const bottom = hole.y1 - (b.y + b.h) >= b.y - hole.y0;
+    const depth = bottom ? hole.y1 - (b.y + b.h) : b.y - hole.y0;
+    const need = BENCH_SIDE.gap + BENCH_SIDE.depth;
+    if (depth < need + 1)
+        return planes;
+    const [y0, y1] = bottom ? [b.y + b.h + BENCH_SIDE.gap, b.y + b.h + need] : [b.y - need, b.y - BENCH_SIDE.gap];
+    const mid = b.x + b.w / 2;
+    const put = (id, from, to, cls) => box(id, "bench", { x0: mid + from, y0, x1: mid + to, y1 }, BENCH_SIDE.height, cls);
+    const furniture = [...put("timekeeper", -BENCH_SIDE.table, BENCH_SIDE.table, "u-timeb")];
+    for (const sign of [-1, 1]) {
+        const span = (lo, hi) => (sign < 0 ? [-hi, -lo] : [lo, hi]);
+        furniture.push(...put(`penalty-${sign < 0 ? "a" : "b"}`, ...span(BENCH_SIDE.penalty[0], BENCH_SIDE.penalty[1]), "u-penb"));
+        furniture.push(...put(`bench-${sign < 0 ? "a" : "b"}`, ...span(BENCH_SIDE.bench[0], BENCH_SIDE.bench[1]), "u-teamb"));
+    }
+    return [...planes, ...furniture];
+}
+/** The plan of a ring's back: the outer edge of every strip of a tier that no walk leads on from, as the loop of points the wall is raised on. */
+export const backEdges = (ring, cut) => stripsOf(ring.region, ring.hole, ring.more ?? [], cut).map((strip) => strip.outer);
+/** The back wall of one bowl: from the floor up to the top row and a coping over it, on each stretch of the edge, painted with its ribs. It gives way to the eye as the walls of the building do, but keeps a little of itself. */
+export function backWall(id, edge, top, lift, centre) {
+    const planes = [];
+    for (let i = 0; i + 1 < edge.length; i += 1) {
+        const [a, b] = [edge[i], edge[i + 1]];
+        const long = Math.hypot(b[0] - a[0], b[1] - a[1]);
+        if (long < 0.5)
+            continue;
+        const high = lift + top;
+        const ribs = Math.max(1, Math.round(long / 14));
+        let lines = "";
+        for (let j = 1; j < ribs; j += 1)
+            lines += `M${n((long * j) / ribs)} ${n(COPING)}V${n(high)}`;
+        const svg = `<rect class="u-back" width="${n(long)}" height="${n(high)}"/>${lines === "" ? "" : `<path class="u-backrib" fill="none" d="${lines}"/>`}<rect class="u-coping" width="${n(long)}" height="${n(COPING)}"/>`;
+        planes.push({ ...shy(wall(`${id}-${i}`, "wall", a[0], a[1], b[0], b[1], 0, high, svg), centre), fadeTo: BACK_FADE });
+    }
+    return planes;
+}
+/**
+ * The concourse floor behind a bowl: flat quads, painted dark with two lanes, in rays from the middle: from the bowl's outer edge out to the rim of the hall (the nearer of the hall's rounded outline and the
+ * building's own), and from there on out to the building's outline, where the building has annexes beyond the hall (the walls and the roof stand on the hall only; the rest is floor too, not a bare sheet).
+ * The two rings are cut at the rim, so that a wall standing on it is drawn between them in the right order.
+ */
+export function concourseFloor(id, edge, middle, rim, far, steps, lift) {
+    const dist = (p) => Math.hypot(p[0] - middle[0], p[1] - middle[1]);
+    const angles = Array.from({ length: steps + 1 }, (_, k) => (2 * Math.PI * k) / steps);
+    const inner = angles.map((a) => rayAt(edge, middle[0], middle[1], a));
+    const rims = angles.map((a, k) => {
+        const r = rim(a);
+        return dist(r) > dist(inner[k]) + 0.5 ? r : inner[k];
+    });
+    const outs = angles.map((a, k) => {
+        const f = far(a);
+        return f !== undefined && dist(f) > dist(rims[k]) + 0.5 ? f : rims[k];
+    });
+    const paint = floorOf("u-cfloor", [0.3, 0.62]);
+    return [...floorRing(`${id}-in`, "floor", [{ inner, outer: rims }], lift + APRON_RISE, paint, SLIVER), ...floorRing(`${id}-out`, "floor", [{ inner: rims, outer: outs }], lift + APRON_RISE, paint, SLIVER)];
+}
+/** The rim of a real venue's hall along an angle from `middle`: the nearer of the hall's rounded outline and the building's own outline. */
+export const rimAt = (hall, footprint, middle) => (angle) => {
+    const cap = rayAt(hall, middle[0], middle[1], angle);
+    const out = firstHit(footprint, middle, angle);
+    return out !== undefined && Math.hypot(out[0] - middle[0], out[1] - middle[1]) < Math.hypot(cap[0] - middle[0], cap[1] - middle[1]) ? out : cap;
+};

package/dist/venue.js

@@ -7,7 +7,8 @@ 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 { realBuilding } from "./venue.real.js";
+import { apronPlanes, backEdges, backWall, concourseFloor, rimAt, suiteWall } from "./venue.fill.js";
+import { firstHit, realBuilding } from "./venue.real.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. */
@@ -51,6 +52,7 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
     const covers = stands.covers;
     const inCover = (p) => covers.some(([x0, y0, x1, y1]) => p[0] >= x0 && p[0] <= x1 && p[1] >= y0 && p[1] <= y1);
     const pieces = (poly) => (covers.length === 0 ? [poly] : clipAround(poly, covers));
+    const filled = v.fill ?? stands.real !== undefined;
     const seatPlanes = [];
     const wallSeats = [];
     let count = 0;
@@ -138,12 +140,31 @@ export function standsVenueOf(stands, crowd, o, v, lift) {
                 continue;
             for (const piece of pieces(tidy(q))) {
                 count += 1;
-                const p = raked(`walk-${count}`, "concourse", piece, slope.slope, slope.along, (corners) => `<polygon class="u-conc" points="${pointList(corners)}"/>`);
+                // 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)}"/>`));
                 if (p !== undefined)
                     seatPlanes.push({ ...p, shy: slope.out });
             }
         }
     }
+    // The empty places are filled (see `venue.fill.ts`): the apron round the surface and the back of each bowl, and, for a real venue's building, the concourse floor behind the bowl.
+    if (filled) {
+        const first = stands.rings.find((r) => r.tier !== "wall" && r.tier !== "bleachers") ?? stands.rings[0];
+        if (first !== undefined)
+            seatPlanes.push(...apronPlanes(stands, first, cut, lift));
+        const real = stands.real;
+        const middle = [centre[0], centre[1]];
+        const behind = new Set(links.map((l) => l.before));
+        for (const ring of stands.rings) {
+            if (ring.tier === "wall" || behind.has(ring))
+                continue;
+            backEdges(ring, cut).forEach((edge, k) => {
+                seatPlanes.push(...backWall(`back-${ring.id}${k === 0 ? "" : `-s${k}`}`, edge, ring.height[1], lift, centre));
+                if (real !== undefined && ring.region.kind !== "poly" && k === 0)
+                    seatPlanes.push(...concourseFloor(`floor-${ring.id}`, ring.region, middle, rimAt(real.hall, real.footprint, middle), (a) => firstHit(real.footprint, middle, a), ARC_STEPS[cut].oval, lift));
+            });
+        }
+    }
     const items = [];
     if (seatPlanes.length > 0)
         items.push({ id: "stands", kind: "stands", at: centre, height: topOf(seatPlanes), planes: seatPlanes });

package/dist/venue.real.d.ts

@@ -7,6 +7,8 @@ export declare const SADDLE_RISE = 30;
 export declare function saddleAt(real: Pick<RealShell, "footprint">, [x, y]: Pt): number;
 /** The height of the roof over a point of the building's edge, above the surface, in feet. */
 export declare const roofAt: (real: RealShell, p: Pt) => number;
+/** The point where a ray from `from` first meets a polygon, or `undefined`. */
+export declare function firstHit(poly: readonly Pt[], from: Pt, angle: number): Pt | undefined;
 /**
  * The walls and the roof of a real venue (`parts` says which are made). The hall is the building's outline cut to the bowl's wall and a margin (`RealShell.hall`): its rim is where a ray from the middle meets the one or the other first, in `steps`
  * rays. A wall stands on each stretch of the rim, up to the roof's height over it; the roof is a band from the rim in to the inner edge of the top tier (the middle stays open, as the 3D view's roofs are).

package/dist/venue.real.js

@@ -21,7 +21,7 @@ export function saddleAt(real, [x, y]) {
 /** The height of the roof over a point of the building's edge, above the surface, in feet. */
 export const roofAt = (real, p) => real.edge + (real.roof === "saddle" ? SADDLE_RISE * saddleAt(real, p) : 0);
 /** The point where a ray from `from` first meets a polygon, or `undefined`. */
-function firstHit(poly, from, angle) {
+export function firstHit(poly, from, angle) {
     const [dx, dy] = [Math.cos(angle), Math.sin(angle)];
     let best;
     poly.forEach(([ax, ay], i) => {

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.34.0";
+export declare const VERSION = "0.35.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.34.0";
+export const VERSION = "0.35.0";

package/package.json

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