@johnmorrisdotca/kyogijo-stadiums 0.0.0-stage → 0.4.0

package/dist/style.js

@@ -0,0 +1,177 @@
+import { KYOGIJO_BACKGROUND_STYLE } from "./background.js";
+import { KYOGIJO_COURTS_STYLE } from "./courts.style.js";
+import { KYOGIJO_FIELDS_STYLE } from "./fields.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_ROAD_STYLE } from "./road.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
+ * written into every drawing (so that one saved as a file stands alone) unless `style: "none"` is passed, and the
+ * defaults are in `:where()`, which has no weight, so that a page's own rule always wins.
+ */
+export const KYOGIJO_BASE_STYLE = `
+:where(.kyogijo){--ky-ink:#1f2320;--ky-line:#fff;--ky-halo:rgba(255,255,255,.92);--ky-plate:rgba(18,24,21,.9);--ky-plate-ink:#fff;--ky-left:#2f6db0;--ky-right:#b5452c;--ky-left-ink:#fff;--ky-right-ink:#fff;--ky-apron:#dcd8c9;--ky-surface:#3f8f55;--ky-surface-alt:#3a864f;--ky-zone:#2d6a40;--ky-boards:#c8c1b0;--ky-red:#c8372d;--ky-blue:#2a5db0;--ky-dirt:#c28e5c;--ky-foul:#3a8148;--ky-infield:#58a05d;--ky-crease:#bfd3ec;--ky-key:#c25b3c;--ky-centre:transparent;--ky-post:#f2c230;--ky-pylon:#f26a1b;--ky-layer:#14213d;--ky-layer-home:#1f5fa8;--ky-layer-away:#d9480f;--ky-layer-edge:rgba(255,255,255,.92);--ky-layer-hollow:rgba(255,255,255,.32);--ky-layer-ink:#14213d;--ky-layer-halo:rgba(255,255,255,.9);--ky-font:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;display:block;width:100%;height:auto;font-family:var(--ky-font)}
+:where(.kyogijo[data-sport=nhl]){--ky-surface:#eef5fa;--ky-apron:#d3dbe1;--ky-boards:#9aa4ab;--ky-halo:rgba(255,255,255,.92)}
+:where(.kyogijo[data-sport=nba]){--ky-surface:#d9a766;--ky-surface-alt:#cf9c5b;--ky-apron:#c9c3b4;--ky-boards:#a97d46;--ky-baseline:#fff}
+:where(.kyogijo[data-sport=mlb]){--ky-surface:#4f9a55;--ky-surface-alt:#478f4e;--ky-apron:#bdb59f;--ky-boards:#2f4a36}
+:where(.kyogijo[data-sport=soccer]){--ky-surface:#4c9b56;--ky-surface-alt:#438f4d;--ky-apron:#c9d2bd;--ky-court:#3b79ad}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .kyogijo:not([data-theme=light])){--ky-ink:#ece8dc;--ky-line:#e9ece6;--ky-plate:rgba(0,0,0,.82);--ky-apron:#1b1f1c;--ky-surface:#2c6a3f;--ky-surface-alt:#296239;--ky-zone:#1f4a2d;--ky-boards:#4d5450;--ky-red:#d4574d;--ky-blue:#5584d4;--ky-dirt:#8a6040;--ky-foul:#275a31;--ky-infield:#367a42;--ky-crease:#8ea9cc;--ky-key:#8a3f2b;--ky-layer:#f1f5f9;--ky-layer-home:#6aa9f0;--ky-layer-away:#f59a5b;--ky-layer-edge:rgba(0,0,0,.6);--ky-layer-hollow:rgba(255,255,255,.18);--ky-layer-ink:#f1f5f9;--ky-layer-halo:rgba(0,0,0,.7)}
+:where(html:not([data-theme=light]) .kyogijo[data-sport=nhl]:not([data-theme=light])){--ky-surface:#a9bccb;--ky-apron:#1a2025;--ky-boards:#4b5156}
+:where(html:not([data-theme=light]) .kyogijo[data-sport=nba]:not([data-theme=light])){--ky-surface:#8f6a3c;--ky-surface-alt:#876234;--ky-apron:#1a1c1b;--ky-boards:#5e4426}
+:where(html:not([data-theme=light]) .kyogijo[data-sport=mlb]:not([data-theme=light])){--ky-surface:#2f6b3a;--ky-surface-alt:#2b6336;--ky-apron:#1b1f1c;--ky-boards:#1c2b20}
+:where(html:not([data-theme=light]) .kyogijo[data-sport=soccer]:not([data-theme=light])){--ky-surface:#2d6c3e;--ky-surface-alt:#276136;--ky-apron:#1b1f1c;--ky-court:#2a5478}}
+:where(html[data-theme=dark] .kyogijo,.kyogijo[data-theme=dark]){--ky-ink:#ece8dc;--ky-line:#e9ece6;--ky-plate:rgba(0,0,0,.82);--ky-apron:#1b1f1c;--ky-surface:#2c6a3f;--ky-surface-alt:#296239;--ky-zone:#1f4a2d;--ky-boards:#4d5450;--ky-red:#d4574d;--ky-blue:#5584d4;--ky-dirt:#8a6040;--ky-foul:#275a31;--ky-infield:#367a42;--ky-crease:#8ea9cc;--ky-key:#8a3f2b;--ky-layer:#f1f5f9;--ky-layer-home:#6aa9f0;--ky-layer-away:#f59a5b;--ky-layer-edge:rgba(0,0,0,.6);--ky-layer-hollow:rgba(255,255,255,.18);--ky-layer-ink:#f1f5f9;--ky-layer-halo:rgba(0,0,0,.7)}
+:where(html[data-theme=dark] .kyogijo[data-sport=nhl],.kyogijo[data-theme=dark][data-sport=nhl]){--ky-surface:#a9bccb;--ky-apron:#1a2025;--ky-boards:#4b5156}
+:where(html[data-theme=dark] .kyogijo[data-sport=nba],.kyogijo[data-theme=dark][data-sport=nba]){--ky-surface:#8f6a3c;--ky-surface-alt:#876234;--ky-apron:#1a1c1b;--ky-boards:#5e4426}
+:where(html[data-theme=dark] .kyogijo[data-sport=mlb],.kyogijo[data-theme=dark][data-sport=mlb]){--ky-surface:#2f6b3a;--ky-surface-alt:#2b6336;--ky-apron:#1b1f1c;--ky-boards:#1c2b20}
+:where(html[data-theme=dark] .kyogijo[data-sport=soccer],.kyogijo[data-theme=dark][data-sport=soccer]){--ky-surface:#2d6c3e;--ky-surface-alt:#276136;--ky-apron:#1b1f1c;--ky-court:#2a5478}
+.kyogijo .ky-apron{fill:var(--ky-apron)}
+.kyogijo .ky-text{fill:var(--ky-ink);font-family:var(--ky-font);font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums}
+.kyogijo .ky-surface{fill:var(--ky-surface)}
+.kyogijo .ky-stripe{fill:var(--ky-surface-alt)}
+.kyogijo .ky-ring circle{stroke:var(--ky-surface-alt)}
+.kyogijo .ky-zone{fill:var(--ky-zone)}
+.kyogijo .ky-zone-left{fill:var(--ky-left)}
+.kyogijo .ky-zone-right{fill:var(--ky-right)}
+.kyogijo .ky-boards{fill:var(--ky-boards)}
+.kyogijo .ky-line{stroke:var(--ky-line);fill:none}
+.kyogijo .ky-fill-line{fill:var(--ky-line)}
+.kyogijo .ky-band{stroke:var(--ky-line)}
+.kyogijo .ky-num{fill:var(--ky-line);font-family:var(--ky-font);font-weight:700}
+.kyogijo .ky-pitch-futsal .ky-surface{fill:var(--ky-court)}
+.kyogijo .ky-goal{stroke:var(--ky-line);fill:none}
+.kyogijo .ky-goal-net{stroke:var(--ky-line);opacity:.55}
+.kyogijo .ky-goal-strip{fill:var(--ky-line)}
+.kyogijo .ky-flag{fill:var(--ky-pylon)}
+.kyogijo .ky-post{stroke:var(--ky-post)}
+.kyogijo .ky-post-end{fill:var(--ky-post)}
+.kyogijo .ky-pylon{fill:var(--ky-pylon)}
+.kyogijo .ky-red{stroke:var(--ky-red)}
+.kyogijo .ky-red-fill{fill:var(--ky-red)}
+.kyogijo .ky-blue{stroke:var(--ky-blue)}
+.kyogijo .ky-blue-fill{fill:var(--ky-blue)}
+.kyogijo .ky-dash{stroke:var(--ky-surface)}
+.kyogijo .ky-crease{fill:var(--ky-crease);stroke:var(--ky-red)}
+.kyogijo .ky-net{stroke:var(--ky-red)}
+.kyogijo .ky-key{fill:var(--ky-key)}
+.kyogijo .ky-key-left{fill:var(--ky-key-left,var(--ky-key))}
+.kyogijo .ky-key-right{fill:var(--ky-key-right,var(--ky-key))}
+.kyogijo .ky-centre{fill:var(--ky-centre)}
+.kyogijo .ky-board{stroke:var(--ky-line)}
+.kyogijo .ky-rim{stroke:#e8591a}
+.kyogijo .ky-baseline{fill:var(--ky-baseline,var(--ky-line))}
+.kyogijo .ky-foul{fill:var(--ky-foul)}
+.kyogijo .ky-track{fill:none;stroke:var(--ky-dirt)}
+.kyogijo .ky-dirt{fill:var(--ky-dirt)}
+.kyogijo .ky-infield{fill:var(--ky-infield)}
+.kyogijo .ky-fence{stroke:var(--ky-boards);stroke-linejoin:round}
+.kyogijo .ky-ink-left{fill:var(--ky-left-ink)}
+.kyogijo .ky-ink-right{fill:var(--ky-right-ink)}
+.kyogijo .ky-paint-left{fill:var(--ky-left);stroke:var(--ky-halo);stroke-width:.14em;paint-order:stroke;stroke-linejoin:round}
+.kyogijo .ky-paint-right{fill:var(--ky-right);stroke:var(--ky-halo);stroke-width:.14em;paint-order:stroke;stroke-linejoin:round}
+.kyogijo .ky-panel-left,.kyogijo .ky-block-left{fill:var(--ky-left)}
+.kyogijo .ky-panel-right,.kyogijo .ky-block-right{fill:var(--ky-right)}
+.kyogijo .ky-lose{opacity:.78}
+.kyogijo .ky-banner.ky-lose{opacity:1;filter:grayscale(.35) brightness(.92)}
+.kyogijo .ky-score.ky-lose{opacity:.62}
+.kyogijo .ky-plate-bg,.kyogijo .ky-badge-bg{fill:var(--ky-plate)}
+.kyogijo .ky-score{fill:var(--ky-plate-ink)}
+.kyogijo .ky-comp,.kyogijo .ky-foot,.kyogijo .ky-abbr,.kyogijo .ky-dash-text,.kyogijo .ky-badge-status{fill:var(--ky-plate-ink);text-anchor:middle}
+.kyogijo .ky-score{font-weight:800}
+.kyogijo .ky-abbr,.kyogijo .ky-comp,.kyogijo .ky-foot,.kyogijo .ky-badge-status{opacity:.82;font-weight:700}
+.kyogijo .ky-dash-text{opacity:.55;font-weight:600}
+.kyogijo .ky-winbar-left{fill:var(--ky-left)}
+.kyogijo .ky-winbar-right{fill:var(--ky-right)}
+.kyogijo .ky-glyph{stroke:var(--ky-plate-ink);stroke-width:1.4;opacity:.7;stroke-linejoin:round}
+.kyogijo .ky-badge-left .ky-score{fill:var(--ky-left-ink)}
+.kyogijo .ky-badge-right .ky-score{fill:var(--ky-right-ink)}
+.kyogijo .ky-badge-left .ky-name{fill:var(--ky-left-ink)}
+.kyogijo .ky-badge-right .ky-name{fill:var(--ky-right-ink)}
+.kyogijo .ky-pts>*{fill:var(--c,var(--ky-layer));stroke:var(--ky-layer-edge);stroke-width:calc(var(--w,.3)*1px);stroke-linejoin:round}
+.kyogijo .ky-pts>.ky-hol{fill:var(--ky-layer-hollow);stroke:var(--c,var(--ky-layer));stroke-width:calc(var(--w,.3)*2.2px)}
+.kyogijo .ky-h{--c:var(--ky-layer-home)}
+.kyogijo .ky-a{--c:var(--ky-layer-away)}
+.kyogijo .ky-ln{fill:none;stroke:var(--c,var(--ky-layer));stroke-linecap:round;stroke-linejoin:round}
+.kyogijo .ky-ah{fill:var(--c,var(--ky-layer));stroke:none}
+.kyogijo .ky-cm{stroke:none}
+.kyogijo .ky-lt{fill:var(--c,var(--ky-layer-ink));stroke:var(--ky-layer-halo);stroke-width:.18em;paint-order:stroke;stroke-linejoin:round;font-family:var(--ky-font);font-weight:700;font-variant-numeric:tabular-nums}
+.kyogijo .ky-lt.ky-nh{stroke:none}
+`.trim();
+/**
+ * The rules of the heat layers (the ground under a heat map, its zones' and bands' outlines and the legend), kept apart so that a drawing
+ * without one does not carry them: a drawing that has a heat layer writes them in beside the layer, and `KYOGIJO_STYLE` has them for a page.
+ */
+export const KYOGIJO_HEAT_STYLE = `
+:where(.kyogijo){--ky-heat-ground:rgba(255,255,255,.72)}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .kyogijo:not([data-theme=light])){--ky-heat-ground:rgba(14,18,16,.82)}}
+:where(html[data-theme=dark] .kyogijo,.kyogijo[data-theme=dark]){--ky-heat-ground:rgba(14,18,16,.82)}
+.kyogijo .ky-hg{fill:var(--ky-heat-ground)}
+.kyogijo .ky-zn,.kyogijo .ky-cf{stroke:var(--ky-layer-edge);stroke-width:calc(var(--w,.2)*1px);stroke-linejoin:round}
+.kyogijo .ky-cl{fill:none;stroke-width:calc(var(--w,.4)*1px);stroke-linejoin:round}
+.kyogijo .ky-lg-p{fill:var(--ky-plate)}
+.kyogijo .ky-lg-t{fill:var(--ky-plate-ink);font-family:var(--ky-font);font-weight:700}
+.kyogijo .ky-lg-k{stroke:var(--ky-plate-ink);fill:none}`.trim();
+/**
+ * The rules of a curling sheet and its board: the ice and the lines, the house in its colours (`--ky-rg-o`, `-m`, `-i` and `-b` for the 12-foot band, the 8-foot,
+ * the 4-foot and the button), the hacks, the free guard zone, the pebble, the hammer and the board's grid. Kept apart so that a drawing of another sport does not carry
+ * them: a curling drawing writes them in after the base rules, and `KYOGIJO_STYLE` has them for a page.
+ */
+export const KYOGIJO_CURLING_STYLE = `
+:where(.kyogijo[data-sport=curling]){--ky-surface:#eaf3f9;--ky-apron:#cfd8de;--ky-boards:#8d98a0;--ky-line:#23292d;--ky-rg-o:#2a5db0;--ky-rg-m:#fff;--ky-rg-i:#c8372d;--ky-rg-b:#fff;--ky-hog:#c8372d;--ky-hack:#3a4046;--ky-pebble:rgba(110,140,165,.4);--ky-fgz:rgba(42,93,176,.1)}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .kyogijo[data-sport=curling]:not([data-theme=light])){--ky-surface:#8fa6b7;--ky-apron:#1a2025;--ky-boards:#4b5156;--ky-line:#11171b;--ky-rg-o:#3f6cc0;--ky-rg-m:#dfe8ef;--ky-rg-i:#c9473e;--ky-rg-b:#dfe8ef;--ky-hog:#c9473e;--ky-hack:#161b1f;--ky-fgz:rgba(20,40,90,.18)}}
+:where(html[data-theme=dark] .kyogijo[data-sport=curling],.kyogijo[data-theme=dark][data-sport=curling]){--ky-surface:#8fa6b7;--ky-apron:#1a2025;--ky-boards:#4b5156;--ky-line:#11171b;--ky-rg-o:#3f6cc0;--ky-rg-m:#dfe8ef;--ky-rg-i:#c9473e;--ky-rg-b:#dfe8ef;--ky-hog:#c9473e;--ky-hack:#161b1f;--ky-fgz:rgba(20,40,90,.18)}
+.kyogijo .ky-rg-o{fill:var(--ky-rg-o)}.kyogijo .ky-rg-m{fill:var(--ky-rg-m)}.kyogijo .ky-rg-i{fill:var(--ky-rg-i)}.kyogijo .ky-rg-b{fill:var(--ky-rg-b)}
+.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 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
+ * that has them writes them in after the base rules, and `KYOGIJO_STYLE` has them for a page.
+ */
+export const KYOGIJO_WALLS_STYLE = `
+:where(.kyogijo){--ky-wall-1:#f2e6c2;--ky-wall-2:#e6bd62;--ky-wall-3:#d9742e;--ky-wall-4:#8e2f1c;--ky-hill:#2a5f35;--ky-ivy:#1c6b2f;--ky-over:#101612;--ky-pen:#d9dce0}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .kyogijo:not([data-theme=light])){--ky-wall-1:#e9dcb4;--ky-wall-2:#d9ae55;--ky-wall-3:#cc6a2a;--ky-wall-4:#c24a32;--ky-hill:#68a574;--ky-ivy:#4f9a63}}
+:where(html[data-theme=dark] .kyogijo,.kyogijo[data-theme=dark]){--ky-wall-1:#e9dcb4;--ky-wall-2:#d9ae55;--ky-wall-3:#cc6a2a;--ky-wall-4:#c24a32;--ky-hill:#68a574;--ky-ivy:#4f9a63}
+.kyogijo .ky-wall{stroke:var(--ky-layer-edge);stroke-width:.35;stroke-linejoin:round}
+.kyogijo .ky-wall-1{fill:var(--ky-wall-1)}.kyogijo .ky-wall-2{fill:var(--ky-wall-2)}.kyogijo .ky-wall-3{fill:var(--ky-wall-3)}.kyogijo .ky-wall-4{fill:var(--ky-wall-4)}
+.kyogijo .ky-hill{fill:var(--ky-hill);fill-opacity:.6;stroke:var(--ky-line);stroke-width:.5;stroke-dasharray:2 1.5}
+.kyogijo .ky-overhang{fill:var(--ky-over);fill-opacity:.32;stroke:var(--ky-line);stroke-width:.5;stroke-dasharray:3 2}
+.kyogijo .ky-ivy{fill:none;stroke:var(--ky-ivy);stroke-width:3;stroke-dasharray:2.2 1.3;stroke-linecap:round}
+.kyogijo .ky-basket{fill:none;stroke:var(--ky-line);stroke-width:.9;stroke-dasharray:3 1.6}
+.kyogijo .ky-pole{fill:var(--ky-post);stroke:var(--ky-ink);stroke-width:.5}
+.kyogijo .ky-bullpen{fill:var(--ky-pen);stroke:var(--ky-ink);stroke-width:.5}
+.kyogijo .ky-backstop{fill:none;stroke:var(--ky-line);stroke-width:.8}
+.kyogijo .ky-dugout{fill:var(--ky-plate);stroke:var(--ky-line);stroke-width:.6}
+.kyogijo .ky-dugout-away{fill:none}
+.kyogijo .ky-wl{fill:var(--ky-ink);stroke:var(--ky-halo);stroke-width:.14em;paint-order:stroke;stroke-linejoin:round;font-weight:700}
+.kyogijo .ky-wl-p{fill:var(--ky-plate)}
+.kyogijo .ky-wl-k{fill:var(--ky-plate-ink);font-weight:700}`.trim();
+/**
+ * The rules of the team layers (the cells, triangles and hulls, the roses of a sonar, the arrows of a flow field and the marks of a formation), kept apart
+ * like the heat layers' so that a drawing without one does not carry them: a drawing that has one writes them in beside the layer, and `KYOGIJO_STYLE` has them for a page.
+ */
+export const KYOGIJO_TEAM_STYLE = `
+.kyogijo .ky-sp{fill:var(--c,var(--ky-layer));fill-opacity:.22;stroke:var(--c,var(--ky-layer));stroke-width:calc(var(--w,.3)*1px);stroke-linejoin:round}
+.kyogijo .ky-sp-e{fill:none;stroke-opacity:.8}
+.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();
+/**
+ * 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.
+ */
+export const KYOGIJO_NOTE_STYLE = `
+.kyogijo .ky-an-t{fill:var(--ky-ink);stroke:var(--ky-apron);stroke-width:.2em;paint-order:stroke;stroke-linejoin:round}
+.kyogijo .ky-an-l{stroke:var(--ky-ink);stroke-opacity:.75}
+.kyogijo .ky-an-d circle{fill:var(--ky-ink);stroke:var(--ky-apron)}
+.kyogijo .ky-an-h{--c:var(--ky-layer-home)}
+.kyogijo .ky-an-a{--c:var(--ky-layer-away)}
+.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}`;

package/dist/surfaces/baseball.d.ts

@@ -0,0 +1,33 @@
+import { type MlbRules } from "../eras.ts";
+import { type FencePoint } from "../geometry.ts";
+import { type DiamondSpec } from "../leagues/baseball.ts";
+import { type BuildOptions, type Surface } from "./surface.ts";
+/** The fence as points on the field: u across (negative to the left), v out from the back of home plate. */
+export declare function fenceOutline(points: readonly FencePoint[], step?: number): [number, number][];
+/** Home plate as the rules of a season had it: its outline, its half width and where its middle lies out from home. */
+export interface PlateShape {
+    /** An outline as a path in the field's screen coordinates (y is minus the distance out from home), or an empty string for a circle. */
+    d: string;
+    circle?: {
+        cx: number;
+        cy: number;
+        r: number;
+    };
+    /** Half the plate's width across the line from home to the pitcher. */
+    halfWidth: number;
+    /** The distance of the plate's middle from the foul lines' meeting, out towards the pitcher. */
+    centre: number;
+}
+/**
+ * Home plate in a season: a round plate, a square, the square turned, or the pentagon, centred on the foul lines' meeting, wholly
+ * behind it, or in front of it as now. `grow` draws it larger than life, as the rest of the field's small things are.
+ */
+export declare function plateShape(era: Pick<MlbRules, "plateShape" | "platePlacement">, grow: number, plate?: {
+    width: number;
+    side: number;
+}): PlateShape;
+/**
+ * The baseball field: grass, warning track, infield, bases, lines and the fence of a park, with the markings of a season (today's
+ * by default). With a `diamond` (leagues.ts) the field of a league, in feet: Little League's, a softball field.
+ */
+export declare function baseball(points: readonly FencePoint[], o: BuildOptions, era?: MlbRules, diamond?: DiamondSpec): Surface;

package/dist/surfaces/baseball.js

@@ -0,0 +1,208 @@
+import { el, num } from "../format.js";
+import { rulesFor } from "../eras.js";
+import { MLB, fenceAt, skinJoin } from "../geometry.js";
+import { MLB_DIAMOND } from "../leagues/baseball.js";
+import { mowPark } from "../mow.js";
+import { ballparkLegend, ballparkOver, ballparkRoom, ballparkUnder } from "./baseball.walls.js";
+import { edges, ft } from "./surface.js";
+const SQ = Math.SQRT1_2;
+/** The round home plate of 1857 to 1867, "one square foot", about 13½ inches across, in feet. */
+const ROUND_PLATE = 13.5 / 12;
+/** The fence as points on the field: u across (negative to the left), v out from the back of home plate. */
+export function fenceOutline(points, step = 1.5) {
+    const out = [];
+    for (let a = -45; a <= 45 + 1e-9; a += step) {
+        const d = fenceAt(points, a);
+        const t = (a * Math.PI) / 180;
+        out.push([d * Math.sin(t), d * Math.cos(t)]);
+    }
+    return out;
+}
+/**
+ * Home plate in a season: a round plate, a square, the square turned, or the pentagon, centred on the foul lines' meeting, wholly
+ * behind it, or in front of it as now. `grow` draws it larger than life, as the rest of the field's small things are.
+ */
+export function plateShape(era, grow, plate = MLB.plate) {
+    const { plateShape: shape, platePlacement: placement } = era;
+    const half = shape === "circle" ? (ROUND_PLATE / 2) * grow : shape === "square" ? 0.5 * grow : shape === "diamond" ? (Math.SQRT2 / 2) * grow : plate.side * grow;
+    const depth = shape === "pentagon" ? plate.width * grow : shape === "circle" ? 2 * half : shape === "square" ? grow : Math.SQRT2 * grow;
+    // Where its back point lies on the line out from home: centred on the meeting of the foul lines, wholly behind it, or in front of it.
+    const back = placement === "centred" ? -depth / 2 : placement === "behind" ? -depth : 0;
+    const v = (n) => -(back + n);
+    const centre = shape === "pentagon" ? back + plate.side * grow : back + depth / 2;
+    switch (shape) {
+        case "circle":
+            return { d: "", circle: { cx: 0, cy: v(half), r: half }, halfWidth: half, centre };
+        case "square":
+            return { d: `M${num(-half)} ${num(v(0))}H${num(half)}V${num(v(depth))}H${num(-half)}Z`, halfWidth: half, centre };
+        case "diamond":
+            return { d: `M0 ${num(v(0))}L${num(half)} ${num(v(half))}L0 ${num(v(depth))}L${num(-half)} ${num(v(half))}Z`, halfWidth: half, centre };
+        case "pentagon":
+            return { d: `M0 ${num(v(0))}L${num(half)} ${num(v(half))}V${num(v(depth))}H${num(-half)}V${num(v(half))}Z`, halfWidth: half, centre };
+    }
+}
+/**
+ * The baseball field: grass, warning track, infield, bases, lines and the fence of a park, with the markings of a season (today's
+ * by default). With a `diamond` (leagues.ts) the field of a league, in feet: Little League's, a softball field.
+ */
+export function baseball(points, o, era, diamond = MLB_DIAMOND) {
+    const d = diamond;
+    // The Official Baseball Rules have a history (eras.ts); a league's field is as its rulebook has it.
+    const rules = era ??
+        (d === MLB_DIAMOND
+            ? rulesFor("mlb").rules
+            : {
+                baseSize: d.baseSize,
+                pitcher: { kind: "plate", distance: d.pitcher, width: d.pitchersPlate.width, depth: d.pitchersPlate.depth },
+                battersBox: d.boxes === null ? null : { width: d.boxes.batterWidth, length: d.boxes.batterLength, gap: d.boxes.gap },
+                plateShape: "pentagon",
+                platePlacement: "front",
+                moundHeight: null,
+            });
+    const outline = fenceOutline(points);
+    const us = outline.map(([u]) => u);
+    const vs = outline.map(([, v]) => v);
+    const umin = Math.min(...us);
+    const umax = Math.max(...us);
+    const vmax = Math.max(...vs);
+    // A park's walls and quirks need room beyond the fence, and its backstop and legend room below home plate.
+    const b = o.ballpark;
+    const room = b === undefined ? { side: 0, below: 0, legend: 0 } : ballparkRoom(b);
+    const m = Math.max(o.margin ?? 14, room.side);
+    const backstop = d.backstop;
+    const bottom = Math.max(backstop + m, room.below);
+    const thin = o.exact ? 1 / 3 : 0.7;
+    const full = o.detail === "full";
+    // Screen coordinates: x is u, y is -v.
+    const pt = ([u, v]) => `${num(u)} ${num(-v)}`;
+    const fenceD = `M${outline.map(pt).join("L")}`;
+    const fairD = `M0 0L${outline.map(pt).join("L")}Z`;
+    const fairId = `${o.id}-fair`;
+    const strip = o.portrait && o.score ? 60 : 0;
+    const view = { x: umin - m, y: -(vmax + m) - strip, w: umax - umin + 2 * m, h: vmax + m + backstop + m + 2 * strip + (bottom - (backstop + m)) + room.legend };
+    let base = el("rect", { class: ft(o, "foul-ground", "ky-foul"), x: view.x, y: view.y, width: view.w, height: view.h });
+    base += el("path", { class: ft(o, "outfield", "ky-surface"), d: fairD });
+    const clip = `<clipPath id="${fairId}"><path d="${fairD}"/></clipPath>`;
+    if (o.stripes && (o.mow === undefined || o.mow === "rings" || o.mow === "circles")) {
+        const rings = [];
+        for (let r = 90, k = 0; r < vmax + 60; r += 30, k += 1) {
+            if (k % 2 === 1)
+                rings.push(el("circle", { cx: 0, cy: 0, r: r + 15, "stroke-width": 30 }));
+        }
+        base += el("g", { class: ft(o, "mowing", "ky-ring"), "clip-path": `url(#${fairId})`, fill: "none" }, rings.join(""));
+    }
+    else if (o.stripes && o.mow !== "none" && o.mow !== undefined) {
+        // Another pattern, cut to the fair ground; `wide` and `narrow` are twice and half the usual 30 feet.
+        const mown = mowPark(o.mow, { umin, umax, vmax });
+        if (mown.path !== "")
+            base += el("path", { class: ft(o, "mowing", "ky-stripe"), d: mown.path, "clip-path": `url(#${fairId})` });
+    }
+    // The warning track: a band along the fence inside the field.
+    base += el("path", { class: ft(o, "warning-track", "ky-track"), d: fenceD, fill: "none", "stroke-width": (b?.track ?? MLB.warningTrack) * 2, "clip-path": `url(#${fairId})` });
+    if (b !== undefined)
+        base += ballparkUnder(b, points);
+    // The infield's dirt, cut by an arc round the pitcher's plate, and its grass.
+    const skin = d.skinRadius ?? d.base + 5;
+    const ua = skinJoin(d.pitcher, skin) * SQ;
+    base += el("path", { class: ft(o, "infield-dirt", "ky-dirt"), d: `M0 0L${num(ua)} ${num(-ua)}A${num(skin)} ${num(skin)} 0 0 0 ${num(-ua)} ${num(-ua)}Z` });
+    const centreV = d.base * SQ;
+    const half = centreV - 4.5 * Math.SQRT2;
+    base += el("path", { class: ft(o, "infield-grass", "ky-infield"), d: `M0 ${num(-(centreV + half))}L${num(half)} ${num(-centreV)}L0 ${num(-(centreV - half))}L${num(-half)} ${num(-centreV)}Z` });
+    const cuts = [
+        [0, 0, MLB.homeCircleRadius],
+        [centreV, centreV, MLB.baseCircleRadius],
+        [0, 2 * centreV, MLB.baseCircleRadius],
+        [-centreV, centreV, MLB.baseCircleRadius],
+    ];
+    // The mound is the plate's: before 1893 the pitcher stood in a chalked box and the sources give no mound.
+    if (rules.pitcher.kind === "plate")
+        cuts.push([0, d.moundCentre, d.moundRadius]);
+    base += cuts.map(([u, v, r]) => el("circle", { class: ft(o, "infield-dirt", "ky-dirt"), cx: u, cy: -v, r })).join("");
+    // Lines: the foul lines, the boxes, the lane, the plates, the bases, the fence.
+    const first = outline[0];
+    const last = outline[outline.length - 1];
+    let lines = el("path", { class: ft(o, "foul-lines", "ky-line"), d: `M0 0L${pt(first)}M0 0L${pt(last)}`, "stroke-width": thin, fill: "none" });
+    if (full) {
+        // The batter's boxes, from 1874: each beside the plate, centred lengthwise on its middle.
+        if (rules.battersBox !== null) {
+            const { width: batterWidth, length: batterLength, gap } = rules.battersBox;
+            const at = plateShape(rules, 1, d.plate);
+            const inner = at.halfWidth + gap;
+            const boxes = [-1, 1].map((s) => `M${num(s * inner)} ${num(-(at.centre + batterLength / 2))}h${num(s * batterWidth)}v${batterLength}h${num(-s * batterWidth)}z`).join("");
+            lines += el("path", { class: ft(o, "batters-boxes", "ky-line"), d: boxes, "stroke-width": thin * 0.8, fill: "none" });
+        }
+        if (d.runningLane !== null) {
+            const dist = (s) => [s * SQ * d.base, -SQ * d.base];
+            const off = 3;
+            const a = dist(1);
+            const b = [a[0] / 2, a[1] / 2];
+            const lane = `M${num(b[0])} ${num(b[1])}l${num(off * SQ)} ${num(off * SQ)}L${num(a[0] + off * SQ)} ${num(a[1] + off * SQ)}L${num(a[0])} ${num(a[1])}`;
+            lines += el("path", { class: ft(o, "running-lane", "ky-line"), d: lane, "stroke-width": thin * 0.7, fill: "none" });
+        }
+    }
+    // Bases and plates are drawn larger than life, as broadcast graphics do, unless exact lines are asked for.
+    const grow = o.exact ? 1 : 2.4;
+    const plate = plateShape(rules, grow, d.plate);
+    lines += plate.circle === undefined ? el("path", { class: ft(o, "home-plate", "ky-fill-line"), d: plate.d }) : el("circle", { class: ft(o, "home-plate", "ky-fill-line"), cx: plate.circle.cx, cy: plate.circle.cy, r: plate.circle.r });
+    const pitcher = rules.pitcher;
+    if (pitcher.kind === "plate") {
+        lines += el("rect", { class: ft(o, "pitchers-plate", "ky-fill-line"), x: -1 * grow, y: -(pitcher.distance + 0.25 * grow), width: 2 * grow, height: 0.5 * grow });
+    }
+    else {
+        // A chalked box: its front edge the pitching distance from home, its back edge the depth beyond.
+        lines += el("rect", { class: ft(o, "pitchers-plate", "ky-line"), x: -pitcher.width / 2, y: -(pitcher.distance + pitcher.depth), width: pitcher.width, height: pitcher.depth, "stroke-width": thin * 0.8, fill: "none" });
+    }
+    const h = (rules.baseSize * grow * Math.SQRT2) / 2;
+    const bases = [
+        [centreV - h, centreV],
+        [0, 2 * centreV - h],
+        [-centreV + h, centreV],
+    ];
+    lines += bases.map(([u, v]) => el("path", { class: ft(o, "bases", "ky-fill-line"), d: `M${num(u)} ${num(-(v + h))}L${num(u + h)} ${num(-v)}L${num(u)} ${num(-(v - h))}L${num(u - h)} ${num(-v)}Z` })).join("");
+    lines += el("path", { class: ft(o, "fence", "ky-fence"), d: fenceD, fill: "none", "stroke-width": 1.6 });
+    if (b !== undefined) {
+        lines += ballparkOver(b, points);
+        if (b.legend)
+            lines += ballparkLegend(b, bottom + 3);
+    }
+    const left = { cx: 0, cy: 0, w: 0, h: 0, rot: 0, panel: true };
+    const right = { ...left };
+    if (strip > 0) {
+        const w = Math.min(view.w * 0.9, 300);
+        Object.assign(left, { cx: (umin + umax) / 2, cy: view.y + strip / 2, w, h: strip - 12 });
+        Object.assign(right, { cx: (umin + umax) / 2, cy: view.y + view.h - strip / 2, w, h: strip - 12 });
+    }
+    else {
+        const w = Math.min(172, -62 - (umin - m + 6));
+        const cy = 18;
+        Object.assign(left, { cx: (umin - m + 6 + -62) / 2, cy, w, h: 58 });
+        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 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),
+        outfield: edges(umin, -vmax, umax, -(2 * centreV - 6)),
+    };
+    if (o.landmarks === true) {
+        const mid = outline[Math.round(outline.length / 2)];
+        const aside = outline[Math.round(outline.length * 0.8)];
+        const marks = [
+            { id: "home-plate", x: 0, y: 0, side: "bottom" },
+            { id: "first-base", x: bases[0][0], y: -bases[0][1], side: "bottom" },
+            { id: "third-base", x: bases[2][0], y: -bases[2][1], side: "bottom" },
+            { id: "second-base", x: bases[1][0], y: -bases[1][1], side: "top" },
+            { id: "foul-line", x: first[0] * 0.55, y: -first[1] * 0.55, side: "top" },
+            { id: "outfield-fence", x: mid[0], y: -mid[1], side: "top" },
+            { id: "warning-track", x: aside[0] * 0.97, y: -aside[1] * 0.97, side: "top" },
+        ];
+        if (rules.pitcher.kind === "plate")
+            marks.push({ id: "pitchers-plate", x: 0, y: -rules.pitcher.distance, side: "bottom" });
+        if (rules.battersBox !== null) {
+            const at = plateShape(rules, 1, d.plate);
+            marks.push({ id: "batters-box", x: at.halfWidth + rules.battersBox.gap + rules.battersBox.width / 2, y: -at.centre, side: "bottom" });
+        }
+        surface.marks = marks;
+    }
+    return surface;
+}

package/dist/surfaces/baseball.walls.d.ts

@@ -0,0 +1,16 @@
+import { type FencePoint } from "../geometry.ts";
+import { type Ballpark } from "../ballpark.ts";
+/** How wide the band of a wall is drawn, in feet, from its height in feet: a taller wall has a wider band. */
+export declare const bandWidth: (feet: number) => number;
+/** The room a ballpark's additions need: beyond the fence at the sides and top, below home plate for the backstop's bar, and under the drawing for the legend. */
+export declare function ballparkRoom(b: Ballpark): {
+    side: number;
+    below: number;
+    legend: number;
+};
+/** What is drawn under the lines: the hill and the overhang on the grass, the bands of the walls outside the fence, and the dugouts. */
+export declare function ballparkUnder(b: Ballpark, points: readonly FencePoint[]): string;
+/** What is drawn over the lines: the ivy and the basket, the poles and the bullpens, the backstop's bar, and the names. */
+export declare function ballparkOver(b: Ballpark, points: readonly FencePoint[]): string;
+/** The key to the shades: a panel with its heading and the four tiers, centred under the field, its top at `y`. */
+export declare function ballparkLegend(b: Ballpark, y: number): string;

package/dist/surfaces/baseball.walls.js

@@ -0,0 +1,150 @@
+// The walls and quirks of a ballpark, drawn on its field: a band outside each stretch of the fence whose width and shade say how high it stands, the hill,
+// the overhang, the ivy, the poles and bullpens, the distance to the backstop and the dugouts. The figures are the park's article's (parks.ts); where it gives
+// none nothing is drawn. Everything is in the field's own frame, in feet: x across (negative to the left), y minus the distance out from home plate.
+import { el, num } from "../format.js";
+import { fenceAt } from "../geometry.js";
+import { lengthText, quirkName, tierOf, tierTexts, wallText } from "../ballpark.js";
+import { textOn } from "./surface.js";
+const RAD = Math.PI / 180;
+const SQ = Math.SQRT1_2;
+/** The size of the words on the field and in the legend, in feet. */
+const TEXT = 6.5;
+/** How wide the band of a wall is drawn, in feet, from its height in feet: a taller wall has a wider band. */
+export const bandWidth = (feet) => 2 + 0.22 * feet;
+const at = (angle, distance) => [distance * Math.sin(angle * RAD), -distance * Math.cos(angle * RAD)];
+const pt = ([x, y]) => `${num(x)} ${num(y)}`;
+/** The angles from `from` to `to`, a step of 1.5 degrees apart and ending on `to`. */
+function angles(from, to) {
+    const out = [];
+    for (let a = from; a < to - 1e-9; a += 1.5)
+        out.push(a);
+    out.push(to);
+    return out;
+}
+/** A closed shape between two offsets of the fence over a stretch of it: `inner` and `outer` are distances to add to the fence's. */
+function strip(points, from, to, inner, outer) {
+    const as = angles(from, to);
+    const near = as.map((a) => at(a, fenceAt(points, a) + inner));
+    const far = as.map((a) => at(a, fenceAt(points, a) + outer)).reverse();
+    return `M${[...near, ...far].map(pt).join("L")}Z`;
+}
+/** An open line along the fence over a stretch of it, offset from it. */
+function along(points, from, to, offset) {
+    return `M${angles(from, to).map((a) => pt(at(a, fenceAt(points, a) + offset))).join("L")}`;
+}
+/** How far a hill reaches in from the fence: as far as it is wide (the article gives its width and no depth, so it is drawn square). */
+const hillSpan = (q) => {
+    const half = Math.atan(q.width_ft / 2 / q.feet) / RAD;
+    return { from: Math.max(-45, q.angle - half), to: Math.min(45, q.angle + half) };
+};
+/** The room a ballpark's additions need: beyond the fence at the sides and top, below home plate for the backstop's bar, and under the drawing for the legend. */
+export function ballparkRoom(b) {
+    const bands = b.walls.reduce((most, wall) => Math.max(most, bandWidth(wall.height_ft)), 0);
+    const quirks = b.quirks.some((q) => q.kind === "basket") ? 4 : 0;
+    return {
+        side: b.walls.length > 0 ? Math.max(bands + 2, quirks) : quirks,
+        below: b.backstop === undefined ? 0 : b.backstop + (b.quirkLabels ? 12 : 8),
+        legend: b.legend ? 40 : 0,
+    };
+}
+/** A word on the field, upright, set inside the fence and anchored so that it runs into the field and not out of the drawing. */
+function label(x, y, text) {
+    return textOn(false, x, y, text, { size: TEXT, anchor: x > 40 ? "end" : x < -40 ? "start" : "middle", cls: "ky-wl" });
+}
+function dugout(side, home) {
+    const s = side === "first" ? 1 : -1;
+    const corner = (t, o) => [s * SQ * (t + o), -SQ * (t - o)];
+    const d = `M${[corner(30, 7), corner(70, 7), corner(70, 15), corner(30, 15)].map(pt).join("L")}Z`;
+    return el("path", { class: home ? "ky-dugout" : "ky-dugout ky-dugout-away", d });
+}
+/** What is drawn under the lines: the hill and the overhang on the grass, the bands of the walls outside the fence, and the dugouts. */
+export function ballparkUnder(b, points) {
+    let out = "";
+    for (const q of b.quirks) {
+        if (q.kind === "hill") {
+            const { from, to } = hillSpan(q);
+            out += el("path", { class: "ky-hill", d: strip(points, from, to, -q.width_ft, 0) });
+        }
+        else if (q.kind === "overhang")
+            out += el("path", { class: "ky-overhang", d: strip(points, q.from, q.to, -q.depth_ft, 0) });
+    }
+    for (const wall of b.walls)
+        out += el("path", { class: `ky-wall ky-wall-${tierOf(wall.height_ft)}`, d: strip(points, wall.from, wall.to, 0, bandWidth(wall.height_ft)) });
+    if (b.dugouts?.home !== undefined)
+        out += dugout(b.dugouts.home, true);
+    if (b.dugouts?.visitors !== undefined)
+        out += dugout(b.dugouts.visitors, false);
+    return out;
+}
+const markOf = (q, points) => {
+    switch (q.kind) {
+        case "pole":
+            return at(q.angle, q.feet - 8);
+        case "flagpole":
+        case "bullpen": {
+            const [x, y] = at(q.angle, q.feet);
+            return [x, y + 11];
+        }
+        case "hill":
+            return at(q.angle, fenceAt(points, q.angle) - q.width_ft - 5);
+        case "overhang": {
+            const mid = (q.from + q.to) / 2;
+            return at(mid, fenceAt(points, mid) - q.depth_ft - 5);
+        }
+        default:
+            return undefined;
+    }
+};
+/** What is drawn over the lines: the ivy and the basket, the poles and the bullpens, the backstop's bar, and the names. */
+export function ballparkOver(b, points) {
+    let out = "";
+    for (const q of b.quirks) {
+        if (q.kind === "ivy")
+            out += el("path", { class: "ky-ivy", d: along(points, q.from, q.to, 0) });
+        else if (q.kind === "basket")
+            out += el("path", { class: "ky-basket", d: along(points, q.from, q.to, 2.5) });
+        else if (q.kind === "pole" || q.kind === "flagpole") {
+            const [x, y] = at(q.angle, q.feet);
+            out += el("circle", { class: "ky-pole", cx: x, cy: y, r: q.kind === "pole" ? 2.4 : 2 });
+        }
+        else if (q.kind === "bullpen") {
+            const [x, y] = at(q.angle, q.feet);
+            out += el("rect", { class: "ky-bullpen", x: x - 5, y: y - 3.5, width: 10, height: 7 });
+        }
+    }
+    if (b.backstop !== undefined) {
+        out += el("path", { class: "ky-backstop", d: `M0 4V${num(b.backstop)}M-9 ${num(b.backstop)}H9`, fill: "none" });
+        if (b.quirkLabels)
+            out += textOn(false, 12, b.backstop + 2, `${lengthText(b.backstop, b.unit)} ${b.words.unit[b.unit]}`, { size: TEXT, anchor: "start", cls: "ky-wl" });
+    }
+    if (b.quirkLabels) {
+        for (const q of b.quirks) {
+            const mark = markOf(q, points);
+            if (mark === undefined)
+                continue;
+            out += label(mark[0], mark[1], quirkName(q, b.words));
+        }
+    }
+    if (b.wallLabels) {
+        for (const wall of b.walls) {
+            const mid = (wall.from + wall.to) / 2;
+            const [x, y] = at(mid, fenceAt(points, mid) - 10);
+            out += label(x, y, wallText(wall, b));
+        }
+    }
+    return out;
+}
+/** The key to the shades: a panel with its heading and the four tiers, centred under the field, its top at `y`. */
+export function ballparkLegend(b, y) {
+    const cell = 78;
+    const texts = tierTexts(b);
+    let out = el("rect", { class: "ky-wl-p", x: -(cell + 5), y, width: 2 * cell + 10, height: 37, rx: 3 });
+    out += textOn(false, -cell, y + 10, b.words.heading, { size: TEXT, anchor: "start", cls: "ky-wl-k" });
+    texts.forEach((text, i) => {
+        const x = -cell + (i % 2) * cell;
+        const row = y + 15 + Math.floor(i / 2) * 11;
+        out += el("rect", { class: `ky-wall ky-wall-${i + 1}`, x, y: row, width: 11, height: 6 });
+        out += textOn(false, x + 15, row + 5.2, text, { size: TEXT, anchor: "start", cls: "ky-wl-k" });
+    });
+    return out;
+}

package/dist/surfaces/basketball.d.ts

@@ -0,0 +1,8 @@
+import { type NbaRules } from "../eras.ts";
+import { type CourtSpec } from "../leagues/basketball.ts";
+import { type BuildOptions, type Surface } from "./surface.ts";
+/**
+ * A basketball court: the floor, the keys, the arcs, the circles, the baskets and the small marks. By default the NBA's, as the
+ * rules of a season (today's by default) marked it; with a `court` (leagues.ts), that league's, in feet.
+ */
+export declare function basketball(o: BuildOptions, era?: NbaRules, court?: CourtSpec): Surface;