@johnmorrisdotca/kyogijo-stadiums 0.16.1 → 0.17.0

package/dist/judging.draw.js

@@ -0,0 +1,288 @@
+// 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";
+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 } from "./judging.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 ? 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;
+    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) };
+        const fit = fitChart({ name: a.name, id: a.id, idLabel: words.chart.idLabel, width: textW, max: m.nameMax, min: m.nameMin });
+        const height = m.rowPad * 2 + m.role * LINE_HEIGHT + 6 * m.k + fit.height;
+        return { a, fit, height: Math.max(height, m.badge + 2 * m.rowPad) };
+    });
+}
+/** The chart of one mat as markup at (x, y), `width` wide, and its height. */
+function chartMarkup(mat, x, y, width, m, setting) {
+    const words = JUDGING_WORDS[setting.language];
+    const rows = chartRows(mat, width, m, setting);
+    const gap = 8 * m.k;
+    let cursor = 0;
+    let out = "";
+    for (const row of rows) {
+        const { a, fit } = row;
+        const cx = m.rowPad * 0.8 + m.badge / 2;
+        const tx = m.rowPad * 0.8 + m.badge + m.gap * 0.6;
+        let inside = el("rect", { class: "ky-ju-row", x: 0, y: cursor, width, height: row.height, rx: 14 * m.k });
+        inside += el("circle", { class: a.assigned ? "ky-ju-badge" : "ky-ju-badge ky-ju-badge-empty", cx, cy: cursor + row.height / 2, r: m.badge / 2 });
+        inside += el("text", { class: "ky-ju-badge-n", x: cx, y: cursor + row.height / 2 + m.badge * 0.18, "font-size": m.badge * 0.52 }, String(a.seat.n));
+        let ty = cursor + m.rowPad + m.role * 0.82;
+        inside += el("text", { class: "ky-ju-role", x: tx, y: ty, "font-size": m.role }, esc(a.seat.label[setting.language]));
+        ty += m.role * 0.3 + 6 * m.k;
+        if (fit === undefined) {
+            inside += el("text", { class: "ky-ju-vacant", x: tx, y: ty + m.nameMin * 0.95, "font-size": m.nameMin }, esc(words.chart.vacant));
+        }
+        else {
+            for (const line of fit.name) {
+                inside += el("text", { class: "ky-ju-name", x: tx, y: ty + fit.nameSize * 0.88, "font-size": fit.nameSize }, esc(line));
+                ty += fit.nameSize * LINE_HEIGHT;
+            }
+            if (fit.id.length > 0) {
+                ty += fit.name.length > 0 ? fit.nameSize * 0.28 : 0;
+                for (const line of fit.id) {
+                    inside += el("text", { class: "ky-ju-id", x: tx, y: ty + fit.idSize * 0.88, "font-size": fit.idSize }, esc(line));
+                    ty += fit.idSize * LINE_HEIGHT;
+                }
+            }
+        }
+        out += el("g", { class: "ky-ju-chart-row", "data-mat": mat.n, "data-seat": a.seat.id }, inside);
+        cursor += row.height + gap;
+    }
+    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 its chair and the table in front of it: a seat wide and as deep as both.
+    const cardW = (geom.pitch - 0.06) * s;
+    const cardH = (geom.table.y1 - (geom.chairs[0].y0 - 0.05)) * s;
+    const pad = Math.max(2 * m.k, cardW * 0.05);
+    const r = clamp(cardW * 0.2, 6 * m.k, 14 * m.k);
+    const innerW = cardW - 2 * pad;
+    const innerH = cardH - 2 * pad - r;
+    const fitted = fitSeats(mat.seats, { width: innerW, height: innerH, max: Math.min(cardW * 0.3, 26 * m.k), min: m.cardMin, idLabel: words.chart.idLabel });
+    const fits = mat.seats.map((a, i) => !a.assigned || fitted[i] !== undefined);
+    mat.seats.forEach((a, i) => {
+        const chair = geom.chairs[i];
+        const cx = X((chair.x0 + chair.x1) / 2);
+        const top = Y(chair.y0 - 0.05);
+        const fit = fitted[i];
+        let g = "";
+        if (fit !== undefined)
+            g += card(PLAN_CARD, fit, a.seat.n, cx - cardW / 2, top, cardW, cardH, pad, r, 3 * m.k);
+        else {
+            const br = clamp(geom.pitch * s * 0.3, 7 * m.k, 16 * m.k);
+            g += badge(PLAN_CARD, cx, Y((chair.y0 + 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);
+    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;
+    });
+    // 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)
+            return { w: width - 2 * m.pad, h: (withChart ? 0.66 : 0.86) * width };
+        return withChart ? { w: 0.48 * (width - 2 * m.pad - m.gap), h: 640 * m.k } : { w: width - 2 * m.pad, h: 0.82 * width };
+    };
+    const trial = (withChart) => {
+        const box = planBox(withChart);
+        return setting.mats.flatMap((mat, i) => planMarkup(mat, surfaces[i], geom, region, { x: 0, y: 0, ...box }, m, setting, "t").fits);
+    };
+    let chart = mode === "chart" || setting.chart === "always";
+    if (mode === "full" && setting.chart === "auto")
+        chart = !trial(false).every(Boolean);
+    if (mode === "full" && setting.chart === "never")
+        chart = false;
+    const cardsFit = mode === "chart" ? [] : trial(chart);
+    // The panels, one under another.
+    let body = "";
+    let y = m.pad;
+    const cards = [];
+    const styleText = fill(JUDGING_WORDS[language].styleName[setting.style], { count: setting.mats[0].seats.length });
+    setting.mats.forEach((mat, i) => {
+        let panel = el("text", { class: "ky-ju-mat", x: m.pad, y: y + 42 * m.k, "font-size": 38 * m.k }, esc(mat.label));
+        panel += el("text", { class: "ky-ju-style", x: width - m.pad, y: y + 40 * m.k, "font-size": 21 * m.k, "text-anchor": "end" }, esc(styleText));
+        const top = y + m.titleH;
+        let bottom = top;
+        if (mode === "full") {
+            const box = planBox(chart);
+            const plan = planMarkup(mat, surfaces[i], geom, region, { x: m.pad, y: top, ...box }, m, setting, `${gid}-c${mat.n}`);
+            panel += plan.markup;
+            bottom = top + plan.height;
+            mat.seats.forEach((a, k) => cards.push({ mat: mat.n, seat: a.seat.id, fits: plan.fits[k] }));
+            if (chart) {
+                const cx = portrait ? m.pad : m.pad + box.w + m.gap;
+                const cy = portrait ? bottom + m.gap : top;
+                const cw = portrait ? width - 2 * m.pad : width - m.pad - cx;
+                const c = chartMarkup(mat, cx, cy, cw, m, setting);
+                panel += c.markup;
+                bottom = Math.max(bottom, cy + c.height);
+            }
+        }
+        else {
+            const c = chartMarkup(mat, m.pad, top, width - 2 * m.pad, m, setting);
+            panel += c.markup;
+            bottom = top + c.height;
+        }
+        body += el("g", { class: "ky-ju-panel", "data-mat": mat.n }, panel);
+        y = bottom + m.panelGap;
+    });
+    const height = Math.ceil(y - m.panelGap + m.pad);
+    const { title, description } = judgingText(setting, options, chart);
+    const titleId = `${gid}-t`;
+    const descId = `${gid}-d`;
+    const css = options.css === "none" ? "" : `<style>${style}\n${KYOGIJO_JUDGING_STYLE}</style>`;
+    const root = el("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        class: `kyogijo ky-judging ky-judo${safeClass(options.className) === "" ? "" : ` ${safeClass(options.className)}`}`,
+        viewBox: `0 0 ${num(width)} ${num(height)}`,
+        role: "img",
+        "aria-labelledby": `${titleId} ${descId}`,
+        "data-sport": "judo",
+        "data-judging": setting.style,
+        "data-look": look ?? "yellow-red",
+        "data-mats": setting.total,
+        "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);
+    void cardsFit;
+    return { svg: root, width, height, chart, cards, title, description };
+}
+/**
+ * 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
+ * grow to hold every name whole. `style` is the style the areas are judged in (`kata`: five judges); `mats` the mat areas, each with its `label` (`Mat 1`, `Mat 2` when missing) and its `officials`, each a `seat`, a `name`
+ * and an `id`. `mat` draws one mat alone (a tab); `chart` is `auto`, `always` or `never`; `focus: "bench"` shows the judges' bench close up so that the names in the seats are as large as they can be. Light and dark follow the
+ * page; `judgingTable` is the same thing as a table.
+ * @example
+ * ```ts
+ * import { drawJudging } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const svg = drawJudging({
+ *   style: "kata",
+ *   mats: [{ label: "Mat 1", officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }, { seat: "central", name: "Daniel Okafor", id: "J-0377" }] }],
+ * });
+ * console.log(svg.startsWith("<svg"), svg.includes("Aiko Mori"), svg.includes("J-1042"));
+ * // true true true
+ * ```
+ */
+export function drawJudging(options) {
+    return judgingDrawing(options).svg;
+}
+/**
+ * The chart of an assignment alone: for each mat its seats in order, each with its number, its role, its name and, under the name, its ID, in rows that grow so that no name or ID is cut. For a page that draws
+ * the 3D view of the mat and puts the chart beside it.
+ * @example
+ * ```ts
+ * import { judgingChart } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const svg = judgingChart({ style: "kata", mats: [{ officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }] }] });
+ * console.log(svg.includes("ky-ju-chart-row"), svg.includes("Not assigned"));
+ * // true true
+ * ```
+ */
+export function judgingChart(options) {
+    return judgingDrawing(options, "chart").svg;
+}
+/**
+ * The same thing as the picture, as a table: each mat, each seat and who sits in it, with the ID. For a reader who cannot see the drawing, and for a page that wants the data.
+ * @example
+ * ```ts
+ * import { judgingTable } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const table = judgingTable({ style: "kata", mats: [{ officials: [{ seat: 3, name: "Daniel Okafor", id: "J-0377" }] }] });
+ * console.log(table.startsWith("<table"), table.includes("Daniel Okafor"));
+ * // true true
+ * ```
+ */
+export function judgingTable(options) {
+    const setting = judgingSetting(options);
+    const words = JUDGING_WORDS[setting.language];
+    const { title } = judgingText(setting, options, true);
+    const head = `<thead><tr><th scope="col">${esc(words.table.mat)}</th><th scope="col">${esc(words.table.seat)}</th><th scope="col">${esc(words.table.name)}</th><th scope="col">${esc(words.table.id)}</th></tr></thead>`;
+    const rows = setting.mats.flatMap((mat) => mat.seats.map((a) => `<tr><th scope="row">${esc(mat.label)}</th><td>${esc(a.seat.label[setting.language])}</td><td>${a.assigned ? esc(a.name) : esc(words.chart.vacant)}</td><td>${esc(a.id)}</td></tr>`)).join("");
+    return `<table class="ky-table" data-kind="judging"><caption>${esc(fill(words.table.caption, { title }))}</caption>${head}<tbody>${rows}</tbody></table>`;
+}

package/dist/judging.fit.d.ts

@@ -0,0 +1,51 @@
+import type { JudgingAssignment } from "./judging.types.ts";
+/** What a name and an ID were set as. */
+export interface CardFit {
+    name: string[];
+    nameSize: number;
+    /** The ID's lines (with its label), or none. */
+    id: string[];
+    idSize: number;
+    /** The width of the widest line and the height of the whole, in the box's units. */
+    width: number;
+    height: number;
+}
+/** What to fit, and how. Sizes and the box are in the same units. */
+export interface CardAsk {
+    name: string;
+    id: string;
+    /** The word before an ID (`ID`). */
+    idLabel: string;
+    width: number;
+    height: number;
+    /** The biggest and the smallest size of the name; the ID is set at 0.62 of the name's size and no smaller than 0.75 of the least. */
+    max: number;
+    min: number;
+    /** The most lines the name may take. */
+    maxLines: number;
+    /** Whether a word wider than the box may be broken inside (the chart), or the card does not fit (a seat). */
+    breakWords: boolean;
+}
+/** The lines a text is wrapped in at a size, no line wider than `width`, or undefined when a word is wider and breaking is not allowed. */
+export declare function wrapText(text: string, width: number, size: number, breakWords: boolean, measure?: (text: string) => number): string[] | undefined;
+/**
+ * Set a name, and an ID under it, in the biggest size that fits the box. Returns undefined when nothing from `max` down to `min` fits (for a card in a seat, that is "does not fit"); with `breakWords` and `maxLines` set
+ * as large as it takes, it always returns something, which may be taller than the box (the chart grows).
+ */
+export declare function fitCard(ask: CardAsk): CardFit | undefined;
+/**
+ * What the chart does: the biggest size at which the name takes three lines at most with no word broken, shrinking to the floor; then, at the floor, as many lines as it takes and a word wider than the row broken inside.
+ * It always fits, whatever the text, because the row grows.
+ */
+export declare function fitChart(ask: Omit<CardAsk, "maxLines" | "breakWords" | "height">): CardFit;
+/**
+ * Fit the name and ID of every seat of a mat into a card of one size, as one size for all of them, so that the row of cards reads evenly: each seat that has a name is fitted alone, the smallest size any of them needs is
+ * taken, and each is fitted again at that size. A seat whose name does not fit at the floor, or that has nobody in it, has no card (undefined).
+ */
+export declare function fitSeats(seats: readonly JudgingAssignment[], box: {
+    width: number;
+    height: number;
+    max: number;
+    min: number;
+    idLabel: string;
+}): (CardFit | undefined)[];

package/dist/judging.fit.js

@@ -0,0 +1,95 @@
+import { LINE_HEIGHT, textWidth } from "./text.js";
+/** The gap between the name and the ID, as a share of the name's size. */
+const GAP = 0.28;
+/** An ID's width in ems: a face with fixed-width digits and letters, a little wider than the proportional one. */
+const idWidth = (text) => textWidth(text, false) * 1.12;
+/** The lines a text is wrapped in at a size, no line wider than `width`, or undefined when a word is wider and breaking is not allowed. */
+export function wrapText(text, width, size, breakWords, measure = (t) => textWidth(t)) {
+    const words = text.trim().split(/\s+/).filter((w) => w !== "");
+    const lines = [];
+    let current = "";
+    const fits = (t) => measure(t) * size <= width + 1e-9;
+    for (const word of words) {
+        const joined = current === "" ? word : `${current} ${word}`;
+        if (fits(joined)) {
+            current = joined;
+            continue;
+        }
+        if (current !== "")
+            lines.push(current);
+        current = "";
+        if (fits(word)) {
+            current = word;
+            continue;
+        }
+        if (!breakWords)
+            return undefined;
+        // A word wider than the box: broken inside, by characters.
+        let piece = "";
+        for (const ch of word) {
+            if (piece !== "" && !fits(piece + ch)) {
+                lines.push(piece);
+                piece = ch;
+            }
+            else
+                piece += ch;
+        }
+        current = piece;
+    }
+    if (current !== "")
+        lines.push(current);
+    return lines;
+}
+/**
+ * Set a name, and an ID under it, in the biggest size that fits the box. Returns undefined when nothing from `max` down to `min` fits (for a card in a seat, that is "does not fit"); with `breakWords` and `maxLines` set
+ * as large as it takes, it always returns something, which may be taller than the box (the chart grows).
+ */
+export function fitCard(ask) {
+    const label = ask.id === "" ? "" : `${ask.idLabel} ${ask.id}`.trim();
+    const floor = Math.min(ask.min, ask.max);
+    // From the biggest size down to the floor in forty steps (and the floor itself last), in whatever unit the box is in.
+    const step = Math.max((ask.max - floor) / 40, 1e-4);
+    const sizes = [];
+    for (let size = ask.max; size > floor + 1e-9; size -= step)
+        sizes.push(size);
+    sizes.push(floor);
+    for (const size of sizes) {
+        const lines = ask.name === "" ? [] : wrapText(ask.name, ask.width, size, ask.breakWords);
+        if (lines === undefined || lines.length > ask.maxLines)
+            continue;
+        const idSize = Math.max(size * 0.62, floor * 0.75);
+        const idLines = label === "" ? [] : wrapText(label, ask.width, idSize, ask.breakWords, idWidth);
+        if (idLines === undefined || (!ask.breakWords && idLines.length > 1))
+            continue;
+        const height = lines.length * size * LINE_HEIGHT + (idLines.length > 0 ? (lines.length > 0 ? size * GAP : 0) + idLines.length * idSize * LINE_HEIGHT : 0);
+        if (height > ask.height + 1e-9)
+            continue;
+        const width = Math.max(0, ...lines.map((l) => textWidth(l) * size), ...idLines.map((l) => idWidth(l) * idSize));
+        return { name: lines, nameSize: size, id: idLines, idSize, width, height };
+    }
+    return undefined;
+}
+/**
+ * What the chart does: the biggest size at which the name takes three lines at most with no word broken, shrinking to the floor; then, at the floor, as many lines as it takes and a word wider than the row broken inside.
+ * It always fits, whatever the text, because the row grows.
+ */
+export function fitChart(ask) {
+    const whole = fitCard({ ...ask, height: Infinity, maxLines: 3, breakWords: false });
+    if (whole !== undefined)
+        return whole;
+    const fit = fitCard({ ...ask, max: ask.min, height: Infinity, maxLines: Infinity, breakWords: true });
+    if (fit === undefined)
+        throw new Error("a chart row always fits");
+    return fit;
+}
+/**
+ * Fit the name and ID of every seat of a mat into a card of one size, as one size for all of them, so that the row of cards reads evenly: each seat that has a name is fitted alone, the smallest size any of them needs is
+ * taken, and each is fitted again at that size. A seat whose name does not fit at the floor, or that has nobody in it, has no card (undefined).
+ */
+export function fitSeats(seats, box) {
+    const ask = (a, max) => (a.assigned ? fitCard({ name: a.name, id: a.id, idLabel: box.idLabel, width: box.width, height: box.height, max, min: box.min, maxLines: 3, breakWords: false }) : undefined);
+    const alone = seats.map((a) => ask(a, box.max));
+    const sizes = alone.filter((f) => f !== undefined).map((f) => f.nameSize);
+    const common = sizes.length === 0 ? box.max : Math.min(...sizes);
+    return seats.map((a, i) => (alone[i] === undefined ? undefined : ask(a, common)));
+}

package/dist/judging.js

@@ -0,0 +1,135 @@
+// A judging assignment worked out: the options held to what they may be, each mat's seats with who sits in them, and where the seats are on the plan. The plan is the package's own judo area (`budoPlan`), so that the
+// seats named here are the seats drawn, in metres from the top left of the tatami. Nothing here draws.
+import { budoPlan } from "./budo/plan.js";
+import { JUDGING_LEAGUE, JUDGING_MATS_MAX, JUDGING_SEATS, JUDGING_STYLES } from "./judging.data.js";
+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 });
+/** 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. @throws TypeError for a style that is not one. */
+export function seatsOf(style) {
+    if (typeof style !== "string" || !JUDGING_STYLES.includes(style))
+        throw new TypeError(`judging style is ${JUDGING_STYLES.map((s) => `"${s}"`).join(" or ")}`);
+    return JUDGING_SEATS[style];
+}
+/**
+ * The seat a name stands for: its number (`3`, `"3"`), its key (`"judge-3"`, `"Judge 3"`) or `"central"`.
+ * @throws RangeError for a seat the style does not have, naming the seats it has.
+ */
+export function seatOf(style, seat) {
+    const seats = seatsOf(style);
+    const text = typeof seat === "number" ? String(seat) : typeof seat === "string" ? seat.trim().toLowerCase() : "";
+    let found;
+    if (text === "central" || text === "centre" || text === "center")
+        found = seats.find((s) => s.role === "central");
+    else {
+        const m = /^(?:judge)?[-\s]?(\d{1,2})$/.exec(text);
+        if (m !== null)
+            found = seats.find((s) => s.n === Number(m[1]));
+    }
+    if (found === undefined)
+        throw new RangeError(`The ${style} area has no seat ${JSON.stringify(seat)}: its seats are ${seats.map((s) => s.id).join(", ")} (or their numbers, or "central")`);
+    return found;
+}
+/** The label of a mat: the caller's, held to its length, else the language's `Mat {n}`. */
+export function matLabel(mat, n, language) {
+    if (mat.label === undefined)
+        return fill(JUDGING_WORDS[language].mat, { n });
+    if (typeof mat.label !== "string")
+        throw new TypeError("a mat's label is text");
+    const label = clean(mat.label);
+    if ([...label].length > JUDGING_LIMITS.label)
+        throw new RangeError(`A mat's label is at most ${JUDGING_LIMITS.label} characters`);
+    return label === "" ? fill(JUDGING_WORDS[language].mat, { n }) : label;
+}
+const oneOf = (value, allowed, fallback, label) => {
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "string" || !allowed.includes(value))
+        throw new TypeError(`${label} is ${allowed.map((a) => `"${a}"`).join(" or ")}`);
+    return value;
+};
+/**
+ * Hold the options to what they may be and put each official in a seat.
+ * @throws TypeError for an option of the wrong kind, RangeError for a number of mats outside 1 to 6, a mat that does not exist, a seat the style does not have, a seat named twice on one mat or a text that is too long.
+ */
+export function judgingSetting(options) {
+    const style = options.style;
+    const seats = seatsOf(style);
+    if (!Array.isArray(options.mats) || options.mats.length < 1 || options.mats.length > JUDGING_MATS_MAX)
+        throw new RangeError(`An assignment has 1 to ${JUDGING_MATS_MAX} mats`);
+    const language = options.language === "ja" ? "ja" : "en";
+    const all = options.mats.map((mat, i) => {
+        if (typeof mat !== "object" || mat === null)
+            throw new TypeError("a mat is { label, officials }");
+        const given = new Map();
+        for (const official of mat.officials ?? []) {
+            if (typeof official !== "object" || official === null)
+                throw new TypeError("an official is { seat, name, id }");
+            const seat = seatOf(style, official.seat);
+            if (given.has(seat.id))
+                throw new RangeError(`Mat ${i + 1} names seat ${seat.id} twice`);
+            if (official.name !== undefined && typeof official.name !== "string")
+                throw new TypeError("an official's name is text");
+            if (official.id !== undefined && typeof official.id !== "string" && typeof official.id !== "number")
+                throw new TypeError("an official's id is text or a number");
+            const name = clean(official.name ?? "");
+            const id = clean(official.id === undefined ? "" : String(official.id));
+            if ([...name].length > JUDGING_LIMITS.name)
+                throw new RangeError(`A name is at most ${JUDGING_LIMITS.name} characters`);
+            if ([...id].length > JUDGING_LIMITS.id)
+                throw new RangeError(`An ID is at most ${JUDGING_LIMITS.id} characters`);
+            given.set(seat.id, { seat, name, id, assigned: name !== "" || id !== "" });
+        }
+        return { n: i + 1, label: matLabel(mat, i + 1, language), seats: seats.map((seat) => given.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)
+            throw new RangeError(`mat is a whole number from 1 to ${all.length}`);
+        mats = [all[options.mat - 1]];
+    }
+    const width = options.width ?? 1000;
+    if (typeof width !== "number" || !Number.isFinite(width) || width < 480 || width > 2000)
+        throw new RangeError("width is a number from 480 to 2000");
+    return {
+        style,
+        language,
+        mats,
+        total: all.length,
+        chart: oneOf(options.chart, ["auto", "always", "never"], "auto", "chart"),
+        orientation: oneOf(options.orientation, ["landscape", "portrait"], "landscape", "orientation"),
+        focus: oneOf(options.focus, ["mat", "bench"], "mat", "focus"),
+        width,
+    };
+}
+const plans = new Map();
+/**
+ * The judges' bench close up: the seats and the table with a little round them and a few rows of mats in front, from the seats of one mat or of several side by side. `matTop` is where the mats start (the top of the first
+ * contest area), so that the picture shows how the bench sits at the mat's edge; `front` instead says how far in front of the table the picture reaches, in metres (the 3D view, which turns, wants as little of the floor as will do).
+ */
+export function benchOf(chairs, table, pitch, matTop, front) {
+    const side = (pitch - 0.5) / 2 + 0.15;
+    return { x0: Math.min(...chairs.map((c) => c.x0)) - side, y0: chairs[0].y0 - 0.9, x1: Math.max(...chairs.map((c) => c.x1)) + side, y1: front === undefined ? Math.max(table.y1 + 1.8, matTop + 1.2) : table.y1 + front };
+}
+/** The plan of one mat of a style, with its seats: the package's own judo area, so that the seats named are the seats drawn. */
+export function judgingPlan(style) {
+    const hit = plans.get(style);
+    if (hit !== undefined)
+        return hit;
+    seatsOf(style);
+    const plan = budoPlan({ sport: "judo", league: JUDGING_LEAGUE[style].league, budo: { style, officials: true } });
+    const judges = plan.judo?.judges;
+    if (judges === undefined || judges.seats.length !== JUDGING_SEATS[style].length || judges.tables.length === 0)
+        throw new Error(`The ${style} plan has no judges' seats`);
+    const chairs = judges.seats.slice(0, JUDGING_SEATS[style].length);
+    const table = judges.tables[0];
+    const pitch = (chairs[chairs.length - 1].x0 - chairs[0].x0) / (chairs.length - 1);
+    const first = plan.judo.contests[0];
+    const bench = benchOf(chairs, table, pitch, first.y0);
+    const built = { plan, chairs, table, pitch, extent: plan.extent, bench };
+    plans.set(style, built);
+    return built;
+}

package/dist/judging.style.d.ts

@@ -0,0 +1,8 @@
+/** The colours of a judging picture in light and in dark, as custom properties (the 3D view's stylesheet carries them too, for its name cards). */
+export declare const JUDGING_LIGHT = "--ky-ju-bg:#f7f5ef;--ky-ju-ink:#10151b;--ky-ju-muted:#434b54;--ky-ju-row:#ffffff;--ky-ju-rule:#b9b3a3;--ky-ju-badge:#10151b;--ky-ju-badge-ink:#ffffff;--ky-ju-card:#ffffff;--ky-ju-card-ink:#10151b;--ky-ju-card-edge:#10151b;--ky-ju-vacant:#6a717a;--ky-ju-desk:#e9e2d0;--ky-ju-desk-edge:#4a4f56";
+export declare const JUDGING_DARK = "--ky-ju-bg:#0d1218;--ky-ju-ink:#f6f3ea;--ky-ju-muted:#bcc3cb;--ky-ju-row:#18212a;--ky-ju-rule:#475463;--ky-ju-badge:#f6f3ea;--ky-ju-badge-ink:#0d1218;--ky-ju-card:#18212a;--ky-ju-card-ink:#f6f3ea;--ky-ju-card-edge:#f6f3ea;--ky-ju-vacant:#98a1ab;--ky-ju-desk:#6f6859;--ky-ju-desk-edge:#05070a";
+/**
+ * The rules of a judging assignment. `:where` keeps the specificity at nothing so that a page's own custom properties win; the picture follows the device and the page like a drawing does, and a `data-theme` of light or
+ * dark forces it. The colours are custom properties (`--ky-ju-*`) a page can set.
+ */
+export declare const KYOGIJO_JUDGING_STYLE: string;

package/dist/judging.style.js

@@ -0,0 +1,30 @@
+// The rules of a judging assignment, light and dark: the picture's ground and ink, the chart's rows, the badge of a seat's number and the name card in a seat. Everything is high contrast on purpose: it is read live, on a tablet,
+// at arm's length. The surface keeps its own rules, which the drawing carries as it always does.
+/** The colours of a judging picture in light and in dark, as custom properties (the 3D view's stylesheet carries them too, for its name cards). */
+export const JUDGING_LIGHT = "--ky-ju-bg:#f7f5ef;--ky-ju-ink:#10151b;--ky-ju-muted:#434b54;--ky-ju-row:#ffffff;--ky-ju-rule:#b9b3a3;--ky-ju-badge:#10151b;--ky-ju-badge-ink:#ffffff;--ky-ju-card:#ffffff;--ky-ju-card-ink:#10151b;--ky-ju-card-edge:#10151b;--ky-ju-vacant:#6a717a;--ky-ju-desk:#e9e2d0;--ky-ju-desk-edge:#4a4f56";
+export const JUDGING_DARK = "--ky-ju-bg:#0d1218;--ky-ju-ink:#f6f3ea;--ky-ju-muted:#bcc3cb;--ky-ju-row:#18212a;--ky-ju-rule:#475463;--ky-ju-badge:#f6f3ea;--ky-ju-badge-ink:#0d1218;--ky-ju-card:#18212a;--ky-ju-card-ink:#f6f3ea;--ky-ju-card-edge:#f6f3ea;--ky-ju-vacant:#98a1ab;--ky-ju-desk:#6f6859;--ky-ju-desk-edge:#05070a";
+/**
+ * The rules of a judging assignment. `:where` keeps the specificity at nothing so that a page's own custom properties win; the picture follows the device and the page like a drawing does, and a `data-theme` of light or
+ * dark forces it. The colours are custom properties (`--ky-ju-*`) a page can set.
+ */
+export const KYOGIJO_JUDGING_STYLE = `
+:where(.kyogijo){${JUDGING_LIGHT}}
+@media (prefers-color-scheme:dark){:where(html:not([data-theme=light]) .kyogijo:not([data-theme=light])){${JUDGING_DARK}}}
+:where(html[data-theme=dark] .kyogijo,.kyogijo[data-theme=dark]){${JUDGING_DARK}}
+.kyogijo .ky-ju-ground{fill:var(--ky-ju-bg)}
+.kyogijo .ky-ju-mat{fill:var(--ky-ju-ink);font-family:var(--ky-font);font-weight:800}
+.kyogijo .ky-ju-style{fill:var(--ky-ju-muted);font-family:var(--ky-font);font-weight:700}
+.kyogijo .ky-ju-row{fill:var(--ky-ju-row);stroke:var(--ky-ju-rule);stroke-width:1.5}
+.kyogijo .ky-ju-role{fill:var(--ky-ju-muted);font-family:var(--ky-font);font-weight:700}
+.kyogijo .ky-ju-name{fill:var(--ky-ju-ink);font-family:var(--ky-font);font-weight:800}
+.kyogijo .ky-ju-id{fill:var(--ky-ju-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-variant-numeric:tabular-nums}
+.kyogijo .ky-ju-vacant{fill:var(--ky-ju-vacant);font-family:var(--ky-font);font-weight:700;font-style:italic}
+.kyogijo .ky-ju-badge{fill:var(--ky-ju-badge);stroke:var(--ky-ju-bg);stroke-width:2}
+.kyogijo .ky-ju-badge-empty{fill:var(--ky-ju-bg);stroke:var(--ky-ju-vacant);stroke-width:2;stroke-dasharray:4 3}
+.kyogijo .ky-ju-badge-n{fill:var(--ky-ju-badge-ink);font-family:var(--ky-font);font-weight:800;text-anchor:middle}
+.kyogijo .ky-ju-badge-empty+.ky-ju-badge-n{fill:var(--ky-ju-vacant)}
+.kyogijo .ky-ju-card{fill:var(--ky-ju-card);stroke:var(--ky-ju-card-edge);stroke-width:1.4}
+.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}
+`.trim();

package/dist/judging.turn.d.ts

@@ -0,0 +1,35 @@
+import type { JudgingOptions } from "./judging.types.ts";
+import { type KyogijoTurn } from "./turn.dom.ts";
+import { type PresetTable } from "./turn.camera.ts";
+import { type TurnModel, type TurnSettings } from "./turn.model.ts";
+/** How high things stand, in metres (ours: no rule gives them): the table's top, a chair's seat, a name card on the table, the sign over it. */
+export declare const JUDGING_HEIGHTS: Readonly<{
+    table: 0.75;
+    chair: 0.45;
+    card: 0.95;
+    sign: 0.7;
+    signAbove: 0.25;
+}>;
+/**
+ * The four viewpoints of a judging view. A card stands upright, so a high eye squashes its type: the broadcast view is from the mat side, so that the judges' table is at the far side and the cards face the eye, at a
+ * pitch where the type is still two thirds as tall as it is wide; the others are as every surface's but for the pitch of the corner and the end.
+ */
+export declare const JUDGING_PRESETS: PresetTable;
+/**
+ * A judging assignment as a 3D model: the judo floor with every mat's judges' chairs and table, a name card on the table at each seat that has a name and fits one, a number badge at the others, and the mat's name on a sign.
+ * A `TurnModel` like any other: `turnMarkupOf` and `mountJudgingTurn` make a view of it. `mat` in the options builds one mat alone (a tab); without it the mats stand side by side.
+ */
+export declare function buildJudgingTurn(options: JudgingOptions, settings?: TurnSettings): TurnModel;
+/**
+ * Mount a judging assignment as a 3D view in a container: the same view as `mountKyogijoTurn`'s, with the controls, the pointer, the keys and the auto-turn of every 3D view, over the judo floor with each mat's judges'
+ * table, the name cards on it and the mat's name over it. Where the browser cannot turn it, the flat picture with its chart is shown.
+ * @example
+ * ```ts no-run
+ * import { mountJudgingTurn } from "@johnmorrisdotca/kyogijo-stadiums/judging";
+ * const view = mountJudgingTurn(document.querySelector("#mat")!, { style: "kata", mats: [{ officials: [{ seat: 1, name: "Aiko Mori", id: "J-1042" }] }] });
+ * view.set({ yaw: 40 });
+ * ```
+ */
+export declare function mountJudgingTurn(host: HTMLElement, options: JudgingOptions, settings?: TurnSettings): KyogijoTurn<JudgingOptions>;
+/** A judging assignment as the markup of a 3D view, still until a page's script makes it turn: pure, so a server can make it. */
+export declare function judgingTurnMarkup(options: JudgingOptions, settings?: TurnSettings): string;