@johnmorrisdotca/kyogijo-stadiums 0.4.0 → 0.6.0

package/dist/style.d.ts

@@ -15,6 +15,8 @@ export declare const KYOGIJO_HEAT_STYLE: string;
  * them: a curling drawing writes them in after the base rules, and `KYOGIJO_STYLE` has them for a page.
  */
 export declare const KYOGIJO_CURLING_STYLE: string;
+/** The rules of a folded curling sheet: the fan that joins each enlarged house to the part of the strip it shows, the frames and the labels. Written in only by a folded sheet, and in `KYOGIJO_STYLE`. */
+export declare const KYOGIJO_FOLD_STYLE: string;
 /**
  * The rules of a ballpark's walls and quirks (`walls` and `quirks`): the four shades of the wall bands (`--ky-wall-1` to `-4`, from under 10 feet to 30 and over), the hill, the
  * overhang, the ivy, the poles and bullpens, the backstop's bar, the dugouts, the names and the legend. Kept apart so that a drawing without them does not carry them: a drawing

package/dist/style.js

@@ -1,11 +1,19 @@
 import { KYOGIJO_BACKGROUND_STYLE } from "./background.js";
 import { KYOGIJO_COURTS_STYLE } from "./courts.style.js";
+import { KYOGIJO_CROWD_STYLE } from "./crowd.draw.js";
 import { KYOGIJO_FIELDS_STYLE } from "./fields.style.js";
+import { KYOGIJO_HARDWOOD_STYLE } from "./hardwood.js";
+import { KYOGIJO_ATHLETICS_STYLE, KYOGIJO_TRACK_STYLE } from "./athletics.style.js";
+import { KYOGIJO_SKATING_STYLE } from "./skating.style.js";
+import { KYOGIJO_BUDO_STYLE } from "./budo.style.js";
 import { KYOGIJO_FEATURE_STYLE } from "./features.js";
 import { KYOGIJO_GRID_STYLE } from "./layout.style.js";
 import { KYOGIJO_LOOK_STYLE } from "./look.js";
 import { KYOGIJO_MARK_STYLE } from "./mark.js";
+import { KYOGIJO_PAGEANT_MOTION, KYOGIJO_PAGEANT_STYLE } from "./pageant.style.js";
+import { KYOGIJO_POOL_STYLE } from "./pool.style.js";
 import { KYOGIJO_ROAD_STYLE } from "./road.style.js";
+import { KYOGIJO_SITUATION_STYLE } from "./situation.style.js";
 import { KYOGIJO_SPECIAL_STYLE } from "./special.style.js";
 /**
  * The drawing's stylesheet, without the heat layers' rules: custom properties for every colour, in light and dark, and the rule of each class. It is
@@ -127,6 +135,10 @@ export const KYOGIJO_CURLING_STYLE = `
 .kyogijo .ky-hog{fill:var(--ky-hog)}.kyogijo .ky-hack{fill:var(--ky-hack)}.kyogijo .ky-fgz{fill:var(--ky-fgz)}.kyogijo pattern circle{fill:var(--ky-pebble)}
 .kyogijo .ky-hammer{fill:var(--ky-plate-ink)}.kyogijo .ky-hammer-in{fill:var(--ky-plate)}.kyogijo .ky-grid{stroke:var(--ky-plate-ink);opacity:.22}
 .kyogijo .ky-badge-hammer-left .ky-hammer{fill:var(--ky-left-ink)}.kyogijo .ky-badge-hammer-left .ky-hammer-in{fill:var(--ky-left)}.kyogijo .ky-badge-hammer-right .ky-hammer{fill:var(--ky-right-ink)}.kyogijo .ky-badge-hammer-right .ky-hammer-in{fill:var(--ky-right)}`.trim();
+/** The rules of a folded curling sheet: the fan that joins each enlarged house to the part of the strip it shows, the frames and the labels. Written in only by a folded sheet, and in `KYOGIJO_STYLE`. */
+export const KYOGIJO_FOLD_STYLE = `
+.kyogijo .ky-fold-link{fill:var(--ky-line);fill-opacity:.07}.kyogijo .ky-fold-edge{fill:none;stroke:var(--ky-line);stroke-opacity:.4;stroke-width:.3}.kyogijo .ky-fold-hl{fill:var(--ky-line);fill-opacity:.08;stroke:var(--ky-line);stroke-opacity:.7;stroke-width:.35}
+.kyogijo .ky-fold-frame{fill:none;stroke:var(--ky-boards);stroke-width:.6}.kyogijo .ky-fold-pill{fill:var(--ky-plate);fill-opacity:.92;stroke:var(--ky-boards);stroke-width:.2}.kyogijo .ky-fold-t{fill:var(--ky-plate-ink)}`.trim();
 /**
  * The rules of a ballpark's walls and quirks (`walls` and `quirks`): the four shades of the wall bands (`--ky-wall-1` to `-4`, from under 10 feet to 30 and over), the hill, the
  * overhang, the ivy, the poles and bullpens, the backstop's bar, the dugouts, the names and the legend. Kept apart so that a drawing without them does not carry them: a drawing
@@ -160,7 +172,12 @@ export const KYOGIJO_TEAM_STYLE = `
 .kyogijo .ky-ro{fill:var(--c,var(--ky-layer));fill-opacity:.7;stroke:var(--ky-layer-edge);stroke-width:calc(var(--w,.3)*1px);stroke-linejoin:round}
 .kyogijo .ky-ro-r{fill:none;stroke:var(--c,var(--ky-layer));stroke-opacity:.45;stroke-dasharray:calc(var(--w,.3)*3px) calc(var(--w,.3)*3px);stroke-width:calc(var(--w,.3)*1px)}
 .kyogijo .ky-fm>*{fill:var(--c,var(--ky-layer));stroke:var(--ky-layer-edge);stroke-width:calc(var(--w,.3)*1px)}
-.kyogijo .ky-fm>.ky-e{fill:var(--ky-layer-hollow);stroke:var(--c,var(--ky-layer));stroke-width:calc(var(--w,.3)*2.2px)}`.trim();
+.kyogijo .ky-fm>.ky-e{fill:var(--ky-layer-hollow);stroke:var(--c,var(--ky-layer));stroke-width:calc(var(--w,.3)*2.2px)}
+.kyogijo .ky-fm>path{stroke-linejoin:round}
+.kyogijo .ky-nm{fill:var(--ky-plate-ink);stroke:var(--ky-plate);stroke-width:.14em;paint-order:stroke;stroke-linejoin:round;font-family:var(--ky-font);font-weight:700;font-variant-numeric:tabular-nums}
+.kyogijo .ky-lc{fill:var(--ky-post);stroke:var(--ky-layer-edge);stroke-width:calc(var(--w,.3)*1px)}
+.kyogijo .ky-cl{fill:var(--ky-plate);stroke:none;font-family:var(--ky-font);font-weight:700}
+.kyogijo .ky-lf{fill:none;stroke:var(--ky-layer-edge);stroke-width:calc(var(--w,.3)*1px)}`.trim();
 /**
  * The rules of the annotations (the arrows of `direction`, the axes of `axes` and the labels and leaders of `landmarks`): words in the ink of the page with an outline in the
  * apron's colour, thin leaders, and the arrows in the home and away colours. A drawing that has an annotation writes them in; `KYOGIJO_STYLE` has them for a page.
@@ -174,4 +191,4 @@ export const KYOGIJO_NOTE_STYLE = `
 .kyogijo .ky-an-ar{stroke:var(--c);fill:none}
 .kyogijo .ky-an-hd{fill:var(--c)}`.trim();
 /** Every rule of the package, for a page that draws with `style: "none"` and supplies the stylesheet itself. */
-export const KYOGIJO_STYLE = `${KYOGIJO_BASE_STYLE}\n${KYOGIJO_HEAT_STYLE}\n${KYOGIJO_TEAM_STYLE}\n${KYOGIJO_CURLING_STYLE}\n${KYOGIJO_WALLS_STYLE}\n${KYOGIJO_COURTS_STYLE}\n${KYOGIJO_FIELDS_STYLE}\n${KYOGIJO_LOOK_STYLE}\n${KYOGIJO_FEATURE_STYLE}\n${KYOGIJO_NOTE_STYLE}\n${KYOGIJO_SPECIAL_STYLE}\n${KYOGIJO_BACKGROUND_STYLE}\n${KYOGIJO_GRID_STYLE}\n${KYOGIJO_MARK_STYLE}\n${KYOGIJO_ROAD_STYLE}`;
+export const KYOGIJO_STYLE = `${KYOGIJO_BASE_STYLE}\n${KYOGIJO_HEAT_STYLE}\n${KYOGIJO_TEAM_STYLE}\n${KYOGIJO_CURLING_STYLE}\n${KYOGIJO_FOLD_STYLE}\n${KYOGIJO_WALLS_STYLE}\n${KYOGIJO_COURTS_STYLE}\n${KYOGIJO_FIELDS_STYLE}\n${KYOGIJO_POOL_STYLE}\n${KYOGIJO_ATHLETICS_STYLE}\n${KYOGIJO_SKATING_STYLE}\n${KYOGIJO_BUDO_STYLE}\n${KYOGIJO_LOOK_STYLE}\n${KYOGIJO_HARDWOOD_STYLE}\n${KYOGIJO_TRACK_STYLE}\n${KYOGIJO_FEATURE_STYLE}\n${KYOGIJO_NOTE_STYLE}\n${KYOGIJO_SPECIAL_STYLE}\n${KYOGIJO_BACKGROUND_STYLE}\n${KYOGIJO_CROWD_STYLE}\n${KYOGIJO_GRID_STYLE}\n${KYOGIJO_MARK_STYLE}\n${KYOGIJO_PAGEANT_STYLE}\n${KYOGIJO_PAGEANT_MOTION}\n${KYOGIJO_SITUATION_STYLE}\n${KYOGIJO_ROAD_STYLE}`;

package/dist/surfaces/artistic.d.ts

@@ -0,0 +1,9 @@
+import type { ArtisticPlan } from "../pool.ts";
+import { type PoolCtx } from "../pool.kit.ts";
+import { type BuildOptions, type Surface } from "./surface.ts";
+/**
+ * An artistic swimming area lying wide, from World Aquatics' rules (Part Seven, Article 12): 30 by 20 m for the Olympic Games and the World Championships (12.2.2), or the least, 25 by 15 m of which 12 by 12 m is the
+ * deep part (12.1.1), the floor marked with contrasting lines in one direction along its length (12.1.3), the judges' (Technical Officials') platform not more than 2 m from the pool's edge (12.2.5) and the starting platform at centre
+ * stage (12.1.7). The sizes of the two platforms are ours: the rules give their heights.
+ */
+export declare function artistic(o: BuildOptions, plan: ArtisticPlan, ctx?: PoolCtx): Surface;

package/dist/surfaces/artistic.js

@@ -0,0 +1,94 @@
+import { el, num } from "../format.js";
+import { feet } from "../pool.js";
+import { box, deckMarkup, leastWidth, paintDefs, poolIds, waterMarkup } from "../pool.kit.js";
+import { ARTISTIC, SWIMMING } from "../pool.figures.js";
+import { GUTTER } from "./pool.js";
+import { atEnds, edges, ft, quarterTurn, textOn } from "./surface.js";
+/**
+ * An artistic swimming area lying wide, from World Aquatics' rules (Part Seven, Article 12): 30 by 20 m for the Olympic Games and the World Championships (12.2.2), or the least, 25 by 15 m of which 12 by 12 m is the
+ * deep part (12.1.1), the floor marked with contrasting lines in one direction along its length (12.1.3), the judges' (Technical Officials') platform not more than 2 m from the pool's edge (12.2.5) and the starting platform at centre
+ * stage (12.1.7). The sizes of the two platforms are ours: the rules give their heights.
+ */
+export function artistic(o, plan, ctx = {}) {
+    const L = plan.length;
+    const W = plan.width;
+    const ids = ctx.ids ?? poolIds(o.id);
+    const full = o.detail === "full";
+    const m = ctx.bare === true ? 0 : (o.margin ?? feet(ARTISTIC.drawn.deck));
+    const judges = ARTISTIC.drawn.judges;
+    const start = ARTISTIC.drawn.start;
+    let base = box(o, "gutter", "ky-boards", -GUTTER, -GUTTER, L + GUTTER, W + GUTTER);
+    base += waterMarkup(o, ids, plan.look, 0, 0, L, W);
+    if (plan.deep !== undefined) {
+        const d = plan.deep;
+        base += el("rect", { class: ft(o, "deep-part", "ky-pl-dp"), x: feet(d.x), y: feet(d.y), width: feet(d.length), height: feet(d.width) });
+    }
+    // Lines in one direction along the pool, 2.5 m apart, ending 2 m short of the walls in a cross line, as the lane markings of a swimming pool do.
+    const lw = leastWidth(o, ARTISTIC.line, 0.32);
+    const count = Math.floor(W / SWIMMING.lane);
+    const gap = SWIMMING.laneLine.endGap;
+    const half = SWIMMING.laneLine.cross / 2;
+    let d = "";
+    for (let k = 0; k < count; k += 1) {
+        const y = (W - (count - 1) * SWIMMING.lane) / 2 + k * SWIMMING.lane;
+        d += `M${num(feet(gap))} ${num(feet(y))}H${num(feet(L - gap))}M${num(feet(gap))} ${num(feet(y - half))}V${num(feet(y + half))}M${num(feet(L - gap))} ${num(feet(y - half))}V${num(feet(y + half))}`;
+    }
+    let lines = el("path", { class: ft(o, "floor-lines", "ky-line"), d, "stroke-width": lw, fill: "none" });
+    if (plan.deep !== undefined) {
+        const dp = plan.deep;
+        lines += el("rect", { class: "ky-line ky-pl-dpl", x: feet(dp.x), y: feet(dp.y), width: feet(dp.length), height: feet(dp.width), "stroke-width": lw * 0.6, "stroke-dasharray": `${num(feet(0.8))} ${num(feet(0.5))}`, fill: "none" });
+        lines += textOn(o.portrait, feet(dp.x + dp.length / 2), feet(dp.y + dp.width / 2) + 1, `${ARTISTIC.minimum.deepDepth} m`, { size: feet(1.1), anchor: "middle", cls: "ky-pl-sx", weight: 800 });
+    }
+    // The judges' platform along the top side, close to the pool's edge, with its chairs; the starting platform at centre stage on the other side.
+    let deck = "";
+    const jy = -GUTTER - 1 - judges.depth;
+    deck += el("rect", { class: ft(o, "judges-platform", "ky-pl-jp"), x: feet(L / 2 - judges.length / 2), y: feet(jy), width: feet(judges.length), height: feet(judges.depth), rx: feet(0.12) });
+    if (full) {
+        const chairs = 7;
+        for (let i = 0; i < chairs; i += 1)
+            deck += el("rect", { class: "ky-pl-ch", x: feet(L / 2 - judges.length / 2 + 0.5 + i * ((judges.length - 1) / chairs)), y: feet(jy + 0.3), width: feet(0.75), height: feet(0.75), rx: feet(0.1) });
+    }
+    const sx = L / 2 - start.length / 2;
+    const sy = W + GUTTER + 0.4;
+    deck += el("rect", { class: ft(o, "starting-platform", "ky-pl-sp2"), x: feet(sx), y: feet(sy), width: feet(start.length), height: feet(start.depth), rx: feet(0.12) });
+    const marks = [];
+    if (o.landmarks === true) {
+        marks.push({ id: "floor-lines", x: feet(L * 0.3), y: feet(W / 2), side: "bottom" }, { id: "floor-lines", x: feet(L * 0.7), y: feet(W / 2), side: "top" }, { id: "judges-platform", x: feet(L / 2), y: feet(jy), side: "top" }, { id: "starting-platform", x: feet(L / 2), y: feet(sy + start.depth), side: "bottom" }, { id: "gutter", x: feet(L * 0.8), y: feet(-GUTTER / 2), side: "top" }, { id: "gutter", x: feet(L * 0.2), y: feet(W + GUTTER / 2), side: "bottom" });
+        if (plan.deep !== undefined)
+            marks.push({ id: "deep-part", x: feet(plan.deep.x + 1), y: feet(plan.deep.y), side: "top" });
+    }
+    const top = -jy + 0.4;
+    const bottom = sy + start.depth + 0.4 - W;
+    const view0 = { x: -m, y: -feet(top) - m * 0.4, w: feet(L) + 2 * m, h: feet(W) + feet(top + bottom) + m * 0.8 };
+    base = (ctx.bare === true ? "" : deckMarkup(o, ids, plan.deck, view0.x, view0.y, view0.w, view0.h)) + base + deck;
+    const Lf = feet(L);
+    const Wf = feet(W);
+    const cy = Wf / 2;
+    const turned = o.portrait;
+    const surface = {
+        sport: "artisticswimming",
+        view: view0,
+        base,
+        lines,
+        defs: ctx.bare === true ? "" : paintDefs(ids, plan.look, plan.deck, plan.seed),
+        left: { cx: -m / 2, cy, w: Wf, h: m, rot: -90 },
+        right: { cx: Lf + m / 2, cy, w: Wf, h: m, rot: 90 },
+        plate: turned ? { cx: Lf / 2, cy, w: Wf * 0.9, h: Lf * 0.34 } : { cx: Lf / 2, cy, w: Lf * 0.34, h: Wf * 0.55 },
+        turned,
+    };
+    surface.box = { x: 0, y: 0, w: Lf, h: Wf };
+    surface.lineRef = { width: lw, feet: 1 };
+    surface.ranges = {
+        half: atEnds((end) => (end === "left" ? edges(0, 0, Lf / 2, Wf) : edges(Lf / 2, 0, Lf, Wf))),
+        // The middle third of the pool, where the athletes enter at centre stage and the routine is usually swum.
+        "centre-stage": edges(Lf / 3, 0, (2 * Lf) / 3, Wf),
+    };
+    if (o.landmarks === true)
+        surface.marks = marks;
+    if (turned) {
+        const t = quarterTurn(view0);
+        surface.view = t.view;
+        surface.turn = t.turn;
+    }
+    return surface;
+}

package/dist/surfaces/athletics.d.ts

@@ -0,0 +1,16 @@
+import type { AthleticsPlan } from "../athletics/plan.ts";
+import { type BuildOptions, type Surface } from "./surface.ts";
+/** Feet in a metre. */
+export declare const K: number;
+/** The embedded soccer pitch's markup, as the soccer builder wrote it: the ground and the lines, in a group that scales metres to feet. */
+export interface Embedded {
+    base: string;
+    lines: string;
+    defs: string;
+}
+/** The part of a soccer builder's `base` that is the pitch: what follows its apron. */
+export declare function pitchGroup(base: string): string;
+/**
+ * The surface of the plan lying wide. `margin` is the ground round what is drawn, in feet. The soccer pitch `embedded` is laid inside the track where the plan has one.
+ */
+export declare function athleticsSurface(o: BuildOptions, plan: AthleticsPlan, embedded: Embedded | undefined, margin: number): Surface;

package/dist/surfaces/athletics.js

@@ -0,0 +1,132 @@
+// The athletics stadium's surface lying wide, from its plan (athletics/plan.ts): the track between its kerb and its edge, the segments' synthetic surface, the mown turf and the soccer pitch inside, the
+// field events' areas, every painted line, the coloured marks and the lane numbers. The plan is in metres; the drawing is in feet, as every surface lies, so the whole is drawn inside a group
+// that scales metres to feet and moves the stadium's box to the origin.
+import { el, num } from "../format.js";
+import { areaD, marks, strokes } from "./field.js";
+import { strokeWidth, digitsD } from "../athletics/stencil.js";
+import { atEnds, edges, ft, quarterTurn } from "./surface.js";
+/** Feet in a metre. */
+export const K = 1 / 0.3048;
+/** The part of a soccer builder's `base` that is the pitch: what follows its apron. */
+export function pitchGroup(base) {
+    const i = base.indexOf('<g class="ky-pitch');
+    return i < 0 ? "" : base.slice(i);
+}
+const feetBox = (b, ox, oy) => edges((b.x0 - ox) * K, (b.y0 - oy) * K, (b.x1 - ox) * K, (b.y1 - oy) * K);
+/** A plan's named range in feet, as a surface lists them. */
+function rangeOf(r, ox, oy) {
+    return "left" in r ? atEnds((end) => feetBox(end === "left" ? r.left : r.right, ox, oy)) : feetBox(r, ox, oy);
+}
+/**
+ * The surface of the plan lying wide. `margin` is the ground round what is drawn, in feet. The soccer pitch `embedded` is laid inside the track where the plan has one.
+ */
+export function athleticsSurface(o, plan, embedded, margin) {
+    const ox = plan.box.x0;
+    const oy = plan.box.y0;
+    const full = o.detail === "full";
+    // A close-up of a start is turned so that the athletes run to the right (or, in portrait, up the page): the whole drawing is moved and turned about the start's pivot, and data in the stadium's own frame
+    // is carried there by `frame`. Every other view is the stadium as it lies, wide, and turned a quarter in portrait.
+    const sv = plan.startView;
+    const turn = sv === undefined ? 0 : (o.portrait ? -Math.PI / 2 : 0) - sv.pivot.heading;
+    const deg = (turn * 180) / Math.PI;
+    let view0 = { x: (plan.extent.x0 - ox) * K - margin, y: (plan.extent.y0 - oy) * K - margin, w: (plan.extent.x1 - plan.extent.x0) * K + 2 * margin, h: (plan.extent.y1 - plan.extent.y0) * K + 2 * margin };
+    if (sv !== undefined) {
+        const w = sv.window;
+        const quarter = o.portrait;
+        const [x0, x1, y0, y1] = quarter ? [w.y0, w.y1, -w.x1, -w.x0] : [w.x0, w.x1, w.y0, w.y1];
+        view0 = { x: x0 * K, y: y0 * K, w: (x1 - x0) * K, h: (y1 - y0) * K };
+    }
+    const place = sv === undefined ? `scale(${K.toFixed(6)}) translate(${num(-ox)} ${num(-oy)})` : `scale(${K.toFixed(6)}) rotate(${num(deg)}) translate(${num(-sv.pivot.x)} ${num(-sv.pivot.y)})`;
+    const group = (inner, cls) => el("g", { class: cls, transform: place }, inner);
+    const turned = sv === undefined && o.portrait;
+    const upright = sv === undefined ? (o.portrait ? -90 : 0) : -deg;
+    const toK = (v) => (v * K).toFixed(4);
+    void toK;
+    let defs = embedded?.defs ?? "";
+    // Under everything: the apron, the track's surfaces, the turf and its bands, the pitch, then the field events' areas.
+    let base = el("rect", { class: ft(o, "apron", "ky-apron"), x: view0.x, y: view0.y, width: view0.w, height: view0.h });
+    let ground = "";
+    for (const a of plan.areas)
+        if (a.cls === "ky-ath-track")
+            ground += el("path", { class: ft(o, a.feature, a.cls), d: areaD(a), "fill-rule": a.evenodd === true ? "evenodd" : undefined });
+    if (plan.turf !== undefined) {
+        ground += el("path", { class: ft(o, "infield", "ky-ath-grass"), d: plan.turf.d });
+        if (o.stripes && o.mow !== "none" && plan.turf.stripes !== "") {
+            defs += el("clipPath", { id: `${o.id}-ath-turf` }, el("path", { d: plan.turf.d }));
+            ground += el("path", { class: ft(o, "mowing", "ky-stripe"), d: plan.turf.stripes, "clip-path": `url(#${o.id}-ath-turf)` });
+        }
+    }
+    const pitchAt = plan.pitch === undefined || embedded === undefined ? undefined : `translate(${num(plan.pitch.x)} ${num(plan.pitch.y)}) scale(${(1 / K).toFixed(6)})`;
+    if (pitchAt !== undefined && embedded !== undefined)
+        ground += el("g", { transform: pitchAt }, embedded.base);
+    for (const a of plan.areas)
+        if (a.cls !== "ky-ath-track")
+            ground += el("path", { class: ft(o, a.feature, a.cls), d: areaD(a), "fill-rule": a.evenodd === true ? "evenodd" : undefined });
+    base += group(ground, "ky-ath-ground");
+    // The lines: the painted lines and marks of the plan, the lane numbers, the pitch's lines.
+    const thick = o.exact ? plan.lineWidth : plan.drawnLine;
+    let lines = strokes(plan, o) + marks(plan, o);
+    if (pitchAt !== undefined && embedded !== undefined)
+        lines += el("g", { transform: pitchAt }, embedded.lines);
+    for (const d of plan.digits) {
+        const h = d.h;
+        if (d.tag === true)
+            lines += el("circle", { class: "ky-ath-tag", cx: d.x, cy: d.y, r: h * 0.78 });
+        lines += el("path", {
+            class: ft(o, d.feature, d.tag === true ? "ky-ath-tagnum" : "ky-ath-num"),
+            d: digitsD(d.text, h, d.x, d.y),
+            "stroke-width": String(Math.round(strokeWidth(h) * 10000) / 10000),
+            transform: upright === 0 ? undefined : `rotate(${num(upright)} ${num(d.x)} ${num(d.y)})`,
+        });
+    }
+    const linesGroup = group(lines, "ky-ath-lines");
+    const W = (plan.box.x1 - plan.box.x0) * K;
+    const H = (plan.box.y1 - plan.box.y0) * K;
+    const surface = {
+        sport: "athletics",
+        view: view0,
+        base,
+        lines: linesGroup,
+        defs,
+        // A team's name, in a score, is written on the grass either side of the middle: a track meeting between teams.
+        left: { cx: W * 0.27, cy: H / 2, w: W * 0.2, h: H * 0.11, rot: 0 },
+        right: { cx: W * 0.73, cy: H / 2, w: W * 0.2, h: H * 0.11, rot: 0 },
+        plate: { cx: W / 2, cy: H / 2, w: Math.min(W * 0.34, 140), h: Math.min(W * 0.34, 140) * 0.52 },
+        turned,
+        bannersOver: true,
+        onColour: false,
+    };
+    surface.box = { x: 0, y: 0, w: W, h: H };
+    surface.lineRef = { width: thick, feet: K };
+    const ranges = {};
+    for (const [name, r] of Object.entries(plan.ranges))
+        ranges[name] = rangeOf(r, ox, oy);
+    surface.ranges = ranges;
+    if (o.landmarks === true) {
+        const m = plan.marks.map((p) => ({ id: p.id, x: (p.x - ox) * K, y: (p.y - oy) * K, side: p.side }));
+        surface.marks = full ? m : m.filter((p) => !p.id.startsWith("~"));
+    }
+    if (sv !== undefined) {
+        // The stadium's own frame (feet from its box's corner) to the close-up's: moved so that the pivot is the origin, then turned.
+        const qx = (sv.pivot.x - ox) * K;
+        const qy = (sv.pivot.y - oy) * K;
+        surface.frame = `rotate(${num(deg)}) translate(${num(-qx)} ${num(-qy)})`;
+        surface.upright = -deg;
+        // In the stadium's own frame the part shown is the box round the close-up's window, and the whole is the stadium: data is cut to the first, as it is for any range.
+        const c = Math.cos(sv.pivot.heading);
+        const sn = Math.sin(sv.pivot.heading);
+        const own = [[sv.window.x0, sv.window.y0], [sv.window.x1, sv.window.y0], [sv.window.x1, sv.window.y1], [sv.window.x0, sv.window.y1]].map(([x, y]) => [(sv.pivot.x + x * c - y * sn - ox) * K, (sv.pivot.y + x * sn + y * c - oy) * K]);
+        const bx0 = Math.min(...own.map((p) => p[0]));
+        const by0 = Math.min(...own.map((p) => p[1]));
+        surface.whole = { x: 0, y: 0, w: W, h: H };
+        surface.box = { x: bx0, y: by0, w: Math.max(...own.map((p) => p[0])) - bx0, h: Math.max(...own.map((p) => p[1])) - by0 };
+        surface.ranges = {};
+        surface.marks = undefined;
+    }
+    if (turned) {
+        const t = quarterTurn(view0);
+        surface.view = t.view;
+        surface.turn = t.turn;
+    }
+    return surface;
+}

package/dist/surfaces/baseball.js

@@ -179,6 +179,23 @@ export function baseball(points, o, era, diamond = MLB_DIAMOND) {
         Object.assign(right, { cx: (umax + m - 6 + 62) / 2, cy, w, h: 58 });
     }
     const surface = { sport: "mlb", view, base, lines, defs: clip, left, right, plate: { cx: 0, cy: -Math.round(vmax * 0.42), w: 150, h: 62 }, turned: false, lineRef: { width: thin, feet: 1 }, box: { x: umin, y: -vmax, w: umax - umin, h: vmax } };
+    // The bases as drawn (first, second, third) for a situation to light.
+    surface.anchors = { kind: "baseball", bases: bases.map(([u, v]) => [u, -v]), half: h, backstop };
+    // A pageant: the home team's picture on the infield, the visitors' in the outfield beyond the plate, and the emblem on the mound.
+    {
+        const inW = 2 * centreV * 0.6 * 0.95;
+        const inH = 2 * centreV * 0.4 * 0.95;
+        const plateTop = Math.round(vmax * 0.42) + 31;
+        const v0 = plateTop + 10;
+        const v1 = vmax - (b?.track ?? MLB.warningTrack) - 8;
+        const outH = Math.min(v1 - v0, inH * 1.9);
+        surface.pageant = {
+            byRole: true,
+            left: { cx: 0, cy: -(v0 + v1) / 2, w: Math.min(inW * 1.9, (umax - umin) * 0.5), h: outH },
+            right: { cx: 0, cy: -centreV, w: inW, h: inH },
+            centre: { cx: 0, cy: -d.moundCentre, r: 15 },
+        };
+    }
     // The infield: the dirt out to the arc round the mound, with the ground behind home plate; the outfield: the fence in to just short of second base.
     surface.ranges = {
         infield: edges(-(ua + 15), -(d.pitcher + skin + 12), ua + 15, 0),

package/dist/surfaces/basketball.floor.d.ts

@@ -0,0 +1,27 @@
+import { type Hardwood } from "../hardwood.ts";
+import { type BuildOptions } from "./surface.ts";
+/** Where the floor stands: the court's length and width, the border's width, and the prefix of the ids. */
+export interface FloorGeo {
+    L: number;
+    W: number;
+    bw: number;
+    /** The ground drawn beyond the court's lines. */
+    margin: number;
+    id: string;
+}
+/** The floor in layers: the defs (the tiles and the sheen), what lies under the paint, and what lies over it. */
+export interface Floor {
+    defs: string;
+    under: string;
+    over: string;
+}
+/**
+ * The wood, the boards and the border, under the paint, and the seams and the sheen over it. The border is stain over the same wood: its sides in the border's colour,
+ * and the strip behind each baseline in the colour of the team that defends it (the `--ky-hw-end-left` and `-right` of the drawing, else the border's).
+ */
+export declare function hardwoodFloor(h: Hardwood, g: FloorGeo, o: BuildOptions): Floor;
+/**
+ * The words of a hardwood floor, each centred in its strip: the baseline words behind each baseline and the sideline words in the border's sides. Where the drawing is
+ * turned a quarter to lie tall, the baseline words are turned back to read left to right, and the sideline words run along their strips, the bottom one up the page.
+ */
+export declare function hardwoodWords(o: BuildOptions, g: FloorGeo, turned: boolean, sidelines: [string, string] | undefined): string;

package/dist/surfaces/basketball.floor.js

@@ -0,0 +1,83 @@
+// The layers of a realistic (`hardwood`) basketball floor: the wood and its boards under the paint, the stained border, and over the paint the seams and the satin sheen.
+// The paint of the keys and the circle is laid between the two by the court's builder, translucent, so the boards show through it as they do through a stained key.
+import { el, num } from "../format.js";
+import { floorTiles } from "../hardwood.js";
+import { ft } from "./surface.js";
+const stop = (offset, colour, opacity, strength) => el("stop", { offset, "stop-color": colour, "stop-opacity": num(Math.min(1, opacity * strength)) });
+/** A gradient laid out in the drawing's own feet from `(x1, y1)` to `(x2, y2)`; its stops are `[offset, colour, opacity]`. */
+function gradient(id, from, to, stops, strength) {
+    return el("linearGradient", { id, gradientUnits: "userSpaceOnUse", x1: from[0], y1: from[1], x2: to[0], y2: to[1] }, stops.map(([offset, colour, opacity]) => stop(offset, colour, opacity, strength)).join(""));
+}
+/**
+ * The wood, the boards and the border, under the paint, and the seams and the sheen over it. The border is stain over the same wood: its sides in the border's colour,
+ * and the strip behind each baseline in the colour of the team that defends it (the `--ky-hw-end-left` and `-right` of the drawing, else the border's).
+ */
+export function hardwoodFloor(h, g, o) {
+    const { L, W, bw, id, margin } = g;
+    const all = { x: -bw, y: -bw, width: L + 2 * bw, height: W + 2 * bw };
+    const tiles = floorTiles(h);
+    const pattern = (suffix, body) => el("pattern", { id: `${id}-hw-${suffix}`, width: 96, height: num(tiles.height), patternUnits: "userSpaceOnUse" }, body);
+    // Where the floor meets the ground round it, a soft shade a few feet deep, as a floor lit from above falls off at its edge.
+    const reach = h.fine ? Math.min(2.2, Math.max(0, margin - bw)) : 0;
+    const fade = (suffix, from, to) => gradient(`${id}-hw-${suffix}`, from, to, [[0, "#000", 0.16], [0.35, "#000", 0.05], [1, "#000", 0]], 1);
+    const strip = (suffix, x, y, width, height) => el("rect", { class: "ky-hw", x: num(x), y: num(y), width: num(width), height: num(height), fill: `url(#${id}-hw-${suffix})` });
+    const wide = L + 2 * margin;
+    const defs = pattern("a", tiles.under) +
+        (tiles.over === "" ? "" : pattern("b", tiles.over)) +
+        (reach <= 0 ? "" : fade("e1", [0, -bw], [0, -bw - reach]) + fade("e2", [0, W + bw], [0, W + bw + reach]) + fade("e3", [-bw, 0], [-bw - reach, 0]) + fade("e4", [L + bw, 0], [L + bw + reach, 0]));
+    let under = reach <= 0 ? "" : strip("e1", -margin, -bw - reach, wide, reach) + strip("e2", -margin, W + bw, wide, reach) + strip("e3", -bw - reach, -bw, reach, W + 2 * bw) + strip("e4", L + bw, -bw, reach, W + 2 * bw);
+    under += el("rect", { class: ft(o, "floor", "ky-surface"), ...all });
+    under += el("rect", { class: "ky-hw", ...all, fill: `url(#${id}-hw-a)` });
+    // The border: sides, then the strip behind each baseline, stained so that the boards show through.
+    const sides = `M0 ${-bw}H${num(L)}V0H0ZM0 ${num(W)}H${num(L)}V${num(W + bw)}H0Z`;
+    under += el("path", { class: ft(o, "border", "ky-boards"), d: sides, "fill-opacity": num(h.stain) });
+    under += el("path", { class: ft(o, "border", "ky-boards ky-hw-end-l"), d: `M${-bw} ${-bw}H0V${num(W + bw)}H${-bw}Z`, "fill-opacity": num(h.stain) });
+    under += el("path", { class: ft(o, "border", "ky-boards ky-hw-end-r"), d: `M${num(L)} ${-bw}H${num(L + bw)}V${num(W + bw)}H${num(L)}Z`, "fill-opacity": num(h.stain) });
+    let over = tiles.over === "" ? "" : el("rect", { class: "ky-hw", ...all, fill: `url(#${id}-hw-b)` });
+    // The sheen: light along the middle and a darker fall-off at the edges, and a few broad diagonal glints, as a lacquered floor shows under the lights.
+    if (h.sheen > 0) {
+        const s = h.sheen;
+        const names = h.fine ? ["s1", "s2", "s3"] : ["s1", "s2"];
+        const defsOf = [
+            gradient(`${id}-hw-s1`, [0, -bw], [0, W + bw], [[0, "#000", 0.22], [0.16, "#000", 0.03], [0.3, "#000", 0], [0.5, "#fff", 0.1], [0.7, "#fff", 0], [0.86, "#000", 0.02], [1, "#000", 0.24]], s),
+            gradient(`${id}-hw-s2`, [-bw, 0], [L + bw, 0], [[0, "#000", 0.18], [0.1, "#000", 0], [0.5, "#fff", 0.05], [0.9, "#000", 0], [1, "#000", 0.18]], s),
+            ...(h.fine ? [gradient(`${id}-hw-s3`, [0, -bw], [L * 0.55, W + bw], [[0, "#fff", 0], [0.17, "#fff", 0], [0.21, "#fff", 0.06], [0.25, "#fff", 0], [0.46, "#fff", 0], [0.5, "#fff", 0.075], [0.54, "#fff", 0], [0.75, "#fff", 0], [0.8, "#fff", 0.05], [0.84, "#fff", 0], [1, "#fff", 0]], s)] : []),
+        ];
+        over += names.map((n) => el("rect", { class: "ky-hw", ...all, fill: `url(#${id}-hw-${n})` })).join("");
+        return { defs: defs + defsOf.join(""), under, over };
+    }
+    return { defs, under, over };
+}
+/** A word centred on `(x, y)`, turned `angle` degrees in the court's own frame (the drawing's turn to lie tall comes on top of it). */
+function word(o, x, y, text, size, angle, weight, spacing) {
+    return el("text", {
+        class: `ky-text ${ft(o, "baseline-text", "ky-baseline")}`,
+        x: num(x),
+        y: num(y + size * 0.36),
+        "font-size": size,
+        "font-weight": weight,
+        "letter-spacing": spacing,
+        "text-anchor": "middle",
+        transform: angle === 0 ? undefined : `rotate(${num(angle)} ${num(x)} ${num(y)})`,
+    }, text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"));
+}
+/**
+ * The words of a hardwood floor, each centred in its strip: the baseline words behind each baseline and the sideline words in the border's sides. Where the drawing is
+ * turned a quarter to lie tall, the baseline words are turned back to read left to right, and the sideline words run along their strips, the bottom one up the page.
+ */
+export function hardwoodWords(o, g, turned, sidelines) {
+    const { L, W, bw } = g;
+    const cy = W / 2;
+    let out = "";
+    const base = o.court?.baselineText;
+    if (base !== undefined) {
+        // Off the middle, where the stanchion's arm crosses the border: the far side from the arm, each end opposite the other as a painted floor is.
+        out += word(o, -bw / 2, cy + W * 0.27, base[0], 1.9, -90, 800, 0.4);
+        out += word(o, L + bw / 2, cy - W * 0.27, base[1], 1.9, turned ? -90 : 90, 800, 0.4);
+    }
+    if (sidelines !== undefined) {
+        out += word(o, L / 2, -bw / 2, sidelines[0], 1.5, 0, 700, 0.35);
+        out += word(o, L / 2, W + bw / 2, sidelines[1], 1.5, turned ? 180 : 0, 700, 0.35);
+    }
+    return out;
+}

package/dist/surfaces/basketball.gear.d.ts

@@ -0,0 +1,27 @@
+import type { Hardwood } from "../hardwood.ts";
+import type { CourtSpec } from "../leagues/basketball.ts";
+import { type BuildOptions } from "./surface.ts";
+/** What `basket` needs of the court, in feet. */
+export interface HoopGeo {
+    L: number;
+    W: number;
+    /** The border's width. */
+    bw: number;
+}
+/**
+ * Both baskets from above, with their shadows. The backboard is where the court's figures put it (`court.backboard`), the rim in its place and size; the stanchion
+ * stands behind the baseline in the border and the ground beyond, with its padded base on the floor.
+ */
+export declare function hoops(o: BuildOptions, h: Hardwood, court: CourtSpec, g: HoopGeo): string;
+/** What the bench side needs of the court. */
+export interface BenchGeo extends HoopGeo {
+    /** Where the coaching box ends along the sideline, from the baseline. */
+    box: number;
+    /** The thickness of a line. */
+    thin: number;
+}
+/**
+ * The coaching box's two lines across the border of the bottom sideline, the scorers' table in the middle of it, and a bench either side. They are drawn only when the
+ * ground beyond the border is deep enough to hold them.
+ */
+export declare function bench(o: BuildOptions, g: BenchGeo, room: number): string;

package/dist/surfaces/basketball.gear.js

@@ -0,0 +1,90 @@
+// What stands on a realistic (`hardwood`) basketball floor, seen from above: each basket with its stanchion and its soft shadow, and along the bottom sideline the
+// coaching box's lines, the scorers' table and the two benches. The shadows are stacked translucent shapes (a blur is not in every renderer), laid as if the light came
+// from the top left: a thing 10 feet up throws its shadow farther than one on the floor. The stanchion's and the benches' places are drawn to look right, not measured
+// from a rulebook: only the court's own figures (the board's width and place, the rim) are.
+import { el, num } from "../format.js";
+import { ft } from "./surface.js";
+/** The shadow of a thing that stands this high (feet): how far it falls to the right and down the drawing. */
+const fall = (height) => [height * 0.14, height * 0.1];
+/** The soft shadow of a set of things: a few layers, each one path of every shadow grown by a few inches, so that its edge fades; one layer in the plain detail. */
+function shadows(things, h) {
+    const layers = h.fine ? [[0.7, 0.025], [0.55, 0.03], [0.4, 0.03], [0.25, 0.035], [0.1, 0.04], [0, 0.04]] : [[0.15, 0.14]];
+    return layers
+        .map(([grow, opacity]) => {
+        const d = things.map(([[x0, y0, x1, y1], height]) => {
+            const [dx, dy] = fall(height);
+            return `M${num(x0 + dx - grow)} ${num(y0 + dy - grow)}H${num(x1 + dx + grow)}V${num(y1 + dy + grow)}H${num(x0 + dx - grow)}Z`;
+        });
+        return el("path", { class: "ky-hw-shade", d: d.join(""), fill: "#000", "fill-opacity": opacity });
+    })
+        .join("");
+}
+/**
+ * Both baskets from above, with their shadows. The backboard is where the court's figures put it (`court.backboard`), the rim in its place and size; the stanchion
+ * stands behind the baseline in the border and the ground beyond, with its padded base on the floor.
+ */
+export function hoops(o, h, court, g) {
+    const { L, W } = g;
+    const cy = W / 2;
+    const half = court.backboard.width / 2;
+    const back = court.backboard.fromBaseline;
+    const pole = -(g.bw + 1.1);
+    const cast = [];
+    let rims = "";
+    let solid = "";
+    for (const end of [0, 1]) {
+        // A box in the left end's own feet, as the world's: mirrored about the court's middle at the right end.
+        const at = (x0, y0, x1, y1) => (end === 0 ? [x0, y0, x1, y1] : [L - x1, y0, L - x0, y1]);
+        const x = (v) => (end === 0 ? v : L - v);
+        const pad = at(pole - 1.2, cy - 2.6, pole + 1.2, cy + 2.6);
+        const arm = at(pole, cy - 0.38, back, cy + 0.38);
+        const top = at(pole - 0.7, cy - 0.7, pole + 0.7, cy + 0.7);
+        const board = at(back - 0.19, cy - half, back + 0.19, cy + half);
+        const bracket = at(back + 0.19, cy - 0.17, court.basket - court.rim, cy + 0.17);
+        const by = fall(10);
+        cast.push([pad, 0.6], [arm, 10], [top, 10], [board, 10]);
+        rims += el("circle", { class: "ky-hw-shade", cx: num(x(court.basket) + by[0]), cy: num(cy + by[1]), r: num(court.rim + 0.1), fill: "none", stroke: "#000", "stroke-opacity": h.fine ? 0.1 : 0.16, "stroke-width": num(h.fine ? 0.42 : 0.3) });
+        if (h.fine)
+            rims += el("circle", { class: "ky-hw-shade", cx: num(x(court.basket) + by[0]), cy: num(cy + by[1]), r: num(court.rim * 0.8), fill: "#000", "fill-opacity": 0.05 });
+        const rect = (cls, b, round) => el("rect", { class: cls, x: num(b[0]), y: num(b[1]), width: num(b[2] - b[0]), height: num(b[3] - b[1]), rx: num(round) || undefined });
+        solid += rect("ky-hw-pad", pad, 0.5) + rect("ky-hw-arm", arm, 0.1) + rect("ky-hw-arm", top, 0.25) + rect("ky-hw-arm", bracket, 0.05) + rect("ky-hw-glass", board, 0.06);
+        if (h.fine) {
+            solid += el("circle", { class: "ky-hw-net", cx: num(x(court.basket)), cy, r: num(court.rim * 0.8), "stroke-width": 0.04, "fill-opacity": 0, fill: "#fff" });
+            solid += el("circle", { class: "ky-hw-net", cx: num(x(court.basket)), cy, r: num(court.rim * 0.5), "stroke-width": 0.04, "stroke-opacity": 0.5 });
+        }
+        solid += el("circle", { class: ft(o, "rims", "ky-rim"), cx: num(x(court.basket)), cy, r: court.rim, "stroke-width": h.fine ? 0.17 : 0.2, fill: "none" });
+    }
+    return shadows(cast, h) + rims + solid;
+}
+/**
+ * The coaching box's two lines across the border of the bottom sideline, the scorers' table in the middle of it, and a bench either side. They are drawn only when the
+ * ground beyond the border is deep enough to hold them.
+ */
+export function bench(o, g, room) {
+    const { L, W, bw } = g;
+    if (room < bw + 3.7)
+        return "";
+    let out = "";
+    const lines = [g.box, L - g.box].map((x) => `M${num(x)} ${num(W)}V${num(W + bw + 1.3)}`).join("");
+    out += el("path", { class: ft(o, "court-marks", "ky-line"), d: lines, "stroke-width": num(g.thin * 0.8), fill: "none" });
+    // The table is a long low box with a row of chairs behind it; each bench is a row of seats facing the court. All of it is one path.
+    const table = 8;
+    const parts = [];
+    const box = (x0, x1, y0, y1) => {
+        parts.push(`M${num(x0)} ${num(y0)}H${num(x1)}V${num(y1)}H${num(x0)}Z`);
+    };
+    const seats = (x0, x1, y, size) => {
+        const count = Math.max(1, Math.floor((x1 - x0) / (size * 1.45)));
+        const step = (x1 - x0) / count;
+        for (let i = 0; i < count; i += 1)
+            box(x0 + i * step + (step - size) / 2, x0 + i * step + (step + size) / 2, y, y + size);
+    };
+    const front = W + bw + 0.7;
+    box(L / 2 - table, L / 2 + table, front, front + 1.5);
+    seats(L / 2 - table + 0.5, L / 2 + table - 0.5, front + 1.9, 0.9);
+    for (const [a, b] of [[g.box + 1, L / 2 - table - 1], [L / 2 + table + 1, L - g.box - 1]])
+        if (b - a > 3)
+            seats(a, b, front + 0.2, 1.3);
+    out += el("path", { class: "ky-hw-furniture", d: parts.join("") });
+    return out;
+}