@johnmorrisdotca/kyogijo-stadiums 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -7,6 +7,12 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.6.1] - 2026-10-14
+
+### Fixed
+
+- **The 3D view zoomed in and out as it turned.** The camera fitted the scene to its box for each angle on its own, so every angle fitted but the scale changed with the yaw: a long floor was drawn up to 1.8 times as large (overhead; 1.5 times at a tip of 30 degrees and 1.15 to 1.65 times from 60 to 80) at the angle where it is seen end-on as side-on, and the field grew and shrank under a drag or the auto-turn. `fit` now fits the scene at every angle of the circle at the view's pitch (so it takes the pitch and not the yaw) and takes the one scale and centre that hold them all: turning never changes the zoom or sways the scene, and no angle is cut off. The floor is the size it had at its tightest angle (down to 0.55 of its old size where it had room). Tipping the view still rescales it, since the pitch changes the extent; zoom is laid on top of the fit as before. `src/turn.camera.test.ts` holds the scale constant over every yaw, pitch and container, for every sport's scene, and measures every degree of the turn against the box.
+
 ## [0.6.0] - 2026-10-14
 
 Six budō sports and a dojo builder (39 sports in all), the situation of a game, lineups, zones, a pointer and goal mouths, the arenas of the NHL, the NBA, the WNBA and the PWHL (330 places on the atlas), and Dougu Sports 0.2.0 for an icon on every sport. The 3D view's keys, buttons and drag now turn the surface the same way.

package/dist/turn.camera.d.ts

@@ -94,8 +94,10 @@ export declare function covered(b: Box3, view: TurnView, at: Placement, distance
     y1: number;
 };
 /**
- * The placement that fits the scene in a container of width `w` and height `h` pixels, centred, with `pad` of its width and height left round it. The
- * perspective bends the sum, so it is found by a few rounds of scaling and re-centring; six is plenty.
+ * The placement that fits the scene in a container of width `w` and height `h` pixels, centred, with `pad` of its width and height left round it. It fits the scene at every turn about the
+ * vertical at the view's pitch, not at the view's own turn (its `yaw` is not used): the scale and the place are one for the whole circle, so that turning never zooms in and out or sways, and
+ * nothing is cut off at any angle. (A turn used to fit each angle alone, so a long floor was drawn up to 1.8 times as large side-on as end-on.) Tipping the view still rescales it, since the
+ * 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;
 /** A 4 by 4 matrix, as CSS writes it in `matrix3d`: sixteen numbers, a column after a column. */

package/dist/turn.camera.js

@@ -121,24 +121,54 @@ export function covered(b, view, at, distance) {
     const shown = corners(b).map((c) => project(c, view, at, distance));
     return { x0: Math.min(...shown.map((p) => p[0])), x1: Math.max(...shown.map((p) => p[0])), y0: Math.min(...shown.map((p) => p[1])), y1: Math.max(...shown.map((p) => p[1])) };
 }
+/** The turns the fit looks at: the whole circle in steps of five degrees. The pad round the scene is many times the little the extent can grow between two of them (a tenth of a percent). */
+const FIT_YAWS = Array.from({ length: 72 }, (_, i) => i * 5);
+/** The rectangle on the screen that a box covers over every turn of the circle, at this pitch. */
+function coveredAround(b, pitch, at, distance) {
+    const all = corners(b);
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (const yaw of FIT_YAWS) {
+        for (const c of all) {
+            const [x, y] = project(c, { yaw, pitch, zoom: 1 }, at, distance);
+            if (x < x0)
+                x0 = x;
+            if (x > x1)
+                x1 = x;
+            if (y < y0)
+                y0 = y;
+            if (y > y1)
+                y1 = y;
+        }
+    }
+    return { x0, y0, x1, y1 };
+}
+let lastFit;
 /**
- * The placement that fits the scene in a container of width `w` and height `h` pixels, centred, with `pad` of its width and height left round it. The
- * perspective bends the sum, so it is found by a few rounds of scaling and re-centring; six is plenty.
+ * The placement that fits the scene in a container of width `w` and height `h` pixels, centred, with `pad` of its width and height left round it. It fits the scene at every turn about the
+ * vertical at the view's pitch, not at the view's own turn (its `yaw` is not used): the scale and the place are one for the whole circle, so that turning never zooms in and out or sways, and
+ * nothing is cut off at any angle. (A turn used to fit each angle alone, so a long floor was drawn up to 1.8 times as large side-on as end-on.) Tipping the view still rescales it, since the
+ * 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 function fit(b, view, w, h, distance, pad = 0.03) {
+    const key = `${b.x0},${b.y0},${b.x1},${b.y1},${b.z0},${b.z1}|${view.pitch}|${w}|${h}|${distance}|${pad}`;
+    if (lastFit?.key === key)
+        return { ...lastFit.at };
     const at = { k: 0.5, tx: 0, ty: 0 };
-    const flat = { ...view, zoom: 1 };
     for (let i = 0; i < 8; i += 1) {
-        const r = covered(b, flat, at, distance);
+        const r = coveredAround(b, view.pitch, at, distance);
         const cw = r.x1 - r.x0;
         const ch = r.y1 - r.y0;
         if (cw <= 0 || ch <= 0)
             break;
         at.k *= Math.min((w * (1 - 2 * pad)) / cw, (h * (1 - 2 * pad)) / ch);
-        const c = covered(b, flat, at, distance);
+        const c = coveredAround(b, view.pitch, at, distance);
         at.tx -= (c.x0 + c.x1) / 2;
         at.ty -= (c.y0 + c.y1) / 2;
     }
+    lastFit = { key, at: { ...at } };
     return at;
 }
 /** Two matrices as one: `b` first, then `a`. */

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.6.0";
+export declare const VERSION = "0.6.1";

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.6.0";
+export const VERSION = "0.6.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kyogijo-stadiums",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "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",