@johnmorrisdotca/kyogijo-stadiums 0.18.1 → 0.19.0

package/dist/judging.draw.js

@@ -1,58 +1,24 @@
 // A judging assignment drawn: for each mat, the package's own judo area with a badge at every judge's seat and, where a name and its ID fit in the seat, a card with both; beside it (or under it) the chart of mat, seat,
 // name and ID, whose rows grow to hold every name and ID whole. The surface is not drawn a second way: its markup is the drawing's own, moved and clipped. The same options always give the same string. The text
 // alternative is `judgingTable`.
-import { drawKyogijo } from "./draw.js";
-import { safeClass } from "./common.js";
+export { judgingText } from "./judging.text.js";
+import { metaMarkup, safeClass } from "./common.js";
 import { el, esc, hash, num } from "./format.js";
-import { PLAN_CARD, badge, card } from "./judging.card.js";
-import { fitChart, fitSeats } from "./judging.fit.js";
-import { JUDGING_LEAGUE } from "./judging.data.js";
-import { judgingPlan, judgingSetting, seatIn } from "./judging.js";
+import { broadcastDrawing } from "./judging.broadcast.js";
+import { fitChart } from "./judging.fit.js";
+import { metricsOf, planMarkup, surfacesOf } from "./judging.plan.js";
+import { judgingPlan, judgingSetting } from "./judging.js";
+import { judgingText } from "./judging.text.js";
 import { KYOGIJO_JUDGING_STYLE } from "./judging.style.js";
 import { JUDGING_WORDS } from "./judging.words.js";
 import { fill } from "./strings.js";
 import { LINE_HEIGHT } from "./text.js";
 import { VERSION } from "./version.js";
-/** Feet in a metre: the surface's own drawing is in feet. */
-const FT = 1 / 0.3048;
-const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-/** One mat's surface as markup: the drawing's own, without its title, its stylesheet and its apron. */
-function inner(svg) {
-    const look = /^<svg[^>]* data-look="([^"]*)"/.exec(svg)?.[1];
-    const style = /<style>([\s\S]*?)<\/style>/.exec(svg)?.[1] ?? "";
-    let body = svg.replace(/<style>[\s\S]*?<\/style>/, "");
-    body = body.slice(body.indexOf("</desc>") + "</desc>".length, body.lastIndexOf("</svg>"));
-    body = body.replace(/<rect class="ky-apron"[^>]*\/>/g, "");
-    return { body, style, look };
-}
-/** The sentence that names one seat and who sits in it. */
-function seatSentence(a, setting) {
-    const w = JUDGING_WORDS[setting.language].say;
-    const seat = a.seat.label[setting.language];
-    if (!a.assigned)
-        return fill(w.seatVacant, { seat });
-    if (a.id === "")
-        return fill(w.seatNoId, { seat, name: a.name });
-    return fill(w.seat, { seat, name: a.name === "" ? "—" : a.name, id: a.id });
-}
-/** The title and the description of an assignment: each mat with each seat and who is in it. */
-export function judgingText(setting, options, chart) {
-    const words = JUDGING_WORDS[setting.language];
-    const style = fill(words.styleName[setting.style], { count: setting.mats[0].seats.length });
-    const mats = setting.total === 1 ? words.say.matsOne : fill(words.say.matsMany, { n: setting.total });
-    const title = options.title ?? fill(words.say.title, { style, mats });
-    const sentences = setting.mats.map((m) => fill(words.say.mat, { label: m.label, seats: m.seats.map((a) => seatSentence(a, setting)).join(words.say.join) }));
-    const description = options.description ?? [...sentences, chart && setting.seatNames ? words.say.names : words.say.chartOnly].join(setting.language === "ja" ? "" : " ");
-    return { title, description };
-}
-const metricsOf = (width) => {
-    const k = width / 1000;
-    return { k, pad: 28 * k, gap: 28 * k, titleH: 62 * k, panelGap: 40 * k, badge: 60 * k, rowPad: 14 * k, role: 17 * k, nameMax: 34 * k, nameMin: 22 * k, cardMin: 12 * k };
-};
 /** The rows of one mat's chart, each as tall as its name and ID need, set in a chart `width` wide. */
 function chartRows(mat, width, m, setting) {
     const words = JUDGING_WORDS[setting.language];
-    const textW = width - m.rowPad * 1.6 - m.badge - m.gap * 0.6;
+    // `textWidth` is an estimate, and a face wider than the one it estimates (the DejaVu and Verdana of a Linux or Windows screen) would put a line across the row's edge: a margin of 6 % keeps every line inside it.
+    const textW = (width - m.rowPad * 1.6 - m.badge - m.gap * 0.6) * 0.94;
     return mat.seats.map((a) => {
         if (!a.assigned)
             return { a, fit: undefined, height: Math.max(m.badge + 2 * m.rowPad, m.rowPad * 2 + m.role * LINE_HEIGHT + 6 * m.k + m.nameMin * LINE_HEIGHT) };
@@ -100,76 +66,20 @@ function chartMarkup(mat, x, y, width, m, setting) {
     const height = Math.max(0, cursor - gap);
     return { markup: el("g", { class: "ky-ju-chart", "data-mat": mat.n, transform: `translate(${num(x)} ${num(y)})` }, out), height };
 }
-/** The plan of one mat at (x, y) in a box: the surface moved and clipped to the region shown, with a badge or a card at every seat. */
-function planMarkup(mat, surface, geom, region, box, m, setting, clip) {
-    const rw = region.x1 - region.x0;
-    const rh = region.y1 - region.y0;
-    const s = Math.min(box.w / rw, box.h / rh);
-    const w = rw * s;
-    const h = rh * s;
-    const x = box.x + (box.w - w) / 2;
-    const y = box.y;
-    const sf = s / FT;
-    const X = (mx) => x + (mx - region.x0) * s;
-    const Y = (my) => y + (my - region.y0) * s;
-    const words = JUDGING_WORDS[setting.language];
-    let markup = el("clipPath", { id: clip }, el("rect", { x: num(region.x0 * FT), y: num(region.y0 * FT), width: num(rw * FT), height: num(rh * FT) }));
-    markup += el("rect", { class: "ky-apron", x, y, width: w, height: h });
-    markup += el("g", { class: "ky-ju-plan", "clip-path": `url(#${clip})`, transform: `translate(${num(x - region.x0 * FT * sf)} ${num(y - region.y0 * FT * sf)}) scale(${(sf).toFixed(5)})` }, surface.body);
-    markup += el("rect", { class: "ky-ju-plan-frame", x, y, width: w, height: h });
-    // The card of a seat is the place the plan gives it: for a kata judge its chair and the table in front of it, for a contest's referee and side judges a card of their own.
-    const boxes = mat.seats.map((a) => {
-        const c = geom.places[a.seat.n - 1].card;
-        const cw = (c.x1 - c.x0) * s;
-        const ch = (c.y1 - c.y0) * s;
-        const pad = Math.max(2 * m.k, cw * 0.05);
-        const r = clamp(cw * 0.2, 6 * m.k, 14 * m.k);
-        return { cw, ch, pad, r, width: cw - 2 * pad, height: ch - 2 * pad - r, max: Math.min(cw * 0.3, 26 * m.k) };
-    });
-    // The names are on the seats only when asked for; otherwise every seat is its number, and the chart is the key.
-    const fitted = setting.seatNames ? fitSeats(mat.seats, boxes, { min: m.cardMin, idLabel: words.chart.idLabel }) : mat.seats.map(() => undefined);
-    // A seat outside the picture (the referee in a close-up of the bench) has its name in the chart only: it does not fit.
-    const shown = mat.seats.map((a) => seatIn(geom.places[a.seat.n - 1], region));
-    const fits = mat.seats.map((a, i) => !a.assigned || (shown[i] && fitted[i] !== undefined));
-    mat.seats.forEach((a, i) => {
-        if (!shown[i])
-            return;
-        const place = geom.places[a.seat.n - 1];
-        const b = boxes[i];
-        const fit = fitted[i];
-        let g = "";
-        if (fit !== undefined)
-            g += card(PLAN_CARD, fit, a.seat.n, X(place.card.x0), Y(place.card.y0), b.cw, b.ch, b.pad, b.r, 3 * m.k);
-        else {
-            const br = clamp(Math.min(b.cw, 1.25 * s) * 0.42, 10 * m.k, 30 * m.k);
-            g += badge(PLAN_CARD, X((place.chair.x0 + place.chair.x1) / 2), Y((place.chair.y0 + place.chair.y1) / 2), br, a.seat.n, a.assigned);
-        }
-        markup += el("g", { class: "ky-ju-seat", "data-mat": mat.n, "data-seat": a.seat.id, "data-card": fit === undefined ? "no" : "yes" }, g);
-    });
-    return { markup, width: w, height: h, fits };
-}
 /** The picture of an assignment and what was worked out to make it. `mode` `chart` is the chart alone (for beside a 3D view). */
 export function judgingDrawing(options, mode = "full") {
     const setting = judgingSetting(mode === "chart" && options.width === undefined ? { ...options, width: 600 } : options);
+    if (setting.view === "broadcast" && mode === "full")
+        return broadcastDrawing(options, setting);
     const language = setting.language;
     const width = setting.width;
     const m = metricsOf(width);
     const geom = judgingPlan(setting.style);
     const region = setting.focus === "bench" ? geom.bench : { x0: geom.extent.x0 - 0.3, y0: geom.extent.y0 - 0.3, x1: geom.extent.x1 + 0.3, y1: geom.extent.y1 + 0.3 };
     const gid = safeClass(options.id).replace(/ /g, "-") || `ky-ju-${hash(JSON.stringify([options, mode, VERSION]))}`;
-    const league = JUDGING_LEAGUE[setting.style].league;
     const portrait = setting.orientation === "portrait";
     // The surface, drawn by the package: once for its stylesheet, then once for each mat (its ids differ).
-    let style = "";
-    let look;
-    const surfaces = mode === "chart" ? [] : setting.mats.map((mat, i) => {
-        const drawn = inner(drawKyogijo({ sport: "judo", league, budo: { style: setting.style, officials: true }, language, id: `${gid}-s${mat.n}`, style: i === 0 && options.css !== "none" ? "embed" : "none" }));
-        if (i === 0) {
-            style = drawn.style;
-            look = drawn.look;
-        }
-        return drawn;
-    });
+    const { surfaces, style, look } = surfacesOf(setting, options, gid, mode !== "chart");
     // Whether the chart is drawn: asked for, or every name fits in its seat when the plan has the room that the chart would take.
     const planBox = (withChart) => {
         if (portrait)
@@ -238,9 +148,9 @@ export function judgingDrawing(options, mode = "full") {
         "data-chart": chart ? "yes" : "no",
         "data-theme": options.theme === "light" || options.theme === "dark" ? options.theme : undefined,
         "data-version": VERSION,
-    }, `<title id="${titleId}">${esc(title)}</title><desc id="${descId}">${esc(description)}</desc>` + css + el("rect", { class: "ky-ju-ground", x: 0, y: 0, width, height }) + body);
+    }, metaMarkup(titleId, title, descId, description) + css + el("rect", { class: "ky-ju-ground", x: 0, y: 0, width, height }) + body);
     void cardsFit;
-    return { svg: root, width, height, chart, cards, title, description };
+    return { svg: root, width, height, chart, cards, title, description, boards: [] };
 }
 /**
  * A judging assignment as one SVG string: for each mat, the judo area with a badge at each judge's seat and, where the name and ID fit in the seat, a card with both, and beside it the chart of seat, name and ID, whose rows

package/dist/judging.js

@@ -5,7 +5,7 @@ import { JUDGING_LEAGUE, JUDGING_MATS_MAX, JUDGING_SEATS, JUDGING_SEAT_WORDS, JU
 import { JUDGING_WORDS } from "./judging.words.js";
 import { fill } from "./strings.js";
 /** The longest name, ID and mat label that are taken, in characters. */
-export const JUDGING_LIMITS = Object.freeze({ name: 120, id: 64, label: 40 });
+export const JUDGING_LIMITS = Object.freeze({ name: 120, id: 64, label: 40, line: 60 });
 /** Text made safe to show: control characters become spaces, runs of spaces one, the ends trimmed. */
 const clean = (text) => text.replace(/\p{Cc}/gu, " ").replace(/\s+/g, " ").trim();
 /** The seats of a style: every one, or without the optional ones (the side judges of a contest). @throws TypeError for a style that is not one. */
@@ -42,6 +42,17 @@ export function matLabel(mat, n, language) {
         throw new RangeError(`A mat's label is at most ${JUDGING_LIMITS.label} characters`);
     return label === "" ? fill(JUDGING_WORDS[language].mat, { n }) : label;
 }
+/** The line of a mat's broadcast board: the caller's, held to its length, or nothing. */
+export function matLine(mat) {
+    if (mat.line === undefined)
+        return "";
+    if (typeof mat.line !== "string")
+        throw new TypeError("a mat's line is text");
+    const line = clean(mat.line);
+    if ([...line].length > JUDGING_LIMITS.line)
+        throw new RangeError(`A mat's line is at most ${JUDGING_LIMITS.line} characters`);
+    return line;
+}
 const oneOf = (value, allowed, fallback, label) => {
     if (value === undefined)
         return fallback;
@@ -89,7 +100,7 @@ export function judgingSetting(options) {
         throw new TypeError("seatNames is true or false");
     // The seats that are drawn: every one that is not optional, and an optional one when asked for or when a mat names it.
     const shown = seats.filter((seat) => seat.optional !== true || options.sideJudges === true || given.some((m) => m.has(seat.id)));
-    const all = options.mats.map((mat, i) => ({ n: i + 1, label: matLabel(mat, i + 1, language), seats: shown.map((seat) => given[i].get(seat.id) ?? { seat, name: "", id: "", assigned: false }) }));
+    const all = options.mats.map((mat, i) => ({ n: i + 1, label: matLabel(mat, i + 1, language), line: matLine(mat), seats: shown.map((seat) => given[i].get(seat.id) ?? { seat, name: "", id: "", assigned: false }) }));
     let mats = all;
     if (options.mat !== undefined) {
         if (!Number.isInteger(options.mat) || options.mat < 1 || options.mat > all.length)
@@ -105,6 +116,7 @@ export function judgingSetting(options) {
         mats,
         total: all.length,
         chart: oneOf(options.chart, ["auto", "always", "never"], "auto", "chart"),
+        view: oneOf(options.view, ["plan", "broadcast"], "plan", "view"),
         orientation: oneOf(options.orientation, ["landscape", "portrait"], "landscape", "orientation"),
         focus: oneOf(options.focus, ["mat", "bench"], "mat", "focus"),
         width,

package/dist/judging.mount.d.ts

@@ -0,0 +1,16 @@
+import type { JudgingOptions } from "./judging.types.ts";
+import type { KyogijoTurn } from "./turn.dom.ts";
+import type { TurnSettings } from "./turn.model.ts";
+/** The stylesheet of the broadcast view's layout: the view 16:9, the board over its top right corner (a share of the view's width, so it grows and shrinks with it), under it where the view is narrower than 640 px. */
+export declare const KYOGIJO_JUDGING_BROADCAST_STYLE: string;
+/**
+ * Mount an assignment as the broadcast view: the 3D view of the mat, 16:9, with the board of the officials over it at its side. It returns the same handle as every 3D view (`preset`, `set`, `update`, `play`, `destroy`):
+ * `update` takes the next options and redraws both the view and the board. The options are `JudgingOptions`; `view` is always `broadcast` here. Pass `{ preset: "end" }` to open on another viewpoint.
+ * @example
+ * ```ts no-run
+ * import { mountJudgingBroadcast } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const view = mountJudgingBroadcast(document.querySelector("#mat")!, { style: "kata", mat: 1, mats: [{ label: "Mat 1", line: "Round 2", officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }] }] });
+ * view.preset("corner");
+ * ```
+ */
+export declare function mountJudgingBroadcast(host: HTMLElement, options: JudgingOptions, settings?: TurnSettings): KyogijoTurn<JudgingOptions>;

package/dist/judging.mount.js

@@ -0,0 +1,69 @@
+// The broadcast view in a page: the 3D view of the mat (the Broadcast camera by default, with every control the other 3D views have) in a 16:9 box, and over it, at its side, the board of the officials like a television
+// graphic. The board is the same drawing as the flat broadcast picture's (`judging.board.ts`), laid over the view by the page's own layout, so it scales evenly with the view and never takes the pointer: a drag on it
+// turns the mat. On a narrow screen the board has no room beside the mat without covering it, so it stands under the view instead. Where the browser cannot turn the view, the flat broadcast picture, which carries its
+// own board, is shown alone.
+import { judgingBoard } from "./judging.board.js";
+import { judgingSetting } from "./judging.js";
+import { mountJudgingTurn } from "./judging.turn.js";
+/** The stylesheet of the broadcast view's layout: the view 16:9, the board over its top right corner (a share of the view's width, so it grows and shrinks with it), under it where the view is narrower than 640 px. */
+export const KYOGIJO_JUDGING_BROADCAST_STYLE = `
+.ky-ju-bc{position:relative;container-type:inline-size;width:100%}
+.ky-ju-bc{--ky-ju-bc-bg:#dcd8c9}
+@media (prefers-color-scheme:dark){html:not([data-theme=light]) .ky-ju-bc{--ky-ju-bc-bg:#1b1f1c}}
+html[data-theme=dark] .ky-ju-bc{--ky-ju-bc-bg:#1b1f1c}
+.ky-ju-bc .ky-turn[data-theme=light] .ky-turn-view{background:#dcd8c9}
+.ky-ju-bc .ky-turn[data-theme=dark] .ky-turn-view{background:#1b1f1c}
+.ky-ju-bc .ky-turn .ky-turn-view{--ky-turn-ratio:16/9;min-height:0;background:var(--ky-ju-bc-bg);border-radius:12px}
+.ky-ju-bc-board{position:absolute;z-index:40;top:3cqw;right:2cqw;width:30cqw;pointer-events:none}
+.ky-ju-bc-board svg{display:block;width:100%;height:auto}
+.ky-ju-bc-board[hidden]{display:none}
+@container (max-width:639px){.ky-ju-bc-board{position:static;width:100%;max-width:480px;margin:8px auto 0}}
+`.trim();
+/**
+ * Mount an assignment as the broadcast view: the 3D view of the mat, 16:9, with the board of the officials over it at its side. It returns the same handle as every 3D view (`preset`, `set`, `update`, `play`, `destroy`):
+ * `update` takes the next options and redraws both the view and the board. The options are `JudgingOptions`; `view` is always `broadcast` here. Pass `{ preset: "end" }` to open on another viewpoint.
+ * @example
+ * ```ts no-run
+ * import { mountJudgingBroadcast } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const view = mountJudgingBroadcast(document.querySelector("#mat")!, { style: "kata", mat: 1, mats: [{ label: "Mat 1", line: "Round 2", officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }] }] });
+ * view.preset("corner");
+ * ```
+ */
+export function mountJudgingBroadcast(host, options, settings = {}) {
+    const asked = (o) => ({ ...o, view: "broadcast" });
+    // Held to what it may be before anything is written.
+    judgingSetting(asked(options));
+    host.innerHTML = `<div class="ky-ju-bc"><style>${KYOGIJO_JUDGING_BROADCAST_STYLE}</style><div class="ky-ju-bc-view"></div><div class="ky-ju-bc-board"></div></div>`;
+    const viewHost = host.querySelector(".ky-ju-bc-view");
+    const boardHost = host.querySelector(".ky-ju-bc-board");
+    const turn = mountJudgingTurn(viewHost, asked(options), settings);
+    const paint = (o) => {
+        boardHost.hidden = turn.mode !== "3d";
+        boardHost.innerHTML = turn.mode === "3d" ? judgingBoard(asked(o)) : "";
+    };
+    paint(options);
+    return {
+        get mode() {
+            return turn.mode;
+        },
+        get playing() {
+            return turn.playing;
+        },
+        view: () => turn.view(),
+        set: (view, glide) => turn.set(view, glide),
+        preset: (name) => turn.preset(name),
+        reset: () => turn.reset(),
+        update: (next) => {
+            turn.update(asked(next));
+            paint(next);
+        },
+        play: () => turn.play(),
+        pause: () => turn.pause(),
+        togglePlay: () => turn.togglePlay(),
+        svg: () => turn.svg(),
+        destroy: () => {
+            turn.destroy();
+            host.replaceChildren();
+        },
+    };
+}

package/dist/judging.plan.d.ts

@@ -0,0 +1,52 @@
+import { type JudgingPlan, type JudgingSetting } from "./judging.ts";
+import type { JudgingResolved } from "./judging.types.ts";
+import type { MBox } from "./budo/plan.ts";
+export declare const clamp: (v: number, lo: number, hi: number) => number;
+/** One mat's surface as markup: the drawing's own, without its title, its stylesheet and its apron. */
+export declare function inner(svg: string): {
+    body: string;
+    style: string;
+    look: string | undefined;
+};
+/** The numbers a drawing is laid out in, all in the picture's own units and proportional to its width, so that the picture is the same at any width. */
+export interface Metrics {
+    k: number;
+    pad: number;
+    gap: number;
+    titleH: number;
+    panelGap: number;
+    badge: number;
+    rowPad: number;
+    role: number;
+    nameMax: number;
+    nameMin: number;
+    cardMin: number;
+}
+export declare const metricsOf: (width: number) => Metrics;
+/** The plan of one mat at (x, y) in a box: the surface moved and clipped to the region shown, with a badge or a card at every seat. */
+export declare function planMarkup(mat: JudgingResolved, surface: {
+    body: string;
+}, geom: JudgingPlan, region: MBox, box: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}, m: Metrics, setting: JudgingSetting, clip: string, frame?: boolean): {
+    markup: string;
+    width: number;
+    height: number;
+    fits: boolean[];
+    x: number;
+    y: number;
+    scale: number;
+};
+/** Each mat's surface, drawn by the package: once for its stylesheet and its look, then once for each mat (its ids differ). `mode` `chart` draws none. */
+export declare function surfacesOf(setting: JudgingSetting, o: {
+    css?: "embed" | "none";
+}, gid: string, drawn?: boolean): {
+    surfaces: {
+        body: string;
+    }[];
+    style: string;
+    look: string | undefined;
+};

package/dist/judging.plan.js

@@ -0,0 +1,91 @@
+// The plan of a judging assignment, as the plan view and the broadcast view both draw it: the package's own judo area moved and clipped to the part that is shown, with a badge (or a name card) at every seat, and the
+// numbers a picture is laid out in. Kept apart from `judging.draw.ts` so that the two views share it.
+import { drawKyogijo } from "./draw.js";
+import { el, num } from "./format.js";
+import { PLAN_CARD, badge, card } from "./judging.card.js";
+import { fitSeats } from "./judging.fit.js";
+import { JUDGING_LEAGUE } from "./judging.data.js";
+import { seatIn } from "./judging.js";
+import { JUDGING_WORDS } from "./judging.words.js";
+/** Feet in a metre: the surface's own drawing is in feet. */
+const FT = 1 / 0.3048;
+export const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+/** One mat's surface as markup: the drawing's own, without its title, its stylesheet and its apron. */
+export function inner(svg) {
+    const look = /^<svg[^>]* data-look="([^"]*)"/.exec(svg)?.[1];
+    const style = /<style>([\s\S]*?)<\/style>/.exec(svg)?.[1] ?? "";
+    let body = svg.replace(/<style>[\s\S]*?<\/style>/, "");
+    body = body.slice(body.indexOf("</desc>") + "</desc>".length, body.lastIndexOf("</svg>"));
+    body = body.replace(/<rect class="ky-apron"[^>]*\/>/g, "");
+    return { body, style, look };
+}
+export const metricsOf = (width) => {
+    const k = width / 1000;
+    return { k, pad: 28 * k, gap: 28 * k, titleH: 62 * k, panelGap: 40 * k, badge: 60 * k, rowPad: 14 * k, role: 17 * k, nameMax: 34 * k, nameMin: 22 * k, cardMin: 12 * k };
+};
+/** The plan of one mat at (x, y) in a box: the surface moved and clipped to the region shown, with a badge or a card at every seat. */
+export function planMarkup(mat, surface, geom, region, box, m, setting, clip, frame = true) {
+    const rw = region.x1 - region.x0;
+    const rh = region.y1 - region.y0;
+    const s = Math.min(box.w / rw, box.h / rh);
+    const w = rw * s;
+    const h = rh * s;
+    const x = box.x + (box.w - w) / 2;
+    const y = box.y;
+    const sf = s / FT;
+    const X = (mx) => x + (mx - region.x0) * s;
+    const Y = (my) => y + (my - region.y0) * s;
+    const words = JUDGING_WORDS[setting.language];
+    let markup = el("clipPath", { id: clip }, el("rect", { x: num(region.x0 * FT), y: num(region.y0 * FT), width: num(rw * FT), height: num(rh * FT) }));
+    markup += el("rect", { class: "ky-apron", x, y, width: w, height: h });
+    markup += el("g", { class: "ky-ju-plan", "clip-path": `url(#${clip})`, transform: `translate(${num(x - region.x0 * FT * sf)} ${num(y - region.y0 * FT * sf)}) scale(${(sf).toFixed(5)})` }, surface.body);
+    if (frame)
+        markup += el("rect", { class: "ky-ju-plan-frame", x, y, width: w, height: h });
+    // The card of a seat is the place the plan gives it: for a kata judge its chair and the table in front of it, for a contest's referee and side judges a card of their own.
+    const boxes = mat.seats.map((a) => {
+        const c = geom.places[a.seat.n - 1].card;
+        const cw = (c.x1 - c.x0) * s;
+        const ch = (c.y1 - c.y0) * s;
+        const pad = Math.max(2 * m.k, cw * 0.05);
+        const r = clamp(cw * 0.2, 6 * m.k, 14 * m.k);
+        return { cw, ch, pad, r, width: cw - 2 * pad, height: ch - 2 * pad - r, max: Math.min(cw * 0.3, 26 * m.k) };
+    });
+    // The names are on the seats only when asked for; otherwise every seat is its number, and the chart is the key.
+    const fitted = setting.seatNames ? fitSeats(mat.seats, boxes, { min: m.cardMin, idLabel: words.chart.idLabel }) : mat.seats.map(() => undefined);
+    // A seat outside the picture (the referee in a close-up of the bench) has its name in the chart only: it does not fit.
+    const shown = mat.seats.map((a) => seatIn(geom.places[a.seat.n - 1], region));
+    const fits = mat.seats.map((a, i) => !a.assigned || (shown[i] && fitted[i] !== undefined));
+    mat.seats.forEach((a, i) => {
+        if (!shown[i])
+            return;
+        const place = geom.places[a.seat.n - 1];
+        const b = boxes[i];
+        const fit = fitted[i];
+        let g = "";
+        if (fit !== undefined)
+            g += card(PLAN_CARD, fit, a.seat.n, X(place.card.x0), Y(place.card.y0), b.cw, b.ch, b.pad, b.r, 3 * m.k);
+        else {
+            const br = clamp(Math.min(b.cw, 1.25 * s) * 0.42, 10 * m.k, 30 * m.k);
+            g += badge(PLAN_CARD, X((place.chair.x0 + place.chair.x1) / 2), Y((place.chair.y0 + place.chair.y1) / 2), br, a.seat.n, a.assigned);
+        }
+        markup += el("g", { class: "ky-ju-seat", "data-mat": mat.n, "data-seat": a.seat.id, "data-card": fit === undefined ? "no" : "yes" }, g);
+    });
+    return { markup, width: w, height: h, fits, x, y, scale: s };
+}
+/** Each mat's surface, drawn by the package: once for its stylesheet and its look, then once for each mat (its ids differ). `mode` `chart` draws none. */
+export function surfacesOf(setting, o, gid, drawn = true) {
+    const league = JUDGING_LEAGUE[setting.style].league;
+    let style = "";
+    let look;
+    const surfaces = drawn
+        ? setting.mats.map((mat, i) => {
+            const one = inner(drawKyogijo({ sport: "judo", league, budo: { style: setting.style, officials: true }, language: setting.language, id: `${gid}-s${mat.n}`, style: i === 0 && o.css !== "none" ? "embed" : "none" }));
+            if (i === 0) {
+                style = one.style;
+                look = one.look;
+            }
+            return one;
+        })
+        : [];
+    return { surfaces, style, look };
+}

package/dist/judging.print.d.ts

@@ -0,0 +1,58 @@
+import type { JudgingOptions } from "./judging.types.ts";
+/** The paper sizes, in millimetres (ISO 216 for A4, ANSI for US letter), portrait. */
+export declare const JUDGING_PAPER: Readonly<{
+    a4: Readonly<{
+        name: "A4";
+        width: 210;
+        height: 297;
+    }>;
+    letter: Readonly<{
+        name: "US letter";
+        width: 215.9;
+        height: 279.4;
+    }>;
+}>;
+/** What a printout is asked for: the paper, how it lies and the margin all round, in millimetres. */
+export interface JudgingPrintOptions {
+    /** `a4` (the default) or `letter`. */
+    paper?: keyof typeof JUDGING_PAPER;
+    /** `portrait` (the default: the plan above the chart) or `landscape` (the chart beside the plan). */
+    orientation?: "portrait" | "landscape";
+    /** The margin on all four sides, 5 to 30 mm (12 by default). */
+    margin?: number;
+}
+/**
+ * The stylesheet of a printout: the `@page` rule (the paper's name, how it lies and the margin), a page break after every sheet but the last, and each sheet as tall as the printable area less a millimetre (a sheet exactly as
+ * tall as the page makes some browsers print a blank page after it). The colours are kept as they are on paper (`print-color-adjust`).
+ * @example
+ * ```ts
+ * import { judgingPrintStyle } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * console.log(judgingPrintStyle({ paper: "letter" }).includes("size:Letter portrait"));
+ * // true
+ * ```
+ */
+export declare function judgingPrintStyle(print?: JudgingPrintOptions): string;
+/**
+ * The pages of a printout as markup: one `<section class="ky-ju-sheet">` for each mat (all of them, or the one `mat` names), each holding that mat's picture in the plan-and-chart layout, light, and held to the page's
+ * shape (portrait or landscape). The picture is anchored at the top of its page and scaled as a whole, so no type in it is stretched. Add `judgingPrintStyle` for the pages to be what is printed.
+ * @example
+ * ```ts
+ * import { judgingPrintSheets } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const html = judgingPrintSheets({ style: "kata", mats: [{ officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }] }, {}] });
+ * console.log(html.split("ky-ju-sheet\"").length - 1);
+ * // 2
+ * ```
+ */
+export declare function judgingPrintSheets(options: JudgingOptions, print?: JudgingPrintOptions): string;
+/**
+ * A whole HTML document to print or save as a PDF: the pages (`judgingPrintSheets`) under the printout's stylesheet, which on a screen shows each sheet as a page of the paper laid on a grey desk. Open it in a browser and
+ * print; choose "Save as PDF" for a file. Nothing in it is fetched.
+ * @example
+ * ```ts
+ * import { judgingPrint } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const html = judgingPrint({ style: "kata", mats: [{ label: "Mat 1", officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }] }] }, { paper: "letter" });
+ * console.log(html.startsWith("<!doctype html>"), html.includes("size:Letter portrait"));
+ * // true true
+ * ```
+ */
+export declare function judgingPrint(options: JudgingOptions, print?: JudgingPrintOptions): string;

package/dist/judging.print.js

@@ -0,0 +1,86 @@
+// A judging assignment on paper: one mat to a page, on A4 or US letter, in the plan-and-chart layout (the one that prints well), always in the light colours, with the picture scaled evenly to fill the page's printable
+// area and nothing else on it. `judgingPrintStyle` is the stylesheet (the `@page` size and margins and the page breaks), `judgingPrintSheets` the pages as markup for a page that already has the style, and `judgingPrint`
+// a whole HTML document that opens on screen as the pages laid one under another and prints as they are. Pure: the same options give the same text.
+import { esc } from "./format.js";
+import { drawJudging } from "./judging.draw.js";
+import { judgingSetting } from "./judging.js";
+import { judgingText } from "./judging.text.js";
+/** The paper sizes, in millimetres (ISO 216 for A4, ANSI for US letter), portrait. */
+export const JUDGING_PAPER = Object.freeze({ a4: Object.freeze({ name: "A4", width: 210, height: 297 }), letter: Object.freeze({ name: "US letter", width: 215.9, height: 279.4 }) });
+function ask(print) {
+    const paper = print?.paper ?? "a4";
+    if (!(paper in JUDGING_PAPER))
+        throw new TypeError(`paper is ${Object.keys(JUDGING_PAPER).map((p) => `"${p}"`).join(" or ")}`);
+    const orientation = print?.orientation ?? "portrait";
+    if (orientation !== "portrait" && orientation !== "landscape")
+        throw new TypeError('orientation is "portrait" or "landscape"');
+    const margin = print?.margin ?? 12;
+    if (typeof margin !== "number" || !Number.isFinite(margin) || margin < 5 || margin > 30)
+        throw new RangeError("margin is a number of millimetres from 5 to 30");
+    const size = JUDGING_PAPER[paper];
+    const [w, h] = orientation === "portrait" ? [size.width, size.height] : [size.height, size.width];
+    return { paper, orientation, margin, width: w - 2 * margin, height: h - 2 * margin };
+}
+/** A length in millimetres as CSS, trimmed of the noise of a float. */
+const mm = (value) => `${Math.round(value * 100) / 100}mm`;
+/**
+ * The stylesheet of a printout: the `@page` rule (the paper's name, how it lies and the margin), a page break after every sheet but the last, and each sheet as tall as the printable area less a millimetre (a sheet exactly as
+ * tall as the page makes some browsers print a blank page after it). The colours are kept as they are on paper (`print-color-adjust`).
+ * @example
+ * ```ts
+ * import { judgingPrintStyle } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * console.log(judgingPrintStyle({ paper: "letter" }).includes("size:Letter portrait"));
+ * // true
+ * ```
+ */
+export function judgingPrintStyle(print) {
+    const a = ask(print);
+    const name = a.paper === "a4" ? "A4" : "Letter";
+    return [
+        `@page{size:${name} ${a.orientation};margin:${mm(a.margin)}}`,
+        `.ky-ju-sheets{margin:0;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}`,
+        `.ky-ju-sheet{box-sizing:border-box;display:block;width:${mm(a.width)};height:${mm(a.height - 1)};margin:0;padding:0;overflow:hidden;break-after:page;page-break-after:always;break-inside:avoid}`,
+        `.ky-ju-sheet:last-child{break-after:auto;page-break-after:auto}`,
+        `.ky-ju-sheet>svg.kyogijo{display:block;width:100%;height:100%}`,
+        `.ky-ju-sheet .ky-ju-ground{fill:#fff}`,
+    ].join("\n");
+}
+/**
+ * The pages of a printout as markup: one `<section class="ky-ju-sheet">` for each mat (all of them, or the one `mat` names), each holding that mat's picture in the plan-and-chart layout, light, and held to the page's
+ * shape (portrait or landscape). The picture is anchored at the top of its page and scaled as a whole, so no type in it is stretched. Add `judgingPrintStyle` for the pages to be what is printed.
+ * @example
+ * ```ts
+ * import { judgingPrintSheets } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const html = judgingPrintSheets({ style: "kata", mats: [{ officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }] }, {}] });
+ * console.log(html.split("ky-ju-sheet\"").length - 1);
+ * // 2
+ * ```
+ */
+export function judgingPrintSheets(options, print) {
+    const a = ask(print);
+    const setting = judgingSetting(options);
+    const sheets = setting.mats.map((mat) => {
+        const svg = drawJudging({ ...options, mat: mat.n, view: "plan", theme: "light", orientation: a.orientation, ...(options.id === undefined ? {} : { id: `${options.id}-m${mat.n}` }) });
+        return `<section class="ky-ju-sheet" data-mat="${mat.n}">${svg.replace("<svg ", '<svg preserveAspectRatio="xMidYMin meet" ')}</section>`;
+    });
+    return `<div class="ky-ju-sheets" data-paper="${a.paper}" data-orientation="${a.orientation}">${sheets.join("")}</div>`;
+}
+/**
+ * A whole HTML document to print or save as a PDF: the pages (`judgingPrintSheets`) under the printout's stylesheet, which on a screen shows each sheet as a page of the paper laid on a grey desk. Open it in a browser and
+ * print; choose "Save as PDF" for a file. Nothing in it is fetched.
+ * @example
+ * ```ts
+ * import { judgingPrint } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const html = judgingPrint({ style: "kata", mats: [{ label: "Mat 1", officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }] }] }, { paper: "letter" });
+ * console.log(html.startsWith("<!doctype html>"), html.includes("size:Letter portrait"));
+ * // true true
+ * ```
+ */
+export function judgingPrint(options, print) {
+    const a = ask(print);
+    const setting = judgingSetting(options);
+    const { title } = judgingText(setting, options, true, "plan");
+    const screen = `@media screen{body{background:#cfd3d6}.ky-ju-sheet{background:#fff;margin:8mm auto;padding:${mm(a.margin)};width:${mm(a.width + 2 * a.margin)};height:${mm(a.height + 2 * a.margin)};box-shadow:0 2px 12px rgba(0,0,0,.3)}}`;
+    const head = `<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${esc(title)}</title><style>body{margin:0;color:#10151b;font:16px system-ui,sans-serif}\n${judgingPrintStyle(print)}\n${screen}</style>`;
+    return `<!doctype html><html lang="${setting.language}"><head>${head}</head><body>${judgingPrintSheets(options, print)}</body></html>`;
+}

package/dist/judging.style.d.ts

@@ -6,3 +6,8 @@ export declare const JUDGING_DARK = "--ky-ju-bg:#0d1218;--ky-ju-ink:#f6f3ea;--ky
  * dark forces it. The colours are custom properties (`--ky-ju-*`) a page can set.
  */
 export declare const KYOGIJO_JUDGING_STYLE: string;
+/**
+ * What a board needs of the drawing's own rules, for a board drawn on its own (`judgingBoard`, laid over the 3D view): the plate, the chips, the ink and the face, scoped to the board so that they cannot change the
+ * surface it lies over (the stylesheet of a page is shared by every drawing in it, and the drawing's whole stylesheet would set the surface's colours again). The values are the drawing's.
+ */
+export declare const KYOGIJO_JUDGING_BOARD_STYLE: string;

package/dist/judging.style.js

@@ -27,4 +27,26 @@ export const KYOGIJO_JUDGING_STYLE = `
 .kyogijo .ky-ju-card-name{fill:var(--ky-ju-card-ink);font-family:var(--ky-font);font-weight:800;text-anchor:middle}
 .kyogijo .ky-ju-card-id{fill:var(--ky-ju-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;text-anchor:middle;font-variant-numeric:tabular-nums}
 .kyogijo .ky-ju-plan-frame{fill:none;stroke:var(--ky-ju-rule);stroke-width:1.5}
+.kyogijo .ky-ju-board .ky-plate-bg{stroke:var(--ky-plate-ink);stroke-opacity:.16;stroke-width:1.5}
+.kyogijo .ky-ju-board .ky-comp.ky-ju-board-title{opacity:1;font-weight:800}
+.kyogijo .ky-ju-board .ky-ju-board-id{font-weight:800;font-variant-numeric:tabular-nums}
+.kyogijo .ky-ju-chip-empty{fill:none;stroke:var(--ky-plate-ink);stroke-opacity:.5;stroke-width:1.5;stroke-dasharray:5 4}
+.kyogijo .ky-ju-board-vacant{fill:var(--ky-plate-ink);opacity:.72;font-family:var(--ky-font);font-weight:700;font-style:italic}
+.kyogijo .ky-ju-board .ky-ju-badge-empty{fill:none;stroke:var(--ky-plate-ink)}
+.kyogijo .ky-ju-board .ky-ju-badge-empty+.ky-ju-badge-n{fill:var(--ky-plate-ink)}
+`.trim();
+/**
+ * What a board needs of the drawing's own rules, for a board drawn on its own (`judgingBoard`, laid over the 3D view): the plate, the chips, the ink and the face, scoped to the board so that they cannot change the
+ * surface it lies over (the stylesheet of a page is shared by every drawing in it, and the drawing's whole stylesheet would set the surface's colours again). The values are the drawing's.
+ */
+export const KYOGIJO_JUDGING_BOARD_STYLE = `
+:where(.ky-judging-board){--ky-ink:#1f2320;--ky-plate:rgba(18,24,21,.9);--ky-plate-ink:#fff;--ky-left:#2f6db0;--ky-left-ink:#fff;--ky-font:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;display:block;width:100%;height:auto;font-family:var(--ky-font)}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .ky-judging-board:not([data-theme=light])){--ky-ink:#ece8dc;--ky-plate:rgba(0,0,0,.82)}}
+:where(html[data-theme=dark] .ky-judging-board,.ky-judging-board[data-theme=dark]){--ky-ink:#ece8dc;--ky-plate:rgba(0,0,0,.82)}
+.ky-judging-board .ky-text{fill:var(--ky-ink);font-family:var(--ky-font);font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums}
+.ky-judging-board .ky-ink-left{fill:var(--ky-left-ink)}
+.ky-judging-board .ky-panel-left{fill:var(--ky-left)}
+.ky-judging-board .ky-plate-bg{fill:var(--ky-plate)}
+.ky-judging-board .ky-score{fill:var(--ky-plate-ink);font-weight:800}
+.ky-judging-board .ky-comp,.ky-judging-board .ky-foot{fill:var(--ky-plate-ink);text-anchor:middle;opacity:.82;font-weight:700}
 `.trim();

package/dist/judging.text.d.ts

@@ -0,0 +1,7 @@
+import type { JudgingSetting } from "./judging.ts";
+import type { JudgingOptions } from "./judging.types.ts";
+/** The title and the description of an assignment: each mat with each seat and who is in it. */
+export declare function judgingText(setting: JudgingSetting, options: Pick<JudgingOptions, "title" | "description">, chart: boolean, view?: "plan" | "broadcast"): {
+    title: string;
+    description: string;
+};