@johnmorrisdotca/kyogijo-stadiums 0.0.0-stage → 0.4.0

package/dist/colour.js

@@ -0,0 +1,97 @@
+const HEX = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const FUNCTION = /^(?:rgb|hsl)a?\(\s*[-+0-9.%\s,/]+(?:deg|turn|rad)?[-+0-9.%\s,/]*\)$/i;
+const VARIABLE = /^var\(\s*--[a-z0-9_-]+\s*\)$/i;
+const NAME = /^[a-z]{3,24}$/i;
+/**
+ * The colour as it may be written into a style attribute, or `undefined`. A hex colour, `rgb()`, `rgba()`, `hsl()`,
+ * `hsla()`, a colour name or `var(--name)` is drawn; anything else is ignored, so nothing from a form or an address
+ * can end the attribute or add a rule.
+ * @example
+ * ```ts
+ * import { safeColour } from "@johnmorrisdotca/kyogijo-stadiums";
+ * console.log(safeColour("#1f5fa8"), safeColour("red;fill:url(x)"));
+ * // #1f5fa8 undefined
+ * ```
+ */
+export function safeColour(value) {
+    if (typeof value !== "string")
+        return undefined;
+    const text = value.trim();
+    if (text.length === 0 || text.length > 64)
+        return undefined;
+    if (HEX.test(text) || FUNCTION.test(text) || VARIABLE.test(text) || NAME.test(text))
+        return text;
+    return undefined;
+}
+const NAMED = {
+    white: [255, 255, 255], black: [0, 0, 0], red: [255, 0, 0], green: [0, 128, 0], blue: [0, 0, 255], yellow: [255, 255, 0], orange: [255, 165, 0],
+    gold: [255, 215, 0], navy: [0, 0, 128], maroon: [128, 0, 0], purple: [128, 0, 128], teal: [0, 128, 128], gray: [128, 128, 128], grey: [128, 128, 128],
+    silver: [192, 192, 192], crimson: [220, 20, 60], royalblue: [65, 105, 225], darkgreen: [0, 100, 0], lightblue: [173, 216, 230], pink: [255, 192, 203],
+};
+/** The red, green and blue of a colour, when it can be read without a browser (a hex colour, `rgb()` or a common name). */
+export function rgbOf(value) {
+    if (value === undefined)
+        return undefined;
+    const text = value.trim().toLowerCase();
+    const named = NAMED[text];
+    if (named !== undefined)
+        return named;
+    const hex = /^#([0-9a-f]{3,8})$/.exec(text)?.[1];
+    if (hex !== undefined) {
+        const full = hex.length <= 4 ? [...hex].map((c) => c + c).join("") : hex;
+        if (full.length < 6)
+            return undefined;
+        return [parseInt(full.slice(0, 2), 16), parseInt(full.slice(2, 4), 16), parseInt(full.slice(4, 6), 16)];
+    }
+    const rgb = /^rgba?\(\s*(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?)[\s,]+(\d+(?:\.\d+)?)/.exec(text);
+    if (rgb !== null)
+        return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+    return undefined;
+}
+/** The relative luminance of a colour, 0 (black) to 1 (white). */
+export function luminance(rgb) {
+    const [r, g, b] = rgb.map((channel) => {
+        const c = channel / 255;
+        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** White or near-black, whichever reads better on the colour. White when the colour cannot be read. */
+export function inkOn(color) {
+    const rgb = rgbOf(color);
+    if (rgb === undefined)
+        return "#ffffff";
+    return luminance(rgb) > 0.4 ? "#161a18" : "#ffffff";
+}
+/**
+ * A logo's address as it may be written into an image's `href`, or `undefined`. An `https:` or `http:` address, a
+ * relative path, an image `data:` address, or an SVG document as text (written as an image, which cannot run scripts).
+ * @example
+ * ```ts
+ * import { safeLogo } from "@johnmorrisdotca/kyogijo-stadiums";
+ * console.log(safeLogo("https://example.com/gulls.svg"), safeLogo("javascript:alert(1)"));
+ * // https://example.com/gulls.svg undefined
+ * ```
+ */
+export function safeLogo(value) {
+    if (typeof value !== "string")
+        return undefined;
+    const text = value.trim();
+    if (text.length === 0)
+        return undefined;
+    if (/^(?:<\?xml|<svg)\b/i.test(text)) {
+        if (text.length > 200000)
+            return undefined;
+        return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(text)}`;
+    }
+    if (text.length > 300000)
+        return undefined;
+    if (/^data:image\/(?:png|jpe?g|gif|webp|avif|svg\+xml)[;,]/i.test(text))
+        return text;
+    if (/^https?:\/\/[^\s"'<>]+$/i.test(text))
+        return text;
+    // A relative path has no scheme: no colon before the first slash.
+    if (/^[^\s"'<>:]*(?:\/[^\s"'<>]*)?$/.test(text) && !/^[a-z][a-z0-9+.-]*:/i.test(text) && !text.startsWith("//"))
+        return text;
+    return undefined;
+}

package/dist/common.d.ts

@@ -0,0 +1,14 @@
+import type { SurfaceOptions } from "./types.ts";
+import { type Unit } from "./units.ts";
+/** Text made safe for a class name or an id: letters, digits, underscores, spaces and hyphens. */
+export declare const safeClass: (text: string | undefined) => string;
+/** The prefix of the ids inside a drawing: the `id` option, or a hash of the options, so that the same call gives the same drawing. */
+export declare const drawingId: (o: SurfaceOptions) => string;
+/** True when a drawing with these options lies in portrait. */
+export declare function isPortrait(o: Pick<SurfaceOptions, "orientation" | "aspect"> & {
+    sport?: SurfaceOptions["sport"];
+}): boolean;
+/** The unit the options' lengths are in: `units`, or feet when it is missing. A unit that is not one is an error, not feet. */
+export declare function lengthUnit(o: Pick<SurfaceOptions, "units">): Unit;
+/** The fence the options give, with each distance in feet. */
+export declare function feetFence(fence: SurfaceOptions["fence"], unit: Unit): SurfaceOptions["fence"];

package/dist/common.js

@@ -0,0 +1,32 @@
+// What the drawing and the data layers both need: the drawing's id, whether it lies tall, and the unit its lengths are in.
+// Kept apart from draw.ts so that layers.ts need not import the file that imports it.
+import { hash } from "./format.js";
+import { convertLength, isUnit } from "./units.js";
+import { VERSION } from "./version.js";
+/** Text made safe for a class name or an id: letters, digits, underscores, spaces and hyphens. */
+export const safeClass = (text) => (text ?? "").replace(/[^\w -]/g, "").trim();
+/** The prefix of the ids inside a drawing: the `id` option, or a hash of the options, so that the same call gives the same drawing. */
+export const drawingId = (o) => safeClass(o.id).replace(/ /g, "-") || `ky-${hash(JSON.stringify([o, VERSION]))}`;
+/** True when a drawing with these options lies in portrait. */
+export function isPortrait(o) {
+    if (o.orientation === "portrait")
+        return true;
+    // A curling sheet is 150 feet long and 15 wide: it lies tall unless it is asked to lie wide.
+    if (o.orientation === undefined && o.sport === "curling")
+        return true;
+    return o.orientation === "auto" && typeof o.aspect === "number" && Number.isFinite(o.aspect) && o.aspect > 0 && o.aspect < 1;
+}
+/** The unit the options' lengths are in: `units`, or feet when it is missing. A unit that is not one is an error, not feet. */
+export function lengthUnit(o) {
+    if (o.units === undefined)
+        return "ft";
+    if (!isUnit(o.units))
+        throw new Error(`Unknown units "${String(o.units)}": use one of ft, in, yd, m, cm, mm`);
+    return o.units;
+}
+/** The fence the options give, with each distance in feet. */
+export function feetFence(fence, unit) {
+    if (fence === undefined || unit === "ft")
+        return fence;
+    return Object.fromEntries(Object.entries(fence).map(([key, value]) => [key, typeof value === "number" ? convertLength(value, unit, "ft") : value]));
+}

package/dist/court.d.ts

@@ -0,0 +1,89 @@
+import { type BadmintonFigures, type BadmintonLeague, type FreeZone, type NetSport, type PickleballFigures, type PickleballLeague, type TableTennisFigures, type TableTennisLeague, type TennisFigures, type TennisLeague, type VolleyballFigures, type VolleyballLeague } from "./leagues/courts.ts";
+import type { SurfaceOptions } from "./types.ts";
+/** A rectangle as `[x0, y0, x1, y1]`, in feet. */
+export type Rect = readonly [x0: number, y0: number, x1: number, y1: number];
+/** A post, an antenna or a stick: a mark of a size, centred on a place. */
+export interface Fixture {
+    x: number;
+    y: number;
+    /** The width of a square mark, or the diameter of a round one. */
+    size: number;
+    shape: "square" | "round";
+}
+/** The net's plane in the drawing: the line x = `x`, from `y0` to `y1`. */
+export interface NetLine {
+    x: number;
+    y0: number;
+    y1: number;
+}
+/** The looks each sport has, the sport's default first. */
+export declare const LOOKS: Readonly<Record<NetSport, readonly string[]>>;
+/** True for a sport whose court is one of these. */
+export declare const isNetSport: (sport: string) => sport is NetSport;
+interface Common {
+    /** The look: a name from `LOOKS`. */
+    look: string;
+    /** The free zone drawn round the court, in feet, or `null`. */
+    zone: FreeZone;
+    /** How the free zone was asked for. */
+    free: "official" | "least" | "none";
+    /** Tennis: the singles sticks are drawn. */
+    sticks: boolean;
+}
+/** A court to draw: the sport, its league and figures (in feet), and how it is shown. */
+export type CourtPlan = (Common & {
+    sport: "tennis";
+    league: TennisLeague;
+    figures: TennisFigures;
+}) | (Common & {
+    sport: "volleyball";
+    league: VolleyballLeague;
+    figures: VolleyballFigures;
+}) | (Common & {
+    sport: "badminton";
+    league: BadmintonLeague;
+    figures: BadmintonFigures;
+}) | (Common & {
+    sport: "pickleball";
+    league: PickleballLeague;
+    figures: PickleballFigures;
+}) | (Common & {
+    sport: "tabletennis";
+    league: TableTennisLeague;
+    figures: TableTennisFigures;
+});
+/**
+ * The court the options ask for. A `league` picks the rulebook (the sport's own by default; `fivb-beach` for beach volleyball); `net.look` a named look, `net.free`
+ * the free zone, `net.sticks` the tennis singles sticks.
+ * @throws Error when the look or the free zone is not one the sport has.
+ */
+export declare function courtFor(o: Pick<SurfaceOptions, "sport" | "league" | "net">): CourtPlan;
+/** The length and the width of the court in feet: a tennis court is the doubles court. */
+export declare function courtSize(plan: CourtPlan): {
+    length: number;
+    width: number;
+};
+/** The court's lines, painted areas and fixtures, in feet. */
+export interface CourtGeometry {
+    length: number;
+    width: number;
+    /** The lines, as the rectangles they cover. */
+    lines: Rect[];
+    /** Painted areas: the non-volley zones, the volleyball front zones. */
+    areas: Rect[];
+    /** Short lines outside the court (the attack line's extension, the service zone's limits), a part of `lines` that is drawn only in the full detail. */
+    small: Rect[];
+    net: NetLine;
+    posts: Fixture[];
+    antennae: Fixture[];
+    sticks: Fixture[];
+}
+/**
+ * Where everything stands, from the figures of the league in feet. A line's rectangle covers the line's width: the court's dimensions are to the outside edge of the
+ * lines (tennis Rule 1, pickleball 3.A.2, badminton Law 1.1 and Diagram A, volleyball 1.3.2 "drawn inside the dimensions"), so an end line covers
+ * x from 0 to its width and an interior line is placed by the edge the rule measures to.
+ */
+export declare function courtGeometry(plan: CourtPlan): CourtGeometry;
+/** How far the court's fixtures reach beyond its side lines: the net's posts and the antennae's marks. */
+export declare function sideReach(geometry: CourtGeometry): number;
+export {};

package/dist/court.js

@@ -0,0 +1,248 @@
+// What a net sport's court is for a set of options: the league's figures in feet, the look, the free zone, and the lines, areas and fixtures that follow from
+// them, as plain rectangles in the frame of a drawing lying wide (x along the court from the left end line, y across it from the top side line, both in feet).
+// Kept apart from the drawing so that the outline, the description, the tests and the drawing agree. Every length that is a rulebook's figure is cited in
+// docs/sources.md; the sizes of the symbols (a post, an antenna, the net's line) are ours and are said to be.
+import { chooseLeague, netOf } from "./leagues.js";
+import { BADMINTON_LEAGUES, PICKLEBALL_LEAGUES, TABLE_TENNIS_LEAGUES, TENNIS_LEAGUES, VOLLEYBALL_LEAGUES } from "./leagues/courts.js";
+import { convertLength } from "./units.js";
+/** The looks each sport has, the sport's default first. */
+export const LOOKS = Object.freeze({
+    tennis: ["hard-blue", "hard-green", "clay", "grass"],
+    volleyball: ["wood", "blue", "sand"],
+    badminton: ["green", "blue", "wood"],
+    pickleball: ["blue-green", "green", "red"],
+    tabletennis: ["blue", "green"],
+});
+/** True for a sport whose court is one of these. */
+export const isNetSport = (sport) => sport === "tennis" || sport === "volleyball" || sport === "badminton" || sport === "pickleball" || sport === "tabletennis";
+const FREE = ["official", "least", "none"];
+/**
+ * The court the options ask for. A `league` picks the rulebook (the sport's own by default; `fivb-beach` for beach volleyball); `net.look` a named look, `net.free`
+ * the free zone, `net.sticks` the tennis singles sticks.
+ * @throws Error when the look or the free zone is not one the sport has.
+ */
+export function courtFor(o) {
+    const sport = o.sport;
+    if (!isNetSport(sport))
+        throw new Error(`"${String(sport)}" is not a net sport`);
+    const picked = chooseLeague(o).league;
+    const asked = o.net ?? {};
+    const free = asked.free === undefined ? "official" : FREE.includes(asked.free) ? asked.free : undefined;
+    if (free === undefined)
+        throw new Error(`Unknown free zone "${String(asked.free)}": use one of ${FREE.join(", ")}`);
+    const beach = picked?.family === "volleyball" && picked.id === "fivb-beach";
+    const names = LOOKS[sport];
+    const look = asked.look === undefined ? (beach ? "sand" : names[0]) : asked.look;
+    if (!names.includes(look))
+        throw new Error(`Unknown look "${String(look)}" for ${sport}: use one of ${names.join(", ")}`);
+    const common = { look, free, sticks: sport === "tennis" && asked.sticks === true };
+    const zoneOf = (zones) => (free === "none" ? null : zones[free]);
+    switch (sport) {
+        case "tennis": {
+            const league = picked?.family === "tennis" ? picked : TENNIS_LEAGUES[0];
+            const figures = netOf(league);
+            return { ...common, sport, league, figures, zone: zoneOf(figures.free) };
+        }
+        case "volleyball": {
+            const league = picked?.family === "volleyball" ? picked : VOLLEYBALL_LEAGUES[0];
+            const figures = netOf(league);
+            return { ...common, sport, league, figures, zone: zoneOf(figures.free) };
+        }
+        case "badminton": {
+            const league = picked?.family === "badminton" ? picked : BADMINTON_LEAGUES[0];
+            const figures = netOf(league);
+            return { ...common, sport, league, figures, zone: zoneOf(figures.free) };
+        }
+        case "pickleball": {
+            const league = picked?.family === "pickleball" ? picked : PICKLEBALL_LEAGUES[0];
+            const figures = netOf(league);
+            return { ...common, sport, league, figures, zone: zoneOf(figures.free) };
+        }
+        default: {
+            const league = picked?.family === "tabletennis" ? picked : TABLE_TENNIS_LEAGUES[0];
+            const figures = netOf(league);
+            return { ...common, sport: "tabletennis", league, figures, zone: zoneOf(figures.free) };
+        }
+    }
+}
+/** The length and the width of the court in feet: a tennis court is the doubles court. */
+export function courtSize(plan) {
+    const f = plan.figures;
+    return { length: f.length, width: plan.sport === "tennis" ? f.widthDoubles : f.width };
+}
+const feet = (metres) => convertLength(metres, "m", "ft");
+/**
+ * Where everything stands, from the figures of the league in feet. A line's rectangle covers the line's width: the court's dimensions are to the outside edge of the
+ * lines (tennis Rule 1, pickleball 3.A.2, badminton Law 1.1 and Diagram A, volleyball 1.3.2 "drawn inside the dimensions"), so an end line covers
+ * x from 0 to its width and an interior line is placed by the edge the rule measures to.
+ */
+export function courtGeometry(plan) {
+    switch (plan.sport) {
+        case "tennis":
+            return tennisGeometry(plan.figures, plan.sticks);
+        case "volleyball":
+            return volleyballGeometry(plan.figures, plan.free);
+        case "badminton":
+            return badmintonGeometry(plan.figures);
+        case "pickleball":
+            return pickleballGeometry(plan.figures);
+        default:
+            return tableGeometry(plan.figures);
+    }
+}
+function tennisGeometry(f, sticks) {
+    const { length: L, widthDoubles: W, widthSingles, serviceLine: S, lineWidth: w } = f;
+    const cx = L / 2;
+    const cy = W / 2;
+    const inset = (W - widthSingles) / 2;
+    const cw = f.centreServiceWidth;
+    const mw = f.centreMark.width;
+    const ml = f.centreMark.length;
+    const lines = [
+        // Baselines, doubles sidelines and singles sidelines.
+        [0, 0, w, W], [L - w, 0, L, W],
+        [0, 0, L, w], [0, W - w, L, W],
+        [0, inset, L, inset + w], [0, W - inset - w, L, W - inset],
+        // The service lines, between the singles sidelines, each 21 feet from the net to its outside edge, and the centre service line between them.
+        [cx - S, inset, cx - S + w, W - inset], [cx + S - w, inset, cx + S, W - inset],
+        [cx - S, cy - cw / 2, cx + S, cy + cw / 2],
+        // The centre marks, inside the court from each baseline.
+        [w, cy - mw / 2, w + ml, cy + mw / 2], [L - w - ml, cy - mw / 2, L - w, cy + mw / 2],
+    ];
+    const out = f.net.postsOutside;
+    return {
+        length: L,
+        width: W,
+        lines,
+        areas: [],
+        small: [],
+        net: { x: cx, y0: -out, y1: W + out },
+        posts: [{ x: cx, y: -out, size: f.net.postSize, shape: "square" }, { x: cx, y: W + out, size: f.net.postSize, shape: "square" }],
+        antennae: [],
+        sticks: sticks ? [{ x: cx, y: inset - f.net.sticksOutside, size: f.net.stickSize, shape: "square" }, { x: cx, y: W - inset + f.net.sticksOutside, size: f.net.stickSize, shape: "square" }] : [],
+    };
+}
+function volleyballGeometry(f, free) {
+    const { length: L, width: W, lineWidth: w } = f;
+    const cx = L / 2;
+    const lines = [[0, 0, w, W], [L - w, 0, L, W], [0, 0, L, w], [0, W - w, L, W]];
+    const areas = [];
+    const small = [];
+    if (f.attackLine !== null) {
+        const A = f.attackLine;
+        // The axis of the centre line is the middle of the court; each attack line's rear edge is 3 m from it.
+        lines.push([cx - w / 2, 0, cx + w / 2, W], [cx - A, 0, cx - A + w, W], [cx + A - w, 0, cx + A, W]);
+        areas.push([cx - A, 0, cx, W], [cx, 0, cx + A, W]);
+        const ext = f.attackExtension;
+        // The FIVB's competitions extend each attack line beyond the side lines by five short lines, the first 20 cm from the side line.
+        if (ext !== null && free !== "least") {
+            for (const [x0, x1] of [[cx - A, cx - A + w], [cx + A - w, cx + A]]) {
+                for (let i = 0; i < Math.round(ext.total / (ext.length + ext.gap)); i += 1) {
+                    const near = ext.gap + i * (ext.length + ext.gap);
+                    small.push([x0, -(near + ext.length), x1, -near], [x0, W + near, x1, W + near + ext.length]);
+                }
+            }
+        }
+    }
+    const marks = f.serviceMarks;
+    // The service zone is limited by two short lines in the extensions of the side lines, 20 cm behind the end line.
+    if (marks !== null) {
+        for (const [a, b] of [[-(marks.behind + marks.length), -marks.behind], [L + marks.behind, L + marks.behind + marks.length]])
+            small.push([a, 0, b, w], [a, W - w, b, W]);
+    }
+    const out = free === "least" ? f.net.postsOutsideLeast : f.net.postsOutside;
+    const half = (W - f.net.length) / 2;
+    const post = Math.max(feet(0.1), L * 0.01);
+    const antenna = Math.max(f.net.antenna.diameter, L * 0.012);
+    return {
+        length: L,
+        width: W,
+        lines,
+        areas,
+        small,
+        net: { x: cx, y0: half, y1: W - half },
+        posts: [{ x: cx, y: -out, size: post, shape: "round" }, { x: cx, y: W + out, size: post, shape: "round" }],
+        // An antenna is fixed at the outer edge of a side band, which stands directly over the side line: at the outer edge of the side line.
+        antennae: [{ x: cx, y: 0, size: antenna, shape: "round" }, { x: cx, y: W, size: antenna, shape: "round" }],
+        sticks: [],
+    };
+}
+function badmintonGeometry(f) {
+    const { length: L, width: W, lineWidth: w, singlesInset: inset, doublesLongServiceInset: ls, shortServiceLine: ss } = f;
+    const cx = L / 2;
+    const lines = [
+        [0, 0, w, W], [L - w, 0, L, W],
+        [0, 0, L, w], [0, W - w, L, W],
+        // The singles side lines: their outside edges 460 mm inside the doubles side lines' (Diagram A: 40 + 420).
+        [0, inset, L, inset + w], [0, W - inset - w, L, W - inset],
+        // The doubles long service lines: their outside edges 760 mm inside the back boundary lines'.
+        [ls, 0, ls + w, W], [L - ls - w, 0, L - ls, W],
+        // The short service lines: their edges nearer the net 1.98 m from it.
+        [cx - ss - w, 0, cx - ss, W], [cx + ss, 0, cx + ss + w, W],
+        // The centre lines, from each short service line to the back boundary.
+        [0, W / 2 - w / 2, cx - ss - w, W / 2 + w / 2], [cx + ss + w, W / 2 - w / 2, L, W / 2 + w / 2],
+    ];
+    const post = L * 0.005;
+    return {
+        length: L,
+        width: W,
+        lines,
+        areas: [],
+        small: [],
+        net: { x: cx, y0: 0, y1: W },
+        // The posts stand on the doubles side lines and do not reach into the court beyond them (Law 1.5).
+        posts: [{ x: cx, y: w - post / 2, size: post, shape: "round" }, { x: cx, y: W - w + post / 2, size: post, shape: "round" }],
+        antennae: [],
+        sticks: [],
+    };
+}
+function pickleballGeometry(f) {
+    const { length: L, width: W, lineWidth: w, nonVolley: K } = f;
+    const cx = L / 2;
+    const lines = [
+        [0, 0, w, W], [L - w, 0, L, W],
+        [0, 0, L, w], [0, W - w, L, W],
+        // The non-volley zone lines, each 7 feet from the net to its outside edge, and the centrelines from them to the baselines.
+        [cx - K, 0, cx - K + w, W], [cx + K - w, 0, cx + K, W],
+        [0, W / 2 - w / 2, cx - K, W / 2 + w / 2], [cx + K, W / 2 - w / 2, L, W / 2 + w / 2],
+    ];
+    // The posts are 22 feet apart, inside to inside, so the inside of each stands 1 foot outside a sideline; each is at most 3 inches across.
+    const gap = (f.net.postsInside - W) / 2;
+    const d = f.net.postDiameter;
+    return {
+        length: L,
+        width: W,
+        lines,
+        areas: [[cx - K, 0, cx, W], [cx, 0, cx + K, W]],
+        small: [],
+        net: { x: cx, y0: -gap, y1: W + gap },
+        posts: [{ x: cx, y: -gap - d / 2, size: d, shape: "round" }, { x: cx, y: W + gap + d / 2, size: d, shape: "round" }],
+        antennae: [],
+        sticks: [],
+    };
+}
+function tableGeometry(f) {
+    const { length: L, width: W, edgeLine: e, centreLine: c } = f;
+    const cx = L / 2;
+    const out = f.net.postOutside;
+    const post = Math.max(feet(0.03), L * 0.01);
+    return {
+        length: L,
+        width: W,
+        lines: [[0, 0, L, e], [0, W - e, L, W], [0, 0, e, W], [L - e, 0, L, W], [0, W / 2 - c / 2, L, W / 2 + c / 2]],
+        areas: [],
+        small: [],
+        // The post's outside limit is 15.25 cm outside the side line; the net runs between the posts.
+        net: { x: cx, y0: -out + post, y1: W + out - post },
+        posts: [{ x: cx, y: -out + post / 2, size: post, shape: "square" }, { x: cx, y: W + out - post / 2, size: post, shape: "square" }],
+        antennae: [],
+        sticks: [],
+    };
+}
+/** How far the court's fixtures reach beyond its side lines: the net's posts and the antennae's marks. */
+export function sideReach(geometry) {
+    let reach = 0;
+    for (const post of [...geometry.posts, ...geometry.antennae, ...geometry.sticks])
+        reach = Math.max(reach, -(post.y - post.size / 2), post.y + post.size / 2 - geometry.width);
+    return reach;
+}

package/dist/courts.style.d.ts

@@ -0,0 +1,20 @@
+import type { NetSport } from "./leagues/courts.ts";
+/** The colours of a look: the court, the free zone round it, the ground round that, a painted area on the court, and the lines. A look may leave the area and the lines to the theme. */
+interface Look {
+    surface: string;
+    free: string;
+    apron: string;
+    area?: string;
+    line?: string;
+}
+interface Pair {
+    light: Look;
+    dark: Look;
+}
+/** The looks of every sport, each in light and dark. */
+export declare const COURT_LOOKS: Readonly<Record<NetSport, Readonly<Record<string, Pair>>>>;
+/** The rules of a drawing of this sport in this look: the shared rules and the look's colours. */
+export declare function courtStyle(sport: NetSport, look: string): string;
+/** Every net sport's rules and every look, for a page that draws with `style: "none"` and supplies the stylesheet itself. */
+export declare const KYOGIJO_COURTS_STYLE: string;
+export {};

package/dist/courts.style.js

@@ -0,0 +1,54 @@
+const NET = { light: "#20262b", dark: "#e6e9ec" };
+/** The looks of every sport, each in light and dark. */
+export const COURT_LOOKS = {
+    tennis: {
+        "hard-blue": { light: { surface: "#3d78bd", free: "#2f5f9a", apron: "#dcd8c9" }, dark: { surface: "#2f5f99", free: "#244a78", apron: "#1b1f1c" } },
+        "hard-green": { light: { surface: "#4d9468", free: "#3c7852", apron: "#dcd8c9" }, dark: { surface: "#35704b", free: "#285539", apron: "#1b1f1c" } },
+        clay: { light: { surface: "#c86b43", free: "#b45a35", apron: "#d9cdb8" }, dark: { surface: "#8e4a2e", free: "#7a3f27", apron: "#1b1f1c" } },
+        grass: { light: { surface: "#68a653", free: "#579544", apron: "#cfd6bd" }, dark: { surface: "#3f6e32", free: "#355c2a", apron: "#1b1f1c" } },
+    },
+    volleyball: {
+        wood: { light: { surface: "#dcae6e", free: "#c99a5c", apron: "#c9c3b4", area: "#d3a362" }, dark: { surface: "#8f6a3c", free: "#7d5d35", apron: "#1a1c1b", area: "#876234" } },
+        blue: { light: { surface: "#3b78b8", free: "#2b5d92", apron: "#d3d8df", area: "#5b94cc" }, dark: { surface: "#2e5f95", free: "#234a74", apron: "#1a1c1b", area: "#3e72aa" } },
+        sand: { light: { surface: "#ecd7a3", free: "#e0c78b", apron: "#cdbf9c", line: "#2a5db0" }, dark: { surface: "#a89466", free: "#957f55", apron: "#1d1c17", line: "#7aa3e6" } },
+    },
+    badminton: {
+        green: { light: { surface: "#3f8f6b", free: "#2f6f52", apron: "#d3d9d0" }, dark: { surface: "#2d6a4e", free: "#225240", apron: "#1a1c1b" } },
+        blue: { light: { surface: "#3b6fb0", free: "#2b5489", apron: "#d3d8df" }, dark: { surface: "#2d5688", free: "#22426a", apron: "#1a1c1b" } },
+        wood: { light: { surface: "#dcae6e", free: "#c99a5c", apron: "#c9c3b4" }, dark: { surface: "#8f6a3c", free: "#7d5d35", apron: "#1a1c1b" } },
+    },
+    pickleball: {
+        "blue-green": { light: { surface: "#3f85b8", free: "#3f8f5a", apron: "#cdd6c8", area: "#6fb0d8" }, dark: { surface: "#2f6a95", free: "#2f6f45", apron: "#1a1c1b", area: "#4a88b0" } },
+        green: { light: { surface: "#4f9a5c", free: "#3a7a47", apron: "#cdd6c8", area: "#82c28d" }, dark: { surface: "#386f43", free: "#2b5835", apron: "#1a1c1b", area: "#4e8c59" } },
+        red: { light: { surface: "#b5503a", free: "#8f3b2b", apron: "#d6cdc4", area: "#d27a62" }, dark: { surface: "#8a3d2c", free: "#6c2e21", apron: "#1a1c1b", area: "#a8523d" } },
+    },
+    tabletennis: {
+        blue: { light: { surface: "#1f4f8f", free: "#1f4f8f", apron: "#cfd6df" }, dark: { surface: "#1a4079", free: "#1a4079", apron: "#1a1d21" } },
+        green: { light: { surface: "#2f6f4f", free: "#2f6f4f", apron: "#cdd6c8" }, dark: { surface: "#25583f", free: "#25583f", apron: "#1a1d1b" } },
+    },
+};
+const vars = (look, net) => `--ky-surface:${look.surface};--ky-free:${look.free};--ky-apron:${look.apron};--ky-net:${net}${look.area === undefined ? "" : `;--ky-area:${look.area}`}${look.line === undefined ? "" : `;--ky-line:${look.line}`}`;
+/** The three rules of one look: light, dark by the device's setting, and dark by the page's `data-theme`. */
+function lookRules(sport, name) {
+    const pair = COURT_LOOKS[sport][name];
+    const at = `[data-sport=${sport}][data-look=${name}]`;
+    return [
+        `:where(.kyogijo${at}){${vars(pair.light, NET.light)}}`,
+        `@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .kyogijo${at}:not([data-theme=light])){${vars(pair.dark, NET.dark)}}}`,
+        `:where(html[data-theme=dark] .kyogijo${at},.kyogijo[data-theme=dark]${at}){${vars(pair.dark, NET.dark)}}`,
+    ].join("\n");
+}
+/** The rules every net sport's court shares. */
+const CLASSES = `
+.kyogijo .ky-free{fill:var(--ky-free)}
+.kyogijo .ky-area{fill:var(--ky-area,var(--ky-surface))}
+.kyogijo .ky-nt-line,.kyogijo .ky-nt-post{fill:var(--ky-net)}
+.kyogijo .ky-serve{fill:var(--ky-serve,#d8e33b);stroke:rgba(0,0,0,.45);stroke-width:.06}
+.kyogijo .ky-serve-seam{fill:none;stroke:rgba(0,0,0,.45)}
+.kyogijo .ky-tb{font-weight:700;opacity:.9}`.trim();
+/** The rules of a drawing of this sport in this look: the shared rules and the look's colours. */
+export function courtStyle(sport, look) {
+    return `${CLASSES}\n${lookRules(sport, look)}`;
+}
+/** Every net sport's rules and every look, for a page that draws with `style: "none"` and supplies the stylesheet itself. */
+export const KYOGIJO_COURTS_STYLE = `${CLASSES}\n${Object.keys(COURT_LOOKS).flatMap((sport) => Object.keys(COURT_LOOKS[sport]).map((name) => lookRules(sport, name))).join("\n")}`;

package/dist/cricket.board.d.ts

@@ -0,0 +1,18 @@
+import type { TeamView } from "./score.ts";
+import type { PlateSpot } from "./surfaces/surface.ts";
+export interface CricketWords {
+    competition?: string;
+    foot?: string;
+    /** The heads of the columns: the innings, the total (runs for wickets) and the overs. */
+    innings: string;
+    total: string;
+    overs: string;
+}
+/** The total as a cricket score is written: the runs, a stroke, the wickets lost. Runs alone when no wickets are given. */
+export declare const totalText: (t: Pick<TeamView, "score" | "wickets">) => string;
+/** How many innings columns a board has: the most either team gives; none when neither gives any. */
+export declare const inningsCount: (left: readonly string[] | undefined, right: readonly string[] | undefined) => number;
+/** The board as a group centred on the origin. `spot` is the room it has; it takes only what its rows and columns need. */
+export declare function cricketBoardMarkup(spot: PlateSpot, left: TeamView, right: TeamView, words: CricketWords, o: {
+    parts: boolean;
+}): string;

package/dist/cricket.board.js

@@ -0,0 +1,67 @@
+// The cricket scoreboard: each team's runs and wickets, the overs, and, for a match of more than one innings, each innings; drawn on the ground below the pitch. The board is drawn in the frame the eye sees; the caller turns it
+// back when the ground is turned.
+import { el, esc } from "./format.js";
+import { fitLines, textWidth } from "./text.js";
+const text = (x, cy, value, size, cls, extra = {}) => el("text", { class: `ky-text ${cls}`, x, y: cy + size * 0.36, "font-size": size, "text-anchor": "middle", ...extra }, esc(value));
+const fit = (value, room, ceiling) => Math.max(0.1, Math.min(ceiling, room / Math.max(1, textWidth(value))));
+/** The total as a cricket score is written: the runs, a stroke, the wickets lost. Runs alone when no wickets are given. */
+export const totalText = (t) => (t.wickets === undefined || t.wickets === "" ? t.score : `${t.score}/${t.wickets}`);
+/** How many innings columns a board has: the most either team gives; none when neither gives any. */
+export const inningsCount = (left, right) => Math.max(left?.length ?? 0, right?.length ?? 0);
+/** The board as a group centred on the origin. `spot` is the room it has; it takes only what its rows and columns need. */
+export function cricketBoardMarkup(spot, left, right, words, o) {
+    const n = inningsCount(left.innings, right.innings);
+    const team = [left, right];
+    const hasOvers = team.some((t) => t.overs !== undefined && t.overs !== "");
+    const cols = 3 + n * 1.3 + 1.9 + (hasOvers ? 1.5 : 0);
+    const extra = (words.competition ? 0.8 : 0) + (words.foot ? 0.8 : 0);
+    const rows = 3 + extra;
+    const colU = Math.min(spot.w / cols, spot.h / rows / 0.72);
+    const rowH = Math.min(spot.h / rows, colU * 0.72);
+    const w = colU * cols;
+    const h = rowH * rows;
+    const x0 = -w / 2;
+    let y = -h / 2;
+    const parts = (names) => (o.parts ? names : undefined);
+    let inner = el("rect", { class: "ky-plate-bg", x: -w / 2, y: -h / 2, width: w, height: h, rx: Math.min(rowH * 0.5, w * 0.04) });
+    const band = (value, cls) => {
+        const bandH = rowH * 0.8;
+        inner += text(0, y + bandH / 2, value, fit(value, w * 0.92, bandH * 0.62), cls);
+        y += bandH;
+    };
+    if (words.competition)
+        band(words.competition, "ky-comp");
+    const nameW = colU * 3;
+    const inX = (k) => x0 + nameW + colU * 1.3 * (k + 0.5);
+    const totalX = x0 + nameW + colU * 1.3 * n + colU * 0.95;
+    const oversX = totalX + colU * 0.95 + colU * 0.75;
+    for (let k = 0; k < n; k += 1)
+        inner += text(inX(k), y + rowH / 2, String(k + 1), rowH * 0.46, "ky-foot");
+    inner += text(totalX, y + rowH / 2, words.total, fit(words.total, colU * 1.7, rowH * 0.42), "ky-foot");
+    if (hasOvers)
+        inner += text(oversX, y + rowH / 2, words.overs, fit(words.overs, colU * 1.3, rowH * 0.42), "ky-foot");
+    y += rowH;
+    for (const t of team) {
+        inner += el("rect", { class: `ky-panel-${t.side}`, x: x0 + 0.1 * colU, y: y + rowH * 0.06, width: nameW - 0.2 * colU, height: rowH * 0.88, rx: rowH * 0.2 });
+        const name = fitLines(t.name, (nameW - 0.3 * colU) * 0.92, rowH * 0.8, rowH * 0.5);
+        name.lines.forEach((line, k) => {
+            inner += text(x0 + 0.1 * colU + (nameW - 0.2 * colU) / 2, y + rowH / 2 + (k - (name.lines.length - 1) / 2) * name.size * 1.1, line, name.size, `ky-ink-${t.side}`);
+        });
+        for (let k = 0; k < n; k += 1) {
+            const v = t.innings?.[k] ?? "";
+            if (v !== "")
+                inner += text(inX(k), y + rowH / 2, v, fit(v, colU * 1.2, rowH * 0.56), "ky-score");
+        }
+        const total = totalText(t);
+        const size = fit(total, colU * 1.8, rowH * 0.76);
+        inner += el("g", { class: `ky-total ky-${t.state}`, part: parts(`score ${t.role}-score`) }, text(totalX, y + rowH / 2, total, size, "ky-score"));
+        if (t.state === "win")
+            inner += el("rect", { class: `ky-winbar ky-winbar-${t.side}`, x: totalX - (textWidth(total) * size) / 2, y: y + rowH / 2 + size * 0.5, width: textWidth(total) * size, height: Math.max(0.05, size * 0.07) });
+        if (hasOvers && t.overs !== undefined && t.overs !== "")
+            inner += text(oversX, y + rowH / 2, t.overs, fit(t.overs, colU * 1.3, rowH * 0.56), "ky-score");
+        y += rowH;
+    }
+    if (words.foot)
+        band(words.foot, "ky-foot");
+    return el("g", { class: "ky-plate ky-scoreboard", part: parts("plate") }, inner);
+}