@johnmorrisdotca/kyogijo-stadiums 0.44.1 → 0.45.0

package/dist/turn-entry.d.ts

@@ -4,6 +4,8 @@ export { buildTurn, floorOptions, openingView } from "./turn.model.ts";
 export { turnDirection } from "./turn.camera.ts";
 export type { TurnDirection } from "./turn.camera.ts";
 export type { TurnModel, TurnSettings } from "./turn.model.ts";
+export { GOVERNOR_TUNING, QUALITIES, QUALITY_TIERS, TIER_PROFILES, createGovernor, handheld, isQuality, qualityOf, rasterOf, tierOf } from "./quality.ts";
+export type { Governor, GovernorTuning, Quality, QualityTier, TierProfile } from "./quality.ts";
 export { layoutOf, planeMarkup, planeMatrix, turnMarkup, turnMarkupOf } from "./turn.markup.ts";
 export type { Layout } from "./turn.markup.ts";
 export { KYOGIJO_TURN_STYLE } from "./turn.style.ts";

package/dist/turn-entry.js

@@ -2,6 +2,7 @@
 export { mountKyogijoTurn, mountTurn, turnSupported } from "./turn.dom.js";
 export { buildTurn, floorOptions, openingView } from "./turn.model.js";
 export { turnDirection } from "./turn.camera.js";
+export { GOVERNOR_TUNING, QUALITIES, QUALITY_TIERS, TIER_PROFILES, createGovernor, handheld, isQuality, qualityOf, rasterOf, tierOf } from "./quality.js";
 export { layoutOf, planeMarkup, planeMatrix, turnMarkup, turnMarkupOf } from "./turn.markup.js";
 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";

package/dist/turn.camera.js

@@ -181,11 +181,12 @@ export function fit(b, view, w, h, distance, pad = 0.03) {
 }
 /** Two matrices as one: `b` first, then `a`. */
 export function multiply(a, b) {
-    const out = new Array(16).fill(0);
-    for (let col = 0; col < 4; col += 1)
+    const out = new Array(16);
+    for (let col = 0; col < 16; col += 4) {
+        const [b0, b1, b2, b3] = [b[col], b[col + 1], b[col + 2], b[col + 3]];
         for (let row = 0; row < 4; row += 1)
-            for (let k = 0; k < 4; k += 1)
-                out[col * 4 + row] += a[k * 4 + row] * b[col * 4 + k];
+            out[col + row] = a[row] * b0 + a[4 + row] * b1 + a[8 + row] * b2 + a[12 + row] * b3;
+    }
     return out;
 }
 const translation = (x, y, z) => [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1];
@@ -213,11 +214,20 @@ export function cameraMatrix(view, at, distance) {
  * surface swelled and shrank in steps.
  */
 const num = (value) => {
-    const text = value.toFixed(10).replace(/\.?0+$/, "");
-    return text === "-0" || text === "" ? "0" : text;
+    if (value === 0)
+        return "0";
+    const text = value.toFixed(10);
+    // Without the zeros at the end, and the point if nothing is left after it: the same text as stripping them with a pattern, a good deal faster for the thousands of numbers a turn writes.
+    let end = text.length;
+    while (text.charCodeAt(end - 1) === 48)
+        end -= 1;
+    if (text.charCodeAt(end - 1) === 46)
+        end -= 1;
+    const out = end === text.length ? text : text.slice(0, end);
+    return out === "-0" ? "0" : out;
 };
 /** A matrix as the CSS `transform` that applies it. */
-export const matrix3d = (m) => `matrix3d(${m.map(num).join(",")})`;
+export const matrix3d = (m) => `matrix3d(${num(m[0])},${num(m[1])},${num(m[2])},${num(m[3])},${num(m[4])},${num(m[5])},${num(m[6])},${num(m[7])},${num(m[8])},${num(m[9])},${num(m[10])},${num(m[11])},${num(m[12])},${num(m[13])},${num(m[14])},${num(m[15])})`;
 /** 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 function depthOf(point, view, at) {
     const k = at.k * view.zoom;

package/dist/turn.dom.d.ts

@@ -2,6 +2,7 @@ import { type TurnDirection, type TurnPreset, type TurnView } from "./turn.camer
 import { type TurnModel, type TurnSettings } from "./turn.model.ts";
 import type { ScoreOptions, SurfaceOptions } from "./types.ts";
 import type { VenueSettings } from "./venue.ts";
+import { type Quality, type QualityTier } from "./quality.ts";
 import type { OutsideLevel } from "./outside.paint.ts";
 /** 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> {
@@ -43,6 +44,12 @@ export interface KyogijoTurn<O = SurfaceOptions | ScoreOptions> {
         mode: string;
         pixels: number;
     } | undefined;
+    /** What the view was asked to draw: `auto`, or the tier it is held at. */
+    readonly quality: Quality;
+    /** The tier the view is drawn at now: what `quality` says, and for `auto` the one the frames have led it to (`high` at first). */
+    readonly tier: QualityTier;
+    /** Change what the view is asked to draw: a tier is taken at once, `auto` goes on from the tier it is at. The camera and the auto-turn are not touched. */
+    setQuality(quality: Quality): void;
     /** 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

@@ -10,6 +10,8 @@ import { KYOGIJO_TURN_STYLE } from "./turn.style.js";
 import { esc } from "./format.js";
 import { turnBoardMarkup } from "./overlay.js";
 import { attachOutside3d } from "./outside.dom.js";
+import { TIER_PROFILES, createGovernor, handheld, layerBudget, qualityOf, rasterOf, rasterShares, tierOf } from "./quality.js";
+import { size } from "./turn.kit.js";
 /** True where the page can draw a plane in 3D by one `matrix3d`: that is, nearly everywhere with a stylesheet. */
 export function turnSupported(win = typeof window === "undefined" ? undefined : window) {
     const css = win?.CSS;
@@ -43,7 +45,33 @@ export function mountTurn(host, options, settings, build) {
     const win = doc.defaultView;
     /** The venue's settings as they are now: the mounted ones, altered by `update`. */
     let venue = settings.venue;
-    let model = build(options, settings);
+    // How much is drawn: what was asked, and the tier it is drawn at (`auto` starts on `high` and is moved by the frames the view makes while it turns).
+    let quality = qualityOf(settings.quality);
+    let tier = tierOf(quality);
+    // (Set again below, once the model is built, for a view that has no tiers.)
+    const isHandheld = handheld(win);
+    /** The share of its size each layer is made at for a model, now: one number when they all are, one each when the biggest are held to a budget of pixels. */
+    const rasterFor = (of) => {
+        // (Only a model that has tiers is made smaller: a surface on its own is small, and nothing of it would be left out.)
+        if (of.tiered !== true)
+            return 1;
+        const dpr = win?.devicePixelRatio ?? 1;
+        const share = rasterOf(quality, tier, dpr, isHandheld);
+        const budget = layerBudget(tier, isHandheld);
+        if (share === 1 && budget === Infinity)
+            return 1;
+        const boxes = [[of.viewBox.w * of.scale, of.viewBox.h * of.scale], ...of.planes.map((p) => { const [w, h] = size(p); return [w * of.scale, h * of.scale]; })];
+        return rasterShares(boxes, share, dpr, budget);
+    };
+    const sameRaster = (a, b) => (typeof a === "number" || typeof b === "number" ? a === b : a.length === b.length && a.every((x, i) => x === b[i]));
+    let current = options;
+    let model = build(options, { ...settings, quality: tier });
+    if (model.tiered !== true)
+        tier = "high";
+    let raster = rasterFor(model);
+    /** The models built at each tier for the options now, so that a step back to a tier is not built again. */
+    let made = new Map([[tier, model]]);
+    const baseId = model.id;
     /** 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;
@@ -66,6 +94,9 @@ export function mountTurn(host, options, settings, build) {
             direction: () => turnDirection(settings.direction),
             setDirection: () => undefined,
             togglePlay: () => false,
+            quality: qualityOf(settings.quality),
+            tier: tierOf(settings.quality),
+            setQuality: () => undefined,
             update: (next, change) => {
                 if (change?.venue !== undefined)
                     venue = { ...(typeof venue === "object" ? venue : {}), ...change.venue };
@@ -79,7 +110,7 @@ export function mountTurn(host, options, settings, build) {
             },
         };
     }
-    host.innerHTML = turnMarkupOf(model, settings);
+    host.innerHTML = turnMarkupOf(model, settings, raster);
     const root = host.querySelector(".ky-turn");
     const stage = root.querySelector(".ky-turn-view");
     const live = root.querySelector(".ky-turn-live");
@@ -103,11 +134,14 @@ export function mountTurn(host, options, settings, build) {
     let written = [];
     let stacked = [];
     let faded = [];
+    /** Which elements are left out of the view now (the faces of a solid that face away from the eye): they are not written to, and drawn at all, till the view turns them round. */
+    let gone = [];
     const gather = () => {
         elements = [...stage.querySelectorAll(".ky-turn-floor, .ky-up")];
         written = elements.map((one) => one.style.transform);
         stacked = elements.map((one) => one.style.zIndex);
         faded = elements.map((one) => one.style.opacity);
+        gone = elements.map(() => false);
     };
     gather();
     // The crowd outside, a canvas on the floor (the floor's matrix carries it), painted again only when its level, its detail or its colour changes.
@@ -116,8 +150,116 @@ export function mountTurn(host, options, settings, build) {
         outside?.destroy();
         const floor = stage.querySelector(".ky-turn-floor");
         outside = model.outside === undefined || floor === null ? undefined : attachOutside3d(floor, model.outside);
+        outside?.setDetail(TIER_PROFILES[tier].outside);
     };
     crowd();
+    root.dataset.quality = quality;
+    root.dataset.tier = tier;
+    // ---- Quality: in `auto`, the frames the view makes while it turns decide the tier. ----
+    let governor = quality === "auto" && win !== null && model.tiered === true ? createGovernor(tier, settings.qualityTuning) : undefined;
+    let meterFrame;
+    let lastStamp;
+    let lastPaint = 0;
+    /** The display's own interval, measured once with nothing else going on: an idle loop of frames a moment after the mount (the lower decile of their intervals, so that a busy moment does not count). */
+    let probe;
+    let displayMs;
+    const probeDisplay = () => {
+        if (win === null || probe !== undefined || displayMs !== undefined)
+            return;
+        const found = [];
+        let before;
+        const step = (stamp) => {
+            probe = undefined;
+            if (!alive || win === null)
+                return;
+            if (doc.hidden === true) {
+                // Hidden: start over when it can be seen.
+                found.length = 0;
+                before = undefined;
+                probe = win.setTimeout(() => (probe = win.requestAnimationFrame(step)), 400);
+                return;
+            }
+            if (before !== undefined)
+                found.push(stamp - before);
+            before = stamp;
+            if (found.length < 24)
+                probe = win.requestAnimationFrame(step);
+            else {
+                displayMs = [...found].sort((a, b) => a - b)[Math.floor(found.length * 0.1)];
+                governor?.display(displayMs);
+            }
+        };
+        probe = win.setTimeout(() => (probe = win.requestAnimationFrame(step)), 350);
+    };
+    const stopMeter = () => {
+        if (meterFrame !== undefined)
+            win?.cancelAnimationFrame(meterFrame);
+        meterFrame = undefined;
+        lastStamp = undefined;
+    };
+    if (governor !== undefined)
+        probeDisplay();
+    /** The loop that times the frames: it runs while the view is being painted and for a third of a second after, and does nothing while the view is still. */
+    const meterTick = (stamp) => {
+        meterFrame = undefined;
+        if (!alive || governor === undefined || win === null)
+            return;
+        if (doc.hidden === true || stamp - lastPaint > 300) {
+            lastStamp = undefined;
+            governor.pause();
+            return;
+        }
+        const next = lastStamp === undefined ? undefined : governor.frame(stamp - lastStamp, stamp);
+        lastStamp = next === undefined ? stamp : undefined;
+        // (A step draws the view again, which asks for the loop itself: only one is ever running.)
+        if (next !== undefined)
+            retier(next);
+        if (meterFrame === undefined)
+            meterFrame = win.requestAnimationFrame(meterTick);
+    };
+    /** The view was painted: the frames are timed from now until it is still. */
+    const touched = () => {
+        if (governor === undefined || win === null)
+            return;
+        lastPaint = win.performance.now();
+        if (meterFrame === undefined)
+            meterFrame = win.requestAnimationFrame(meterTick);
+    };
+    /** Draw the world again, from the model of the tier and the options now: the camera, the auto-turn and the pointer are not touched (the elements are the only thing replaced). */
+    const renderWorld = () => {
+        const known = made.get(tier);
+        model = known ?? build(current, { ...settings, quality: tier, id: settings.id ?? baseId, venue, preset: undefined, view });
+        made.set(tier, model);
+        raster = rasterFor(model);
+        const layout = layoutOf(model, shown, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens, false, raster);
+        const world = root.querySelector(".ky-turn-world");
+        world.innerHTML = worldMarkup(model, layout, raster);
+        // 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();
+        crowd();
+        root.dataset.quality = quality;
+        root.dataset.tier = tier;
+    };
+    /** The governor stepped: draw at the new tier. */
+    const retier = (next) => {
+        if (next === tier)
+            return;
+        tier = next;
+        renderWorld();
+        paint(shown);
+        label();
+        settings.onQualityChange?.(tier, quality);
+    };
     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 = () => {
@@ -135,9 +277,18 @@ export function mountTurn(host, options, settings, build) {
     const paint = (now) => {
         const width = stage.clientWidth || 960;
         const height = stage.clientHeight || 600;
-        const layout = layoutOf(model, now, width, height, settings.lens);
+        const layout = layoutOf(model, now, width, height, settings.lens, true, raster);
         outside?.zoom(now.zoom);
+        const culled = layout.culled;
         elements.forEach((one, i) => {
+            // A face turned away from the eye is hidden by the solid it belongs to: it is taken out of the page's drawing, not written to.
+            const away = culled?.[i] === true;
+            if (away !== gone[i]) {
+                one.style.display = away ? "none" : "";
+                gone[i] = away;
+            }
+            if (away)
+                return;
             if (written[i] !== layout.transforms[i])
                 one.style.transform = written[i] = layout.transforms[i];
             const z = String(layout.stack[i]);
@@ -147,6 +298,7 @@ export function mountTurn(host, options, settings, build) {
             if (faded[i] !== o)
                 one.style.opacity = faded[i] = o;
         });
+        touched();
     };
     const label = () => {
         const here = presetOf(view, sport());
@@ -469,25 +621,11 @@ export function mountTurn(host, options, settings, build) {
                 return;
             if (change?.venue !== undefined)
                 venue = { ...(typeof venue === "object" ? venue : {}), ...change.venue };
-            model = build(next, { ...settings, id: settings.id ?? model.id, venue, preset: undefined, view });
+            current = next;
+            made = new Map();
             view = clampView(view);
+            renderWorld();
             opening = openingView(settings, sport());
-            const layout = layoutOf(model, shown, stage.clientWidth || 960, stage.clientHeight || 600, settings.lens);
-            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();
-            crowd();
             // The board is a layer of its own over the view, after the scene: it is written again, and the view's turn is not touched.
             stage.querySelector(".ky-turn-board")?.remove();
             if (model.board !== undefined)
@@ -513,6 +651,45 @@ export function mountTurn(host, options, settings, build) {
         get playing() {
             return playing;
         },
+        get quality() {
+            return quality;
+        },
+        get tier() {
+            return tier;
+        },
+        setQuality(asked) {
+            if (!alive)
+                return;
+            quality = qualityOf(asked, quality);
+            const was = tier;
+            if (model.tiered !== true) {
+                // A view that has no tiers draws as it does whatever is asked: the question is kept, and answered `high`.
+                governor = undefined;
+                stopMeter();
+                tier = "high";
+            }
+            else if (quality === "auto") {
+                stopMeter();
+                governor = win === null ? undefined : createGovernor(tier, settings.qualityTuning);
+                if (displayMs !== undefined)
+                    governor?.display(displayMs);
+                else
+                    probeDisplay();
+            }
+            else {
+                governor = undefined;
+                stopMeter();
+                tier = quality;
+            }
+            root.dataset.quality = quality;
+            // The tier, or the share its layers are made at, has changed: the world is drawn again (the shares are worked out for the model of the tier, in `renderWorld`).
+            if (tier !== was || !sameRaster(rasterFor(model), raster)) {
+                renderWorld();
+                paint(shown);
+                label();
+            }
+            settings.onQualityChange?.(tier, quality);
+        },
         play() {
             setPlaying(true);
             return playing;
@@ -545,6 +722,7 @@ export function mountTurn(host, options, settings, build) {
             outside?.destroy();
             stop();
             stopTick();
+            stopMeter();
             seen?.disconnect();
             doc.removeEventListener("visibilitychange", onVisible);
             clearTimeout(spoken);

package/dist/turn.kit.d.ts

@@ -40,6 +40,11 @@ export interface Plane {
      * (a raised room is seen through every wall between it and the eye, at a low angle and from straight above alike).
      */
     fadeSide?: boolean;
+    /**
+     * A face of a closed solid that nothing shows through (a building's wall, drawn opaque): the side of it that is the solid's outside, as the way its `u` x `v` points, 1 out of the solid and -1 into it. While the face is turned away
+     * from the eye it is hidden by the solid's own near faces, so a page that asks for it (`layoutOf`'s `cull`) leaves it out of the view until the view turns it round, and spends nothing on it.
+     */
+    cull?: 1 | -1;
     /** A plate the other planes of its building stand on (a floor of a building picked out): it is placed by its farthest corner, so that it is drawn under everything on it, whatever way the view turns. */
     under?: boolean;
     /**

package/dist/turn.markup.d.ts

@@ -2,6 +2,8 @@ import { type Placement, type TurnDirection, type TurnView } from "./turn.camera
 import { type Plane } from "./turn.kit.ts";
 import { type TurnModel, type TurnSettings } from "./turn.model.ts";
 import type { ScoreOptions, SurfaceOptions } from "./types.ts";
+/** The share of its size each layer is made at: one number for all, or one for each (the floor first, then the planes in the model's order). */
+export type Raster = number | readonly number[];
 /**
  * The matrix that stands a plane in the scene, before the camera: its x along `u`, its y along `v`, its corner `o`, in pixels from the middle of the scene
  * (`centre`, in feet).
@@ -17,24 +19,30 @@ export declare function groupRanks(groups: readonly {
 /** Where everything is for a view in a container: the placement, the matrix of each element and its place in the stack. */
 export interface Layout {
     at: Placement;
-    /** The floor, then the planes in the model's order. */
+    /** The floor, then the planes in the model's order. A plane that `cull` says is turned away has `""` here. */
     transforms: string[];
     /** The stack of each: 0 for the ground of a hall, 1 for the floor, then the planes far to near from 2. */
     stack: number[];
     /** How much of each is left: 1 for all but the walls that are between the eye and the surface, which are cut away as the view is low and on their side (`fadeOf`). */
     fade: number[];
+    /** Which elements are not drawn at this view, by their place in `transforms`: the faces of a closed solid that are turned away from the eye (`Plane.cull`). Only when `layoutOf` was asked to leave them out. */
+    culled?: boolean[];
 }
-/** Work a view out in a container `width` by `height` pixels. */
-export declare function layoutOf(model: TurnModel, view: TurnView, width: number, height: number, lens?: number): Layout;
+/**
+ * Work a view out in a container `width` by `height` pixels. With `cull`, the faces of a closed solid that are turned away from the eye (`Plane.cull`) are left out: they have no transform and no place in the stack, and `culled` says
+ * which, so that a page need not write them at all; without it every plane is laid out, as a still picture needs. `raster` is the share of its size an element is made at (`rasterOf`): each element's matrix widens it back, so that the
+ * picture is the same and the layers hold `raster` squared as many pixels.
+ */
+export declare function layoutOf(model: TurnModel, view: TurnView, width: number, height: number, lens?: number, cull?: boolean, raster?: Raster): 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;
+export declare function planeMarkup(p: Plane, scale: number, transform: string, stack: number, fade?: number, raster?: 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;
+export declare function cropMarkup(model: TurnModel, p: Plane, transform: string, stack: number, fade?: number, raster?: 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;
+export declare function floorMarkup(model: TurnModel, transform: string, stack: number, raster?: 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;
 /**
@@ -43,7 +51,7 @@ export declare function defsMarkup(model: TurnModel): string;
  */
 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;
+export declare function worldMarkup(model: TurnModel, layout: Layout, raster?: Raster): string;
 /** The buttons under the view. */
 export declare function controlsMarkup(model: TurnModel, view: TurnView, playing?: boolean, direction?: TurnDirection): string;
 /** The size, in pixels, the first view is worked out for. */
@@ -52,7 +60,7 @@ export declare const sizeOf: (settings: TurnSettings) => {
     height: number;
 };
 /** The 3D view of a model as markup, laid out for `settings.size`; a page's script then makes it turn. */
-export declare function turnMarkupOf(model: TurnModel, settings?: TurnSettings): string;
+export declare function turnMarkupOf(model: TurnModel, settings?: TurnSettings, raster?: Raster): string;
 /**
  * A surface as a 3D view, as markup: the flat drawing for a floor, what stands on it as planes, and the controls under it. Pure, so it can be made on a
  * server; it is a still picture until `mountKyogijoTurn` (or the element) makes it turn in a page.