@johnmorrisdotca/kyogijo-stadiums 0.12.1 → 0.13.0

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;
@@ -114,5 +116,10 @@ export declare function cameraMatrix(view: TurnView, at: Placement, distance: nu
 export declare const matrix3d: (m: Mat4) => string;
 /** How far a point is from the eye's plane after the scene is turned and tipped, in pixels towards the eye: bigger is nearer. Planes are drawn far first. */
 export declare function depthOf(point: readonly [number, number, number], view: TurnView, at: Placement): number;
-/** How far the eye is from the screen, in pixels, for a container: a long lens, so that the floor keeps its shape and the heights lean a little. */
+/** The lens of the eye, as a multiple of the container's longer side. */
+export declare const LENS = 8;
+/**
+ * How far the eye is from the screen, in pixels, for a container: a long lens, so that the floor keeps its shape and the heights lean a little. The lens is long enough that the
+ * nearer end of a floor is hardly larger than the farther one: with a short lens (it was 1.7) the floor swelled by up to a quarter as its near end swung toward the eye in a turn.
+ */
 export declare const eyeDistance: (w: number, h: number, lens?: number) => number;

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;
@@ -199,7 +199,15 @@ export function cameraMatrix(view, at, distance) {
     m = multiply(m, rotateZ);
     return multiply(m, scale);
 }
-const num = (value) => String(Math.round(value * 10000) / 10000);
+/**
+ * A number of a matrix as CSS writes it: to ten decimals, with no exponent. The perspective terms of a camera matrix are tiny (a few ten-thousandths) and are multiplied by
+ * the pixels of a whole floor, so rounding them to four decimals, as every other term could be, bent the perspective by tens of percent and by jumps as the turn went on: the
+ * surface swelled and shrank in steps.
+ */
+const num = (value) => {
+    const text = value.toFixed(10).replace(/\.?0+$/, "");
+    return text === "-0" || text === "" ? "0" : text;
+};
 /** A matrix as the CSS `transform` that applies it. */
 export const matrix3d = (m) => `matrix3d(${m.map(num).join(",")})`;
 /** How far a point is from the eye's plane after the scene is turned and tipped, in pixels towards the eye: bigger is nearer. Planes are drawn far first. */
@@ -210,5 +218,10 @@ export function depthOf(point, view, at) {
     const y2 = x * Math.sin(yaw) + y * Math.cos(yaw);
     return y2 * Math.sin(view.pitch * RAD) + z * Math.cos(view.pitch * RAD);
 }
-/** How far the eye is from the screen, in pixels, for a container: a long lens, so that the floor keeps its shape and the heights lean a little. */
-export const eyeDistance = (w, h, lens = 1.7) => lens * Math.max(w, h);
+/** The lens of the eye, as a multiple of the container's longer side. */
+export const LENS = 8;
+/**
+ * How far the eye is from the screen, in pixels, for a container: a long lens, so that the floor keeps its shape and the heights lean a little. The lens is long enough that the
+ * nearer end of a floor is hardly larger than the farther one: with a short lens (it was 1.7) the floor swelled by up to a quarter as its near end swung toward the eye in a turn.
+ */
+export const eyeDistance = (w, h, lens = LENS) => lens * Math.max(w, h);

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`. */
@@ -21,11 +21,18 @@ export interface Plane {
      * wall. The nearer the eye is to that side, and the lower it is, the more the wall is cut away (see `fadeOf`), so that the court is never hidden behind its own glass.
      */
     shy?: readonly [number, number];
+    /**
+     * A plane that is the floor's own drawing seen through its rectangle, not a drawing of its own: the top of a raised platform (a dohyō's clay with its bales). The floor lies on the ground, so
+     * that the ground round the platform stays low, and this plane lifts the part of it that is the platform's top to the platform's height. Its `u` and `v` must be flat and along x and y.
+     */
+    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;
@@ -85,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.d.ts

@@ -21,6 +21,11 @@ export interface Layout {
 export declare function layoutOf(model: TurnModel, view: TurnView, width: number, height: number, lens?: number): Layout;
 /** One plane as an element: its box in pixels and the SVG drawn on it in feet. */
 export declare function planeMarkup(p: Plane, scale: number, transform: string, stack: number, fade?: number): string;
+/**
+ * A plane that is the floor's own drawing seen through its rectangle (`Plane.crop`): the floor's SVG again, its viewBox cut down to the plane's rectangle, in the plane's own box. It is a picture, not a second
+ * description: it carries no role, title or description of its own.
+ */
+export declare function cropMarkup(model: TurnModel, p: Plane, transform: string, stack: number, fade?: number): string;
 /** The floor as an element: the flat drawing, in the pixels of the scene. */
 export declare function floorMarkup(model: TurnModel, transform: string, stack: number): string;
 /** The patterns the venue's planes are drawn with, once, in a box of no size: every plane's SVG reads them by id, and the crowd's colours are on this element. */

package/dist/turn.markup.js

@@ -29,15 +29,16 @@ export function layoutOf(model, view, width, height, lens) {
     // A billboard faces the eye at this view.
     const planes = model.planes.map((p) => facing(p, view.yaw));
     const transforms = [floor, ...planes].map((p) => matrix3d(multiply(camera, planeMatrix(p, s, centre))));
-    // Far to near: a plane's depth is that of its middle. The ground of a hall is under everything, the floor next.
-    const order = planes
-        .map((p, i) => ({ i, ground: p.kind === "ground", depth: depthOf([(p.o[0] + (p.u[0] + p.v[0]) / 2 - centre[0]) * s, (p.o[1] + (p.u[1] + p.v[1]) / 2 - centre[1]) * s, (p.o[2] + (p.u[2] + p.v[2]) / 2) * s], view, at) }))
-        .filter((one) => !one.ground);
+    // Far to near: a plane's depth is that of its middle. The ground of a hall is under everything. The floor is next, unless it stands raised on something (a table tennis table's top, on its legs): then it is
+    // sorted with the rest, by its middle, so that the legs and the skirt on the far side are drawn under it and the ones on the near side over it, and nothing under the top shows through it.
+    const depth = (p) => depthOf([(p.o[0] + (p.u[0] + p.v[0]) / 2 - centre[0]) * s, (p.o[1] + (p.u[1] + p.v[1]) / 2 - centre[1]) * s, (p.o[2] + (p.u[2] + p.v[2]) / 2) * s], view, at);
+    const raised = model.uprights.lift > 0;
+    const order = [...planes.map((p, i) => ({ i: i + 1, ground: p.kind === "ground", depth: depth(p) })), ...(raised ? [{ i: 0, ground: false, depth: depth(floor) }] : [])].filter((one) => !one.ground);
     order.sort((a, b) => a.depth - b.depth);
     const stack = new Array(model.planes.length + 1).fill(0);
     stack[0] = 1;
     order.forEach((one, rank) => {
-        stack[one.i + 1] = rank + 2;
+        stack[one.i] = rank + 2;
     });
     const fade = [1, ...model.planes.map((p) => fadeOf(p, view.yaw, view.pitch))];
     return { at, transforms, stack, fade };
@@ -47,6 +48,22 @@ export function planeMarkup(p, scale, transform, stack, fade = 1) {
     const [w, h] = size(p);
     return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" style="width:${px(w * scale)}px;height:${px(h * scale)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(w)} ${n(h)}" width="${px(w * scale)}" height="${px(h * scale)}" aria-hidden="true" focusable="false">${p.svg}</svg></div>`;
 }
+/**
+ * A plane that is the floor's own drawing seen through its rectangle (`Plane.crop`): the floor's SVG again, its viewBox cut down to the plane's rectangle, in the plane's own box. It is a picture, not a second
+ * description: it carries no role, title or description of its own.
+ */
+export function cropMarkup(model, p, transform, stack, fade = 1) {
+    const [w, h] = size(p);
+    const box = `${px(p.o[0])} ${px(p.o[1])} ${px(w)} ${px(h)}`;
+    const picture = model.floor
+        .replace(/^<svg([^>]*?)\sviewBox="[^"]*"/, `<svg$1 viewBox="${box}"`)
+        .replace(/^<svg([^>]*?)\swidth="[^"]*"/, "<svg$1")
+        .replace(/^<svg([^>]*?)\sheight="[^"]*"/, "<svg$1")
+        .replace(/^<svg([^>]*?)\srole="img"/, '<svg$1 aria-hidden="true"')
+        .replace(/^<svg([^>]*?)\saria-labelledby="[^"]*"/, "<svg$1")
+        .replace(/<title\b[^>]*>[\s\S]*?<\/title>|<desc\b[^>]*>[\s\S]*?<\/desc>/g, "");
+    return `<div class="ky-up ky-up-${p.kind}" data-part="${esc(p.id)}" data-crop="floor" style="width:${px(w * model.scale)}px;height:${px(h * model.scale)}px;transform:${transform};z-index:${stack}${fade < 1 ? `;opacity:${n(fade)}` : ""}">${picture}</div>`;
+}
 /** The floor as an element: the flat drawing, in the pixels of the scene. */
 export function floorMarkup(model, transform, stack) {
     const vb = model.viewBox;
@@ -66,12 +83,12 @@ export function worldAttributes(model) {
 }
 /** The floor and the planes of a model, laid out. */
 export function worldMarkup(model, layout) {
-    return defsMarkup(model) + floorMarkup(model, layout.transforms[0], layout.stack[0]) + model.planes.map((p, i) => planeMarkup(p, model.scale, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1])).join("");
+    return defsMarkup(model) + floorMarkup(model, layout.transforms[0], layout.stack[0]) + model.planes.map((p, i) => (p.crop === true ? cropMarkup(model, p, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1]) : planeMarkup(p, model.scale, layout.transforms[i + 1], layout.stack[i + 1], layout.fade[i + 1]))).join("");
 }
 /** 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],
@@ -98,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>` +