@johnmorrisdotca/kyogijo-stadiums 0.7.0 → 0.8.0

package/dist/turn.model.js

@@ -2,9 +2,12 @@
 // drawing's own options, in Node or in a page; `turn.markup.ts` writes it as markup and `turn.dom.ts` makes it turn.
 import { describe, drawKyogijo } from "./draw.js";
 import { hash } from "./format.js";
+import { lengthUnit } from "./common.js";
+import { convertLength } from "./units.js";
 import { KYOGIJO_STRINGS } from "./strings.js";
 import { TURN_DEFAULT, clampView, presetView } from "./turn.camera.js";
 import { describeUprights, planesOf, uprightsFor } from "./uprights.js";
+import { resolveCrowd } from "./crowd.js";
 /** The pixels in one foot of the scene at a zoom of 1: the floor is drawn this big, and scaled down to fit. A larger floor is sharper. */
 export const WORLD_PX = 1400;
 /** The options with what makes the floor of a 3D view: the whole surface, lying wide, at its full size. */
@@ -16,6 +19,18 @@ export function floorOptions(options) {
     return rest;
 }
 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"];
+/** 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);
+    return found === null ? undefined : { sport: found[1], look: found[2] };
+}
+/** The crowd's colours and the sides' that the floor drawing sets on its root, for the venue's patterns (which stand outside that SVG) to read. */
+function crowdVars(floor) {
+    const style = /^<svg[^>]*\sstyle="([^"]*)"/.exec(floor)?.[1];
+    return style === undefined ? "" : style.split(";").filter((rule) => /^--ky-(cr-home|cr-away|left|right):/.test(rule)).join(";");
+}
 /** The view a set of settings opens on. */
 export const openingView = (settings, sport) => clampView({ ...(presetView(settings.preset, sport) ?? presetView(TURN_DEFAULT, sport)), ...settings.view });
 /** Work out a 3D view from the options of a drawing. */
@@ -25,10 +40,22 @@ export function buildTurn(options, settings = {}) {
     const wanted = settings.uprights;
     const badge = asked.size === "badge";
     const upOptions = wanted === false || wanted === true || wanted === undefined ? {} : wanted;
-    const uprights = wanted === false || badge ? { items: [], lift: 0, thin: 0.2 } : uprightsFor(asked, { ...upOptions, score: settings.score ?? upOptions.score });
+    const id = settings.id ?? (typeof options.id === "string" && options.id !== "" ? `${options.id}-turn` : `ky-turn-${hash(JSON.stringify([options, settings.uprights, settings.preset, settings.venue]))}`);
+    // The venue is on when the drawing has a crowd or is a dojo (and when `uprights` has not asked for the floor alone), unless it is turned off; `venue: true` raises it whatever else is asked.
+    const asks = settings.venue;
+    const venueOn = asks === false || badge ? false : asks === undefined ? wanted !== false && (resolveCrowd(asked.crowd) !== undefined || asked.sport === "dojo") : true;
+    const venue = venueOn ? { ...(typeof asks === "object" ? asks : {}), id } : undefined;
+    const score = settings.score ?? upOptions.score;
+    const uprights = badge ? { items: [], lift: 0, thin: 0.2 } : wanted === false ? (venue === undefined ? { items: [], lift: 0, thin: 0.2 } : uprightsFor(asked, { only: VENUE_KINDS, venue })) : uprightsFor(asked, { ...upOptions, score, venue });
     // The score hung up as a scoreboard is not on the floor too.
     const boarded = uprights.items.some((item) => item.kind === "scoreboard");
-    const o = boarded ? { ...asked, plate: false, size: asked.size === "compact" ? "full" : asked.size } : asked;
+    // The stands are raised, so the floor draws no crowd: it is the surface with ground enough round it for the stands to stand on.
+    const crowdOpt = asked.crowd;
+    const reach = uprights.reach;
+    const margin = reach === undefined ? undefined : convertLength(reach, "ft", lengthUnit(asked));
+    const own = asked.margin;
+    const base = reach !== undefined && crowdOpt !== undefined && crowdOpt !== false ? { ...asked, crowd: undefined, margin: Math.max(margin ?? 0, typeof own === "number" && Number.isFinite(own) ? own : 0) } : asked;
+    const o = boarded ? { ...base, plate: false, size: asked.size === "compact" ? "full" : asked.size } : base;
     const floor = settings.floor === undefined ? drawKyogijo(o) : settings.floor(o);
     const found = VIEWBOX.exec(floor);
     if (found === null)
@@ -68,7 +95,6 @@ export function buildTurn(options, settings = {}) {
     const box = { x0: (x0 - centre[0]) * scale, x1: (x1 - centre[0]) * scale, y0: (y0 - centre[1]) * scale, y1: (y1 - centre[1]) * scale, z0: 0, z1: top * scale };
     const { title, description } = describe(o);
     const standing = describeUprights(o, uprights, language);
-    const id = settings.id ?? (typeof options.id === "string" && options.id !== "" ? `${options.id}-turn` : `ky-turn-${hash(JSON.stringify([options, settings.uprights, settings.preset]))}`);
     return {
         id,
         language,
@@ -80,6 +106,11 @@ export function buildTurn(options, settings = {}) {
         viewBox: { x: vx, y: vy, w: vw, h: vh },
         scale,
         uprights,
+        defs: uprights.defs ?? "",
+        // The colours the crowd has in the flat drawing (which the floor no longer carries) are read from a small drawing of the same options.
+        crowdStyle: uprights.defs === undefined ? "" : crowdVars(drawKyogijo({ ...asked, size: "badge", style: "none" })),
+        venue: venue !== undefined,
+        look: lookOf(floor),
         planes,
         box,
         centre,

package/dist/turn.style.js

@@ -3,9 +3,9 @@
  * defaults are in `:where()`, which has no weight, so a page's own rule always wins; the colours are custom properties (`--ky-up-*`) a page can set.
  */
 export const KYOGIJO_TURN_STYLE = `
-:where(.ky-turn){--ky-up-sbframe:#1a1f1c;--ky-up-sbedge:#5b645e;--ky-up-sbline:#59615b;--ky-up-pole:#e9e7de;--ky-up-white:#f6f4ec;--ky-up-yellow:#f2c230;--ky-up-red:#c8372d;--ky-up-orange:#f26a1b;--ky-up-wood:#e3d4b4;--ky-up-leg:#474e49;--ky-up-pad:#2f6db0;--ky-up-table:#18243f;--ky-up-foot:rgba(0,0,0,.25);--ky-up-ground:#d9d5c7;--ky-up-wall:#2f4a36;--ky-up-clay:#a8703f;--ky-up-cap:#1d2a22;--ky-up-board:#ece9df;--ky-up-glass:rgba(138,190,232,.26);--ky-up-backboard:rgba(255,255,255,.88);--ky-up-outline:#f2f0e6;--ky-up-rim:#e8591a;--ky-up-mesh:rgba(24,30,27,.7);--ky-up-netfill:rgba(255,255,255,.2);--ky-up-tape:#fbfaf4;--ky-turn-bg:transparent;--ky-turn-ink:#1f2320;--ky-turn-rule:rgba(31,35,32,.22);--ky-turn-chip:rgba(255,255,255,.86);--ky-turn-chip-on:#1f2320;--ky-turn-chip-on-ink:#fff}
-@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .ky-turn:not([data-theme=light])){--ky-up-sbframe:#0c0f0d;--ky-up-sbedge:#7a847d;--ky-up-sbline:#8a928c;--ky-up-pole:#d6d4ca;--ky-up-white:#e8e6dc;--ky-up-wood:#a89873;--ky-up-leg:#8a928c;--ky-up-ground:#242823;--ky-up-wall:#4d6b55;--ky-up-clay:#7d5231;--ky-up-cap:#c9d2cc;--ky-up-board:#8d928b;--ky-up-glass:rgba(150,200,240,.2);--ky-up-backboard:rgba(255,255,255,.34);--ky-up-outline:#e7e4d8;--ky-up-mesh:rgba(236,236,226,.62);--ky-up-netfill:rgba(255,255,255,.08);--ky-up-tape:#efede2;--ky-turn-ink:#ece8dc;--ky-turn-rule:rgba(236,232,220,.28);--ky-turn-chip:rgba(24,28,25,.82);--ky-turn-chip-on:#ece8dc;--ky-turn-chip-on-ink:#1f2320}}
-:where(html[data-theme=dark] .ky-turn,.ky-turn[data-theme=dark]){--ky-up-sbframe:#0c0f0d;--ky-up-sbedge:#7a847d;--ky-up-sbline:#8a928c;--ky-up-pole:#d6d4ca;--ky-up-white:#e8e6dc;--ky-up-wood:#a89873;--ky-up-leg:#8a928c;--ky-up-ground:#242823;--ky-up-wall:#4d6b55;--ky-up-clay:#7d5231;--ky-up-cap:#c9d2cc;--ky-up-board:#8d928b;--ky-up-glass:rgba(150,200,240,.2);--ky-up-backboard:rgba(255,255,255,.34);--ky-up-outline:#e7e4d8;--ky-up-mesh:rgba(236,236,226,.62);--ky-up-netfill:rgba(255,255,255,.08);--ky-up-tape:#efede2;--ky-turn-ink:#ece8dc;--ky-turn-rule:rgba(236,232,220,.28);--ky-turn-chip:rgba(24,28,25,.82);--ky-turn-chip-on:#ece8dc;--ky-turn-chip-on-ink:#1f2320}
+:where(.ky-turn){--ky-left:#2f6db0;--ky-right:#b5452c;--ky-cr-home:#b5452c;--ky-cr-away:#2f6db0;--ky-cr-bed:#4a525d;--ky-cr-empty:#7d8794;--ky-cr-gap:#14181d;--ky-cr-conc:#8c929b;--ky-cr-dim:1;--ky-up-roof:rgba(214,218,212,.6);--ky-up-roofline:rgba(40,46,42,.55);--ky-up-fascia:#9aa09a;--ky-up-door:#8a6a46;--ky-up-window:rgba(150,200,240,.55);--ky-up-sash:#f2f0e6;--ky-up-banner:#26211d;--ky-up-bannerline:#c8b88a;--ky-up-room:#efe8d6;--ky-up-roomback:#d6cdb9;--ky-up-ceiling:#dedcd5;--ky-up-railw:#fbfaf6;--ky-up-wainline:#6b4a2a;--ky-up-riser:#3f342c;--ky-up-slab:#d8cfba;--ky-up-slabedge:#c2b69c;--ky-up-seatc:#46342a;--ky-up-seatb:#2d211b;--ky-up-dais:#a0683a;--ky-up-dais-side:#6a4326;--ky-up-shrine:#c9b48f;--ky-up-shrine-side:#8f7a55;--ky-up-gal:#4d4037;--ky-up-aisle:#dcc196;--ky-up-panel:rgba(95,58,22,.3);--ky-up-alcove:#b58a52;--ky-up-purple:#5b2a6e;--ky-up-clock:#ffffff;--ky-up-rail:#3a2c1f;--ky-up-matedge:#2a2a26;--ky-up-sbframe:#1a1f1c;--ky-up-sbedge:#5b645e;--ky-up-sbline:#59615b;--ky-up-pole:#e9e7de;--ky-up-white:#f6f4ec;--ky-up-yellow:#f2c230;--ky-up-red:#c8372d;--ky-up-orange:#f26a1b;--ky-up-wood:#e3d4b4;--ky-up-leg:#474e49;--ky-up-pad:#2f6db0;--ky-up-table:#18243f;--ky-up-foot:rgba(0,0,0,.25);--ky-up-ground:#d9d5c7;--ky-up-wall:#2f4a36;--ky-up-clay:#a8703f;--ky-up-cap:#1d2a22;--ky-up-board:#ece9df;--ky-up-glass:rgba(138,190,232,.26);--ky-up-backboard:rgba(255,255,255,.88);--ky-up-outline:#f2f0e6;--ky-up-rim:#e8591a;--ky-up-mesh:rgba(24,30,27,.7);--ky-up-netfill:rgba(255,255,255,.2);--ky-up-tape:#fbfaf4;--ky-turn-bg:transparent;--ky-turn-ink:#1f2320;--ky-turn-rule:rgba(31,35,32,.22);--ky-turn-chip:rgba(255,255,255,.86);--ky-turn-chip-on:#1f2320;--ky-turn-chip-on-ink:#fff}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .ky-turn:not([data-theme=light])){--ky-cr-bed:#242a32;--ky-cr-empty:#4a535f;--ky-cr-gap:#050709;--ky-cr-conc:#2a3038;--ky-cr-dim:.82;--ky-up-roof:rgba(60,66,62,.6);--ky-up-roofline:rgba(200,206,200,.5);--ky-up-fascia:#505650;--ky-up-door:#6a4f33;--ky-up-gal:#2d2621;--ky-up-aisle:#8f7752;--ky-up-alcove:#7d5c36;--ky-up-purple:#43204f;--ky-up-clock:#cfcbc0;--ky-up-room:#6d675a;--ky-up-roomback:#58534a;--ky-up-ceiling:#8c8a82;--ky-up-railw:#d9d6cc;--ky-up-riser:#251f1b;--ky-up-slab:#6b6455;--ky-up-slabedge:#585143;--ky-up-seatc:#2f231c;--ky-up-seatb:#1c1411;--ky-up-dais:#7d5230;--ky-up-dais-side:#52361f;--ky-up-sbframe:#0c0f0d;--ky-up-sbedge:#7a847d;--ky-up-sbline:#8a928c;--ky-up-pole:#d6d4ca;--ky-up-white:#e8e6dc;--ky-up-wood:#a89873;--ky-up-leg:#8a928c;--ky-up-ground:#242823;--ky-up-wall:#4d6b55;--ky-up-clay:#7d5231;--ky-up-cap:#c9d2cc;--ky-up-board:#8d928b;--ky-up-glass:rgba(150,200,240,.2);--ky-up-backboard:rgba(255,255,255,.34);--ky-up-outline:#e7e4d8;--ky-up-mesh:rgba(236,236,226,.62);--ky-up-netfill:rgba(255,255,255,.08);--ky-up-tape:#efede2;--ky-turn-ink:#ece8dc;--ky-turn-rule:rgba(236,232,220,.28);--ky-turn-chip:rgba(24,28,25,.82);--ky-turn-chip-on:#ece8dc;--ky-turn-chip-on-ink:#1f2320}}
+:where(html[data-theme=dark] .ky-turn,.ky-turn[data-theme=dark]){--ky-cr-bed:#242a32;--ky-cr-empty:#4a535f;--ky-cr-gap:#050709;--ky-cr-conc:#2a3038;--ky-cr-dim:.82;--ky-up-roof:rgba(60,66,62,.6);--ky-up-roofline:rgba(200,206,200,.5);--ky-up-fascia:#505650;--ky-up-door:#6a4f33;--ky-up-gal:#2d2621;--ky-up-aisle:#8f7752;--ky-up-alcove:#7d5c36;--ky-up-purple:#43204f;--ky-up-clock:#cfcbc0;--ky-up-room:#6d675a;--ky-up-roomback:#58534a;--ky-up-ceiling:#8c8a82;--ky-up-railw:#d9d6cc;--ky-up-riser:#251f1b;--ky-up-slab:#6b6455;--ky-up-slabedge:#585143;--ky-up-seatc:#2f231c;--ky-up-seatb:#1c1411;--ky-up-dais:#7d5230;--ky-up-dais-side:#52361f;--ky-up-sbframe:#0c0f0d;--ky-up-sbedge:#7a847d;--ky-up-sbline:#8a928c;--ky-up-pole:#d6d4ca;--ky-up-white:#e8e6dc;--ky-up-wood:#a89873;--ky-up-leg:#8a928c;--ky-up-ground:#242823;--ky-up-wall:#4d6b55;--ky-up-clay:#7d5231;--ky-up-cap:#c9d2cc;--ky-up-board:#8d928b;--ky-up-glass:rgba(150,200,240,.2);--ky-up-backboard:rgba(255,255,255,.34);--ky-up-outline:#e7e4d8;--ky-up-mesh:rgba(236,236,226,.62);--ky-up-netfill:rgba(255,255,255,.08);--ky-up-tape:#efede2;--ky-turn-ink:#ece8dc;--ky-turn-rule:rgba(236,232,220,.28);--ky-turn-chip:rgba(24,28,25,.82);--ky-turn-chip-on:#ece8dc;--ky-turn-chip-on-ink:#1f2320}
 .ky-turn{position:relative;display:block;width:100%;color:var(--ky-turn-ink);font-family:var(--ky-font,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif);background:var(--ky-turn-bg)}
 .ky-turn-view{position:relative;isolation:isolate;width:100%;aspect-ratio:var(--ky-turn-ratio,16/10);min-height:260px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;border-radius:12px;outline-offset:2px}
 .ky-turn[data-touch=turn] .ky-turn-view{touch-action:none}
@@ -44,11 +44,65 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-flag{fill:var(--ky-up-orange)}
 .ky-turn .u-frame-white{stroke:var(--ky-up-white)}
 .ky-turn .u-frame-red{stroke:var(--ky-up-red)}
+.ky-turn-defs{position:absolute;width:0;height:0;overflow:hidden}
+.ky-turn .u-bed{fill:var(--ky-cr-bed)}
+.ky-turn .u-blk{fill:var(--ky-cr-home)}
+.ky-turn .u-blk-a,.ky-turn .u-ta{fill:var(--ky-cr-away)}
+.ky-turn .u-th{fill:var(--ky-cr-home)}
+.ky-turn .u-conc{fill:var(--ky-cr-conc)}
+.ky-turn .u-fascia{fill:var(--ky-up-fascia)}
+.ky-turn .u-roof{fill:var(--ky-up-roof);stroke:var(--ky-up-roofline);stroke-width:.8;stroke-linejoin:round}
+.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)}
+.ky-turn .ky-cr-a{stroke:var(--ky-cr-away)}
+.ky-turn .ky-cr-h-d{stroke:var(--ky-cr-home);stroke-opacity:.6}
+.ky-turn .ky-cr-a-d{stroke:var(--ky-cr-away);stroke-opacity:.6}
+.ky-turn .ky-cr-th{fill:var(--ky-cr-home)}
+.ky-turn .ky-cr-ta{fill:var(--ky-cr-away)}
+.ky-turn .ky-cr-tw{fill:#f2f0ea}
+.ky-turn .ky-cr-aisle{fill:none;stroke:var(--ky-cr-gap);stroke-opacity:.8}
+.ky-turn .ky-cr-row{fill:none;stroke:var(--ky-cr-gap);stroke-opacity:.5;stroke-width:.5}
+.ky-turn .ky-bud-gseat{stroke:var(--ky-up-rail);stroke-opacity:.3}
+.ky-turn .u-door{fill:var(--ky-up-door)}
+.ky-turn .u-window{fill:var(--ky-up-window)}
+.ky-turn .u-sash{stroke:var(--ky-up-sash);stroke-width:.25}
+.ky-turn .u-banner{fill:var(--ky-up-banner)}
+.ky-turn .u-bannerline{stroke:var(--ky-up-bannerline);stroke-width:.18}
+.ky-turn .u-room{fill:var(--ky-up-room)}
+.ky-turn .u-room.u-room-back{fill:var(--ky-up-roomback)}
+.ky-turn .u-ceiling{fill:var(--ky-up-ceiling);fill-opacity:.9}
+.ky-turn .u-wainscot{fill:var(--ky-bud-floor,#b98f5c)}
+.ky-turn .u-wainline{stroke:var(--ky-up-wainline);stroke-width:.12}
+.ky-turn .u-gbed.u-riser{fill:var(--ky-up-riser)}
+.ky-turn .u-aisle{fill:var(--ky-up-aisle)}
+.ky-turn .u-panel{stroke:var(--ky-up-panel);stroke-width:.1}
+.ky-turn .u-alcove{fill:var(--ky-up-alcove)}
+.ky-turn .u-frame{stroke:#f6f3ea;stroke-width:.3}
+.ky-turn .u-shrinef{fill:#2b2018;stroke:#f6f3ea;stroke-width:.25}
+.ky-turn .u-scroll{fill:#efe6cf;stroke:#8a6f45;stroke-width:.08}
+.ky-turn .u-purple{fill:var(--ky-up-purple)}
+.ky-turn .u-clockface{fill:var(--ky-up-clock);stroke:#3f3c36;stroke-width:.35}
+.ky-turn .u-clockhands{stroke:#2a2a28;stroke-width:.3;stroke-linecap:round}
+.ky-turn .u-light{fill:#fffdf3;stroke:#b9b7b0;stroke-width:.08}
+.ky-turn .u-dais{fill:var(--ky-up-dais);stroke:#f2e6c8;stroke-width:.12}
+.ky-turn .u-dais-side{fill:var(--ky-up-dais-side);stroke:#f2e6c8;stroke-width:.08}
+.ky-turn .u-shrine{fill:var(--ky-up-shrine)}
+.ky-turn .u-shrine-side{fill:var(--ky-up-shrine-side)}
+.ky-turn .u-gbed{fill:var(--ky-up-gal)}
+.ky-turn .u-slab{fill:var(--ky-up-slab)}
+.ky-turn .u-slabedge{fill:var(--ky-up-slabedge)}
+.ky-turn .u-seatcush{fill:var(--ky-up-seatc)}
+.ky-turn .u-seatback{fill:var(--ky-up-seatb)}
+.ky-turn .u-railline{stroke:var(--ky-up-railw);stroke-width:.3;stroke-linecap:square}
+.ky-turn .u-matedge{fill:var(--ky-up-matedge)}
 .ky-turn-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
 .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]){font-size:1.2rem}
+.ky-turn-controls button[data-act]:not([data-act=reset]):not([data-act=play]){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}
 .ky-turn-controls button:disabled{opacity:.4;cursor:default}
 .ky-turn-help,.ky-turn-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

package/dist/uprights.d.ts

@@ -1,5 +1,6 @@
 import { type Plane, type Upright, type UprightKind } from "./turn.kit.ts";
 import { type Unit } from "./units.ts";
+import { type VenueBuild } from "./venue.ts";
 import type { Language, SurfaceOptions } from "./types.ts";
 /** What can be asked of the uprights. */
 export interface UprightOptions {
@@ -11,6 +12,8 @@ export interface UprightOptions {
     boards?: boolean;
     /** Only these kinds of thing; every kind the surface has when missing. */
     only?: readonly UprightKind[];
+    /** The venue round the surface: the stands of its crowd raised, their roof if asked, a dojo's walls with their doors and windows, its dais, banner, balconies and the edge of its mats. Off here when missing: `buildTurn` turns it on for a drawing with a crowd or a dojo. `id` is the prefix of the ids of the patterns it uses. */
+    venue?: VenueBuild;
 }
 /** What stands on a surface. */
 export interface Uprights {
@@ -26,6 +29,10 @@ export interface Uprights {
         x1: number;
         y1: number;
     };
+    /** The patterns the venue's planes are drawn with (the contents of an SVG `defs`), when it has any. */
+    defs?: string;
+    /** How far the venue reaches beyond the surface, in feet, when it has one: the ground a floor needs for it to stand on. */
+    reach?: number;
 }
 /** All the planes of all the things. */
 export declare const planesOf: (u: Pick<Uprights, "items">) => Plane[];

package/dist/uprights.js

@@ -27,6 +27,8 @@ import { isBudoSport } from "./budo/plan.js";
 import { courtUprights, rinkUprights } from "./uprights.rinks.js";
 import { convertLength } from "./units.js";
 import { sheetFor } from "./sheet.js";
+import { roomVenue } from "./venue.room.js";
+import { NO_VENUE, standsVenue } from "./venue.js";
 /** All the planes of all the things. */
 export const planesOf = (u) => u.items.flatMap((item) => item.planes);
 /** The unit each sport's rulebook gives its heights in, when the options name none. */
@@ -122,6 +124,18 @@ export function uprightsFor(o, settings = {}) {
         thin = thinnest(sheet.length, sheet.width);
         area = { x0: 0, y0: 0, x1: sheet.length, y1: sheet.width };
     }
+    // The venue: the stands and the room, raised. A dojo's own walls are the room's, with their doors and windows.
+    let defs = "";
+    let reach = 0;
+    if (settings.venue !== undefined) {
+        const stands = standsVenue(o, settings.venue, lift);
+        const room = isBudoSport(sport) ? roomVenue({ ...o, sport }, settings.venue, lift) : NO_VENUE;
+        if (room.items.some((item) => item.kind === "walls"))
+            items = items.filter((item) => item.kind !== "walls");
+        items.push(...stands.items, ...room.items);
+        defs = stands.defs + room.defs;
+        reach = Math.max(stands.reach, room.reach);
+    }
     // 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) {
@@ -131,7 +145,7 @@ export function uprightsFor(o, settings = {}) {
     }
     if (settings.only !== undefined)
         items = items.filter((item) => settings.only.includes(item.kind));
-    return { items, lift, thin, area };
+    return { items, lift, thin, area, ...(defs === "" ? {} : { defs }), ...(reach === 0 ? {} : { reach }) };
 }
 /** A length in feet as a rulebook would print it in `unit`: metres to the centimetre, feet to a tenth. */
 function said(feet, unit, language) {

package/dist/venue.d.ts

@@ -0,0 +1,31 @@
+import { type Cut } from "./venue.geom.ts";
+import { type Upright } from "./turn.kit.ts";
+import type { 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. */
+    roof?: 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;
+}
+/** 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;
+}
+/** 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 {
+    items: Upright[];
+    defs: string;
+    /** How far the venue reaches beyond the surface's box on its widest side, in feet: the ground the floor needs for it to stand on. 0 for none. */
+    reach: number;
+}
+export declare const NO_VENUE: Venue;
+/** How far the roof stands over the top row at its edge, in feet (ours: no rule gives it), and how far it reaches over the seats. */
+export declare const ROOF: {
+    readonly clearance: 26;
+    readonly canopyReach: 0.62;
+    readonly canopyDrop: 6;
+    readonly lidRise: 26;
+};
+/** The stands of a surface as planes: `undefined`-free, an empty venue when the options have no crowd (or the crowd is a hall's gallery, which `venue.room.ts` raises). */
+export declare function standsVenue(o: SurfaceOptions, v: VenueBuild, lift: number): Venue;

package/dist/venue.geom.d.ts

@@ -0,0 +1,53 @@
+import type { Outline, Pt } from "./crowd.ts";
+import { type Plane } from "./turn.kit.ts";
+/** How finely the curves of a ring are cut: facets to a quarter of a rounded corner, or round an oval. */
+export type Cut = "low" | "auto" | "high";
+/** A band of the stands as two polylines of one length, the inner edge and the outer: quad `i` is `inner[i]`, `inner[i + 1]`, `outer[i + 1]`, `outer[i]`. */
+export interface Strip {
+    inner: Pt[];
+    outer: Pt[];
+}
+/** Facets to a quarter circle of a rounded rectangle, and to a whole oval, at each cut. */
+export declare const ARC_STEPS: Readonly<Record<Cut, {
+    corner: number;
+    oval: number;
+    poly: number;
+}>>;
+/** The strips of one tier of the stands: its band between `hole` and `region`, with the pieces that are apart from it. */
+export declare function stripsOf(region: Outline, hole: Outline | null, more: readonly Outline[], cut: Cut): Strip[];
+/** The strip a ring's concourse is: from one outline to another. */
+export declare const stripBetween: (inner: Outline, outer: Outline, cut: Cut) => Strip[];
+/** A polygon without its repeated neighbours (and its closing point, if given). */
+export declare function tidy(points: readonly Pt[]): Pt[];
+/** The area of a polygon, signed: positive going clockwise on a page with y down. */
+export declare function areaOf(points: readonly Pt[]): number;
+/** A polygon cut to the inside of a convex polygon (either way round). */
+export declare function clipConvex(subject: readonly Pt[], clip: readonly Pt[]): Pt[];
+/** A polygon with a box `[x0, y0, x1, y1]` taken out of it: the pieces left (left of it, right of it, and above and below it between), which are convex when the polygon is. */
+export declare function clipOutside(poly: readonly Pt[], box: readonly [number, number, number, number]): Pt[][];
+/** A polygon with every box taken out of it. */
+export declare function clipAround(poly: readonly Pt[], boxes: readonly (readonly [number, number, number, number])[]): Pt[][];
+/** A segment cut to the inside of a convex polygon (Cyrus and Beck), or `undefined` when none of it is. */
+export declare function clipSegment(a: Pt, b: Pt, clip: readonly Pt[]): [Pt, Pt] | undefined;
+/** How the height of a raked plane changes with place: `z = z0 + gx (x - x0) + gy (y - y0)`. */
+export interface Slope {
+    x0: number;
+    y0: number;
+    z0: number;
+    gx: number;
+    gy: number;
+}
+export declare const heightAt: (s: Slope, x: number, y: number) => number;
+/** The slope of a quad of a band: the height `h0` along its inner edge, `h1` along its outer, rising across it. `undefined` for a quad with no width. */
+export declare function slopeOf(q: readonly [Pt, Pt, Pt, Pt], h0: number, h1: number): {
+    slope: Slope;
+    out: Pt;
+    along: Pt;
+} | undefined;
+/**
+ * A planar polygon as one plane: its corner and its two sides are in the polygon's own plane, its `u` along the horizontal direction `along` (so that a texture's rows run along a band), its `v` across.
+ * `paint` is given the polygon's corners in the plane's own feet (and a function that puts any plan point there) and answers the SVG drawn on it.
+ */
+export declare function raked(id: string, kind: Plane["kind"], poly: readonly Pt[], slope: Slope, along: Pt, paint: (corners: Pt[], local: (p: Pt) => Pt) => string): Plane | undefined;
+/** Points as the `points` attribute of a polygon. */
+export declare const pointList: (pts: readonly Pt[]) => string;

package/dist/venue.geom.js

@@ -0,0 +1,225 @@
+import { n, plane } from "./turn.kit.js";
+/** Facets to a quarter circle of a rounded rectangle, and to a whole oval, at each cut. */
+export const ARC_STEPS = { low: { corner: 1, oval: 12, poly: 12 }, auto: { corner: 3, oval: 28, poly: 28 }, high: { corner: 6, oval: 56, poly: 56 } };
+/** A rounded rectangle as a closed loop of points: `steps + 1` on each of its four corners, going clockwise as the page shows it from the left end of the top. */
+function rrectLoop(o, steps) {
+    const r = Math.min(o.r, (o.x1 - o.x0) / 2, (o.y1 - o.y0) / 2);
+    const corners = [
+        [o.x0 + r, o.y0 + r, 180],
+        [o.x1 - r, o.y0 + r, 270],
+        [o.x1 - r, o.y1 - r, 0],
+        [o.x0 + r, o.y1 - r, 90],
+    ];
+    const out = [];
+    for (const [cx, cy, a0] of corners) {
+        for (let i = 0; i <= steps; i += 1) {
+            const a = ((a0 + (90 * i) / steps) * Math.PI) / 180;
+            out.push([cx + r * Math.cos(a), cy + r * Math.sin(a)]);
+        }
+    }
+    out.push(out[0]);
+    return out;
+}
+/** An oval as a closed loop of `count` points and the first again. */
+function ovalLoop(o, count) {
+    const out = [];
+    for (let i = 0; i <= count; i += 1) {
+        const a = (2 * Math.PI * (i % count)) / count;
+        out.push([o.cx + o.rx * Math.cos(a), o.cy + o.ry * Math.sin(a)]);
+    }
+    return out;
+}
+/** The points of a polygon made by `band()`: the first half is the inner edge, the second the outer edge back again. Cut to at most `most` quads. */
+function polyStrip(points, most) {
+    const m = points.length / 2;
+    const inner = points.slice(0, m);
+    const outer = points.slice(m).reverse();
+    const every = Math.max(1, Math.ceil((m - 1) / most));
+    const keep = [];
+    for (let i = 0; i < m - 1; i += every)
+        keep.push(i);
+    keep.push(m - 1);
+    return { inner: keep.map((i) => inner[i]), outer: keep.map((i) => outer[i]) };
+}
+/** The strips of one tier of the stands: its band between `hole` and `region`, with the pieces that are apart from it. */
+export function stripsOf(region, hole, more, cut) {
+    const steps = ARC_STEPS[cut];
+    if (region.kind === "poly")
+        return [region, ...more].flatMap((piece) => (piece.kind === "poly" && piece.points.length >= 4 ? [polyStrip(piece.points, steps.poly)] : []));
+    if (hole === null)
+        return [];
+    if (region.kind === "rrect" && hole.kind === "rrect")
+        return [{ inner: rrectLoop(hole, steps.corner), outer: rrectLoop(region, steps.corner) }];
+    if (region.kind === "ellipse" && hole.kind === "ellipse")
+        return [{ inner: ovalLoop(hole, steps.oval), outer: ovalLoop(region, steps.oval) }];
+    return [];
+}
+/** The strip a ring's concourse is: from one outline to another. */
+export const stripBetween = (inner, outer, cut) => stripsOf(outer, inner, [], cut);
+// ---- Polygons. ----
+/** A polygon without its repeated neighbours (and its closing point, if given). */
+export function tidy(points) {
+    const out = [];
+    for (const p of points) {
+        const last = out[out.length - 1];
+        if (last === undefined || Math.hypot(p[0] - last[0], p[1] - last[1]) > 1e-6)
+            out.push([p[0], p[1]]);
+    }
+    while (out.length > 1 && Math.hypot(out[0][0] - out[out.length - 1][0], out[0][1] - out[out.length - 1][1]) <= 1e-6)
+        out.pop();
+    return out;
+}
+/** The area of a polygon, signed: positive going clockwise on a page with y down. */
+export function areaOf(points) {
+    let s = 0;
+    points.forEach(([x, y], i) => {
+        const [x2, y2] = points[(i + 1) % points.length];
+        s += x * y2 - x2 * y;
+    });
+    return s / 2;
+}
+/** A polygon cut to one side of a line `a x + b y <= c` (Sutherland and Hodgman). */
+function halfPlane(poly, a, b, c) {
+    const out = [];
+    poly.forEach((p, i) => {
+        const q = poly[(i + 1) % poly.length];
+        const dp = a * p[0] + b * p[1] - c;
+        const dq = a * q[0] + b * q[1] - c;
+        if (dp <= 0)
+            out.push(p);
+        if ((dp < 0 && dq > 0) || (dp > 0 && dq < 0)) {
+            const t = dp / (dp - dq);
+            out.push([p[0] + (q[0] - p[0]) * t, p[1] + (q[1] - p[1]) * t]);
+        }
+    });
+    return out;
+}
+/** A polygon cut to the inside of a convex polygon (either way round). */
+export function clipConvex(subject, clip) {
+    const sign = areaOf(clip) >= 0 ? 1 : -1;
+    let out = [...subject];
+    clip.forEach((p, i) => {
+        if (out.length === 0)
+            return;
+        const q = clip[(i + 1) % clip.length];
+        // The inside is to the right of the edge on a page with y down for a clockwise polygon: the half-plane keeps points where the cross product has the polygon's sign.
+        const ex = q[0] - p[0];
+        const ey = q[1] - p[1];
+        out = halfPlane(out, sign * ey, -sign * ex, sign * (ey * p[0] - ex * p[1]));
+    });
+    return out;
+}
+/** A polygon with a box `[x0, y0, x1, y1]` taken out of it: the pieces left (left of it, right of it, and above and below it between), which are convex when the polygon is. */
+export function clipOutside(poly, box) {
+    const [x0, y0, x1, y1] = box;
+    const middle = halfPlane(halfPlane(poly, -1, 0, -x0), 1, 0, x1);
+    const pieces = [halfPlane(poly, 1, 0, x0), halfPlane(poly, -1, 0, -x1), halfPlane(middle, 0, 1, y0), halfPlane(middle, 0, -1, -y1)];
+    return pieces.map((p) => tidy(p)).filter((p) => p.length >= 3 && Math.abs(areaOf(p)) > 0.05);
+}
+/** A polygon with every box taken out of it. */
+export function clipAround(poly, boxes) {
+    let pieces = [tidy(poly)];
+    for (const box of boxes)
+        pieces = pieces.flatMap((p) => clipOutside(p, box));
+    return pieces;
+}
+/** A segment cut to the inside of a convex polygon (Cyrus and Beck), or `undefined` when none of it is. */
+export function clipSegment(a, b, clip) {
+    const sign = areaOf(clip) >= 0 ? 1 : -1;
+    let t0 = 0;
+    let t1 = 1;
+    const dx = b[0] - a[0];
+    const dy = b[1] - a[1];
+    for (let i = 0; i < clip.length; i += 1) {
+        const p = clip[i];
+        const q = clip[(i + 1) % clip.length];
+        const ex = q[0] - p[0];
+        const ey = q[1] - p[1];
+        // The inside has `sign * (ex * (y - p.y) - ey * (x - p.x)) >= 0`.
+        const num = sign * (ex * (a[1] - p[1]) - ey * (a[0] - p[0]));
+        const den = sign * (ex * dy - ey * dx);
+        if (Math.abs(den) < 1e-12) {
+            if (num < -1e-9)
+                return undefined;
+            continue;
+        }
+        const t = -num / den;
+        if (den > 0)
+            t0 = Math.max(t0, t);
+        else
+            t1 = Math.min(t1, t);
+        if (t0 > t1)
+            return undefined;
+    }
+    return [[a[0] + dx * t0, a[1] + dy * t0], [a[0] + dx * t1, a[1] + dy * t1]];
+}
+export const heightAt = (s, x, y) => s.z0 + s.gx * (x - s.x0) + s.gy * (y - s.y0);
+/** The slope of a quad of a band: the height `h0` along its inner edge, `h1` along its outer, rising across it. `undefined` for a quad with no width. */
+export function slopeOf(q, h0, h1) {
+    const [i0, i1, o1, o0] = q;
+    // The edge that runs along the band: the inner, or the outer where the inner has shrunk to a point.
+    const longIn = Math.hypot(i1[0] - i0[0], i1[1] - i0[1]);
+    const longOut = Math.hypot(o1[0] - o0[0], o1[1] - o0[1]);
+    if (longIn < 1e-6 && longOut < 1e-6)
+        return undefined;
+    const [from, to, far] = longIn >= longOut ? [i0, i1, o0] : [o0, o1, i0];
+    const ex = (to[0] - from[0]) / Math.hypot(to[0] - from[0], to[1] - from[1]);
+    const ey = (to[1] - from[1]) / Math.hypot(to[0] - from[0], to[1] - from[1]);
+    // The way across the band, away from the inner edge.
+    let nx = -ey;
+    let ny = ex;
+    const mid = (a, b) => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+    const mi = mid(i0, i1);
+    const mo = mid(o0, o1);
+    if (nx * (mo[0] - mi[0]) + ny * (mo[1] - mi[1]) < 0) {
+        nx = -nx;
+        ny = -ny;
+    }
+    const across = Math.abs(nx * (far[0] - from[0]) + ny * (far[1] - from[1]));
+    if (across < 1e-6)
+        return undefined;
+    // `from` is on the inner edge when it came from there, else on the outer one.
+    const z0 = longIn >= longOut ? h0 : h1;
+    const slope = { x0: from[0], y0: from[1], z0, gx: (nx * (h1 - h0)) / across, gy: (ny * (h1 - h0)) / across };
+    return { slope, out: [nx, ny], along: [ex, ey] };
+}
+/**
+ * A planar polygon as one plane: its corner and its two sides are in the polygon's own plane, its `u` along the horizontal direction `along` (so that a texture's rows run along a band), its `v` across.
+ * `paint` is given the polygon's corners in the plane's own feet (and a function that puts any plan point there) and answers the SVG drawn on it.
+ */
+export function raked(id, kind, poly, slope, along, paint) {
+    if (poly.length < 3)
+        return undefined;
+    const at = (p) => [p[0], p[1], heightAt(slope, p[0], p[1])];
+    const ud = [along[0], along[1], slope.gx * along[0] + slope.gy * along[1]];
+    const ul = Math.hypot(...ud);
+    const uh = [ud[0] / ul, ud[1] / ul, ud[2] / ul];
+    // The way up the slope: perpendicular to `u` in the polygon's plane.
+    const across = [-along[1], along[0], slope.gx * -along[1] + slope.gy * along[0]];
+    const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+    const va = dot(across, uh);
+    const vperp = [across[0] - uh[0] * va, across[1] - uh[1] * va, across[2] - uh[2] * va];
+    const vl = Math.hypot(...vperp);
+    if (vl < 1e-9)
+        return undefined;
+    const vh = [vperp[0] / vl, vperp[1] / vl, vperp[2] / vl];
+    const base = at(poly[0]);
+    const loc = (p) => {
+        const q = at(p);
+        const d = [q[0] - base[0], q[1] - base[1], q[2] - base[2]];
+        return [dot(d, uh), dot(d, vh)];
+    };
+    const pts = poly.map(loc);
+    const a0 = Math.min(...pts.map((p) => p[0]));
+    const a1 = Math.max(...pts.map((p) => p[0]));
+    const b0 = Math.min(...pts.map((p) => p[1]));
+    const b1 = Math.max(...pts.map((p) => p[1]));
+    const o = [base[0] + uh[0] * a0 + vh[0] * b0, base[1] + uh[1] * a0 + vh[1] * b0, base[2] + uh[2] * a0 + vh[2] * b0];
+    const shifted = (p) => {
+        const [a, b] = loc(p);
+        return [a - a0, b - b0];
+    };
+    return plane(id, kind, o, [uh[0] * (a1 - a0), uh[1] * (a1 - a0), uh[2] * (a1 - a0)], [vh[0] * (b1 - b0), vh[1] * (b1 - b0), vh[2] * (b1 - b0)], paint(pts.map(([a, b]) => [a - a0, b - b0]), shifted));
+}
+/** Points as the `points` attribute of a polygon. */
+export const pointList = (pts) => pts.map(([x, y]) => `${n(x)},${n(y)}`).join(" ");