@johnmorrisdotca/kyogijo-stadiums 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -7,6 +7,35 @@ 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
+
+- **The demo leads to the tournament layouts.** A "Tournament layouts" link in the demo's header; under the surface of a sport that has layouts (table tennis, pickleball, curling, judo, karate, badminton, tennis) a "See it as a tournament floor" link to `halls.html` with that sport's first layout chosen (and the page's language and theme); and a link back to the demo from `halls.html`. `halls.html` also takes `theme=light|dark` in its address.
+
+### Fixed
+
+- **A dohyō in the 3D view is a solid block, not a hollow tray, and the floor round it is not cut off.** The whole floor was lifted to the mound's height and always drawn under the mound's four walls, so the walls on the far side showed over the clay and the clay looked sunk in a tray, with the grey hall floor raised level with it. Now the floor lies on the hall's floor, the mound is four sides (a tone darker than the top) and a flat top (the drawing's own clay and straw bales, cropped to the mound's square and lifted to its height), and the sides on the far side are drawn before the top and the ones on the near side after it at every turn. The view is fitted to the whole floor, so no part of it is cut off at any angle, and the stands of a crowd stand on the hall's floor.
+- **A table tennis table's far legs no longer show through its top, and its legs stand on something.** The raised floor (the table's top) was always drawn under every plane, so the legs and skirt on the far side were drawn over it. A raised floor now takes its turn among the planes by its middle, like any other, and a soft shadow under the table on the hall's floor seats the legs.
+- **The 3D view no longer swells and shrinks as it turns.** A surface going round, by hand or by the auto-turn, grew and shrank rhythmically, and in steps, instead of turning smoothly. There were two causes, both in the camera. The matrix written to each plane (`matrix3d`) rounded every number to four decimals, but its perspective terms are a few ten-thousandths and are multiplied by the pixels of a whole floor, so the rounding bent the perspective by tens of percent and by jumps as the angle changed (a floor's area on the screen jumped by up to a quarter between two views a few degrees apart); the numbers are now written to ten decimals. And the lens was short (1.7 times the box's longer side), so the nearer end of the floor swelled as it swung toward the eye (about a tenth of the area over a turn); the default is now 8 (`lens` still takes any value, and a smaller one brings the swelling back). The scale and the centre were already one for the whole turn (0.10.0); now the floor's area on the screen varies by about one percent over a turn, smoothly, for every sport and a tournament layout used as a floor, light and dark, desk and phone. New tests (`src/turn.size.test.ts`, and one in `e2e/turn.demo.mjs` in a real browser) sample the floor's area over a full turn, as the browser draws the written matrix, and fail on the old camera.
+
 ## [0.12.1] - 2026-10-19
 
 The npm page shows the tournament layouts. No change to the package's code.

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;