@johnmorrisdotca/kyogijo-stadiums 0.16.1 → 0.18.0

package/dist/judging.draw.js

@@ -0,0 +1,293 @@
+// 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, seatIn } 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 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) };
+    });
+    const fitted = fitSeats(mat.seats, boxes, { min: m.cardMin, idLabel: words.chart.idLabel });
+    // 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.3, 7 * m.k, 16 * 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);
+    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,54 @@
+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;
+/** The box a card gives a seat's name and ID, and the biggest size its name may be set in. */
+export interface SeatBox {
+    width: number;
+    height: number;
+    max: number;
+}
+/**
+ * Fit the name and ID of every seat of a mat into its card, 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). `boxes` has the card box of each seat, in order.
+ */
+export declare function fitSeats(seats: readonly JudgingAssignment[], boxes: readonly SeatBox[], limits: {
+    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 its card, 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). `boxes` has the card box of each seat, in order.
+ */
+export function fitSeats(seats, boxes, limits) {
+    const ask = (a, i, max) => (a.assigned ? fitCard({ name: a.name, id: a.id, idLabel: limits.idLabel, width: boxes[i].width, height: boxes[i].height, max, min: limits.min, maxLines: 3, breakWords: false }) : undefined);
+    const alone = seats.map((a, i) => ask(a, i, boxes[i].max));
+    const sizes = alone.filter((f) => f !== undefined).map((f) => f.nameSize);
+    const common = sizes.length === 0 ? Infinity : Math.min(...sizes);
+    return seats.map((a, i) => (alone[i] === undefined ? undefined : ask(a, i, Math.min(common, boxes[i].max))));
+}

package/dist/judging.js

@@ -0,0 +1,197 @@
+// 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_SEAT_WORDS, 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: every one, or without the optional ones (the side judges of a contest). @throws TypeError for a style that is not one. */
+export function seatsOf(style, only = "all") {
+    if (typeof style !== "string" || !JUDGING_STYLES.includes(style))
+        throw new TypeError(`judging style is ${JUDGING_STYLES.map((s) => `"${s}"`).join(" or ")}`);
+    const seats = JUDGING_SEATS[style];
+    return only === "all" ? seats : seats.filter((s) => s.optional !== true);
+}
+/**
+ * The seat a name stands for: its number (`3`, `"3"`), its key (`"judge-3"`, `"Judge 3"`, `"referee"`, `"timekeeper"`) or a word (`"central"`, `"scorer"`, `"jury"`).
+ * @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().replace(/\s+/g, "-") : "";
+    let found;
+    if (/^\d{1,2}$/.test(text))
+        found = seats.find((s) => s.n === Number(text));
+    else
+        found = seats.find((s) => s.id === text) ?? seats.find((s) => JUDGING_SEAT_WORDS[s.id]?.includes(text) === true);
+    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)`);
+    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 given = options.mats.map((mat, i) => {
+        if (typeof mat !== "object" || mat === null)
+            throw new TypeError("a mat is { label, officials }");
+        const byId = 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 (byId.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`);
+            byId.set(seat.id, { seat, name, id, assigned: name !== "" || id !== "" });
+        }
+        return byId;
+    });
+    if (options.sideJudges !== undefined && typeof options.sideJudges !== "boolean")
+        throw new TypeError("sideJudges 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 }) }));
+    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();
+/** A box of a given centre and size. */
+const around = (cx, cy, w, h) => ({ x0: cx - w / 2, y0: cy - h / 2, x1: cx + w / 2, y1: cy + h / 2 });
+const union = (boxes) => ({ x0: Math.min(...boxes.map((b) => b.x0)), y0: Math.min(...boxes.map((b) => b.y0)), x1: Math.max(...boxes.map((b) => b.x1)), y1: Math.max(...boxes.map((b) => b.y1)) });
+/** A card for a seat that is not at a table (the referee on the mat, a side judge at a corner): 2.6 m by 1.8 m, since there is room round them (ours). */
+const FREE_CARD = { w: 2.6, h: 1.8 };
+/**
+ * The judges' bench close up: the seats and their 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 };
+}
+/** A kata area's seats: five chairs behind one table, each with the card that lies over its chair and the table in front of it. */
+function kataPlaces(chairs, table, pitch) {
+    return chairs.map((chair) => {
+        const cx = (chair.x0 + chair.x1) / 2;
+        return { chair, card: { x0: cx - (pitch / 2 - 0.03), y0: chair.y0 - 0.05, x1: cx + (pitch / 2 - 0.03), y1: table.y1 } };
+    });
+}
+/**
+ * A contest's seats round one contest area (ours, but for the referee's: 2 m back from the line the athletes start on, at the centre, facing the table): the timekeeper, the scorekeeper and the referee supervisor in chairs
+ * behind the technical table, 1 m apart, and the side judges at two opposite corners of the contest area, 2 m out from them.
+ */
+function shiaiPlaces(contest, desk) {
+    const cx = (contest.x0 + contest.x1) / 2;
+    const cy = (contest.y0 + contest.y1) / 2;
+    const seat = (x, y, w, h) => ({ chair: around(x, y, 0.5, 0.5), card: around(x, y, w, h) });
+    const chairY = desk.y0 - 0.35;
+    const tableSeat = (x) => ({ chair: around(x, chairY, 0.5, 0.5), card: { x0: x - 0.47, y0: chairY - 0.3, x1: x + 0.47, y1: desk.y1 } });
+    return [
+        seat(cx, cy + 2, FREE_CARD.w, FREE_CARD.h),
+        tableSeat(cx - 1),
+        tableSeat(cx),
+        tableSeat(cx + 1),
+        seat(contest.x0 - 2, contest.y0 - 2, FREE_CARD.w, FREE_CARD.h),
+        seat(contest.x1 + 2, contest.y1 + 2, FREE_CARD.w, FREE_CARD.h),
+    ];
+}
+/** The plan of `count` mats side by side 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, count = 1) {
+    const key = `${style}:${count}`;
+    const hit = plans.get(key);
+    if (hit !== undefined)
+        return hit;
+    seatsOf(style);
+    const plan = budoPlan({ sport: "judo", league: JUDGING_LEAGUE[style].league, budo: { style, officials: true, areas: count } });
+    const judo = plan.judo;
+    const mats = [];
+    for (let mi = 0; mi < count; mi += 1) {
+        const contest = judo.contests[mi];
+        if (style === "kata") {
+            const per = JUDGING_SEATS.kata.length;
+            const chairs = judo.judges.seats.slice(mi * per, (mi + 1) * per);
+            const table = judo.judges.tables[mi];
+            if (chairs.length !== per || table === undefined)
+                throw new Error("The kata plan has no judges' seats");
+            const pitch = (chairs[per - 1].x0 - chairs[0].x0) / (per - 1);
+            mats.push({ places: kataPlaces(chairs, table, pitch), table, bench: benchOf(chairs, table, pitch, contest.y0) });
+        }
+        else {
+            const desk = judo.desks[mi];
+            if (desk === undefined)
+                throw new Error("The contest plan has no technical table");
+            const places = shiaiPlaces(contest, desk);
+            const atTable = places.slice(1, 4);
+            // The bench of a contest is its technical table with the three officials at it; the referee and the side judges are on the mat and at its corners, and are not in the picture of the bench.
+            const bench = { x0: Math.min(...atTable.map((p) => p.card.x0)) - 0.4, y0: atTable[0].chair.y0 - 0.9, x1: Math.max(...atTable.map((p) => p.card.x1)) + 0.4, y1: desk.y1 + 1.8 };
+            mats.push({ places, table: desk, bench });
+        }
+    }
+    const first = mats[0];
+    const chairs = first.places.map((p) => p.chair);
+    const pitch = style === "kata" ? (first.places[first.places.length - 1].chair.x0 - first.places[0].chair.x0) / (first.places.length - 1) : 1;
+    const extent = union([plan.extent, ...first.places.map((p) => p.card), ...first.places.map((p) => p.chair)]);
+    const built = { plan, mats, places: first.places, chairs, table: first.table, bench: first.bench, pitch, extent };
+    plans.set(key, built);
+    return built;
+}
+/** Whether a seat is in a box: its card's middle is inside it. A seat that is not is not drawn in a close-up of the bench, and its name is in the chart only. */
+export function seatIn(place, box) {
+    const x = (place.card.x0 + place.card.x1) / 2;
+    const y = (place.card.y0 + place.card.y1) / 2;
+    return x >= box.x0 && x <= box.x1 && y >= box.y0 && y <= box.y1;
+}

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;