@johnmorrisdotca/kyogijo-stadiums 0.4.0 → 0.6.0

package/dist/score.js

@@ -142,6 +142,27 @@ export function glyph(sport) {
         case "tabletennis":
             // A table: the net across it and the centre line.
             return "M-16 -8H16V8H-16ZM0 -10V10M-16 0H16";
+        case "padel":
+            // A court: the net, the service lines and the central service line.
+            return "M-18 -10H18V10H-18ZM0 -10V10M-12.5 -10V10M12.5 -10V10M-12.5 0H12.5";
+        case "squash":
+            // A court, the front wall at the left: the short line, the half court line and the two service boxes.
+            return "M-18 -10H18V10H-18ZM2.3 -10V10M2.3 0H18M8.2 -10V-5H2.3M8.2 10V5H2.3";
+        case "racquetball":
+            // A court, the front wall at the left: the short line, the service line and the broken receiving line.
+            return "M-18 -10H18V10H-18ZM0 -10V10M-4.5 -10V10M4.5 -10V-8M4.5 -6V-4M4.5 -2V0M4.5 2V4M4.5 6V8";
+        case "sepaktakraw":
+            // A court: the centre line, the quarter circles at its ends and the service circles.
+            return "M-18 -10H18V10H-18ZM0 -10V10M-3 -10A3 3 0 0 0 0 -7A3 3 0 0 0 3 -10M-3 10A3 3 0 0 1 0 7A3 3 0 0 1 3 10M-12.9 0A1.5 1.5 0 1 0 -9.9 0A1.5 1.5 0 1 0 -12.9 0M9.9 0A1.5 1.5 0 1 0 12.9 0A1.5 1.5 0 1 0 9.9 0";
+        case "teqball":
+            // A court: the halfway line and the service lines, and the table.
+            return "M-18 -10H18V10H-18ZM0 -10V10M-7.9 -10V10M7.9 -10V10M-3.4 -1.3H3.4V1.3H-3.4Z";
+        case "roundnet":
+            // A court: the serving line and the no hit zone line round the set, and the marks at the four service positions.
+            return "M-10 -10H10V10H-10ZM-8 0A8 8 0 1 0 8 0A8 8 0 1 0 -8 0M-2.8 0A2.8 2.8 0 1 0 2.8 0A2.8 2.8 0 1 0 -2.8 0M-1.2 0A1.2 1.2 0 1 0 1.2 0A1.2 1.2 0 1 0 -1.2 0M-9 0H-7M7 0H9M0 -9V-7M0 7V9";
+        case "netball":
+            // A court: the transverse lines, the centre circle and the goal circles.
+            return "M-18 -10H18V10H-18ZM-6 -10V10M6 -10V10M-1 0A1 1 0 1 0 1 0A1 1 0 1 0 -1 0M-18 -6.4A6.4 6.4 0 0 1 -18 6.4M18 -6.4A6.4 6.4 0 0 0 18 6.4";
         case "lacrosse":
             // A field: the centre line, the goal circles and the restraining lines.
             return "M-18 -10H18V10H-18ZM0 -10V10M-12 0A3 3 0 1 0 -6 0A3 3 0 1 0 -12 0M12 0A3 3 0 1 0 6 0A3 3 0 1 0 12 0M-7 -10V10M7 -10V10";
@@ -163,6 +184,42 @@ export function glyph(sport) {
         case "handball":
             // A court: the centre line, and the goal areas with their arcs.
             return "M-18 -10H18V10H-18ZM0 -10V10M-18 -6A6 6 0 0 1 -12 0A6 6 0 0 1 -18 6M18 -6A6 6 0 0 0 12 0A6 6 0 0 0 18 6";
+        case "swimming":
+            // A pool: the lane ropes, and the cross lines at the ends of the lane markings.
+            return "M-18 -10H18V10H-18ZM-18 -5H18M-18 0H18M-18 5H18M-14 -7.5V-2.5M14 -7.5V-2.5M-14 2.5V7.5M14 2.5V7.5";
+        case "waterpolo":
+            // A field: the half distance line, the 2 and 6 metre lines, and a goal at each end.
+            return "M-18 -10H18V10H-18ZM0 -10V10M-14 -10V10M14 -10V10M-18 -3H-21V3H-18M18 -3H21V3H18M-9 -10V10M9 -10V10";
+        case "diving":
+            // A well: the boards along one wall, and the lines across the well.
+            return "M-18 -10H18V10H-18ZM-18 -7H-9V-5H-18ZM-18 -1H-12V1H-18ZM-18 5H-9V7H-18ZM0 -9V9M6 -9V9M12 -9V9";
+        case "artisticswimming":
+            // An area: the lines along the floor, and the judges' platform on one side.
+            return "M-18 -10H18V10H-18ZM-18 -5H18M-18 0H18M-18 5H18M-10 -13H10";
+        case "skating":
+            // A rink: the oval of a track inside the boards, and the finishing line.
+            return "M-18 -10H18V10H-18ZM-9 -6H9A6 6 0 0 1 9 6H-9A6 6 0 0 1 -9 -6ZM-9 -3.5H9A3.5 3.5 0 0 1 9 3.5H-9A3.5 3.5 0 0 1 -9 -3.5ZM4 3.5V10";
+        case "judo":
+            // A contest area: the safety area, the contest area inside it and the two start marks.
+            return "M-10 -10H10V10H-10ZM-6 -6H6V6H-6ZM-3 -1.5V1.5M3 -1.5V1.5";
+        case "karate":
+            // A competition area: the square, the outer band and the two start mats.
+            return "M-10 -10H10V10H-10ZM-7 -7H7V7H-7ZM-4.5 -1.5H-2.5V1.5H-4.5ZM2.5 -1.5H4.5V1.5H2.5Z";
+        case "kendo":
+            // A shiai-jo: the boundary, the cross at the centre and the two start lines.
+            return "M-10 -10H10V10H-10ZM-1.5 0H1.5M0 -1.5V1.5M-4 -1.5V1.5M4 -1.5V1.5";
+        case "sumo":
+            // A dohyō: the clay square, the ring and the two shikiri-sen.
+            return "M-10 -10H10V10H-10ZM-7 0A7 7 0 1 0 7 0A7 7 0 1 0 -7 0M-1.5 -2V2M1.5 -2V2";
+        case "kyudo":
+            // A range: the shajō, the line to the targets and the mound.
+            return "M-18 -5H-9V5H-18ZM-9 0H13M13 -6V6H16V-6ZM14.5 -1.5V1.5";
+        case "dojo":
+            // A dojo: a floor of mats laid so that no four corners meet.
+            return "M-14 -10H14V10H-14ZM-14 0H14M-5 -10V0M5 0V10";
+        case "athletics":
+            // A track: the oval's outer edge, a lane line and the kerb, and the finish line across the straight.
+            return "M-9 -10H9A10 10 0 0 1 9 10H-9A10 10 0 0 1 -9 -10ZM-9 -8.2H9A8.2 8.2 0 0 1 9 8.2H-9A8.2 8.2 0 0 1 -9 -8.2ZM-9 -6.4H9A6.4 6.4 0 0 1 9 6.4H-9A6.4 6.4 0 0 1 -9 -6.4ZM9 6.4V10";
     }
 }
 /** The state each of two scores puts its team in. */
@@ -171,6 +228,12 @@ export function stateOf(winner, role) {
         return "none";
     return winner === role ? "win" : "lose";
 }
+/** The least gap between a team's code and its score in the badge, and the least size of the code and of the score before the flag is left out. */
+const BADGE_GAP = 10;
+const BADGE_MEASURE_SCORE = 1.12;
+const BADGE_MEASURE_CODE = 1.2;
+const BADGE_ABBR_LEAST = 12;
+const BADGE_SCORE_LEAST = 16;
 /** The badge: one strip, [logo abbreviation score] [picture and status] [score abbreviation logo]. */
 export function badgeMarkup(left, right, o) {
     const W = 440;
@@ -183,18 +246,38 @@ export function badgeMarkup(left, right, o) {
         const isLeft = team.side === "left";
         const logoSize = 40;
         const logoX = isLeft ? 12 : W - 12 - logoSize;
-        const textStart = isLeft ? (team.logo === undefined ? 14 : 60) : W - (team.logo === undefined ? 14 : 60);
         const scoreEdge = isLeft ? block - 14 : W - block + 14;
-        const scoreSize = Math.min(32, (block * 0.42) / Math.max(1, textWidth(team.score)));
-        const room = Math.abs(scoreEdge - textStart) - textWidth(team.score) * scoreSize - 8;
-        const abbrSize = Math.max(8, Math.min(22, room / Math.max(1, textWidth(team.abbr))));
+        // The code and the score each keep to their own room, with a gap between them: the score is measured, and when the two do not fit the code shrinks to the least that reads, then the score does,
+        // and then the flag is left out to give them its room. A short score in a roomy block is laid out as it always was.
+        const fit = (withLogo) => {
+            const textStart = isLeft ? (withLogo ? 60 : 14) : W - (withLogo ? 60 : 14);
+            const avail = Math.abs(scoreEdge - textStart);
+            // The measure is an estimate, under what a bold face draws (by a tenth for digits, a fifth for capitals): the layout allows for that.
+            const ws = Math.max(1, textWidth(team.score) * BADGE_MEASURE_SCORE);
+            const wa = Math.max(1, textWidth(team.abbr) * BADGE_MEASURE_CODE);
+            let scoreSize = Math.min(32, (block * 0.42) / ws);
+            let abbrSize = Math.min(22, (avail - ws * scoreSize - BADGE_GAP) / wa);
+            if (abbrSize < BADGE_ABBR_LEAST) {
+                abbrSize = BADGE_ABBR_LEAST;
+                scoreSize = Math.min(scoreSize, (avail - BADGE_GAP - abbrSize * wa) / ws);
+            }
+            return { textStart, scoreSize, abbrSize, ok: scoreSize >= BADGE_SCORE_LEAST };
+        };
+        const withLogo = team.logo !== undefined;
+        let laid = fit(withLogo);
+        const logoShown = withLogo && (laid.ok || !fit(false).ok);
+        if (withLogo && !logoShown)
+            laid = fit(false);
+        const { textStart } = laid;
+        const scoreSize = Math.max(laid.scoreSize, 8);
+        const abbrSize = Math.max(laid.abbrSize, 8);
         // The hammer: a small stone in the corner of the team's block.
         if (team.hammer === true)
             out += el("g", { class: `ky-badge-hammer ky-badge-hammer-${team.side}`, transform: `translate(${isLeft ? block - 11 : W - block + 11} 11)` }, el("circle", { class: "ky-hammer", r: 6 }) + el("circle", { class: "ky-hammer-in", r: 2.6 }));
         // The ball of the team that is serving, in the same corner.
         if (team.serving === true)
             out += el("g", { transform: `translate(${isLeft ? block - 11 : W - block + 11} 11)` }, el("circle", { class: "ky-serve", r: 6 }) + el("path", { class: "ky-serve-seam", d: "M-4.7 -1.8Q0 1.8 4.7 -1.8", "stroke-width": 0.9 }));
-        out += el("g", { class: `ky-badge-team ky-badge-${team.side} ky-${team.state}`, part: part(o.parts, `team ${team.role}`) }, (team.logo === undefined
+        out += el("g", { class: `ky-badge-team ky-badge-${team.side} ky-${team.state}`, part: part(o.parts, `team ${team.role}`) }, (!logoShown || team.logo === undefined
             ? ""
             : team.round === true
                 ? roundMarkup({ id: `${o.id ?? "ky"}-mk-${team.role}`, cx: logoX + logoSize / 2, cy: 12 + logoSize / 2, r: logoSize / 2, href: team.logo, fit: team.fit, ring: 2 })
@@ -203,7 +286,11 @@ export function badgeMarkup(left, right, o) {
             el("text", { class: `ky-text ky-score ky-ink-${team.side} ky-${team.state}`, x: scoreEdge, y: H / 2 + scoreSize * 0.36, "font-size": scoreSize, "text-anchor": isLeft ? "end" : "start", part: part(o.parts, `score ${team.role}-score`) }, esc(team.score)));
     }
     const mid = W / 2;
-    out += el("path", { class: "ky-glyph", d: glyph(o.sport), transform: `translate(${mid} ${o.status ? 22 : 32}) scale(0.9)`, fill: "none" });
+    // A situation takes the place of the picture of the surface: the game's pill, scorebug or tag.
+    if (o.situation !== undefined)
+        out += el("g", { class: "ky-badge-situation", transform: `translate(${mid} ${o.status ? 23 : 32})` }, o.situation);
+    else
+        out += el("path", { class: "ky-glyph", d: glyph(o.sport), transform: `translate(${mid} ${o.status ? 22 : 32}) scale(0.9)`, fill: "none" });
     if (o.status) {
         const size = Math.min(11.5, 76 / Math.max(1, textWidth(o.status, false)));
         out += el("text", { class: "ky-text ky-badge-status", x: mid, y: 52 + size * 0.2, "font-size": size }, esc(o.status));

package/dist/sheet.d.ts

@@ -9,6 +9,9 @@ export interface SheetPlan {
     guardZone: boolean;
     show: SheetShow;
     end: "left" | "right";
+    /** `show: "folded"`: what each enlarged panel holds, and the shape of the frame it fills. */
+    panels: "half" | "house";
+    fit: number;
 }
 /**
  * The sheet the options ask for. A `league` picks the rulebook (World Curling's by default); `sheet.length` and `sheet.width` are in `units`

package/dist/sheet.js

@@ -5,7 +5,7 @@ import { CURLING_LEAGUES } from "./leagues/curling.js";
 import { lengthUnit } from "./common.js";
 import { parseRange } from "./ranges.names.js";
 import { convertLength } from "./units.js";
-const SHOWS = ["sheet", "half", "house"];
+const SHOWS = ["sheet", "half", "house", "folded"];
 const FEET = (feet) => String(Math.round(feet * 100) / 100);
 /**
  * The sheet the options ask for. A `league` picks the rulebook (World Curling's by default); `sheet.length` and `sheet.width` are in `units`
@@ -33,6 +33,10 @@ export function sheetFor(o) {
     const ranged = o.sport === "curling" ? parseRange(o) : undefined;
     const named = ranged !== undefined && ranged.kind === "name" ? ranged : undefined;
     const show = named !== undefined ? named.name : SHOWS.includes(asked.show) ? asked.show : "sheet";
-    const end = named?.asked !== undefined ? named.asked : asked.end === "right" ? "right" : "left";
-    return { league, spec: { ...base, length, width }, pebble: asked.pebble === true, guardZone: asked.guardZone === true, show, end };
+    const end = named?.asked !== undefined ? named.asked : asked.end === "right" || asked.end === "bottom" ? "right" : "left";
+    const panels = asked.panels === "house" ? "house" : "half";
+    if (asked.fit !== undefined && !(typeof asked.fit === "number" && asked.fit >= 0.5 && asked.fit <= 2))
+        throw new RangeError(`The folded sheet's fit is its width over its height, 0.5 to 2: ${String(asked.fit)} is not`);
+    const fit = asked.fit ?? 1;
+    return { league, spec: { ...base, length, width }, pebble: asked.pebble === true, guardZone: asked.guardZone === true, show, end, panels, fit };
 }

package/dist/situation.d.ts

@@ -0,0 +1,135 @@
+import type { DirectionOptions, Language, Side, Sport } from "./types.ts";
+import type { DriveResult, Situation, SituationTeam } from "./situation.types.ts";
+export type { BaseballSituation, DriveLeg, DriveResult, FootballSituation, HockeySituation, ShootoutAttempt, ShootoutRound, Situation, SituationTeam } from "./situation.types.ts";
+/** The most rounds of a shootout that are drawn. */
+export declare const SHOOTOUT_MAX = 12;
+/** The rounds that are regular: the rounds after them are sudden death. */
+export declare const SHOOTOUT_REGULAR = 3;
+/** The most drives drawn in a drive chart. */
+export declare const DRIVES_MAX = 24;
+/** The red zone: the yards before the goal line the offence attacks. */
+export declare const RED_ZONE_YARDS = 20;
+/** The yards to a first down. */
+export declare const FIRST_DOWN_YARDS = 10;
+/** The short code each drive result is written with at the head of its arrow. */
+export declare const DRIVE_CODES: Readonly<Record<DriveResult, string>>;
+/** What a reading needs to know of the drawing it is for. */
+export interface SituationContext {
+    /** The sport as drawn (`chooseLeague(o).sport`): `nhl`, `mlb`, `nfl`, `cfl` or `ifaf`; a situation is for these only. */
+    sport: Sport;
+    /** The side the home team's banner is on. */
+    homeSide: Side;
+    /** The attack arrows' options, which say which end each team attacks. */
+    direction?: DirectionOptions;
+    /** The football field: the yards between the goal lines and the downs a team has. */
+    football?: {
+        yards: number;
+        downs: number;
+    };
+    /** The teams' names, when the drawing has teams. */
+    names?: {
+        home: string;
+        away: string;
+    };
+    /** The league's id as the options name it (`iihf`, `olympic`), when they name one. */
+    league?: string;
+}
+/** Hockey, read. */
+export interface HockeyRead {
+    kind: "hockey";
+    /** The skaters, when known. */
+    away?: number;
+    home?: number;
+    /** The team that is attacking (more skaters, or the goalkeeper pulled, or the other team of a delayed penalty), and the end it heads for. */
+    attacker?: SituationTeam;
+    toward?: "left" | "right";
+    /** The attacker's skaters and the other team's, in that order, when both are known. */
+    strength?: [number, number];
+    /** More skaters than the other team. */
+    powerPlay: boolean;
+    emptyNet?: SituationTeam;
+    delayed?: SituationTeam;
+    clock?: string;
+    /** The shootout is called the game winning shots (GWS) in this league. */
+    gws: boolean;
+    shootout?: {
+        rounds: [boolean | null, boolean | null][];
+        goals: [number, number];
+        sudden: number;
+    };
+}
+/** Baseball, read. */
+export interface BaseballRead {
+    kind: "baseball";
+    bases?: [boolean, boolean, boolean];
+    outs?: number;
+    inning?: number;
+    half?: "top" | "bottom";
+    balls?: number;
+    strikes?: number;
+}
+/** A drive, read: in yards from the team's own goal line, and the end it heads for. */
+export interface DriveRead {
+    team: SituationTeam;
+    from: number;
+    to: number;
+    result?: DriveResult;
+    toward: "left" | "right";
+}
+/** Football, read. */
+export interface FootballRead {
+    kind: "football";
+    yards: number;
+    downs: number;
+    ballOn?: number;
+    toGo?: number | "goal";
+    down?: number;
+    possession?: SituationTeam;
+    /** The end zone the offence heads for. */
+    toward: "left" | "right";
+    redZone: boolean;
+    drive: DriveRead[];
+}
+/** A situation, read. */
+export type SituationRead = HockeyRead | BaseballRead | FootballRead;
+/** `m:ss`, `m:ss.s`, or a whole number of seconds written as `m:ss`; anything else is left out. */
+export declare function clockText(value: unknown): string | undefined;
+/**
+ * The situation a drawing's options ask for, decided: which team attacks and which end, what is lit. `undefined` when the options have none, when the sport has no situation (only
+ * hockey, baseball and football do), or when nothing in it is a value the sport can have.
+ */
+export declare function readSituation(situation: unknown, ctx: SituationContext): SituationRead | undefined;
+/** A yard line as the tag writes it: `OWN 35`, `OPP 12`, or the middle of the field. */
+export declare function yardLineText(ballOn: number, yards: number, language: Language): string;
+/** The down and distance as the tag writes it (`3rd & 7`, `1st & Goal`), or `undefined` when there is no down. */
+export declare function downTag(read: FootballRead, language: Language): string | undefined;
+/** The strength of a hockey situation on the pill: `5v4 PP`, `6v5 EN`, `4v4`, `DEL PEN`, with the clock after it; `undefined` when there is nothing to say (5 against 5). */
+export declare function hockeyPill(read: HockeyRead, language: Language): string | undefined;
+/**
+ * The short label of a situation as the drawing writes it: hockey's `5v4 PP 1:42`, baseball's `Top 7 · 2 out · 3-2`, football's `3rd & 7`. `undefined` when there is none to write.
+ * @example
+ * ```ts
+ * import { situationText } from "@johnmorrisdotca/kyogijo-stadiums";
+ * console.log(situationText({ sport: "nhl", situation: { awaySkaters: 5, homeSkaters: 4, clock: "1:42" } }));
+ * console.log(situationText({ sport: "mlb", situation: { inning: 7, half: "top", outs: 2, balls: 3, strikes: 2 } }));
+ * console.log(situationText({ sport: "nfl", situation: { ballOn: 88, down: 3, toGo: 7 } }));
+ * // 5v4 PP 1:42
+ * // Top 7 · 2 out · 3-2
+ * // 3rd & 7 · OPP 12
+ * ```
+ */
+export declare function situationText(options: {
+    sport: Sport;
+    league?: string;
+    homeSide?: Side;
+    direction?: DirectionOptions;
+    language?: Language;
+    situation?: Situation;
+}, language?: Language): string | undefined;
+/** The short label of a reading, in a language. */
+export declare function tagOf(read: SituationRead, language: Language): string | undefined;
+/** The sentences a description adds for a situation, each beginning with a capital. */
+export declare function situationSentences(read: SituationRead, language: Language, names?: {
+    home: string;
+    away: string;
+}): string[];

package/dist/situation.draw.d.ts

@@ -0,0 +1,34 @@
+import { type SituationRead } from "./situation.ts";
+import { type Surface } from "./surfaces/surface.ts";
+import type { Language, Side } from "./types.ts";
+/** What a situation is drawn with. */
+export interface SituationEnv {
+    id: string;
+    language: Language;
+    /** The side the home team is on. */
+    homeSide: Side;
+    /** The two teams' short names, when the drawing has teams. */
+    abbrs?: {
+        home: string;
+        away: string;
+    };
+    /** The score's panel stands in the middle of the surface. */
+    plate: boolean;
+    /** The strip under the drawing shows the situation (the pill, the scorebug or the tag), so the surface does not: a lineup's players stand where they would be. */
+    strip?: boolean;
+}
+/** What a situation adds to a drawing. */
+export interface SituationDrawn {
+    /** Over the surface's ground and under its lines. */
+    under: string;
+    /** Over the lines and the data, under the score's panel. */
+    over: string;
+    defs: string;
+}
+/** A situation drawn on a surface, or `undefined` when nothing is to be drawn. */
+export declare function drawSituation(read: SituationRead, surface: Surface, env: SituationEnv): SituationDrawn | undefined;
+/**
+ * A situation as the badge (and the compact card's strip) shows it in place of the picture of the surface: the markup centred on the origin of a box 76 wide, and `undefined` when there is
+ * nothing to show. Hockey's pill, baseball's scorebug and football's tag, each shrunk to fit.
+ */
+export declare function badgeSituation(read: SituationRead, language: Language): string | undefined;

package/dist/situation.draw.js

@@ -0,0 +1,202 @@
+// A situation drawn on a surface: hockey's pill and tinted attacking zone, its empty net and shootout strip; baseball's lit bases and scorebug; football's line of scrimmage, first-down line,
+// red zone, tag and drive chart. What is under the surface's lines (a tint) is `under`, what is over them is `over`; both are in the surface's wide frame, in feet, with the widgets set
+// upright (turned back when the surface is turned a quarter).
+import { wideView } from "./annotate.js";
+import { el, num } from "./format.js";
+import { DRIVE_CODES, downTag, hockeyPill, yardLineText } from "./situation.js";
+import { pillWidget, scorebugWidget, shootoutWidget, tagWidget } from "./situation.widgets.js";
+import { KYOGIJO_STRINGS } from "./strings.js";
+import { roundedRect, textOn } from "./surfaces/surface.js";
+/** A widget set where the eye wants it, upright however the surface lies. */
+function put(widget, cx, cy, turned) {
+    return el("g", { class: "ky-sit-w", transform: `translate(${num(cx)} ${num(cy)})${turned ? " rotate(-90)" : ""}` }, widget.markup);
+}
+/** A value held between `lo` and `hi`; the middle of them when they cross. */
+const within = (value, lo, hi) => (hi < lo ? (lo + hi) / 2 : Math.min(hi, Math.max(lo, value)));
+/**
+ * A widget's centre held inside a box with a little to spare. A surface turned a quarter turns the widget back, so its width then lies along the wide frame's y and its height along x.
+ */
+function inside(widget, turned, box, cx, cy) {
+    const hx = (turned ? widget.h : widget.w) / 2 + 1;
+    const hy = (turned ? widget.w : widget.h) / 2 + 1;
+    return [within(cx, box.x + hx, box.x + box.w - hx), within(cy, box.y + hy, box.y + box.h - hy)];
+}
+const sideOf = (team, homeSide) => ((team === "home") === (homeSide === "left") ? "left" : "right");
+/** The rotation, on the eye's page, of an arrow that points to the `left` or `right` end of a surface drawn wide (turned a quarter, `right` is down). */
+const headAngle = (toward, turned) => (turned ? (toward === "right" ? 90 : -90) : toward === "right" ? 0 : 180);
+function drawHockey(read, surface, env) {
+    const a = surface.anchors?.kind === "hockey" ? surface.anchors : undefined;
+    const out = { under: "", over: "", defs: "" };
+    if (a === undefined)
+        return out;
+    const vb = surface.box ?? { x: 0, y: 0, w: a.length, h: a.width };
+    const size = 5.2;
+    const words = KYOGIJO_STRINGS[env.language].situation;
+    if (read.shootout !== undefined) {
+        const labels = [env.abbrs?.away ?? words.awayShort, env.abbrs?.home ?? words.homeShort];
+        const strip = shootoutWidget({ rounds: read.shootout.rounds, goals: read.shootout.goals, sudden: read.shootout.sudden, labels, sides: [sideOf("away", env.homeSide), sideOf("home", env.homeSide)], suddenWord: words.sudden }, size * 0.56, true);
+        const cx = vb.x + vb.w / 2;
+        // Under the score's panel when it stands in the middle, else across the middle of what is shown.
+        const below = env.plate ? surface.plate.cy + surface.plate.h / 2 + 2 + strip.h / 2 : vb.y + vb.h / 2;
+        out.over = put(strip, ...inside(strip, surface.turned, vb, cx, below), surface.turned);
+        return out;
+    }
+    const label = hockeyPill(read, env.language);
+    if (read.attacker !== undefined && read.toward !== undefined) {
+        // The attacking zone, from the blue line to the end boards, in the attacking team's colour, cut to the ice.
+        const x0 = read.toward === "right" ? a.length - a.blueLine : 0;
+        out.defs = el("clipPath", { id: `${env.id}-sit-ice` }, el("path", { d: roundedRect(0, 0, a.length, a.width, a.cornerRadius) }));
+        out.under = el("g", { class: "ky-sit-zone-g", "clip-path": `url(#${env.id}-sit-ice)` }, el("rect", { class: `ky-sit-zone ky-sit-zone-${sideOf(read.attacker, env.homeSide)}`, x: x0, y: 0, width: a.blueLine, height: a.width }));
+    }
+    if (read.emptyNet !== undefined && read.toward !== undefined) {
+        // The empty net is at the end the attackers are leaving: ringed.
+        const gx = read.toward === "right" ? a.goalLine : a.length - a.goalLine;
+        const dir = read.toward === "right" ? -1 : 1;
+        const pad = 1.3;
+        out.over += el("rect", { class: "ky-sit-net", x: dir < 0 ? gx - a.net.depth - pad : gx - pad, y: a.width / 2 - a.net.width / 2 - pad, width: a.net.depth + 2 * pad, height: a.net.width + 2 * pad, rx: 1.2 });
+    }
+    if (label !== undefined && env.strip !== true) {
+        const pill = pillWidget(label, size, read.attacker === undefined ? undefined : sideOf(read.attacker, env.homeSide));
+        // Wide, at the top of the ice in the middle; tall, just inside the top blue line, in the middle across.
+        const at = surface.turned
+            ? inside(pill, true, vb, (vb.x <= a.blueLine ? a.blueLine : vb.x) + pill.h / 2 + 3, vb.y + vb.h / 2)
+            : inside(pill, false, vb, vb.x + vb.w / 2, vb.y + pill.h / 2 + 3);
+        out.over += put(pill, ...at, surface.turned);
+    }
+    return out;
+}
+function drawBaseball(read, surface, env) {
+    const a = surface.anchors?.kind === "baseball" ? surface.anchors : undefined;
+    const out = { under: "", over: "", defs: "" };
+    if (a === undefined)
+        return out;
+    // The occupied bases, lit larger than they are drawn so that they read from a distance.
+    if (read.bases !== undefined) {
+        const k = a.half * 2.6;
+        read.bases.forEach((on, i) => {
+            if (!on)
+                return;
+            const [u, v] = a.bases[i];
+            out.over += el("path", { class: "ky-sit-lit", d: `M${num(u)} ${num(v - k)}L${num(u + k)} ${num(v)}L${num(u)} ${num(v + k)}L${num(u - k)} ${num(v)}Z` });
+        });
+    }
+    // The scorebug at the foot of the field, behind home plate, held inside what is shown.
+    const view = wideView(surface);
+    const bug = { bases: read.bases, outs: read.outs, inning: read.inning, half: read.half, balls: read.balls, strikes: read.strikes };
+    if (env.strip !== true && Object.values(bug).some((value) => value !== undefined)) {
+        let u = Math.min(11, view.h * 0.2, view.w * 0.1);
+        let widget = scorebugWidget(bug, u, true);
+        // A drawing cut very small gets a bug that fits it.
+        if (widget.w > view.w * 0.9) {
+            u *= (view.w * 0.9) / widget.w;
+            widget = scorebugWidget(bug, u, true);
+        }
+        out.over += put(widget, within(0, view.x + widget.w / 2 + 1, view.x + view.w - widget.w / 2 - 1), view.y + view.h - widget.h / 2 - 3, false);
+    }
+    return out;
+}
+function drawFootball(read, surface, env) {
+    const a = surface.anchors?.kind === "football" ? surface.anchors : undefined;
+    const out = { under: "", over: "", defs: "" };
+    if (a === undefined)
+        return out;
+    const e = a.endZone;
+    const G = a.length;
+    const W = a.width;
+    const dir = read.toward === "right" ? 1 : -1;
+    // A distance in yards from a team's own goal line, as a place along the field, for a team heading for `toward`.
+    const at = (yards, toward) => (toward === "right" ? e + yards * 3 : e + G - yards * 3);
+    const vb = surface.box ?? { x: 0, y: 0, w: G + 2 * e, h: W };
+    // The red zone: the last 20 yards before the goal line the offence is attacking.
+    if (read.redZone) {
+        const goal = read.toward === "right" ? e + G : e;
+        out.under = el("rect", { class: "ky-sit-red", x: Math.min(goal, goal - dir * 60), y: 0, width: 60, height: W });
+    }
+    let x;
+    if (read.ballOn !== undefined) {
+        x = at(read.ballOn, read.toward);
+        out.over += el("path", { class: "ky-sit-los-halo", d: `M${num(x)} 0V${num(W)}`, fill: "none" });
+        // The first-down line, ten yards on or where the options put it, unless the goal line is nearer.
+        if (typeof read.toGo === "number" && read.ballOn + read.toGo < read.yards) {
+            const fd = at(read.ballOn + read.toGo, read.toward);
+            out.over += el("path", { class: "ky-sit-fd-halo", d: `M${num(fd)} 0V${num(W)}`, fill: "none" });
+            out.over += el("path", { class: "ky-sit-fd", d: `M${num(fd)} 0V${num(W)}`, fill: "none" });
+        }
+        out.over += el("path", { class: "ky-sit-los", d: `M${num(x)} 0V${num(W)}`, fill: "none" });
+    }
+    // The drive chart: an arrow for each drive, in a lane of its own across the field.
+    const n = read.drive.length;
+    if (n > 0) {
+        // The lanes lie across the field; the score's panel stands over the middle of it, so they go in the band below it.
+        const y0 = env.plate ? surface.plate.cy + surface.plate.h / 2 + 3 : 10;
+        const y1 = env.plate ? W - 6 : W - 10;
+        const step = Math.min(10, Math.max(2.4, (y1 - y0) / n));
+        const top = y0 + (y1 - y0 - step * n) / 2;
+        read.drive.forEach((leg, i) => {
+            const y = top + step * (i + 0.5);
+            const x0 = at(leg.from, leg.toward);
+            const x1 = at(leg.to, leg.toward);
+            const d = Math.sign(x1 - x0) || (leg.toward === "right" ? 1 : -1);
+            const head = Math.min(3.4, Math.abs(x1 - x0));
+            const cls = `ky-sit-d-${leg.result ?? "none"}`;
+            out.over += el("path", { class: `ky-sit-dr-halo`, d: `M${num(x0)} ${num(y)}H${num(x1 - d * head * 0.6)}`, fill: "none" });
+            out.over += el("path", { class: `ky-sit-dr ${cls}`, d: `M${num(x0)} ${num(y)}H${num(x1 - d * head * 0.6)}`, fill: "none" });
+            out.over += el("circle", { class: `ky-sit-dot-s ${cls}`, cx: x0, cy: y, r: 1.2 });
+            if (head > 0.5)
+                out.over += el("path", { class: `ky-sit-dh ${cls}`, d: `M${num(x1)} ${num(y)}L${num(x1 - d * head)} ${num(y - head * 0.62)}V${num(y + head * 0.62)}Z` });
+            if (leg.result !== undefined)
+                out.over += textOn(surface.turned, x1 + d * 1.8, y + 3.6 * 0.36, DRIVE_CODES[leg.result], { size: 3.6, anchor: d > 0 ? "start" : "end", cls: "ky-sit-dl", weight: 800 });
+        });
+    }
+    // The tag: the down and distance, with the yard line, behind the line of scrimmage near the far sideline.
+    const main = downTag(read, env.language);
+    const where = read.ballOn === undefined ? undefined : yardLineText(read.ballOn, read.yards, env.language);
+    if (env.strip !== true && (main !== undefined || where !== undefined)) {
+        const tag = tagWidget(main ?? where ?? "", main === undefined ? undefined : where, 5.6, headAngle(read.toward, surface.turned));
+        const along = (surface.turned ? tag.h : tag.w) / 2;
+        const across = (surface.turned ? tag.w : tag.h) / 2;
+        const cy = vb.y + across + 5;
+        // Behind the line of scrimmage, 4 feet off it; nudged along the field, to the line first and then away from it, until it covers none of the yard numbers and the arrows beside them that point to a goal line.
+        // Where there is no such room it keeps off the arrows at least.
+        const clear = (cx, hide) => {
+            const [px, py] = inside(tag, surface.turned, vb, cx, cy);
+            return !hide.some(([ox, oy, hx, hy]) => Math.abs(ox - px) < along + hx + 0.8 && Math.abs(oy - py) < across + hy + 0.8);
+        };
+        const gaps = [4, 3, 2, 1, 0.5, ...Array.from({ length: 36 }, (_, i) => 5 + i)];
+        const gap = x === undefined ? undefined : (gaps.find((g) => clear(x - dir * (along + g), [...a.arrows, ...a.numerals])) ?? gaps.find((g) => clear(x - dir * (along + g), a.arrows)) ?? 4);
+        const beside = x === undefined || gap === undefined ? vb.x + vb.w / 2 : x - dir * (along + gap);
+        out.over += put(tag, ...inside(tag, surface.turned, vb, beside, cy), surface.turned);
+    }
+    return out;
+}
+/** A situation drawn on a surface, or `undefined` when nothing is to be drawn. */
+export function drawSituation(read, surface, env) {
+    const drawn = read.kind === "hockey" ? drawHockey(read, surface, env) : read.kind === "baseball" ? drawBaseball(read, surface, env) : drawFootball(read, surface, env);
+    return drawn.under === "" && drawn.over === "" ? undefined : drawn;
+}
+/** The widest a badge's middle holds, in the badge's units. */
+const BADGE_ROOM = 74;
+/**
+ * A situation as the badge (and the compact card's strip) shows it in place of the picture of the surface: the markup centred on the origin of a box 76 wide, and `undefined` when there is
+ * nothing to show. Hockey's pill, baseball's scorebug and football's tag, each shrunk to fit.
+ */
+export function badgeSituation(read, language) {
+    let widget;
+    if (read.kind === "hockey") {
+        const label = hockeyPill(read, language);
+        widget = label === undefined ? undefined : pillWidget(label, 9);
+    }
+    else if (read.kind === "baseball") {
+        const bug = { bases: read.bases, outs: read.outs, inning: read.inning, half: read.half, balls: read.balls, strikes: read.strikes };
+        widget = Object.values(bug).some((value) => value !== undefined) ? scorebugWidget(bug, 8.4, false) : undefined;
+    }
+    else {
+        const main = downTag(read, language);
+        const where = read.ballOn === undefined ? undefined : yardLineText(read.ballOn, read.yards, language);
+        widget = main === undefined && where === undefined ? undefined : tagWidget(main ?? where ?? "", main === undefined ? undefined : where, 8.2);
+    }
+    if (widget === undefined)
+        return undefined;
+    const k = Math.min(1, BADGE_ROOM / widget.w);
+    return k === 1 ? widget.markup : el("g", { transform: `scale(${k.toFixed(3)})` }, widget.markup);
+}