@johnmorrisdotca/kyogijo-stadiums 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -7,6 +7,27 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.10.0] - 2026-10-14
+
+### Added
+
+- **The demo has an optional Background menu.** None by default, then the family's twenty-five backgrounds (`scripts/family-backgrounds.ts`, version 1.0.0, copied byte for byte from taisen-brackets and pinned by version and sha256), also by `?background=<name>`. It draws one behind the stage in the dark or the light variant of the page's look, takes the stage's text colour from the ink the background returns, and loads the module only when one is chosen. It is presentation only: the drawing's SVG is the same string with and without it, and an e2e test holds that. The package ships none of it and still has no dependency.
+
+### Changed
+
+- **Every README picture stands on one of the family's backgrounds,** in a light and a dark twin (ice behind the rinks, floodlights behind the football field, a royal purple behind the ballpark, a glow or a spotlight behind the courts), and `pnpm screenshots:readme` remakes all twenty in one run.
+- **The docs' and the README's samples use real countries,** Canada, the USA and Japan first, with their names and colours and no flag (a snippet cannot await Hata); where a sample shows marks it draws a maple leaf and a sun disc of its own. The gallery's teams and the pool races' swimmers' countries are real too.
+
+## [0.9.0] - 2026-10-14
+
+### Added
+
+- **Country flags from a plug-in: `useFlags(render)` and the `flags` option.** A team takes a country's code, `flag: "CA"`, and the flag is drawn by a function you plug in, as the emblems are by `useEmblems`. The renderer is `(code, { shape, size, theme }) => string` (an SVG document, or nothing for a code it has no flag for), synchronous because a drawing is a pure function of its options: it is the shape [Taisen Brackets](https://www.npmjs.com/package/@johnmorrisdotca/taisen-brackets) takes, so one adapter over [Hata](https://github.com/johnmorrisdotca/hata) serves both. `shape` is `round` (a round mark, a pageant's stage), `rect` (a plain mark, a banner, a badge, a pageant's carpet, in its own proportions) or `square`; `size` is a nominal width in pixels; `theme` is `light`, `dark` or `inherit`. `useFlags` is in the main entry and in `/element`; `flags: render` in the options of a drawing (or the `surface` of a chart) wins over it for that drawing. The same code works for `Swimmer.country` and `LineupPlayer.country` (where `flag` is missing), for the `country` of an athlete or a skater of a lane draw or a start list, a layer's mark of the shape `logo` for a team, and the element's `home-flag` and `away-flag` attributes. A team's `flag` wins over its `logo` where the renderer has a flag for the code; with no renderer, or none for the code, a drawing is the text it was (and a code that is not a code is never asked about). A round flag turns with its team's name as a round logo does. Kyogijo imports no flag and keeps no dependencies; `@johnmorrisdotca/hata` 1.5.0 is a development dependency (for the demo and the tests) and an optional peer one. [Flags](./docs/flags.md).
+
+### Changed
+
+- **The demo's teams are real countries, drawn with Hata's flags.** The made-up teams (Harbour City Gulls and the rest) and the sixteen made-up nations of `demo/nations.js` are replaced by Canada, USA, Japan, Mexico, Australia, Brazil, England, Korea, Germany, France and Italy, each with its national flag through the plug-in (the build loads the flags it draws from Hata into the page), and the pool's swimmers, who still do not exist, swim for real countries. The demo's teams have a new "Flag" logo choice, the default; "Own logo" shows a logo of your own beside it: a maple leaf with the word CANADA, a red sun disc with the word JAPAN and, for the others, a roundel of their letters, all drawn in the demo's code. No federation's crest or logo, and no Olympic rings, is used. The embedded frame takes `aflag` and `hflag`. The made-up nations stay, for the tests only, in `src/nations.fixture.ts`, so that no drawing in a test changed.
+
 ## [0.8.0] - 2026-10-14
 
 ### Added

package/NOTICE.md

@@ -45,6 +45,8 @@ picture or code of the sources is copied; each source is named here so that the
 | `parks`: the coordinates of each ballpark (`lat`, `lon`) and the years it opened and closed (`opened`, `closed`) | The item's coordinate location (P625), its date of official opening or inception (P1619, P571) and of official closure or dissolution (P3999, P576), read with the Wikidata API by `scripts/fetch-park-coordinates.mjs` and checked by `scripts/check-parks.mjs` (ES CON Field's opening, 2023, is read from its article) | Wikidata's data is CC0 (https://creativecommons.org/publicdomain/zero/1.0/) |
 | `events`: the special games, their days, venues, hosts and where a surface stood | The English Wikipedia articles of each game and of its venue, at the revision cited below, and three articles of the press (Sports Video Group, NHL.com, The Boston Globe), named below with their authors and dates; the size of a carrier from the Nimitz class's article | Facts, CC BY-SA 4.0 articles as above; no text copied |
 | The atlas (`@johnmorrisdotca/kyogijo-stadiums/atlas`): the places and their map | The parks, grounds and arenas above, joined; the demo's and docs/atlas.md's map is drawn by chizu (MIT) from Natural Earth, which is in the public domain (https://www.naturalearthdata.com/about/terms-of-use/) | Facts and CC0 data; Natural Earth is public domain; chizu is a development dependency and none of it is in the package |
+| The demo's country flags | [Hata](https://github.com/johnmorrisdotca/hata) (`@johnmorrisdotca/hata`, a development dependency): the flags of the countries in `demo/nations.js`, loaded when the demo is built and written into the demo site with Hata's licence and notice (`site/hata/`); the package itself draws no flag | Hata is MIT; each flag's own source, author and licence are in Hata's NOTICE.md |
+| tooling: the demo's backgrounds and the README's pictures | `scripts/family-backgrounds.ts`, version 1.0.0: the family's shared module, copied byte for byte from taisen-brackets. Twenty-five backgrounds drawn in code from gradients, patterns and paths, all by this package's author, none traced from a picture, a poster, a logo, a trophy or a photograph | MIT. The package ships none of it, and no surface is drawn on a background: the background is the page around it |
 
 ## The ballparks' articles
 

package/README.md

@@ -20,14 +20,14 @@ The NFL, CFL and IFAF football fields, the NHL rink, the NBA court, the soccer p
 <td align="center" valign="top">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/hero-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/hero-desk-light.webp" alt="The demo on a desk, in English: the heading Kyogijo Stadiums with the language chooser, the Docs and API reference links, five cloth patches and the Help switch, and an NHL rink drawn wide on green felt, with a made-up game on it, the Northern Owls and their owl emblem on the left, the Lakeshore Anchors and their anchor on the right, and a panel of the score 3 to 2, Final/OT, in the middle. The controls on the right list the sports, from the NFL and the NHL to handball, and then the layout and the teams." width="640">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/hero-desk-light.webp" alt="The demo on a desk, in English: the heading Kyogijo Stadiums with the language chooser, the Docs and API reference links, five cloth patches and the Help switch, and an NHL rink drawn wide on an ice-blue background of faint skate marks and rink lines, with a made-up game on it, the USA and its flag on the left, Canada and its flag on the right, and a panel of the score 3 to 2, Final/OT, in the middle. The controls on the right list the sports, from the NFL and the NHL to handball, and then the layout and the teams." width="640">
 </picture>
 <br><em>The demo on a desk: a rink, with the teams on their sides and the score in the middle.</em>
 </td>
 <td align="center" valign="top">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/hero-phone-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/hero-phone-light.webp" alt="The demo on a phone: the heading Kyogijo Stadiums over the page's controls, and under them a football field turned a quarter to stand tall, the visiting team's blue end zone at the top and the home team's red end zone at the bottom, each with its logo and name written across it, the yard numbers upright, and a score panel at midfield reading 27 to 24, Final." width="240">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/hero-phone-light.webp" alt="The demo on a phone: the heading Kyogijo Stadiums over the page's controls, and under them, on a background of floodlight beams, a football field turned a quarter to stand tall, Mexico's green end zone at the top and the USA's navy end zone at the bottom, each with its flag and name written across it, the yard numbers upright, and a score panel at midfield reading 27 to 24, Final." width="240">
 </picture>
 <br><em>On a phone the same surface stands tall, the words still upright.</em>
 </td>
@@ -47,12 +47,12 @@ import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
 
 const svg = drawKyogijo({
   sport: "nhl",
-  away: { name: "Northern Owls", abbr: "NOW", score: 3, color: "#3a2d6b" },
-  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, color: "#0f7a7a" },
+  away: { name: "USA", abbr: "USA", score: 3, color: "#1c3f7a" },
+  home: { name: "Canada", abbr: "CAN", score: 2, color: "#d52b1e" },
   status: "final-ot",
   competition: "Cup Final, Game 7",
 });
-console.log(svg.startsWith("<svg"), svg.includes("Northern Owls 3, Lakeshore Anchors 2"));
+console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
 // true true
 ```
 
@@ -60,7 +60,7 @@ console.log(svg.startsWith("<svg"), svg.includes("Northern Owls 3, Lakeshore Anc
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/kyogijo-stadiums@0/dist/element-define.js"></script>
-<kyogijo-field sport="nhl" orientation="auto" away="Northern Owls" home="Lakeshore Anchors" away-score="3" home-score="2" status="final-ot"></kyogijo-field>
+<kyogijo-field sport="nhl" orientation="auto" away="USA" home="Canada" away-score="3" home-score="2" status="final-ot"></kyogijo-field>
 ```
 
 ## Who it is for
@@ -94,6 +94,7 @@ console.log(svg.startsWith("<svg"), svg.includes("Northern Owls 3, Lakeshore Anc
 - **Lineups.** A `lineup` layer places a team's players by position code (`GK`, `CB`, `HK`, `C`) with no coordinates: it reads where each stands from a formation (36 of them, in 13 sports), draws a disc or a jersey with the shirt number and the name under it, a captain's C and a flag, and puts the visitors at the other end. A drawing with a lineup puts the score in the strip under it, so the panel hides no player. [Lineups](./docs/team-shape.md#lineups).
 - **A pageant.** Each team's flag or crest laid large over its half of the surface, as a stadium lays giant flags and crests for a final: `pageant: "carpet"` (a flag at its own ratio with a border and a gentle fabric) or `"stage"` (a crest on a round disc with a gold ring), an emblem or a trophy of your own in the centre circle, the score in the middle or in the strip, upright wide and tall, in light and dark, with an entrance in CSS for readers who have not asked for less motion. [The pageant](./docs/pageant.md).
 - **Trophies, medals, balls and crests, by id.** `useEmblems(renderEmblem)` plugs in the sister package [Dougu Sports 道具](https://johnmorrisdotca.github.io/dougu-sports/) in one line, and an id goes wherever a logo, a flag or a mark is taken: `logo: "crest:shield"` (a crest in the team's colour with its letters), `pageant: { emblem: "trophy:hockey-cup" }`, `"sport:nhl/line"`, `"ball:puck"`, `"cup"`. Kyogijo bundles no emblem and keeps zero dependencies; without the plug-in an id is refused like any unsafe address. [Emblems](./docs/emblems.md).
+- **Country flags, by code.** `useFlags(render)` plugs in the sister package [Hata 旗](https://github.com/johnmorrisdotca/hata) through a small adapter, and a team's `flag: "CA"` is its flag: round in a round mark, at its own proportions on a banner, a badge or a pageant's carpet. The same adapter serves [Taisen Brackets](https://github.com/johnmorrisdotca/taisen-brackets). Kyogijo bundles no flag and keeps zero dependencies; without the plug-in a code is ignored. [Flags](./docs/flags.md).
 - **Zoom to a part of a surface.** `range: "offensive-zone"` crops a drawing to a rink's zone, a half court, the paint, the red zone, a soccer half, third or penalty area, the infield, a curling house, or a box of your own in any frame, with its data, heat, labels and score following. [Display ranges](./docs/ranges.md).
 - **Wide, tall or fit the box.** Every surface lies wide or tall: tall turns it a quarter, keeps every word upright and puts the teams top and bottom. With `orientation: "auto"` the browser helpers follow the box.
 - **Where a point lies, by the rules, and a click as a place.** `zoneAt("nhl", [69, 22], { frame: "nhl-api" })` names the zone and the area in it from the rink's, court's, pitch's, park's or field's own figures (the offensive zone and its face-off circle, the frontcourt and the corner three, the attacking third and the six-yard box, the infield and the warning track, the red zone and between the hashes), with `isThreePointer`, `inSlot`, `inPenaltyArea`, `isFair`, `overWall` and the like, and `isHomeRun(park, point, { height })` from the park's fence and wall; `clientPointToField(svg, x, y, { provider })` is a pointer's place in any of the frames, with the zone, and `fieldPointToClient` the way back. `marks: true` writes `data-mark-id`, `data-index` and `data-zone` on every mark of a layer, for one listener to link it to a table. [Zones](./docs/zones.md), [pointing](./docs/pointer.md).
@@ -165,8 +166,8 @@ import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
 
 const svg = drawKyogijo({
   sport: "nhl",
-  away: { name: "Northern Owls", abbr: "NOW", score: 3, color: "#3a2d6b" },
-  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, color: "#0f7a7a" },
+  away: { name: "USA", abbr: "USA", score: 3, color: "#1c3f7a" },
+  home: { name: "Canada", abbr: "CAN", score: 2, color: "#d52b1e" },
   status: "final-ot",
   competition: "Cup Final, Game 7",
   date: "June 24",
@@ -178,7 +179,7 @@ console.log(svg.includes("Cup Final, Game 7"), svg.includes("Final/OT"));
 <p align="center">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-light.webp" alt="A football field drawn wide on the demo's felt: the visiting team's blue end zone on the left with its gull emblem and its name written along it, the home team's rust-red end zone on the right with its bison, the yard lines, hash marks and upright and upside-down yard numbers between them, and the score panel at midfield reading 27 to 24, Final, Championship Game." width="720">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/football-desk-light.webp" alt="A football field drawn wide on a background of floodlight beams: Mexico's green end zone on the left with its flag and its name written along it, the USA's navy end zone on the right with its flag, the yard lines, hash marks and upright and upside-down yard numbers between them, and the score panel at midfield reading 27 to 24, Final, Championship Game." width="720">
 </picture>
 <br><em>A football field: the end zones in the teams' colours, the score at midfield.</em>
 </p>
@@ -195,12 +196,12 @@ useEmblems(renderEmblem);
 
 const svg = drawKyogijo({
   sport: "soccer",
-  away: { name: "Harbour City Gulls", abbr: "HCG", score: 2, color: "#1f5fa8", logo: "crest:shield" },
-  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#b5452c", logo: "crest:roundel" },
+  away: { name: "Brazil", abbr: "BRA", score: 2, color: "#009739", logo: "crest:shield" },
+  home: { name: "England", abbr: "ENG", score: 1, color: "#c8102e", logo: "crest:roundel" },
   status: "final",
   pageant: { style: "stage", emblem: "trophy:soccer-globe", emblemName: "Northern Cup" },
 });
-console.log(svg.includes(encodeURIComponent(">HCG<")), svg.includes("Northern Cup"));
+console.log(svg.includes(encodeURIComponent(">BRA<")), svg.includes("Northern Cup"));
 // true true
 ```
 
@@ -212,7 +213,7 @@ import { drawKyogijo, drawSurface } from "@johnmorrisdotca/kyogijo-stadiums";
 // No teams: just the NFL field at its true shape, 120 by 53⅓ yards with 12 feet of ground round it.
 console.log(/viewBox="-12 -12 384 184"/.test(drawSurface({ sport: "nfl" })));
 // true
-const game = { away: { name: "Harbour City Gulls", score: 27 }, home: { name: "Prairie Ridge Bison", score: 24 }, status: "final" };
+const game = { away: { name: "Mexico", score: 27 }, home: { name: "USA", score: 24 }, status: "final" };
 const wide = drawKyogijo({ sport: "nfl", ...game, orientation: "landscape" });
 const tall = drawKyogijo({ sport: "nfl", ...game, orientation: "portrait" });
 const box = (svg: string) => /viewBox="[^ ]+ [^ ]+ ([^ ]+) ([^ "]+)"/.exec(svg)!.slice(1).map(Number);
@@ -223,7 +224,7 @@ console.log(box(wide), box(tall));
 <p align="center">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tall-phone-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tall-phone-light.webp" alt="A hockey rink standing tall on a phone, the same game as on the desk: the Northern Owls' emblem and name in the upper zone, the Lakeshore Anchors' in the lower, each reading upright, the score panel between them over the centre line." width="240">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/tall-phone-light.webp" alt="A hockey rink standing tall on a phone, on an ice-blue background, the same game as on the desk: the USA's flag and name in the upper zone, Canada's in the lower, each reading upright, the score panel between them over the centre line." width="240">
 </picture>
 <br><em>The same game tall: the teams top and bottom, every word upright.</em>
 </p>
@@ -258,7 +259,7 @@ console.log(svg.includes("甲子園球場のグラウンド"), svg.includes("阪
 <p align="center">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/ballpark-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/ballpark-desk-light.webp" alt="The baseball field of Hanshin Koshien Stadium with the outfield fence drawn through its published distances, 95 metres at the lines and 118 metres in the alleys and the middle, with mown arcs on the grass, the warning track, the infield dirt, and a red and a green panel in the foul ground at the bottom for the teams' dugouts." width="640">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/ballpark-desk-light.webp" alt="The baseball field of Hanshin Koshien Stadium on a royal purple background, with the outfield fence drawn through its published distances, 95 metres at the lines and 118 metres in the alleys and the middle, with mown arcs on the grass, the warning track, the infield dirt, and a red and a navy panel in the foul ground at the bottom for the teams' dugouts, each with its country's flag, Japan's and the USA's." width="640">
 </picture>
 <br><em>A ballpark's fence, drawn through the distances its article publishes.</em>
 </p>
@@ -306,8 +307,8 @@ import { drawBadge } from "@johnmorrisdotca/kyogijo-stadiums";
 
 const badge = drawBadge({
   sport: "nba",
-  away: { name: "Summit Peaks", abbr: "SMT", score: 98, color: "#14233f" },
-  home: { name: "Metro Bolts", abbr: "MTB", score: 104, color: "#c2410c" },
+  away: { name: "Australia", abbr: "AUS", score: 98, color: "#00843d" },
+  home: { name: "Japan", abbr: "JPN", score: 104, color: "#bc002d" },
   status: "Q4 2:31",
 });
 console.log(/viewBox="0 0 440 64"/.test(badge));
@@ -317,7 +318,7 @@ console.log(/viewBox="0 0 440 64"/.test(badge));
 <p align="center">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/badges-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/badges-desk-light.webp" alt="A list of eight score strips in the demo, each a team block with its emblem, a short name and its score at each end, in the team's colour, and in the middle a small picture of the sport and the state of the game, such as Final, Final/OT and 2nd period." width="640">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/badges-desk-light.webp" alt="A list of eight score strips in the demo, on a midnight-blue background, each a team block with its country's flag, a short name and its score at each end, in the team's colour, and in the middle a small picture of the sport and the state of the game, such as Final, Final/OT and 2nd period." width="640">
 </picture>
 <br><em>Badges for a list of games.</em>
 </p>
@@ -338,7 +339,7 @@ console.log(svg.includes("--ky-key:#1e4f8f"), svg.includes("METRO BOLTS"));
 <p align="center">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/court-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/court-desk-light.webp" alt="A basketball court in the two-tone look: a pale floor with a deep blue key, centre circle and border, the words SUMMIT PEAKS and METRO BOLTS along the baselines, each team's emblem and name on its half, and the score panel at centre court reading 108 to 112, Finals, Game 6." width="640">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/court-desk-light.webp" alt="A basketball court in the two-tone look, in a warm glow: a pale floor with a deep blue key, centre circle and border, the words AUSTRALIA and JAPAN along the baselines, each country's flag and name on its half, and the score panel at centre court reading 108 to 112, Finals, Game 6." width="640">
 </picture>
 <br><em>A court in a look of its own: the paint, the border and the words on the baselines are options.</em>
 </p>
@@ -368,7 +369,7 @@ The flat drawing is the floor, turned by a drag, a swipe, the keys or four viewp
 <p align="center">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-volleyball-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-volleyball-desk-light.webp" alt="A volleyball court from behind an end line, turned in the demo: the net at 2.43 metres on its posts with the red and white antennae, and under it the buttons for the four viewpoints, turning, raising, zooming and resetting." width="640">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-volleyball-desk-light.webp" alt="A volleyball court from behind an end line under a spotlight, turned in the demo: the net at 2.43 metres on its posts with the red and white antennae, and under it the buttons for the four viewpoints, turning, raising, zooming and resetting." width="640">
 </picture>
 <br><em>A volleyball net at its rulebook height, with its posts and antennae.</em>
 </p>
@@ -376,7 +377,7 @@ The flat drawing is the floor, turned by a drag, a swipe, the keys or four viewp
 <p align="center">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-rink-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-rink-desk-light.webp" alt="An ice rink from a low corner, turned in the demo: the boards with their glass round the ice, a goal at each end, and the score on the ice." width="640">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-rink-desk-light.webp" alt="An ice rink from a low corner on an ice-blue background, turned in the demo: the boards with their glass round the ice, a goal at each end, and the score on the ice." width="640">
 </picture>
 <br><em>A rink with its boards, glass and goals.</em>
 </p>
@@ -384,7 +385,7 @@ The flat drawing is the floor, turned by a drag, a swipe, the keys or four viewp
 <p align="center">
 <picture>
 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-court-desk-dark.webp">
-<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-court-desk-light.webp" alt="A basketball court from the main camera, turned in the demo: a basket on its backboard and padded stanchion at each end of the floor." width="640">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/turn-court-desk-light.webp" alt="A basketball court from the main camera in a warm glow, turned in the demo: a basket on its backboard and padded stanchion at each end of the floor." width="640">
 </picture>
 <br><em>A court with a basket at each end, the rim at 10 feet.</em>
 </p>
@@ -396,8 +397,8 @@ import { drawKyogijo, soccerSpec } from "@johnmorrisdotca/kyogijo-stadiums";
 
 const svg = drawKyogijo({
   sport: "soccer",
-  away: { name: "Northern Owls", abbr: "NOW", score: 2, penalties: 4, color: "#3a2d6b" },
-  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, penalties: 2, color: "#0f7a7a" },
+  away: { name: "USA", abbr: "USA", score: 2, penalties: 4, color: "#1c3f7a" },
+  home: { name: "Canada", abbr: "CAN", score: 2, penalties: 2, color: "#d52b1e" },
   status: "final-pens",
   ground: "metlife-stadium",
 });
@@ -496,7 +497,7 @@ console.log(svg.includes('viewBox="0 0 1200 675"'), svg.includes("Three ballpark
 
 <!-- score is home-away; home-score and away-score say it the other way -->
 <kyogijo-field sport="nba" size="compact" orientation="auto"
-  home="Metro Bolts" away="Summit Peaks" score="112-108"
+  home="Japan" away="Australia" score="112-108"
   home-color="#c2410c" away-color="#14233f" status="final"></kyogijo-field>
 ```
 
@@ -511,7 +512,7 @@ import { createKyogijo, kyogijoProps } from "@johnmorrisdotca/kyogijo-stadiums/r
 // A component made from your React, which measures its box for orientation="auto":
 const Kyogijo = createKyogijo(React);
 export const Game = () => (
-  <Kyogijo sport="nhl" orientation="auto" away={{ name: "Northern Owls", score: 3 }} home={{ name: "Lakeshore Anchors", score: 2 }} status="final" />
+  <Kyogijo sport="nhl" orientation="auto" away={{ name: "USA", score: 3 }} home={{ name: "Canada", score: 2 }} status="final" />
 );
 
 // Or props to spread onto your own element; nothing here imports React:
@@ -526,7 +527,7 @@ import "@johnmorrisdotca/kyogijo-stadiums/element/define";
 </script>
 
 <template>
-  <kyogijo-field sport="nfl" orientation="auto" away="Harbour City Gulls" home="Prairie Ridge Bison" away-score="27" home-score="24" status="final" />
+  <kyogijo-field sport="nfl" orientation="auto" away="Mexico" home="USA" away-score="27" home-score="24" status="final" />
 </template>
 ```
 
@@ -540,12 +541,12 @@ Tell Vue the tag is a custom element with `compilerOptions.isCustomElement: (tag
   import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
   export let home = 0;
   export let away = 0;
-  $: svg = drawKyogijo({ sport: "nhl", away: { name: "Northern Owls", score: away }, home: { name: "Lakeshore Anchors", score: home } });
+  $: svg = drawKyogijo({ sport: "nhl", away: { name: "USA", score: away }, home: { name: "Canada", score: home } });
 </script>
 
 <!-- the string of SVG, or the element: either works -->
 {@html svg}
-<kyogijo-field sport="nhl" away="Northern Owls" home="Lakeshore Anchors" away-score={away} home-score={home} />
+<kyogijo-field sport="nhl" away="USA" home="Canada" away-score={away} home-score={home} />
 ```
 
 A page that moves (`mountKyogijo`), a file written on a server and a frame for a page with no script are in [getting started](./docs/getting-started.md).
@@ -658,7 +659,7 @@ pnpm check          # lint, types, every test, the build and the packed package
 pnpm test:package   # pack, install and import it as somebody who installed it would
 pnpm test:demo      # build the demo and the docs and play them in a real browser, at a phone's width and a desk's
 pnpm site           # build the demo and the docs site into site/, as the Pages workflow publishes it
-pnpm screenshots:readme   # take the README's pictures from the built demo, in light and dark
+pnpm screenshots:readme   # remake every README picture from the built demo, in light and dark, each on one of the family's backgrounds
 pnpm test:readme    # run every example in the README and the docs against the built package
 pnpm docs:make      # rewrite what the docs make from the source: the Japanese words, the leagues, the frames and units tables
 ```
@@ -684,5 +685,6 @@ The code is [MIT](./LICENSE) © John Morris. The ballparks' fence distances are
 | The fence distances of 94 ballparks | The English and Japanese Wikipedia articles of each, at the revision cited | Facts; the articles are CC BY-SA 4.0 and none of their text is used |
 | The Wikidata item of each ballpark | Wikidata, as linked from the cited article | CC0 |
 | 64 soccer grounds | English Wikipedia articles at the revision cited; Wikidata | Facts; CC BY-SA 4.0 articles, no text used; CC0 |
-| The demo's teams and emblems | Written for this package | MIT |
+| The demo's countries and their logos | The names and codes of real countries; the maple leaf, the sun disc and the roundels are drawn for this package | MIT |
+| The demo's country flags | [Hata](https://github.com/johnmorrisdotca/hata), a development dependency whose flags are loaded into the demo site with its licence and notice; the package itself draws none | MIT, and its flags' own licences in its NOTICE.md |
 | The demo's trophies, medals, balls and crests | [Dougu Sports](https://github.com/johnmorrisdotca/dougu-sports), a development dependency copied into the demo site with its licences; the package itself draws none | MIT, and its sources' licences in its NOTICE.md |

package/dist/charts.athletics.js

@@ -2,7 +2,7 @@
 // race (every runner on the curve of the lane, the stagger as the rules put it), and the attempts of a field event as marks in the sector or the pit with the best mark picked out. Written for this
 // package from the Track and Field Facilities Manual (2019, 2.2.1.6) and Book C2.1's Technical Rules (14, 17, 25 to 38); nothing of any other package is used. The flags are the caller's: an SVG
 // document as text, or an address, as a team's logo is.
-import { assemble, clean, drawingOptions, languageOf, round, wordsOf } from "./charts.js";
+import { assemble, clean, drawingOptions, entryFlag, languageOf, round, wordsOf } from "./charts.js";
 import { athleticsPlan } from "./athletics/plan.js";
 import { raceById, fieldEventById } from "./athletics/events.js";
 import { fieldEventName } from "./athletics/describe.js";
@@ -101,9 +101,10 @@ export function laneDraw(entries, options = {}) {
         const back = (d) => [start.x - fx * d, start.y - fy * d];
         const [nx, ny] = back(nameAt);
         names.push(clean({ x: nx, y: ny, text: e.name, anchor: "end", size: nameSize, rotate: portrait ? -90 : 0, title: e.country === undefined ? undefined : `${e.name}, ${e.country}` }));
-        if (e.flag !== undefined) {
+        const flag = entryFlag(e, options);
+        if (flag !== undefined) {
             const [px, py] = back(flagAt);
-            flags.push(clean({ x: px, y: py, shape: "logo", logo: e.flag, size: flagSide / 1.8, title: e.country }));
+            flags.push(clean({ x: px, y: py, shape: "logo", logo: flag, size: flagSide / 1.8, title: e.country }));
         }
     }
     const at = { from: "athletics", units: "m" };

package/dist/charts.curling.d.ts

@@ -41,7 +41,7 @@ export declare function curlingScore(stones: readonly CurlingStone[], options?:
  *     { x: 1.9, y: 1.1, team: "away", number: 7 },
  *     { x: 0, y: -12, team: "away", number: 3 },
  *   ],
- *   { end: 6, hammer: "home", names: { home: "Prairie Ridge", away: "Harbour City" } },
+ *   { end: 6, hammer: "home", names: { home: "Canada", away: "Japan" } },
  * );
  * console.log(chart.totals.points, chart.totals.scoring, chart.title);
  * // 2 home Curling stones, End 6

package/dist/charts.curling.js

@@ -109,7 +109,7 @@ const LOOKS = { stone: {}, counting: { hollow: true }, "shot-rock": { hollow: tr
  *     { x: 1.9, y: 1.1, team: "away", number: 7 },
  *     { x: 0, y: -12, team: "away", number: 3 },
  *   ],
- *   { end: 6, hammer: "home", names: { home: "Prairie Ridge", away: "Harbour City" } },
+ *   { end: 6, hammer: "home", names: { home: "Canada", away: "Japan" } },
  * );
  * console.log(chart.totals.points, chart.totals.scoring, chart.title);
  * // 2 home Curling stones, End 6

package/dist/charts.d.ts

@@ -42,6 +42,14 @@ export interface KeyPlace {
 export declare const isKey: (layer: Layer) => boolean;
 /** The key of a chart as data, from its entries and looks. */
 export declare function keyItems(entries: readonly KeyEntry[], looks: Readonly<Record<string, Look>>): KeyItem[];
+/**
+ * The picture of an entry's flag: the `flag` it gives, else the flag of its `country` code by the renderer of flags the chart's `surface.flags` (or `useFlags`) plugs in, in its own proportions;
+ * `undefined` where there is none, so that a chart without a renderer lays out as it always did.
+ */
+export declare function entryFlag(entry: {
+    flag?: string;
+    country?: string;
+}, options: ChartOptions): string | undefined;
 /** Put a chart together: the options, the layers and the ways to draw them. */
 export declare function assemble<T>(options: SurfaceOptions, layers: Layer[], parts: {
     title: string;

package/dist/charts.js

@@ -8,7 +8,9 @@ import { fromSurface, frameByName, toSurface } from "./frames.js";
 import { zoneCounts } from "./heat.js";
 import { isPortrait } from "./common.js";
 import { envFor, isNum, place, unitOfLayer } from "./layers.env.js";
+import { withFlags } from "./flags-source.js";
 import { layerTable } from "./layers.js";
+import { flagPicture } from "./logo.js";
 import { outlineOf } from "./outline.js";
 import { KYOGIJO_STRINGS, fill } from "./strings.js";
 import { textWidth } from "./text.js";
@@ -102,6 +104,17 @@ export const isKey = (layer) => layer.id === "key-marks" || layer.id === "key-te
 export function keyItems(entries, looks) {
     return entries.map((e) => ({ outcome: e.outcome ?? "", label: e.label, shape: looks[e.outcome ?? ""]?.shape ?? "circle", hollow: looks[e.outcome ?? ""]?.hollow === true }));
 }
+/**
+ * The picture of an entry's flag: the `flag` it gives, else the flag of its `country` code by the renderer of flags the chart's `surface.flags` (or `useFlags`) plugs in, in its own proportions;
+ * `undefined` where there is none, so that a chart without a renderer lays out as it always did.
+ */
+export function entryFlag(entry, options) {
+    if (entry.flag !== undefined)
+        return entry.flag;
+    if (entry.country === undefined)
+        return undefined;
+    return withFlags(options.surface?.flags, () => flagPicture(entry.country, "rect", 24, options.surface?.theme));
+}
 /** Put a chart together: the options, the layers and the ways to draw them. */
 export function assemble(options, layers, parts) {
     const all = { ...options, layers };

package/dist/charts.skating.js

@@ -2,7 +2,7 @@
 // with their medals, times and splits, a replay of the race (every skater on his own way round the track, the lane changed once a lap), and the elements of a figure skating programme as marks on the ice.
 // Written for this package from the ISU's Special Regulations and Technical Rules for speed skating (Rules 203, 227, 253, 254 and 280) and short track speed skating (Rule 280); nothing of any other package
 // is used. The flags are the caller's: an SVG document as text, or an address, as a team's logo is.
-import { assemble, clean, drawingOptions, languageOf, round, wordsOf } from "./charts.js";
+import { assemble, clean, drawingOptions, entryFlag, languageOf, round, wordsOf } from "./charts.js";
 import { esc } from "./format.js";
 import { fill } from "./strings.js";
 import { ELEMENT_KINDS, ELEMENT_NAMES, raceById } from "./skating/events.js";
@@ -122,11 +122,12 @@ export function skatingPairs(pairs, options = {}) {
         const back = (d) => [base.x - fx * d, base.y - fy * d];
         const [bx, by] = back(1.6);
         bands.push({ x: bx, y: by, shape: "circle", size: 1.2, color: ARMBAND[laneName], title: laneName === "inner" ? w.data.lanes.inner : w.data.lanes.outer });
-        if (entry.flag !== undefined) {
+        const flag = entryFlag(entry, options);
+        if (flag !== undefined) {
             const [px, py] = back(3.6);
-            flags.push(clean({ x: px, y: py, shape: "logo", logo: entry.flag, size: 1.6, title: entry.country }));
+            flags.push(clean({ x: px, y: py, shape: "logo", logo: flag, size: 1.6, title: entry.country }));
         }
-        const [nx, ny] = back(entry.flag !== undefined ? 5.4 : 3);
+        const [nx, ny] = back(flag !== undefined ? 5.4 : 3);
         names.push(clean({ x: nx, y: ny, text: entry.name, anchor: fx < 0 ? "start" : "end", size: 1.9, title: entry.country === undefined ? undefined : `${entry.name}, ${entry.country}` }));
     }
     const layers = [];
@@ -189,9 +190,10 @@ export function skatingGrid(starters, options = {}) {
         const spot = spots[s.position - 1];
         // The skaters go left along the top straight and right along the bottom one: the names stand behind the line.
         const dir = top ? -1 : 1;
-        names.push(clean({ x: spot.x - dir * (s.flag === undefined ? 1.2 : 2.6), y: spot.y, text: s.name, anchor: top ? "start" : "end", size: 0.9, title: s.country === undefined ? undefined : `${s.name}, ${s.country}` }));
-        if (s.flag !== undefined)
-            flags.push(clean({ x: spot.x - dir * 1.4, y: spot.y, shape: "logo", logo: s.flag, size: 0.8, title: s.country }));
+        const flag = entryFlag(s, opts);
+        names.push(clean({ x: spot.x - dir * (flag === undefined ? 1.2 : 2.6), y: spot.y, text: s.name, anchor: top ? "start" : "end", size: 0.9, title: s.country === undefined ? undefined : `${s.name}, ${s.country}` }));
+        if (flag !== undefined)
+            flags.push(clean({ x: spot.x - dir * 1.4, y: spot.y, shape: "logo", logo: flag, size: 0.8, title: s.country }));
     }
     const layers = [];
     if (flags.length > 0)

package/dist/draw.d.ts

@@ -39,11 +39,11 @@ export declare function describe(o: SurfaceOptions | ScoreOptions): {
  * import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
  * const svg = drawKyogijo({
  *   sport: "nhl",
- *   away: { name: "Harbour City Gulls", abbr: "HCG", score: 3, color: "#1f5fa8" },
- *   home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 2, color: "#b5452c" },
+ *   away: { name: "USA", abbr: "USA", score: 3, color: "#1c3f7a" },
+ *   home: { name: "Canada", abbr: "CAN", score: 2, color: "#d52b1e" },
  *   status: "final-ot",
  * });
- * console.log(svg.startsWith("<svg"), svg.includes("Harbour City Gulls"));
+ * console.log(svg.startsWith("<svg"), svg.includes("USA"));
  * // true true
  * ```
  */

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";
@@ -534,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,
@@ -545,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,
@@ -561,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;
@@ -802,16 +812,16 @@ export function describe(o) {
  * import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
  * const svg = drawKyogijo({
  *   sport: "nhl",
- *   away: { name: "Harbour City Gulls", abbr: "HCG", score: 3, color: "#1f5fa8" },
- *   home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 2, color: "#b5452c" },
+ *   away: { name: "USA", abbr: "USA", score: 3, color: "#1c3f7a" },
+ *   home: { name: "Canada", abbr: "CAN", score: 2, color: "#d52b1e" },
  *   status: "final-ot",
  * });
- * console.log(svg.startsWith("<svg"), svg.includes("Harbour City Gulls"));
+ * console.log(svg.startsWith("<svg"), svg.includes("USA"));
  * // true true
  * ```
  */
 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)
@@ -906,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,7 +6,7 @@ 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", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed"];
+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`. */
@@ -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", "turn-venue", "turn-roof", "turn-autoplay", "turn-speed"];
+    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,7 +22,7 @@ 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-venue", "turn-roof", "turn-autoplay", "turn-speed",
@@ -229,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/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/mount.d.ts

@@ -44,11 +44,11 @@ export declare function containerAspect(host: HTMLElement, breakpoint?: number):
  * const card = mountKyogijo(document.querySelector("#game")!, {
  *   sport: "nhl",
  *   orientation: "auto",
- *   away: { name: "Harbour City Gulls", score: 1 },
- *   home: { name: "Prairie Ridge Bison", score: 0 },
+ *   away: { name: "USA", score: 1 },
+ *   home: { name: "Canada", score: 0 },
  *   status: "live",
  * });
- * card.update({ sport: "nhl", orientation: "auto", away: { name: "Harbour City Gulls", score: 2 }, home: { name: "Prairie Ridge Bison", score: 0 } });
+ * card.update({ sport: "nhl", orientation: "auto", away: { name: "USA", score: 2 }, home: { name: "Canada", score: 0 } });
  * ```
  */
 export declare function mountKyogijo(host: HTMLElement, options: SurfaceOptions | ScoreOptions, settings?: MountSettings): KyogijoMount;

package/dist/mount.js

@@ -59,11 +59,11 @@ export function containerAspect(host, breakpoint = 560) {
  * const card = mountKyogijo(document.querySelector("#game")!, {
  *   sport: "nhl",
  *   orientation: "auto",
- *   away: { name: "Harbour City Gulls", score: 1 },
- *   home: { name: "Prairie Ridge Bison", score: 0 },
+ *   away: { name: "USA", score: 1 },
+ *   home: { name: "Canada", score: 0 },
  *   status: "live",
  * });
- * card.update({ sport: "nhl", orientation: "auto", away: { name: "Harbour City Gulls", score: 2 }, home: { name: "Prairie Ridge Bison", score: 0 } });
+ * card.update({ sport: "nhl", orientation: "auto", away: { name: "USA", score: 2 }, home: { name: "Canada", score: 0 } });
  * ```
  */
 export function mountKyogijo(host, options, settings = {}) {

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. */

package/dist/react.d.ts

@@ -9,7 +9,7 @@ export declare function kyogijoHtml(options: SurfaceOptions | ScoreOptions): {
  * @example
  * ```ts
  * import { kyogijoProps } from "@johnmorrisdotca/kyogijo-stadiums/react";
- * const props = kyogijoProps({ sport: "nba", away: { name: "Harbour City Gulls", score: 108 }, home: { name: "Prairie Ridge Bison", score: 112 }, status: "final" });
+ * const props = kyogijoProps({ sport: "nba", away: { name: "Australia", score: 108 }, home: { name: "Japan", score: 112 }, status: "final" });
  * console.log(props["data-kyogijo"], props.dangerouslySetInnerHTML.__html.startsWith("<svg"));
  * // nba true
  * ```

package/dist/react.js

@@ -10,7 +10,7 @@ export function kyogijoHtml(options) {
  * @example
  * ```ts
  * import { kyogijoProps } from "@johnmorrisdotca/kyogijo-stadiums/react";
- * const props = kyogijoProps({ sport: "nba", away: { name: "Harbour City Gulls", score: 108 }, home: { name: "Prairie Ridge Bison", score: 112 }, status: "final" });
+ * const props = kyogijoProps({ sport: "nba", away: { name: "Australia", score: 108 }, home: { name: "Japan", score: 112 }, status: "final" });
  * console.log(props["data-kyogijo"], props.dangerouslySetInnerHTML.__html.startsWith("<svg"));
  * // nba true
  * ```

package/dist/team.lineup.js

@@ -1,7 +1,7 @@
 // The lineup layer: a team's players placed by position code on the surface, each as a disc or a jersey with the shirt number in it and the name under it, with a captain's
 // armband and a small flag where they are given. It reads where each position stands from a formation (formations.ts, formations.sports.ts) and so needs no coordinates; two
 // teams are two layers. Written for this package.
-import { safeLogo } from "./logo.js";
+import { flagPicture, safeLogo } from "./logo.js";
 import { esc, num } from "./format.js";
 import { FRAMES } from "./frames.js";
 import { positionName } from "./formations.js";
@@ -151,7 +151,7 @@ export function drawLineup(layer, env) {
             badges.push(titled("circle", ` class="ky-lc" cx="${num(bx)}" cy="${num(by)}" r="${num(r)}"`, words.captainTip));
             text.push(`<text class="ky-cl" style="font-size:${num(r * 1.25)}px" x="${num(bx)}" y="${num(by + r * 0.45)}"${env.turned ? ` transform="rotate(-90 ${num(bx)} ${num(by)})"` : ""}>${esc(words.captainMark)}</text>`);
         }
-        const flag = safeLogo(player?.flag);
+        const flag = safeLogo(player?.flag) ?? flagPicture(player?.country, "rect", 24);
         if (flag !== undefined) {
             const h = size * 0.3;
             const w = h * 1.5;

package/dist/team.types.d.ts

@@ -198,6 +198,8 @@ export interface LineupPlayer extends MarkDatum {
     number?: string | number;
     /** A flag or crest for a small badge on the mark: an SVG as text, an image `data:` address or a path or address of an image. The package draws no flag of its own. */
     flag?: string;
+    /** A country code (`CA`, `jp`) for the badge, 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 captain wears an armband: a small "C" on the mark. */
     captain?: boolean;
     /** 1 by default. Hockey's second line is `line: 2` with the same codes. */

package/dist/turn.dom.d.ts

@@ -40,7 +40,7 @@ export declare function turnSupported(win?: {
  * @example
  * ```ts no-run
  * import { mountKyogijoTurn } from "@johnmorrisdotca/kyogijo-stadiums/turn";
- * const view = mountKyogijoTurn(document.querySelector("#court")!, { sport: "volleyball", home: { name: "Harbour City Gulls", score: 3 }, away: { name: "Prairie Ridge Bison", score: 2 } }, { preset: "end" });
+ * const view = mountKyogijoTurn(document.querySelector("#court")!, { sport: "volleyball", home: { name: "Japan", score: 3 }, away: { name: "USA", score: 2 } }, { preset: "end" });
  * view.preset("corner");
  * view.set({ yaw: 60, pitch: 40 });
  * ```

package/dist/turn.dom.js

@@ -24,7 +24,7 @@ const between = (from, to, t) => ({ yaw: from.yaw + (nearest(from.yaw, to.yaw) -
  * @example
  * ```ts no-run
  * import { mountKyogijoTurn } from "@johnmorrisdotca/kyogijo-stadiums/turn";
- * const view = mountKyogijoTurn(document.querySelector("#court")!, { sport: "volleyball", home: { name: "Harbour City Gulls", score: 3 }, away: { name: "Prairie Ridge Bison", score: 2 } }, { preset: "end" });
+ * const view = mountKyogijoTurn(document.querySelector("#court")!, { sport: "volleyball", home: { name: "Japan", score: 3 }, away: { name: "USA", score: 2 } }, { preset: "end" });
  * view.preset("corner");
  * view.set({ yaw: 60, pitch: 40 });
  * ```

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import type { Background } from "./background.ts";
 import type { EmblemRef, EmblemRenderer } from "./emblems-source.ts";
+import type { FlagRenderer } from "./flags-source.ts";
 import type { Layer } from "./layers.types.ts";
 import type { Unit } from "./units.ts";
 import type { SoccerFrame, SoccerProviderId } from "./surfaces/soccer-providers.ts";
@@ -478,12 +479,17 @@ export interface PageantOptions {
 }
 /** One team of a score. */
 export interface Team {
-    /** The name, as it is to be written: "Harbour City Gulls". */
+    /** The name, as it is to be written: "Canada". */
     name: string;
     /** A short form, three letters or so, for the score and the badge. Taken from the name when missing. */
     abbr?: string;
     /** The score. A number, or text such as "–" before the game. */
     score?: number | string;
+    /**
+     * A country code (`CA`, `jp`, `GB-ENG`) for the team's flag, drawn by the renderer of flags plugged in with `useFlags` (or the drawing's `flags` option): round in a round mark, in its own proportions on a
+     * plain mark, a carpet and a banner, round on a stage. It wins over `logo` where the renderer has a flag for the code. With no renderer, or none for the code, the `logo` is drawn, or the initials.
+     */
+    flag?: string;
     /** The logo: an `https:` or relative address, an image `data:` address, an SVG document as text, or, with a renderer of emblems plugged in (`useEmblems`), the id of a ready-made emblem: `"crest:shield"` takes the team's `color`, `textColor` and `abbr`. */
     logo?: EmblemRef;
     /**
@@ -568,6 +574,11 @@ export interface SurfaceOptions {
     id?: string;
     /** A renderer of ready-made emblems for this drawing alone, so that a `logo`, an `emblem` or a mark may be an emblem's id: `emblems: renderEmblem` from `@johnmorrisdotca/dougu-sports/emblems`. Over the one the page plugged in with `useEmblems`. */
     emblems?: EmblemRenderer;
+    /**
+     * A renderer of country flags for this drawing alone, so that a team's `flag` code is drawn: a synchronous function from a code and `{ shape, size, theme }` to an SVG string, such as a lookup of flags
+     * loaded from `@johnmorrisdotca/hata` first. Over the one the page plugged in with `useFlags`. See `docs/flags.md`.
+     */
+    flags?: FlagRenderer;
     /** The ground to draw round the playing surface, in `units` (feet by default). A default for each sport. */
     margin?: number;
     /**

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export declare const VERSION = "0.8.0";
+export declare const VERSION = "0.10.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export const VERSION = "0.8.0";
+export const VERSION = "0.10.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Kyogijo Stadiums 競技場, 39 sports' surfaces as SVG, drawn to scale from the rulebooks: NFL, CFL and IFAF football fields, an NHL rink, an NBA court, MLB ballparks, soccer pitches, curling sheets, athletics stadiums, speed skating, short track and figure skating rinks, swimming pools, water polo fields, diving wells, artistic swimming areas, and the courts and fields of tennis, volleyball (indoor, beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet, netball, lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budo of judo, karate, kendo, sumo and kyudo with a dojo of tatami laid as real units, with each team's name and logo on its side and the score in the middle, stands and a crowd, a pageant of flags, and a 3D view. Light and dark, accessible, a compact badge for lists, a helper for React and a custom element. Zero dependencies.",
   "keywords": [
     "sports",
@@ -238,9 +238,13 @@
     "node": ">=22"
   },
   "peerDependencies": {
+    "@johnmorrisdotca/hata": ">=1.5.0 <2",
     "@resvg/resvg-js": ">=2.6.0"
   },
   "peerDependenciesMeta": {
+    "@johnmorrisdotca/hata": {
+      "optional": true
+    },
     "@resvg/resvg-js": {
       "optional": true
     }
@@ -275,6 +279,7 @@
     "@eslint/js": "^9.0.0",
     "@johnmorrisdotca/chizu": "1.4.0",
     "@johnmorrisdotca/dougu-sports": "0.2.0",
+    "@johnmorrisdotca/hata": "1.5.0",
     "@playwright/test": "^1.63.0",
     "eslint": "^9.0.0",
     "marked": "^18.1.1",