@johnmorrisdotca/kyogijo-stadiums 0.45.1 → 0.45.2

package/CHANGELOG.md

@@ -7,6 +7,45 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.45.2] - 2026-10-30
+
+### Changed
+
+- **The 3D view of a district makes its layers as fine as the screen shows them, and no finer: a phone holds a sixteenth of the pixels.** The scene is made 1,400 pixels across and every plane was a layer as fine as that, whatever the screen: a phone shows the scene a sixth of that size, so its layers were five times finer than anything it could draw, and at a ratio of 3 the Kodokan's building alone was 713 megabytes of layers (each floor a layer of 1,114 by 1,186 pixels), which is what an iPhone's browser could not keep (SPX-699). The view now works out the share of its size a layer needs from the scale that fits the scene in its box (at any tip of the view), the zoom, and a margin of a quarter for the perspective, and rounds it up to 0.25, 0.4, 0.6 or 1 (`viewShare`, `viewScale`, `SHARE_LEVELS`; docs/quality.md, "The pixels of the layers"). It holds for every tier, `high` asked for by name too; the 3D view of a single surface is not changed. The Kodokan alone on a phone is made at 0.25 (a sixteenth of the pixels). The floor, which is one layer and holds the thinnest lines of the view, is made at 0.6 at least (`FLOOR_SHARE`), because a one-pixel line such as the north arrow shows steps in Chromium when its layer is made a quarter as fine.
+- **The share follows the view.** A zoom that needs a finer share draws the layers again 160 milliseconds after it stops (a pinch is not drawn again at every step, and from the whole view to the nearest it is at most three times); a zoom out or a smaller box makes them coarser only after a second and a half at rest; a new size of the container, a new set of venues and a step of the tier work it out again. The camera, the auto-turn and a drag in the middle of being made are not touched, and `data-share` on `.ky-turn` says the share. A wide screen needs the whole share, so there nothing changes: its screenshots are the same byte for byte.
+- **The flat layers were not moved onto a canvas, as SPX-772 first asked, because they are not where a step goes.** Streets, footprints, trees and land are a few paths in the floor, and the floor is one layer (17 elements for the Kodokan). Taking the floor out of the page altogether saves 4 to 6 percent of a turn step in Chromium with the CPU 4 times slower (Seattle 117 to 111 ms and 119 to 113 in two runs); taking every plane out saves three quarters of it (117 to 44). A step costs the planes that stand up (2,175 for Seattle), not what lies flat.
+- Costs 5 KB (1 KB gzipped) of script on a district page (2,411 to 2,416 KB); the bundle budget holds.
+
+### Added
+
+- Tests: `viewShare`, the floor's share and `rasterShares` with a ceiling (`src/quality.test.ts`); `e2e/quality.demo.mjs` checks on a phone that the Kodokan's layers are under 120 megabytes, that a zoom in makes them finer a moment after it stops and a zoom out makes them coarser again after a while at rest, and that the floor is where it was.
+
+### Measured
+
+Chromium and WebKit on a Mac Studio, a phone window of 390 by 844 at a ratio of 3, the CPU of Chromium slowed 4 times where said, 40 turn steps a row (`node scripts/perf-district.mjs --quality high,medium,low,auto`); the 0.45.1 site and this one were built beside each other and measured one after the other. The load average of the machine was 18 to 20 before each run (`uptime`) and 15 to 26 during them, so a frame that differs by under 15 percent in Chromium is not a difference. Layers are the boxes times the ratio squared, four bytes a pixel, as the script has always counted them.
+
+| Preset (high) | Planes | Layers MB at ratio 3: before | after | WebKit phone ms a frame: before | after | frames a second: before | after | Chromium phone, 4x CPU, ms: before | after |
+|---|---|---|---|---|---|---|---|---|---|
+| Rogers Arena alone | 547 | 100 | 25 | 17 | 17 | 59 | 59 | 30 | 32 |
+| BC Place and Rogers Arena | 1309 | 118 | 24 | 17 | 17 | 59 | 59 | 81 | 68 |
+| BC Place (soccer) and Rogers Arena | 1305 | 118 | 25 | 17 | 17 | 59 | 59 | 64 | 66 |
+| Seattle Center | 1088 | 98 | 21 | 105 | 21 | 10 | 48 | 41 | 45 |
+| SoDo | 1346 | 86 | 18 | 124 | 26 | 8 | 38 | 66 | 71 |
+| Seattle, three venues | 2175 | 50 | 15 | 60 | 31 | 17 | 32 | 119 | 141 |
+| Tokyo Dome City | 2049 | 76 | 19 | 121 | 41 | 8 | 24 | 109 | 109 |
+| Tokyo Dome City and the Kodokan | 2286 | 78 | 16 | 140 | 54 | 7 | 19 | 119 | 123 |
+| The Kodokan alone | 152 | 713 | 64 | 28 | 17 | 36 | 59 | 17 | 17 |
+
+| Kodokan alone, layers MB at ratio 3 | before | after |
+|---|---|---|
+| high | 713 | 64 |
+| medium | 67 | 25 |
+| low | 32 | 21 |
+| auto (first draw) | 317 | 64 |
+
+- **WebKit, the iPhone's engine, turns the heavy presets two to five times faster** (Seattle Center 105 to 21 ms a frame, SoDo 124 to 26, Tokyo Dome City 121 to 41, Tokyo Dome City and the Kodokan 140 to 54, the Kodokan alone 28 to 17): its frames follow the pixels of the layers. Chromium does not move beyond the noise (a desk window at 4 times slower CPU, built before and after run in turn twice, for BC Place (soccer) and Rogers Arena, Tokyo Dome City, and with the Kodokan: 65 and 60, 95 and 99, 111 and 111 ms, then 64 and 67, 97 and 91, 124 and 113; and a desk window is the same page to the byte). The lower tiers' layers fall too: the Kodokan at `medium` 67 to 25 megabytes, at `low` 32 to 21.
+- **The pictures.** Every preset at every tier, in light and dark, in Chromium (a desk window and a phone window) and in WebKit (a phone window): 162 pairs of screenshots. The desk window is the same to the byte. At a ratio of 3 WebKit differs by at most 0.23 percent of the pixels by more than 8 levels of 255 (0.05 percent by more than 32) and Chromium by at most 1.8 and 0.13 percent. Side by side the colours and the places are the same; what differs is thin lines and patterns that alias: a football field's yard lines are clean where they were dotted, rails and the Kodokan's mats are crisper, and in Chromium a one-pixel arrow is a little rougher.
+
 ## [0.45.1] - 2026-10-30
 
 ### Changed

package/dist/quality.d.ts

@@ -62,11 +62,29 @@ export declare function rasterOf(quality: Quality, tier: QualityTier, dpr: numbe
  * still (see `rasterOf`). `Infinity` at `high`, by name or in `auto`.
  */
 export declare function layerBudget(tier: QualityTier, isHandheld: boolean): number;
+/**
+ * The shares a layer is made at, from the smallest to a whole: the share a view needs (`viewShare`) is rounded up to one of these, so that a zoom draws the layers again at most three times from the whole view to the nearest and not at every step.
+ */
+export declare const SHARE_LEVELS: readonly number[];
+/** How much finer than the screen shows it a layer is made: the perspective makes what is near the eye larger than the scale of the fit says, by a tenth at most with the lens of a district. */
+export declare const VIEW_MARGIN = 1.25;
+/**
+ * The share of its size a layer needs to be as fine as the screen shows it, whatever the device's pixel ratio: a layer holds `share` device pixels for each pixel of the scene (times the ratio) and the screen shows `scale * zoom`
+ * of them (times the ratio too, and a little more near the eye), so a share of `scale * zoom * VIEW_MARGIN` is as sharp as the view and no layer needs more. `scale` is the scale that fits the scene in its container (`viewScale`), `zoom` the
+ * view's. Rounded up to one of `SHARE_LEVELS`, so a view that is drawn at 0.15 of the scene's size, as a district on a phone is, has layers a quarter as wide and as high, a sixteenth of the pixels. 1 when the view is at least as large as the scene.
+ */
+export declare function viewShare(scale: number, zoom: number): number;
+/**
+ * The least share the floor is made at, under what the view needs: the floor is one layer, and it holds the thinnest lines of the view (the north arrow, the scale, the grid, the streets and their edges), which a browser draws as a staircase
+ * when the layer is made much coarser than it shows (Chromium does; measured on the demo at a ratio of 3). One layer at 0.6 of its size is 24 megabytes on a phone at a ratio of 3, against 67 whole.
+ */
+export declare const FLOOR_SHARE = 0.6;
 /**
  * The share of its size each layer is made at, from the sizes the layers would have at full size (their boxes in CSS pixels), the share every layer is made at (`rasterOf`), the device's pixel ratio and the layer budget: a layer is
- * made at the smaller of the share and the one that holds `budget` device pixels, never under a fifth. The floor comes first, then the planes, as `layoutOf` takes them.
+ * made at the smaller of the share and the one that holds `budget` device pixels, and never at more than `ceiling` (what the view needs, `viewShare`), never under a fifth. The floor comes first, then the planes, as `layoutOf` takes them; its
+ * ceiling is at least `floorMin`.
  */
-export declare function rasterShares(sizes: readonly (readonly [number, number])[], share: number, dpr: number, budget: number): number[];
+export declare function rasterShares(sizes: readonly (readonly [number, number])[], share: number, dpr: number, budget: number, ceiling?: number, floorMin?: number): number[];
 /** How the governor judges the frames. Times are in milliseconds. */
 export interface GovernorTuning {
     /** The frames in a window it keeps (the oldest are dropped past twice this), and the fewest it judges: a window is also at least `settleMs` long, so a view at 60 frames a second judges 42 frames and one at 6 frames a second judges 8. */

package/dist/quality.js

@@ -51,16 +51,37 @@ export function layerBudget(tier, isHandheld) {
         return Infinity;
     return { medium: isHandheld ? 2e6 : 4e6, low: isHandheld ? 1e6 : 2e6 }[tier];
 }
+/**
+ * The shares a layer is made at, from the smallest to a whole: the share a view needs (`viewShare`) is rounded up to one of these, so that a zoom draws the layers again at most three times from the whole view to the nearest and not at every step.
+ */
+export const SHARE_LEVELS = [0.25, 0.4, 0.6, 1];
+/** How much finer than the screen shows it a layer is made: the perspective makes what is near the eye larger than the scale of the fit says, by a tenth at most with the lens of a district. */
+export const VIEW_MARGIN = 1.25;
+/**
+ * The share of its size a layer needs to be as fine as the screen shows it, whatever the device's pixel ratio: a layer holds `share` device pixels for each pixel of the scene (times the ratio) and the screen shows `scale * zoom`
+ * of them (times the ratio too, and a little more near the eye), so a share of `scale * zoom * VIEW_MARGIN` is as sharp as the view and no layer needs more. `scale` is the scale that fits the scene in its container (`viewScale`), `zoom` the
+ * view's. Rounded up to one of `SHARE_LEVELS`, so a view that is drawn at 0.15 of the scene's size, as a district on a phone is, has layers a quarter as wide and as high, a sixteenth of the pixels. 1 when the view is at least as large as the scene.
+ */
+export function viewShare(scale, zoom) {
+    const need = scale * zoom * VIEW_MARGIN;
+    return SHARE_LEVELS.find((level) => level >= need - 1e-9) ?? 1;
+}
+/**
+ * The least share the floor is made at, under what the view needs: the floor is one layer, and it holds the thinnest lines of the view (the north arrow, the scale, the grid, the streets and their edges), which a browser draws as a staircase
+ * when the layer is made much coarser than it shows (Chromium does; measured on the demo at a ratio of 3). One layer at 0.6 of its size is 24 megabytes on a phone at a ratio of 3, against 67 whole.
+ */
+export const FLOOR_SHARE = 0.6;
 /**
  * The share of its size each layer is made at, from the sizes the layers would have at full size (their boxes in CSS pixels), the share every layer is made at (`rasterOf`), the device's pixel ratio and the layer budget: a layer is
- * made at the smaller of the share and the one that holds `budget` device pixels, never under a fifth. The floor comes first, then the planes, as `layoutOf` takes them.
+ * made at the smaller of the share and the one that holds `budget` device pixels, and never at more than `ceiling` (what the view needs, `viewShare`), never under a fifth. The floor comes first, then the planes, as `layoutOf` takes them; its
+ * ceiling is at least `floorMin`.
  */
-export function rasterShares(sizes, share, dpr, budget) {
+export function rasterShares(sizes, share, dpr, budget, ceiling = 1, floorMin = 0) {
     const ratio = dpr > 0 ? dpr : 1;
-    return sizes.map(([w, h]) => {
+    return sizes.map(([w, h], i) => {
         const area = w * h * ratio * ratio;
         const own = area > budget ? Math.sqrt(budget / area) : 1;
-        return Math.max(0.2, Math.round(Math.min(share, own) * 1000) / 1000);
+        return Math.max(0.2, Math.round(Math.min(share, own, i === 0 ? Math.max(ceiling, floorMin) : ceiling) * 1000) / 1000);
     });
 }
 export const GOVERNOR_TUNING = { frames: 24, minFrames: 8, settleMs: 700, warmMs: 600, budgetMs: 21, steadyMs: 18.5, upAfterMs: 5000, maxUpAfterMs: 300000, quietMs: 600, pauseMs: 250 };

package/dist/turn.camera.d.ts

@@ -114,6 +114,11 @@ export declare function covered(b: Box3, view: TurnView, at: Placement, distance
  * extent of the scene on the screen changes with the pitch. The perspective bends the sum, so it is found by a few rounds of scaling and re-centring; six is plenty.
  */
 export declare function fit(b: Box3, view: TurnView, w: number, h: number, distance: number, pad?: number): Placement;
+/**
+ * The scale (screen pixels for a pixel of the scene, at a zoom of 1) a scene's box is fitted at in a container, the largest any tip of the view makes it: a view tipped towards the horizon is fitted larger, and the layers are made
+ * for the largest so that tipping the view does not make them again.
+ */
+export declare function viewScale(b: Box3, w: number, h: number, lens?: number): number;
 /** A 4 by 4 matrix, as CSS writes it in `matrix3d`: sixteen numbers, a column after a column. */
 export type Mat4 = readonly number[];
 /** Two matrices as one: `b` first, then `a`. */

package/dist/turn.camera.js

@@ -179,6 +179,14 @@ export function fit(b, view, w, h, distance, pad = 0.03) {
     lastFit = { key, at: { ...at } };
     return at;
 }
+/**
+ * The scale (screen pixels for a pixel of the scene, at a zoom of 1) a scene's box is fitted at in a container, the largest any tip of the view makes it: a view tipped towards the horizon is fitted larger, and the layers are made
+ * for the largest so that tipping the view does not make them again.
+ */
+export function viewScale(b, w, h, lens) {
+    const distance = eyeDistance(w, h, lens);
+    return Math.max(...[0, 30, 58, 70, PITCH_MAX].map((pitch) => fit(b, { yaw: 0, pitch, zoom: 1 }, w, h, distance).k));
+}
 /** Two matrices as one: `b` first, then `a`. */
 export function multiply(a, b) {
     const out = new Array(16);

package/dist/turn.dom.js

@@ -3,14 +3,14 @@
 // reduced motion gets jumps for glides, and where the browser cannot draw in 3D the flat drawing stays. Nothing is polled and nothing runs while the view is
 // still: the elements' `transform`s are written when the view changes, and a glide between viewpoints is a short run of animation frames.
 import { drawKyogijo } from "./draw.js";
-import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step, turnDirection, wheelTip } from "./turn.camera.js";
+import { STEP, TURN_PRESET_NAMES, clampView, drag, nearest, nudge, presetOf, presetView, step, turnDirection, viewScale, wheelTip } from "./turn.camera.js";
 import { buildTurn, floorOptions, openingView, turnWords } from "./turn.model.js";
 import { controlsMarkup, layoutOf, turnMarkupOf, worldMarkup } from "./turn.markup.js";
 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 { TIER_PROFILES, createGovernor, handheld, layerBudget, qualityOf, rasterOf, rasterShares, tierOf, viewShare, FLOOR_SHARE } 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) {
@@ -50,6 +50,12 @@ export function mountTurn(host, options, settings, build) {
     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 a layer needs to be as fine as this screen shows it (`viewShare`): a district on a phone is drawn at a sixth of the scene's own size, so its layers need a quarter as many pixels on a side. It is worked out from the container's
+     * size and the zoom, and held while they are as they are: `settleRaster` draws the layers again when they change enough to need another.
+     */
+    let ceiling = 1;
+    const ceilingFor = (of, width, height, zoom) => (of.tiered === true ? viewShare(viewScale(of.box, width, height, settings.lens ?? of.lens), zoom) : 1);
     /** 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.)
@@ -58,16 +64,21 @@ export function mountTurn(host, options, settings, build) {
         const dpr = win?.devicePixelRatio ?? 1;
         const share = rasterOf(quality, tier, dpr, isHandheld);
         const budget = layerBudget(tier, isHandheld);
-        if (share === 1 && budget === Infinity)
+        if (share === 1 && budget === Infinity && ceiling === 1)
             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);
+        return rasterShares(boxes, share, dpr, budget, ceiling, FLOOR_SHARE);
     };
     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";
+    // (The container is not written yet: its width is the host's and its height the one the stylesheet gives it, 16 by 10 or 5 by 4 on a phone; `settleRaster` corrects it once the view is in the page.)
+    {
+        const width = host.clientWidth > 0 ? host.clientWidth : (settings.size?.width ?? 960);
+        ceiling = ceilingFor(model, width, Math.max(260, width * (width <= 560 ? 0.8 : 0.625)), model.view.zoom);
+    }
     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]]);
@@ -155,6 +166,7 @@ export function mountTurn(host, options, settings, build) {
     crowd();
     root.dataset.quality = quality;
     root.dataset.tier = tier;
+    root.dataset.share = String(ceiling);
     // ---- 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;
@@ -230,6 +242,7 @@ export function mountTurn(host, options, settings, build) {
         const known = made.get(tier);
         model = known ?? build(current, { ...settings, quality: tier, id: settings.id ?? baseId, venue, preset: undefined, view });
         made.set(tier, model);
+        ceiling = ceilingFor(model, stage.clientWidth || 960, stage.clientHeight || 600, shown.zoom);
         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");
@@ -249,6 +262,7 @@ export function mountTurn(host, options, settings, build) {
         crowd();
         root.dataset.quality = quality;
         root.dataset.tier = tier;
+        root.dataset.share = String(ceiling);
     };
     /** The governor stepped: draw at the new tier. */
     const retier = (next) => {
@@ -273,6 +287,30 @@ export function mountTurn(host, options, settings, build) {
         if (glyph !== null)
             glyph.textContent = playing ? "❚❚" : "▶";
     };
+    // ---- The pixels of the layers follow the view: a zoom or a new size of the container may need a finer or allow a coarser share, and the layers are drawn again at it. ----
+    let seenZoom = shown.zoom;
+    let settling;
+    /** Draw the layers again if the view needs another share than they were made at. */
+    const settleRaster = () => {
+        settling = undefined;
+        if (!alive || model.tiered !== true)
+            return;
+        if (ceilingFor(model, stage.clientWidth || 960, stage.clientHeight || 600, shown.zoom) === ceiling)
+            return;
+        renderWorld();
+        paint(shown);
+    };
+    /**
+     * The view changed in a way that may change the share it needs. A finer share is drawn soon (a moment after the zoom has stopped, so that a pinch is not drawn again at every step), a coarser one only after a while at rest: until
+     * then the layers are finer than needed, which costs memory and nothing to the eye.
+     */
+    const wantRaster = () => {
+        if (!alive || model.tiered !== true || win === null)
+            return;
+        clearTimeout(settling);
+        const next = ceilingFor(model, stage.clientWidth || 960, stage.clientHeight || 600, shown.zoom);
+        settling = next === ceiling ? undefined : win.setTimeout(settleRaster, next > ceiling ? 160 : 1500);
+    };
     /** Put a view on the screen. */
     const paint = (now) => {
         const width = stage.clientWidth || 960;
@@ -298,6 +336,10 @@ export function mountTurn(host, options, settings, build) {
             if (faded[i] !== o)
                 one.style.opacity = faded[i] = o;
         });
+        if (now.zoom !== seenZoom) {
+            seenZoom = now.zoom;
+            wantRaster();
+        }
         touched();
     };
     const label = () => {
@@ -308,6 +350,8 @@ export function mountTurn(host, options, settings, build) {
     };
     paint(shown);
     label();
+    // The container is in the page now: the share its layers need, at its real size.
+    settleRaster();
     const stop = () => {
         if (flight !== undefined)
             win?.cancelAnimationFrame(flight.frame);
@@ -602,7 +646,12 @@ export function mountTurn(host, options, settings, build) {
     // ---- The size of the box. ----
     let observer;
     if (typeof ResizeObserver === "function") {
-        observer = new ResizeObserver(() => alive && paint(shown));
+        observer = new ResizeObserver(() => {
+            if (!alive)
+                return;
+            paint(shown);
+            wantRaster();
+        });
         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).
@@ -719,6 +768,7 @@ export function mountTurn(host, options, settings, build) {
             if (!alive)
                 return;
             alive = false;
+            clearTimeout(settling);
             outside?.destroy();
             stop();
             stopTick();

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export declare const VERSION = "0.45.1";
+export declare const VERSION = "0.45.2";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The package's version: the same as package.json's, and a test holds them to each other. */
-export const VERSION = "0.45.1";
+export const VERSION = "0.45.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.45.1",
+  "version": "0.45.2",
   "description": "Kyogijo Stadiums 競技場, 40 sports' surfaces as SVG, drawn to scale from the rulebooks: NFL, CFL and IFAF football fields, an NHL rink, an NBA court, MLB ballparks, soccer pitches, curling sheets, athletics stadiums, speed skating, short track and figure skating rinks, swimming pools, water polo fields, diving wells, artistic swimming areas, and the courts and fields of tennis, volleyball (indoor, beach and sitting), badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet, netball, lacrosse, rugby, Australian football, Gaelic games, cricket, field hockey and handball, and the budo of judo, karate, kendo, sumo and kyudo with a dojo of tatami laid as real units, the MMA cage, with each team's name and logo on its side and the score in the middle, stands and a crowd, a pageant of flags, and a 3D view. Light and dark, accessible, a compact badge for lists, a helper for React and a custom element. Zero dependencies.",
   "keywords": [
     "sports",