@johnmorrisdotca/kyogijo-stadiums 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -7,6 +7,17 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.24.0] - 2026-10-20
+
+### Added
+
+- **A board over a surface** (`board` in the options of a drawing and of the 3D view, [boards over a surface](./docs/boards.md)): a results board, a bout presentation or a medal table that another package drew (Taisen Brackets', say) is taken as an SVG string with its size and laid over the surface. The package draws no board and imports none: the SVG is written as one image, which cannot run anything, never changed and never stretched (its own shape is kept, so no letter is stretched).
+- **Placed by name or by point.** `position` is `top` (the default), `bottom`, `side` (the right edge), `left`, `corner` (the top right), `top-left`, `top-right`, `bottom-left`, `bottom-right`, or a point of your own, `{ x, y, anchor? }`, as shares of the drawing. A named position keeps to its edge, one margin in, and is made smaller, never moved, where it would reach into the middle of the surface (`BOARD_CLEAR`, a third of the width and height, where the score's panel stands), so the middle is never covered unless `cover: true` or a point of your own says so. `share`, `margin`, `opacity` and a `label` for assistive technology are options; `BOARD_POSITIONS` and `placeBoard(board, box)` are exported.
+- **In 3D the board is a layer over the view, not a plane**: it does not turn, tip or zoom with the surface, never takes the pointer (a drag on it turns the view), is a share of the view's width in its own shape, and its height is held to what keeps the middle of the view clear. `update` replaces it and keeps the view's turn; where the browser cannot draw in 3D the flat drawing is shown with the board on it.
+- **A compact card** takes the board over its surface and not over its strip; **a badge** takes none. A drawing with no board, or with a value that is not a board, is the same text as before.
+- **The demo's boards page** (`boards.html`): a swimming final over the pool, a bout over a judo mat, a 100 m final over the athletics stadium, speed skating over the oval and a medal table in a corner, in 2D and 3D, with the position, the width, the opacity and a point of your own in the address, in English and Japanese. **The docs** have [a page](./docs/boards.md) and [a gallery](https://johnmorrisdotca.github.io/kyogijo-stadiums/docs/gallery-boards.html) of every position, how large a board may be, covering the middle and dark and Japanese.
+- Taisen Brackets 0.17.1 is a development dependency, for the demo's and the gallery's boards (`pnpm boards` writes `demo/boards-data.js`); it is not imported by the package.
+
 ## [0.23.0] - 2026-10-20
 
 ### Added

package/README.md

@@ -20,14 +20,14 @@ The surfaces of forty-three sports, from football and curling to the budō and t
 <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, the language chooser and links, and an NHL rink drawn wide on an ice-blue background with a made-up game on it, the USA on the left, Canada on the right and the score 3 to 2, Final/OT, in the middle. The controls on the right list the sports, 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: an NHL rink drawn wide on an ice-blue background, the USA on the left, Canada on the right and the score 3 to 2, Final/OT, in the middle, with the controls beside it." 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 and controls, and under them, on a background of floodlight beams, a football field standing tall, Mexico's green end zone at the top and the USA's navy one at the bottom, each with its flag and name, 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: a football field standing tall under floodlight beams, Mexico's green end zone at the top and the USA's navy one at the bottom, 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>
@@ -73,46 +73,46 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
 ## Features
 
 - **Forty-three surfaces, to scale.** The NFL, CFL and IFAF fields, the NHL rink, the NBA court, the soccer pitch and futsal court, the baseball field, the curling sheet, twelve net and racket sports, the pools, the athletics stadium, the skating rinks, seven field sports, the budō, the MMA cage, the rings and the wrestling mats. Every figure is cited in [sources](./docs/sources.md). [The surfaces](./docs/surfaces.md).
-- **Each league's rulebook.** `league: "fiba"` draws a court as FIBA marks it: 48 variants, from the WNBA, the NCAA and the IIHF to Little League, PONY, softball, Curling Canada, FIVB's beach volleyball, rugby league and the NLL's box lacrosse, each cited. [League variants](./docs/variants.md).
-- **A realistic basketball floor.** `court: { hardwood: true }` draws maple boards that run the length of the court with staggered ends, grain, stained keys, the baskets and stanchions with soft shadows, a coaching box and benches, and a satin sheen, in every league and renderer. The clean floor stays the default. [Hardwood](./docs/hardwood.md).
+- **Each league's rulebook.** `league: "fiba"` draws a court as FIBA marks it: 48 variants, from the WNBA and the IIHF to Little League, softball, rugby league and box lacrosse, each cited. [League variants](./docs/variants.md).
+- **A realistic basketball floor.** `court: { hardwood: true }` draws maple boards that run the length of the court with staggered ends, grain and stained keys, the baskets with soft shadows, and benches. The clean floor stays the default. [Hardwood](./docs/hardwood.md).
 - **The stands and the crowd.** `crowd: true` draws the seating round any surface that has spectators: a bowl, two sides, a horseshoe, courtside rows or a ballpark's grandstands, with the people as seeded heads and shoulders in the home colours and the empty seats showing (`density`, or `attendance` over `capacity`). [The crowd](./docs/crowd.md).
 - **Curling, from the rule books.** A sheet from World Curling's and Curling Canada's rules, tall by default, with the board and the hammer in a score, `curlingStones` for the stones of an end, `show: "folded"` for the whole sheet with both houses enlarged beside it. [Curling](./docs/curling.md).
 - **Net, racket and court sports, from their rulebooks.** The ITF's, FIVB's (indoor, beach, sitting), BWF's, USA Pickleball's and ITTF's courts and table, the padel, squash, racquetball, sepak takraw, teqball, roundnet and netball courts, each in its look, with a board of sets and games. [Net, racket and court sports](./docs/courts.md).
-- **Swimming, water polo, diving and artistic swimming, from World Aquatics' regulations.** The 50 or 25 m pool with its lanes, ropes, blocks and touch panels; the water polo field; the diving well; the artistic swimming area. A race's lanes carry names, flags, places and times, with a replay. [Pools](./docs/pools.md).
-- **Lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, from their rulebooks.** The fields and floors of World Lacrosse, World Rugby, the NRL, the AFL, the GAA, the FIH and the IHF, and a cricket ground with a boundary of your own. A score is goals and behinds, goals and points, or runs, wickets and overs. [Field sports](./docs/field-sports.md).
-- **The athletics stadium, from World Athletics' rules.** The 400 m track with its lanes and staggers worked out from the running lines, curved and relay starts, hurdles, the steeplechase, every field event, a close-up of each start, the covered 200 m track, with lane draws, results and a race replay. [The athletics stadium](./docs/athletics.md).
-- **The skating rinks, from the ISU's rules.** The 400 m speed skating track with its lanes, blocks and the lines of every race worked out lane by lane; the short track's oval; the figure skating rink with its judges' seats; and results, a race replay and the elements of a programme. [The skating rinks](./docs/skating.md).
+- **Swimming, water polo, diving and artistic swimming, from World Aquatics' regulations.** The 50 or 25 m pool with its lanes, ropes, blocks and touch panels; the water polo field; the diving well; the artistic swimming area. [Pools](./docs/pools.md).
+- **Lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, from their rulebooks.** The fields and floors of World Lacrosse, World Rugby, the NRL, the AFL, the GAA, the FIH and the IHF, and a cricket ground. [Field sports](./docs/field-sports.md).
+- **The athletics stadium, from World Athletics' rules.** The 400 m track with its lanes and staggers worked out from the running lines, every race start, hurdles, the steeplechase and every field event, with lane draws, results and a race replay. [The athletics stadium](./docs/athletics.md).
+- **The skating rinks, from the ISU's rules.** The 400 m speed skating track with its lanes, blocks and the lines of every race worked out lane by lane; the short track's oval; the figure skating rink; and results, a race replay and the elements of a programme. [The skating rinks](./docs/skating.md).
 - **The budō, from the federations' rules.** The IJF's and the All Japan Judo Federation's judo areas, the WKF's karate areas, the kendo shiai-jo, the sumo dohyō, the kyūdōjō, and **a dojo builder**: a floor of tatami laid as real units, in jō or metres, with its walls, doors, windows and shrine. Scores are judo's ippon, waza-ari and shido, karate's and kendo's points and sumo's kimarite. [The budō](./docs/budo.md).
-- **Soccer, to the Laws.** A pitch from Law 1 of the IFAB Laws of the Game of any size, with presets (international, UEFA, MLS, NCAA, the FA's 9-, 7- and 5-a-side, FIFA's futsal), half pitches, five mowing patterns, four goal styles, penalties and extra time in a score. [Soccer](./docs/soccer.md).
+- **Soccer, to the Laws.** A pitch from Law 1 of the IFAB Laws of the Game of any size, with presets from international to 5-a-side, half pitches, five mowing patterns and four goal styles. [Soccer](./docs/soccer.md).
 - **Every ballpark.** The 30 current MLB parks and 44 that MLB clubs have left, and the 12 home parks of Nippon Professional Baseball with eight other NPB grounds, each with its fence drawn from the distances published for it, as it stood in a season. [Ballparks](./docs/ballparks.md).
 - **Soccer grounds, arenas and an atlas.** 64 soccer grounds at their published sizes, 167 NHL, NBA, WNBA and PWHL arenas (`drawKyogijo({ sport: "nhl", arena: "boston-garden" })`), and every park, ground, arena and budō hall (330 places) on a map, found by any of its names. [The grounds](./docs/grounds.md), [the arenas](./docs/arenas.md), [the atlas](./docs/atlas.md), [names](./docs/ballparks.md#names).
-- **Walls and quirks.** How high the fence stands, stretch by stretch and season by season (the Green Monster at 37 feet 2 inches) (`walls`); and Tal's Hill, Wrigley Field's ivy and basket, poles, bullpens and dugouts (`quirks`), each from the park's article, none guessed: [ballparks](./docs/ballparks.md).
+- **Walls and quirks.** How high the fence stands, stretch by stretch and season by season (`walls`), and a park's hills, ivy, poles, bullpens and dugouts (`quirks`), each from the park's article, none guessed: [ballparks](./docs/ballparks.md).
 - **Special games.** A surface set inside another, to scale: an NHL rink on a ballpark's infield or a football stadium's field or a baseball field laid over a London stadium's pitch. 18 games, each cited. [Special games](./docs/special-games.md).
 - **Surfaces through the years.** `year: 1975` draws a surface as its league's rules marked it that season, each change cited. [Surfaces through the years](./docs/eras.md).
-- **Score mode.** Each team's name and logo on its side (the end zones, the ends of the ice, the halves of the court, the dugouts) and the score large in the middle, with the competition, the status and the date, and the winner emphasised; a flag or a crest can be round, in a circle with a ring (`markShape: "round"`). [Score and layout](./docs/score.md#round-marks).
-- **The situation of a game.** `situation` draws what is happening: hockey's power play or empty net and a shootout; baseball's runners lit on the diamond with a scorebug; football's line of scrimmage, first-down line, red zone and down-and-distance tag, with a drive chart; in the badge and the compact card too. [The situation](./docs/situation.md).
+- **Score mode.** Each team's name and logo on its side (the end zones, the ends of the ice, the halves of the court, the dugouts) and the score large in the middle, with the competition, the status and the date, and the winner emphasised. [Score and layout](./docs/score.md#round-marks).
+- **The situation of a game.** `situation` draws what is happening: hockey's power play and shootout, baseball's runners and count, football's line of scrimmage, first-down line, red zone and down and distance, with a drive chart. [The situation](./docs/situation.md).
 - **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. [Lineups](./docs/team-shape.md#lineups).
-- **A pageant.** Each team's flag or crest laid large over its half of the surface: `pageant: "carpet"` (a flag at its own ratio with a border) or `"stage"` (a crest on a round disc with a gold ring), an emblem or a trophy in the centre circle, the score in the middle or in the strip; an entrance in CSS for readers who have not asked for less motion. [The pageant](./docs/pageant.md).
+- **A pageant.** Each team's flag or crest laid large over its half of the surface: `pageant: "carpet"` (a flag at its own ratio with a border) or `"stage"` (a crest on a round disc with a gold ring), an emblem or a trophy in the centre circle, the score in the middle or in the strip. [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"`, `pageant: { emblem: "trophy:hockey-cup" }`, `"ball:puck"`. [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 carpet. [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).
+- **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 penalty area, the infield, a curling house, or a box of your own, with its data 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 surface's own figures, with `isThreePointer`, `inSlot`, `isFair`, `isHomeRun` and the like; `clientPointToField(svg, x, y, { provider })` is a pointer's place in any of the frames, with the zone. [Zones](./docs/zones.md), [pointing](./docs/pointer.md).
+- **Where a point lies, by the rules, and a click as a place.** `zoneAt("nhl", [69, 22], { frame: "nhl-api" })` names the zone from the surface's own figures, and `clientPointToField(svg, x, y, { provider })` is a pointer's place in any of the frames, with the zone. [Zones](./docs/zones.md), [pointing](./docs/pointer.md).
 - **Goals, the strike zone and the stumps, end-on.** A goal mouth for six sports with the shots laid on it, the catcher's view of the strike zone with its pitches numbered, and the wicket from the bowler's end with its zones. [Targets](./docs/targets.md).
-- **Data on the surface.** Points, lines, arrows, text, heat maps, hexagons, zone charts and density contours over any surface, in its own feet or a provider's frame; ready-made shot and pass charts. [Data layers](./docs/layers.md), [charts](./docs/charts.md).
-- **Small multiples and backgrounds.** `drawGrid` puts many drawings in one SVG, under a title and a subtitle, over a credit line, with a key they share, in a size for a card or a phone; `background` lays a quiet pattern or a photograph behind a drawing or a grid. [Layouts and backgrounds](./docs/layouts.md).
-- **Tournament layouts.** Several surfaces laid out together for one large event, to scale, on one floor, as one SVG: thirteen presets from table tennis, pickleball, curling, judo, karate, badminton and tennis, each with its rule and sources, and a stadium round it. [Tournament layouts](./docs/multi.md).
-- **Judging assignments.** Who judges where. [Judging](./docs/judging.md).
-- **Replay.** Tracking data played on any surface: the players, the ball and its trail, and the passes, shots and goals as they happen, with controls, the keyboard and a live region, and steps for a reader who prefers reduced motion. [Replay](./docs/replay.md).
-- **A 3D view.** Any surface as a floor that turns by mouse, touch, wheel or keys, with four viewpoints (overhead, broadcast, end-on, low corner), and what the rulebook stands on it at its height (nets, baskets, boards and glass, goals, a fence, a cage's mesh, a ring's ropes) and the venue round it (raked stands, roofs, a dojo's walls). [The 3D view](./docs/turn.md).
+- **Data on the surface.** Points, lines, arrows, text, heat maps, hexagons and density contours over any surface, in its own feet or a provider's frame; ready-made shot and pass charts. [Data layers](./docs/layers.md), [charts](./docs/charts.md).
+- **Small multiples and backgrounds.** `drawGrid` puts many drawings in one SVG with a title, a shared key and a credit line, in a size for a card or a phone; `background` lays a quiet pattern or a photograph behind a drawing or a grid. [Layouts and backgrounds](./docs/layouts.md).
+- **Tournament layouts.** Several surfaces laid out together for one large event, to scale, on one floor, as one SVG: thirteen presets, each with its rule and sources, and a stadium round it. [Tournament layouts](./docs/multi.md).
+- **Judging assignments.** Who judges where. [Judging](./docs/judging.md). **Boards over a surface.** [Boards](./docs/boards.md).
+- **Replay.** Tracking data played on any surface: the players, the ball and its trail, and the passes, shots and goals as they happen, with controls, the keyboard and a live region. [Replay](./docs/replay.md).
+- **A 3D view.** Any surface as a floor that turns by mouse, touch, wheel or keys, with four viewpoints (overhead, broadcast, end-on, low corner), and what the rulebook stands on it at its height (nets, baskets, goals, a cage's mesh, a ring's ropes) and the venue round it (raked stands, roofs, a dojo's walls). [The 3D view](./docs/turn.md).
 - **Renderers.** The same drawing as plain data (a scene), on a canvas (a browser's or a Node canvas), in a d3 selection, as a mark of an Observable Plot, as GeoJSON and as a PNG in Node, each an entry of its own. [Renderers](./docs/renderers.md).
-- **Units and frames.** Each surface in its rulebook's unit and any other, and 48 coordinate frames (ten soccer providers, the NHL API, HockeyTech, NBA stats, NFL tracking, MLBAM, Retrosheet, and one for each other surface) to move a provider's points onto a surface. [Units](./docs/units.md), [coordinate frames](./docs/frames.md).
+- **Units and frames.** Each surface in its rulebook's unit and any other, and 48 coordinate frames (ten soccer providers, the NHL API, NBA stats, NFL tracking, MLBAM and more) to move a provider's points onto a surface. [Units](./docs/units.md), [coordinate frames](./docs/frames.md).
 - **A compact badge and a compact card.** One strip for a list, or the surface with that strip under it.
-- **Light and dark**, by the device or the page, and every colour a custom property; eight named looks, colours by feature, line widths and dashes, goal styles and mowing patterns, and arrows, axes and labels for teaching. [Theming](./docs/theming.md), [annotations](./docs/annotations.md).
-- **Accessible.** Each drawing is an `img` with a title and a description that say the surface and the result, in English or Japanese. [Accessibility](./docs/accessibility.md).
-- **Four ways in.** A function that returns SVG text; a helper that draws into a container; a standard custom element; a frame for pages that run no script. A React helper that does not import React.
+- **Light and dark**, by the device or the page; every colour a custom property; eight named looks, colours by feature, line widths and dashes, and arrows, axes and labels for teaching. [Theming](./docs/theming.md), [annotations](./docs/annotations.md).
+- **Accessible.** Each drawing is an `img` with a title and a description of the surface and the result, in English or Japanese. [Accessibility](./docs/accessibility.md).
+- **Four ways in.** A function that returns SVG text; a helper that draws into a container; a custom element; a frame for pages with no script; a React helper that imports no React.
 - **No dependencies**, no network requests, nothing stored. Text, colours and logo addresses that come from outside are made safe before they are drawn.
-- **A docs site.** Guides, a search over every page, a gallery that draws every picture from the code beside it, and [how it compares](./docs/compare.md) with the other packages: [the documentation](./docs/README.md).
+- **A docs site.** Guides, a search, a gallery that draws every picture from the code beside it, and [how it compares](./docs/compare.md): [the documentation](./docs/README.md).
 
 ### What's in it
 
@@ -122,12 +122,12 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
 | `SPORTS`, `PARKS`, `PARK_IDS`, `COURT_THEMES` | The forty-three sports, the 94 ballparks, the court looks. |
 | `SOCCER_PITCHES`, `SOCCER_PROVIDERS`, `rescale`, `soccerSpec` | The soccer pitches, the data providers' coordinate systems and the map between them. |
 | `GROUNDS`, `groundById` | The 64 soccer grounds, each pitch at its own size. |
-| `EVENTS`, `eventOptions` | The 18 special games: a rink in a ballpark, a court on a carrier's deck, with `host` and `placement` in the options. |
+| `EVENTS`, `eventOptions` | The 18 special games: a rink in a ballpark, a court on a carrier's deck. |
 | `./zones`, `./pointer`, `./target` | Where a point lies by a sport's own rules, and the yes-or-no questions; a click on a drawing as a place in a provider's numbers; a goal, the strike zone or the stumps seen end-on. |
 | `./geometry`, `./frames`, `./layers`, `./charts`, `./replay` | The dimensions in any unit; the providers' frames; data layers; ready-made charts; tracking data played on a surface. |
-| `./athletics` | The athletics stadium: the plan, the track's geometry (the stagger of any lane), the races and field events, and the lane draw, results, race replay and field marks charts. |
-| `./budo` | The budō: the judo and karate areas, the kendo shiai-jo, the sumo dohyō, the kyūdōjō and the dojo builder (`dojo`, `drawDojo`), the plans, the tatami layout, the 82 kimarite, the looks and the five halls. |
-| `./skating` | The skating rinks: the plan, the long track's geometry (a skater's way round it, the start of a race), the races, and the pairs, starting positions, results, race replay and programme elements charts. |
+| `./athletics` | The athletics stadium: the plan, the track's geometry, the races and field events, and the lane draw, results, race replay and field marks charts. |
+| `./budo` | The budō: the judo and karate areas, the kendo shiai-jo, the sumo dohyō, the kyūdōjō, the dojo builder (`dojo`, `drawDojo`), the 82 kimarite and the five halls. |
+| `./skating` | The skating rinks: the plan, the long track's geometry, the races, and the pairs, starting positions, results, race replay and programme elements charts. |
 | `./parks`, `./grounds`, `./arenas`, `./atlas`, `./eras`, `./leagues`, `./events` | The ballparks, the grounds, the arenas, every place, the markings of a season, each league's rulebook, the special games. |
 | `./turn` | A surface as a 3D view that turns, with the net, basket, goal or posts standing on it. |
 | `./scene`, `./canvas`, `./d3`, `./plot`, `./geojson`, `./png` | The drawing as data; on a canvas; in a d3 selection; as an Observable Plot mark; as GeoJSON; as a PNG (the optional peer `@resvg/resvg-js`). |
@@ -543,6 +543,34 @@ console.log(layout.needs.length, layout.needs.width);
 
 The [demo](https://johnmorrisdotca.github.io/kyogijo-stadiums/halls.html) turns it in 3D.
 
+### Boards over a surface
+
+`board` lays a results board, a bout presentation or a medal table, any SVG, over a surface in 2D and 3D, off its middle and never stretched ([boards](./docs/boards.md)).
+
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-swimming-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-swimming-desk-light.webp" alt="A results board over the top of a swimming pool: eight swimmers, their times and a record badge." width="640">
+</picture>
+<br><em>A final over the pool.</em>
+</p>
+
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-judo-3d-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-judo-3d-desk-light.webp" alt="A bout presentation board over a judo mat seen in 3D, steady while the mat turns." width="640">
+</picture>
+<br><em>A bout over the mat, in 3D.</em>
+</p>
+
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-medals-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/boards-medals-desk-light.webp" alt="A medal table in the top right corner of an athletics stadium, off the middle of the field." width="640">
+</picture>
+<br><em>A medal table in a corner.</em>
+</p>
+
 ### Who judges where
 
 `drawJudging` puts each judo mat's officials by seat in the picture and in a chart ([judging](./docs/judging.md)).
@@ -750,7 +778,7 @@ English and Japanese: the title, the description and the standard statuses of a
 
 ## Roadmap
 
-Not here yet, and each welcome as an [issue](https://github.com/johnmorrisdotca/kyogijo-stadiums/issues):
+Not here yet, each welcome as an [issue](https://github.com/johnmorrisdotca/kyogijo-stadiums/issues):
 
 - **More surfaces**: the FIBA and college courts, the international rink, rugby pitches, a stadium's seating, soccer's beach and street formats.
 - **More parks of the past**: the 19th-century grounds, and the parks whose articles give no distances yet (the Kingdome, Joe Robbie Stadium).
@@ -848,12 +876,12 @@ Kyogijo Stadiums is one of thirty-two packages, each made for the same site, eac
 ```sh
 pnpm install
 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 test:package   # pack, install and import it, as a user would
+pnpm test:demo      # build the site and play it 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   # remake every README picture from the built demo, in light and dark, each on one of the family's backgrounds
+pnpm screenshots:readme   # remake every README picture from the built demo, in light and dark
 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
+pnpm docs:make      # rewrite what the docs make from the source: the Japanese words and the tables
 ```
 
 ## Contributing

package/dist/draw.js

@@ -55,6 +55,7 @@ import { KYOGIJO_STRINGS, fill } from "./strings.js";
 import { courtStyle } from "./courts.style.js";
 import { annotate, annotated, wideView } from "./annotate.js";
 import { KYOGIJO_BACKGROUND_STYLE, laidOn } from "./background.js";
+import { overlayMarkup, placeBoard, resolveBoard } from "./overlay.js";
 import { KYOGIJO_HARDWOOD_STYLE, resolveHardwood } from "./hardwood.js";
 import { WALL_SEATS, densityOf, layoutOf as crowdLayout, resolveCrowd } from "./crowd.js";
 import { drawCrowd, KYOGIJO_CROWD_STYLE } from "./crowd.draw.js";
@@ -901,6 +902,8 @@ function drawnKyogijo(o) {
     let defs = "";
     let grounded = false;
     let foldedSheet = false;
+    let boarded;
+    const board = sized === "badge" ? undefined : resolveBoard(o.board);
     let pg;
     if (isScore(o) && left !== undefined && right !== undefined && sized === "badge") {
         const badge = badgeMarkup(left, right, { sport, status, parts, id, situation: situation === undefined ? undefined : badgeSituation(situation, language) });
@@ -1065,6 +1068,14 @@ function drawnKyogijo(o) {
             body = group;
             viewBox = `${num(v.x)} ${num(v.y)} ${num(v.w)} ${num(v.h)}`;
         }
+        // A board over the surface, in the drawing's own units, over everything else (a strip's score stays clear of it, under the surface).
+        if (board !== undefined) {
+            const laid = overlayMarkup(board, placeBoard(board, v));
+            if (laid !== "") {
+                body += laid;
+                boarded = typeof board.position === "object" ? "custom" : board.position;
+            }
+        }
     }
     const root = el("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1084,6 +1095,7 @@ function drawnKyogijo(o) {
         "data-track": sport === "athletics" ? o.athletics?.track : undefined,
         "data-winner": isScore(o) ? winner : undefined,
         "data-pageant": pg === undefined ? undefined : pageant?.style,
+        "data-board": boarded,
         "data-version": VERSION,
         width: safeLength(o.width),
         height: safeLength(o.height),

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export { OUTCOMES, drawLayers, layerTable } from "./layers.ts";
 export { RANGES } from "./ranges.names.ts";
 export { BACKGROUND_OPACITY, BACKGROUND_PATTERNS, KYOGIJO_BACKGROUND_STYLE } from "./background.ts";
 export type { Background, BackgroundFit, BackgroundOptions, BackgroundPattern } from "./background.ts";
+export { BOARD_CLEAR, BOARD_POSITIONS, placeBoard } from "./overlay.ts";
+export type { BoardBox, BoardOptions, BoardPoint, BoardPosition } from "./overlay.ts";
 export { FIELD_SPORTS, fieldPlan, isFieldSport } from "./fields.ts";
 export { POOL_SPORTS, isPoolSport, poolPlan, swimPlan, venueLayout } from "./pool.ts";
 export type { ArtisticPlan, Board, DivePlan, LanePlan, PoloPlan, PoolPlan, Rope, RopeColour, SwimPlan, VenueItem, VenueLayout } from "./pool.ts";

package/dist/index.js

@@ -8,6 +8,7 @@ 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";
+export { BOARD_CLEAR, BOARD_POSITIONS, placeBoard } from "./overlay.js";
 export { FIELD_SPORTS, fieldPlan, isFieldSport } from "./fields.js";
 export { POOL_SPORTS, isPoolSport, poolPlan, swimPlan, venueLayout } from "./pool.js";
 export { formatTime, parseTime } from "./pool.race.js";

package/dist/overlay.d.ts

@@ -0,0 +1,73 @@
+/** Where a board goes. `top` and `bottom` are centred on the drawing's top and bottom edge, `side` is at the right edge, centred, `left` the same at the left, `corner` is the top right corner, and the four corners by their names. */
+export type BoardPosition = "top" | "bottom" | "side" | "left" | "corner" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/** A place of your own: the board's top left corner (or, with `anchor: "center"`, its middle) at this share of the drawing's width (`x`) and height (`y`), 0 to 1. The board may then cover the middle of the surface: you asked for it. */
+export interface BoardPoint {
+    x: number;
+    y: number;
+    anchor?: "start" | "center";
+}
+/** A board over a drawing. */
+export interface BoardOptions {
+    /** The board, as SVG text (`<svg …>…</svg>`): the string `resultsBoard`, `boutBoard` or `broadcastMedalTable` of Taisen Brackets gives. It is written as an image, so nothing in it can run and its styles stay in it. Anything else is ignored. */
+    svg: string;
+    /** The board's own width and height, the numbers its maker gives (`resultsBoardSize`, `boutBoardSize`, `broadcastMedalSize`): they give its shape. Left out, the `viewBox` of the SVG is read. A board with no size is ignored. */
+    width?: number;
+    height?: number;
+    /** Where it goes: a name (`BOARD_POSITIONS`) or a point of your own. `top` by default. */
+    position?: BoardPosition | BoardPoint;
+    /** How opaque it is, 0 to 1. 1 by default. */
+    opacity?: number;
+    /** Its width as a share of the drawing's width, 0.1 to 1. By default 0.5 at the top and the bottom, 0.3 at a side and 0.36 in a corner, and 0.4 at a point; a board is never made larger than the room that keeps the middle of the surface clear. */
+    share?: number;
+    /** The gap between the board and the edge of the drawing, as a share of the drawing's width, 0 to 0.2. 0.02 by default. */
+    margin?: number;
+    /** Let a named position cover the middle of the surface, so that the board may be as large as `share` says (it is still kept inside the drawing). Off by default. */
+    cover?: boolean;
+    /** What the board says, in a sentence, for a reader who cannot see it: its title and who leads, say. Without it the board is hidden from assistive technology (it is a picture of what the page says elsewhere). */
+    label?: string;
+}
+/** A board that has been read: sizes and places that can be used, and the picture as an address. */
+export interface ResolvedBoard {
+    href: string;
+    width: number;
+    height: number;
+    position: BoardPosition | {
+        x: number;
+        y: number;
+        anchor: "start" | "center";
+    };
+    opacity: number;
+    share: number;
+    margin: number;
+    cover: boolean;
+    label: string | undefined;
+}
+/** A box: a drawing's viewBox, or the place a board takes in it. */
+export interface BoardBox {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** The positions, in the order a menu lists them. */
+export declare const BOARD_POSITIONS: readonly BoardPosition[];
+/** The share of a drawing's width and of its height that is kept clear round its middle: a board placed by name does not reach into it, so the middle of the playing area, where the score's panel stands, is never covered. */
+export declare const BOARD_CLEAR = 0.34;
+/** The shape of the box a 3D view is placed for (16 by 10, the view's own) and the units of it: a board in 3D is placed for this box and keeps its place, as a share of the box, when the box is another shape. */
+export declare const BOARD_TURN_BOX: BoardBox;
+/** The board an option asks for, read: a bad one is `undefined` and the drawing is as it was without it, as a bad `background` image is. */
+export declare function resolveBoard(value: unknown): ResolvedBoard | undefined;
+/**
+ * The place a board takes in a box. A named position keeps to its edge and takes the share asked for, unless that would reach into the middle (`BOARD_CLEAR` of the box's width and height, centred): then the board is made smaller, down
+ * to nothing in a box too small to hold one, and never moved. `cover` lifts that, and a point of your own is never held to it. The board keeps its own shape, and stays inside the box.
+ */
+export declare function placeBoard(board: ResolvedBoard, view: BoardBox): BoardBox;
+/** The board as markup in a drawing: an image in the box `placeBoard` gave, in the drawing's own units, over everything else. Nothing for a box with no room. */
+export declare function overlayMarkup(board: ResolvedBoard, box: BoardBox): string;
+/**
+ * The 3D view's board: a layer over the whole view (not in the scene, so it never turns, tips or zooms with it), and in it the picture at its size as a share of the view's width, its own shape kept (`height:auto`, `object-fit:contain`),
+ * placed by flex alignment on the view's edges. Its largest height is what the box `BOARD_TURN_BOX` gives it, so that on a wider view than that it still does not reach into the middle. It never takes the pointer: a drag on it turns the view.
+ */
+export declare function turnBoardMarkup(board: ResolvedBoard): string;
+/** The rules of the 3D view's board layer, written into `KYOGIJO_TURN_STYLE`. */
+export declare const KYOGIJO_TURN_BOARD_STYLE: string;

package/dist/overlay.js

@@ -0,0 +1,182 @@
+// A board laid over a drawing: a results board, a bout presentation, a medal table, drawn by anything else as an SVG (Taisen Brackets', say) and placed here, over the surface, in 2D (`board` in the drawing's
+// options) and in 3D (`board` in the options of the 3D view, where it is a screen-space overlay over the view and never a plane that turns). The package takes the board as a string and draws no board of its own and
+// reads nothing from the one it is given but its size: it is written as an image, which cannot run scripts, scaled evenly (its own shape is kept, so no letter is ever stretched), and placed by a named position
+// that keeps the middle of the surface clear, or by a point of the caller's choosing. Pure: the same options always give the same string.
+import { safePicture } from "./colour.js";
+import { el, esc, num } from "./format.js";
+/** The positions, in the order a menu lists them. */
+export const BOARD_POSITIONS = ["top", "bottom", "side", "left", "corner", "top-left", "top-right", "bottom-left", "bottom-right"];
+/** The share of a drawing's width and of its height that is kept clear round its middle: a board placed by name does not reach into it, so the middle of the playing area, where the score's panel stands, is never covered. */
+export const BOARD_CLEAR = 0.34;
+/** The shape of the box a 3D view is placed for (16 by 10, the view's own) and the units of it: a board in 3D is placed for this box and keeps its place, as a share of the box, when the box is another shape. */
+export const BOARD_TURN_BOX = { x: 0, y: 0, w: 1600, h: 1000 };
+const MAX_SIZE = 100000;
+const isPosition = (value) => typeof value === "string" && BOARD_POSITIONS.includes(value);
+const finite = (value) => typeof value === "number" && Number.isFinite(value);
+const between = (value, low, high) => Math.min(high, Math.max(low, value));
+/** The width and height of an SVG document's root, from its `viewBox`. */
+function viewBoxOf(svg) {
+    const root = /^\s*(?:<\?xml[^>]*\?>\s*)?(?:<!--[\s\S]*?-->\s*)*<svg\b[^>]*>/i.exec(svg)?.[0];
+    const box = root === undefined ? undefined : /\sviewBox\s*=\s*"\s*(-?[\d.]+)[\s,]+(-?[\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*"/i.exec(root);
+    if (box === undefined || box === null)
+        return undefined;
+    const [width, height] = [Number(box[3]), Number(box[4])];
+    return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0 ? { width, height } : undefined;
+}
+const defaultShare = (position) => {
+    if (typeof position === "object")
+        return 0.4;
+    if (position === "top" || position === "bottom")
+        return 0.5;
+    if (position === "side" || position === "left")
+        return 0.3;
+    return 0.36;
+};
+/** The board an option asks for, read: a bad one is `undefined` and the drawing is as it was without it, as a bad `background` image is. */
+export function resolveBoard(value) {
+    if (typeof value !== "object" || value === null)
+        return undefined;
+    const o = value;
+    if (typeof o.svg !== "string" || !/^\s*(?:<\?xml|<svg)\b/i.test(o.svg))
+        return undefined;
+    const href = safePicture(o.svg);
+    if (href === undefined)
+        return undefined;
+    const own = viewBoxOf(o.svg);
+    const width = finite(o.width) && o.width > 0 ? o.width : own?.width;
+    const height = finite(o.height) && o.height > 0 ? o.height : own?.height;
+    if (width === undefined || height === undefined || width > MAX_SIZE || height > MAX_SIZE)
+        return undefined;
+    let position = "top";
+    const asked = o.position;
+    if (isPosition(asked))
+        position = asked;
+    else if (typeof asked === "object" && asked !== null && finite(asked.x) && finite(asked.y)) {
+        const point = asked;
+        position = { x: between(point.x, 0, 1), y: between(point.y, 0, 1), anchor: point.anchor === "center" ? "center" : "start" };
+    }
+    const label = typeof o.label === "string" && o.label.trim() !== "" ? o.label.trim().slice(0, 300) : undefined;
+    return {
+        href,
+        width,
+        height,
+        position,
+        opacity: finite(o.opacity) ? between(o.opacity, 0, 1) : 1,
+        share: finite(o.share) ? between(o.share, 0.1, 1) : defaultShare(position),
+        margin: finite(o.margin) ? between(o.margin, 0, 0.2) : 0.02,
+        cover: o.cover === true,
+        label,
+    };
+}
+/** Where a named position stands: which edge it keeps to on each axis. */
+function edges(position) {
+    switch (position) {
+        case "top":
+            return { v: "top", h: "centre" };
+        case "bottom":
+            return { v: "bottom", h: "centre" };
+        case "side":
+            return { v: "middle", h: "right" };
+        case "left":
+            return { v: "middle", h: "left" };
+        case "corner":
+        case "top-right":
+            return { v: "top", h: "right" };
+        case "top-left":
+            return { v: "top", h: "left" };
+        case "bottom-left":
+            return { v: "bottom", h: "left" };
+        case "bottom-right":
+            return { v: "bottom", h: "right" };
+    }
+}
+/**
+ * The place a board takes in a box. A named position keeps to its edge and takes the share asked for, unless that would reach into the middle (`BOARD_CLEAR` of the box's width and height, centred): then the board is made smaller, down
+ * to nothing in a box too small to hold one, and never moved. `cover` lifts that, and a point of your own is never held to it. The board keeps its own shape, and stays inside the box.
+ */
+export function placeBoard(board, view) {
+    const ratio = board.width / board.height;
+    const gap = board.margin * view.w;
+    const inner = { x0: view.x + gap, y0: view.y + gap, x1: view.x + view.w - gap, y1: view.y + view.h - gap };
+    const innerW = Math.max(0, inner.x1 - inner.x0);
+    const innerH = Math.max(0, inner.y1 - inner.y0);
+    const wanted = board.share * view.w;
+    const point = board.position;
+    if (typeof point === "object") {
+        const w = Math.max(0, Math.min(wanted, view.w, view.h * ratio));
+        const h = w / ratio;
+        const x = view.x + point.x * view.w - (point.anchor === "center" ? w / 2 : 0);
+        const y = view.y + point.y * view.h - (point.anchor === "center" ? h / 2 : 0);
+        return { x: between(x, view.x, view.x + view.w - w), y: between(y, view.y, view.y + view.h - h), w, h };
+    }
+    const { v, h: side } = edges(point);
+    const clear = { x0: view.x + view.w * (0.5 - BOARD_CLEAR / 2), x1: view.x + view.w * (0.5 + BOARD_CLEAR / 2), y0: view.y + view.h * (0.5 - BOARD_CLEAR / 2), y1: view.y + view.h * (0.5 + BOARD_CLEAR / 2) };
+    let room = Math.min(innerW, innerH * ratio);
+    if (!board.cover) {
+        // Beside the middle (to its right, or to its left) and above or below it: how wide the board may be in each.
+        const beside = side === "right" ? inner.x1 - (clear.x1 + gap) : side === "left" ? clear.x0 - gap - inner.x0 : 0;
+        const above = v === "top" ? clear.y0 - gap - inner.y0 : v === "bottom" ? inner.y1 - (clear.y1 + gap) : 0;
+        if (v === "middle")
+            room = Math.min(beside, innerH * ratio);
+        else if (side === "centre")
+            room = Math.min(above * ratio, innerW);
+        else
+            room = Math.max(Math.min(beside, innerH * ratio), Math.min(above * ratio, innerW));
+    }
+    const w = Math.max(0, Math.min(wanted, room));
+    const h = w / ratio;
+    const x = side === "left" ? inner.x0 : side === "right" ? inner.x1 - w : view.x + (view.w - w) / 2;
+    const y = v === "top" ? inner.y0 : v === "bottom" ? inner.y1 - h : view.y + (view.h - h) / 2;
+    return { x, y, w, h };
+}
+/** The name a position goes by in the markup. */
+const positionName = (board) => (typeof board.position === "object" ? "custom" : board.position);
+/** The board as markup in a drawing: an image in the box `placeBoard` gave, in the drawing's own units, over everything else. Nothing for a box with no room. */
+export function overlayMarkup(board, box) {
+    if (!(box.w > 0) || !(box.h > 0))
+        return "";
+    return el("g", {
+        class: "ky-board",
+        "data-position": positionName(board),
+        opacity: board.opacity < 1 ? board.opacity : undefined,
+        "pointer-events": "none",
+        role: board.label === undefined ? undefined : "img",
+        "aria-label": board.label,
+        "aria-hidden": board.label === undefined ? "true" : undefined,
+    }, el("image", { class: "ky-board-img", href: board.href, x: box.x, y: box.y, width: box.w, height: box.h, preserveAspectRatio: "xMidYMid meet" }));
+}
+/**
+ * The 3D view's board: a layer over the whole view (not in the scene, so it never turns, tips or zooms with it), and in it the picture at its size as a share of the view's width, its own shape kept (`height:auto`, `object-fit:contain`),
+ * placed by flex alignment on the view's edges. Its largest height is what the box `BOARD_TURN_BOX` gives it, so that on a wider view than that it still does not reach into the middle. It never takes the pointer: a drag on it turns the view.
+ */
+export function turnBoardMarkup(board) {
+    const box = placeBoard(board, BOARD_TURN_BOX);
+    if (!(box.w > 0))
+        return "";
+    const percent = (n) => `${num(Math.round(n * 1000) / 10)}%`;
+    const style = [`width:${percent(box.w / BOARD_TURN_BOX.w)}`, `max-height:${percent(box.h / BOARD_TURN_BOX.h)}`];
+    if (typeof board.position === "object") {
+        style.push("position:absolute", `left:${percent(board.position.x)}`, `top:${percent(board.position.y)}`, "margin:0");
+        if (board.position.anchor === "center")
+            style.push("translate:-50% -50%");
+    }
+    else
+        style.push(`margin:${percent(board.margin)}`);
+    if (board.opacity < 1)
+        style.push(`opacity:${num(board.opacity)}`);
+    const attributes = `class="ky-turn-board" data-position="${positionName(board)}"${board.label === undefined ? ' aria-hidden="true"' : ` role="img" aria-label="${esc(board.label)}"`}`;
+    return `<div ${attributes}><img class="ky-turn-board-img" src="${esc(board.href)}" alt="" width="${num(board.width)}" height="${num(board.height)}" style="${style.join(";")}"></div>`;
+}
+/** The rules of the 3D view's board layer, written into `KYOGIJO_TURN_STYLE`. */
+export const KYOGIJO_TURN_BOARD_STYLE = `
+.ky-turn-board{position:absolute;inset:0;z-index:var(--ky-turn-board-z,9999);display:flex;pointer-events:none;overflow:hidden}
+.ky-turn-board-img{display:block;height:auto;object-fit:contain;flex:none;min-width:0}
+.ky-turn-board[data-position=top]{justify-content:center;align-items:flex-start}
+.ky-turn-board[data-position=bottom]{justify-content:center;align-items:flex-end}
+.ky-turn-board[data-position=side]{justify-content:flex-end;align-items:center}
+.ky-turn-board[data-position=left]{justify-content:flex-start;align-items:center}
+.ky-turn-board[data-position=corner],.ky-turn-board[data-position=top-right]{justify-content:flex-end;align-items:flex-start}
+.ky-turn-board[data-position=top-left]{justify-content:flex-start;align-items:flex-start}
+.ky-turn-board[data-position=bottom-left]{justify-content:flex-start;align-items:flex-end}
+.ky-turn-board[data-position=bottom-right]{justify-content:flex-end;align-items:flex-end}
+.ky-turn-board[data-position=custom]{display:block}`.trim();

package/dist/turn.dom.js

@@ -8,6 +8,7 @@ import { buildTurn, floorOptions, openingView, turnWords } from "./turn.model.js
 import { controlsMarkup, layoutOf, turnMarkupOf, worldMarkup } from "./turn.markup.js";
 import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 import { esc } from "./format.js";
+import { turnBoardMarkup } from "./overlay.js";
 /** True where the page can draw a plane in 3D by one `matrix3d`: that is, nearly everywhere with a stylesheet. */
 export function turnSupported(win = typeof window === "undefined" ? undefined : window) {
     const css = win?.CSS;
@@ -47,7 +48,7 @@ export function mountTurn(host, options, settings, build) {
     if (!supported) {
         // The flat drawing, with a sentence that says why it does not turn when the browser is the reason.
         const flat = (next) => {
-            host.innerHTML = `<div class="ky-turn" data-mode="flat"><style>${KYOGIJO_TURN_STYLE}</style>${model.flat ?? drawKyogijo(floorOptions(next))}${model.turnable ? `<p class="ky-turn-flat">${esc(turnWords(model).flat)}</p>` : ""}</div>`;
+            host.innerHTML = `<div class="ky-turn" data-mode="flat"><style>${KYOGIJO_TURN_STYLE}</style>${model.flat ?? drawKyogijo({ ...floorOptions(next), board: next.board })}${model.turnable ? `<p class="ky-turn-flat">${esc(turnWords(model).flat)}</p>` : ""}</div>`;
         };
         flat(options);
         return {
@@ -456,6 +457,10 @@ export function mountTurn(host, options, settings, build) {
                     world.setAttribute("data-theme", forced);
             }
             gather();
+            // The board is a layer of its own over the view, after the scene: it is written again, and the view's turn is not touched.
+            stage.querySelector(".ky-turn-board")?.remove();
+            if (model.board !== undefined)
+                stage.insertAdjacentHTML("beforeend", turnBoardMarkup(model.board));
             stage.setAttribute("aria-label", model.title);
             root.querySelector(".ky-turn-help").textContent = `${turnWords(model).keys}${model.standing === "" ? "" : ` ${model.standing}`}`;
             const theme = model.options.theme;

package/dist/turn.markup.js

@@ -7,6 +7,7 @@ import { cross, facing, fadeOf, n, size, unit } from "./turn.kit.js";
 import { buildTurn, turnWords } from "./turn.model.js";
 import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 import { esc } from "./format.js";
+import { turnBoardMarkup } from "./overlay.js";
 const px = (value) => `${Math.round(value * 1000) / 1000}`;
 /**
  * The matrix that stands a plane in the scene, before the camera: its x along `u`, its y along `v`, its corner `o`, in pixels from the middle of the scene
@@ -117,7 +118,7 @@ export function turnMarkupOf(model, settings = {}) {
     const sport = model.options.sport;
     return (`<div class="ky-turn" id="${esc(model.id)}" data-sport="${esc(String(sport))}" data-mode="3d" data-touch="${settings.touch === "turn" ? "turn" : "scroll"}" data-preset="${presetOf(view, model.presets ?? sport) ?? "custom"}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""} lang="${model.language}">` +
         sheet +
-        `<div class="ky-turn-view" tabindex="0" role="group" aria-roledescription="${esc(words.region)}" aria-label="${esc(model.title)}" aria-describedby="${esc(model.id)}-help" aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1 2 3 4 Home Space"><div ${worldAttributes(model)}>${worldMarkup(model, layout)}</div></div>` +
+        `<div class="ky-turn-view" tabindex="0" role="group" aria-roledescription="${esc(words.region)}" aria-label="${esc(model.title)}" aria-describedby="${esc(model.id)}-help" aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1 2 3 4 Home Space"><div ${worldAttributes(model)}>${worldMarkup(model, layout)}</div>${model.board === undefined ? "" : turnBoardMarkup(model.board)}</div>` +
         `<p class="ky-turn-help" id="${esc(model.id)}-help">${esc(keys)}</p>` +
         (settings.controls === false ? "" : controlsMarkup(model, view)) +
         `<div class="ky-turn-live" role="status" aria-live="polite"></div>` +

package/dist/turn.model.d.ts

@@ -2,6 +2,7 @@ import { KYOGIJO_STRINGS } from "./strings.ts";
 import { type PresetTable, type TurnPreset, type TurnView } from "./turn.camera.ts";
 import type { Plane } from "./turn.kit.ts";
 import { type UprightOptions, type Uprights } from "./uprights.ts";
+import { type ResolvedBoard } from "./overlay.ts";
 import type { VenueSettings } from "./venue.ts";
 import type { Box3 } from "./turn.camera.ts";
 import type { Language, ScoreOptions, SurfaceOptions } from "./types.ts";
@@ -99,6 +100,8 @@ export interface TurnModel {
     lens?: number;
     /** The flat drawing to show where the 3D view cannot be drawn, when it is not `drawKyogijo`'s of `options` (a tournament layout's). */
     flat?: string;
+    /** The board the options ask for (`board`), laid over the view: a layer of its own, never a plane of the scene. */
+    board?: ResolvedBoard;
 }
 /** The options with what makes the floor of a 3D view: the whole surface, lying wide, at its full size. */
 export declare function floorOptions(options: SurfaceOptions | ScoreOptions): SurfaceOptions | ScoreOptions;

package/dist/turn.model.js

@@ -8,6 +8,7 @@ import { KYOGIJO_STRINGS } from "./strings.js";
 import { TURN_DEFAULT, clampView, presetView } from "./turn.camera.js";
 import { describeUprights, planesOf, uprightsFor } from "./uprights.js";
 import { resolveCrowd } from "./crowd.js";
+import { resolveBoard } from "./overlay.js";
 /** The pixels in one foot of the scene at a zoom of 1: the floor is drawn this big, and scaled down to fit. A larger floor is sharper. */
 export const WORLD_PX = 1400;
 /** The options with what makes the floor of a 3D view: the whole surface, lying wide, at its full size. */
@@ -16,6 +17,8 @@ export function floorOptions(options) {
     delete rest.range;
     delete rest.half;
     delete rest.aspect;
+    // A board is a layer over the 3D view, not a picture on the floor.
+    delete rest.board;
     return rest;
 }
 const VIEWBOX = /viewBox="(-?[\d.]+) (-?[\d.]+) ([\d.]+) ([\d.]+)"/;
@@ -123,6 +126,7 @@ export function buildTurn(options, settings = {}) {
         centre,
         view: openingView(settings, o.sport),
         turnable: !badge,
+        board: badge ? undefined : resolveBoard(options.board),
     };
 }
 /** The words of the 3D view in the model's language. */

package/dist/turn.style.js

@@ -1,4 +1,5 @@
 import { JUDGING_DARK, JUDGING_LIGHT } from "./judging.style.js";
+import { KYOGIJO_TURN_BOARD_STYLE } from "./overlay.js";
 /**
  * The 3D view's stylesheet: the colours of what stands on the surface, in light and dark, and the rules that lay the scene out. Like the drawing's own, the
  * defaults are in `:where()`, which has no weight, so a page's own rule always wins; the colours are custom properties (`--ky-up-*`) a page can set.
@@ -136,4 +137,5 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn-controls button:disabled{opacity:.4;cursor:default}
 .ky-turn-help,.ky-turn-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 .ky-turn-flat{margin:8px 0 0;font-size:.85rem}
+${KYOGIJO_TURN_BOARD_STYLE}
 `.trim();

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { Background } from "./background.ts";
+import type { BoardOptions } from "./overlay.ts";
 import type { EmblemRef, EmblemRenderer } from "./emblems-source.ts";
 import type { FlagRenderer } from "./flags-source.ts";
 import type { Layer } from "./layers.types.ts";
@@ -699,6 +700,12 @@ export interface SurfaceOptions {
      * Unset, the drawing is byte for byte as before. See `BackgroundOptions`.
      */
     background?: Background;
+    /**
+     * A board laid over the drawing: a results board, a bout presentation or a medal table that another package drew (Taisen Brackets', say), taken as an SVG string with its width and height, and placed at the top, a side, a corner or a point
+     * of your own, kept off the middle of the surface unless you say otherwise. It is written as an image, never changed and never stretched, and in the 3D view it is a layer over the view that does not turn with it. A compact strip and a
+     * badge take none. Unset, the drawing is byte for byte as before. See `BoardOptions` and `docs/boards.md`.
+     */
+    board?: BoardOptions;
     /**
      * The pageant: each team's flag or logo laid large over its half (a `carpet`) or on a round disc (a `stage`), with an emblem in the centre. `"carpet"`, `"stage"`, `true` (a carpet) or `PageantOptions`.
      * Off by default; a score drawing only. See `PageantOptions`.

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.23.0";
+export declare const VERSION = "0.24.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.23.0";
+export const VERSION = "0.24.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Kyogijo Stadiums 競技場, 40 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, the MMA cage, 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",
@@ -279,6 +279,7 @@
     "arenas": "node scripts/build-arenas.mjs",
     "arenas:fetch": "node scripts/fetch-arenas.mjs",
     "arenas:check": "node scripts/check-arenas.mjs",
+    "boards": "node scripts/make-boards.mjs",
     "grounds": "node scripts/build-grounds.mjs",
     "grounds:check": "node scripts/check-grounds.mjs",
     "parks:coordinates": "node scripts/fetch-park-coordinates.mjs",
@@ -292,6 +293,7 @@
     "@johnmorrisdotca/chizu": "1.4.0",
     "@johnmorrisdotca/dougu-sports": "0.2.0",
     "@johnmorrisdotca/hata": "1.5.0",
+    "@johnmorrisdotca/taisen-brackets": "0.17.1",
     "@playwright/test": "^1.63.0",
     "eslint": "^9.0.0",
     "marked": "^18.1.1",