@johnmorrisdotca/kyogijo-stadiums 0.4.0 → 0.6.0

package/dist/look.js

@@ -8,9 +8,12 @@ const PROPERTY = {
     red: "--ky-red", blue: "--ky-blue", dirt: "--ky-dirt", foul: "--ky-foul", infield: "--ky-infield", crease: "--ky-crease", key: "--ky-key", court: "--ky-court",
     post: "--ky-post", pylon: "--ky-pylon", rgo: "--ky-rg-o", rgm: "--ky-rg-m", rgi: "--ky-rg-i", rgb: "--ky-rg-b", hog: "--ky-hog", hack: "--ky-hack",
     fgz: "--ky-fgz", pebble: "--ky-pebble", free: "--ky-free", net: "--ky-net", area: "--ky-area",
+    ropeg: "--ky-pg", ropeb: "--ky-pb", ropey: "--ky-py", roper: "--ky-pr", ropew: "--ky-pw", pad: "--ky-pd", block: "--ky-pk",
+    track: "--ky-track", sand: "--ky-sand", mat: "--ky-mat", water: "--ky-water", concrete: "--ky-concrete", trackpad: "--ky-pad",
+    markY: "--ky-ath-y", markB: "--ky-ath-b", markG: "--ky-ath-g", markR: "--ky-ath-r",
 };
 /** The sports of each group. */
-const GROUP_SPORTS = { football: ["nfl", "cfl", "ifaf"], nhl: ["nhl"], nba: ["nba"], mlb: ["mlb"], soccer: ["soccer"], curling: ["curling"], net: ["tennis", "volleyball", "badminton", "pickleball", "tabletennis"] };
+const GROUP_SPORTS = { football: ["nfl", "cfl", "ifaf"], nhl: ["nhl", "skating"], nba: ["nba"], mlb: ["mlb"], soccer: ["soccer"], curling: ["curling"], net: ["tennis", "volleyball", "badminton", "pickleball", "tabletennis", "padel", "squash", "racquetball", "sepaktakraw", "teqball", "roundnet", "netball"], pool: ["swimming", "waterpolo", "diving", "artisticswimming"], athletics: ["athletics"] };
 /** The group a sport is painted with, or `undefined` for a surface with no palette of its own (it takes the look's base). */
 export const groupOf = (sport) => Object.keys(GROUP_SPORTS).find((group) => GROUP_SPORTS[group].includes(sport));
 // ---- The looks. ----
@@ -25,6 +28,8 @@ const GRASS = {
             soccer: { surface: "#4c9b56", alt: "#438f4d", apron: "#c9d2bd" },
             curling: { surface: "#eaf3f9", apron: "#cfd8de", boards: "#8d98a0", line: "#23292d", rgo: "#2a5db0", rgm: "#ffffff", rgi: "#c8372d", rgb: "#ffffff", hog: "#c8372d", hack: "#3a4046", fgz: "rgba(42,93,176,.1)", pebble: "rgba(110,140,165,.4)" },
             net: { surface: "#3d78bd", alt: "#3d78bd", free: "#2f5f9a", apron: "#dcd8c9", area: "#4a86c8", net: "#20262b" },
+            pool: { surface: "#3fb4e6", alt: "#2a9bd2", apron: "#e3e1d9", boards: "#f7f6f1", line: "#0c3a5c", ropeg: "#1fa35a", ropeb: "#1b66d3", ropey: "#f4c514", roper: "#e0392f", ropew: "#fbfcfd", pad: "#f3d32c", block: "#454f59" },
+            athletics: { surface: "#4c9b56", alt: "#438f4d", apron: "#d9d6c8", track: "#c05a46", sand: "#e3cf9d", mat: "#3d6fb5", water: "#7cc4ee", concrete: "#a9adb0", trackpad: "#40454a" },
         },
     },
     dark: {
@@ -36,6 +41,8 @@ const GRASS = {
             soccer: { surface: "#2d6c3e", alt: "#276136", apron: "#1b1f1c" },
             curling: { surface: "#8fa6b7", apron: "#1a2025", boards: "#4b5156", line: "#11171b", rgo: "#3f6cc0", rgm: "#dfe8ef", rgi: "#c9473e", rgb: "#dfe8ef", hog: "#8a1f19", hack: "#161b1f", fgz: "rgba(20,40,90,.18)", pebble: "rgba(80,105,125,.4)" },
             net: { surface: "#2f5f99", alt: "#2f5f99", free: "#244a78", apron: "#1b1f1c", area: "#3a6fae", net: "#e6e9ec" },
+            pool: { surface: "#1d7aa8", alt: "#176b97", apron: "#1f252a", boards: "#3a434b", line: "#031118", ropeg: "#2bb169", ropeb: "#3d86ea", ropey: "#efc22a", roper: "#e65248", ropew: "#e9eef2", pad: "#dcc23a", block: "#6a7683" },
+            athletics: { surface: "#2d6c3e", alt: "#276136", apron: "#1b1f1c", track: "#9a4636", sand: "#a89568", mat: "#2c528a", water: "#4d8fb8", concrete: "#6e7377", trackpad: "#1f2326" },
         },
     },
 };
@@ -47,6 +54,7 @@ const NIGHT_DARK = {
         mlb: { surface: "#1d4a2c" },
         soccer: { surface: "#1d4a2c" },
         curling: { surface: "#2a3a47", boards: "#3a4652", line: "#e6eef5", rgo: "#6a97ff", rgm: "#dfe8ef", rgi: "#ff6b5e", rgb: "#dfe8ef", hog: "#ff7a6e", hack: "#c9d3da", fgz: "rgba(120,160,255,.12)", pebble: "rgba(190,210,225,.35)" },
+        pool: { surface: "#14587a", alt: "#104a68", apron: "#070a10", boards: "#232b38", line: "#d4e9f5", ropeg: "#2bb169", ropeb: "#3d86ea", ropey: "#efc22a", roper: "#e65248", ropew: "#e9eef2", pad: "#dcc23a", block: "#6a7683" },
     },
 };
 const NIGHT = {
@@ -56,6 +64,7 @@ const NIGHT = {
 };
 const chalkboard = (surface, alt, apron) => ({
     base: { ink: "#eef0e6", line: "#f4f1e6", apron, surface, alt, zone: "#26332d", boards: "#4a5a52", red: "#f1a8a0", blue: "#a5c8ee", dirt: "#3e4a42", foul: "#26312b", infield: "#34423a", crease: "#3b4d58", key: "#3a463f", court: "#2e4655", post: "#f2e6a8", pylon: "#f1b98a", rgo: "#a5c8ee", rgm: "#f4f1e6", rgi: "#f1a8a0", rgb: "#f4f1e6", hog: "#f1a8a0", hack: "#d8d4c4", fgz: "rgba(165,200,238,.12)", pebble: "rgba(244,241,230,.25)" },
+    groups: { pool: { ropeg: "#9fd8a8", ropeb: "#a5c8ee", ropey: "#f2e6a8", roper: "#f1a8a0", ropew: "#f4f1e6", pad: "#f2e6a8", block: "#5d6e65" } },
 });
 const CHALKBOARD = {
     about: "Chalk on a slate board: white lines, pink and blue chalk for the red and blue ones, for a teaching diagram.",
@@ -64,6 +73,7 @@ const CHALKBOARD = {
 };
 const blueprint = (surface, alt, apron, boards) => ({
     base: { ink: "#e6f1ff", line: "#e6f1ff", apron, surface, alt, zone: alt, boards, red: "#ffd1c9", blue: "#bfe0ff", dirt: "#2a64a8", foul: alt, infield: "#2358a0", crease: "#2f6aae", key: "#164277", court: surface, post: "#ffe08a", pylon: "#ffb86b", rgo: "#8ec1ff", rgm: "#e6f1ff", rgi: "#ffd1c9", rgb: "#e6f1ff", hog: "#ffd1c9", hack: "#cfe3fb", fgz: "rgba(190,224,255,.14)", pebble: "rgba(230,241,255,.25)" },
+    groups: { pool: { ropeg: "#8fe0c0", ropeb: "#8ec1ff", ropey: "#ffe08a", roper: "#ffd1c9", ropew: "#e6f1ff", pad: "#ffe08a", block: "#2c63a6" } },
 });
 const BLUEPRINT = {
     about: "White lines on blueprint blue, as a drawing office would print the rulebook's plan.",
@@ -74,9 +84,11 @@ const PRINT = {
     about: "Black on white with greys for the parts a colour would tell apart: for a printer that has no colour (dark: the same as white on black).",
     light: {
         base: { ink: "#111111", line: "#111111", apron: "#ffffff", surface: "#ffffff", alt: "#f0f0f0", zone: "#d9d9d9", boards: "#888888", red: "#444444", blue: "#111111", dirt: "#d6d6d6", foul: "#fafafa", infield: "#ececec", crease: "#e4e4e4", key: "#d4d4d4", court: "#e8e8e8", post: "#333333", pylon: "#333333", rgo: "#666666", rgm: "#eeeeee", rgi: "#999999", rgb: "#ffffff", hog: "#444444", hack: "#222222", fgz: "rgba(0,0,0,.08)", pebble: "rgba(0,0,0,.18)" },
+        groups: { pool: { ropeg: "#555555", ropeb: "#8a8a8a", ropey: "#bdbdbd", roper: "#333333", ropew: "#ffffff", pad: "#dddddd", block: "#444444" } },
     },
     dark: {
         base: { ink: "#f2f2f2", line: "#f2f2f2", apron: "#000000", surface: "#111111", alt: "#1a1a1a", zone: "#2a2a2a", boards: "#777777", red: "#cfcfcf", blue: "#ffffff", dirt: "#333333", foul: "#0a0a0a", infield: "#1e1e1e", crease: "#262626", key: "#2e2e2e", court: "#1c1c1c", post: "#dddddd", pylon: "#dddddd", rgo: "#aaaaaa", rgm: "#222222", rgi: "#777777", rgb: "#000000", hog: "#cfcfcf", hack: "#eeeeee", fgz: "rgba(255,255,255,.1)", pebble: "rgba(255,255,255,.2)" },
+        groups: { pool: { ropeg: "#cfcfcf", ropeb: "#8f8f8f", ropey: "#5c5c5c", roper: "#e6e6e6", ropew: "#ffffff", pad: "#777777", block: "#cfcfcf" } },
     },
 };
 const BROADCAST_LIGHT = {
@@ -85,6 +97,7 @@ const BROADCAST_LIGHT = {
         nhl: { surface: "#f4f9ff", alt: "#ecf3fb", boards: "#3b4d66", red: "#d11f17", blue: "#1a49c4" },
         nba: { surface: "#b97a2e", alt: "#af7228", key: "#1d4ed8", boards: "#6b4318" },
         curling: { surface: "#f4f9ff", boards: "#3b4d66", line: "#0d1b2e", rgo: "#1a49c4", rgm: "#ffffff", rgi: "#d11f17", rgb: "#ffffff", hog: "#d11f17", hack: "#1a2a40", fgz: "rgba(26,73,196,.12)", pebble: "rgba(80,110,150,.4)" },
+        pool: { surface: "#1b9ad6", alt: "#1480b8", apron: "#0d1b2e", boards: "#1a2a40", line: "#06243a", ropeg: "#17b45e", ropeb: "#1f56d6", ropey: "#ffd21f", roper: "#e0342b", ropew: "#ffffff", pad: "#ffd21f", block: "#2c3a50" },
     },
 };
 const BROADCAST = {
@@ -96,6 +109,7 @@ const BROADCAST = {
             nhl: { surface: "#2f4e6e", alt: "#2a4766", boards: "#223047", red: "#ff8a80", blue: "#8db6ff" },
             nba: { surface: "#8f5b1f", alt: "#865418", key: "#1d4ed8", boards: "#4a2f10" },
             curling: { surface: "#7f9db8", boards: "#223047", line: "#0d1b2e", rgo: "#1a49c4", rgm: "#e6eef5", rgi: "#b3140d", rgb: "#e6eef5", hog: "#8f0f09", hack: "#0d1b2e", fgz: "rgba(26,73,196,.15)", pebble: "rgba(40,70,100,.35)" },
+            pool: { surface: "#1479ad", alt: "#10688f", apron: "#060d18", boards: "#223047", line: "#021018", ropeg: "#17b45e", ropeb: "#3d86ea", ropey: "#ffd21f", roper: "#e0342b", ropew: "#ffffff", pad: "#ffd21f", block: "#2c3a50" },
         },
     },
 };
@@ -103,9 +117,23 @@ const HIGH_CONTRAST = {
     about: "Black on white, or white on black: every line at the highest contrast the colours allow (WCAG AAA), for low vision and for projectors.",
     light: {
         base: { ink: "#000000", line: "#000000", apron: "#ffffff", surface: "#ffffff", alt: "#e6e6e6", zone: "#e6e6e6", boards: "#000000", red: "#b00020", blue: "#0030c0", dirt: "#d0d0d0", foul: "#f2f2f2", infield: "#e0e0e0", crease: "#dcdcdc", key: "#cfcfcf", court: "#e6e6e6", post: "#000000", pylon: "#000000", rgo: "#0030c0", rgm: "#ffffff", rgi: "#b00020", rgb: "#ffffff", hog: "#b00020", hack: "#000000", fgz: "rgba(0,48,192,.12)", pebble: "rgba(0,0,0,.25)" },
+        groups: { pool: { ropeg: "#006b2d", ropeb: "#0030c0", ropey: "#7a5c00", roper: "#b00020", ropew: "#000000", pad: "#e0e0e0", block: "#000000" } },
     },
     dark: {
         base: { ink: "#ffffff", line: "#ffffff", apron: "#000000", surface: "#000000", alt: "#141414", zone: "#141414", boards: "#ffffff", red: "#ff6b6b", blue: "#7fb2ff", dirt: "#3a3a3a", foul: "#0a0a0a", infield: "#222222", crease: "#1a2a40", key: "#333333", court: "#0a0a0a", post: "#ffeb3b", pylon: "#ffeb3b", rgo: "#7fb2ff", rgm: "#000000", rgi: "#ff6b6b", rgb: "#000000", hog: "#ff6b6b", hack: "#ffffff", fgz: "rgba(127,178,255,.18)", pebble: "rgba(255,255,255,.3)" },
+        groups: { pool: { ropeg: "#4ade80", ropeb: "#7fb2ff", ropey: "#ffeb3b", roper: "#ff6b6b", ropew: "#ffffff", pad: "#444444", block: "#ffffff" } },
+    },
+};
+const LINE_DRAWING = {
+    about: "Ink only: black lines on white and nothing filled, for a plan that prints on any printer and copies cleanly (dark: white lines on black).",
+    light: {
+        base: { ink: "#000000", line: "#000000", apron: "#ffffff", surface: "#ffffff", alt: "#ffffff", zone: "#ffffff", boards: "#000000", red: "#000000", blue: "#000000", dirt: "#ffffff", foul: "#ffffff", infield: "#ffffff", crease: "#ffffff", key: "#ffffff", court: "#ffffff", post: "#000000", pylon: "#000000", rgo: "#ffffff", rgm: "#ffffff", rgi: "#ffffff", rgb: "#ffffff", hog: "#000000", hack: "#000000", fgz: "rgba(0,0,0,0)", pebble: "rgba(0,0,0,0)", markY: "#000000", markB: "#000000", markG: "#000000", markR: "#000000" },
+        // An athletics stadium in ink: nothing filled but the pads of a pole vault box, so that a pit, a mat, a circle and the track are their outlines.
+        groups: { athletics: { track: "#ffffff", sand: "#ffffff", mat: "#ffffff", water: "#ffffff", concrete: "#ffffff", trackpad: "#000000" } },
+    },
+    dark: {
+        base: { ink: "#ffffff", line: "#ffffff", apron: "#000000", surface: "#000000", alt: "#000000", zone: "#000000", boards: "#ffffff", red: "#ffffff", blue: "#ffffff", dirt: "#000000", foul: "#000000", infield: "#000000", crease: "#000000", key: "#000000", court: "#000000", post: "#ffffff", pylon: "#ffffff", rgo: "#000000", rgm: "#000000", rgi: "#000000", rgb: "#000000", hog: "#ffffff", hack: "#ffffff", fgz: "rgba(0,0,0,0)", pebble: "rgba(0,0,0,0)", markY: "#ffffff", markB: "#ffffff", markG: "#ffffff", markR: "#ffffff" },
+        groups: { athletics: { track: "#000000", sand: "#000000", mat: "#000000", water: "#000000", concrete: "#000000", trackpad: "#ffffff" } },
     },
 };
 /**
@@ -115,22 +143,24 @@ const HIGH_CONTRAST = {
  * import { LOOKS, drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
  * const svg = drawKyogijo({ sport: "nhl", look: "chalkboard" });
  * console.log(Object.keys(LOOKS).length, svg.includes('data-palette="chalkboard"'));
- * // 7 true
+ * // 8 true
  * ```
  */
-export const LOOKS = { grass: GRASS, night: NIGHT, chalkboard: CHALKBOARD, blueprint: BLUEPRINT, print: PRINT, broadcast: BROADCAST, "high-contrast": HIGH_CONTRAST };
+export const LOOKS = { grass: GRASS, night: NIGHT, chalkboard: CHALKBOARD, blueprint: BLUEPRINT, print: PRINT, broadcast: BROADCAST, "high-contrast": HIGH_CONTRAST, "line-drawing": LINE_DRAWING };
 /** The names of the looks, in the order a menu lists them. */
 export const LOOK_NAMES = Object.freeze(Object.keys(LOOKS));
 /** True when a value names a look. */
 export const isLook = (value) => typeof value === "string" && Object.prototype.hasOwnProperty.call(LOOKS, value);
 /** What the net sports' courts paint besides the surface and the apron, when a look does not say: the free zone in the second tone, a painted area in the key's, the net in the line's. */
 const withNet = (palette) => ({ free: palette.alt, area: palette.key, net: palette.line, ...palette });
+/** What an athletics stadium paints besides the surface and the apron, when a look does not say: the track in the dirt's colour, the sand and the concrete in the boards', the mat in the court's, the water in the crease's, the pads in the ink. */
+const withTrack = (palette) => ({ track: palette.dirt, sand: palette.boards, mat: palette.court, water: palette.crease, concrete: palette.boards, pad: palette.ink, ...palette });
 /** A look's palette for a sport in one mode: the look's base with what the sport's group changes. */
 export function lookPalette(look, mode, sport) {
     const m = LOOKS[look][mode];
     const group = groupOf(sport);
     const merged = { ...m.base, ...(group === undefined ? {} : m.groups?.[group]) };
-    return group === "net" ? withNet(merged) : merged;
+    return group === "net" ? withNet(merged) : group === "athletics" ? withTrack(merged) : merged;
 }
 /**
  * The pairs of a palette that must read: what is painted on what, as `[ink, ground, least contrast]` (WCAG 2.2's 3:1 for a line, 4.5:1 for text). The words
@@ -146,6 +176,8 @@ export const LOOK_PAIRS = {
     soccer: [["line", "surface", 3], ["line", "alt", 3], ["line", "court", 3]],
     curling: [["line", "surface", 3], ["hog", "surface", 3], ["hack", "surface", 3]],
     net: [["line", "surface", 3], ["line", "free", 3], ["line", "area", 3]],
+    pool: [["line", "surface", 3], ["line", "alt", 3]],
+    athletics: [["line", "surface", 3], ["line", "track", 3]],
 };
 /** The contrast ratio of two colours (WCAG 2.2): 1 to 21, or `undefined` when a colour cannot be read without a browser. */
 export function contrastOf(a, b) {
@@ -163,12 +195,13 @@ const declarations = (palette) => Object.keys(palette)
 /** The rules of one mode of one look, for the base and each group, behind a selector that says which mode it is. */
 function modeRules(name, mode, wrap) {
     const out = [`${wrap(`.kyogijo[data-palette=${name}]`)}{${declarations(mode.base)}}`];
-    const groups = new Set([...Object.keys(mode.groups ?? {}), "net"]);
+    const groups = new Set([...Object.keys(mode.groups ?? {}), "net", "athletics"]);
     for (const group of groups) {
         const palette = mode.groups?.[group] ?? {};
         // A net sport's court has three colours the other surfaces have not: the group's rule carries them, made from the base where the look gives none.
         const net = group === "net" ? withNet({ ...mode.base, ...palette }) : {};
-        const written = group === "net" ? { ...palette, free: net.free, area: net.area, net: net.net } : palette;
+        const track = group === "athletics" ? withTrack({ ...mode.base, ...palette }) : {};
+        const written = group === "net" ? { ...palette, free: net.free, area: net.area, net: net.net } : group === "athletics" ? { ...palette, track: track.track, sand: track.sand, mat: track.mat, water: track.water, concrete: track.concrete, trackpad: track.pad } : palette;
         out.push(`${wrap(GROUP_SPORTS[group].map((sport) => `.kyogijo[data-palette=${name}][data-sport=${sport}]`).join(","))}{${declarations(written)}}`);
     }
     return out;

package/dist/outline.d.ts

@@ -22,4 +22,4 @@ export declare const frameSizeOf: (o: Pick<SurfaceOptions, "sport" | "league">,
     unit: "ft";
 } | undefined;
 /** The outline of the surface the options draw. */
-export declare function outlineOf(o: Pick<SurfaceOptions, "sport" | "park" | "fence" | "units" | "pitch" | "league" | "year" | "sheet" | "net"> & Partial<Pick<SurfaceOptions, "field" | "detail">>): Outline;
+export declare function outlineOf(o: Pick<SurfaceOptions, "sport" | "park" | "fence" | "units" | "pitch" | "league" | "year" | "sheet" | "net"> & Partial<Pick<SurfaceOptions, "field" | "detail" | "pool" | "athletics" | "skating" | "budo" | "dojo" | "arena">>): Outline;

package/dist/outline.js

@@ -2,6 +2,7 @@
 // a ballpark's x is across the field and its y minus the distance out from home plate): where a data layer is cut, and the size
 // its marks follow.
 import { FEET_PER_METRE, FOOTBALL, NBA, NHL, footballLength, surfaceSize } from "./geometry.js";
+import { arenaById, arenaCourtIn, arenaRinkIn } from "./arenas.js";
 import { chooseLeague, courtOf, diamondOf, fieldOf, rinkOf } from "./leagues.js";
 import { diamondFence } from "./leagues/baseball.js";
 import { fenceFor, parkById } from "./parks.js";
@@ -14,6 +15,10 @@ import { courtFor, courtSize, isNetSport } from "./court.js";
 import { fieldPlan, isFieldSport } from "./fields.js";
 import { inOutline, outlineD } from "./fields.kit.js";
 import { sheetFor } from "./sheet.js";
+import { isPoolSport, poolBox } from "./pool.js";
+import { athleticsPlan } from "./athletics/plan.js";
+import { skatingPlan } from "./skating/plan.js";
+import { budoPlan, isBudoSport } from "./budo/plan.js";
 const inBox = (box, x, y) => x >= box.x && x <= box.x + box.w && y >= box.y && y <= box.y + box.h;
 const rect = (w, h) => {
     const box = { x: 0, y: 0, w, h };
@@ -31,7 +36,7 @@ function inPolygon(points, x, y) {
     return inside;
 }
 /** The size a provider's frame is fitted to: the drawn surface's own `box`, for a soccer pitch, a curling sheet, a net sport's court and a league's surface; none for a sport's own fixed one. */
-export const frameSizeOf = (o, box) => o.sport === "soccer" || o.sport === "curling" || isNetSport(o.sport) || isFieldSport(o.sport) || chooseLeague(o).league !== undefined ? { length: box.w, width: box.h, unit: "ft" } : undefined;
+export const frameSizeOf = (o, box) => o.sport === "soccer" || o.sport === "curling" || isNetSport(o.sport) || isFieldSport(o.sport) || isPoolSport(o.sport) || o.sport === "athletics" || o.sport === "skating" || isBudoSport(o.sport) || chooseLeague(o).league !== undefined ? { length: box.w, width: box.h, unit: "ft" } : undefined;
 /** The outline of the surface the options draw. */
 export function outlineOf(o) {
     const { sport, league } = chooseLeague(o);
@@ -47,7 +52,8 @@ export function outlineOf(o) {
         }
         case "nhl": {
             const rink = league?.family === "hockey" ? rinkOf(league, o.year) : undefined;
-            const [length, width, r] = rink === undefined ? [NHL.length, NHL.width, NHL.cornerRadius] : [rink.length, rink.width, rink.cornerRadius];
+            const sized = league === undefined ? arenaRinkIn(arenaById(o.arena), o.year) : undefined;
+            const [length, width, r] = rink !== undefined ? [rink.length, rink.width, rink.cornerRadius] : sized !== undefined ? [sized.length, sized.width, NHL.cornerRadius] : [NHL.length, NHL.width, NHL.cornerRadius];
             const box = { x: 0, y: 0, w: length, h: width };
             // A rectangle with quarter-circle corners: outside only when a point is in a corner's square but beyond its arc.
             const contains = (x, y) => {
@@ -64,7 +70,8 @@ export function outlineOf(o) {
                 const court = courtOf(league, o.year);
                 return rect(court.length, court.width);
             }
-            return rect(NBA.length, NBA.width);
+            const sized = league === undefined ? arenaCourtIn(arenaById(o.arena), o.year) : undefined;
+            return sized === undefined ? rect(NBA.length, NBA.width) : rect(sized.length, sized.width);
         }
         case "mlb": {
             const generic = league?.family === "baseball" ? diamondFence(diamondOf(league, o.year)) : undefined;
@@ -89,7 +96,14 @@ export function outlineOf(o) {
         case "volleyball":
         case "badminton":
         case "pickleball":
-        case "tabletennis": {
+        case "tabletennis":
+        case "padel":
+        case "squash":
+        case "racquetball":
+        case "sepaktakraw":
+        case "teqball":
+        case "roundnet":
+        case "netball": {
             const { length, width } = courtSize(courtFor({ ...o, sport }));
             return rect(length, width);
         }
@@ -103,6 +117,34 @@ export function outlineOf(o) {
             const plan = fieldPlan({ ...o, sport });
             return { d: outlineD(plan.length, plan.width, plan.outline), box: { x: 0, y: 0, w: plan.length, h: plan.width }, contains: (x, y) => inOutline(plan.length, plan.width, plan.outline, x, y) };
         }
+        case "swimming":
+        case "waterpolo":
+        case "diving":
+        case "artisticswimming": {
+            // The water of the pool: the deck round it is the margin. A natatorium's is the whole hall.
+            const { w, h } = poolBox({ ...o, sport });
+            return rect(w, h);
+        }
+        case "skating": {
+            const plan = skatingPlan(o);
+            const k = 1 / 0.3048;
+            return rect((plan.box.x1 - plan.box.x0) * k, (plan.box.y1 - plan.box.y0) * k);
+        }
+        case "judo":
+        case "karate":
+        case "kendo":
+        case "sumo":
+        case "kyudo":
+        case "dojo": {
+            const plan = budoPlan({ ...o, sport, detail: o.detail });
+            const k = 1 / 0.3048;
+            return rect((plan.box.x1 - plan.box.x0) * k, (plan.box.y1 - plan.box.y0) * k);
+        }
+        case "athletics": {
+            const plan = athleticsPlan(o);
+            const k = 1 / 0.3048;
+            return rect((plan.box.x1 - plan.box.x0) * k, (plan.box.y1 - plan.box.y0) * k);
+        }
         default: {
             // A surface added later with one size is a rectangle until it says otherwise.
             const size = surfaceSize(o.sport, "ft");

package/dist/pageant.d.ts

@@ -0,0 +1,120 @@
+import type { Outline } from "./outline.ts";
+import type { Surface } from "./surfaces/surface.ts";
+import type { PageantStyle, Side, Sport, SurfaceOptions, Team } from "./types.ts";
+/** The border band of a carpet, as a share of its shorter side: the least, the most and the usual. */
+export declare const PAGEANT_BORDER: {
+    readonly min: 0.02;
+    readonly max: 0.15;
+    readonly usual: 0.06;
+};
+/** The least and the most a carpet or a stage is scaled to, as a share of the room its half gives it. */
+export declare const PAGEANT_SCALE: {
+    readonly min: 0.4;
+    readonly max: 1;
+};
+/** The ratio of a carpet's width over its height: a flag of 3 to 2 unless the team or its SVG says otherwise, held between a square and 3 to 1. */
+export declare const PAGEANT_RATIO: {
+    readonly min: 1;
+    readonly max: 3;
+    readonly usual: 1.5;
+};
+/** How far a filled carpet's ratio may differ from its flag's, as a factor either way: the art is stretched and cropped by its square root. */
+export declare const PAGEANT_FILL_LIMIT = 1.75;
+/** What a pageant is, with every choice made. */
+export interface Pageant {
+    style: PageantStyle;
+    border: "dark" | "team" | string;
+    borderWidth: number;
+    fabric: boolean;
+    lines: "over" | "under" | "through";
+    ring: "gold" | "team" | string;
+    emblem?: {
+        href: string;
+        shape: "round" | "plain";
+        fit: "contain" | "cover";
+        name?: string;
+    };
+    /** Where the score goes: the plate in the middle, the compact strip under the drawing, or `auto`, which the drawing decides once it has laid the pictures out (`autoScore`). */
+    score: "auto" | "centre" | "strip";
+    scale: number;
+    fit: "fill" | "ratio";
+    names: boolean | undefined;
+    animate: "none" | "unfurl" | "fade";
+}
+/** The sports whose score is a plate that a pageant can shrink: a curling sheet's and a net court's boards are drawn to the room they are given and are not. */
+export declare const plateShrinks: (sport: Sport) => boolean;
+/**
+ * What the options ask of a pageant, or `undefined` for none: `pageant` unset or `false`, a drawing with no score, one of the badge size, or a special game. A choice that is not one of
+ * the values is the default's; a colour must pass `safeColour`, the emblem `safeLogo`, a number is held to its range.
+ */
+export declare function pageantOf(o: SurfaceOptions & {
+    home?: unknown;
+    away?: unknown;
+    size?: unknown;
+}): Pageant | undefined;
+/** How wide a team's carpet is for its height: the team's `logoRatio`, else its SVG logo's own, else 3 to 2; held between a square and 3 to 1. */
+export declare function ratioOf(team: Pick<Team, "logo" | "logoRatio">): number;
+/** A team as the pageant lays it out: a picture or none, its colours and the ratio of its carpet. */
+export interface PageantTeam {
+    side: Side;
+    role: "home" | "away";
+    name: string;
+    abbr: string;
+    state: "win" | "lose" | "none";
+    href: string | undefined;
+    /** `cover` fills a carpet or a stage with the picture, `contain` shows it whole on a plain ground. */
+    fit: "cover" | "contain";
+    ratio: number;
+    color: string | undefined;
+    ink: string | undefined;
+}
+/** One picture's place, in the surface's frame and in the eye's: the centre, and the size as the eye sees it (a stage's `r` is its radius). */
+export interface Placed {
+    team: PageantTeam;
+    /** The place it fills: the first (left) or the second (right) of the surface. */
+    spot: "left" | "right";
+    cx: number;
+    cy: number;
+    w: number;
+    h: number;
+    r?: number;
+    /** A carpet that fills its room: its art is fitted to it by stretching and cropping, not by its own ratio. */
+    filled?: boolean;
+}
+/** Where everything of a pageant goes. */
+export interface PageantLayout {
+    pictures: Placed[];
+    emblem?: {
+        cx: number;
+        cy: number;
+        r: number;
+    };
+    /** The size the plate is drawn at in the middle, as a share of its own. */
+    plateScale: number;
+}
+/** What the layout is given besides the surface. */
+export interface LayoutInput {
+    pageant: Pageant;
+    surface: Surface;
+    outline: Outline;
+    left: PageantTeam;
+    right: PageantTeam;
+    /** True when the drawing lies tall: the halves are then the top and the bottom as the eye sees them, and each picture is turned back upright. */
+    turned: boolean;
+    sport: Sport;
+    /** True when the plate is drawn in the middle of the surface (a full-size score with its score in the centre). */
+    plate: boolean;
+}
+/**
+ * Where each team's picture and the emblem go. A picture is sized to the room its half gives it (less a margin) at its own ratio, and is moved in until it lies inside the surface's outline
+ * (a rink's rounded corners, a ballpark's fence, an oval's curve). The middle is kept clear of the emblem and of the plate: the pictures are narrower where they must be.
+ * @returns `undefined` when the surface has no playing area to lay a picture on.
+ */
+export declare function pageantLayout(input: LayoutInput): PageantLayout | undefined;
+/** How much of their width the pictures must keep with the plate in the middle, against without it, before the plate in the middle gives way to the strip. */
+export declare const PLATE_COST = 0.7;
+/**
+ * Where the score goes when the options say `auto` and there is no emblem or board: the plate stays in the middle if the pictures lose little of their size to it, otherwise the score
+ * goes to the strip under the drawing and the pictures take the room.
+ */
+export declare function autoScore(input: LayoutInput): "centre" | "strip";

package/dist/pageant.draw.d.ts

@@ -0,0 +1,21 @@
+import type { Pageant, PageantLayout } from "./pageant.ts";
+/** What a drawing gives the pageant to draw with. */
+export interface PageantDraw {
+    /** The prefix of the ids: unique in the drawing. */
+    id: string;
+    turned: boolean;
+    /** Small, or `detail: "simple"`: no fabric, no hairlines, no name pills. */
+    simple: boolean;
+    parts: boolean;
+}
+/** The pictures of a pageant: each team's carpet or stage, drawn in its place. Under the surface's lines (`lines: "over"`) or over them (`"under"`). */
+export declare function picturesMarkup(layout: PageantLayout, p: Pageant, o: PageantDraw): {
+    markup: string;
+    defs: string;
+    names: string;
+};
+/** The emblem: a competition's picture or a trophy on a disc with a ring in the centre circle, or as it is for a cut-out. */
+export declare function emblemMarkup(layout: PageantLayout, p: Pageant, o: PageantDraw): {
+    markup: string;
+    defs: string;
+};

package/dist/pageant.draw.js

@@ -0,0 +1,171 @@
+// The pageant drawn: a carpet (a flag or logo laid flat, with a border band and a gentle fabric of light and shade) or a stage (a crest on a round disc with a ring) for each team, and the
+// emblem on a disc in the centre. Every picture is drawn in the eye's frame (its group is turned back when the drawing lies tall), so a flag is always the right way up for a reader.
+import { inkOn } from "./colour.js";
+import { el, esc, num } from "./format.js";
+import { roundMarkup } from "./mark.js";
+import { LINE_HEIGHT, fitLines } from "./text.js";
+/** The gold of a stage's ring, light to dark to light, as a gradient across the disc. */
+const GOLD = [[0, "#f7e6a6"], [0.3, "#d8ae4a"], [0.62, "#a67a1d"], [1, "#ecca6c"]];
+const gradient = (id, x1, y1, x2, y2, stops) => el("linearGradient", { id, gradientUnits: "userSpaceOnUse", x1: num(x1), y1: num(y1), x2: num(x2), y2: num(y2) }, stops.map(([offset, colour, opacity]) => el("stop", { offset: num(offset), style: `stop-color:${colour}${opacity === undefined ? "" : `;stop-opacity:${num(opacity)}`}` })).join(""));
+/**
+ * The fabric of a carpet: two gentle waves of light and of shade, as linear gradients across it at slightly different angles, fixed numbers and no random. They lie over the picture at
+ * a few hundredths of opacity, so that a flag reads as cloth and its colours stay its own.
+ */
+function fabric(id, w, h) {
+    const light = [0, 0.1, 0, 0.07, 0, 0.1, 0, 0.06, 0];
+    const shade = [0.07, 0, 0.09, 0, 0.06, 0, 0.09, 0, 0.05];
+    const stops = (values, colour) => values.map((v, i) => [i / (values.length - 1), colour, v]);
+    const defs = gradient(`${id}-a`, -w / 2, -h * 0.28, w / 2, h * 0.28, stops(light, "#fff")) + gradient(`${id}-b`, -w * 0.46, h * 0.34, w * 0.5, -h * 0.3, stops(shade, "#000"));
+    return { defs, markup: (x, y, cw, ch) => el("rect", { class: "ky-pg-fabric", x: num(x), y: num(y), width: num(cw), height: num(ch), fill: `url(#${id}-a)` }) + el("rect", { class: "ky-pg-fabric", x: num(x), y: num(y), width: num(cw), height: num(ch), fill: `url(#${id}-b)` }) };
+}
+/** The group a picture lies in: moved to its centre and turned back upright when the drawing lies tall. */
+function standing(cx, cy, turned, classes, inner, o, part, title, data = {}) {
+    return el("g", { class: classes, transform: `translate(${num(cx)} ${num(cy)})${turned ? " rotate(-90)" : ""}`, part: o.parts ? part : undefined, "data-pg": "1", ...data }, (title === undefined ? "" : `<title>${esc(title)}</title>`) + el("g", { class: "ky-pg-art" }, inner));
+}
+const colourVars = (team) => {
+    const parts = [team.color === undefined ? undefined : `--c:${team.color}`, team.ink === undefined && team.color === undefined ? undefined : `--ci:${team.ink ?? inkOn(team.color)}`].filter((part) => part !== undefined);
+    return parts.length === 0 ? undefined : parts.join(";");
+};
+/** A team's name on its picture, in a pill straddling the picture's lower edge. */
+function pill(team, w, h, bottom, simple) {
+    if (simple)
+        return "";
+    const ph = Math.max(h * 0.17, 0.2);
+    const fit = fitLines(team.name, w * 0.78, ph * 0.62, ph * 0.46);
+    const pw = Math.min(w * 0.92, fit.width + ph * 1.1);
+    return el("g", { class: "ky-pg-label" }, el("rect", { class: "ky-pg-pill", x: num(-pw / 2), y: num(bottom - ph / 2), width: num(pw), height: num(ph), rx: num(ph / 2) }) + el("text", { class: "ky-text ky-pg-pilltext", x: 0, y: num(bottom + fit.size * 0.36), "font-size": num(fit.size) }, esc(fit.lines[0])));
+}
+/** The words of a team with no picture, on a band across its carpet: its name, or its letters when the name would be too small to read. */
+function bandText(team, w, bandH) {
+    const fit = fitLines(team.name, w * 0.88, bandH * 0.82, bandH * 0.6);
+    const small = fit.size < bandH * 0.22;
+    const lines = small ? [team.abbr] : fit.lines;
+    const size = small ? Math.min(bandH * 0.6, (w * 0.8) / Math.max(1, [...team.abbr].length * 0.75)) : fit.size;
+    const step = size * LINE_HEIGHT;
+    return lines.map((row, i) => el("text", { class: "ky-text ky-pg-name", x: 0, y: num((i - (lines.length - 1) / 2) * step + size * 0.36), "font-size": num(size) }, esc(row))).join("");
+}
+/** A carpet: the border band, then the picture at its own ratio, then the fabric. */
+function carpet(pl, p, o, names) {
+    const { team, w, h } = pl;
+    const b = Math.min(w, h) * p.borderWidth;
+    const x = -w / 2 + b;
+    const y = -h / 2 + b;
+    const iw = w - 2 * b;
+    const ih = h - 2 * b;
+    const base = `${o.id}-pg-${pl.spot}`;
+    let defs = el("clipPath", { id: `${base}-c` }, el("rect", { x: num(x), y: num(y), width: num(iw), height: num(ih) }));
+    const borderFill = p.border === "dark" ? undefined : p.border === "team" ? team.color : p.border;
+    let inner = "";
+    const drop = Math.min(w, h) * 0.03;
+    inner += el("rect", { class: "ky-pg-shadow", x: num(-w / 2 + drop * 0.6), y: num(-h / 2 + drop), width: num(w), height: num(h), rx: num(Math.min(w, h) * 0.012) });
+    inner += el("rect", { class: "ky-pg-border", x: num(-w / 2), y: num(-h / 2), width: num(w), height: num(h), style: borderFill === undefined ? undefined : `fill:${borderFill}` });
+    let picture = "";
+    let top;
+    if (team.href !== undefined && team.fit !== "contain") {
+        if (pl.filled === true) {
+            // Made to the size of the half: the art is stretched and cropped to fit, each by the square root of how far the carpet's shape is from the flag's.
+            const shape = Math.sqrt(team.ratio * (iw / ih));
+            const wb = Math.max(iw, ih * shape);
+            picture += el("image", { class: "ky-logo ky-pg-picture", href: team.href, x: num(-wb / 2), y: num(-wb / shape / 2), width: num(wb), height: num(wb / shape), preserveAspectRatio: "none" });
+        }
+        else
+            picture += el("image", { class: "ky-logo ky-pg-picture", href: team.href, x: num(x), y: num(y), width: num(iw), height: num(ih), preserveAspectRatio: "xMidYMid slice" });
+    }
+    else if (team.href !== undefined) {
+        const pad = Math.min(iw, ih) * 0.1;
+        picture += el("rect", { class: "ky-pg-plain", x: num(x), y: num(y), width: num(iw), height: num(ih), style: colourVars(team)?.split(";")[0] });
+        picture += el("image", { class: "ky-logo ky-pg-picture", href: team.href, x: num(x + pad), y: num(y + pad), width: num(iw - 2 * pad), height: num(ih - 2 * pad), preserveAspectRatio: "xMidYMid meet" });
+    }
+    else {
+        // No flag or logo: the team's colours as a carpet of two, with its name across a band.
+        const band = ih * 0.38;
+        picture += el("rect", { class: "ky-pg-ground", x: num(x), y: num(y), width: num(iw), height: num(ih), style: colourVars(team) });
+        picture += el("rect", { class: "ky-pg-band", x: num(x), y: num(-band / 2), width: num(iw), height: num(band), style: colourVars(team) });
+        // The name is written over the surface's lines, whichever way they lie, so that a crease or a net does not cross it.
+        if (p.names !== false)
+            top = el("g", { style: colourVars(team) }, bandText(team, iw, band));
+    }
+    inner += el("g", { "clip-path": `url(#${base}-c)` }, picture);
+    if (p.fabric && !o.simple) {
+        const f = fabric(`${base}-f`, iw, ih);
+        defs += f.defs;
+        inner += el("g", { "clip-path": `url(#${base}-c)` }, f.markup(x, y, iw, ih));
+    }
+    if (!o.simple) {
+        inner += el("rect", { class: "ky-pg-seam", x: num(x), y: num(y), width: num(iw), height: num(ih), "stroke-width": num(Math.max(Math.min(w, h) * 0.006, 0.08)) });
+        inner += el("rect", { class: "ky-pg-edge", x: num(-w / 2), y: num(-h / 2), width: num(w), height: num(h), "stroke-width": num(Math.max(Math.min(w, h) * 0.005, 0.06)) });
+    }
+    if (names && team.href !== undefined)
+        inner += pill(team, w, h, h / 2, o.simple);
+    return { markup: inner, defs, top };
+}
+/** A stage: the ring (gold, the team's colour or a colour of the caller's), a dark disc, and the crest in a circle on it. */
+function stage(pl, p, o, names) {
+    const { team } = pl;
+    const R = pl.r ?? pl.w / 2;
+    const base = `${o.id}-pg-${pl.spot}`;
+    let defs = "";
+    let ringFill;
+    if (p.ring === "gold") {
+        defs += gradient(`${base}-g`, -R, -R, R, R, GOLD.map(([offset, colour]) => [offset, colour]));
+        ringFill = `url(#${base}-g)`;
+    }
+    else
+        ringFill = p.ring === "team" ? (team.color ?? "#c9a24a") : p.ring;
+    let inner = "";
+    inner += el("circle", { class: "ky-pg-shadow", cx: num(R * 0.03), cy: num(R * 0.06), r: num(R) });
+    inner += el("circle", { class: "ky-pg-ringband", cx: 0, cy: 0, r: num(R), fill: ringFill });
+    if (!o.simple)
+        inner += el("circle", { class: "ky-pg-groove", cx: 0, cy: 0, r: num(R * 0.925), "stroke-width": num(Math.max(R * 0.012, 0.06)) });
+    inner += el("circle", { class: "ky-pg-disc", cx: 0, cy: 0, r: num(R * 0.9) });
+    inner += roundMarkup({ id: base, cx: 0, cy: 0, r: R * 0.8, href: team.href, fit: team.fit, initials: team.abbr, color: team.color, ink: team.ink, ring: Math.max(R * 0.025, 0.08) });
+    if (!o.simple)
+        inner += el("circle", { class: "ky-pg-edge", cx: 0, cy: 0, r: num(R), "stroke-width": num(Math.max(R * 0.006, 0.05)) });
+    if (names)
+        inner += pill(team, 2 * R, 2 * R, R * 0.98, o.simple);
+    return { markup: inner, defs };
+}
+/** The motion classes of a picture: its entrance, and the way a carpet rolls out. */
+const motion = (p, kind, tall) => (p.animate === "none" ? "" : ` ky-pg-${p.animate}${kind === "carpet" && tall ? " ky-pg-tall" : ""}`);
+/** The pictures of a pageant: each team's carpet or stage, drawn in its place. Under the surface's lines (`lines: "over"`) or over them (`"under"`). */
+export function picturesMarkup(layout, p, o) {
+    let markup = "";
+    let defs = "";
+    let tops = "";
+    for (const placed of layout.pictures) {
+        const { team } = placed;
+        // Only a team with no flag or logo has its name on its picture, unless the options ask for names.
+        const names = p.names ?? false;
+        const made = p.style === "stage" ? stage(placed, p, o, names) : carpet(placed, p, o, names);
+        defs += made.defs;
+        const classes = `ky-pg ky-pg-${p.style} ky-pg-${placed.spot}${motion(p, p.style, o.turned)}`;
+        markup += standing(placed.cx, placed.cy, o.turned, classes, made.markup, o, `pageant ${team.role}`, team.name, { "data-team": team.role, "data-state": team.state });
+        if (made.top !== undefined)
+            tops += standing(placed.cx, placed.cy, o.turned, `ky-pg ky-pg-words ky-pg-${placed.spot}${motion(p, p.style, o.turned)}`, made.top, o, undefined, undefined, { "data-team": team.role });
+    }
+    return { markup: `<g class="ky-pageant"${p.lines === "through" ? ' opacity=".9"' : ""}>${markup}</g>`, defs, names: tops };
+}
+/** The emblem: a competition's picture or a trophy on a disc with a ring in the centre circle, or as it is for a cut-out. */
+export function emblemMarkup(layout, p, o) {
+    const place = layout.emblem;
+    const emblem = p.emblem;
+    if (place === undefined || emblem === undefined)
+        return { markup: "", defs: "" };
+    const R = place.r;
+    const base = `${o.id}-pg-emblem`;
+    let defs = "";
+    let inner;
+    if (emblem.shape === "plain") {
+        inner = el("ellipse", { class: "ky-pg-shadow", cx: 0, cy: num(R * 0.78), rx: num(R * 0.62), ry: num(R * 0.13) }) + el("image", { class: "ky-logo ky-pg-emblem-image", href: emblem.href, x: num(-R * 1.05), y: num(-R * 1.05), width: num(R * 2.1), height: num(R * 2.1), preserveAspectRatio: "xMidYMid meet" });
+    }
+    else {
+        defs += gradient(`${base}-g`, -R, -R, R, R, GOLD.map(([offset, colour]) => [offset, colour]));
+        inner = el("circle", { class: "ky-pg-shadow", cx: num(R * 0.03), cy: num(R * 0.06), r: num(R) });
+        inner += el("circle", { class: "ky-pg-ringband", cx: 0, cy: 0, r: num(R), fill: `url(#${base}-g)` });
+        inner += el("circle", { class: "ky-pg-light", cx: 0, cy: 0, r: num(R * 0.9) });
+        inner += roundMarkup({ id: base, cx: 0, cy: 0, r: R * 0.82, href: emblem.href, fit: emblem.fit, ring: Math.max(R * 0.02, 0.06) });
+        if (!o.simple)
+            inner += el("circle", { class: "ky-pg-edge", cx: 0, cy: 0, r: num(R), "stroke-width": num(Math.max(R * 0.006, 0.05)) });
+    }
+    return { markup: standing(place.cx, place.cy, o.turned, `ky-pg ky-pg-emblem${p.animate === "none" ? "" : ` ky-pg-${p.animate}`}`, inner, o, "emblem", emblem.name), defs };
+}