@johnmorrisdotca/kyogijo-stadiums 0.7.0 → 0.8.0

package/dist/strings.js

@@ -425,13 +425,14 @@ export const KYOGIJO_STRINGS = {
         },
         turn: {
             region: "3D view", group: "Viewpoint",
-            keys: "A 3D view you can turn. Drag, or use the arrow keys, to turn and tilt it; plus and minus zoom; 1 to 4 pick a viewpoint; 0 or Home puts it back. Pinch, or hold Ctrl and scroll, to zoom.",
+            keys: "A 3D view you can turn. Drag, or use the arrow keys, to turn and tilt it; plus and minus zoom; 1 to 4 pick a viewpoint; 0 or Home puts it back; Space starts and stops the auto-turn. Pinch, or hold Ctrl and scroll, to zoom.",
             overhead: "Overhead", broadcast: "Broadcast", end: "End-on", corner: "Low corner",
             reset: "Reset the view", turnLeft: "Turn left", turnRight: "Turn right", raise: "Tip the surface away", lower: "Tip the surface toward you", zoomIn: "Zoom in", zoomOut: "Zoom out",
+            play: "Auto-turn", playOn: "Start the auto-turn", playOff: "Pause the auto-turn", announcePlay: "Auto-turn on", announcePause: "Auto-turn paused",
             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" },
+            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" },
         },
         rules: {
             "defensive-zone": "Defensive zone",
@@ -960,13 +961,14 @@ export const KYOGIJO_STRINGS = {
         },
         turn: {
             region: "3D表示", group: "視点",
-            keys: "回して見られる3D表示です。ドラッグするか矢印キーで回転と傾きを変え、プラスとマイナスのキーで拡大と縮小、1から4のキーで視点を選び、0キーまたはHomeキーで元に戻します。ピンチ操作、またはCtrlキーを押しながらのスクロールでも拡大・縮小できます。",
+            keys: "回して見られる3D表示です。ドラッグするか矢印キーで回転と傾きを変え、プラスとマイナスのキーで拡大と縮小、1から4のキーで視点を選び、0キーまたはHomeキーで元に戻し、スペースキーで自動回転を始めたり止めたりします。ピンチ操作、またはCtrlキーを押しながらのスクロールでも拡大・縮小できます。",
             overhead: "真上", broadcast: "中継カメラ", end: "エンド側から", corner: "低い角度から",
             reset: "元に戻す", turnLeft: "左へ回す", turnRight: "右へ回す", raise: "床面を奥へ傾ける", lower: "床面を手前へ傾ける", zoomIn: "拡大", zoomOut: "縮小",
+            play: "自動回転", playOn: "自動回転を始める", playOff: "自動回転を一時停止する", announcePlay: "自動回転を始めました", announcePause: "自動回転を一時停止しました",
             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: "的" },
+            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": "畳の厚み" },
         },
         rules: {
             "defensive-zone": "ディフェンディングゾーン",

package/dist/surfaces/budo.js

@@ -1,10 +1,13 @@
 // A budō surface lying wide, from its plan (budo/plan.ts): the floor and the free zone, the mats in their tones with their heri and their seams, the walls, the clay and the straw of a dohyō, the tape,
 // the targets. The plan is in metres; the drawing is in feet, as every surface lies, so the whole is drawn inside a group that scales metres to feet and moves the surface's box to the origin.
-import { el } from "../format.js";
+import { el, num } from "../format.js";
+import { floorTiles } from "../hardwood.js";
 import { areaD, marks, strokes } from "./field.js";
 import { atEnds, edges, ft, quarterTurn } from "./surface.js";
 /** Feet in a metre. */
 export const K = 1 / 0.3048;
+/** The hardwood of a dojo's surround, laid as the basketball floor is (`hardwood.ts`): strip boards of 0.3 ft, each with a tone of its own and a little grain, seams that are only just there. */
+const SURROUND_WOOD = { seed: 11, fine: true, board: 0.3, stain: 0, sheen: 0, hoops: false, bench: false };
 const feetBox = (b, ox, oy) => edges((b.x0 - ox) * K, (b.y0 - oy) * K, (b.x1 - ox) * K, (b.y1 - oy) * K);
 /** A plan's named range in feet, as a surface lists them. */
 function rangeOf(r, ox, oy) {
@@ -28,7 +31,7 @@ export function budoSurface(o, plan, margin) {
     const weave = full && plan.texture && pieces.length > 0;
     const stripe = (at, colour, opacity, width) => el("stop", { offset: at, "stop-color": colour, "stop-opacity": 0 }) + el("stop", { offset: at, "stop-color": colour, "stop-opacity": opacity }) + el("stop", { offset: at + width, "stop-color": colour, "stop-opacity": opacity }) + el("stop", { offset: at + width, "stop-color": colour, "stop-opacity": 0 });
     const woven = () => {
-        defs += el("linearGradient", { id: `${o.id}-weave`, x1: 0, y1: 0, x2: 0, y2: 0.1, gradientUnits: "userSpaceOnUse", spreadMethod: "repeat" }, stripe(0.1, "#000000", 0.16, 0.22) + stripe(0.52, "#ffffff", 0.14, 0.16));
+        defs += el("linearGradient", { id: `${o.id}-weave`, x1: 0, y1: 0, x2: 0, y2: 0.1, gradientUnits: "userSpaceOnUse", spreadMethod: "repeat" }, stripe(0.1, "#000000", 0.03, 0.22) + stripe(0.52, "#000000", 0.015, 0.16));
         const rect = (p) => `M${p.x0} ${p.y0}H${p.x1}V${p.y1}H${p.x0}Z`;
         // A mat that lies across is drawn in a group turned a quarter, with its corners turned back, so that its ridges run along it.
         const turned = (p) => `M${p.y0} ${-p.x0}H${p.y1}V${-p.x1}H${p.y0}Z`;
@@ -43,6 +46,19 @@ export function budoSurface(o, plan, margin) {
         out += el("path", { class: "ky-bud-edge", d: pieces.map(rect).join(""), fill: "none" });
         return out;
     };
+    // The surround is polished hardwood: the boards (under) and their seams (over) as two tiles of the basketball floor's code, in feet and turned to metres, and a warm satin sheen in a few
+    // broad diagonal glints over them. Drawn only at full detail.
+    let polished = false;
+    const polish = (d) => {
+        const tiles = floorTiles(SURROUND_WOOD);
+        const tile = (suffix, body) => el("pattern", { id: `${o.id}-wood-${suffix}`, width: 96, height: num(tiles.height), patternUnits: "userSpaceOnUse", patternTransform: `scale(${(1 / K).toFixed(6)})` }, body);
+        const b = plan.box;
+        const glint = (at, w, a) => el("stop", { offset: at - w, "stop-color": "#fff1cf", "stop-opacity": 0 }) + el("stop", { offset: at, "stop-color": "#fff1cf", "stop-opacity": a }) + el("stop", { offset: at + w, "stop-color": "#fff1cf", "stop-opacity": 0 });
+        defs += tile("a", tiles.under) + tile("b", tiles.over) + el("linearGradient", { id: `${o.id}-wood-s`, gradientUnits: "userSpaceOnUse", x1: b.x0, y1: b.y0, x2: b.x1, y2: b.y1 }, glint(0.22, 0.06, 0.1) + glint(0.5, 0.08, 0.13) + glint(0.78, 0.05, 0.08));
+        const layer = (suffix, opacity) => el("path", { class: "ky-bud-wood", d, "fill-rule": "evenodd", fill: `url(#${o.id}-wood-${suffix})`, opacity });
+        // The boards are meant to be seen only when looked for: the tones and the seams are laid at half strength.
+        return layer("a", 0.5) + layer("b", 0.45) + layer("s");
+    };
     let pending = false;
     let wove = false;
     for (const a of plan.areas) {
@@ -54,6 +70,10 @@ export function budoSurface(o, plan, margin) {
         if (tone)
             pending = true;
         ground += el("path", { class: ft(o, a.feature, a.cls), d: areaD(a), "fill-rule": a.evenodd === true ? "evenodd" : undefined });
+        if (full && a.id === "surround" && !polished) {
+            polished = true;
+            ground += polish(areaD(a));
+        }
     }
     if (weave && !wove)
         ground += woven();

package/dist/turn-entry.d.ts

@@ -9,4 +9,6 @@ export { CURLING_PRESETS, LONG_PRESETS, NET_PRESETS, PITCH_MAX, STEP, TURN_DEFAU
 export type { Box3, Mat4, Placement, TurnPreset, TurnToward, TurnView } from "./turn.camera.ts";
 export { describeUprights, heightUnit, planesOf, uprightsFor } from "./uprights.ts";
 export type { UprightOptions, Uprights } from "./uprights.ts";
+export { ROOF } from "./venue.ts";
+export type { Venue, VenueBuild, VenueSettings } from "./venue.ts";
 export type { Plane, PartKind, Upright, UprightKind, V3 } from "./turn.kit.ts";

package/dist/turn-entry.js

@@ -5,3 +5,4 @@ export { layoutOf, planeMarkup, planeMatrix, turnMarkup, turnMarkupOf } from "./
 export { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 export { CURLING_PRESETS, LONG_PRESETS, NET_PRESETS, PITCH_MAX, STEP, TURN_DEFAULT, TURN_PRESETS, TURN_PRESET_NAMES, ZOOM_MAX, ZOOM_MIN, cameraMatrix, clampView, depthOf, drag, eyeDistance, fit, matrix3d, multiply, nudge, presetOf, presetView, presetsFor, project, step } from "./turn.camera.js";
 export { describeUprights, heightUnit, planesOf, uprightsFor } from "./uprights.js";
+export { ROOF } from "./venue.js";

package/dist/turn.dom.d.ts

@@ -15,6 +15,14 @@ export interface KyogijoTurn {
     reset(): void;
     /** Draw again with new options (a score that moved, a look that changed), keeping the view. */
     update(options: SurfaceOptions | ScoreOptions): 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. */
+    play(): boolean;
+    /** Stop the auto-turn. */
+    pause(): void;
+    /** Start the auto-turn if it is stopped and stop it if it is running; it gives whether it is running now. */
+    togglePlay(): boolean;
     /** The flat drawing that is the floor, or `null` after `destroy`. */
     svg(): SVGSVGElement | null;
     /** Stop listening and empty the container. */

package/dist/turn.dom.js

@@ -15,7 +15,7 @@ export function turnSupported(win = typeof window === "undefined" ? undefined :
         return false;
     return css.supports("transform", "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)");
 }
-const KEYS = { ArrowLeft: true, ArrowRight: true, ArrowUp: true, ArrowDown: true, "+": true, "=": true, "-": true, _: true, "0": true, Home: true, "1": true, "2": true, "3": true, "4": true };
+const KEYS = { " ": true, ArrowLeft: true, ArrowRight: true, ArrowUp: true, ArrowDown: true, "+": true, "=": true, "-": true, _: true, "0": true, Home: true, "1": true, "2": true, "3": true, "4": true };
 /** The view part of the way from one to another, `t` from 0 to 1, the turn taken the short way round. */
 const between = (from, to, t) => ({ yaw: from.yaw + (nearest(from.yaw, to.yaw) - from.yaw) * t, pitch: from.pitch + (to.pitch - from.pitch) * t, zoom: from.zoom * Math.pow(to.zoom / from.zoom, t) });
 /**
@@ -48,6 +48,10 @@ export function mountKyogijoTurn(host, options, settings = {}) {
             set: () => undefined,
             preset: () => undefined,
             reset: () => undefined,
+            playing: false,
+            play: () => false,
+            pause: () => undefined,
+            togglePlay: () => false,
             update: (next) => {
                 model = buildTurn(next, settings);
                 flat(next);
@@ -70,6 +74,12 @@ export function mountKyogijoTurn(host, options, settings = {}) {
     let opening = model.view;
     let flight;
     let spoken;
+    // The auto-turn: whether it is on, the frame that will advance it, the time of the last one, and whether it has moved the view since the page was last told.
+    let playing = false;
+    let tickFrame;
+    let lastTick;
+    let advanced = false;
+    const speed = typeof settings.speed === "number" && Number.isFinite(settings.speed) ? settings.speed : 12;
     const calm = () => settings.motion === "none" || (settings.motion !== "smooth" && media?.matches === true);
     // The elements, floor first, and what was written to each, so that only a change is written.
     let elements = [];
@@ -84,6 +94,18 @@ export function mountKyogijoTurn(host, options, settings = {}) {
     };
     gather();
     const buttons = () => root.querySelectorAll("button[data-preset]");
+    /** The Play button says what it is and what it does: pressed while the view turns. */
+    const syncPlay = () => {
+        const button = root.querySelector("button[data-act=play]");
+        if (button === null)
+            return;
+        const words = turnWords(model);
+        button.setAttribute("aria-pressed", String(playing));
+        button.title = playing ? words.playOff : words.playOn;
+        const glyph = button.querySelector("[data-glyph]");
+        if (glyph !== null)
+            glyph.textContent = playing ? "❚❚" : "▶";
+    };
     /** Put a view on the screen. */
     const paint = (now) => {
         const width = stage.clientWidth || 960;
@@ -155,7 +177,10 @@ export function mountKyogijoTurn(host, options, settings = {}) {
     const angles = () => turnWords(model).announceAngle.replace("{yaw}", String(Math.round(((view.yaw % 360) + 360) % 360))).replace("{pitch}", String(Math.round(90 - view.pitch)));
     const changed = () => settings.onChange?.(view, presetOf(view, sport()));
     /** Move to a view the controls asked for: glide, say where it is, tell the page. */
-    const go = (next, ms, speak = "angle") => {
+    const go = (next, ms, speak = "angle", keepPlaying = false) => {
+        // Anything the reader (or the page) asks of the view takes it over from the auto-turn, but a zoom, which does not turn it.
+        if (!keepPlaying)
+            setPlaying(false, true);
         // A turn takes the short way round, even from 170 degrees to -170.
         show(clampView({ ...next, yaw: nearest(view.yaw, next.yaw) }), ms);
         if (speak === "preset") {
@@ -172,6 +197,82 @@ export function mountKyogijoTurn(host, options, settings = {}) {
         go(opening, 560, "none");
         say(turnWords(model).reset);
     };
+    // ---- The auto-turn: a trophy case's slow turn. It runs only when asked, holds while the pointer holds the view, and does nothing while the page is hidden. ----
+    const hidden = () => doc.hidden === true;
+    const stopTick = () => {
+        if (tickFrame !== undefined)
+            win?.cancelAnimationFrame(tickFrame);
+        tickFrame = undefined;
+        lastTick = undefined;
+    };
+    const tick = (stamp) => {
+        tickFrame = undefined;
+        if (!playing || !alive)
+            return;
+        // Hidden, off the screen or held: the loop ends here, and the visibility change, the scroll back or the pointer's release starts it again.
+        if (hidden() || !onScreen || down.size > 0) {
+            lastTick = undefined;
+            return;
+        }
+        // About thirty frames a second are plenty for a slow turn, and every plane is written at each.
+        if (lastTick !== undefined && stamp - lastTick < 30) {
+            loop();
+            return;
+        }
+        const dt = lastTick === undefined ? 0 : Math.min(0.1, (stamp - lastTick) / 1000);
+        lastTick = stamp;
+        if (dt > 0) {
+            stop();
+            view = clampView({ ...view, yaw: view.yaw - speed * dt });
+            shown = view;
+            advanced = true;
+            paint(shown);
+            label();
+        }
+        loop();
+    };
+    const loop = () => {
+        if (tickFrame === undefined && playing && alive && win !== null)
+            tickFrame = win.requestAnimationFrame(tick);
+    };
+    /** Start or stop the auto-turn. `quiet` leaves the live region alone (a key or a drag stopped it, and says its own thing). */
+    const setPlaying = (next, quiet = false) => {
+        if (playing === next)
+            return;
+        playing = next;
+        stopTick();
+        syncPlay();
+        if (next)
+            loop();
+        else if (advanced) {
+            // The page is told where the view ended up, once, not at every frame.
+            advanced = false;
+            changed();
+        }
+        if (!quiet)
+            say(next ? turnWords(model).announcePlay : turnWords(model).announcePause);
+        settings.onPlayChange?.(next);
+    };
+    // A view scrolled out of sight does not turn.
+    let onScreen = true;
+    let seen;
+    if (typeof IntersectionObserver === "function") {
+        seen = new IntersectionObserver((entries) => {
+            onScreen = entries[entries.length - 1]?.isIntersecting !== false;
+            if (onScreen && playing) {
+                lastTick = undefined;
+                loop();
+            }
+        });
+        seen.observe(stage);
+    }
+    const onVisible = () => {
+        if (playing && !hidden()) {
+            lastTick = undefined;
+            loop();
+        }
+    };
+    doc.addEventListener("visibilitychange", onVisible);
     // ---- Buttons. ----
     const onClick = (event) => {
         const target = event.target?.closest("button");
@@ -187,8 +288,9 @@ export function mountKyogijoTurn(host, options, settings = {}) {
             case "turn-right": return go(nudge(view, "right", big ? STEP.yawBig : STEP.yaw * 2), 180);
             case "raise": return go(nudge(view, "up", big ? STEP.pitchBig : STEP.pitch * 2), 180);
             case "lower": return go(nudge(view, "down", big ? STEP.pitchBig : STEP.pitch * 2), 180);
-            case "zoom-in": return go(step(view, { zoom: STEP.zoom }), 180, "none");
-            case "zoom-out": return go(step(view, { zoom: 1 / STEP.zoom }), 180, "none");
+            case "zoom-in": return go(step(view, { zoom: STEP.zoom }), 180, "none", true);
+            case "zoom-out": return go(step(view, { zoom: 1 / STEP.zoom }), 180, "none", true);
+            case "play": return void setPlaying(!playing);
             case "reset": return toOpening();
             default:
         }
@@ -209,9 +311,10 @@ export function mountKyogijoTurn(host, options, settings = {}) {
             case "ArrowUp": return go(nudge(view, "up", pitch), 120);
             case "ArrowDown": return go(nudge(view, "down", pitch), 120);
             case "+":
-            case "=": return go(step(view, { zoom: STEP.zoom }), 120, "none");
+            case "=": return go(step(view, { zoom: STEP.zoom }), 120, "none", true);
             case "-":
-            case "_": return go(step(view, { zoom: 1 / STEP.zoom }), 120, "none");
+            case "_": return go(step(view, { zoom: 1 / STEP.zoom }), 120, "none", true);
+            case " ": return void setPlaying(!playing);
             case "0":
             case "Home": return toOpening();
             default: toPreset(TURN_PRESET_NAMES[Number(event.key) - 1]);
@@ -240,6 +343,8 @@ export function mountKyogijoTurn(host, options, settings = {}) {
         }
         moved = false;
         grab();
+        // The auto-turn holds while the pointer does.
+        stopTick();
         if (down.size === 1)
             root.setAttribute("data-dragging", "");
         if (down.size === 2) {
@@ -273,6 +378,8 @@ export function mountKyogijoTurn(host, options, settings = {}) {
         if (down.size === 0) {
             root.removeAttribute("data-dragging");
             label();
+            if (playing)
+                loop();
             if (moved) {
                 say(angles(), 450);
                 changed();
@@ -309,6 +416,9 @@ export function mountKyogijoTurn(host, options, settings = {}) {
         observer = new ResizeObserver(() => alive && paint(shown));
         observer.observe(stage);
     }
+    // Nothing moves until the reader asks, unless the page did: `autoPlay` starts it, but not for a reader who prefers reduced motion (`"force"` does).
+    if (settings.autoPlay === "force" || (settings.autoPlay === true && !calm()))
+        setPlaying(true, true);
     return {
         mode: "3d",
         view: () => ({ ...view }),
@@ -324,7 +434,19 @@ export function mountKyogijoTurn(host, options, settings = {}) {
             view = clampView(view);
             opening = openingView(settings, sport());
             const layout = layoutOf(model, shown, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens);
-            root.querySelector(".ky-turn-world").innerHTML = worldMarkup(model, layout);
+            const world = root.querySelector(".ky-turn-world");
+            world.innerHTML = worldMarkup(model, layout);
+            // The look the floor is painted in (and the theme) are attributes of the world.
+            for (const name of ["data-sport", "data-look", "data-theme"])
+                world.removeAttribute(name);
+            world.className = model.look === undefined ? "ky-turn-world" : "ky-turn-world kyogijo";
+            if (model.look !== undefined) {
+                world.setAttribute("data-sport", model.look.sport);
+                world.setAttribute("data-look", model.look.look);
+                const forced = model.options.theme;
+                if (forced === "light" || forced === "dark")
+                    world.setAttribute("data-theme", forced);
+            }
             gather();
             stage.setAttribute("aria-label", model.title);
             root.querySelector(".ky-turn-help").textContent = `${turnWords(model).keys}${model.standing === "" ? "" : ` ${model.standing}`}`;
@@ -335,16 +457,33 @@ export function mountKyogijoTurn(host, options, settings = {}) {
                 root.removeAttribute("data-theme");
             const controls = root.querySelector(".ky-turn-controls");
             if (controls !== null)
-                controls.outerHTML = controlsMarkup(model, view);
+                controls.outerHTML = controlsMarkup(model, view, playing);
             paint(shown);
             label();
         },
+        get playing() {
+            return playing;
+        },
+        play() {
+            setPlaying(true);
+            return playing;
+        },
+        pause() {
+            setPlaying(false);
+        },
+        togglePlay() {
+            setPlaying(!playing);
+            return playing;
+        },
         svg: () => (alive ? root.querySelector(".ky-turn-floor svg.kyogijo") : null),
         destroy() {
             if (!alive)
                 return;
             alive = false;
             stop();
+            stopTick();
+            seen?.disconnect();
+            doc.removeEventListener("visibilitychange", onVisible);
             clearTimeout(spoken);
             observer?.disconnect();
             host.replaceChildren();

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";
+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";
 /** 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,9 +21,11 @@ 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];
+    /** 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;
 }
 /** 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";
+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";
 /** A thing that stands on the surface: where, how high, and the planes it is made of. */
 export interface Upright {
     id: string;
@@ -83,4 +85,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">, yaw: number, pitch: number): number;
+export declare function fadeOf(p: Pick<Plane, "shy" | "fadeTo">, yaw: number, pitch: number): number;

package/dist/turn.kit.js

@@ -106,5 +106,5 @@ export function fadeOf(p, yaw, pitch) {
     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));
-    return Math.round((1 - 0.92 * t) * 1000) / 1000;
+    return Math.round((1 - (1 - (p.fadeTo ?? 0.08)) * t) * 1000) / 1000;
 }

package/dist/turn.markup.d.ts

@@ -23,10 +23,17 @@ export declare function layoutOf(model: TurnModel, view: TurnView, width: number
 export declare function planeMarkup(p: Plane, scale: number, 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. */
+export declare function defsMarkup(model: TurnModel): string;
+/**
+ * The attributes of the element the planes stand in. A floor painted in a look (a dojo's mats) gets the drawing's own class, sport and look, so that the stylesheet's rules for the look set
+ * its custom properties here too, and the walls and the wood of the room are the colours of the floor. A theme the options force goes with them.
+ */
+export declare function worldAttributes(model: TurnModel): string;
 /** The floor and the planes of a model, laid out. */
 export declare function worldMarkup(model: TurnModel, layout: Layout): string;
 /** The buttons under the view. */
-export declare function controlsMarkup(model: TurnModel, view: TurnView): string;
+export declare function controlsMarkup(model: TurnModel, view: TurnView, playing?: boolean): string;
 /** The size, in pixels, the first view is worked out for. */
 export declare const sizeOf: (settings: TurnSettings) => {
     width: number;

package/dist/turn.markup.js

@@ -52,12 +52,24 @@ export function floorMarkup(model, transform, stack) {
     const vb = model.viewBox;
     return `<div class="ky-turn-floor" style="width:${px(vb.w * model.scale)}px;height:${px(vb.h * model.scale)}px;transform:${transform};z-index:${stack}">${model.floor}</div>`;
 }
+/** 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. */
+export function defsMarkup(model) {
+    return model.defs === "" ? "" : `<svg class="ky-turn-defs" xmlns="http://www.w3.org/2000/svg" width="0" height="0"${model.crowdStyle === "" ? "" : ` style="${esc(model.crowdStyle)}"`} aria-hidden="true" focusable="false"><defs>${model.defs}</defs></svg>`;
+}
+/**
+ * The attributes of the element the planes stand in. A floor painted in a look (a dojo's mats) gets the drawing's own class, sport and look, so that the stylesheet's rules for the look set
+ * its custom properties here too, and the walls and the wood of the room are the colours of the floor. A theme the options force goes with them.
+ */
+export function worldAttributes(model) {
+    const theme = model.options.theme;
+    return model.look === undefined ? 'class="ky-turn-world"' : `class="ky-turn-world kyogijo" data-sport="${esc(model.look.sport)}" data-look="${esc(model.look.look)}"${theme === "light" || theme === "dark" ? ` data-theme="${theme}"` : ""}`;
+}
 /** The floor and the planes of a model, laid out. */
 export function worldMarkup(model, layout) {
-    return 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) => 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) {
+export function controlsMarkup(model, view, playing = false) {
     const words = turnWords(model);
     const here = presetOf(view, 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("");
@@ -70,7 +82,9 @@ export function controlsMarkup(model, view) {
         ["zoom-out", "−", words.zoomOut],
     ];
     const buttons = tools.map(([act, glyph, label]) => `<button type="button" data-act="${act}" aria-label="${esc(label)}" title="${esc(label)}">${glyph}</button>`).join("");
-    return `<div class="ky-turn-controls"><div class="ky-turn-group" role="group" aria-label="${esc(words.group)}">${presets}</div><div class="ky-turn-group">${buttons}<button type="button" data-act="reset" aria-keyshortcuts="0 Home">${esc(words.reset)}</button></div></div>`;
+    // The auto-turn: a toggle named for what it is, pressed while the view turns; its glyph and tooltip say what pressing it does.
+    const play = `<button type="button" data-act="play" data-wide aria-pressed="${playing}" aria-keyshortcuts="Space" title="${esc(playing ? words.playOff : words.playOn)}"><span data-glyph aria-hidden="true">${playing ? "❚❚" : "▶"}</span>${esc(words.play)}</button>`;
+    return `<div class="ky-turn-controls"><div class="ky-turn-group" role="group" aria-label="${esc(words.group)}">${presets}</div><div class="ky-turn-group">${buttons}<button type="button" data-act="reset" aria-keyshortcuts="0 Home">${esc(words.reset)}</button>${play}</div></div>`;
 }
 /** The size, in pixels, the first view is worked out for. */
 export const sizeOf = (settings) => settings.size ?? { width: 960, height: 600 };
@@ -86,7 +100,7 @@ export function turnMarkupOf(model, settings = {}) {
     const sport = model.options.sport;
     return (`<div class="ky-turn" id="${esc(model.id)}" data-sport="${esc(String(sport))}" data-mode="3d" data-touch="${settings.touch === "turn" ? "turn" : "scroll"}" data-preset="${presetOf(view, 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"><div class="ky-turn-world">${worldMarkup(model, layout)}</div></div>` +
+        `<div class="ky-turn-view" tabindex="0" role="group" aria-roledescription="${esc(words.region)}" aria-label="${esc(model.title)}" aria-describedby="${esc(model.id)}-help" aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1 2 3 4 Home Space"><div ${worldAttributes(model)}>${worldMarkup(model, layout)}</div></div>` +
         `<p class="ky-turn-help" id="${esc(model.id)}-help">${esc(keys)}</p>` +
         (settings.controls === false ? "" : controlsMarkup(model, view)) +
         `<div class="ky-turn-live" role="status" aria-live="polite"></div>` +

package/dist/turn.model.d.ts

@@ -2,6 +2,7 @@ import { KYOGIJO_STRINGS } from "./strings.ts";
 import { type 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";
 import type { Box3 } from "./turn.camera.ts";
 import type { Language, ScoreOptions, SurfaceOptions } from "./types.ts";
 /** What can be asked of a 3D view. */
@@ -14,6 +15,12 @@ export interface TurnSettings {
     controls?: boolean;
     /** What stands on the surface: `false` for the floor alone, or which kinds, whether the boards and the glass are drawn, the height of a volleyball net. True when left out. */
     uprights?: boolean | UprightOptions;
+    /**
+     * The venue round the surface, raised in 3D from the data the package already has: the stands of a drawing's `crowd` (every tier a strip of raked planes with the crowd on it, the walks between the tiers, a
+     * ballpark's grandstands and the seats on top of its wall) and a dojo's room (its walls with their doors and windows, the dais, the banner, the balconies and the edge of the mats). `true` or `false`, or
+     * `{ roof, detail }`. On when the drawing has a crowd or is a dojo, and off with `uprights: false`. The stands and the walls give way to the eye as the boards do, so that the surface is never hidden.
+     */
+    venue?: boolean | VenueSettings;
     /** Where the score of a score drawing goes: `board` (the default) hangs it up as a scoreboard that faces the eye (over the middle of a court or a rink, behind an end of a field, behind centre field in a ballpark) and takes the panel off the floor; `floor` leaves the panel on the floor. */
     score?: "board" | "floor";
     /** What a finger does on the view: `scroll` (the default) lets a vertical swipe scroll the page and a sideways one turn the view; `turn` keeps every touch for the view, which then also tips it. */
@@ -31,6 +38,15 @@ export interface TurnSettings {
     };
     /** The prefix of the ids in the view, for a page with more than one. A hash of the options when missing. */
     id?: string;
+    /**
+     * The auto-turn, a trophy case's slow turn of the whole view: `true` starts it when the view is mounted (paused, if the reader prefers reduced motion), `"force"` starts it even then; left out, nothing moves until
+     * the reader presses Play (or Space). It stops while the pointer holds the view and while the page is hidden, and the keys, the viewpoints and the reset stop it.
+     */
+    autoPlay?: boolean | "force";
+    /** Degrees of yaw a second the auto-turn goes by: 12 by default, positive turning the near side to the right as a drag to the right does, negative the other way. */
+    speed?: number;
+    /** Called with `true` when the auto-turn starts and `false` when it stops, whatever stopped it. */
+    onPlayChange?: (playing: boolean) => void;
     /** Called after the view has changed by a key, a button or the pointer, with the view and the viewpoint it is (`undefined` when it has been turned by hand). */
     onChange?: (view: TurnView, preset: TurnPreset | undefined) => void;
 }
@@ -59,6 +75,16 @@ export interface TurnModel {
     /** Pixels in a foot. */
     scale: number;
     uprights: Uprights;
+    /** The patterns the venue's planes are drawn with, and the crowd's colours (custom properties) they read: both empty when the view has no venue. */
+    defs: string;
+    crowdStyle: string;
+    /** Whether the venue is raised. */
+    venue: boolean;
+    /** The sport and look the floor is painted in, when it has one (a budō surface's mats): the planes of its room are painted in the same look. */
+    look: {
+        sport: string;
+        look: string;
+    } | undefined;
     planes: Plane[];
     /** The whole scene in pixels, from its middle: the floor's rectangle, and the height of the highest thing. */
     box: Box3;