@johnmorrisdotca/kyogijo-stadiums 0.12.2 → 0.13.0

package/CHANGELOG.md

@@ -7,6 +7,23 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.13.0] - 2026-10-20
+
+### Added
+
+- **Tournament layouts in 3D** (`mountMultiTurn`, `multiTurnMarkup`, `buildMultiTurn` and `multiPresets` of `@johnmorrisdotca/kyogijo-stadiums/multi`). A layout can be turned like any surface: the same four viewpoints (overhead, broadcast, end-on and low corner), turn, tilt, zoom, reset and auto-turn, the same drag, keys and pinch, and the steady camera of 0.12.2 (a fixed scale for the whole turn, ten-decimal matrices, the lens of 8), with the whole floor fitted at every angle. It is the 3D view and not a second renderer: the layout is built as a `TurnModel`, so the camera, the controls and the tests are the ones every surface has (`mountKyogijoTurn` is now `mountTurn` over `buildTurn`, and `mountMultiTurn` is `mountTurn` over `buildMultiTurn`; `TurnModel` has `presets` and `flat` for a model with viewpoints and a flat drawing of its own). Each surface stands as it does on its own page and in its own cell (`uprightsFor`, moved and turned with the cell, and with the hall when the hall turns the layout): the nets and posts of every net sport and a table tennis table as a top 76 cm over the floor on its skirt and legs, with the table's own drawing on it and a soft shadow on the floor, each table's parts drawn in the right order from every side. What only a layout has is stood up from the figures the flat drawing draws: a surround of 75 cm round each area (the ITTF Handbook, 3.2.3.3), in pieces of at most 3 m, that gives way a little only to an eye low on its side (`Plane.fadeAt`); an umpire's chair and a score table as solid blocks; the scoreboard hung over the middle of the floor and facing the eye, and one at each surface where the layout has them. With `stadium` the stands of the hall are raised on the floor's ground (`standsVenueOf`, the same planes `standsVenue` makes for one surface), with a roof on request. The viewpoints are turned to the layout: a net sport's end-on view looks along its surfaces, and a floor taller than it is wide is turned a quarter so that its long way runs across the screen. The heights of the chairs, the tables and the scoreboard are ours (no rule gives them); the table's, the net's and the surround's are the rulebook's.
+- **`halls.html` has the 3D view.** A View choice (`2D` or `3D`, `view=3d` in the address), the viewpoint in the address (`viewpoint=`), the roof of the stadium (`roof=1`) and the 3D view's own controls under the floor; a layout chosen in 3D opens on the viewpoint chosen. Try it: <https://johnmorrisdotca.github.io/kyogijo-stadiums/halls.html?preset=tabletennis-4&view=3d>.
+- **Docs and README.** A section "In 3D" on [the layouts page](./docs/multi.md#in-3d) with a picture of a layout in 3D (four table tennis areas, light and dark); the same picture in the README's layouts section.
+- **Japanese**, two phrases for the parts named in a layout's 3D description: `競技エリアのフェンス` (the competition area's fence) and `審判席と記録台` (the umpires' chairs and the score tables).
+
+### Changed
+
+- `multiDrawing(options, raise)` (internal to `multi.draw.ts`) is the drawing of a layout with what was worked out to make it; `drawMulti` is its string. A layout made as the floor of a 3D view leaves out what the 3D view stands up. The drawn picture is unchanged.
+
+### Tests
+
+- The size-steadiness test (`src/turn.size.test.ts`) and the camera-fit test (`src/turn.camera.test.ts`) now run on every tournament layout, alone and in a stadium, in place of four layouts used as a plain floor; the depth-order and whole-floor tests of 0.12.2 (`src/turn.raised.test.ts`) run on the tables of the table tennis layouts and on the floor and stands of five layouts at every turn and tip, desk and phone; `src/multi.turn.test.ts` holds each surface to its cell (also in a hall that turns the layout), the surrounds, chairs, scoreboards and stands, the viewpoints and the markup; `e2e/halls.demo.mjs` plays the layouts page in 3D in a real browser (the controls, the address, a full turn's size, the legs under each table's top, the stadium and its roof, Japanese, a phone).
+
 ## [0.12.2] - 2026-10-20
 
 ### Added

package/README.md

@@ -1,7 +1,7 @@
 <h1 align="center">Kyogijo Stadiums <sub>競技場</sub></h1>
 
 <p align="center"><strong>Sports surfaces as SVG, drawn to scale, with the score on them.</strong><br>
-The NFL, CFL and IFAF football fields, the NHL rink, the NBA court, the soccer pitch and futsal court, the baseball field of every MLB ballpark, current and past, and every NPB home park, the rink and court of 167 NHL, NBA, WNBA and PWHL arenas, and the surfaces of curling, athletics, speed, short track and figure skating, swimming, water polo, diving, artistic swimming, 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, handball, judo, karate, kendo, sumo, kyūdō and a dojo of tatami, thirty-nine sports in all, each drawn from its rulebook or its published distances, with each team's name and logo on its side and the score in the middle, a lineup and the situation of the game on them, with stands and a crowd, a pageant of flags and a 3D view. Wide or tall, light or dark, a compact badge for a list, a helper for React, a custom element and a frame for a page that runs no script. One function, no dependencies.</p>
+The NFL, CFL and IFAF football fields, the NHL rink, the NBA court, the soccer pitch and futsal court, the baseball field of every MLB ballpark, current and past, and every NPB home park, the rink and court of 167 NHL, NBA, WNBA and PWHL arenas, and the surfaces of curling, athletics, speed, short track and figure skating, swimming, water polo, diving, artistic swimming, 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, handball, judo, karate, kendo, sumo, kyūdō and a dojo of tatami, thirty-nine sports in all, each drawn from its rulebook or its published distances, with each team's name and logo on its side and the score in the middle, a lineup and the situation of the game on them, with stands and a crowd, a pageant of flags and a 3D view. Wide or tall, light or dark, a badge for a list, a helper for React, a custom element and a frame for a page that runs no script. One function, no dependencies.</p>
 
 <p align="center">
   <a href="https://github.com/johnmorrisdotca/kyogijo-stadiums/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/johnmorrisdotca/kyogijo-stadiums/actions/workflows/ci.yml/badge.svg"></a>
@@ -72,10 +72,10 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
 
 ## Features
 
-- **Thirty-nine 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, the courts of tennis, volleyball (beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet and netball, the pools, the athletics stadium, the skating rinks, the fields of lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budō, with the lines, circles, keys, boxes and goals of each. Every figure is cited in [sources](./docs/sources.md). [The surfaces](./docs/surfaces.md).
+- **Thirty-nine 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, the courts of tennis, volleyball (beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet and netball, the pools, the athletics stadium, the skating rinks, the fields of lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budō. 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 and tone, stained keys, circle and border, a strip behind each baseline in the team's colour, the baskets and stanchions with soft shadows from above, a coaching box and benches, and a satin sheen, in every league and every renderer, with the detail dropping at small sizes. 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, an arena's courtside rows, or a ballpark's grandstands and bleachers laid behind the park's own fence, with the people as a seeded pattern of heads and shoulders in the home colours, the visitors at an end, the empty seats showing (`density`, or `attendance` over `capacity`), a card display on request, and a soccer pitch inside a gridiron stadium's footprint, to scale. A few kB of patterns, blocks at small sizes, every renderer, and the stands' rings, heights and rake as data. [The crowd](./docs/crowd.md).
+- **The stands and the crowd.** `crowd: true` draws the seating round any surface that has spectators: a bowl, two sides, a horseshoe, an arena's courtside rows, or a ballpark's grandstands and bleachers, with the people as seeded heads and shoulders in the home colours, the visitors at an end, the empty seats showing (`density`, or `attendance` over `capacity`), and a soccer pitch inside a gridiron stadium's footprint, to scale. Blocks at small sizes; the stands as data. [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, scored by the rules, `show: "folded"` for the whole sheet with both houses enlarged beside it in a square, and a heat map and statistics (free guards, hammer, steals, shots) for many ends. [Curling](./docs/curling.md).
 - **Net, racket and court sports, from their rulebooks.** The ITF's court, the FIVB's indoor and beach courts, World ParaVolley's sitting volleyball court, the BWF's, USA Pickleball's, the ITTF's table, the FIP's padel court, World Squash's courts (with the front wall laid flat beside the floor), the IRF's racquetball court, the ISTAF's sepak takraw court, the FITEQ's teqball court and table, the Roundnet Federation's court and World Netball's court, each in its look (hard court, clay, grass, wood, sand), with a board of sets and games and a ball beside the server. [Net, racket and court sports](./docs/courts.md).
 - **Swimming, water polo, diving and artistic swimming, from World Aquatics' regulations.** The competition pool of 50 or 25 m with its lanes, ropes, blocks, touch panels and flags; the water polo field; the diving well with its springboards and platforms; the artistic swimming area; several pools in a natatorium. The lanes of a race carry names, flags, places, times and splits, with a race replay by lane (`raceTimeline`) and a `splitsChart`. [Pools](./docs/pools.md).
@@ -85,7 +85,7 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
 - **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 (no four corners meet), in jō or metres, with the walls, doors, windows, shrine and kamiza. Five famous halls are on the atlas, each with only what a source gives, and the scores are judo's ippon, waza-ari and shido, karate's points, 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).
 - **Every ballpark.** The 30 current MLB parks and 44 that MLB clubs have left (the Polo Grounds, Ebbets Field, the Astrodome and more), 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; a past park whose fence moved is drawn as it stood in a season. [Ballparks](./docs/ballparks.md).
-- **Soccer grounds, arenas and an atlas.** 64 soccer grounds, each pitch at its published size, and 167 NHL, NBA, WNBA and PWHL arenas (`drawKyogijo({ sport: "nhl", arena: "boston-garden" })`), a rink or a court at the arena's own size where an article gives one, and every park, ground, arena and budō hall (330 places) on a map, by sport, league, country and year, each found by any name it has in English, Japanese or its own language (`Koshien Stadium` is also `甲子園`, `San Siro` is `サン・シーロ`). [The grounds](./docs/grounds.md), [the arenas](./docs/arenas.md), [the atlas](./docs/atlas.md), [names](./docs/ballparks.md#names).
+- **Soccer grounds, arenas and an atlas.** 64 soccer grounds, each pitch at its published size, and 167 NHL, NBA, WNBA and PWHL arenas (`drawKyogijo({ sport: "nhl", arena: "boston-garden" })`), a rink or court at the arena's own size where known, and every park, ground, arena and budō hall (330 places) on a map, by sport, league, country and year, each 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, the Crawford Boxes, the Baggie), drawn as a band outside the fence whose width and shade say the height, with a key (`walls`); and Tal's Hill, Wrigley Field's ivy and basket, overhangs, poles, bullpens, the backstop and the 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 (the Winter Classic, the Stadium Series, the Heritage Classic), a college basketball court on the deck of a carrier, a baseball field laid over a London stadium's pitch. 18 games, each with its day, its venue and its sources, and the place of the rink cited where a source gives it and marked as a convention where none does. [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).
@@ -103,7 +103,7 @@ console.log(svg.startsWith("<svg"), svg.includes("USA 3, Canada 2"));
 - **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 social card, a square post or a phone; `background` lays a quiet pattern (felt, grass, wood, ice, paper, a grid, dots) 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, whether it fits a hall, and a real stadium round it. [Tournament layouts](./docs/multi.md).
 - **Replay.** Tracking data played on any surface: the players with their numbers, the ball and its trail, and the passes, shots and goals as they happen, with controls, the keyboard and a live region, steps for a reader who prefers reduced motion, and a pause when the page is hidden. [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, antennae, baskets, rink boards and glass, goals, posts, stumps, a ballpark's fence, the walls of padel and squash, a pool's blocks, a diving well's platforms, a jump's bar, hurdles; and the venue round it (the raked stands with the people on them, roofs on request, a dojo's walls and gallery). Plain DOM and CSS over the same SVG. [The 3D view](./docs/turn.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, antennae, baskets, rink boards and glass, goals, posts, stumps, a ballpark's fence, the walls of padel and squash, a pool's blocks, hurdles; and the venue round it (raked stands, roofs on request, a dojo's walls and gallery). Plain DOM and CSS over the same SVG. [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 that imports nothing from outside the package. [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, a curling stone's place from the button, a place from the net in each net sport (from the centre of the court in squash, racquetball, roundnet and netball), the centre of each field sport's surface, the middle of the water of each pool, the middle of the athletics stadium and of each skating rink) 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.
@@ -494,7 +494,7 @@ console.log(svg.includes('viewBox="0 0 1200 675"'), svg.includes("Three ballpark
 
 ### Several surfaces on one floor
 
-For a large event that runs many contests at once: `drawMulti` lays the package's own surfaces out together, to scale, on one floor, with the officials' chairs, the boards along the edges and empty places for the event's own words and marks ([tournament layouts](./docs/multi.md)). Thirteen presets, each with its rule and sources, from table tennis to judo and karate; `multiFit` says whether a layout fits a hall, and `stadium: true` sets it inside real stands.
+`drawMulti` lays the package's own surfaces out together for one large event, to scale, on one floor, with the officials' chairs, the boards and empty places for the event's words and marks ([tournament layouts](./docs/multi.md)). Thirteen presets with their rules and sources; `multiFit` says whether a layout fits a hall, `stadium: true` sets it inside real stands, and `mountMultiTurn` turns the floor in 3D.
 
 ```ts
 import { drawMulti, multiLayout } from "@johnmorrisdotca/kyogijo-stadiums/multi";
@@ -523,7 +523,15 @@ console.log(layout.needs.length, layout.needs.width);
 <br><em>Four table tennis areas under one scoreboard.</em>
 </p>
 
-Each surface is the one `drawKyogijo` draws, so nothing is drawn a second way; the [demo](https://johnmorrisdotca.github.io/kyogijo-stadiums/halls.html) picks a preset, sets it in a hall and switches the stadium on and off.
+<p align="center">
+<picture>
+<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/multi-tabletennis-3d-desk-dark.webp">
+<img src="https://raw.githubusercontent.com/johnmorrisdotca/kyogijo-stadiums/main/docs/images/multi-tabletennis-3d-desk-light.webp" alt="Four table tennis areas in 3D from a low corner: tables on legs, a surround round each, a hung scoreboard, and the 3D view's controls." width="640">
+</picture>
+<br><em>The same four in 3D.</em>
+</p>
+
+The [demo](https://johnmorrisdotca.github.io/kyogijo-stadiums/halls.html) picks a preset, sets it in a hall, switches the stadium on and off, and turns it in 3D.
 
 ### The element in a page
 

package/dist/multi-entry.d.ts

@@ -1,4 +1,5 @@
 export { drawMulti, multiSetting, multiTable } from "./multi.draw.ts";
+export { SURROUND_HEIGHT, buildMultiTurn, mountMultiTurn, multiPresets, multiTurnMarkup } from "./multi.turn.ts";
 export { MULTI_MAX, fitSentence, multiFit, multiLayout, needsSentence, specOf, venueOf } from "./multi.ts";
 export { MULTI_PRESETS, MULTI_PRESET_IDS, MULTI_SOURCES, MULTI_VENUES, multiPreset, multiSource, multiVenueById } from "./multi.data.ts";
 export { KYOGIJO_MULTI_STYLE } from "./multi.style.ts";

package/dist/multi-entry.js

@@ -2,6 +2,7 @@
 // officials' chairs, a scoreboard hung over the middle, the boards and the empty places for the event's own words and marks; the real configurations of events as presets, each with its rule; the halls whose
 // floors are published, and whether a layout fits one; and a real stadium round the floor at the same scale. `multiTable` is the text alternative.
 export { drawMulti, multiSetting, multiTable } from "./multi.draw.js";
+export { SURROUND_HEIGHT, buildMultiTurn, mountMultiTurn, multiPresets, multiTurnMarkup } from "./multi.turn.js";
 export { MULTI_MAX, fitSentence, multiFit, multiLayout, needsSentence, specOf, venueOf } from "./multi.js";
 export { MULTI_PRESETS, MULTI_PRESET_IDS, MULTI_SOURCES, MULTI_VENUES, multiPreset, multiSource, multiVenueById } from "./multi.data.js";
 export { KYOGIJO_MULTI_STYLE } from "./multi.style.js";

package/dist/multi.draw.d.ts

@@ -1,4 +1,5 @@
-import type { MultiFit, MultiLayout, MultiOptions, MultiVenue } from "./multi.types.ts";
+import { type Crowd, type CrowdStands } from "./crowd.ts";
+import type { MultiCell, MultiFit, MultiLayout, MultiOptions, MultiVenue } from "./multi.types.ts";
 /**
  * A tournament layout as one SVG string: several of the package's surfaces laid out together for one large event, to scale, on one floor. `preset` is one of `MULTI_PRESETS` (`tabletennis-4`, `pickleball-2x4`,
  * `curling-1x4`, `judo-1x3`, `karate-2x3`, `badminton-1x4`, ...), or `layout` is your own; `rows`, `columns` and `stagger` change the grid. The empty places for the event's words and marks are drawn dashed and hold nothing.
@@ -13,6 +14,61 @@ import type { MultiFit, MultiLayout, MultiOptions, MultiVenue } from "./multi.ty
  * ```
  */
 export declare function drawMulti(options?: MultiOptions): string;
+/** Where the layout stands in the picture, so that something else can be put in the same frame (the 3D view's planes): the hall's size, where the layout is set in it, and the map from the layout's own frame to the picture's. */
+export interface MultiFrame {
+    layout: MultiLayout;
+    /** The hall's size and the layout's size as set in it (turned a quarter when the hall asks), in feet; the layout's top left corner is at (`ox`, `oy`). */
+    hall: {
+        w: number;
+        h: number;
+    };
+    lw: number;
+    lh: number;
+    ox: number;
+    oy: number;
+    turned: boolean;
+    /** A point of the layout's own frame (feet from the top left of its floor) in the picture's frame. */
+    to(x: number, y: number): [number, number];
+}
+/** A layout's drawing, and what was worked out to make it. */
+export interface MultiDrawing {
+    svg: string;
+    frame: MultiFrame;
+    fit: MultiFit | undefined;
+    /** The stands of the stadium round the hall, when it is on (in the picture's frame), and the crowd they are of. */
+    stands?: {
+        stands: CrowdStands;
+        crowd: Crowd;
+        standsLike: string;
+    };
+    /** For a drawing made to be raised (`raise`): the surfaces that stand over the floor (a table tennis table), each with its cell and its own drawing, which the floor does not carry. */
+    lifted: {
+        cell: MultiCell;
+        body: string;
+        box: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        };
+        lift: number;
+    }[];
+    /** The width and height of the picture and where it starts, in feet (its viewBox). */
+    view: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    title: string;
+    description: string;
+}
+/**
+ * The drawing of a layout, with what it was worked out from. `raise` makes the floor of a 3D view instead of the flat picture: the barriers, the officials' chairs, the scoreboard and the stands are left out (the 3D
+ * view stands them up), and a surface that stands over the floor (a table tennis table) is left off it too, with a soft shadow in its place. Everything else is the same string. With `uprights` false the 3D view stands
+ * nothing but the stands up, so the barriers and the rest stay on the floor.
+ */
+export declare function multiDrawing(options: MultiOptions, raise: boolean, uprights?: boolean): MultiDrawing;
 /**
  * The same thing as the picture, as a table: each playing surface with its row, column, place and size in metres, and each empty place for the event's words and marks, under a caption that gives
  * what the layout needs. For a reader who cannot see the drawing, and for a page that wants the figures.

package/dist/multi.draw.js

@@ -14,6 +14,7 @@ import { MULTI_WORDS } from "./multi.words.js";
 import { outlineOf } from "./outline.js";
 import { fill } from "./strings.js";
 import { textWidth } from "./text.js";
+import { uprightsFor } from "./uprights.js";
 import { VERSION } from "./version.js";
 const metres = (ft) => ft / FEET_PER_METRE;
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
@@ -46,6 +47,14 @@ const floorClass = (layout) => (layout.spec.kind === "budo" ? "ky-bud-t2" : "ky-
  * ```
  */
 export function drawMulti(options = {}) {
+    return multiDrawing(options, false).svg;
+}
+/**
+ * The drawing of a layout, with what it was worked out from. `raise` makes the floor of a 3D view instead of the flat picture: the barriers, the officials' chairs, the scoreboard and the stands are left out (the 3D
+ * view stands them up), and a surface that stands over the floor (a table tennis table) is left off it too, with a soft shadow in its place. Everything else is the same string. With `uprights` false the 3D view stands
+ * nothing but the stands up, so the barriers and the rest stay on the floor.
+ */
+export function multiDrawing(options, raise, uprights = true) {
     const o = options;
     const language = o.language === "ja" ? "ja" : "en";
     const words = MULTI_WORDS[language];
@@ -80,8 +89,13 @@ export function drawMulti(options = {}) {
     let style = "";
     let look;
     let cellsMarkup = "";
+    const lifted = [];
     const surfaceBox = outlineOf(spec.surface).box;
     const common = { ...spec.surface, margin: 0, language };
+    // A surface that stands over the floor (a table tennis table's top, 76 cm up) is raised by the 3D view as a plane of its own.
+    const up = raise && uprights;
+    const lift = up && spec.kind === "cells" ? uprightsFor(common).lift : 0;
+    const raised = lift > 0;
     if (spec.kind === "budo") {
         const drawn = inner(drawKyogijo({ ...common, id: `${gid}-s`, ...(o.style === "none" ? { style: "none" } : {}) }));
         style = drawn.style;
@@ -97,6 +111,13 @@ export function drawMulti(options = {}) {
                 style = drawn.style;
                 look = drawn.look;
             }
+            if (raised) {
+                // The floor has its shadow, soft and a little larger; the top is a plane of the 3D view.
+                const grow = 0.8;
+                cellsMarkup += el("rect", { class: "ky-mu-shadow", x: num(cell.x - grow / 2), y: num(cell.y - grow / 2), width: num(cell.w + grow), height: num(cell.h + grow), rx: num(grow) });
+                lifted.push({ cell, body: drawn.body, box: { x: surfaceBox.x, y: surfaceBox.y, w: surfaceBox.w, h: surfaceBox.h }, lift });
+                return;
+            }
             // A surface turned a quarter stands across the layout: the drawing's own top left goes to the cell's top right, and the drawing is turned.
             const place = cell.turn ? `translate(${num(cell.x + cell.w)} ${num(cell.y)}) rotate(90) translate(${num(-surfaceBox.x)} ${num(-surfaceBox.y)})` : `translate(${num(cell.x - surfaceBox.x)} ${num(cell.y - surfaceBox.y)})`;
             cellsMarkup += el("g", { class: "ky-mu-cell", "data-cell": cell.n, transform: place }, drawn.body);
@@ -106,10 +127,10 @@ export function drawMulti(options = {}) {
     let floorMarkup = "";
     floorMarkup += el("rect", { class: floorClass(layout), x: 0, y: 0, width: num(layout.floor.w), height: num(layout.floor.h) });
     let over = "";
-    if (spec.parts.barriers === true)
+    if (!up && spec.parts.barriers === true)
         for (const c of layout.cells)
             over += el("rect", { class: "ky-mu-barrier", x: num(c.bay.x + 0.5), y: num(c.bay.y + 0.5), width: num(c.bay.w - 1), height: num(c.bay.h - 1), rx: 0.4 });
-    if (spec.parts.officials === true) {
+    if (!up && spec.parts.officials === true) {
         for (const c of layout.cells) {
             if (c.turn) {
                 // Beside the net, on the right of a surface that stands across the layout.
@@ -123,10 +144,10 @@ export function drawMulti(options = {}) {
             over += el("rect", { class: "ky-mu-desk", x: num(cx - 5), y: num(c.y - 3.1), width: 3.6, height: 1.1, rx: 0.2 });
         }
     }
-    if (spec.parts.scoreboard === "each")
+    if (!up && spec.parts.scoreboard === "each")
         for (const c of layout.cells)
             over += el("rect", { class: "ky-mu-sb", x: num(c.x + c.w / 2 - 2), y: num(c.y + c.h + 1.2), width: 4, height: 1.4, rx: 0.2 });
-    const sb = layout.shared;
+    const sb = up ? undefined : layout.shared;
     if (sb !== undefined) {
         over += el("rect", { class: "ky-mu-sb", x: num(sb.x), y: num(sb.y), width: num(sb.w), height: num(sb.h), rx: 0.5 });
         // One scoreboard for all: a quarter of it for each of four areas, or one panel for each when they are fewer or more.
@@ -186,6 +207,7 @@ export function drawMulti(options = {}) {
     let reach = { left: 0, right: 0, top: 0, bottom: 0 };
     let defs = "";
     let crowdStyle = "";
+    let standing;
     const wide = { x: 0, y: 0, w: hall.w, h: hall.h };
     const boards = layout.slots.filter((s) => s.kind === "board");
     const boardsMargin = withSlots && boards.length > 0 ? 5 : 0;
@@ -202,13 +224,18 @@ export function drawMulti(options = {}) {
         const standsLike = venue?.standsLike ?? spec.sport;
         const crowd = resolveCrowd({ gaps: false, awayEnd: "none", roof: stadium.roof, shape: stadium.shape, density: stadium.density, detail: stadium.detail === "plain" ? "plain" : "fine" });
         const stands = layoutOf({ sport: standsLike, box: wide, crowd, awaySide: "right", arena: venue?.shape === "octagon" });
-        const density = stadium.crowd === false ? 0 : densityOf(crowd, stands.seats, undefined);
-        const drawn = drawCrowd(stands, { id: `${gid}-cr`, crowd, density, fine: crowd.detail !== "plain", ground: "ky-mu-apron" });
-        defs += drawn.defs;
         const wall = venue?.shape === "octagon" ? el("path", { class: "ky-mu-wall", d: octagonD(hall.w / 2, hall.w / 2, hall.w / 2) }) : el("rect", { class: "ky-mu-wall", x: 0, y: 0, width: num(hall.w), height: num(hall.h), rx: 0.5 });
-        hallMarkup = drawn.markup + hallMarkup + wall;
+        if (raise)
+            hallMarkup += wall;
+        else {
+            const density = stadium.crowd === false ? 0 : densityOf(crowd, stands.seats, undefined);
+            const drawn = drawCrowd(stands, { id: `${gid}-cr`, crowd, density, fine: crowd.detail !== "plain", ground: "ky-mu-apron" });
+            defs += drawn.defs;
+            hallMarkup = drawn.markup + hallMarkup + wall;
+            crowdStyle = KYOGIJO_CROWD_STYLE;
+        }
         reach = stands.reach;
-        crowdStyle = KYOGIJO_CROWD_STYLE;
+        standing = { stands, crowd, standsLike };
     }
     else if (venue !== undefined) {
         hallMarkup += el("rect", { class: "ky-mu-hall", x: 0, y: 0, width: num(hall.w), height: num(hall.h) });
@@ -267,7 +294,8 @@ export function drawMulti(options = {}) {
         "data-theme": o.theme === "light" || o.theme === "dark" ? o.theme : undefined,
         "data-version": VERSION,
     }, `<title id="${titleId}">${esc(title)}</title><desc id="${descId}">${esc(description)}</desc>` + css + (defs === "" ? "" : `<defs>${defs}</defs>`) + el("rect", { class: "ky-mu-apron", x: num(view.x), y: num(view.y), width: num(vw), height: num(vh) }) + hallLayer + group + overhang + slotTexts + labelsMarkup);
-    return root;
+    const frame = { layout, hall, lw, lh, ox, oy, turned, to };
+    return { svg: root, frame, fit, ...(standing === undefined ? {} : { stands: standing }), lifted, view: { x: view.x, y: view.y, w: vw, h: vh }, title, description };
 }
 /** Where an empty place is, in words: the surface it belongs to, the side or end it is at, and whether it is on the mats. */
 function slotWhere(slot, layout, words) {

package/dist/multi.style.js

@@ -6,8 +6,8 @@ const FLOORS = {
     red: { light: ["#b3362b", "#fdf3f1"], dark: ["#7a241d", "#f3d8d4"] },
     ice: { light: ["#e4eef5", "#1d2b36"], dark: ["#a9bccb", "#10181f"] },
 };
-const COMMON_LIGHT = "--ky-mu-neutral:#bdb9ad;--ky-mu-barrier:#161a1f;--ky-mu-board:#1d2430;--ky-mu-board-ink:#f4f1ea;--ky-mu-chair:#ece7da;--ky-mu-chair-edge:#4a4f56;--ky-mu-sb:#10151b;--ky-mu-sb-ink:#f6f6f6;--ky-mu-wall:#3a4048;--ky-mu-hall:#d9d5c8;--ky-mu-over:#c0392b";
-const COMMON_DARK = "--ky-mu-neutral:#2b2f2c;--ky-mu-barrier:#05070a;--ky-mu-board:#0d1218;--ky-mu-board-ink:#e8e4da;--ky-mu-chair:#b9b4a6;--ky-mu-chair-edge:#050607;--ky-mu-sb:#05080b;--ky-mu-sb-ink:#e9e9e9;--ky-mu-wall:#0a0c0f;--ky-mu-hall:#1b1f1c;--ky-mu-over:#e0614f";
+const COMMON_LIGHT = "--ky-mu-neutral:#bdb9ad;--ky-mu-barrier:#161a1f;--ky-mu-board:#1d2430;--ky-mu-board-ink:#f4f1ea;--ky-mu-chair:#ece7da;--ky-mu-chair-edge:#4a4f56;--ky-mu-sb:#10151b;--ky-mu-sb-ink:#f6f6f6;--ky-mu-wall:#3a4048;--ky-mu-hall:#d9d5c8;--ky-mu-over:#c0392b;--ky-mu-shadow:rgba(0,0,0,.2)";
+const COMMON_DARK = "--ky-mu-neutral:#2b2f2c;--ky-mu-barrier:#05070a;--ky-mu-board:#0d1218;--ky-mu-board-ink:#e8e4da;--ky-mu-chair:#b9b4a6;--ky-mu-chair-edge:#050607;--ky-mu-sb:#05080b;--ky-mu-sb-ink:#e9e9e9;--ky-mu-wall:#0a0c0f;--ky-mu-hall:#1b1f1c;--ky-mu-over:#e0614f;--ky-mu-shadow:rgba(0,0,0,.45)";
 const hallVars = (which) => Object.entries(FLOORS).map(([name, f]) => `--ky-mu-f-${name}:${f[which][0]}`).join(";");
 const looks = (which) => Object.entries(FLOORS).map(([name, f]) => `.kyogijo.ky-multi[data-floor=${name}]{--ky-mu-floor:${f[which][0]};--ky-mu-slot:${f[which][1]}}`).join("");
 /**
@@ -27,6 +27,7 @@ ${Object.entries(FLOORS).map(([name, f]) => `html[data-theme=dark] .kyogijo.ky-m
 .kyogijo .ky-mu-hallfloor{fill:var(--ky-mu-neutral);stroke:var(--ky-mu-wall);stroke-width:.8}
 ${Object.keys(FLOORS).map((name) => `.kyogijo .ky-mu-hf-${name}{fill:var(--ky-mu-f-${name})}`).join("\n")}
 .kyogijo .ky-mu-wall{fill:none;stroke:var(--ky-mu-wall);stroke-width:2.2;stroke-linejoin:round}
+.kyogijo .ky-mu-shadow{fill:var(--ky-mu-shadow)}
 .kyogijo .ky-mu-over{fill:none;stroke:var(--ky-mu-over);stroke-width:1.4;stroke-dasharray:5 3}
 .kyogijo .ky-mu-barrier{fill:none;stroke:var(--ky-mu-barrier);stroke-width:1;stroke-opacity:.9}
 .kyogijo .ky-mu-board{fill:var(--ky-mu-board)}

package/dist/multi.turn.d.ts

@@ -0,0 +1,32 @@
+import type { MultiOptions } from "./multi.types.ts";
+import { type PresetTable } from "./turn.camera.ts";
+import { type KyogijoTurn } from "./turn.dom.ts";
+import { type TurnModel, type TurnSettings } from "./turn.model.ts";
+import type { Sport } from "./types.ts";
+/** How high a surround stands: the ITTF's "about 75 cm" (Handbook 3.2.3.3). A layout of another sport with surrounds has the same (ours: no other rulebook is read for it). */
+export declare const SURROUND_HEIGHT: number;
+/**
+ * The viewpoints of a layout. Overhead, broadcast and the low corner are a single surface's (`TURN_PRESETS`); the end-on view of a net sport looks along its surfaces' length, where the nets are seen whole, as `NET_PRESETS` does. All are turned a quarter where
+ * the floor or the surfaces stand across the picture, so that the long way of the floor runs across the screen. `floor` is the picture's frame (the hall's, turned if the hall asks) and `lengthAlongX` says whether the surfaces' length runs along its x.
+ */
+export declare function multiPresets(sport: Sport, floor: {
+    w: number;
+    h: number;
+}, lengthAlongX: boolean): PresetTable;
+/**
+ * A tournament layout as a 3D model: the floor is the layout's flat drawing, and on it stand each surface as it stands on its own page, the surrounds, the umpires' chairs and score tables, the scoreboards and, with `stadium`, the stands
+ * of the hall. A `TurnModel` like any other: `turnMarkupOf` and `mountMultiTurn` make a view of it.
+ */
+export declare function buildMultiTurn(options: MultiOptions, settings?: TurnSettings): TurnModel;
+/**
+ * Mount a tournament layout as a 3D view in a container: the same view as `mountKyogijoTurn`'s, with the controls, the pointer, the keys and the auto-turn of every 3D view, over the layout's floor with each surface standing on it.
+ * @example
+ * ```ts no-run
+ * import { mountMultiTurn } from "@johnmorrisdotca/kyogijo-stadiums/multi";
+ * const view = mountMultiTurn(document.querySelector("#hall")!, { preset: "tabletennis-4", stadium: true }, { preset: "broadcast" });
+ * view.set({ yaw: 40 });
+ * ```
+ */
+export declare function mountMultiTurn(host: HTMLElement, options: MultiOptions, settings?: TurnSettings): KyogijoTurn<MultiOptions>;
+/** A tournament layout as the markup of a 3D view, still until a page's script makes it turn: pure, so a server can make it. */
+export declare function multiTurnMarkup(options: MultiOptions, settings?: TurnSettings): string;

package/dist/multi.turn.js

@@ -0,0 +1,253 @@
+// A tournament layout in 3D: the 3D view of `turn.ts`, with a layout's several surfaces on its floor. Nothing here is drawn a second way. Each surface stands as it does on its own page (`uprightsFor`: the nets and posts, a table
+// tennis table's legs and skirt), moved to where the layout puts it, and the stands of the stadium round the hall are the 3D view's own (`standsVenueOf`); what only a layout has (the surrounds between the areas, the umpires'
+// chairs and score tables, the scoreboards) is stood up from the same figures the flat drawing draws, and the floor is the flat drawing itself, `multiDrawing` made for raising. The model it makes is a `TurnModel`, so the
+// camera, the controls, the pointer, the auto-turn and the tests of every other 3D view are this one's.
+import { FEET_PER_METRE } from "./geometry.js";
+import { multiDrawing } from "./multi.draw.js";
+import { outlineOf } from "./outline.js";
+import { hash } from "./format.js";
+import { TURN_PRESETS, NET_PRESETS, wrap } from "./turn.camera.js";
+import { flat, n, plane, shy, thinnest, wall } from "./turn.kit.js";
+import { mountTurn } from "./turn.dom.js";
+import { turnMarkupOf } from "./turn.markup.js";
+import { openingView, sceneBox } from "./turn.model.js";
+import { describeUprights, planesOf, uprightsFor } from "./uprights.js";
+import { standsVenueOf } from "./venue.js";
+import { isNetSport } from "./court.js";
+/** How high a surround stands: the ITTF's "about 75 cm" (Handbook 3.2.3.3). A layout of another sport with surrounds has the same (ours: no other rulebook is read for it). */
+export const SURROUND_HEIGHT = 0.75 * FEET_PER_METRE;
+/** The longest piece a surround is cut into, in feet: a long wall is several planes, so that each is drawn in its place among the surfaces and the chairs and not as one slab sorted by its middle. */
+const SURROUND_PIECE = 10;
+/** An umpire's chair's seat and a score table's top, in feet over the floor (ours: the rule gives no height for either). */
+const CHAIR = 1.5;
+const DESK = 2.5;
+/** Where the scoreboards hang (ours): the one over the middle of the floor has its lower edge 13 feet up and its cables run 8 feet above its top; the one at each surface stands 2.6 feet off the floor. */
+const HUNG = { bottom: 13, cables: 8 };
+const STANDING = { legs: 2.6, tall: 1.4 };
+const mapOf = (to) => {
+    const [e, f] = to(0, 0);
+    const [px, py] = to(1, 0);
+    const [qx, qy] = to(0, 1);
+    return { a: px - e, b: qx - e, c: py - f, d: qy - f, e, f };
+};
+const at = (m, x, y) => [m.a * x + m.b * y + m.e, m.c * x + m.d * y + m.f];
+const dir = (m, x, y) => [m.a * x + m.b * y, m.c * x + m.d * y];
+/** A plane moved by a map, under a new id. A plane that stands in a frame turned a quarter turns with it: its corner, its two sides and the way it faces out. */
+function place(p, m, id) {
+    const [ox, oy] = at(m, p.o[0], p.o[1]);
+    const [ux, uy] = dir(m, p.u[0], p.u[1]);
+    const [vx, vy] = dir(m, p.v[0], p.v[1]);
+    const moved = { ...p, id, o: [ox, oy, p.o[2]], u: [ux, uy, p.u[2]], v: [vx, vy, p.v[2]] };
+    if (p.shy !== undefined)
+        moved.shy = dir(m, p.shy[0], p.shy[1]);
+    if (p.crop === true) {
+        // A picture of the floor over a rectangle keeps its sides along x and y.
+        const corners = [at(m, p.o[0], p.o[1]), at(m, p.o[0] + p.u[0], p.o[1] + p.u[1]), at(m, p.o[0] + p.v[0], p.o[1] + p.v[1]), at(m, p.o[0] + p.u[0] + p.v[0], p.o[1] + p.u[1] + p.v[1])];
+        const [x0, x1] = [Math.min(...corners.map((c) => c[0])), Math.max(...corners.map((c) => c[0]))];
+        const [y0, y1] = [Math.min(...corners.map((c) => c[1])), Math.max(...corners.map((c) => c[1]))];
+        moved.o = [x0, y0, p.o[2]];
+        moved.u = [x1 - x0, 0, 0];
+        moved.v = [0, y1 - y0, 0];
+    }
+    return moved;
+}
+const rect = (x, y, w, h) => ({ x0: x, y0: y, x1: x + w, y1: y + h });
+/** A solid box on the floor: four sides up to `z1` and a flat top. `cls` paints the top; the sides are one tone darker (`cls-side`). */
+function box(id, kind, r, z1, cls) {
+    const sides = [[r.x0, r.y0, r.x1, r.y0], [r.x1, r.y0, r.x1, r.y1], [r.x1, r.y1, r.x0, r.y1], [r.x0, r.y1, r.x0, r.y0]];
+    const planes = sides.map(([a, b, c, d], i) => wall(`${id}-${i + 1}`, kind, a, b, c, d, 0, z1, `<rect width="${n(Math.hypot(c - a, d - b))}" height="${n(z1)}" class="${cls}-side"/>`));
+    planes.push(flat(`${id}-top`, kind, r.x0, r.y0, r.x1, r.y1, z1, `<rect width="${n(r.x1 - r.x0)}" height="${n(r.y1 - r.y0)}" class="${cls}"/>`));
+    return planes;
+}
+/** The surround of one area: four sides over the rectangle, each in pieces of at most `SURROUND_PIECE`, facing out from the area's middle (it gives way to a nearly level eye, as the glass of a rink does, but only then). */
+function surround(id, r) {
+    const centre = [(r.x0 + r.x1) / 2, (r.y0 + r.y1) / 2];
+    const sides = [[r.x0, r.y0, r.x1, r.y0], [r.x1, r.y0, r.x1, r.y1], [r.x1, r.y1, r.x0, r.y1], [r.x0, r.y1, r.x0, r.y0]];
+    const planes = [];
+    sides.forEach(([xa, ya, xb, yb], side) => {
+        const long = Math.hypot(xb - xa, yb - ya);
+        const pieces = Math.max(1, Math.ceil(long / SURROUND_PIECE));
+        const rim = Math.min(0.3, SURROUND_HEIGHT * 0.12);
+        for (let i = 0; i < pieces; i += 1) {
+            const [t0, t1] = [i / pieces, (i + 1) / pieces];
+            const run = long / pieces;
+            const svg = `<rect width="${n(run)}" height="${n(SURROUND_HEIGHT)}" class="u-surround"/><rect width="${n(run)}" height="${n(rim)}" class="u-surround-rim"/>`;
+            const p = wall(`${id}-${side + 1}-${i + 1}`, "surround", xa + (xb - xa) * t0, ya + (yb - ya) * t0, xa + (xb - xa) * t1, ya + (yb - ya) * t1, 0, SURROUND_HEIGHT, svg);
+            planes.push({ ...shy(p, centre), fadeTo: 0.35, fadeAt: 0.85 });
+        }
+    });
+    return planes;
+}
+/** A scoreboard that faces the eye: its panel (and where it is divided into the panels of the areas), hung on cables from over its top, or standing on legs. */
+function board(id, cx, cy, wide, tall, bottom, extra, hung, cuts) {
+    const total = tall + extra;
+    const top = hung ? extra : 0;
+    const line = Math.max(0.12, wide * 0.008);
+    const holds = hung
+        ? `<path d="M${n(wide * 0.12)} 0V${n(extra)}M${n(wide * 0.88)} 0V${n(extra)}" class="u-sbline" fill="none" stroke-width="${n(line)}"/>`
+        : `<path d="M${n(wide * 0.14)} ${n(tall)}V${n(total)}M${n(wide * 0.86)} ${n(tall)}V${n(total)}" class="u-sbline" fill="none" stroke-width="${n(line * 1.6)}"/>`;
+    const panel = `<rect x="0" y="${n(top)}" width="${n(wide)}" height="${n(tall)}" rx="${n(wide * 0.02)}" class="u-sbframe"/>${cuts === "" ? "" : `<path d="${cuts}" transform="translate(0 ${n(top)})" class="u-sbline" fill="none" stroke-width="${n(line * 0.7)}"/>`}`;
+    return { ...plane(id, "screen", [cx - wide / 2, cy, bottom + total], [wide, 0, 0], [0, 0, -total], `${holds}${panel}`), billboard: true };
+}
+/**
+ * The viewpoints of a layout. Overhead, broadcast and the low corner are a single surface's (`TURN_PRESETS`); the end-on view of a net sport looks along its surfaces' length, where the nets are seen whole, as `NET_PRESETS` does. All are turned a quarter where
+ * the floor or the surfaces stand across the picture, so that the long way of the floor runs across the screen. `floor` is the picture's frame (the hall's, turned if the hall asks) and `lengthAlongX` says whether the surfaces' length runs along its x.
+ */
+export function multiPresets(sport, floor, lengthAlongX) {
+    const portrait = floor.h > floor.w ? 90 : 0;
+    const nets = isNetSport(sport);
+    const end = nets ? NET_PRESETS.end : TURN_PRESETS.end;
+    const along = nets ? (lengthAlongX ? 0 : 90) : portrait;
+    return {
+        overhead: { ...TURN_PRESETS.overhead, yaw: portrait },
+        broadcast: { ...TURN_PRESETS.broadcast, yaw: wrap(TURN_PRESETS.broadcast.yaw + portrait) },
+        end: { ...end, yaw: wrap(end.yaw + along) },
+        corner: { ...TURN_PRESETS.corner, yaw: wrap(TURN_PRESETS.corner.yaw + portrait) },
+    };
+}
+/**
+ * A tournament layout as a 3D model: the floor is the layout's flat drawing, and on it stand each surface as it stands on its own page, the surrounds, the umpires' chairs and score tables, the scoreboards and, with `stadium`, the stands
+ * of the hall. A `TurnModel` like any other: `turnMarkupOf` and `mountMultiTurn` make a view of it.
+ */
+export function buildMultiTurn(options, settings = {}) {
+    const wanted = settings.uprights;
+    const upOptions = wanted === false || wanted === true || wanted === undefined ? {} : wanted;
+    const on = wanted !== false;
+    const stadiumOn = settings.venue !== false && options.stadium !== undefined && options.stadium !== false;
+    const drawn = multiDrawing(stadiumOn ? options : { ...options, stadium: undefined }, true, on);
+    const { frame, title, description } = drawn;
+    const layout = frame.layout;
+    const spec = layout.spec;
+    const language = options.language === "ja" ? "ja" : "en";
+    const id = settings.id ?? (typeof options.id === "string" && options.id !== "" ? `${options.id}-turn` : `ky-turn-${hash(JSON.stringify([options, settings.uprights, settings.preset, settings.venue]))}`);
+    const only = upOptions.only;
+    const keep = (kind) => only === undefined || only.includes(kind);
+    const items = [];
+    const toPicture = mapOf(frame.to);
+    if (on) {
+        // ---- Each surface, as it stands on its own page, moved to its cell. ----
+        const common = { ...spec.surface, margin: 0, language };
+        if (spec.kind === "cells") {
+            const own = uprightsFor(common, { ...upOptions, venue: undefined, score: "floor" });
+            const surfaceBox = outlineOf(spec.surface).box;
+            for (const cell of layout.cells) {
+                const into = mapOf((x, y) => frame.to(...(cell.turn ? [cell.x + cell.w - y, cell.y + x] : [cell.x + x, cell.y + y])));
+                for (const item of own.items) {
+                    // The hall's floor under a table is the layout's own, so the planes that stood in for it are left behind.
+                    const planes = item.planes.filter((p) => p.kind !== "ground").map((p) => place(p, into, `c${cell.n}-${p.id}`));
+                    if (planes.length > 0)
+                        items.push({ ...item, id: `c${cell.n}-${item.id}`, at: at(into, item.at[0], item.at[1]), planes });
+                }
+            }
+            // A surface that stands over the floor (a table's top) is a plane of its own, with the surface's own drawing on it.
+            for (const lifted of drawn.lifted) {
+                const local = flat("table-top", "table", 0, 0, surfaceBox.w, surfaceBox.h, lifted.lift, `<g transform="translate(${n(-lifted.box.x)} ${n(-lifted.box.y)})">${lifted.body}</g>`);
+                const into = mapOf((x, y) => frame.to(...(lifted.cell.turn ? [lifted.cell.x + lifted.cell.w - y, lifted.cell.y + x] : [lifted.cell.x + x, lifted.cell.y + y])));
+                items.push({ id: `c${lifted.cell.n}-table-top`, kind: "table-legs", at: at(into, surfaceBox.w / 2, surfaceBox.h / 2), height: lifted.lift, planes: [place(local, into, `c${lifted.cell.n}-table-top`)] });
+            }
+        }
+        // ---- What only a layout has. ----
+        const parts = spec.parts;
+        const layoutPlanes = (ps) => ps.map((p) => place(p, toPicture, p.id));
+        if (parts.barriers === true && upOptions.boards !== false && keep("surrounds")) {
+            const planes = layout.cells.flatMap((c) => surround(`c${c.n}-surround`, { x0: c.bay.x + 0.5, y0: c.bay.y + 0.5, x1: c.bay.x + c.bay.w - 0.5, y1: c.bay.y + c.bay.h - 0.5 }));
+            items.push({ id: "surrounds", kind: "surrounds", at: at(toPicture, layout.floor.w / 2, layout.floor.h / 2), height: SURROUND_HEIGHT, planes: layoutPlanes(planes) });
+        }
+        if (parts.officials === true && keep("officials")) {
+            const planes = [];
+            for (const c of layout.cells)
+                planes.push(...officialsOf(c));
+            items.push({ id: "officials", kind: "officials", at: at(toPicture, layout.floor.w / 2, layout.floor.h / 2), height: DESK, planes: layoutPlanes(planes) });
+        }
+        if (keep("scoreboard")) {
+            const boards = [];
+            if (parts.scoreboard === "each")
+                for (const c of layout.cells)
+                    boards.push(board(`c${c.n}-scoreboard`, c.x + c.w / 2, c.y + c.h + 1.9, 4, STANDING.tall, 0, STANDING.legs, false, ""));
+            const sb = layout.shared;
+            if (sb !== undefined) {
+                const count = layout.cells.length;
+                const cols = count <= 4 ? Math.min(2, count) : count;
+                const rows = count <= 4 && count > 2 ? 2 : 1;
+                let cuts = "";
+                for (let i = 1; i < cols; i += 1)
+                    cuts += `M${n((sb.w * i) / cols)} 0v${n(sb.h)}`;
+                for (let j = 1; j < rows; j += 1)
+                    cuts += `M0 ${n((sb.h * j) / rows)}h${n(sb.w)}`;
+                boards.push(board("scoreboard", sb.x + sb.w / 2, sb.y + sb.h / 2, sb.w, sb.h, HUNG.bottom, HUNG.cables, true, cuts));
+            }
+            if (boards.length > 0)
+                items.push({ id: "scoreboard", kind: "scoreboard", at: at(toPicture, layout.floor.w / 2, layout.floor.h / 2), height: parts.scoreboard === "shared" ? HUNG.bottom : STANDING.legs, planes: layoutPlanes(boards) });
+        }
+    }
+    // ---- The stands of the stadium round the hall, in the picture's own frame. ----
+    let defs = "";
+    let crowdStyle = "";
+    if (drawn.stands !== undefined && keep("stands")) {
+        const roof = typeof settings.venue === "object" && settings.venue.roof !== undefined ? settings.venue.roof : typeof options.stadium === "object" && options.stadium.roof === true;
+        const venue = standsVenueOf(drawn.stands.stands, drawn.stands.crowd, { sport: drawn.stands.standsLike }, { ...(typeof settings.venue === "object" ? settings.venue : {}), roof, id }, 0);
+        items.push(...venue.items.filter((item) => item.kind !== "roof" || roof));
+        defs = venue.defs;
+        crowdStyle = "--ky-cr-home:#8b94a3;--ky-cr-away:#8b94a3";
+    }
+    // ---- The model. ----
+    const uprights = { items, lift: 0, thin: thinnest(drawn.view.w, drawn.view.h), area: { x0: drawn.view.x, y0: drawn.view.y, x1: drawn.view.x + drawn.view.w, y1: drawn.view.y + drawn.view.h }, whole: true, ...(defs === "" ? {} : { defs }) };
+    const planes = planesOf(uprights);
+    const scale = 1400 / Math.max(drawn.view.w, drawn.view.h);
+    const centre = [drawn.view.x + drawn.view.w / 2, drawn.view.y + drawn.view.h / 2];
+    const box3 = sceneBox(planes, uprights.area, 0, centre, scale);
+    const look = /^<svg[^>]* data-look="([^"]*)"/.exec(drawn.svg)?.[1];
+    const surfaceLike = { sport: spec.sport, language, ...(options.theme === undefined ? {} : { theme: options.theme }), ...(options.style === undefined ? {} : { style: options.style }) };
+    const standing = describeUprights(surfaceLike, uprights, language);
+    const first = layout.cells[0];
+    const presets = multiPresets(spec.sport, { w: frame.lw, h: frame.lh }, first === undefined || first.turn === frame.turned);
+    return {
+        id,
+        language,
+        options: surfaceLike,
+        title,
+        description: standing === "" ? description : `${description}${language === "ja" ? "" : " "}${standing}`,
+        standing,
+        floor: drawn.svg,
+        viewBox: { x: drawn.view.x, y: drawn.view.y, w: drawn.view.w, h: drawn.view.h },
+        scale,
+        uprights,
+        defs,
+        crowdStyle,
+        venue: drawn.stands !== undefined,
+        look: { sport: spec.sport, look: look ?? "plain" },
+        planes,
+        box: box3,
+        centre,
+        view: openingView(settings, presets),
+        turnable: true,
+        presets,
+        flat: multiDrawing(options, false).svg,
+    };
+}
+/** The umpire's chair and the score table beside a surface, where the flat drawing has them (feet, in the layout's frame). */
+function officialsOf(c) {
+    if (c.turn) {
+        // Beside the net, on the right of a surface that stands across the layout.
+        const cy = c.y + c.h / 2;
+        return [...box(`c${c.n}-chair`, "chair", rect(c.x + c.w + 1.8, cy - 3.2, 1.6, 1.6), CHAIR, "u-chair"), ...box(`c${c.n}-desk`, "desk", rect(c.x + c.w + 1.5, cy - 0.8, 1.1, 3.6), DESK, "u-chair")];
+    }
+    const cx = c.x + c.w / 2;
+    return [...box(`c${c.n}-chair`, "chair", rect(cx + 1.6, c.y - 3.4, 1.6, 1.6), CHAIR, "u-chair"), ...box(`c${c.n}-desk`, "desk", rect(cx - 5, c.y - 3.1, 3.6, 1.1), DESK, "u-chair")];
+}
+/**
+ * Mount a tournament layout as a 3D view in a container: the same view as `mountKyogijoTurn`'s, with the controls, the pointer, the keys and the auto-turn of every 3D view, over the layout's floor with each surface standing on it.
+ * @example
+ * ```ts no-run
+ * import { mountMultiTurn } from "@johnmorrisdotca/kyogijo-stadiums/multi";
+ * const view = mountMultiTurn(document.querySelector("#hall")!, { preset: "tabletennis-4", stadium: true }, { preset: "broadcast" });
+ * view.set({ yaw: 40 });
+ * ```
+ */
+export function mountMultiTurn(host, options, settings = {}) {
+    return mountTurn(host, options, settings, buildMultiTurn);
+}
+/** A tournament layout as the markup of a 3D view, still until a page's script makes it turn: pure, so a server can make it. */
+export function multiTurnMarkup(options, settings = {}) {
+    return turnMarkupOf(buildMultiTurn(options, settings), settings);
+}

package/dist/strings.d.ts

@@ -993,7 +993,7 @@ export interface KyogijoWords {
         item: string;
         itemSag: string;
         /** The names of what stands on the surface, by kind. */
-        parts: Record<"scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge", string>;
+        parts: Record<"scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge" | "surrounds" | "officials", string>;
     };
     /** The names of the zones that `zoneAt` answers with (rules.ts), by id. */
     rules: Record<RuleId, string>;

package/dist/strings.js

@@ -432,7 +432,7 @@ export const KYOGIJO_STRINGS = {
             announce: "{name} view", announceAngle: "Turned to {yaw} degrees, seen from {pitch} degrees above the floor.",
             flat: "This browser cannot draw the 3D view, so the flat drawing is shown.",
             standing: "Standing on it, in the 3D view: {list}.", item: "{name} {h}", itemSag: "{name} {h} at the posts, {low} at the middle",
-            parts: { scoreboard: "scoreboard (lower edge)", net: "net", antennae: "antennae", goalposts: "goal posts", netposts: "net posts", hoop: "baskets", goal: "goals", boards: "boards and glass", stumps: "stumps", pylons: "pylons", flags: "corner flags", fence: "fence", backstop: "backstop", "foul-poles": "foul poles", "table-legs": "table top", walls: "walls", "starting-blocks": "starting blocks", "backstroke-flags": "backstroke flags", "false-start-rope": "false start rope", springboards: "springboards", platforms: "platforms", "judges-stand": "judges' stand", hurdles: "hurdles", steeplechase: "steeplechase barriers", "high-jump": "high jump uprights and bar", "pole-vault": "pole vault uprights and bar", cage: "discus and hammer cage", padding: "padding", "rink-boards": "boards", mound: "clay mound", azuchi: "azuchi", targets: "targets", stands: "stands", "wall-seats": "seats on top of the wall", roof: "roof", gallery: "gallery", dais: "dais", banner: "banner", shrine: "shrine", "mat-edge": "mat thickness" },
+            parts: { scoreboard: "scoreboard (lower edge)", net: "net", antennae: "antennae", goalposts: "goal posts", netposts: "net posts", hoop: "baskets", goal: "goals", boards: "boards and glass", stumps: "stumps", pylons: "pylons", flags: "corner flags", fence: "fence", backstop: "backstop", "foul-poles": "foul poles", "table-legs": "table top", walls: "walls", "starting-blocks": "starting blocks", "backstroke-flags": "backstroke flags", "false-start-rope": "false start rope", springboards: "springboards", platforms: "platforms", "judges-stand": "judges' stand", hurdles: "hurdles", steeplechase: "steeplechase barriers", "high-jump": "high jump uprights and bar", "pole-vault": "pole vault uprights and bar", cage: "discus and hammer cage", padding: "padding", "rink-boards": "boards", mound: "clay mound", azuchi: "azuchi", targets: "targets", stands: "stands", "wall-seats": "seats on top of the wall", roof: "roof", gallery: "gallery", dais: "dais", banner: "banner", shrine: "shrine", "mat-edge": "mat thickness", surrounds: "surrounds", officials: "umpires' chairs and score tables" },
         },
         rules: {
             "defensive-zone": "Defensive zone",
@@ -968,7 +968,7 @@ export const KYOGIJO_STRINGS = {
             announce: "{name}の視点", announceAngle: "向きは{yaw}度、見下ろす角度は{pitch}度です。",
             flat: "このブラウザーでは3D表示ができないため、平面の図を表示しています。",
             standing: "3D表示で立って見えるもの：{list}。", item: "{name} {h}", itemSag: "{name} 支柱の位置で{h}（中央は{low}）",
-            parts: { scoreboard: "スコアボードの下端", net: "ネット", antennae: "アンテナ", goalposts: "ゴールポスト", netposts: "支柱", hoop: "バスケットゴール", goal: "ゴール", boards: "ボードとガラス", stumps: "ウィケットのスタンプ", pylons: "パイロン", flags: "コーナーフラッグ", fence: "外野フェンス", backstop: "バックネット", "foul-poles": "ファウルポール", "table-legs": "天板", walls: "壁", "starting-blocks": "スタート台", "backstroke-flags": "背泳ぎ用フラッグ", "false-start-rope": "フォルススタートロープ", springboards: "飛板", platforms: "固定台", "judges-stand": "ジャッジ台", hurdles: "ハードル", steeplechase: "障害物", "high-jump": "走高跳の支柱とバー", "pole-vault": "棒高跳の支柱とバー", cage: "円盤投・ハンマー投の囲い", padding: "防護マット", "rink-boards": "フェンス", mound: "土の台", azuchi: "安土", targets: "的", stands: "スタンド", "wall-seats": "壁の上の観客席", roof: "屋根", gallery: "見学席", dais: "上座の台", banner: "垂れ幕", shrine: "神棚", "mat-edge": "畳の厚み" },
+            parts: { scoreboard: "スコアボードの下端", net: "ネット", antennae: "アンテナ", goalposts: "ゴールポスト", netposts: "支柱", hoop: "バスケットゴール", goal: "ゴール", boards: "ボードとガラス", stumps: "ウィケットのスタンプ", pylons: "パイロン", flags: "コーナーフラッグ", fence: "外野フェンス", backstop: "バックネット", "foul-poles": "ファウルポール", "table-legs": "天板", walls: "壁", "starting-blocks": "スタート台", "backstroke-flags": "背泳ぎ用フラッグ", "false-start-rope": "フォルススタートロープ", springboards: "飛板", platforms: "固定台", "judges-stand": "ジャッジ台", hurdles: "ハードル", steeplechase: "障害物", "high-jump": "走高跳の支柱とバー", "pole-vault": "棒高跳の支柱とバー", cage: "円盤投・ハンマー投の囲い", padding: "防護マット", "rink-boards": "フェンス", mound: "土の台", azuchi: "安土", targets: "的", stands: "スタンド", "wall-seats": "壁の上の観客席", roof: "屋根", gallery: "見学席", dais: "上座の台", banner: "垂れ幕", shrine: "神棚", "mat-edge": "畳の厚み", surrounds: "競技エリアのフェンス", officials: "審判席と記録台" },
         },
         rules: {
             "defensive-zone": "ディフェンディングゾーン",

package/dist/turn-entry.d.ts

@@ -1,4 +1,4 @@
-export { mountKyogijoTurn, turnSupported } from "./turn.dom.ts";
+export { mountKyogijoTurn, mountTurn, turnSupported } from "./turn.dom.ts";
 export type { KyogijoTurn } from "./turn.dom.ts";
 export { buildTurn, floorOptions, openingView } from "./turn.model.ts";
 export type { TurnModel, TurnSettings } from "./turn.model.ts";

package/dist/turn-entry.js

@@ -1,5 +1,5 @@
 // The 3D view: a surface as a floor that turns, with a net, a basket, a goal or a pair of posts standing on it.
-export { mountKyogijoTurn, turnSupported } from "./turn.dom.js";
+export { mountKyogijoTurn, mountTurn, turnSupported } from "./turn.dom.js";
 export { buildTurn, floorOptions, openingView } from "./turn.model.js";
 export { layoutOf, planeMarkup, planeMatrix, turnMarkup, turnMarkupOf } from "./turn.markup.js";
 export { KYOGIJO_TURN_STYLE } from "./turn.style.js";

package/dist/turn.camera.d.ts

@@ -25,8 +25,10 @@ export declare const NET_PRESETS: Readonly<Record<TurnPreset, TurnView>>;
  * stay nearly square on to it, and the end view looks along it.
  */
 export declare const CURLING_PRESETS: Readonly<Record<TurnPreset, TurnView>>;
-/** The four viewpoints of a sport. */
-export declare const presetsFor: (sport?: string) => Readonly<Record<TurnPreset, TurnView>>;
+/** The four viewpoints as a table. */
+export type PresetTable = Readonly<Record<TurnPreset, TurnView>>;
+/** The four viewpoints of a sport, or the table itself when it is given one (a tournament layout has its own). */
+export declare const presetsFor: (sport?: string | PresetTable) => PresetTable;
 /** The view a mount opens on. */
 export declare const TURN_DEFAULT: TurnPreset;
 export declare const PITCH_MAX = 84;
@@ -39,9 +41,9 @@ export declare function clampView(view: TurnView, fallback?: TurnView): TurnView
 /** The angle equal to `to` that is nearest to `from`, so that a change of view turns the short way round. */
 export declare const nearest: (from: number, to: number) => number;
 /** The view a viewpoint name stands for in a sport, or `undefined` for a name that is not one. */
-export declare const presetView: (name: string | undefined, sport?: string) => TurnView | undefined;
+export declare const presetView: (name: string | undefined, sport?: string | PresetTable) => TurnView | undefined;
 /** The name of the viewpoint a view is in a sport, or `undefined` when it is none of them (it has been turned by hand). */
-export declare function presetOf(view: TurnView, sport?: string): TurnPreset | undefined;
+export declare function presetOf(view: TurnView, sport?: string | PresetTable): TurnPreset | undefined;
 /** The steps of the keys and the buttons, in degrees, and the factor of a zoom step. A held Shift takes the larger. */
 export declare const STEP: {
     readonly yaw: 6;

package/dist/turn.camera.js

@@ -41,8 +41,8 @@ export const CURLING_PRESETS = {
 };
 /** The sports whose net runs across the court and whose viewpoints are `NET_PRESETS`. */
 const NET_SPORTS = ["tennis", "volleyball", "badminton", "pickleball", "tabletennis", "padel", "sepaktakraw", "teqball"];
-/** The four viewpoints of a sport. */
-export const presetsFor = (sport) => (sport === "curling" ? CURLING_PRESETS : sport !== undefined && NET_SPORTS.includes(sport) ? NET_PRESETS : sport !== undefined && LONG_SPORTS.includes(sport) ? LONG_PRESETS : TURN_PRESETS);
+/** The four viewpoints of a sport, or the table itself when it is given one (a tournament layout has its own). */
+export const presetsFor = (sport) => typeof sport === "object" ? sport : (sport === "curling" ? CURLING_PRESETS : sport !== undefined && NET_SPORTS.includes(sport) ? NET_PRESETS : sport !== undefined && LONG_SPORTS.includes(sport) ? LONG_PRESETS : TURN_PRESETS);
 /** The view a mount opens on. */
 export const TURN_DEFAULT = "corner";
 export const PITCH_MAX = 84;

package/dist/turn.dom.d.ts

@@ -1,8 +1,8 @@
 import { type TurnPreset, type TurnView } from "./turn.camera.ts";
-import { type TurnSettings } from "./turn.model.ts";
+import { type TurnModel, type TurnSettings } from "./turn.model.ts";
 import type { ScoreOptions, SurfaceOptions } from "./types.ts";
-/** What `mountKyogijoTurn` gives back. */
-export interface KyogijoTurn {
+/** What `mountKyogijoTurn` gives back. `O` is what `update` takes: the options of a drawing, or (for `mountMultiTurn`) of a tournament layout. */
+export interface KyogijoTurn<O = SurfaceOptions | ScoreOptions> {
     /** `3d`, or `flat` where the browser cannot draw the 3D view (or there is nothing to turn): the flat drawing is shown and the rest of this does nothing. */
     readonly mode: "3d" | "flat";
     /** The view now: where it is going if it is gliding. */
@@ -14,7 +14,7 @@ export interface KyogijoTurn {
     /** Back to the opening view. */
     reset(): void;
     /** Draw again with new options (a score that moved, a look that changed), keeping the view. */
-    update(options: SurfaceOptions | ScoreOptions): void;
+    update(options: O): void;
     /** Whether the auto-turn is running. */
     readonly playing: boolean;
     /** Start the auto-turn, a slow turn of the whole view. It gives whether it is running (a surface that cannot turn gives `false`). Nothing turns by itself until this, the Play button or Space starts it, unless `autoPlay` asked. */
@@ -46,3 +46,8 @@ export declare function turnSupported(win?: {
  * ```
  */
 export declare function mountKyogijoTurn(host: HTMLElement, options: SurfaceOptions | ScoreOptions, settings?: TurnSettings): KyogijoTurn;
+/**
+ * Mount any 3D model (`mountKyogijoTurn` is this with the model of one surface; `mountMultiTurn` with a tournament layout's): `build` makes the model from what `update` is given, and the rest, the controls, the pointer, the keys
+ * and the auto-turn, is the same.
+ */
+export declare function mountTurn<O>(host: HTMLElement, options: O, settings: TurnSettings, build: (options: O, settings: TurnSettings) => TurnModel): KyogijoTurn<O>;

package/dist/turn.dom.js

@@ -30,16 +30,24 @@ const between = (from, to, t) => ({ yaw: from.yaw + (nearest(from.yaw, to.yaw) -
  * ```
  */
 export function mountKyogijoTurn(host, options, settings = {}) {
+    return mountTurn(host, options, settings, buildTurn);
+}
+/**
+ * Mount any 3D model (`mountKyogijoTurn` is this with the model of one surface; `mountMultiTurn` with a tournament layout's): `build` makes the model from what `update` is given, and the rest, the controls, the pointer, the keys
+ * and the auto-turn, is the same.
+ */
+export function mountTurn(host, options, settings, build) {
     const doc = host.ownerDocument;
     const win = doc.defaultView;
-    let model = buildTurn(options, settings);
-    const sport = () => model.options.sport;
+    let model = build(options, settings);
+    /** What names the four viewpoints: the model's own table (a tournament layout has one), else the sport's. */
+    const sport = () => model.presets ?? model.options.sport;
     const supported = turnSupported(win ?? undefined) && model.turnable;
     let alive = true;
     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>${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))}${model.turnable ? `<p class="ky-turn-flat">${esc(turnWords(model).flat)}</p>` : ""}</div>`;
         };
         flat(options);
         return {
@@ -53,7 +61,7 @@ export function mountKyogijoTurn(host, options, settings = {}) {
             pause: () => undefined,
             togglePlay: () => false,
             update: (next) => {
-                model = buildTurn(next, settings);
+                model = build(next, settings);
                 flat(next);
             },
             svg: () => (alive ? host.querySelector("svg.kyogijo") : null),
@@ -430,7 +438,7 @@ export function mountKyogijoTurn(host, options, settings = {}) {
         update(next) {
             if (!alive)
                 return;
-            model = buildTurn(next, { ...settings, preset: undefined, view });
+            model = build(next, { ...settings, preset: undefined, view });
             view = clampView(view);
             opening = openingView(settings, sport());
             const layout = layoutOf(model, shown, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens);

package/dist/turn.kit.d.ts

@@ -1,7 +1,7 @@
 /** A point or a direction: x, y, z in feet. */
 export type V3 = readonly [number, number, number];
 /** What a plane is a part of: it is the class of its element (`ky-up-<kind>`) and what a test finds it by. */
-export type PartKind = "post" | "net" | "tape" | "antenna" | "board" | "glass" | "rim" | "stanchion" | "frame" | "goal" | "flag" | "stump" | "leg" | "table" | "pylon" | "wall" | "screen" | "pole" | "ground" | "target" | "seats" | "concourse" | "fascia" | "roof" | "banner" | "platform" | "rail" | "matedge" | "shrine";
+export type PartKind = "post" | "net" | "tape" | "antenna" | "board" | "glass" | "rim" | "stanchion" | "frame" | "goal" | "flag" | "stump" | "leg" | "table" | "pylon" | "wall" | "screen" | "pole" | "ground" | "target" | "seats" | "concourse" | "fascia" | "roof" | "banner" | "platform" | "rail" | "matedge" | "shrine" | "surround" | "chair" | "desk";
 /** One flat rectangle. Its own x runs along `u` (its whole length) and its own y along `v`; `o` is the corner both start from. `svg` is what is drawn on it, in feet along `u` and `v`. */
 export interface Plane {
     /** A name that says what it is and where: `net`, `post-left`, `goal-right-back`. */
@@ -28,9 +28,11 @@ export interface Plane {
     crop?: boolean;
     /** How much of a `shy` plane is left when it is cut away altogether: 0.08 when missing. A plane that others lie over on the screen (the steps of a gallery) takes less, so that they do not add up to a veil. */
     fadeTo?: number;
+    /** How low the eye must be for a `shy` plane to begin to give way: the share (of the plane's side being towards the eye, times the sine of the pitch) at which the fade starts; 0.1 when missing. A low barrier takes a high one, so that it stays whole until the eye is nearly level with it. */
+    fadeAt?: number;
 }
 /** What stands on the surface as a thing a reader would name: a net, a basket, a goal, a pair of posts. */
-export type UprightKind = "scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge";
+export type UprightKind = "scoreboard" | "net" | "antennae" | "goalposts" | "netposts" | "hoop" | "goal" | "boards" | "stumps" | "pylons" | "flags" | "fence" | "backstop" | "foul-poles" | "table-legs" | "walls" | "starting-blocks" | "backstroke-flags" | "false-start-rope" | "springboards" | "platforms" | "judges-stand" | "hurdles" | "steeplechase" | "high-jump" | "pole-vault" | "cage" | "padding" | "rink-boards" | "mound" | "azuchi" | "targets" | "stands" | "wall-seats" | "roof" | "gallery" | "dais" | "banner" | "shrine" | "mat-edge" | "surrounds" | "officials";
 /** A thing that stands on the surface: where, how high, and the planes it is made of. */
 export interface Upright {
     id: string;
@@ -90,4 +92,4 @@ export declare function shy(p: Plane, centre: readonly [number, number]): Plane;
  * How much of a wall is left (1 whole, down to 0.08) at a view: none is cut away unless the wall is on the eye's side of the surface, and then more the lower the eye is, because a wall seen
  * from straight above hides nothing. `yaw` and `pitch` are the view's, in degrees.
  */
-export declare function fadeOf(p: Pick<Plane, "shy" | "fadeTo">, yaw: number, pitch: number): number;
+export declare function fadeOf(p: Pick<Plane, "shy" | "fadeTo" | "fadeAt">, yaw: number, pitch: number): number;

package/dist/turn.kit.js

@@ -105,6 +105,7 @@ export function fadeOf(p, yaw, pitch) {
     // The horizontal direction from the surface to the eye (the same sum as the depth of a point).
     const toward = p.shy[0] * Math.sin(a) + p.shy[1] * Math.cos(a);
     const hides = toward * Math.sin((pitch * Math.PI) / 180);
-    const t = Math.min(1, Math.max(0, (hides - 0.1) / 0.25));
+    const from = p.fadeAt ?? 0.1;
+    const t = Math.min(1, Math.max(0, (hides - from) / 0.25));
     return Math.round((1 - (1 - (p.fadeTo ?? 0.08)) * t) * 1000) / 1000;
 }

package/dist/turn.markup.js

@@ -88,7 +88,7 @@ export function worldMarkup(model, layout) {
 /** The buttons under the view. */
 export function controlsMarkup(model, view, playing = false) {
     const words = turnWords(model);
-    const here = presetOf(view, model.options.sport);
+    const here = presetOf(view, model.presets ?? model.options.sport);
     const presets = TURN_PRESET_NAMES.map((name, i) => `<button type="button" data-preset="${name}" aria-pressed="${here === name}" aria-keyshortcuts="${i + 1}">${esc(words[name])}</button>`).join("");
     const tools = [
         ["turn-left", "↺", words.turnLeft],
@@ -115,7 +115,7 @@ export function turnMarkupOf(model, settings = {}) {
     const sheet = model.options.style === "none" ? "" : `<style>${KYOGIJO_TURN_STYLE}</style>`;
     const theme = model.options.theme;
     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, sport) ?? "custom"}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""} lang="${model.language}">` +
+    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>` +
         `<p class="ky-turn-help" id="${esc(model.id)}-help">${esc(keys)}</p>` +

package/dist/turn.model.d.ts

@@ -1,5 +1,5 @@
 import { KYOGIJO_STRINGS } from "./strings.ts";
-import { type TurnPreset, type TurnView } from "./turn.camera.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 { VenueSettings } from "./venue.ts";
@@ -93,11 +93,25 @@ export interface TurnModel {
     view: TurnView;
     /** False when there is nothing to turn: a badge is a strip, not a surface. */
     turnable: boolean;
+    /** The four viewpoints, when the model has its own (a tournament layout's); the sport's when missing. */
+    presets?: PresetTable;
+    /** 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 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;
 /** The view a set of settings opens on. */
-export declare const openingView: (settings: Pick<TurnSettings, "preset" | "view">, sport?: string) => TurnView;
+export declare const openingView: (settings: Pick<TurnSettings, "preset" | "view">, sport?: string | PresetTable) => TurnView;
+/**
+ * The scene's extent in pixels from its middle: the area it is fitted to (in feet, in the drawing's frame) widened to take in every plane that is not the ground, and as high as the highest of them (or of `lift`, the height
+ * of the floor itself).
+ */
+export declare function sceneBox(planes: readonly Plane[], area: {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+}, lift: number, centre: readonly [number, number], scale: number): Box3;
 /** Work out a 3D view from the options of a drawing. */
 export declare function buildTurn(options: SurfaceOptions | ScoreOptions, settings?: TurnSettings): TurnModel;
 /** The words of the 3D view in the model's language. */

package/dist/turn.model.js

@@ -33,6 +33,38 @@ function crowdVars(floor) {
 }
 /** The view a set of settings opens on. */
 export const openingView = (settings, sport) => clampView({ ...(presetView(settings.preset, sport) ?? presetView(TURN_DEFAULT, sport)), ...settings.view });
+/**
+ * The scene's extent in pixels from its middle: the area it is fitted to (in feet, in the drawing's frame) widened to take in every plane that is not the ground, and as high as the highest of them (or of `lift`, the height
+ * of the floor itself).
+ */
+export function sceneBox(planes, area, lift, centre, scale) {
+    let [x0, y0, x1, y1] = [area.x0, area.y0, area.x1, area.y1];
+    let top = lift;
+    for (const p of planes) {
+        // A billboard turns about its middle: whichever way it faces, it lies within a circle as wide as it is.
+        const reach = p.billboard === true ? Math.hypot(...p.u) / 2 : 0;
+        for (const [a, b] of [[0, 0], [1, 0], [0, 1], [1, 1]]) {
+            const point = [p.o[0] + a * p.u[0] + b * p.v[0], p.o[1] + a * p.u[1] + b * p.v[1], p.o[2] + a * p.u[2] + b * p.v[2]];
+            if (reach > 0) {
+                const middle = [p.o[0] + (p.u[0] + p.v[0]) / 2, p.o[1] + (p.u[1] + p.v[1]) / 2];
+                x0 = Math.min(x0, middle[0] - reach);
+                x1 = Math.max(x1, middle[0] + reach);
+                y0 = Math.min(y0, middle[1] - reach);
+                y1 = Math.max(y1, middle[1] + reach);
+                top = Math.max(top, point[2]);
+                continue;
+            }
+            if (p.kind !== "ground") {
+                x0 = Math.min(x0, point[0]);
+                x1 = Math.max(x1, point[0]);
+                y0 = Math.min(y0, point[1]);
+                y1 = Math.max(y1, point[1]);
+            }
+            top = Math.max(top, point[2]);
+        }
+    }
+    return { x0: (x0 - centre[0]) * scale, x1: (x1 - centre[0]) * scale, y0: (y0 - centre[1]) * scale, y1: (y1 - centre[1]) * scale, z0: 0, z1: top * scale };
+}
 /** Work out a 3D view from the options of a drawing. */
 export function buildTurn(options, settings = {}) {
     const asked = floorOptions(options);
@@ -67,32 +99,7 @@ export function buildTurn(options, settings = {}) {
     // The scene's extent: the playing surface (the whole floor where it has no uprights), and whatever stands beyond it (a net behind a goal line). The ground
     // round the surface is not counted, so that the view is fitted to what is played on and the ground runs out of the picture.
     const area = uprights.whole === true || uprights.area === undefined ? { x0: vx, y0: vy, x1: vx + vw, y1: vy + vh } : uprights.area;
-    let [x0, y0, x1, y1] = [area.x0, area.y0, area.x1, area.y1];
-    let top = uprights.lift;
-    for (const p of planes) {
-        // A billboard turns about its middle: whichever way it faces, it lies within a circle as wide as it is.
-        const reach = p.billboard === true ? Math.hypot(...p.u) / 2 : 0;
-        for (const [a, b] of [[0, 0], [1, 0], [0, 1], [1, 1]]) {
-            const point = [p.o[0] + a * p.u[0] + b * p.v[0], p.o[1] + a * p.u[1] + b * p.v[1], p.o[2] + a * p.u[2] + b * p.v[2]];
-            if (reach > 0) {
-                const middle = [p.o[0] + (p.u[0] + p.v[0]) / 2, p.o[1] + (p.u[1] + p.v[1]) / 2];
-                x0 = Math.min(x0, middle[0] - reach);
-                x1 = Math.max(x1, middle[0] + reach);
-                y0 = Math.min(y0, middle[1] - reach);
-                y1 = Math.max(y1, middle[1] + reach);
-                top = Math.max(top, point[2]);
-                continue;
-            }
-            if (p.kind !== "ground") {
-                x0 = Math.min(x0, point[0]);
-                x1 = Math.max(x1, point[0]);
-                y0 = Math.min(y0, point[1]);
-                y1 = Math.max(y1, point[1]);
-            }
-            top = Math.max(top, point[2]);
-        }
-    }
-    const box = { x0: (x0 - centre[0]) * scale, x1: (x1 - centre[0]) * scale, y0: (y0 - centre[1]) * scale, y1: (y1 - centre[1]) * scale, z0: 0, z1: top * scale };
+    const box = sceneBox(planes, area, uprights.lift, centre, scale);
     const { title, description } = describe(o);
     const standing = describeUprights(o, uprights, language);
     return {

package/dist/turn.style.js

@@ -99,6 +99,10 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-seatback{fill:var(--ky-up-seatb)}
 .ky-turn .u-railline{stroke:var(--ky-up-railw);stroke-width:.3;stroke-linecap:square}
 .ky-turn .u-matedge{fill:var(--ky-up-matedge)}
+.ky-turn .u-surround{fill:var(--ky-mu-barrier,#161a1f);fill-opacity:.92}
+.ky-turn .u-surround-rim{fill:var(--ky-mu-chair,#ece7da);fill-opacity:.55}
+.ky-turn .u-chair{fill:var(--ky-mu-chair,#ece7da);stroke:var(--ky-mu-chair-edge,#4a4f56);stroke-width:.06}
+.ky-turn .u-chair-side{fill:color-mix(in srgb,var(--ky-mu-chair,#ece7da) 62%,#000);stroke:var(--ky-mu-chair-edge,#4a4f56);stroke-width:.04}
 .ky-turn-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
 .ky-turn-group{display:flex;flex-wrap:wrap;gap:6px}
 .ky-turn-controls button{font:inherit;font-size:.9rem;font-weight:600;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--ky-turn-rule);background:var(--ky-turn-chip);color:var(--ky-turn-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}

package/dist/venue.d.ts

@@ -1,3 +1,4 @@
+import { type Crowd, type CrowdStands } from "./crowd.ts";
 import { type Cut } from "./venue.geom.ts";
 import { type Upright } from "./turn.kit.ts";
 import type { SurfaceOptions } from "./types.ts";
@@ -29,3 +30,8 @@ export declare const ROOF: {
 };
 /** The stands of a surface as planes: `undefined`-free, an empty venue when the options have no crowd (or the crowd is a hall's gallery, which `venue.room.ts` raises). */
 export declare function standsVenue(o: SurfaceOptions, v: VenueBuild, lift: number): Venue;
+/**
+ * The stands the model says (`crowdStands`, or the stands of a tournament layout's hall) as planes: what `standsVenue` makes of a surface's, for stands that were worked out some other way. `o` is the little of the
+ * drawing's options it reads: the sport (whether a roof is a lid), the detail (`simple` is the plain crowd) and the ground (whose capacity sets the density).
+ */
+export declare function standsVenueOf(stands: CrowdStands, crowd: Crowd, o: Pick<SurfaceOptions, "sport" | "detail" | "ground">, v: VenueBuild, lift: number): Venue;

package/dist/venue.js

@@ -33,6 +33,13 @@ export function standsVenue(o, v, lift) {
     const crowd = resolveCrowd(o.crowd);
     if (stands === undefined || crowd === undefined || stands.gallery === true)
         return NO_VENUE;
+    return standsVenueOf(stands, crowd, { sport: o.sport, detail: o.detail, ground: o.ground }, v, lift);
+}
+/**
+ * The stands the model says (`crowdStands`, or the stands of a tournament layout's hall) as planes: what `standsVenue` makes of a surface's, for stands that were worked out some other way. `o` is the little of the
+ * drawing's options it reads: the sport (whether a roof is a lid), the detail (`simple` is the plain crowd) and the ground (whose capacity sets the density).
+ */
+export function standsVenueOf(stands, crowd, o, v, lift) {
     const cut = v.detail ?? "auto";
     const fine = crowd.detail !== "plain" && o.detail !== "simple";
     const density = densityOf(crowd, stands.seats, groundById(o.ground)?.capacity);

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.12.2";
+export declare const VERSION = "0.13.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.12.2";
+export const VERSION = "0.13.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.12.2",
+  "version": "0.13.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",