@johnmorrisdotca/kyogijo-stadiums 0.12.1 → 0.12.2

package/CHANGELOG.md

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

package/dist/turn.camera.d.ts

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

package/dist/turn.camera.js

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

package/dist/turn.kit.d.ts

@@ -21,6 +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];
+    /**
+     * A plane that is the floor's own drawing seen through its rectangle, not a drawing of its own: the top of a raised platform (a dohyō's clay with its bales). The floor lies on the ground, so
+     * that the ground round the platform stays low, and this plane lifts the part of it that is the platform's top to the platform's height. Its `u` and `v` must be flat and along x and y.
+     */
+    crop?: boolean;
     /** How much of a `shy` plane is left when it is cut away altogether: 0.08 when missing. A plane that others lie over on the screen (the steps of a gallery) takes less, so that they do not add up to a veil. */
     fadeTo?: number;
 }

package/dist/turn.markup.d.ts

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

package/dist/turn.markup.js

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

package/dist/turn.model.d.ts

@@ -29,7 +29,7 @@ export interface TurnSettings {
     motion?: "auto" | "smooth" | "none";
     /** The drawing the floor is, in place of `drawKyogijo`: a chart's `draw`, for instance. It is given the options with the view's own changes (the whole surface, lying wide). */
     floor?: (options: SurfaceOptions | ScoreOptions) => string;
-    /** How long a lens the eye has, as a multiple of the view's longer side: 1.7 by default, and the larger it is the flatter the picture. */
+    /** How long a lens the eye has, as a multiple of the view's longer side: 8 by default (`LENS`), and the larger it is the flatter the picture; a short lens makes the near end of a turning floor swell. */
     lens?: number;
     /** The size the first view is worked out for, in pixels, when the markup is made away from a page. 960 by 600 by default. */
     size?: {

package/dist/turn.model.js

@@ -66,7 +66,7 @@ export function buildTurn(options, settings = {}) {
     const centre = [vx + vw / 2, vy + vh / 2];
     // The scene's extent: the playing surface (the whole floor where it has no uprights), and whatever stands beyond it (a net behind a goal line). The ground
     // round the surface is not counted, so that the view is fitted to what is played on and the ground runs out of the picture.
-    const area = uprights.area ?? { x0: vx, y0: vy, x1: vx + vw, y1: vy + vh };
+    const area = uprights.whole === true || uprights.area === undefined ? { x0: vx, y0: vy, x1: vx + vw, y1: vy + vh } : uprights.area;
     let [x0, y0, x1, y1] = [area.x0, area.y0, area.x1, area.y1];
     let top = uprights.lift;
     for (const p of planes) {

package/dist/turn.style.js

@@ -15,6 +15,7 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn-floor,.ky-up{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
 .ky-turn-floor>svg{display:block;width:100%;height:auto}
 .ky-up>svg{display:block;overflow:visible}
+.ky-up[data-crop]>svg{width:100%;height:100%;overflow:hidden}
 @media (max-width:560px){.ky-turn-view{--ky-turn-ratio:5/4}.ky-turn-controls button{padding:0 10px;font-size:.85rem}}
 .ky-turn .u-sbframe{fill:var(--ky-up-sbframe);stroke:var(--ky-up-sbedge);stroke-width:.25}
 .ky-turn .u-sbline{stroke:var(--ky-up-sbline)}
@@ -29,8 +30,10 @@ export const KYOGIJO_TURN_STYLE = `
 .ky-turn .u-table{fill:var(--ky-up-table)}
 .ky-turn .u-foot{fill:var(--ky-up-foot)}
 .ky-turn .u-ground{fill:var(--ky-up-ground)}
+.ky-turn .u-shadow{fill:#000;fill-opacity:.16}
 .ky-turn .u-wall{fill:var(--ky-up-wall)}
 .ky-turn .u-clay{fill:var(--ky-up-clay)}
+.ky-turn .u-clay-side{fill:color-mix(in srgb,var(--ky-dirt,var(--ky-up-clay)) 74%,#000)}
 .ky-turn .u-cap{fill:var(--ky-up-cap)}
 .ky-turn .u-board{fill:var(--ky-up-board)}
 .ky-turn .u-glass{fill:var(--ky-up-glass)}

package/dist/uprights.budo.d.ts

@@ -10,6 +10,8 @@ export interface BudoUprights {
         x1: number;
         y1: number;
     };
+    /** The view is fitted to the whole floor (a platform stands in it), not to `area`. */
+    whole: boolean;
 }
 /** The walls of a dojo, 3 m high (ours). */
 export declare const DOJO_WALL = 3;

package/dist/uprights.budo.js

@@ -3,11 +3,15 @@
 // (a judo platform's height is not in the rules: "it depends on the sightlines"). The plans are in metres in the frame of their own origin, and the drawing's frame is feet from the corner of the plan's
 // box, so every point goes through `at`. The mound's height is the option's; the azuchi's (1.5 m or 1.8 m) and a dojo wall's (3 m) are ours: no rule gives them.
 import { budoPlan } from "./budo/plan.js";
-import { n, plane, shy, wall } from "./turn.kit.js";
+import { flat, n, plane, shy, wall } from "./turn.kit.js";
 const K = 1 / 0.3048;
 /** The walls of a dojo, 3 m high (ours). */
 export const DOJO_WALL = 3;
-/** The planes of the dohyō's clay mound: its four sides, from the floor of the hall up to the clay. */
+/**
+ * The planes of the dohyō's clay mound, a solid block: its four sides, from the floor of the hall up to the clay, and its flat top, which is the drawing's own clay with the ring of straw bales on it, lifted to the
+ * mound's height (the floor itself lies on the hall's floor, so that the ground round the mound stays low). The sides are one tone darker than the top, so that top and sides are lit the same way; whichever way
+ * the view is turned, the sides on the far side are drawn first and the top over them (see `layoutOf`), so the mound never looks hollow.
+ */
 function moundPlanes(plan, at, height) {
     const L = plan.sumo;
     if (L === undefined)
@@ -17,8 +21,10 @@ function moundPlanes(plan, at, height) {
     const planes = [];
     corners.forEach((a, i) => {
         const c = corners[(i + 1) % 4];
-        planes.push(wall(`mound-${i + 1}`, "wall", a[0], a[1], c[0], c[1], 0, height, `<rect width="${n(Math.hypot(c[0] - a[0], c[1] - a[1]))}" height="${n(height)}" class="u-clay"/>`));
+        planes.push(wall(`mound-${i + 1}`, "wall", a[0], a[1], c[0], c[1], 0, height, `<rect width="${n(Math.hypot(c[0] - a[0], c[1] - a[1]))}" height="${n(height)}" class="u-clay u-clay-side"/>`));
     });
+    const [a, c] = [corners[0], corners[2]];
+    planes.push({ ...flat("mound-top", "platform", a[0], a[1], c[0], c[1], height, ""), crop: true });
     return planes;
 }
 /** The azuchi's face, a slope from the foot of the mound up to its top, and the target of each shooter standing against it. */
@@ -54,10 +60,11 @@ export function budoUprights(o, thin) {
     const at = (x, y) => [(x - ox) * K, (y - oy) * K];
     const area = { x0: 0, y0: 0, x1: (plan.box.x1 - ox) * K, y1: (plan.box.y1 - oy) * K };
     const items = [];
-    let lift = 0;
+    // The floor lies on the hall's floor (`lift` is 0): the mound is a block standing on it, with its own top.
+    const lift = 0;
     if (plan.sumo !== undefined) {
-        lift = plan.sumo.height * K;
-        items.push({ id: "mound", kind: "mound", at: at(plan.sumo.centre[0], plan.sumo.centre[1]), height: lift, planes: moundPlanes(plan, at, lift) });
+        const height = plan.sumo.height * K;
+        items.push({ id: "mound", kind: "mound", at: at(plan.sumo.centre[0], plan.sumo.centre[1]), height, planes: moundPlanes(plan, at, height) });
     }
     if (plan.kyudo !== undefined) {
         const built = azuchiPlanes(plan, at);
@@ -83,5 +90,5 @@ export function budoUprights(o, thin) {
         items.push({ id: "walls", kind: "walls", at: centre, height: h, planes });
     }
     void thin;
-    return { items, lift, area };
+    return { items, lift, area, whole: plan.sumo !== undefined };
 }

package/dist/uprights.d.ts

@@ -29,6 +29,8 @@ export interface Uprights {
         x1: number;
         y1: number;
     };
+    /** True when the view is fitted to the whole floor drawing, not to `area` (which is then only where the score board goes): a raised platform stands in a floor that must not be cut at any angle. */
+    whole?: boolean;
     /** The patterns the venue's planes are drawn with (the contents of an SVG `defs`), when it has any. */
     defs?: string;
     /** How far the venue reaches beyond the surface, in feet, when it has one: the ground a floor needs for it to stand on. */

package/dist/uprights.js

@@ -41,6 +41,7 @@ export function uprightsFor(o, settings = {}) {
     let lift = 0;
     let thin = 0.2;
     let area;
+    let whole = false;
     if (sport === "nfl" || sport === "cfl" || sport === "ifaf") {
         const spec = league?.family === "football" ? fieldOf(league, o.year) : footballIn(sport, o.year);
         const shape = league?.family === "football" || sport === "ifaf" ? "slingshot" : rulesFor(sport, o.year).rules.postShape;
@@ -112,6 +113,7 @@ export function uprightsFor(o, settings = {}) {
         thin = thinnest(area.x1, area.y1);
         items = budoUprights({ ...o, sport }, thin).items;
         lift = built.lift;
+        whole = built.whole;
     }
     else if (isFieldSport(sport)) {
         const plan = fieldPlan({ ...o, sport });
@@ -145,7 +147,7 @@ export function uprightsFor(o, settings = {}) {
     }
     if (settings.only !== undefined)
         items = items.filter((item) => settings.only.includes(item.kind));
-    return { items, lift, thin, area, ...(defs === "" ? {} : { defs }), ...(reach === 0 ? {} : { reach }) };
+    return { items, lift, thin, area, ...(whole ? { whole } : {}), ...(defs === "" ? {} : { defs }), ...(reach === 0 ? {} : { reach }) };
 }
 /** A length in feet as a rulebook would print it in `unit`: metres to the centimetre, feet to a tenth. */
 function said(feet, unit, language) {

package/dist/uprights.net.js

@@ -100,7 +100,18 @@ export function netUprights(plan, geo, settings, thin) {
             items.push({ id: "table", kind: "table-legs", at: [L / 2, W / 2], height: lift, planes: tableBody(0, 0, L, W, lift, thin, false) });
             // The floor of the hall, under the table.
             const room = Math.max(L, W) * 5;
-            items.push({ id: "ground", kind: "table-legs", at: [L / 2, W / 2], height: 0, planes: [flat("ground", "ground", -room, -room, L + room, W + room, 0, `<rect width="${n(L + 2 * room)}" height="${n(W + 2 * room)}" class="u-ground"/>`)] });
+            // Under the table lies its shadow on that floor, so that the legs stand on something.
+            const grow = Math.max(convertLength(0.25, "m", "ft"), thin * 4);
+            items.push({
+                id: "ground",
+                kind: "table-legs",
+                at: [L / 2, W / 2],
+                height: 0,
+                planes: [
+                    flat("ground", "ground", -room, -room, L + room, W + room, 0, `<rect width="${n(L + 2 * room)}" height="${n(W + 2 * room)}" class="u-ground"/>`),
+                    flat("table-shadow", "ground", -grow / 2, -grow / 2, L + grow / 2, W + grow / 2, 0.005, `<rect width="${n(L + grow)}" height="${n(W + grow)}" rx="${n(grow)}" class="u-shadow"/>`),
+                ],
+            });
             return { items, lift };
         }
         default:

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.12.1";
+export declare const VERSION = "0.12.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.12.1";
+export const VERSION = "0.12.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "Kyogijo Stadiums 競技場, 39 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, 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",