@johnmorrisdotca/kyogijo-stadiums 0.35.0 → 0.36.0

package/CHANGELOG.md

@@ -7,6 +7,13 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.36.0] - 2026-10-20
+
+### Added
+
+- **A diamond mowing pattern** (`stripePattern: "diamonds"`, `菱形` in the demo): the crosshatch of a ballpark's outfield, as in a photograph of T-Mobile Park. On a ballpark it is squares of 30 feet with their sides along the foul lines, from home plate out, lighter and darker alternately (two passes of 45-degree stripes crossing); on a football field and a soccer pitch it is squares of a band turned 45 degrees, one of them centred on the turf so that both ends are mown alike, whatever the size. It is cut to the fair ground or to the turf by a clip path. The infield grass stays one tone, and a separate infield pattern is not offered: the pattern is the outfield's. [Theming](./docs/theming.md), the gallery's mowing sections.
+- **The demo's Mowing choice is for every grass sport**: a football field and a ballpark have it too (it was the soccer pitch's alone), with Diamonds among the choices; the soccer section of the home page shows the diamonds as one more card.
+
 ## [0.35.0] - 2026-10-20
 
 ### Added

package/dist/draw.js

@@ -222,7 +222,7 @@ const safeLength = (value) => {
         return Number.isFinite(value) && value > 0 ? num(value) : undefined;
     return typeof value === "string" && /^\d+(?:\.\d+)?(?:px|%|em|rem|vw|vh)?$/.test(value.trim()) ? value.trim() : undefined;
 };
-const PATTERNS = ["bands", "wide", "narrow", "lengthwise", "checks", "diagonal", "circles", "rings", "fan", "none"];
+const PATTERNS = ["bands", "wide", "narrow", "lengthwise", "checks", "diagonal", "diamonds", "circles", "rings", "fan", "none"];
 const GOALS = ["box", "line", "strip", "none"];
 /** The pitch the options ask for: a `pitch` of the caller's, else the size a `ground` publishes, else none (the international pitch). */
 export function pitchOf(o) {

package/dist/mow.d.ts

@@ -18,7 +18,8 @@ export declare const oddCells: (length: number, cell: number) => number;
 /**
  * The lighter tone of a pattern on a rectangle of turf. `band` is the width of the usual stripe, along x; `wide` and `narrow` are twice and half of it.
  * `bands` run across the turf (side by side along x), `lengthwise` along it, `checks` are squares of about `band`, `diagonal` are 45-degree stripes
- * `band` wide across, and `circles` are rings `band` wide about the middle. A pattern that is not one of these (`none`, `rings`, `fan`) has no tone here.
+ * `band` wide across, `diamonds` are the squares of `checks` turned 45 degrees (the crosshatch of a ballpark's outfield: two passes of 45-degree stripes, `band` wide
+ * across, crossing), laid so that a diamond is centred on the turf and both ends are mown alike, and `circles` are rings `band` wide about the middle. A pattern that is not one of these (`none`, `rings`, `fan`) has no tone here.
  */
 export declare function mowTurf(pattern: StripePattern, turf: Turf, band: number): Mown;
 /** A ballpark's fair ground, as the field of its stripes: how far it reaches either side of the line to centre field and how far out. */
@@ -30,7 +31,8 @@ export interface Park {
 /**
  * The lighter tone of a pattern on a ballpark: coordinates are the field's screen frame (x across, y minus the distance out from home plate). `band` is
  * 30 feet, the width of a stripe of the usual rings. `bands` run across the field at fixed distances out from home, `lengthwise` along the line to centre
- * field, `checks` are squares, `diagonal` run at 45 degrees, `fan` is wedges out from home plate, 6 degrees each. `rings` and `circles` are the park's own
+ * field, `checks` are squares, `diagonal` run at 45 degrees, `diamonds` are squares of `band` with their sides along the foul lines (two passes of stripes parallel to the
+ * lines, crossing, from home plate out), `fan` is wedges out from home plate, 6 degrees each. `rings` and `circles` are the park's own
  * arcs about home plate (drawn by the field itself) and `none` is plain, so they have no tone here. The path runs past the fence and must be cut to the fair ground.
  */
 export declare function mowPark(pattern: StripePattern, park: Park, band?: number): Mown;

package/dist/mow.js

@@ -5,6 +5,10 @@ import { num } from "./format.js";
 const NONE = { path: "", clip: false, evenodd: false };
 /** An odd whole number of cells nearest to a length over a cell: odd, so that both ends of the turf are mown alike. */
 export const oddCells = (length, cell) => Math.max(3, 2 * Math.round((length / cell - 1) / 2) + 1);
+/** A convex polygon from its corners, as a closed subpath. */
+const poly = (corners) => `M${corners.map(([px, py]) => `${num(px)} ${num(py)}`).join("L")}z`;
+/** The corners of the square of a lattice turned a quarter of a right angle: the cell between `a0` and `a1` along the first axis `(ex, ey)` and `b0` and `b1` along the second, from the origin `(ox, oy)`. */
+const lattice = (ox, oy, ex, ey, fx, fy, a0, a1, b0, b1) => [[a0, b0], [a1, b0], [a1, b1], [a0, b1]].map(([a, b]) => [ox + a * ex + b * fx, oy + a * ey + b * fy]);
 const box = (x, y, w, h) => `M${num(x)} ${num(y)}h${num(w)}v${num(h)}h${num(-w)}z`;
 /** An annulus between two radii about a centre, as two circles of one path. */
 const ring = (cx, cy, inner, outer) => {
@@ -14,7 +18,8 @@ const ring = (cx, cy, inner, outer) => {
 /**
  * The lighter tone of a pattern on a rectangle of turf. `band` is the width of the usual stripe, along x; `wide` and `narrow` are twice and half of it.
  * `bands` run across the turf (side by side along x), `lengthwise` along it, `checks` are squares of about `band`, `diagonal` are 45-degree stripes
- * `band` wide across, and `circles` are rings `band` wide about the middle. A pattern that is not one of these (`none`, `rings`, `fan`) has no tone here.
+ * `band` wide across, `diamonds` are the squares of `checks` turned 45 degrees (the crosshatch of a ballpark's outfield: two passes of 45-degree stripes, `band` wide
+ * across, crossing), laid so that a diamond is centred on the turf and both ends are mown alike, and `circles` are rings `band` wide about the middle. A pattern that is not one of these (`none`, `rings`, `fan`) has no tone here.
  */
 export function mowTurf(pattern, turf, band) {
     const { x, y, w, h } = turf;
@@ -49,6 +54,26 @@ export function mowTurf(pattern, turf, band) {
                 parts.push(`M${num(a)} ${num(y + h)}L${num(a + h)} ${num(y)}L${num(a + h + across)} ${num(y)}L${num(a + across)} ${num(y + h)}z`);
             return { path: parts.join(""), clip: true, evenodd: false };
         }
+        case "diamonds": {
+            // A lattice of squares of side `band` turned 45 degrees, one square centred on the turf: both ends of the turf then have the same tone, whatever its size.
+            const cx = x + w / 2;
+            const cy = y + h / 2;
+            const r = Math.SQRT1_2;
+            const reach = Math.ceil((Math.hypot(w, h) / 2) / band) + 1;
+            for (let i = -reach; i <= reach; i += 1) {
+                for (let j = -reach; j <= reach; j += 1) {
+                    if (Math.abs(i + j) % 2 !== 1)
+                        continue;
+                    const corners = lattice(cx, cy, r, r, -r, r, (i - 0.5) * band, (i + 0.5) * band, (j - 0.5) * band, (j + 0.5) * band);
+                    const xs = corners.map((c) => c[0]);
+                    const ys = corners.map((c) => c[1]);
+                    if (Math.max(...xs) <= x || Math.min(...xs) >= x + w || Math.max(...ys) <= y || Math.min(...ys) >= y + h)
+                        continue;
+                    parts.push(poly(corners));
+                }
+            }
+            return { path: parts.join(""), clip: true, evenodd: false };
+        }
         case "circles": {
             const cx = x + w / 2;
             const cy = y + h / 2;
@@ -64,7 +89,8 @@ export function mowTurf(pattern, turf, band) {
 /**
  * The lighter tone of a pattern on a ballpark: coordinates are the field's screen frame (x across, y minus the distance out from home plate). `band` is
  * 30 feet, the width of a stripe of the usual rings. `bands` run across the field at fixed distances out from home, `lengthwise` along the line to centre
- * field, `checks` are squares, `diagonal` run at 45 degrees, `fan` is wedges out from home plate, 6 degrees each. `rings` and `circles` are the park's own
+ * field, `checks` are squares, `diagonal` run at 45 degrees, `diamonds` are squares of `band` with their sides along the foul lines (two passes of stripes parallel to the
+ * lines, crossing, from home plate out), `fan` is wedges out from home plate, 6 degrees each. `rings` and `circles` are the park's own
  * arcs about home plate (drawn by the field itself) and `none` is plain, so they have no tone here. The path runs past the fence and must be cut to the fair ground.
  */
 export function mowPark(pattern, park, band = 30) {
@@ -96,6 +122,24 @@ export function mowPark(pattern, park, band = 30) {
                 parts.push(`M${num(a)} 0L${num(a + reach)} ${num(-reach)}L${num(a + reach + across)} ${num(-reach)}L${num(a + across)} 0z`);
             return { path: parts.join(""), clip: true, evenodd: false };
         }
+        case "diamonds": {
+            // The foul lines are the axes: a cell is `band` along each, from home plate, and the cells either side of a corner alternate.
+            const r = Math.SQRT1_2;
+            const last = Math.ceil((reach * Math.SQRT2) / band) + 1;
+            for (let i = 0; i < last; i += 1) {
+                for (let j = 0; j < last; j += 1) {
+                    if ((i + j) % 2 !== 1)
+                        continue;
+                    const corners = lattice(0, 0, r, -r, -r, -r, i * band, (i + 1) * band, j * band, (j + 1) * band);
+                    const xs = corners.map((c) => c[0]);
+                    const ys = corners.map((c) => c[1]);
+                    if (Math.max(...xs) < umin - band || Math.min(...xs) > umax + band || Math.min(...ys) > band || Math.max(...ys) < -reach)
+                        continue;
+                    parts.push(poly(corners));
+                }
+            }
+            return { path: parts.join(""), clip: true, evenodd: false };
+        }
         case "fan": {
             const step = (6 * Math.PI) / 180;
             const R = reach * 1.5;

package/dist/surfaces/soccer.js

@@ -13,10 +13,10 @@ const BANDS = { bands: 19, wide: 9, narrow: 39 };
 function stripes(pattern, L, W, id) {
     if (pattern === "none")
         return { path: "", defs: "" };
-    if (pattern === "circles") {
-        // Rings about the middle, as wide as a usual band, cut to the pitch.
-        const mown = mowTurf("circles", { x: 0, y: 0, w: L, h: W }, L / BANDS.bands);
-        return { path: mown.path, defs: `<clipPath id="${id}-turf"><rect x="0" y="0" width="${n(L)}" height="${n(W)}"/></clipPath>`, evenodd: true };
+    if (pattern === "circles" || pattern === "diamonds") {
+        // Rings about the middle, or squares turned 45 degrees about it, as wide as a usual band, cut to the pitch.
+        const mown = mowTurf(pattern, { x: 0, y: 0, w: L, h: W }, L / BANDS.bands);
+        return { path: mown.path, defs: `<clipPath id="${id}-turf"><rect x="0" y="0" width="${n(L)}" height="${n(W)}"/></clipPath>`, evenodd: mown.evenodd };
     }
     const rect = (x, y, w, h) => `M${n(x)} ${n(y)}h${n(w)}v${n(h)}h${n(-w)}z`;
     const parts = [];

package/dist/types.d.ts

@@ -73,11 +73,11 @@ export interface Placement {
 /** How much of the surface's markings are drawn. `simple` leaves out the small ones, such as hash marks. */
 export type Detail = "full" | "simple";
 /**
- * How grass is mown: bands across the surface (the usual), wide ones or narrow ones, along it, in checks, on the diagonal, in rings round the
+ * How grass is mown: bands across the surface (the usual), wide ones or narrow ones, along it, in checks, on the diagonal, in diamonds (the checks turned 45 degrees: a ballpark outfield's crosshatch, its sides along the foul lines), in rings round the
  * middle (`circles`), or `none`. A ballpark is mown in `rings` by default (arcs about home plate) and may also be mown in a `fan` (wedges out from
  * home plate). A football field and a ballpark take the same options as a soccer pitch; a surface that is not grass ignores them.
  */
-export type StripePattern = "bands" | "wide" | "narrow" | "lengthwise" | "checks" | "diagonal" | "circles" | "rings" | "fan" | "none";
+export type StripePattern = "bands" | "wide" | "narrow" | "lengthwise" | "checks" | "diagonal" | "diamonds" | "circles" | "rings" | "fan" | "none";
 /**
  * How a goal is drawn, seen from above. A soccer goal: the net as a box behind the goal line, a line on it, a solid strip, or not at all.
  * A hockey net: the same four (`box` is the open frame behind the goal line, `strip` a filled net). A basketball basket: `box` is the backboard,

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

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

package/package.json

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