@johnmorrisdotca/kyogijo-stadiums 0.5.0 → 0.6.1

package/dist/situation.js

@@ -0,0 +1,337 @@
+// A game's situation read from the options: hockey's skaters and shootout, baseball's bases, outs and count, football's down, distance and drives. Everything is decided here (which
+// team attacks, which end, what the words say), so that the drawing (`situation.draw.ts`, `situation.badge.ts`) and the description do not decide it twice. A value that is not what
+// it should be (a fourth down on the CFL's field, 7 skaters, a clock that is not a time) is left out, as a value from a page's markup is anywhere else; nothing here throws.
+import { attackingIn } from "./frames.js";
+import { KYOGIJO_STRINGS, fill } from "./strings.js";
+/** The most rounds of a shootout that are drawn. */
+export const SHOOTOUT_MAX = 12;
+/** The rounds that are regular: the rounds after them are sudden death. */
+export const SHOOTOUT_REGULAR = 3;
+/** The most drives drawn in a drive chart. */
+export const DRIVES_MAX = 24;
+/** The red zone: the yards before the goal line the offence attacks. */
+export const RED_ZONE_YARDS = 20;
+/** The yards to a first down. */
+export const FIRST_DOWN_YARDS = 10;
+/** The short code each drive result is written with at the head of its arrow. */
+export const DRIVE_CODES = Object.freeze({
+    touchdown: "TD",
+    "field-goal": "FG",
+    "missed-field-goal": "MFG",
+    punt: "PUNT",
+    turnover: "TO",
+    interception: "INT",
+    fumble: "FUM",
+    downs: "DOWNS",
+    safety: "SAF",
+    "end-of-half": "END",
+});
+const RESULTS = Object.keys(DRIVE_CODES);
+/** The hockey leagues whose rulebook calls the shootout the game winning shots (GWS): the IIHF's and the Olympic rink's. The Japanese leagues play to the IIHF's rules, but none is a league of its own here. */
+const GWS_LEAGUES = ["iihf", "olympic"];
+const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const flip = (side) => (side === "left" ? "right" : "left");
+const other = (team) => (team === "home" ? "away" : "home");
+/** A whole number from `lo` to `hi`, else `undefined`. */
+function whole(value, lo, hi) {
+    return typeof value === "number" && Number.isInteger(value) && value >= lo && value <= hi ? value : undefined;
+}
+const team = (value) => (value === "home" || value === "away" ? value : undefined);
+/** The end a team attacks: the one the `direction` options say (in the period asked for), else the one opposite the team's own side. */
+function headingOf(role, ctx) {
+    const own = (role === "home") === (ctx.homeSide === "left") ? "left" : "right";
+    const d = ctx.direction;
+    if (d === undefined)
+        return flip(own);
+    const named = d[role] === "left" || d[role] === "right" ? d[role] : d[other(role)] === "left" || d[other(role)] === "right" ? flip(d[other(role)]) : undefined;
+    if (named === undefined)
+        return flip(own);
+    if (d.period === undefined)
+        return named;
+    try {
+        return attackingIn(ctx.sport, d.period, named, d.changedAfter);
+    }
+    catch {
+        return named;
+    }
+}
+/** `m:ss`, `m:ss.s`, or a whole number of seconds written as `m:ss`; anything else is left out. */
+export function clockText(value) {
+    if (typeof value === "number") {
+        if (!Number.isFinite(value) || value < 0 || value >= 6000)
+            return undefined;
+        const s = Math.floor(value);
+        return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+    }
+    return typeof value === "string" && /^\d{1,2}:[0-5]\d(?:\.\d)?$/.test(value.trim()) ? value.trim() : undefined;
+}
+function readHockey(s, ctx) {
+    const away = whole(s.awaySkaters, 3, 6);
+    const home = whole(s.homeSkaters, 3, 6);
+    const clock = clockText(s.clock);
+    const more = away !== undefined && home !== undefined && away !== home ? (away > home ? "away" : "home") : undefined;
+    const pulled = s.emptyNet === true ? more : team(s.emptyNet);
+    const delayed = team(s.delayedPenalty);
+    const rounds = isObject(s.shootout) && Array.isArray(s.shootout.rounds) ? (s.shootout.rounds) : undefined;
+    const base = { kind: "hockey", away, home, powerPlay: false, gws: ctx.league !== undefined && GWS_LEAGUES.includes(ctx.league) };
+    if (rounds !== undefined) {
+        const read = rounds.slice(0, SHOOTOUT_MAX).map((round) => {
+            const pair = Array.isArray(round) ? round : [];
+            return [typeof pair[0] === "boolean" ? pair[0] : null, typeof pair[1] === "boolean" ? pair[1] : null];
+        });
+        while (read.length > 0 && read[read.length - 1][0] === null && read[read.length - 1][1] === null)
+            read.pop();
+        if (read.length === 0)
+            return undefined;
+        const goals = [read.filter((r) => r[0] === true).length, read.filter((r) => r[1] === true).length];
+        return { ...base, shootout: { rounds: read, goals, sudden: Math.max(0, read.length - SHOOTOUT_REGULAR) } };
+    }
+    // The team that attacks: the one with the goalkeeper pulled, else the one with more skaters, else the one that has the puck in a delayed penalty.
+    const attacker = pulled ?? more ?? (delayed === undefined ? undefined : other(delayed));
+    if (away === undefined && home === undefined && pulled === undefined && delayed === undefined && clock === undefined)
+        return undefined;
+    // Five against five and nothing else to say: there is nothing to draw.
+    if (away === 5 && home === 5 && pulled === undefined && delayed === undefined && clock === undefined)
+        return undefined;
+    const toward = s.toward === "left" || s.toward === "right" ? s.toward : attacker === undefined ? undefined : headingOf(attacker, ctx);
+    const strength = away !== undefined && home !== undefined ? (attacker === "home" ? [home, away] : attacker === "away" ? [away, home] : [away, home]) : undefined;
+    return { ...base, attacker, toward, strength, powerPlay: more !== undefined, emptyNet: pulled, delayed, clock };
+}
+function readBaseball(s) {
+    const runners = Array.isArray(s.bases) && s.bases.length >= 3 ? [Boolean(s.bases[0]), Boolean(s.bases[1]), Boolean(s.bases[2])] : undefined;
+    const read = {
+        kind: "baseball",
+        bases: runners,
+        outs: whole(s.outs, 0, 3),
+        inning: whole(s.inning, 1, 99),
+        half: s.half === "top" || s.half === "bottom" ? s.half : undefined,
+        balls: whole(s.balls, 0, 3),
+        strikes: whole(s.strikes, 0, 2),
+    };
+    return Object.values(read).some((value, i) => i > 0 && value !== undefined) ? read : undefined;
+}
+function readFootball(s, ctx) {
+    const yards = ctx.football?.yards ?? 100;
+    const downs = ctx.football?.downs ?? 4;
+    const number = (value, lo, hi) => (typeof value === "number" && Number.isFinite(value) && value >= lo && value <= hi ? Math.round(value * 10) / 10 : undefined);
+    const possession = team(s.possession);
+    const ballOn = number(s.ballOn, 0, yards);
+    const toGo = s.toGo === "goal" ? "goal" : number(s.toGo, 0.1, yards);
+    const down = whole(s.down, 1, downs);
+    const offence = possession ?? "home";
+    const toward = s.toward === "left" || s.toward === "right" ? s.toward : headingOf(offence, ctx);
+    // The red zone: the ball is in it unless the options say it is not; `redZone: true` marks it with no ball.
+    const inZone = ballOn !== undefined && ballOn >= yards - RED_ZONE_YARDS;
+    const redZone = s.redZone === true || (s.redZone !== false && inZone);
+    const drive = [];
+    if (Array.isArray(s.drive)) {
+        for (const leg of s.drive.slice(0, DRIVES_MAX)) {
+            if (!isObject(leg))
+                continue;
+            const from = number(leg.from, 0, yards);
+            const to = number(leg.to, 0, yards);
+            if (from === undefined || to === undefined)
+                continue;
+            const who = team(leg.team) ?? offence;
+            // A team heads for the end the offence heads for, or for the other.
+            drive.push({ team: who, from, to, result: RESULTS.includes(leg.result) ? leg.result : undefined, toward: who === offence ? toward : flip(toward) });
+        }
+    }
+    const read = { kind: "football", yards, downs, ballOn, toGo, down, possession, toward, redZone, drive };
+    return ballOn === undefined && toGo === undefined && down === undefined && possession === undefined && !redZone && drive.length === 0 ? undefined : read;
+}
+/**
+ * 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 function readSituation(situation, ctx) {
+    if (!isObject(situation))
+        return undefined;
+    const s = situation;
+    switch (ctx.sport) {
+        case "nhl":
+            return readHockey(s, ctx);
+        case "mlb":
+            return readBaseball(s);
+        case "nfl":
+        case "cfl":
+        case "ifaf":
+            return readFootball(s, ctx);
+        default:
+            return undefined;
+    }
+}
+// ---- Words. ----
+const words = (language) => KYOGIJO_STRINGS[language].situation;
+/** The ordinal of an inning in English (1st, 2nd, 3rd, 11th); in Japanese the number. */
+function nth(n, language) {
+    if (language === "ja")
+        return String(n);
+    const tens = n % 100;
+    if (tens >= 11 && tens <= 13)
+        return `${n}th`;
+    return `${n}${["th", "st", "nd", "rd"][n % 10 < 4 ? n % 10 : 0]}`;
+}
+/** A yard line as the tag writes it: `OWN 35`, `OPP 12`, or the middle of the field. */
+export function yardLineText(ballOn, yards, language) {
+    const w = words(language);
+    const n = Math.round(ballOn);
+    const mid = yards / 2;
+    if (ballOn === mid)
+        return String(mid);
+    return ballOn < mid ? fill(w.tagOwn, { n }) : fill(w.tagOpp, { n: Math.round(yards - ballOn) });
+}
+/** A yard line as a sentence writes it: `own 35`, `opponent's 12`, `midfield`. */
+function yardPlace(ballOn, yards, language) {
+    const w = words(language);
+    const mid = yards / 2;
+    if (ballOn === mid)
+        return w.placeMid;
+    return ballOn < mid ? fill(w.placeOwn, { n: Math.round(ballOn) }) : fill(w.placeOpp, { n: Math.round(yards - ballOn) });
+}
+/** The down and distance as the tag writes it (`3rd & 7`, `1st & Goal`), or `undefined` when there is no down. */
+export function downTag(read, language) {
+    if (read.down === undefined)
+        return undefined;
+    const w = words(language);
+    const ord = w.downs[read.down - 1];
+    // The goal is nearer than the first-down line: asked for, or the distance reaches the goal line.
+    const goal = read.toGo === "goal" || (read.ballOn !== undefined && typeof read.toGo === "number" && read.ballOn + read.toGo >= read.yards);
+    if (goal)
+        return fill(w.tagGoal, { ord });
+    return typeof read.toGo === "number" ? fill(w.tag, { ord, n: formatYards(read.toGo) }) : ord;
+}
+const formatYards = (n) => (Number.isInteger(n) ? String(n) : n.toFixed(1));
+/** The baseball situation as a short label: `Top 7 · 2 out · 3-2`. */
+function baseballTag(read, language) {
+    const w = words(language);
+    const parts = [];
+    if (read.inning !== undefined)
+        parts.push(language === "ja" ? `${read.inning}回${read.half === undefined ? "" : w[read.half]}` : `${read.half === undefined ? "" : `${w[read.half]} `}${read.inning}`);
+    else if (read.half !== undefined)
+        parts.push(w[read.half]);
+    if (read.outs !== undefined)
+        parts.push(language === "ja" ? (read.outs === 0 ? "ノーアウト" : `${read.outs}アウト`) : `${read.outs} out`);
+    if (read.balls !== undefined && read.strikes !== undefined)
+        parts.push(`${read.balls}-${read.strikes}`);
+    return parts.join(" · ");
+}
+/** 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 function hockeyPill(read, language) {
+    const w = words(language);
+    if (read.shootout !== undefined)
+        return `${read.gws ? w.gws : w.shootout} ${read.shootout.goals[0]}–${read.shootout.goals[1]}`;
+    const parts = [];
+    const strength = read.strength;
+    const plain = strength !== undefined && strength[0] === 5 && strength[1] === 5;
+    if (strength !== undefined && !(plain && read.emptyNet === undefined && read.delayed === undefined && read.clock === undefined))
+        parts.push(`${strength[0]}v${strength[1]}`);
+    if (read.powerPlay)
+        parts.push(w.pp);
+    if (read.emptyNet !== undefined)
+        parts.push(w.en);
+    if (read.delayed !== undefined)
+        parts.push(w.delayed);
+    if (read.clock !== undefined)
+        parts.push(read.clock);
+    return parts.length === 0 ? undefined : parts.join(" ");
+}
+/**
+ * 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 function situationText(options, language = options.language === "ja" ? "ja" : "en") {
+    const read = readSituation(options.situation, contextOf(options));
+    return read === undefined ? undefined : tagOf(read, language);
+}
+/** The reading context of options that name no teams: the sport's own football field, the side the home team stands on by default. */
+function contextOf(options) {
+    const football = options.sport === "cfl" ? { yards: 110, downs: 3 } : options.sport === "nfl" || options.sport === "ifaf" ? { yards: 100, downs: 4 } : undefined;
+    return { sport: options.sport, homeSide: options.homeSide ?? "right", direction: options.direction, football, league: options.league };
+}
+/** The short label of a reading, in a language. */
+export function tagOf(read, language) {
+    if (read.kind === "hockey")
+        return hockeyPill(read, language);
+    if (read.kind === "baseball") {
+        const tag = baseballTag(read, language);
+        return tag === "" ? undefined : tag;
+    }
+    const down = downTag(read, language);
+    const where = read.ballOn === undefined ? undefined : yardLineText(read.ballOn, read.yards, language);
+    const parts = [down, where].filter((part) => part !== undefined);
+    return parts.length === 0 ? undefined : parts.join(" · ");
+}
+/** The sentences a description adds for a situation, each beginning with a capital. */
+export function situationSentences(read, language, names) {
+    return sentencesOf(read, language, names).map((line) => line.charAt(0).toLocaleUpperCase("en") + line.slice(1));
+}
+function sentencesOf(read, language, names) {
+    const w = words(language);
+    const out = [];
+    const name = (t) => names?.[t] ?? w[t];
+    if (read.kind === "hockey") {
+        if (read.shootout !== undefined) {
+            const { rounds, goals, sudden } = read.shootout;
+            out.push(fill(read.gws ? w.gwsScore : w.shootoutScore, { n: rounds.length, away: name("away"), awayGoals: goals[0], home: name("home"), homeGoals: goals[1] }));
+            if (sudden > 0)
+                out.push(w.suddenDeath);
+            return out;
+        }
+        const [a, b] = read.strength ?? [0, 0];
+        if (read.strength !== undefined && read.powerPlay && read.attacker !== undefined)
+            out.push(fill(w.powerPlay, { team: name(read.attacker), a, b }));
+        else if (read.strength !== undefined && !(a === 5 && b === 5))
+            out.push(fill(w.strength, { a, b }));
+        if (read.clock !== undefined)
+            out.push(fill(w.penaltyTime, { clock: read.clock }));
+        if (read.emptyNet !== undefined)
+            out.push(fill(w.emptyNet, { team: name(read.emptyNet) }));
+        if (read.delayed !== undefined)
+            out.push(fill(w.delayedPenalty, { team: name(read.delayed) }));
+        return out;
+    }
+    if (read.kind === "baseball") {
+        const half = read.half === undefined ? undefined : w[read.half];
+        if (read.inning !== undefined && half !== undefined)
+            out.push(fill(w.inning, { half, n: read.inning, nth: nth(read.inning, language) }));
+        else if (read.inning !== undefined)
+            out.push(fill(w.inningOnly, { n: read.inning, nth: nth(read.inning, language) }));
+        else if (half !== undefined)
+            out.push(fill(w.halfOnly, { half }));
+        if (read.outs !== undefined)
+            out.push(read.outs === 0 ? w.noOuts : read.outs === 1 ? w.oneOut : fill(w.outs, { n: read.outs }));
+        if (read.bases !== undefined) {
+            const on = read.bases.flatMap((runner, i) => (runner ? [w.bases[i]] : []));
+            out.push(on.length === 0 ? w.basesEmpty : on.length === 3 ? w.basesLoaded : fill(w.runnersOn, { list: on.join(w.and) }));
+        }
+        if (read.balls !== undefined && read.strikes !== undefined)
+            out.push(fill(w.count, { b: read.balls, s: read.strikes }));
+        return out;
+    }
+    if (read.possession !== undefined)
+        out.push(fill(w.possession, { team: name(read.possession) }));
+    if (read.down !== undefined) {
+        const ord = w.downs[read.down - 1];
+        const goal = read.toGo === "goal" || (read.ballOn !== undefined && typeof read.toGo === "number" && read.ballOn + read.toGo >= read.yards);
+        out.push(goal ? fill(w.downGoal, { ord }) : typeof read.toGo === "number" ? fill(w.downDistance, { ord, n: formatYards(read.toGo) }) : fill(w.down, { ord }));
+    }
+    if (read.ballOn !== undefined)
+        out.push(read.ballOn === read.yards / 2 ? w.ballMid : read.ballOn < read.yards / 2 ? fill(w.ballOwn, { n: Math.round(read.ballOn) }) : fill(w.ballOpp, { n: Math.round(read.yards - read.ballOn) }));
+    if (read.redZone)
+        out.push(w.redZone);
+    for (const leg of read.drive) {
+        const at = { team: name(leg.team), from: yardPlace(leg.from, read.yards, language), to: yardPlace(leg.to, read.yards, language) };
+        out.push(leg.result === undefined ? fill(w.driveNoResult, at) : fill(w.driveLine, { ...at, result: w.results[leg.result] }));
+    }
+    return out;
+}

package/dist/situation.style.d.ts

@@ -0,0 +1,2 @@
+/** The situation's colours and shapes. */
+export declare const KYOGIJO_SITUATION_STYLE: string;

package/dist/situation.style.js

@@ -0,0 +1,45 @@
+// A situation's rules: the pill, the scorebug and the tag on the score panel's colours, the lit bases and the attacking zone in amber (or the attacking team's colour), football's blue
+// line of scrimmage, yellow first-down line and red zone, and the colours of a drive's arrows. The custom properties (`--ky-sit-on`, `--ky-sit-los`, `--ky-sit-fd`, `--ky-sit-red`) are
+// the ones a page can set; the dark ones are the dark theme's. A drawing with a situation writes these in; `KYOGIJO_STYLE` has them for a page that draws with `style: "none"`.
+/** The situation's colours and shapes. */
+export const KYOGIJO_SITUATION_STYLE = `
+:where(.kyogijo){--ky-sit-on:#f2b705;--ky-sit-los:#1f6fe0;--ky-sit-fd:#f5d90a;--ky-sit-red:#d6322a;--ky-sit-halo:rgba(8,12,16,.72);--ky-sit-td:#2f9e5b;--ky-sit-fg:#7bbf3a;--ky-sit-lose:#d6453d;--ky-sit-neutral:#9aa4ab}
+.kyogijo .ky-sit-bg{fill:var(--ky-plate)}
+.kyogijo .ky-badge .ky-sit-bg{stroke:var(--ky-plate-ink);stroke-opacity:.35;stroke-width:1}
+.kyogijo .ky-sit-t,.kyogijo .ky-sit-lab,.kyogijo .ky-sit-sdw{fill:var(--ky-plate-ink)}
+.kyogijo .ky-sit-sub,.kyogijo .ky-sit-sdw{opacity:.82}
+.kyogijo .ky-sit-lab{font-weight:700;opacity:.9}
+.kyogijo .ky-sit-dot-left{fill:var(--ky-left)}
+.kyogijo .ky-sit-dot-right{fill:var(--ky-right)}
+.kyogijo .ky-sit-dot{stroke:var(--ky-plate-ink);stroke-opacity:.8}
+.kyogijo .ky-sit-zone{fill:var(--ky-sit-on);fill-opacity:.2}
+.kyogijo .ky-sit-zone-left{fill:var(--ky-left);fill-opacity:.2}
+.kyogijo .ky-sit-zone-right{fill:var(--ky-right);fill-opacity:.2}
+.kyogijo .ky-sit-net{fill:none;stroke:var(--ky-sit-lose);stroke-width:.7;stroke-dasharray:1.6 1}
+.kyogijo .ky-sit-goal{fill:var(--ky-sit-on)}
+.kyogijo .ky-sit-miss{fill:none;stroke:var(--ky-plate-ink);stroke-opacity:.85}
+.kyogijo .ky-sit-wait{fill:var(--ky-plate-ink);fill-opacity:.35}
+.kyogijo .ky-sit-sd{stroke-opacity:1}
+.kyogijo .ky-sit-goal.ky-sit-sd{stroke:var(--ky-plate-ink)}
+.kyogijo .ky-sit-split{stroke:var(--ky-plate-ink);stroke-opacity:.4;stroke-dasharray:.5 .5}
+.kyogijo .ky-sit-dia{stroke:var(--ky-plate-ink);stroke-opacity:.55}
+.kyogijo .ky-sit-base{fill:var(--ky-plate-ink);fill-opacity:.24}
+.kyogijo .ky-sit-base.ky-sit-on{fill:var(--ky-sit-on);fill-opacity:1;stroke:var(--ky-plate-ink)}
+.kyogijo .ky-sit-out{fill:var(--ky-plate-ink);fill-opacity:.24}
+.kyogijo .ky-sit-out.ky-sit-on{fill:var(--ky-sit-lose);fill-opacity:1}
+.kyogijo .ky-sit-arrow{fill:var(--ky-plate-ink)}
+.kyogijo .ky-sit-lit{fill:var(--ky-sit-on);stroke:var(--ky-line);stroke-width:.7;stroke-linejoin:round;fill-opacity:.95}
+.kyogijo .ky-sit-red{fill:var(--ky-sit-red);fill-opacity:.24}
+.kyogijo .ky-sit-los-halo,.kyogijo .ky-sit-fd-halo,.kyogijo .ky-sit-dr-halo{stroke:var(--ky-sit-halo);stroke-width:3;stroke-linecap:round}
+.kyogijo .ky-sit-dr-halo{stroke-width:2.8}
+.kyogijo .ky-sit-los{stroke:var(--ky-sit-los);stroke-width:1.5}
+.kyogijo .ky-sit-fd{stroke:var(--ky-sit-fd);stroke-width:1.5}
+.kyogijo .ky-sit-dr{stroke:var(--ky-sit-neutral);stroke-width:1.3;stroke-linecap:round}
+.kyogijo .ky-sit-dot-s,.kyogijo .ky-sit-dh{fill:var(--ky-sit-neutral);stroke:var(--ky-sit-halo);stroke-width:.4}
+.kyogijo .ky-sit-d-touchdown{stroke:var(--ky-sit-td);fill:var(--ky-sit-td)}
+.kyogijo .ky-sit-d-field-goal{stroke:var(--ky-sit-fg);fill:var(--ky-sit-fg)}
+.kyogijo .ky-sit-d-missed-field-goal,.kyogijo .ky-sit-d-downs{stroke:#e8862a;fill:#e8862a}
+.kyogijo .ky-sit-d-turnover,.kyogijo .ky-sit-d-interception,.kyogijo .ky-sit-d-fumble{stroke:var(--ky-sit-lose);fill:var(--ky-sit-lose)}
+.kyogijo .ky-sit-dl{fill:var(--ky-line);stroke:var(--ky-sit-halo);stroke-width:.3em;paint-order:stroke;stroke-linejoin:round}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .kyogijo:not([data-theme=light])){--ky-sit-on:#ffc933;--ky-sit-los:#4b95ff;--ky-sit-red:#ff6a5e}}
+:where(html[data-theme=dark] .kyogijo,.kyogijo[data-theme=dark]){--ky-sit-on:#ffc933;--ky-sit-los:#4b95ff;--ky-sit-red:#ff6a5e}`.trim();

package/dist/situation.types.d.ts

@@ -0,0 +1,77 @@
+/** A team of the game: the home team or the visitors. */
+export type SituationTeam = "home" | "away";
+/** One shootout attempt: `true` a goal (●), `false` a miss or a save (○), `null` or left out one not yet taken. */
+export type ShootoutAttempt = boolean | null | undefined;
+/** One round of a shootout: the visitors' attempt and then the home team's, as the NHL's shootout is shot (the visitors shoot first). */
+export type ShootoutRound = readonly [away: ShootoutAttempt, home: ShootoutAttempt];
+/**
+ * Hockey's situation. The skaters are the players on the ice without the goalkeeper, 3 to 6 (a goalkeeper pulled for an extra attacker is a team with 6). A strength that is 5 against 5
+ * with nothing else to say draws nothing. See `docs/situation.md`.
+ */
+export interface HockeySituation {
+    /** The visitors' skaters on the ice, a whole number from 3 to 6. */
+    awaySkaters?: number;
+    /** The home team's skaters on the ice. */
+    homeSkaters?: number;
+    /** The time left on the penalty (or the power play), as `m:ss` or `m:ss.s`, or a whole number of seconds. Written beside the strength. */
+    clock?: string | number;
+    /** A net with no goalkeeper in it: `"home"` or `"away"` for the team that has pulled its goalkeeper, or `true` for the team with more skaters than the other. */
+    emptyNet?: boolean | SituationTeam;
+    /** A penalty called and not yet taken (the play goes on until the penalised team touches the puck): the team that will be short, `"home"` or `"away"`. The other team has the puck, and is the one that attacks. */
+    delayedPenalty?: SituationTeam;
+    /** The shootout: one entry for each round, `[away, home]`. The first three rounds are the regular ones; the rounds after the third are sudden death. */
+    shootout?: {
+        rounds: readonly ShootoutRound[];
+    };
+    /** The end the attacking team is heading for, as the surface is drawn wide. Without it, read from `direction`, else the end opposite the attacking team's own side. */
+    toward?: "left" | "right";
+}
+/** Baseball's situation (softball and NPB too). */
+export interface BaseballSituation {
+    /** The runners: `[first, second, third]`, `true` for a base with a runner on it. */
+    bases?: readonly [boolean, boolean, boolean] | readonly boolean[];
+    /** The outs, 0 to 3. */
+    outs?: number;
+    /** The inning, 1 or more. */
+    inning?: number;
+    /** `top` (the visitors bat) or `bottom` (the home team bats). */
+    half?: "top" | "bottom";
+    /** The count: balls 0 to 3 (four is a walk and is not a count) and strikes 0 to 2. */
+    balls?: number;
+    strikes?: number;
+}
+/** How a drive of a football game ended. */
+export type DriveResult = "touchdown" | "field-goal" | "missed-field-goal" | "punt" | "turnover" | "interception" | "fumble" | "downs" | "safety" | "end-of-half";
+/**
+ * One drive of a drive chart: where it started and where it ended, in yards from the team's own goal line (0 the goal line it defends, 100 the one it attacks; 110 on the CFL's field),
+ * and how it ended.
+ */
+export interface DriveLeg {
+    /** The team that had the ball. The team in possession when missing. */
+    team?: SituationTeam;
+    /** Yards from the team's own goal line where it began. */
+    from: number;
+    /** Yards from the team's own goal line where it ended. */
+    to: number;
+    /** How it ended. */
+    result?: DriveResult;
+}
+/** Football's situation (NFL, CFL, IFAF and the leagues of other rulebooks). The CFL has three downs and a field of 110 yards with end zones of 20. */
+export interface FootballSituation {
+    /** The ball, in yards from the offence's own goal line: 35 is its own 35, 88 the opponent's 12. 0 to 100 (0 to 110 on the CFL's field). */
+    ballOn?: number;
+    /** The yards to a first down, or `"goal"` when the goal line is nearer than the first-down line. */
+    toGo?: number | "goal";
+    /** The down, 1 to 4 (1 to 3 on the CFL's field). */
+    down?: number;
+    /** The team with the ball. */
+    possession?: SituationTeam;
+    /** Tint the red zone, the last 20 yards before the goal line the offence attacks. By default when the ball is in it; `false` leaves it out. */
+    redZone?: boolean;
+    /** A drive chart: the drives as arrows across the field, one to a lane. */
+    drive?: readonly DriveLeg[];
+    /** The end zone the offence is heading for, as the surface is drawn wide. Without it, read from `direction`, else the end opposite the offence's own side. */
+    toward?: "left" | "right";
+}
+/** A game's situation: the sport decides which of the three it is. */
+export type Situation = HockeySituation | BaseballSituation | FootballSituation;

package/dist/situation.types.js

@@ -0,0 +1,3 @@
+// What a game's situation is, as the options give it: hockey's skaters and shootout, baseball's bases, outs and count, football's down, distance and drives.
+// The types only; `situation.ts` reads them and `situation.draw.ts` draws them.
+export {};

package/dist/situation.widgets.d.ts

@@ -0,0 +1,39 @@
+/** A widget: its markup, centred on the origin, and the box it fills. */
+export interface Widget {
+    markup: string;
+    w: number;
+    h: number;
+}
+/** A triangle pointing at `angle` degrees (0 right, 90 down) centred on a point, `r` from its middle to its tip. */
+export declare const triangle: (cx: number, cy: number, r: number, angle: number, cls: string) => string;
+/** The pill: a line of text on a rounded plate, with a dot of the benefiting team's colour at its head when `dot` names its side. */
+export declare function pillWidget(label: string, size: number, dot?: "left" | "right"): Widget;
+/** A football tag: the down and distance, with the yard line beneath it and an arrow for the way the offence is going (`angle`, 0 right, 90 down, 180 left, -90 up). */
+export declare function tagWidget(main: string, sub: string | undefined, size: number, angle?: number): Widget;
+/** What a scorebug shows; a part left out is not drawn. */
+export interface Scorebug {
+    bases?: readonly [boolean, boolean, boolean];
+    outs?: number;
+    inning?: number;
+    half?: "top" | "bottom";
+    balls?: number;
+    strikes?: number;
+}
+/**
+ * The classic scorebug: a diamond whose occupied bases are lit, the outs as three dots under it, the inning with an arrow for its half, and the count. `size` is a letter's height;
+ * the diamond is 3.4 of them across. `bg` draws the plate behind it (a badge has its own).
+ */
+export declare function scorebugWidget(s: Scorebug, size: number, bg: boolean): Widget;
+/** What a shootout strip is given: the rounds as `[away, home]`, with `null` for an attempt not yet taken, the rounds after the third being sudden death, and the two rows' labels. */
+export interface ShootoutStrip {
+    rounds: readonly (readonly [boolean | null, boolean | null])[];
+    goals: readonly [number, number];
+    sudden: number;
+    labels: readonly [string, string];
+    /** The two rows' sides on the drawing, for the colour of their labels. */
+    sides?: readonly ["left" | "right", "left" | "right"];
+    /** The short word over the sudden-death rounds. */
+    suddenWord: string;
+}
+/** The shootout as two rows of dots, a goal filled (●) and a miss hollow (○), the rounds not yet taken a faint speck, with each team's goals at the end. */
+export declare function shootoutWidget(s: ShootoutStrip, size: number, bg: boolean): Widget;

package/dist/situation.widgets.js

@@ -0,0 +1,129 @@
+// The small pictures a situation is told with, each drawn upright in a frame of its own whose origin is its middle: the pill of hockey's strength, the scorebug of baseball (the diamond
+// with its runners, the outs, the inning and the count), the tag of football's down and distance, and the strip of a hockey shootout. `size` is the height of a letter in the frame's
+// units, so a widget is as big on a surface (feet) as it is in a badge (pixels) when it is given the right size. The drawing places them (`situation.draw.ts`, `score.ts`).
+import { el, esc, num } from "./format.js";
+import { textWidth as measure } from "./text.js";
+/** The width of a text in ems, with room to spare for a face wider than the estimate. */
+const textWidth = (value) => measure(value) * 1.12;
+const text = (cls, x, y, size, value, anchor = "middle") => el("text", { class: `ky-text ${cls}`, x, y: y + size * 0.36, "font-size": size, "text-anchor": anchor }, esc(value));
+/** A rounded plate behind a widget. */
+const plate = (w, h, cls = "ky-sit-bg") => el("rect", { class: cls, x: -w / 2, y: -h / 2, width: w, height: h, rx: Math.min(h / 2, h * 0.34) });
+/** A triangle pointing at `angle` degrees (0 right, 90 down) centred on a point, `r` from its middle to its tip. */
+export const triangle = (cx, cy, r, angle, cls) => {
+    const a = (angle * Math.PI) / 180;
+    const pts = [0, 140, 220].map((k) => {
+        const t = a + (k * Math.PI) / 180;
+        const rr = k === 0 ? r : r * 0.8;
+        return `${num(cx + rr * Math.cos(t))} ${num(cy + rr * Math.sin(t))}`;
+    });
+    return el("path", { class: cls, d: `M${pts.join("L")}Z` });
+};
+/** The pill: a line of text on a rounded plate, with a dot of the benefiting team's colour at its head when `dot` names its side. */
+export function pillWidget(label, size, dot) {
+    const h = size * 1.6;
+    const dotW = dot === undefined ? 0 : size * 1.15;
+    const w = textWidth(label) * size + size * 1.4 + dotW;
+    let m = plate(w, h);
+    if (dot !== undefined)
+        m += el("circle", { class: `ky-sit-dot ky-sit-dot-${dot}`, cx: -w / 2 + size * 0.95, cy: 0, r: size * 0.4, "stroke-width": size * 0.14 });
+    m += text("ky-sit-t", dotW / 2, 0, size, label);
+    return { markup: el("g", { class: "ky-sit-pill" }, m), w, h };
+}
+/** A football tag: the down and distance, with the yard line beneath it and an arrow for the way the offence is going (`angle`, 0 right, 90 down, 180 left, -90 up). */
+export function tagWidget(main, sub, size, angle) {
+    const subSize = size * 0.72;
+    const arrow = angle === undefined ? 0 : size * 1.2;
+    const lead = arrow * 1.35;
+    const textW = Math.max(textWidth(main) * size, sub === undefined ? 0 : textWidth(sub) * subSize);
+    const w = textW + size * 1.7 + arrow * 1.35;
+    const h = sub === undefined ? size * 1.6 : size * 2.5;
+    let m = plate(w, h);
+    const cx = lead / 2;
+    if (angle !== undefined)
+        m += triangle(-w / 2 + size * 1.1, 0, size * 0.52, angle, "ky-sit-arrow");
+    m += text("ky-sit-t", cx, sub === undefined ? 0 : -size * 0.42, size, main);
+    if (sub !== undefined)
+        m += text("ky-sit-t ky-sit-sub", cx, size * 0.82, subSize, sub);
+    return { markup: el("g", { class: "ky-sit-tag" }, m), w, h };
+}
+/**
+ * The classic scorebug: a diamond whose occupied bases are lit, the outs as three dots under it, the inning with an arrow for its half, and the count. `size` is a letter's height;
+ * the diamond is 3.4 of them across. `bg` draws the plate behind it (a badge has its own).
+ */
+export function scorebugWidget(s, size, bg) {
+    const u = size;
+    const right = s.inning !== undefined || (s.balls !== undefined && s.strikes !== undefined);
+    const left = 3.5 * u;
+    const w = left + (right ? 3.3 * u : 0) + 0.8 * u;
+    const h = 3.9 * u;
+    const x0 = -w / 2 + 0.4 * u + left / 2;
+    const cy = s.outs === undefined ? 0 : -0.5 * u;
+    let m = bg ? plate(w, h) : "";
+    // The diamond: a square turned a quarter, a base at each corner, home at the foot.
+    const r = 0.98 * u;
+    const base = (dx, dy, on, name) => {
+        const k = 0.5 * u;
+        return el("path", { class: `ky-sit-base ky-sit-b-${name}${on ? " ky-sit-on" : ""}`, "stroke-width": u * 0.1, d: `M${num(x0 + dx)} ${num(cy + dy - k)}L${num(x0 + dx + k)} ${num(cy + dy)}L${num(x0 + dx)} ${num(cy + dy + k)}L${num(x0 + dx - k)} ${num(cy + dy)}Z` });
+    };
+    m += el("path", { class: "ky-sit-dia", d: `M${num(x0)} ${num(cy - r)}L${num(x0 + r)} ${num(cy)}L${num(x0)} ${num(cy + r)}L${num(x0 - r)} ${num(cy)}Z`, fill: "none", "stroke-width": u * 0.12 });
+    m += base(r, 0, s.bases?.[0] === true, "1") + base(0, -r, s.bases?.[1] === true, "2") + base(-r, 0, s.bases?.[2] === true, "3");
+    if (s.outs !== undefined) {
+        for (let i = 0; i < 3; i += 1)
+            m += el("circle", { class: `ky-sit-out${i < s.outs ? " ky-sit-on" : ""}`, cx: x0 + (i - 1) * 1.05 * u, cy: cy + r + 0.95 * u, r: 0.34 * u });
+    }
+    if (right) {
+        const x1 = -w / 2 + 0.4 * u + left + 0.3 * u + 1.35 * u;
+        const rows = s.inning !== undefined && s.balls !== undefined && s.strikes !== undefined ? 2 : 1;
+        const y = (row) => (rows === 1 ? 0 : (row === 0 ? -1 : 1) * 0.95 * u);
+        if (s.inning !== undefined) {
+            const iy = y(0);
+            if (s.half !== undefined)
+                m += triangle(x1 - 0.95 * u, iy, 0.5 * u, s.half === "top" ? -90 : 90, "ky-sit-arrow");
+            m += text("ky-sit-t", x1 + (s.half === undefined ? 0 : 0.35 * u), iy, 1.25 * u, String(s.inning));
+        }
+        if (s.balls !== undefined && s.strikes !== undefined)
+            m += text("ky-sit-t ky-sit-count", x1, y(1), 1.2 * u, `${s.balls}-${s.strikes}`);
+    }
+    return { markup: el("g", { class: "ky-sit-bug" }, m), w, h };
+}
+/** The shootout as two rows of dots, a goal filled (●) and a miss hollow (○), the rounds not yet taken a faint speck, with each team's goals at the end. */
+export function shootoutWidget(s, size, bg) {
+    const u = size;
+    const columns = Math.max(3, s.rounds.length);
+    const regular = Math.min(columns, 3);
+    const sd = columns - regular;
+    const pitch = 2 * u;
+    const label = Math.max(3.2 * u, ...s.labels.map((l) => textWidth(l) * 1.05 * u + 0.6 * u));
+    const gap = sd > 0 ? 1.1 * u : 0;
+    const total = 2.2 * u;
+    const top = sd > 0 ? 1.3 * u : 0;
+    const w = 0.8 * u + label + columns * pitch + gap + total + 0.4 * u;
+    const h = top + 5.2 * u;
+    let m = bg ? plate(w, h) : "";
+    const left = -w / 2 + 0.8 * u;
+    const y0 = -h / 2 + top + 1.55 * u;
+    const colX = (i) => left + label + pitch * i + pitch / 2 + (i >= regular ? gap : 0);
+    for (let row = 0; row < 2; row += 1) {
+        const y = y0 + row * 2.1 * u;
+        const side = s.sides?.[row];
+        m += text(`ky-sit-lab${side === undefined ? "" : ` ky-sit-lab-${side}`}`, left, y, 1.1 * u, s.labels[row], "start");
+        for (let i = 0; i < columns; i += 1) {
+            const shot = s.rounds[i]?.[row] ?? null;
+            const x = colX(i);
+            const sudden = i >= regular;
+            if (shot === true)
+                m += el("circle", { class: `ky-sit-goal${sudden ? " ky-sit-sd" : ""}`, cx: x, cy: y, r: 0.66 * u, "stroke-width": sudden ? 0.14 * u : undefined });
+            else if (shot === false)
+                m += el("circle", { class: `ky-sit-miss${sudden ? " ky-sit-sd" : ""}`, cx: x, cy: y, r: 0.58 * u, "stroke-width": 0.2 * u });
+            else
+                m += el("circle", { class: "ky-sit-wait", cx: x, cy: y, r: 0.2 * u });
+        }
+        m += text("ky-sit-t ky-sit-total", w / 2 - 0.5 * u - total / 2, y, 1.5 * u, String(s.goals[row]));
+    }
+    if (sd > 0) {
+        const x = colX(regular) - pitch / 2 - gap / 2;
+        m += el("path", { class: "ky-sit-split", d: `M${num(x)} ${num(-h / 2 + top + 0.2 * u)}V${num(h / 2 - 0.2 * u)}`, "stroke-width": 0.14 * u });
+        m += text("ky-sit-sdw", (colX(regular) + colX(columns - 1)) / 2, -h / 2 + 0.75 * u, 0.9 * u, s.suddenWord);
+    }
+    return { markup: el("g", { class: "ky-sit-strip" }, m), w, h };
+}