@johnmorrisdotca/kyogijo-stadiums 0.4.0 → 0.6.0

package/dist/courts.style.js

@@ -1,3 +1,7 @@
+const WALL = { light: { wall: "#4f575f", mesh: "#98a1a9" }, dark: { wall: "#8b949c", mesh: "#59626a" } };
+// World Squash's specification asks that court markings contrast with the surfaces beside them (5.01.01) and lets them be any colour that does (10.13), the walls' lines
+// differing from the floor's if need be. Red is the colour squash lines are painted in: ours, a red dark enough on the light floor and pale enough on the dark one to read at 3:1.
+const FACE = { light: { face: "#efeadf", tin: "#c3c8cd", wallLine: "#a8201a" }, dark: { face: "#454b52", tin: "#34393f", wallLine: "#ffb3a8" } };
 const NET = { light: "#20262b", dark: "#e6e9ec" };
 /** The looks of every sport, each in light and dark. */
 export const COURT_LOOKS = {
@@ -26,8 +30,42 @@ export const COURT_LOOKS = {
         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" } },
     },
+    padel: {
+        blue: { light: { surface: "#2f6fb5", free: "#2f6fb5", apron: "#d3d9d0", ...WALL.light }, dark: { surface: "#2a5a93", free: "#2a5a93", apron: "#1a1c1b", ...WALL.dark } },
+        green: { light: { surface: "#3f8f5f", free: "#3f8f5f", apron: "#d3d9d0", ...WALL.light }, dark: { surface: "#2e6c47", free: "#2e6c47", apron: "#1a1c1b", ...WALL.dark } },
+        terracotta: { light: { surface: "#c0623f", free: "#c0623f", apron: "#d9cdb8", ...WALL.light }, dark: { surface: "#8f4630", free: "#8f4630", apron: "#1b1f1c", ...WALL.dark } },
+    },
+    squash: {
+        wood: { light: { surface: "#d7a766", free: "#d7a766", apron: "#c9c3b4", line: "#a8201a", ...WALL.light, ...FACE.light }, dark: { surface: "#8a6638", free: "#8a6638", apron: "#1a1c1b", line: "#ffb3a8", ...WALL.dark, ...FACE.dark } },
+        blue: { light: { surface: "#4a7fb8", free: "#4a7fb8", apron: "#d3d8df", ...WALL.light, ...FACE.light }, dark: { surface: "#35608f", free: "#35608f", apron: "#1a1c1b", ...WALL.dark, ...FACE.dark } },
+    },
+    racquetball: {
+        wood: { light: { surface: "#efd9ae", free: "#efd9ae", apron: "#c9c3b4", line: "#c8372d", ...WALL.light }, dark: { surface: "#55401f", free: "#55401f", apron: "#1a1c1b", line: "#ff6b5e", ...WALL.dark } },
+        convertible: { light: { surface: "#efd9ae", free: "#efd9ae", apron: "#c9c3b4", line: "#2a5db0", ...WALL.light }, dark: { surface: "#55401f", free: "#55401f", apron: "#1a1c1b", line: "#7aa3e6", ...WALL.dark } },
+    },
+    sepaktakraw: {
+        blue: { light: { surface: "#3a73b5", free: "#2c5a91", apron: "#d3d8df" }, dark: { surface: "#2e5c92", free: "#234875", apron: "#1a1c1b" } },
+        green: { light: { surface: "#3f8f66", free: "#2f7050", apron: "#d3d9d0" }, dark: { surface: "#2d6b4c", free: "#235539", apron: "#1a1c1b" } },
+        wood: { light: { surface: "#dcae6e", free: "#c99a5c", apron: "#c9c3b4" }, dark: { surface: "#8f6a3c", free: "#7d5d35", apron: "#1a1c1b" } },
+    },
+    teqball: {
+        grey: { light: { surface: "#8d949b", free: "#8d949b", apron: "#d6d8da", table: "#2a5db0", ...WALL.light }, dark: { surface: "#5f666d", free: "#5f666d", apron: "#1a1c1d", table: "#4a78c4", ...WALL.dark } },
+        blue: { light: { surface: "#3b78b8", free: "#3b78b8", apron: "#d3d8df", table: "#e4eaef", ...WALL.light }, dark: { surface: "#2e5f95", free: "#2e5f95", apron: "#1a1c1b", table: "#aeb8c2", ...WALL.dark } },
+        green: { light: { surface: "#4d9468", free: "#4d9468", apron: "#d3d9d0", table: "#27323b", ...WALL.light }, dark: { surface: "#35704b", free: "#35704b", apron: "#1a1c1b", table: "#8696a4", ...WALL.dark } },
+    },
+    roundnet: {
+        grass: { light: { surface: "#68a653", free: "#68a653", apron: "#cfd6bd", setnet: "#e9efe4" }, dark: { surface: "#3f6e32", free: "#3f6e32", apron: "#1b1f1c", setnet: "#a9b8a2" } },
+        sand: { light: { surface: "#e3cf9a", free: "#e3cf9a", apron: "#cdbf9c", line: "#2a5db0", setnet: "#f6efd9" }, dark: { surface: "#8a784d", free: "#8a784d", apron: "#1d1c17", setnet: "#c9bd9a" } },
+        indoor: { light: { surface: "#b9b2a2", free: "#b9b2a2", apron: "#d3d0c8", setnet: "#ece9e1" }, dark: { surface: "#6f6a5f", free: "#6f6a5f", apron: "#1b1b19", setnet: "#a9a597" } },
+    },
+    netball: {
+        wood: { light: { surface: "#d9a96a", free: "#c4955a", apron: "#c9c3b4" }, dark: { surface: "#8f6a3c", free: "#7d5d35", apron: "#1a1c1b" } },
+        blue: { light: { surface: "#3d78bd", free: "#2f5f9a", apron: "#dcd8c9" }, dark: { surface: "#2f5f99", free: "#244a78", apron: "#1b1f1c" } },
+        green: { light: { surface: "#4d9468", free: "#3c7852", apron: "#dcd8c9" }, dark: { surface: "#35704b", free: "#285539", apron: "#1b1f1c" } },
+    },
 };
-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}`}`;
+const OPTIONAL = [["area", "--ky-area"], ["line", "--ky-line"], ["wallLine", "--ky-wall-line"], ["wall", "--ky-wall"], ["mesh", "--ky-mesh"], ["face", "--ky-face"], ["tin", "--ky-tin"], ["table", "--ky-table"], ["setnet", "--ky-setnet"]];
+const vars = (look, net) => `--ky-surface:${look.surface};--ky-free:${look.free};--ky-apron:${look.apron};--ky-net:${net}${OPTIONAL.map(([key, name]) => (look[key] === undefined ? "" : `;${name}:${look[key]}`)).join("")}`;
 /** 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];
@@ -46,9 +84,18 @@ const CLASSES = `
 .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. */
+/** The rules of the classes only some courts have: walls and fences, the front wall of a squash court and its lines, a teqball table and a roundnet set's net. */
+const FIXTURES = `
+.kyogijo .ky-wall{fill:var(--ky-wall)}
+.kyogijo .ky-mesh{fill:var(--ky-mesh)}
+.kyogijo .ky-face{fill:var(--ky-face)}
+.kyogijo .ky-tin{fill:var(--ky-tin)}
+.kyogijo .ky-wall-line{fill:var(--ky-wall-line,var(--ky-line))}
+.kyogijo .ky-table{fill:var(--ky-table)}
+.kyogijo .ky-set-net{fill:var(--ky-setnet)}`.trim();
+/** The rules of a drawing of this sport in this look: the shared rules, the rules of the fixtures its sport has, and the look's colours. */
 export function courtStyle(sport, look) {
-    return `${CLASSES}\n${lookRules(sport, look)}`;
+    return `${CLASSES}\n${COURT_LOOKS[sport][look].light.wall !== undefined || COURT_LOOKS[sport][look].light.table !== undefined || COURT_LOOKS[sport][look].light.setnet !== undefined ? `${FIXTURES}\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")}`;
+export const KYOGIJO_COURTS_STYLE = `${CLASSES}\n${FIXTURES}\n${Object.keys(COURT_LOOKS).flatMap((sport) => Object.keys(COURT_LOOKS[sport]).map((name) => lookRules(sport, name))).join("\n")}`;

package/dist/crowd.d.ts

@@ -0,0 +1,164 @@
+import type { CrowdShape, Side, Sport, SurfaceOptions } from "./types.ts";
+export type Pt = [number, number];
+export type Box = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** The outline of a part of the stands, in feet in the surface's wide frame: a rectangle with rounded corners, an ellipse, or a polygon. */
+export type Outline = {
+    kind: "rrect";
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    r: number;
+} | {
+    kind: "ellipse";
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+} | {
+    kind: "poly";
+    points: Pt[];
+};
+/** A tier of the stands: a band of seats between two outlines. */
+export interface StandRing {
+    /** `lower`, `upper`, `courtside`, `grandstand` or `bleachers`, with the tier's number where a ring has parts. */
+    id: string;
+    tier: "courtside" | "gallery" | "lower" | "upper" | "grandstand" | "bleachers" | "wall";
+    /** The band is `region` less `hole` (nothing for a polygon that is the band itself). */
+    region: Outline;
+    /** Further pieces of the band that are apart from `region` (a ballpark's bleachers either side of the batter's eye). */
+    more?: Outline[];
+    hole: Outline | null;
+    /** How far the band's inner and outer edges are from the edge of the playing surface, in feet, at the sides (the ends' distances are the same plus the venue's end gap less its side gap). */
+    from: number;
+    to: number;
+    /** The height of the first and of the last row above the playing surface, in feet; `rake` is the slope between them in degrees. For a view that raises the stands. */
+    height: [number, number];
+    rake: number;
+    /** The share of its seats that are taken, relative to the stands' (the upper tier is emptier). */
+    fill: number;
+    /** The seats the band holds, at a seat's 2 by 2.3 feet. */
+    seats: number;
+    /** The aisles and vomitories across the band, each from a point on its inner edge to its outer: across the sides, fanning round the corners. */
+    aisles: [Pt, Pt][];
+}
+/** A block of the stands that is not the home fans': the visitors', or a card display. A polygon in the wide frame. */
+export interface StandSector {
+    ring: string;
+    kind: "away" | "tifo-home" | "tifo-away";
+    points: Pt[];
+}
+/** A place left open or built on: a tunnel through the lower stands, a bench, the camera platform of the media side. A box in the wide frame. */
+export interface StandGap {
+    kind: "tunnel" | "bench" | "media" | "camera";
+    box: [x0: number, y0: number, x1: number, y1: number];
+}
+/** The stands round a surface as data. */
+export interface CrowdStands {
+    sport: Sport;
+    shape: CrowdShape;
+    /** The stadium a soccer pitch stands in: `purpose` (its own), `nfl` or `cfl` (a gridiron's), or nothing for another sport. */
+    stadium?: "purpose" | "nfl" | "cfl";
+    /** The playing surface, in the wide frame. */
+    box: Box;
+    rings: StandRing[];
+    /** Boxes where the stands are left out (the open end of a horseshoe, the ends of two sides). */
+    covers: [x0: number, y0: number, x1: number, y1: number][];
+    sectors: StandSector[];
+    gaps: StandGap[];
+    /** The walks between the tiers: a band between one tier's outer edge and the next one's inner. */
+    concourses: {
+        region: Outline;
+        hole: Outline | null;
+    }[];
+    /** A gridiron stadium's field under a soccer pitch: its outline and its two end zones, in the wide frame, so that the gap is seen. */
+    footprint?: {
+        field: Box;
+        endZones: [Box, Box];
+    };
+    /** The ground the stands need beyond the surface on each side, in feet. */
+    reach: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    /** The seats of all the stands, from the model: what a density is a share of when no capacity is given. */
+    seats: number;
+    /** The stands are a hall's gallery (a dojo's balcony): a thin band close to the walls, plain seats, a few neutral people and no sides. */
+    gallery?: boolean;
+}
+/** The crowd options read: every part has its value. */
+export interface Crowd {
+    shape: CrowdShape | undefined;
+    open: "left" | "right";
+    stadium: "auto" | "purpose" | "nfl" | "cfl";
+    density: number | undefined;
+    attendance: number | undefined;
+    capacity: number | undefined;
+    seed: number;
+    home: string | undefined;
+    away: string | undefined;
+    awayEnd: "auto" | "left" | "right" | "corner" | "none";
+    tifo: "home" | "away" | "both" | undefined;
+    tifoDesign: "stripes" | "checks";
+    gaps: boolean;
+    roof: boolean;
+    wallSeats: boolean | undefined;
+    detail: "auto" | "fine" | "plain";
+}
+/** The crowd the options ask for, or `undefined` for none. */
+export declare function resolveCrowd(value: SurfaceOptions["crowd"]): Crowd | undefined;
+/** How full the stands are: a density, else attendance over capacity (the ground's, else the model's seats), else 0.85. */
+export declare function densityOf(crowd: Crowd, seats: number, groundCapacity: number | undefined): number;
+/** A small, fast generator (mulberry32): the same seed gives the same numbers on every machine. */
+export declare function generator(seed: number): () => number;
+/** The grounds of the package that are the home of an NFL or a CFL club, where a soccer pitch stands inside a gridiron's stands. From each ground's article. */
+export declare const GRIDIRON_GROUNDS: Readonly<Record<string, "nfl" | "cfl">>;
+/** The walls the package knows have seats on top of them, by park and the wall's label: Fenway Park's Green Monster (the Monster seats, 2003). */
+export declare const WALL_SEATS: Readonly<Record<string, string>>;
+/** The point of an outline hit by a ray from `(cx, cy)` at angle `a` (screen angle, y down). */
+export declare function rayAt(o: Outline, cx: number, cy: number, a: number): Pt;
+/** An outline as a path, drawn clockwise, or counter-clockwise when `reverse` (a hole in a band that is filled with the non-zero rule). */
+export declare function outlinePath(o: Outline, reverse?: boolean): string;
+/** An outline as points, for a view that raises the stands: arcs are cut into steps of about 7.5 degrees. */
+export declare function outlinePoints(o: Outline): Pt[];
+/** The seats of a band of the stands: its area at a seat's 2 by 2.3 feet. */
+export declare const seatsIn: (region: Outline, hole: Outline | null) => number;
+/** A point of a rounded rectangle and the outward normal there, by its parameter `u` (any real number, taken modulo 8): the four straight sides are the even whole numbers (the top from left to right, the right from top to bottom and so on round) and the four corners the odd ones. Concentric outlines (the same corners' centres) have the same parameter at the points an aisle joins. */
+export declare function rrectAt(o: Extract<Outline, {
+    kind: "rrect";
+}>, u: number): {
+    p: Pt;
+    n: Pt;
+};
+/** What the layout needs of the options and the surface. */
+export interface LayoutInput {
+    sport: Sport;
+    /** The playing surface in the wide frame. */
+    box: Box;
+    crowd: Crowd;
+    /** The side the visitors sit towards (the opposite of the home team's). */
+    awaySide: Side;
+    /** A ground's key, for the stadium a soccer pitch stands in. */
+    ground?: string;
+    /** The surface lies on an arena floor that fills most of the hall: the sport's closer stands, where it has them. */
+    arena?: boolean;
+    /** A hall's gallery instead of the sport's stands (a dojo's balcony, from `dojoRoom`): the distance of its first row from the surface, its depth and the heights of its first and last rows, in feet. */
+    gallery?: {
+        offset: number;
+        depth: number;
+        height: [number, number];
+    };
+    /** The ballpark's fence as points on the field, for a ballpark (see `parkLayout`). */
+    fence?: readonly Pt[];
+    /** The foul lines' length at the poles and the backstop's distance, for a ballpark. */
+    backstop?: number;
+}
+/** The layout of a sport's stands round its surface: rings, covers, sectors and gaps. For a ballpark see `parkLayout`. */
+export declare function layoutOf(input: LayoutInput): CrowdStands;

package/dist/crowd.draw.d.ts

@@ -0,0 +1,17 @@
+import { type Crowd, type CrowdStands } from "./crowd.ts";
+/** How the crowd is drawn: the prefix of ids, the options read, the share of seats taken, the detail, and the class of the ground the stands stand on. */
+export interface DrawInput {
+    id: string;
+    crowd: Crowd;
+    density: number;
+    fine: boolean;
+    ground: string;
+}
+/** The stands and the crowd as markup and the defs it uses. The markup is laid over the ground and under the surface. */
+export declare function drawCrowd(stands: CrowdStands, o: DrawInput): {
+    defs: string;
+    markup: string;
+    over: string;
+};
+/** The rules of the stands and the crowd, written into a drawing that has one (and in `KYOGIJO_STYLE`, for a page that supplies the stylesheet), light and dark. */
+export declare const KYOGIJO_CROWD_STYLE: string;

package/dist/crowd.draw.js

@@ -0,0 +1,204 @@
+// The stands and the crowd as SVG: each tier a band of seats under a tile of a pattern, and the people in it a few dozen dots, a shirt and a head each, written once per tile
+// (a dot is a stroke of no length with round caps, a few bytes), so that a stadium is a few shapes however many seats it has, in the home colours with the empty seats showing.
+// All of it is patterns, paths and rectangles, which every renderer of the package reads. The tiles are made from a seed with a generator of our own, so the same options give
+// the same crowd. Written for this package; no photograph or other drawing was copied.
+import { el, num } from "./format.js";
+import { generator, outlinePath } from "./crowd.js";
+/** The width and the height of a tile of the crowd, in feet, and the seats' pitch. */
+const TILE = 14.4;
+const PITCH = 2.4;
+const SHIRTS = ["#9aa3b0", "#3a4252", "#6a7384", "#a08f76", "#2a2c33", "#7d90a8"];
+const HAIR = ["#17120e", "#251a12", "#3d2a1b", "#8c7040", "#5c5c5c", "#b07c5a"];
+const n1 = (v) => {
+    const t = (Math.round(v * 10) / 10).toString();
+    return t === "-0" ? "0" : t.replace(/^0\./, ".");
+};
+/** One tile of people: the seats of a block 18 feet square, each taken with the probability `density`, in the colour of a team with the probability `share` and else in a neutral. */
+function tile(seed, density, share, team, neutral = false) {
+    const next = generator(seed);
+    const shirts = new Map();
+    const heads = new Map();
+    const empty = [];
+    const put = (map, key, x, y) => {
+        const list = map.get(key) ?? [];
+        list.push(`M${n1(x)} ${n1(y)}h.01`);
+        map.set(key, list);
+    };
+    for (let j = 0; j < TILE / PITCH; j += 1) {
+        for (let i = 0; i < TILE / PITCH; i += 1) {
+            const x = (i + 0.5) * PITCH + (next() - 0.5) * 0.2;
+            const y = (j + 0.5) * PITCH + (next() - 0.5) * 0.2;
+            const taken = next() < density;
+            const shirt = next();
+            const hair = next();
+            if (!taken) {
+                empty.push(`M${n1(x)} ${n1(y)}h.01`);
+                continue;
+            }
+            // A team's fans are in its colour, some of them in a darker shade of it (a jacket, a shadow), the rest in neutrals.
+            put(shirts, shirt < share * 0.72 ? team : shirt < share ? `${team}-d` : `#${SHIRTS[Math.floor(next() * SHIRTS.length)].slice(1)}`, x, y);
+            put(heads, HAIR[Math.floor(hair * HAIR.length)], x, y);
+        }
+    }
+    let out = "";
+    if (empty.length > 0)
+        out += el("path", { class: neutral ? "ky-cr-seat ky-bud-gseat" : "ky-cr-seat", d: empty.join("") });
+    for (const [key, list] of shirts)
+        out += key.startsWith("ky-") ? el("path", { class: key, d: list.join("") }) : el("path", { stroke: key, d: list.join("") });
+    const headPaths = [...heads].map(([colour, list]) => el("path", { stroke: colour, "stroke-width": 1.15, d: list.join("") })).join("");
+    return el("g", { fill: "none", "stroke-linecap": "round", "stroke-width": 2.3 }, out + headPaths);
+}
+/** The tiles a crowd needs: the home tile, the home tile of the upper tiers (emptier) and the visitors', and the display tiles. */
+function patterns(id, crowd, density, tifo, neutral = false) {
+    const make = (suffix, body, size = TILE) => el("pattern", { id: `${id}-cr-${suffix}`, width: size, height: size, patternUnits: "userSpaceOnUse" }, body);
+    let out = make("h", tile(crowd.seed * 7 + 1, density, neutral ? 0 : 0.88, "ky-cr-h", neutral)) + make("a", tile(crowd.seed * 7 + 3, Math.min(1, density * 1.04), 0.94, "ky-cr-a"));
+    if (tifo !== undefined) {
+        const stripes = (cls) => el("rect", { class: cls, width: 3, height: 6 }) + el("rect", { class: "ky-cr-tw", x: 3, width: 3, height: 6 });
+        const checks = (cls) => el("rect", { class: cls, width: 3, height: 3 }) + el("rect", { class: cls, x: 3, y: 3, width: 3, height: 3 }) + el("rect", { class: "ky-cr-tw", x: 3, width: 3, height: 3 }) + el("rect", { class: "ky-cr-tw", y: 3, width: 3, height: 3 });
+        const one = crowd.tifoDesign === "checks" ? checks : stripes;
+        if (tifo.home)
+            out += make("th", one("ky-cr-th"), 6);
+        if (tifo.away)
+            out += make("ta", one("ky-cr-ta"), 6);
+    }
+    return out;
+}
+const path = (ring) => [ring.region, ...(ring.more ?? [])].map((o) => outlinePath(o)).join("") + (ring.hole === null ? "" : outlinePath(ring.hole, true));
+/** The aisles of a band as one path: the lines the stands data gives, every fourth a vomitory, drawn wider. */
+function aisles(ring) {
+    const line = ([[x0, y0], [x1, y1]]) => `M${Math.round(x0)} ${Math.round(y0)}L${Math.round(x1)} ${Math.round(y1)}`;
+    const plain = ring.aisles.filter((_, i) => i % 4 !== 0).map(line).join("");
+    const vomitories = ring.aisles.filter((_, i) => i % 4 === 0).map(line).join("");
+    return (plain === "" ? "" : el("path", { class: "ky-cr-aisle", d: plain, "stroke-width": 1.2 })) + (vomitories === "" ? "" : el("path", { class: "ky-cr-aisle", d: vomitories, "stroke-width": 2.6 }));
+}
+/** The pitch of the row lines, in feet: every second row of seats. */
+const ROW = 5;
+/** The row lines of a band, as one path: the outlines of the band's edges stepped across it, so that they follow its curves (a polygon, which has no concentric outlines, has a few). */
+function rows(ring) {
+    const r = ring.region;
+    const h = ring.hole;
+    const d = [];
+    const depth = ring.to - ring.from;
+    if (r.kind === "rrect" && h !== null && h.kind === "rrect") {
+        // A rounded rectangle as relative arcs, a row's lines being the same shape stepped outwards.
+        const hr = Math.min(h.r, (h.x1 - h.x0) / 2, (h.y1 - h.y0) / 2);
+        for (let k = ROW; k < depth - 1; k += ROW) {
+            const rr = Math.round(hr + k);
+            const w = Math.round(h.x1 - h.x0 + 2 * k) - 2 * rr;
+            const v = Math.round(h.y1 - h.y0 + 2 * k) - 2 * rr;
+            d.push(`M${Math.round(h.x0 - k) + rr} ${Math.round(h.y0 - k)}h${w}a${rr} ${rr} 0 0 1 ${rr} ${rr}v${v}a${rr} ${rr} 0 0 1 ${-rr} ${rr}h${-w}a${rr} ${rr} 0 0 1 ${-rr} ${-rr}v${-v}a${rr} ${rr} 0 0 1 ${rr} ${-rr}z`);
+        }
+    }
+    else if (r.kind === "ellipse" && h !== null && h.kind === "ellipse") {
+        for (let k = ROW; k < depth - 1; k += ROW)
+            d.push(outlinePath({ kind: "ellipse", cx: h.cx, cy: h.cy, rx: h.rx + k, ry: h.ry + k }));
+    }
+    else if (r.kind === "poly") {
+        for (const piece of [r, ...(ring.more ?? [])]) {
+            if (piece.kind !== "poly")
+                continue;
+            const pts = piece.points;
+            const m = pts.length / 2;
+            for (const f of [0.25, 0.5, 0.75])
+                d.push(`M${Array.from({ length: m }, (_, j) => `${n1(pts[j][0] + f * (pts[2 * m - 1 - j][0] - pts[j][0]))} ${n1(pts[j][1] + f * (pts[2 * m - 1 - j][1] - pts[j][1]))}`).join("L")}`);
+        }
+    }
+    return d.length === 0 ? "" : el("path", { class: "ky-cr-row", d: d.join("") });
+}
+const poly = (points) => `M${points.map(([x, y]) => `${Math.round(x)} ${Math.round(y)}`).join("L")}Z`;
+/** The stands and the crowd as markup and the defs it uses. The markup is laid over the ground and under the surface. */
+export function drawCrowd(stands, o) {
+    const { id, crowd, density, fine } = o;
+    const tifo = { home: stands.sectors.some((s) => s.kind === "tifo-home"), away: stands.sectors.some((s) => s.kind === "tifo-away") };
+    let body = "";
+    // A ballpark's stands stand on a plaza of their own, not on the grass of the foul ground.
+    if (stands.sport === "mlb")
+        for (const ring of stands.rings)
+            body += el("path", { class: "ky-cr-plaza", d: path(ring) });
+    // The walks between the tiers: a thin darker band.
+    for (const c of stands.concourses)
+        body += el("path", { class: "ky-cr-conc", d: outlinePath(c.region) + (c.hole === null ? "" : outlinePath(c.hole, true)) });
+    // A gridiron stadium's field under a soccer pitch is drawn over the pitch, faintly, so that the gap between the two is seen.
+    let over = "";
+    if (stands.footprint !== undefined) {
+        const { field, endZones } = stands.footprint;
+        over += endZones.map((z) => el("rect", { class: "ky-cr-ez", x: n1(z.x), y: n1(z.y), width: n1(z.w), height: n1(z.h) })).join("");
+        const lines = [];
+        for (let x = field.x + endZones[0].w; x <= field.x + field.w - endZones[1].w + 0.01; x += 15)
+            lines.push(`M${n1(x)} ${n1(field.y)}v${n1(field.h)}`);
+        over += el("path", { class: "ky-cr-yard", d: lines.join(""), "stroke-width": 0.5 });
+        over += el("rect", { class: "ky-cr-yard", x: n1(field.x), y: n1(field.y), width: n1(field.w), height: n1(field.h), "stroke-width": 0.9, fill: "none", "stroke-dasharray": "5 3" });
+        over = el("g", { class: "ky-cr-footprint" }, over);
+    }
+    for (const ring of stands.rings) {
+        // The upper tiers are a little emptier: their paint is the same tile with the empty seats' bed showing through a veil.
+        // The bed of seats under the tile, so that no seam of the pattern shows light.
+        const bed = stands.gallery === true ? "ky-cr-bed ky-bud-gbed" : "ky-cr-bed";
+        if (fine)
+            body += el("path", { class: bed, d: path(ring) }) + el("path", { class: "ky-cr-people", d: path(ring), fill: `url(#${id}-cr-h)` });
+        else
+            body += el("path", { class: bed, d: path(ring) }) + el("path", { class: stands.gallery === true ? "ky-cr-blk ky-bud-gblk" : "ky-cr-blk", d: path(ring), "fill-opacity": num(0.28 + 0.6 * density * ring.fill) });
+        if (fine && ring.fill < 0.95)
+            body += el("path", { class: "ky-cr-bed", d: path(ring), "fill-opacity": num(Math.min(0.5, (1 - ring.fill) * 1.6)) });
+    }
+    for (const s of stands.sectors)
+        body += sector(s, id, fine, density);
+    if (fine)
+        for (const ring of stands.rings)
+            body += rows(ring) + (stands.gallery === true ? "" : aisles(ring));
+    // Depth: the front wall of a tier throws a shade on its first rows (and the ground in front of it), the roof's edge on the last rows of the upper tier.
+    // A gallery's railing: a line along its front edge, over the seats.
+    if (stands.gallery === true)
+        for (const ring of stands.rings)
+            if (ring.hole !== null)
+                body += el("path", { class: "ky-bud-rail", d: outlinePath(ring.hole), fill: "none" });
+    if (fine && stands.gallery !== true) {
+        for (const ring of stands.rings) {
+            if (ring.hole !== null)
+                body += el("path", { d: outlinePath(ring.hole), fill: "none", stroke: "#000", "stroke-opacity": 0.2, "stroke-width": 7 });
+            if (ring.tier === "upper" && crowd.roof)
+                body += el("path", { d: outlinePath(ring.region), fill: "none", stroke: "#000", "stroke-opacity": 0.16, "stroke-width": 18 });
+        }
+    }
+    for (const [x0, y0, x1, y1] of stands.covers)
+        body += el("rect", { class: o.ground, x: n1(x0), y: n1(y0), width: n1(x1 - x0), height: n1(y1 - y0) });
+    for (const g of stands.gaps) {
+        const [x0, y0, x1, y1] = g.box;
+        body += el("rect", { class: `ky-cr-${g.kind}`, x: n1(x0), y: n1(y0), width: n1(x1 - x0), height: n1(y1 - y0), rx: g.kind === "bench" ? 1 : undefined });
+    }
+    return { defs: (fine ? patterns(id, crowd, density, tifo.home || tifo.away ? tifo : undefined, stands.gallery === true) : ""), markup: el("g", { class: "ky-crowd" }, body), over };
+}
+/** A block of visitors or a card display, a polygon over the band it is in. */
+function sector(s, id, fine, density) {
+    if (s.kind === "away")
+        return fine ? el("path", { class: "ky-cr-people", d: poly(s.points), fill: `url(#${id}-cr-a)` }) : el("path", { class: "ky-cr-blk-a", d: poly(s.points), "fill-opacity": num(0.3 + 0.6 * density) });
+    const team = s.kind === "tifo-home" ? "th" : "ta";
+    return fine ? el("path", { class: "ky-cr-tifo", d: poly(s.points), fill: `url(#${id}-cr-${team})` }) : el("path", { class: s.kind === "tifo-home" ? "ky-cr-th" : "ky-cr-ta", d: poly(s.points) });
+}
+/** The rules of the stands and the crowd, written into a drawing that has one (and in `KYOGIJO_STYLE`, for a page that supplies the stylesheet), light and dark. */
+export const KYOGIJO_CROWD_STYLE = `
+:where(.kyogijo){--ky-cr-bed:#4a525d;--ky-cr-empty:#7d8794;--ky-cr-gap:#14181d;--ky-cr-conc:#8c929b;--ky-cr-rim:#1c2127;--ky-cr-dim:1}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .kyogijo:not([data-theme=light])){--ky-cr-bed:#242a32;--ky-cr-empty:#4a535f;--ky-cr-gap:#050709;--ky-cr-conc:#2a3038;--ky-cr-rim:#07090c;--ky-cr-dim:.82}}
+:where(html[data-theme=dark] .kyogijo,.kyogijo[data-theme=dark]){--ky-cr-bed:#242a32;--ky-cr-empty:#4a535f;--ky-cr-gap:#050709;--ky-cr-conc:#2a3038;--ky-cr-rim:#07090c;--ky-cr-dim:.82}
+.kyogijo .ky-crowd{opacity:var(--ky-cr-dim)}
+.kyogijo .ky-cr-bed{fill:var(--ky-cr-bed);stroke:var(--ky-cr-rim);stroke-width:1.8;stroke-opacity:.55;stroke-linejoin:round}
+.kyogijo .ky-cr-seat{fill:none;stroke:var(--ky-cr-empty);stroke-width:1.3;stroke-opacity:.65}
+.kyogijo .ky-cr-h{stroke:var(--ky-cr-home,var(--ky-right))}
+.kyogijo .ky-cr-a{stroke:var(--ky-cr-away,var(--ky-left))}
+.kyogijo .ky-cr-h-d{stroke:var(--ky-cr-home,var(--ky-right));stroke-opacity:.6}
+.kyogijo .ky-cr-a-d{stroke:var(--ky-cr-away,var(--ky-left));stroke-opacity:.6}
+.kyogijo .ky-cr-blk{fill:var(--ky-cr-home,var(--ky-right))}
+.kyogijo .ky-cr-blk-a{fill:var(--ky-cr-away,var(--ky-left))}
+.kyogijo .ky-cr-th{fill:var(--ky-cr-home,var(--ky-right))}
+.kyogijo .ky-cr-ta{fill:var(--ky-cr-away,var(--ky-left))}
+.kyogijo .ky-cr-tw{fill:#f2f0ea}
+.kyogijo .ky-cr-aisle{fill:none;stroke:var(--ky-cr-gap);stroke-opacity:.8}
+.kyogijo .ky-cr-row{fill:none;stroke:var(--ky-cr-gap);stroke-opacity:.5;stroke-width:.5}
+.kyogijo .ky-cr-conc{fill:var(--ky-cr-conc)}
+.kyogijo .ky-cr-tunnel{fill:#101317;fill-opacity:.72}
+.kyogijo .ky-cr-bench{fill:#1c2127;fill-opacity:.55}
+.kyogijo .ky-cr-media{fill:#1c2127;fill-opacity:.4}
+.kyogijo .ky-cr-camera{fill:#1c2127;fill-opacity:.75}
+.kyogijo .ky-cr-plaza{fill:var(--ky-apron);stroke:var(--ky-apron);stroke-width:8;stroke-linejoin:round}
+.kyogijo .ky-cr-ez{fill:var(--ky-line);fill-opacity:.16}
+.kyogijo .ky-cr-yard{stroke:var(--ky-line);stroke-opacity:.5;fill:none}`.trim();