@johnmorrisdotca/kyogijo-stadiums 0.7.0 → 0.9.0

package/dist/crowd.draw.js

@@ -49,8 +49,10 @@ function tile(seed, density, share, team, neutral = false) {
     return el("g", { fill: "none", "stroke-linecap": "round", "stroke-width": 2.3 }, out + headPaths);
 }
 /** The tiles a crowd needs: the home tile, the home tile of the upper tiers (emptier) and the visitors', and the display tiles. */
-function patterns(id, crowd, density, tifo, neutral = false) {
-    const make = (suffix, body, size = TILE) => el("pattern", { id: `${id}-cr-${suffix}`, width: size, height: size, patternUnits: "userSpaceOnUse" }, body);
+export function patterns(id, crowd, density, tifo, neutral = false, rows = false) {
+    // A 3D view's tiles carry the lines of the rows too (a row every third of a tile, along the tile's x), so that a raked plane is textured and not drawn seat by seat.
+    const rowLines = rows ? el("path", { class: "ky-cr-row", d: `M0 .3H${TILE}M0 ${TILE / 3 + 0.3}H${TILE}M0 ${(2 * TILE) / 3 + 0.3}H${TILE}`, fill: "none" }) : "";
+    const make = (suffix, body, size = TILE) => el("pattern", { id: `${id}-cr-${suffix}`, width: size, height: size, patternUnits: "userSpaceOnUse" }, size === TILE ? body + rowLines : body);
     let out = make("h", tile(crowd.seed * 7 + 1, density, neutral ? 0 : 0.88, "ky-cr-h", neutral)) + make("a", tile(crowd.seed * 7 + 3, Math.min(1, density * 1.04), 0.94, "ky-cr-a"));
     if (tifo !== undefined) {
         const stripes = (cls) => el("rect", { class: cls, width: 3, height: 6 }) + el("rect", { class: "ky-cr-tw", x: 3, width: 3, height: 6 });
@@ -105,6 +107,30 @@ function rows(ring) {
     }
     return d.length === 0 ? "" : el("path", { class: "ky-cr-row", d: d.join("") });
 }
+/**
+ * The seats of a hall's gallery seen from above: its band stepped into rows (a gallery's rows are about 0.8 m, 2.6 feet, deep), each row a dashed line for the cushions with a thinner, darker one behind
+ * it for the backs, and the aisles across the band as lighter stripes between the blocks of seats. Plain seats and empty: the people, when asked for, are laid over.
+ */
+function galleryRows(ring) {
+    const h = ring.hole;
+    const depth = ring.to - ring.from;
+    const rows = ring.rows ?? Math.max(1, Math.round(depth / 2.62));
+    if (h === null || h.kind !== "rrect")
+        return "";
+    const step = depth / rows;
+    const line = (k) => outlinePath({ kind: "rrect", x0: h.x0 - k, y0: h.y0 - k, x1: h.x1 + k, y1: h.y1 + k, r: h.r + k });
+    const cushions = [];
+    const backs = [];
+    for (let i = 0; i < rows; i += 1) {
+        const k = (i + 0.5) * step;
+        cushions.push(line(k - step * 0.12));
+        backs.push(line(k + step * 0.32));
+    }
+    const gaps = ring.aisles.map(([[x0, y0], [x1, y1]]) => `M${n1(x0)} ${n1(y0)}L${n1(x1)} ${n1(y1)}`).join("");
+    return (el("path", { class: "ky-bud-grow", d: cushions.join(""), fill: "none", "stroke-width": num(step * 0.5), "stroke-dasharray": "1.5 .5" }) +
+        el("path", { class: "ky-bud-gback", d: backs.join(""), fill: "none", "stroke-width": num(step * 0.16), "stroke-dasharray": "1.5 .5" }) +
+        (gaps === "" ? "" : el("path", { class: "ky-bud-gaisle", d: gaps, fill: "none", "stroke-width": 3.4 })));
+}
 const poly = (points) => `M${points.map(([x, y]) => `${Math.round(x)} ${Math.round(y)}`).join("L")}Z`;
 /** The stands and the crowd as markup and the defs it uses. The markup is laid over the ground and under the surface. */
 export function drawCrowd(stands, o) {
@@ -134,7 +160,10 @@ export function drawCrowd(stands, o) {
         // The upper tiers are a little emptier: their paint is the same tile with the empty seats' bed showing through a veil.
         // The bed of seats under the tile, so that no seam of the pattern shows light.
         const bed = stands.gallery === true ? "ky-cr-bed ky-bud-gbed" : "ky-cr-bed";
-        if (fine)
+        // A hall's gallery, seen from above, is neat rows of seats along its band (a few people are not drawn: it is subtle).
+        if (stands.gallery === true && fine)
+            body += el("path", { class: bed, d: path(ring) }) + galleryRows(ring) + (density > 0 ? el("path", { class: "ky-cr-people", d: path(ring), fill: `url(#${id}-cr-h)` }) : "");
+        else if (fine)
             body += el("path", { class: bed, d: path(ring) }) + el("path", { class: "ky-cr-people", d: path(ring), fill: `url(#${id}-cr-h)` });
         else
             body += el("path", { class: bed, d: path(ring) }) + el("path", { class: stands.gallery === true ? "ky-cr-blk ky-bud-gblk" : "ky-cr-blk", d: path(ring), "fill-opacity": num(0.28 + 0.6 * density * ring.fill) });
@@ -145,7 +174,7 @@ export function drawCrowd(stands, o) {
         body += sector(s, id, fine, density);
     if (fine)
         for (const ring of stands.rings)
-            body += rows(ring) + (stands.gallery === true ? "" : aisles(ring));
+            body += stands.gallery === true ? "" : rows(ring) + aisles(ring);
     // Depth: the front wall of a tier throws a shade on its first rows (and the ground in front of it), the roof's edge on the last rows of the upper tier.
     // A gallery's railing: a line along its front edge, over the seats.
     if (stands.gallery === true)
@@ -166,7 +195,7 @@ export function drawCrowd(stands, o) {
         const [x0, y0, x1, y1] = g.box;
         body += el("rect", { class: `ky-cr-${g.kind}`, x: n1(x0), y: n1(y0), width: n1(x1 - x0), height: n1(y1 - y0), rx: g.kind === "bench" ? 1 : undefined });
     }
-    return { defs: (fine ? patterns(id, crowd, density, tifo.home || tifo.away ? tifo : undefined, stands.gallery === true) : ""), markup: el("g", { class: "ky-crowd" }, body), over };
+    return { defs: (fine && (stands.gallery !== true || density > 0) ? patterns(id, crowd, density, tifo.home || tifo.away ? tifo : undefined, stands.gallery === true) : ""), markup: el("g", { class: "ky-crowd" }, body), over };
 }
 /** A block of visitors or a card display, a polygon over the band it is in. */
 function sector(s, id, fine, density) {

package/dist/crowd.js

@@ -284,6 +284,10 @@ function aislesOf(region, hole) {
     }
     return [];
 }
+/** The aisles of a hall's gallery: on each straight side, one across the band at each of the `shares` (0 to 1) of the side's length, from the first side's left end. */
+function galleryAisles(region, hole, shares) {
+    return [0, 2, 4, 6].flatMap((side) => shares.map((f) => [rrectAt(hole, side + f).p, rrectAt(region, side + f).p]));
+}
 /** The polygon of a band between two aisle parameters: along the outer edge, then back along the inner. */
 function sectionBetween(region, hole, u0, u1) {
     const us = [u0];
@@ -341,7 +345,8 @@ export function layoutOf(input) {
             rake: Math.round((Math.atan2(rise, Math.max(1, t.to - t.from)) * 180) / Math.PI * 10) / 10,
             fill: t.fill,
             seats: seatsIn(region, hole),
-            aisles: aislesOf(region, hole),
+            aisles: gal?.aisles !== undefined && region.kind === "rrect" && hole.kind === "rrect" ? galleryAisles(region, hole, gal.aisles) : aislesOf(region, hole),
+            ...(gal?.rows === undefined ? {} : { rows: gal.rows }),
         });
         reachOf.left = Math.max(reachOf.left, off.left + t.to);
         reachOf.right = Math.max(reachOf.right, off.right + t.to);

package/dist/draw.js

@@ -1,7 +1,8 @@
 import { ballparkDrawn, ballparkFor, ballparkSentences } from "./ballpark.js";
-import { inkOn, safeColour } from "./colour.js";
+import { inkOn, safeColour, safePicture } from "./colour.js";
 import { withEmblems } from "./emblems-source.js";
-import { safeLogo } from "./logo.js";
+import { flagPicture, safeLogo } from "./logo.js";
+import { flagDocument, flagTheme, withFlags } from "./flags-source.js";
 import { drawingId, feetFence, isPortrait, lengthUnit, safeClass } from "./common.js";
 import { el, esc, num } from "./format.js";
 import { fieldAttributes } from "./field.data.js";
@@ -424,7 +425,7 @@ function standsFor(o, surface, crowd) {
     }
     // A dojo's crowd sits in its gallery, from the room's balcony data (in feet here); the arenas (the Budokan, the Kokugikan) keep their bowls.
     const hall = sport === "dojo" ? dojoGallery(o) : undefined;
-    const gallery = hall === undefined ? undefined : { offset: hall.offset / 0.3048, depth: hall.depth / 0.3048, height: [hall.height[0] / 0.3048, hall.height[1] / 0.3048] };
+    const gallery = hall === undefined ? undefined : { offset: hall.offset / 0.3048, depth: hall.depth / 0.3048, height: [hall.height[0] / 0.3048, hall.height[1] / 0.3048], rows: hall.rows, aisles: hall.aisles };
     return crowdLayout({ sport, box: surface.whole ?? surface.box ?? { x: 0, y: 0, w: 100, h: 100 }, crowd, awaySide, ground: o.ground, arena: o.budo?.hall === "budokan", ...(gallery === undefined ? {} : { gallery }) });
 }
 /** True when the drawing is asked to be small: `detail: "simple"` or a `width` under 480 pixels. */
@@ -451,8 +452,8 @@ function buildCrowded(o, portrait, id, score, scored, extra, crowd) {
     const fine = crowd.detail === "fine" || (crowd.detail === "auto" && !smallDrawing(o));
     const first = /^<[^>]*\/>/.exec(surface.base)?.[0] ?? "";
     const bg = /class="([^"]*)"/.exec(first)?.[1] ?? "ky-apron";
-    // A gallery is sparsely taken unless the options say how full.
-    const taken = stands.gallery === true && crowd.density === undefined && crowd.attendance === undefined ? 0.4 : densityOf(crowd, seats, ground);
+    // A gallery is empty unless the options say how full: its seats are the detail.
+    const taken = stands.gallery === true && crowd.density === undefined && crowd.attendance === undefined ? 0 : densityOf(crowd, seats, ground);
     const drawn = drawCrowd(stands, { id, crowd, density: taken, fine, ground: bg });
     surface.base = first + drawn.markup + surface.base.slice(first.length);
     surface.defs += drawn.defs;
@@ -476,6 +477,9 @@ function colourStyle(o, teams, features) {
         if (c !== undefined)
             for (const [key, property] of [["mat", "--ky-surface"], ["alt", "--ky-surface-alt"], ["border", "--ky-red"], ["heri", "--ky-bud-heri"], ["floor", "--ky-bud-floor"], ["wall", "--ky-boards"]])
                 set(property, c[key]);
+        // A heri the dojo's colours name is drawn as a cloth edge; the stylesheet's own is a faint seam.
+        if (safeColour(c?.heri) !== undefined)
+            props.push("--ky-bud-hop:.82");
     }
     if (o.court !== undefined)
         for (const [key, property] of Object.entries(COURT_PROPERTIES))
@@ -531,10 +535,13 @@ function roundOf(team, markShape) {
         return undefined;
     return { round: true, fit: team.markFit === "contain" ? "contain" : undefined, color: safeColour(team.color), ink: safeColour(team.textColor) };
 }
+/** The width in pixels a flag is asked for in a team's mark (a nominal one: a drawing scales). */
+const FLAG_MARK_SIZE = 48;
 function teamView(team, side, role, winner, uppercase, sport, markShape, theme) {
     const name = String(team.name ?? "");
     const abbr = (team.abbr !== undefined && team.abbr.trim() !== "" ? team.abbr.trim() : abbreviate(name)).slice(0, 5);
     const written = fieldScoreText(sport, team) ?? budoScoreText(sport, team);
+    const round = roundOf(team, markShape);
     const score = written ?? (team.score === undefined || team.score === null || String(team.score).trim() === "" ? "–" : String(team.score));
     return {
         side,
@@ -542,8 +549,9 @@ function teamView(team, side, role, winner, uppercase, sport, markShape, theme)
         name: uppercase ? capitals(name) : name,
         abbr,
         score,
-        logo: safeLogo(team.logo, { color: team.color, accent: team.textColor, initials: abbr.slice(0, 3), theme }),
-        ...roundOf(team, markShape),
+        // The flag a team's country code names, when a renderer of flags is plugged in, is its logo: round in a round mark, in its own proportions otherwise.
+        logo: flagPicture(team.flag, round === undefined ? "rect" : "round", FLAG_MARK_SIZE, theme) ?? safeLogo(team.logo, { color: team.color, accent: team.textColor, initials: abbr.slice(0, 3), theme }),
+        ...round,
         state: stateOf(winner, role),
         ends: Array.isArray(team.ends) ? team.ends.map(endText) : undefined,
         hammer: team.hammer === true ? true : undefined,
@@ -558,22 +566,27 @@ function teamView(team, side, role, winner, uppercase, sport, markShape, theme)
     };
 }
 /** A team as the pageant lays it out. */
-function pageantTeam(view, team) {
-    return { side: view.side, role: view.role, name: view.name, abbr: view.abbr, state: view.state, href: view.logo, fit: team.markFit === "contain" ? "contain" : "cover", ratio: ratioOf(team), color: safeColour(team.color), ink: safeColour(team.textColor) };
+function pageantTeam(view, team, style, theme) {
+    // A carpet is a flag laid flat, in its own proportions; a stage is a round disc, so a flag is asked for round there.
+    const flag = flagDocument(team.flag, { shape: style === "stage" ? "round" : "rect", size: FLAG_PAGEANT_SIZE, theme: flagTheme(theme) });
+    const picture = safePicture(flag);
+    return { side: view.side, role: view.role, name: view.name, abbr: view.abbr, state: view.state, href: picture ?? view.logo, fit: team.markFit === "contain" ? "contain" : "cover", ratio: ratioOf({ logo: picture === undefined ? team.logo : flag, logoRatio: team.logoRatio }), color: safeColour(team.color), ink: safeColour(team.textColor) };
 }
+/** The width in pixels a flag is asked for when a pageant lays it out large (a nominal one: a drawing scales). */
+const FLAG_PAGEANT_SIZE = 240;
 /** True when the drawing is asked to be small: its `width` is under 320 pixels. The pageant then leaves out its fabric, hairlines and name pills. */
 function tiny(width) {
     const px = typeof width === "number" ? width : typeof width === "string" && /^\d+(?:\.\d+)?(?:px)?$/.test(width.trim()) ? Number.parseFloat(width) : undefined;
     return px !== undefined && Number.isFinite(px) && px < 320;
 }
 /** The teams that fill the first and the second place of a surface: a diamond's outfield is the visitors' and its infield the home team's, whichever side each is on. */
-function pageantPair(surface, t) {
-    const l = pageantTeam(t.left, t.leftTeam);
-    const r = pageantTeam(t.right, t.rightTeam);
+function pageantPair(surface, t, style, theme) {
+    const l = pageantTeam(t.left, t.leftTeam, style, theme);
+    const r = pageantTeam(t.right, t.rightTeam, style, theme);
     return surface.pageant?.byRole === true && l.role === "home" ? [r, l] : [l, r];
 }
 function pageantParts(o, surface, p, t) {
-    const [first, second] = pageantPair(surface, t);
+    const [first, second] = pageantPair(surface, t, p.style, o.theme);
     const layout = pageantLayout({ pageant: p, surface, outline: outlineOf(o), left: first, right: second, turned: surface.turned, sport: t.sport, plate: t.plate });
     if (layout === undefined)
         return undefined;
@@ -808,7 +821,7 @@ export function describe(o) {
  * ```
  */
 export function drawKyogijo(o) {
-    return withEmblems(o.emblems, () => drawnKyogijo(o));
+    return withEmblems(o.emblems, () => withFlags(o.flags, () => drawnKyogijo(o)));
 }
 function drawnKyogijo(o) {
     if (o.host !== undefined && o.range !== undefined)
@@ -903,7 +916,7 @@ function drawnKyogijo(o) {
         if (pageant !== undefined && pageant.score === "auto") {
             let score = stripped ? "strip" : "centre";
             if (!stripped && isScore(o) && left !== undefined && right !== undefined && leftTeam !== undefined && rightTeam !== undefined && sized === "full") {
-                const [first, second] = pageantPair(surface, { left, right, leftTeam, rightTeam });
+                const [first, second] = pageantPair(surface, { left, right, leftTeam, rightTeam }, pageant.style, o.theme);
                 score = autoScore({ pageant, surface, outline: outlineOf(o), left: first, right: second, turned: surface.turned, sport, plate: true });
             }
             pageant = { ...pageant, score };

package/dist/element-entry.d.ts

@@ -1,3 +1,5 @@
 export { KYOGIJO_ATTRIBUTES, KYOGIJO_TAG, KyogijoField, defineKyogijoField, optionsFromAttributes, replaySettingsFromAttributes, turnSettingsFromAttributes, turnWanted } from "./element.ts";
 export { useEmblems } from "./emblems-source.ts";
 export type { EmblemRenderer } from "./emblems-source.ts";
+export { useFlags } from "./flags-source.ts";
+export type { FlagRenderer, FlagRequest, FlagShape } from "./flags-source.ts";

package/dist/element-entry.js

@@ -1,3 +1,4 @@
 // The custom element's class and its registration function; importing this entry registers nothing.
 export { KYOGIJO_ATTRIBUTES, KYOGIJO_TAG, KyogijoField, defineKyogijoField, optionsFromAttributes, replaySettingsFromAttributes, turnSettingsFromAttributes, turnWanted } from "./element.js";
 export { useEmblems } from "./emblems-source.js";
+export { useFlags } from "./flags-source.js";

package/dist/element.d.ts

@@ -6,8 +6,8 @@ import type { ScoreOptions, SurfaceOptions } from "./types.ts";
 /** The tag of the element. */
 export declare const KYOGIJO_TAG = "kyogijo-field";
 /** The attributes the element reads. */
-export declare const KYOGIJO_ATTRIBUTES: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch"];
-/** The settings of a 3D view an element's attributes make: `turn-view` names the viewpoint it opens on, `turn-controls="false"` and `turn-uprights="false"` leave the buttons and what stands on the surface out, `turn-score="floor"` leaves the score panel on the floor, `turn-touch="turn"` keeps every touch for the view. */
+export declare const KYOGIJO_ATTRIBUTES: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed"];
+/** The settings of a 3D view an element's attributes make: `turn-view` names the viewpoint it opens on, `turn-controls="false"` and `turn-uprights="false"` leave the buttons and what stands on the surface out, `turn-score="floor"` leaves the score panel on the floor, `turn-touch="turn"` keeps every touch for the view, `turn-venue="false"` leaves out the stands and the room (they are raised for a drawing with a crowd and for a dojo), `turn-roof` puts a roof or canopy over the stands, `turn-autoplay` starts the auto-turn (`force` even for a reader who prefers reduced motion) and `turn-speed` is its degrees a second. */
 export declare function turnSettingsFromAttributes(read: (name: string) => string | null, base?: TurnSettings): TurnSettings;
 /** Whether an element's `turn` attribute asks for the 3D view: present, and not `false`. */
 export declare const turnWanted: (read: (name: string) => string | null) => boolean;
@@ -24,7 +24,7 @@ export declare function optionsFromAttributes(read: (name: string) => string | n
 declare const Base: typeof HTMLElement;
 export declare class KyogijoField extends Base {
     #private;
-    static observedAttributes: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch"];
+    static observedAttributes: readonly ["sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase", "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks", "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color", "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options", "loop", "speed", "autoplay", "controls", "trail", "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed"];
     /** The options given as a property: an object, laid under the attributes. */
     get options(): Partial<ScoreOptions> | undefined;
     set options(value: Partial<ScoreOptions> | undefined);

package/dist/element.js

@@ -22,14 +22,14 @@ export const KYOGIJO_TAG = "kyogijo-field";
 export const KYOGIJO_ATTRIBUTES = [
     "sport", "league", "size", "theme", "language", "orientation", "park", "ground", "arena", "year", "detail", "margin", "stripes", "exact-lines", "uppercase",
     "pitch", "pitch-type", "half", "range", "range-end", "goals", "stripe-pattern", "corner-flags", "look", "line-width", "line-dash", "line-opacity", "landmarks", "walls", "quirks",
-    "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-color", "away-color",
+    "home", "away", "home-abbr", "away-abbr", "home-score", "away-score", "home-penalties", "away-penalties", "score", "home-logo", "away-logo", "home-flag", "away-flag", "home-color", "away-color",
     "status", "competition", "date", "label", "winner", "home-side", "pageant", "description", "options",
     "loop", "speed", "autoplay", "controls", "trail",
-    "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch",
+    "turn", "turn-view", "turn-controls", "turn-uprights", "turn-score", "turn-touch", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed",
 ];
 /** The attributes that are about a replay and not about the drawing. */
 const REPLAY_ATTRIBUTES = ["loop", "speed", "autoplay", "controls", "trail"];
-/** The settings of a 3D view an element's attributes make: `turn-view` names the viewpoint it opens on, `turn-controls="false"` and `turn-uprights="false"` leave the buttons and what stands on the surface out, `turn-score="floor"` leaves the score panel on the floor, `turn-touch="turn"` keeps every touch for the view. */
+/** The settings of a 3D view an element's attributes make: `turn-view` names the viewpoint it opens on, `turn-controls="false"` and `turn-uprights="false"` leave the buttons and what stands on the surface out, `turn-score="floor"` leaves the score panel on the floor, `turn-touch="turn"` keeps every touch for the view, `turn-venue="false"` leaves out the stands and the room (they are raised for a drawing with a crowd and for a dojo), `turn-roof` puts a roof or canopy over the stands, `turn-autoplay` starts the auto-turn (`force` even for a reader who prefers reduced motion) and `turn-speed` is its degrees a second. */
 export function turnSettingsFromAttributes(read, base = {}) {
     const out = { ...base };
     const view = read("turn-view");
@@ -43,6 +43,20 @@ export function turnSettingsFromAttributes(read, base = {}) {
         out.score = "floor";
     if (read("turn-touch") === "turn")
         out.touch = "turn";
+    // The venue: off with `false`; `turn-roof` (present, and not `false`) asks for the roof.
+    const roof = read("turn-roof") !== null && read("turn-roof") !== "false";
+    if (read("turn-venue") === "false")
+        out.venue = false;
+    else if (roof)
+        out.venue = { ...(typeof out.venue === "object" ? out.venue : {}), roof: true };
+    const auto = read("turn-autoplay");
+    if (auto === "force")
+        out.autoPlay = "force";
+    else if (auto !== null && auto !== "false")
+        out.autoPlay = true;
+    const speed = Number(read("turn-speed"));
+    if (read("turn-speed") !== null && Number.isFinite(speed))
+        out.speed = speed;
     return out;
 }
 /** Whether an element's `turn` attribute asks for the 3D view: present, and not `false`. */
@@ -215,6 +229,9 @@ export function optionsFromAttributes(read, base) {
         const logo = read(`${role}-logo`);
         if (logo !== null)
             out.logo = logo;
+        const flag = read(`${role}-flag`);
+        if (flag !== null)
+            out.flag = flag;
         const color = read(`${role}-color`);
         if (color !== null)
             out.color = color;

package/dist/flags-source.d.ts

@@ -0,0 +1,37 @@
+/** How a flag is framed: `round` for a circle, `square` as wide as it is tall, `rect` in its own proportions. */
+export type FlagShape = "round" | "square" | "rect";
+/** What a drawing asks a `flags` renderer for. */
+export interface FlagRequest {
+    shape: FlagShape;
+    /** The width in pixels the flag is drawn at, nominally (a drawing scales, so this is the size of a typical use): the diameter of a round flag. */
+    size: number;
+    /** `light` or `dark` for a drawing in that look, else `inherit`. */
+    theme: "inherit" | "light" | "dark";
+}
+/**
+ * A function from a country code and a request to an SVG string, or `null` or `undefined` for a code it has no flag for. It must be synchronous: a drawing is a pure function of its
+ * options. `@johnmorrisdotca/hata`'s `flag()` is asynchronous, so load the flags first (`await flag(code, { shape: "round" })` for each code) and pass a lookup.
+ */
+export type FlagRenderer = (code: string, request: FlagRequest) => string | null | undefined;
+/**
+ * Plug a renderer of country flags into kyogijo, for every drawing on the page: after this a team's `flag: "CA"` is drawn. Call it once, at start-up. Without one a team's `flag` is
+ * ignored and its `logo` (or its initials) is drawn. `useFlags(undefined)` unplugs it.
+ * @example
+ * ```ts
+ * import { useFlags } from "@johnmorrisdotca/kyogijo-stadiums";
+ * const loaded = { round: { CA: "<svg viewBox='0 0 1 1'>...</svg>" } } as Record<string, Record<string, string>>;
+ * useFlags((code, { shape }) => loaded[shape]?.[code.toUpperCase()]);
+ * ```
+ */
+export declare function useFlags(render: FlagRenderer | undefined): void;
+/** Run a drawing with a renderer for that drawing alone (the `flags` option), putting back whatever was there. Without a renderer it runs as it is. */
+export declare function withFlags<T>(render: FlagRenderer | undefined, draw: () => T): T;
+/** The renderer in use: the drawing's own, else the page's, else none. */
+export declare function flagRenderer(): FlagRenderer | undefined;
+/**
+ * The flag of a country code as an SVG document, drawn by the renderer in use, or `undefined`: no renderer, a value that does not look like a code, a code the renderer has no flag for,
+ * a renderer that throws, or one that returns something that is not an `<svg>`. It never throws.
+ */
+export declare function flagDocument(code: unknown, request: FlagRequest): string | undefined;
+/** The theme a drawing tells a renderer: `light` or `dark` when the options say so, else `inherit`. */
+export declare const flagTheme: (theme: unknown) => FlagRequest["theme"];

package/dist/flags-source.js

@@ -0,0 +1,60 @@
+// Where kyogijo gets country flags from: a renderer that the page plugs in, so that kyogijo bundles no flag and keeps zero dependencies. The renderer is a synchronous function from a
+// country code and a request to an SVG string; `@johnmorrisdotca/hata` draws the flags, and its `flag()` is asynchronous, so a page loads the codes it needs first and plugs in a lookup
+// (docs/flags.md). `useFlags(render)` plugs it in for the page, `flags: render` for one drawing. The shape of the renderer is the one Taisen Brackets takes, so one adapter serves both.
+// This module knows nothing of any flag: it asks the renderer, checks what it gives back, and returns an SVG document or nothing.
+let plugged;
+let scoped;
+/**
+ * Plug a renderer of country flags into kyogijo, for every drawing on the page: after this a team's `flag: "CA"` is drawn. Call it once, at start-up. Without one a team's `flag` is
+ * ignored and its `logo` (or its initials) is drawn. `useFlags(undefined)` unplugs it.
+ * @example
+ * ```ts
+ * import { useFlags } from "@johnmorrisdotca/kyogijo-stadiums";
+ * const loaded = { round: { CA: "<svg viewBox='0 0 1 1'>...</svg>" } } as Record<string, Record<string, string>>;
+ * useFlags((code, { shape }) => loaded[shape]?.[code.toUpperCase()]);
+ * ```
+ */
+export function useFlags(render) {
+    plugged = typeof render === "function" ? render : undefined;
+}
+/** Run a drawing with a renderer for that drawing alone (the `flags` option), putting back whatever was there. Without a renderer it runs as it is. */
+export function withFlags(render, draw) {
+    if (typeof render !== "function")
+        return draw();
+    const before = scoped;
+    scoped = render;
+    try {
+        return draw();
+    }
+    finally {
+        scoped = before;
+    }
+}
+/** The renderer in use: the drawing's own, else the page's, else none. */
+export function flagRenderer() {
+    return scoped ?? plugged;
+}
+/** The look of a country or region code: letters and digits in one or two parts (`CA`, `usa`, `GB-ENG`, `JP-13`). */
+const CODE = /^[A-Za-z0-9]{2,8}(?:-[A-Za-z0-9]{1,8})?$/;
+/**
+ * The flag of a country code as an SVG document, drawn by the renderer in use, or `undefined`: no renderer, a value that does not look like a code, a code the renderer has no flag for,
+ * a renderer that throws, or one that returns something that is not an `<svg>`. It never throws.
+ */
+export function flagDocument(code, request) {
+    const render = flagRenderer();
+    if (render === undefined || typeof code !== "string")
+        return undefined;
+    const text = code.trim();
+    if (!CODE.test(text))
+        return undefined;
+    let svg;
+    try {
+        svg = render(text, { shape: request.shape, size: Math.round(request.size), theme: request.theme });
+    }
+    catch {
+        return undefined;
+    }
+    return typeof svg === "string" && /^\s*(?:<\?xml|<svg)\b/i.test(svg) ? svg : undefined;
+}
+/** The theme a drawing tells a renderer: `light` or `dark` when the options say so, else `inherit`. */
+export const flagTheme = (theme) => (theme === "light" || theme === "dark" ? theme : "inherit");

package/dist/halls.js

@@ -1,11 +1,12 @@
 /** The Kodokan's main dojo as drawn: a square floor of 420 jō's area, four contest areas, the seat of honour, the banner, the wood and the gallery, in the two looks the owner's photographs show. The years of both are unknown. */
 const KODOKAN_MAIN = {
     mats: { width: 26.4, length: 26.4 },
-    surround: 1,
+    surround: 4,
     areas: { across: 2, down: 2 },
     dais: true,
     banner: true,
-    balcony: true,
+    // Per the owner, with his photographs: a gallery of 3 rows of seats on each side, the blocks of a row 5, 8, 8, 8 and 5 seats (34 to a row, 102 to a side) with an aisle between them.
+    balcony: { rows: 3, sections: [5, 8, 8, 8, 5] },
     kamiza: "north",
     eras: [
         { name: "earlier", nameJa: "以前", from: null, to: null, look: "green-orange", outline: true },
@@ -31,7 +32,7 @@ export const HALLS = Object.freeze([
         fromWhat: { en: "founded by Kanō Jigorō (the International Judo Center, the building the dojos are in, was completed in 1984)", ja: "嘉納治五郎が創設（道場のある講道館国際柔道センターは1984年に完成）" },
         leagues: [],
         surfaces: [
-            { id: "main-dojo", name: { en: "Main dojo, 7th floor", ja: "大道場（7階）" }, sport: "dojo", options: { dojo: KODOKAN_MAIN }, basis: "count", mats: 420, note: { en: "420 jō on the 7th floor, four contest areas at once, with a gallery on the 8th that seats about 900. Per the owner's photographs: four contest areas in two rows, pale yellow mats on green safety bands and a green border, on a wood surround, a raised seat of honour with a dark banner at the front wall, a gallery on all four sides. The shape of the floor is not documented: a square of 26.4 m, the area of 420 jō, is drawn so that four areas of 8 m fit.", ja: "7階に420畳、同時に4面の試合ができ、8階に約900人が座れる見学席があります。提供された写真では、試合場が2列に4面並び、淡い黄色の畳の外側を緑の安全地帯と緑の縁取りが囲んでいます。周囲は板張りで、正面の上座には一段高い台と濃い色の垂れ幕があり、四方に見学席があります。床の形は資料にないので、420畳の広さにあたる26.4m四方の床に、8m四方の試合場4面が収まるように描いています。" } },
+            { id: "main-dojo", name: { en: "Main dojo, 7th floor", ja: "大道場（7階）" }, sport: "dojo", options: { dojo: KODOKAN_MAIN }, basis: "count", mats: 420, note: { en: "420 jō on the 7th floor, four contest areas at once, with a gallery on the 8th that seats about 900. Per the owner's photographs: four contest areas in two rows, pale yellow mats on green safety bands and a green border, on a wide wood floor all round (about 4 m, ours), a raised seat of honour with a dark banner at the front wall, a gallery on all four sides. The shape of the floor is not documented: a square of 26.4 m, the area of 420 jō, is drawn so that four areas of 8 m fit. Per the owner and his photographs: the gallery has 3 rows of seats on each side, in blocks of 5, 8, 8, 8 and 5 seats (34 a row, 102 a side) divided by aisles, behind a white rail; the lower wall is honey wood panelling and the upper wall plain off-white.", ja: "7階に420畳、同時に4面の試合ができ、8階に約900人が座れる見学席があります。提供された写真では、試合場が2列に4面並び、淡い黄色の畳の外側を緑の安全地帯と緑の縁取りが囲んでいます。周囲は板張りで、正面の上座には一段高い台と濃い色の垂れ幕があり、四方に見学席があります。床の形は資料にないので、420畳の広さにあたる26.4m四方の床に、8m四方の試合場4面が収まるように描いています。提供者の数え方と写真によると、見学席は各辺3列で、1列は5席・8席・8席・8席・5席のブロック（1列34席、1辺102席）に通路で区切られ、白い手すりの奥に並びます。下の壁は蜂蜜色の板張り、上の壁は無地のオフホワイトです。" } },
             { id: "main-dojo-earlier", name: { en: "Main dojo, 7th floor (earlier colours)", ja: "大道場（7階・以前の色）" }, sport: "dojo", options: { dojo: { ...KODOKAN_MAIN, era: "earlier" } }, basis: "count", mats: 420, note: { en: "The same room in the colours of the owner's older photograph: all green mats, the four contest areas outlined by red-orange border mats. No source gives the years of either look, so the eras carry none.", ja: "提供された古い写真の色で描いた同じ部屋です。畳はすべて緑で、4面の試合場それぞれを赤橙色の縁の畳が囲んでいます。どちらの色だった時期も資料にないので、年は記していません。" } },
             { id: "school-dojo", name: { en: "Judo School dojo, 6th floor", ja: "学校道場（6階）" }, sport: "dojo", options: { dojo: { jo: 240, look: "green-beige" } }, basis: "count", mats: 240, note: { en: "240 jō on the 6th floor; the shape is plausible.", ja: "6階に240畳。形は推定です。" } },
             { id: "international-dojo", name: { en: "International dojo, 6th floor", ja: "国際部道場（6階）" }, sport: "dojo", options: { dojo: { jo: 192, look: "green-beige" } }, basis: "count", mats: 192, note: { en: "192 jō on the 6th floor; the shape is plausible.", ja: "6階に192畳。形は推定です。" } },

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export { inkOn, luminance, rgbOf, safeColour, safePicture } from "./colour.ts";
 export { safeLogo } from "./logo.ts";
 export { useEmblems } from "./emblems-source.ts";
 export type { EmblemDrawOptions, EmblemId, EmblemRef, EmblemRenderer, EmblemStyleName } from "./emblems-source.ts";
+export { useFlags } from "./flags-source.ts";
+export type { FlagRenderer, FlagRequest, FlagShape } from "./flags-source.ts";
 export { OUTCOMES, drawLayers, layerTable } from "./layers.ts";
 export { RANGES } from "./ranges.names.ts";
 export { BACKGROUND_OPACITY, BACKGROUND_PATTERNS, KYOGIJO_BACKGROUND_STYLE } from "./background.ts";

package/dist/index.js

@@ -4,6 +4,7 @@ export { HOME_FIRST, HOME_FIRST_LEAGUES, homeSideFor } from "./homeside.js";
 export { inkOn, luminance, rgbOf, safeColour, safePicture } from "./colour.js";
 export { safeLogo } from "./logo.js";
 export { useEmblems } from "./emblems-source.js";
+export { useFlags } from "./flags-source.js";
 export { OUTCOMES, drawLayers, layerTable } from "./layers.js";
 export { RANGES } from "./ranges.names.js";
 export { BACKGROUND_OPACITY, BACKGROUND_PATTERNS, KYOGIJO_BACKGROUND_STYLE } from "./background.js";

package/dist/layers.env.js

@@ -1,6 +1,6 @@
 // What every kind of data layer is drawn against: the drawing's id, its unit and outline, the words, and what a layer made. Kept apart
 // from layers.ts so that the heat maps, which are written in files of their own, can use it without importing the file that imports them.
-import { safeLogo } from "./logo.js";
+import { flagPicture, safeLogo } from "./logo.js";
 import { esc } from "./format.js";
 import { drawingId, isPortrait, lengthUnit } from "./common.js";
 import { fromSurface, toSurface } from "./frames.js";
@@ -104,7 +104,10 @@ export function envFor(o, turned, range, upright, zone) {
         cropped: range !== undefined,
         base: Math.max((range ?? outline.box).w, (range ?? outline.box).h) * 0.013,
         words: KYOGIJO_STRINGS[language],
-        logos: { home: safeLogo(teams.home?.logo, { color: teams.home?.color, accent: teams.home?.textColor }), away: safeLogo(teams.away?.logo, { color: teams.away?.color, accent: teams.away?.textColor }) },
+        logos: {
+            home: flagPicture(teams.home?.flag, "rect", 48, o.theme) ?? safeLogo(teams.home?.logo, { color: teams.home?.color, accent: teams.home?.textColor }),
+            away: flagPicture(teams.away?.flag, "rect", 48, o.theme) ?? safeLogo(teams.away?.logo, { color: teams.away?.color, accent: teams.away?.textColor }),
+        },
         marks: o.marks === true || o.pointer === true,
         zone: zone ?? zonesOf(o),
     };

package/dist/layers.js

@@ -5,6 +5,7 @@
 // either is used.
 import { safeColour } from "./colour.js";
 import { withEmblems } from "./emblems-source.js";
+import { withFlags } from "./flags-source.js";
 import { safeLogo } from "./logo.js";
 import { FRAMES } from "./frames.js";
 import { KYOGIJO_HEAT_STYLE, KYOGIJO_TEAM_STYLE } from "./style.js";
@@ -358,7 +359,7 @@ function summarise(layer, made, words, stop, gap) {
 }
 /** The layers of a drawing as markup, and a sentence for each. `turned` says whether the surface group is turned a quarter. */
 export function renderLayers(o, layers, turned, range, upright, zone) {
-    return withEmblems(o.emblems, () => renderedLayers(o, layers, turned, range, upright, zone));
+    return withEmblems(o.emblems, () => withFlags(o.flags, () => renderedLayers(o, layers, turned, range, upright, zone)));
 }
 function renderedLayers(o, layers, turned, range, upright, zone) {
     if (layers === undefined || layers.length === 0)

package/dist/logo.d.ts

@@ -1,3 +1,4 @@
+import { type FlagShape } from "./flags-source.ts";
 /** What a caller says about the team an emblem stands for: its colours and letters, so a crest id takes them; and the theme of the drawing it goes in. */
 export interface EmblemContext {
     color?: string;
@@ -23,3 +24,8 @@ export declare function emblemDocument(value: unknown, context?: EmblemContext):
  * ```
  */
 export declare function safeLogo(value: unknown, context?: EmblemContext): string | undefined;
+/**
+ * The picture of a country's flag as it may be written into an image's `href`, or `undefined` when no renderer of flags is plugged in (`useFlags`, or the `flags` option), it has no flag for the code, or
+ * `code` is not a code. `size` is the nominal width in pixels the renderer is told; `theme` is the drawing's.
+ */
+export declare function flagPicture(code: unknown, shape: FlagShape, size: number, theme?: unknown): string | undefined;

package/dist/logo.js

@@ -2,6 +2,7 @@
 // (`useEmblems`, or the `emblems` option), the id of one (`"trophy:cup"`, `"crest:shield"`, `"sport:hockey/line"`). The result is an address that may be written into an image's `href`, or `undefined`.
 import { safePicture } from "./colour.js";
 import { GROUPED_ID, emblemRenderer, renderedEmblem } from "./emblems-source.js";
+import { flagDocument, flagTheme } from "./flags-source.js";
 let told = false;
 /** Once, in development: an id with its group was given and nothing is plugged in to draw it. */
 function hint(value) {
@@ -45,3 +46,10 @@ export function safeLogo(value, context) {
         hint(value);
     return picture;
 }
+/**
+ * The picture of a country's flag as it may be written into an image's `href`, or `undefined` when no renderer of flags is plugged in (`useFlags`, or the `flags` option), it has no flag for the code, or
+ * `code` is not a code. `size` is the nominal width in pixels the renderer is told; `theme` is the drawing's.
+ */
+export function flagPicture(code, shape, size, theme) {
+    return safePicture(flagDocument(code, { shape, size, theme: flagTheme(theme) }));
+}

package/dist/pool.labels.js

@@ -2,7 +2,7 @@
 // split pace bars in the lanes. Drawn in feet in the frame of a pool lying wide; a pool lying tall turns it with the pool, so that the labels lie along the lanes, and only the numbers in the discs are
 // turned back upright. Nothing here is a rule of the sport: the sizes are ours.
 import { safeColour } from "./colour.js";
-import { safeLogo } from "./logo.js";
+import { flagPicture, safeLogo } from "./logo.js";
 import { el, esc, num } from "./format.js";
 import { feet } from "./pool.js";
 import { STATUS_TEXT, formatTime, pacePer100, splitMetres } from "./pool.race.js";
@@ -45,8 +45,10 @@ function disc(o, cx, cy, text, cls, fill) {
     const size = text.length > 2 ? r * 0.95 : r * 1.25;
     return el("circle", { class: cls, cx, cy, r, fill }) + textOn(o.portrait, cx, cy + size * 0.36, text, { size, anchor: "middle", cls: "ky-pl-dn", weight: 800 });
 }
+/** The picture of a swimmer's flag: the `flag` given, else the flag of the `country` code (in its own proportions, by the renderer of flags in use). */
+const flagOf = (row) => safeLogo(row.flag) ?? flagPicture(row.country, "rect", 24);
 function flagMarkup(row, x, cy, w, h) {
-    const logo = safeLogo(row.flag);
+    const logo = flagOf(row);
     if (logo === undefined)
         return "";
     return el("image", { class: "ky-logo", href: logo, x, y: cy - h / 2, width: w, height: h, preserveAspectRatio: "xMidYMid slice" }) + el("rect", { class: "ky-pl-fb", x, y: cy - h / 2, width: w, height: h, rx: 0.25, fill: "none" });
@@ -211,7 +213,7 @@ export function raceArt(plan, o) {
         name: show.names ? Math.min(nameMax, Math.max(14, longest)) : 0,
         abbr: show.names ? Math.max(0, ...race.rows.map((r) => tw(r.abbr, SMALL))) : 0,
         seed: show.seeds && race.rows.some((r) => r.seed !== undefined) ? Math.max(...race.rows.map((r) => tw(r.seed ?? "", SMALL * 0.9))) : 0,
-        flag: show.flags && race.rows.some((r) => safeLogo(r.flag) !== undefined) ? 4.5 : 0,
+        flag: show.flags && race.rows.some((r) => flagOf(r) !== undefined) ? 4.5 : 0,
     };
     let left = "";
     let reachLeft = 0;

package/dist/pool.race.d.ts

@@ -18,6 +18,8 @@ export interface RaceRow {
     name: string;
     abbr: string;
     flag: string | undefined;
+    /** The country code of the flag, when the swimmer has one and no `flag` of its own. */
+    country: string | undefined;
     color: string | undefined;
     seed: string | undefined;
     /** The final time in seconds and as it is written (a time of text that cannot be read is written as it is). */

package/dist/pool.race.js

@@ -66,6 +66,7 @@ export function racePlan(race, lanes, defaults) {
             name: clean(swimmer.name, 40) ?? "",
             abbr: (clean(swimmer.abbr, 5) ?? "").toLocaleUpperCase("en"),
             flag: typeof swimmer.flag === "string" ? swimmer.flag : undefined,
+            country: typeof swimmer.country === "string" ? swimmer.country : undefined,
             color: typeof swimmer.color === "string" ? swimmer.color : undefined,
             seed: typeof swimmer.seed === "number" ? (Number.isFinite(swimmer.seed) ? formatTime(swimmer.seed) : undefined) : clean(swimmer.seed, 12),
             time,

package/dist/pool.types.d.ts

@@ -23,6 +23,8 @@ export interface Swimmer {
     abbr?: string;
     /** The flag or crest, drawn small beside the name. */
     flag?: string;
+    /** A country code (`CA`, `jp`) for the flag, drawn by the renderer of flags plugged in with `useFlags` (or the drawing's `flags` option), in its own proportions, where `flag` is missing. */
+    country?: string;
     /** The swimmer's colour (a cap, a club), drawn as a stripe on the label. */
     color?: string;
     /** The entry time. */