@johnmorrisdotca/kyogijo-stadiums 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -7,6 +7,18 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.6.2] - 2026-10-14
+
+### Fixed
+
+- **A round mark turns with its team's name.** Where a zone's words are turned (along the ends of a wide pitch, and in a tall drawing, where the surface is turned a quarter and the words are turned back) the flag in its circle was turned back to stay upright, so on a wide pitch the flag stood upright beside a name written sideways, and in a tall drawing the flag lay a quarter turn over while the name read upright. The mark's group now lies in the banner's group and takes its turn: the same angle, the same way, as the name, so a flag and its name read as one unit (sideways along the ends of a wide pitch, the right way up in a tall drawing). The clip, the ring, the hairline and the initials of a team with no picture turn with the group, and the clip path's id (`<id>-mk-home-c`, `<id>-mk-away-c`) is unchanged. A flag in a zone that is not turned is as before, and so are the badge and the strip of a compact card, which are not turned. `RoundMark.upright` stays in `mark.ts`, but the score no longer passes it. A test reads the turn of the mark and of the name in every orientation, with logos and with initials, and holds the two equal.
+
+## [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.
@@ -152,7 +164,7 @@ Previously `@johnmorrisdotca/kyogijo`; renamed in 0.4.0 to `@johnmorrisdotca/kyo
 ### Added
 
 - **`roadToFinal`: the road to a tournament's final** (`@johnmorrisdotca/kyogijo-stadiums/charts`, [docs/charts.md](./docs/charts.md#the-road-to-the-final)). The two finalists as large round marks with their names; down the middle the rounds, the last at the top, on a dotted road; on each finalist's side its matches, each as the round mark of both teams with the score between them in large type and FT, AET or the shoot-out under it; and the group stage as a row of small marks, three-letter codes and scores at the foot. A finalist is a `Team` with a `path` of `{ round, opponent, score, decidedBy, pens, homeFirst, note }` and an optional `group`; a round is a key with words in English and Japanese (`round-of-32` to `semi-final`) or any key named in `labels`, so a play-off series (`4-2`) draws as well as a knockout. `final` writes the final's score between the large marks and quiets the loser; `winner` makes the side that won each match brighter; `codes`, `endnote`, `groupLabel`, `theme`, `language` and `style: "none"` as in the other drawings. Four sizes: `card` (1080 by 1350), `square` (1080 by 1080), `wide` (1200 by 675, the finalists at the two ends) and `phone` (390 wide, as tall as the rounds need), listed in `ROAD_SIZES`. It gives back a chart's shape without layers: `options`, `title`, `summary`, `totals` (each finalist's record, the rounds, the champion), `draw(extra)` and `table()`, a row for every match. The SVG is `role="img"` with a title and a description, reads in the scene and every renderer, goes in a `drawGrid`, and has ids of its own; a team with no flag or logo is drawn as its initials on its colour. New: `KYOGIJO_ROAD_STYLE`, the types `RoadChart`, `RoadFinalist`, `RoadMatch`, `RoadGroupMatch`, `RoadFinal`, `RoadOptions`, `RoadScore`, `RoadDecided`, `RoadSize`, `RoadSizeInfo`, `RoadRecord` and `RoadTotals`, and the `road` words of `KYOGIJO_STRINGS` (`en` and `ja`; a custom set of words must give them).
-- **A round team mark in a score** ([docs/score.md](./docs/score.md#round-marks)). `mark: "round"` on a team, or `markShape: "round"` on the score, draws its flag or logo clipped to a circle with a thin ring, on each side of the surface (the end zones of a pitch, the halves of a court), in the badge and in the strip of a compact card; where the words are turned (along the ends of a wide pitch, in a tall drawing) the mark is turned back and stays upright. A round mark with no logo is the team's initials on its colour; `markFit: "contain"` shows a crest whole on a plain disc. Off by default, and a drawing without it is the same text as before. New: `Team.mark`, `Team.markFit`, `ScoreOptions.markShape`, the type `TeamMark` and `KYOGIJO_MARK_STYLE` (`--ky-mark-ring`, `--ky-mark-edge`, `--ky-mark-plain`); a drawing writes the rules in only when it has a round mark.
+- **A round team mark in a score** ([docs/score.md](./docs/score.md#round-marks)). `mark: "round"` on a team, or `markShape: "round"` on the score, draws its flag or logo clipped to a circle with a thin ring, on each side of the surface (the end zones of a pitch, the halves of a court), in the badge and in the strip of a compact card; where the words are turned (along the ends of a wide pitch, in a tall drawing) the mark turns with them (0.6.1 and before turned it back to stay upright, which left a flag standing beside a name that lay sideways, and sideways in a tall drawing). A round mark with no logo is the team's initials on its colour; `markFit: "contain"` shows a crest whole on a plain disc. Off by default, and a drawing without it is the same text as before. New: `Team.mark`, `Team.markFit`, `ScoreOptions.markShape`, the type `TeamMark` and `KYOGIJO_MARK_STYLE` (`--ky-mark-ring`, `--ky-mark-edge`, `--ky-mark-plain`); a drawing writes the rules in only when it has a round mark.
 - The demo has a "Road to the final" section with made-up nations (sixteen that do not exist, each with a simple flag drawn in code in `demo/road-data.js`), a play-off series, and the round mark on a pitch, in English and Japanese; the docs gallery has the same drawings, each made from the code beside it.
 
 ### Changed

package/dist/mark.d.ts

@@ -26,7 +26,7 @@ export interface RoundMark {
     title?: string;
     /** The ring's width: nine hundredths of the radius by default. */
     ring?: number;
-    /** The mark is set in a group that is turned by this many degrees, so that it is turned back and stays upright. */
+    /** The mark's group is turned back by this many degrees: pass the turn of the group the mark is in to hold it upright there. The score does not use it: its mark turns with the zone's words. */
     upright?: number;
     /** A class added to the mark's group (the road chart's `ky-r-dim` for a team that did not advance). */
     className?: string;

package/dist/score.js

@@ -14,9 +14,10 @@ export function bannerMarkup(zone, team, o) {
         inner += el("rect", { class: `ky-panel ky-panel-${team.side}`, x: -w / 2, y: -h / 2, width: w, height: h, rx: Math.min(h * 0.16, 8) });
     const ink = `ky-${o.onColour || zone.panel ? "ink" : "paint"}-${team.side}`;
     const logo = team.logo;
-    // A round mark is a picture even where the team has no logo (its initials on its colour), and stays upright in a zone that is turned.
+    // A round mark is a picture even where the team has no logo (its initials on its colour). It sits in the banner's group, so where the zone is turned it turns with the
+    // team's name, by the same angle, and the flag and the words read as one.
     const mark = (size, x, y) => team.round === true
-        ? roundMarkup({ id: `${o.id ?? "ky"}-mk-${team.role}`, cx: x + size / 2, cy: y + size / 2, r: size / 2, href: logo, fit: team.fit, initials: team.abbr, color: team.color, ink: team.ink, upright: rot })
+        ? roundMarkup({ id: `${o.id ?? "ky"}-mk-${team.role}`, cx: x + size / 2, cy: y + size / 2, r: size / 2, href: logo, fit: team.fit, initials: team.abbr, color: team.color, ink: team.ink })
         : el("image", { class: "ky-logo", href: logo, x, y, width: size, height: size, preserveAspectRatio: "xMidYMid meet" });
     const pictured = logo !== undefined || team.round === true;
     const row = pictured && w / h >= 2.6;

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

package/package.json

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