@johnmorrisdotca/kyogijo-stadiums 0.5.0 → 0.6.1

package/dist/charts.baseball.js

@@ -76,7 +76,7 @@ export function mlbSprayChart(balls, options = {}) {
             if (at !== undefined)
                 [x, y] = toFrame === undefined ? at : toFrame([at])[0];
         }
-        return clean({ x: x ?? null, y: y ?? null, outcome: ballType(b.type), value: b.value, team: b.team, title: b.title });
+        return clean({ id: b.id, x: x ?? null, y: y ?? null, outcome: ballType(b.type), value: b.value, team: b.team, title: b.title });
     });
     const { counts, placed: count, skipped } = countOutcomes(rows);
     // The fence of the park in that season, and the balls that came down beyond it: each ball's distance and its angle from dead centre, from the surface's own feet.

package/dist/charts.js

@@ -218,7 +218,7 @@ export function nbaShotChart(shots, options = {}) {
     const end = options.end === "left" ? "left" : "right";
     // A shot chart puts every shot at the basket it was taken at; a frame fixed to the court says where each one is.
     const shooter = frame.ends === "shooter";
-    const data = shots.map((s) => clean({ x: s.x, y: s.y, outcome: s.made === undefined ? s.outcome : s.made ? "made" : "missed", value: s.value, team: s.team, title: s.title }));
+    const data = shots.map((s) => clean({ id: s.id, x: s.x, y: s.y, outcome: s.made === undefined ? s.outcome : s.made ? "made" : "missed", value: s.value, team: s.team, title: s.title }));
     const { counts, placed: count, skipped } = countOutcomes(data);
     const entries = [{ label: w.made, outcome: "made" }, { label: w.missed, outcome: "missed" }];
     const o = drawingOptions("nba", options, w.titleNba);
@@ -330,7 +330,7 @@ export function nhlShotMap(shots, options = {}) {
     const frame = frameOf(options.from, "nhl-api");
     const o = drawingOptions("nhl", options, w.titleNhl);
     const folded = options.fold === true;
-    const given = shots.map((s) => clean({ x: s.x, y: s.y, outcome: hockeyOutcome(s), value: s.xg, team: s.team, title: s.title }));
+    const given = shots.map((s) => clean({ id: s.id, x: s.x, y: s.y, outcome: hockeyOutcome(s), value: s.xg, team: s.team, title: s.title }));
     const data = folded ? foldToRight(given, frame, o) : given;
     const { counts, placed: count, skipped } = countOutcomes(data);
     const hasXg = data.some((d) => isNum(d.value));
@@ -441,7 +441,7 @@ export function nflPassChart(passes, options = {}) {
     const data = rows.map(({ p, outcome }, i) => {
         const place_ = at[i];
         const air = isNum(p.airYards) ? p.airYards : place_ === undefined ? undefined : round(inYards(place_[0] - losFeet), 1);
-        return clean({ x: p.x, y: p.y, outcome, value: air, team: p.team, title: p.title });
+        return clean({ id: p.id, x: p.x, y: p.y, outcome, value: air, team: p.team, title: p.title });
     });
     const { counts, placed: count, skipped } = countOutcomes(data);
     const entries = [["complete", w.complete], ["incomplete", w.incomplete], ["touchdown", w.touchdown], ["interception", w.interception]].filter(([k]) => counts.has(k) || counts.size === 0 || ["complete", "incomplete"].includes(k)).map(([outcome, label]) => ({ label, outcome }));
@@ -480,7 +480,7 @@ export function nflPassChart(passes, options = {}) {
         layers.push(line);
     }
     if (options.arrows === true) {
-        const arrows = rows.filter(({ p }) => isNum(p.fromX) && isNum(p.fromY) && isNum(p.x) && isNum(p.y)).map(({ p, outcome }) => clean({ x: p.fromX, y: p.fromY, x2: p.x, y2: p.y, outcome, team: p.team, title: p.title }));
+        const arrows = rows.filter(({ p }) => isNum(p.fromX) && isNum(p.fromY) && isNum(p.x) && isNum(p.y)).map(({ p, outcome }) => clean({ id: p.id, x: p.fromX, y: p.fromY, x2: p.x, y2: p.y, outcome, team: p.team, title: p.title }));
         layers.push(clean({ kind: "arrows", id: "arrows", name: w.passes, ...where, data: arrows, style: { width: 0.7, opacity: 0.7, curve: 0.08, outcomes: { touchdown: {}, interception: {}, complete: {}, incomplete: { hollow: true } } } }));
     }
     const values = data.map((d) => d.value).filter(isNum);

package/dist/charts.soccer.js

@@ -65,7 +65,7 @@ export function soccerShotMap(shots, options = {}) {
     });
     const attacking = options.attacking === "left" ? "left" : undefined;
     const where = clean({ from: fromOf(typeof provider === "object" ? provider : undefined, frame), attacking });
-    const data = shots.map((s) => clean({ x: s.x, y: s.y, outcome: outcomeOf(s), value: s.xg, team: s.team, title: s.title }));
+    const data = shots.map((s) => clean({ id: s.id, x: s.x, y: s.y, outcome: outcomeOf(s), value: s.xg, team: s.team, title: s.title }));
     const { counts, placed: count, skipped } = countOutcomes(data);
     const hasXg = data.some((d) => isNum(d.value));
     const sized = options.xg === false ? false : hasXg;
@@ -140,7 +140,7 @@ export function soccerGoalMouth(shots, options = {}) {
     };
     const id = options.id === undefined ? undefined : options.id;
     const surface = { sport: "soccer", pitch: { length: viewW, width: viewH, unit: "m" }, units: "m", language, ...(id === undefined ? {} : { id }), margin: 0 };
-    const rows = shots.map((s) => clean({ x: isNum(s.goalY) ? round(s.goalY * k, 3) : null, y: isNum(s.goalZ) ? round(s.goalZ * k, 3) : null, outcome: outcomeOf(s), value: s.xg, team: s.team, title: s.title }));
+    const rows = shots.map((s) => clean({ id: s.id, x: isNum(s.goalY) ? round(s.goalY * k, 3) : null, y: isNum(s.goalZ) ? round(s.goalZ * k, 3) : null, outcome: outcomeOf(s), value: s.xg, team: s.team, title: s.title }));
     const { counts, placed: placedCount, skipped } = countOutcomes(rows);
     const hasXg = rows.some((r) => isNum(r.value));
     const sized = options.xg === false ? false : options.xg === true || hasXg;
@@ -150,7 +150,7 @@ export function soccerGoalMouth(shots, options = {}) {
     const style = { outcomes: LOOKS, opacity: 0.92, ...(sized ? { size: { domain: [0, xgMax], range: [0.25, 0.8] } } : { size: 0.45 }) };
     const layer = clean({ kind: "points", id: "goal-shots", name: w.shots, description: describeCounts(entries, counts, all), from: frame, units: "m", data: rows, style, clip: "none" });
     const layers = [layer];
-    const rendered = renderLayers(surface, layers, false);
+    const rendered = renderLayers(surface, layers, false, undefined, undefined, () => undefined);
     const F = FEET_PER_METRE;
     const x0 = ((viewW - goalW) / 2) * F;
     const x1 = x0 + goalW * F;

package/dist/charts.types.d.ts

@@ -48,6 +48,8 @@ export interface ChartOptions {
 }
 /** A shot as stats.nba.com's shot chart gives it: `LOC_X` and `LOC_Y` and whether it went in. */
 export interface NbaShot {
+    /** Your id for the shot, written on its mark as `data-mark-id`. */
+    id?: string | number;
     x: number | null;
     y: number | null;
     /** True for a shot that went in. Or give `outcome`. */
@@ -98,6 +100,8 @@ export interface NbaTotals {
 }
 /** A shot as the NHL's play-by-play gives it. */
 export interface NhlShot {
+    /** Your id for the shot, written on its mark as `data-mark-id`. */
+    id?: string | number;
     x: number | null;
     y: number | null;
     /** `goal`, `saved` (a shot on goal), `missed`, `blocked`, or `shot` for an attempt of no known result. */
@@ -152,6 +156,8 @@ export interface NhlTotals {
 }
 /** A ball in play. Give `x` and `y` in the frame, or for Retrosheet a `zone` (the location code, `8D`). */
 export interface Ball {
+    /** Your id for the shot, written on its mark as `data-mark-id`. */
+    id?: string | number;
     x?: number | null;
     y?: number | null;
     /** A Retrosheet hit-location code in place of `x` and `y`. */
@@ -197,6 +203,8 @@ export interface MlbTotals {
 }
 /** A pass. The destination is `x` and `y`; the passer's place is `fromX` and `fromY` when you have it. */
 export interface NflPass {
+    /** Your id for the shot, written on its mark as `data-mark-id`. */
+    id?: string | number;
     /** Where the ball came down or was caught, in the frame. */
     x: number | null;
     y: number | null;
@@ -246,6 +254,8 @@ export interface NflTotals {
 }
 /** A shot. The place is in the provider's frame; `goalY` and `goalZ` say where it crossed the goal line. */
 export interface SoccerShot {
+    /** Your id for the shot, written on its mark as `data-mark-id`. */
+    id?: string | number;
     x: number | null;
     y: number | null;
     /** `goal`, `saved`, `blocked`, `missed` or `post`. */

package/dist/colour.d.ts

@@ -17,13 +17,13 @@ export declare function luminance(rgb: [number, number, number]): number;
 /** White or near-black, whichever reads better on the colour. White when the colour cannot be read. */
 export declare function inkOn(color: string | undefined): string;
 /**
- * A logo's address as it may be written into an image's `href`, or `undefined`. An `https:` or `http:` address, a
+ * A picture's address as it may be written into an image's `href`, or `undefined` (what `safeLogo` checks after it has looked for an emblem's id). An `https:` or `http:` address, a
  * relative path, an image `data:` address, or an SVG document as text (written as an image, which cannot run scripts).
  * @example
  * ```ts
- * import { safeLogo } from "@johnmorrisdotca/kyogijo-stadiums";
- * console.log(safeLogo("https://example.com/gulls.svg"), safeLogo("javascript:alert(1)"));
+ * import { safePicture } from "@johnmorrisdotca/kyogijo-stadiums";
+ * console.log(safePicture("https://example.com/gulls.svg"), safePicture("javascript:alert(1)"));
  * // https://example.com/gulls.svg undefined
  * ```
  */
-export declare function safeLogo(value: unknown): string | undefined;
+export declare function safePicture(value: unknown): string | undefined;

package/dist/colour.js

@@ -64,16 +64,16 @@ export function inkOn(color) {
     return luminance(rgb) > 0.4 ? "#161a18" : "#ffffff";
 }
 /**
- * A logo's address as it may be written into an image's `href`, or `undefined`. An `https:` or `http:` address, a
+ * A picture's address as it may be written into an image's `href`, or `undefined` (what `safeLogo` checks after it has looked for an emblem's id). An `https:` or `http:` address, a
  * relative path, an image `data:` address, or an SVG document as text (written as an image, which cannot run scripts).
  * @example
  * ```ts
- * import { safeLogo } from "@johnmorrisdotca/kyogijo-stadiums";
- * console.log(safeLogo("https://example.com/gulls.svg"), safeLogo("javascript:alert(1)"));
+ * import { safePicture } from "@johnmorrisdotca/kyogijo-stadiums";
+ * console.log(safePicture("https://example.com/gulls.svg"), safePicture("javascript:alert(1)"));
  * // https://example.com/gulls.svg undefined
  * ```
  */
-export function safeLogo(value) {
+export function safePicture(value) {
     if (typeof value !== "string")
         return undefined;
     const text = value.trim();

package/dist/crowd.d.ts

@@ -28,7 +28,7 @@ export type Outline = {
 export interface StandRing {
     /** `lower`, `upper`, `courtside`, `grandstand` or `bleachers`, with the tier's number where a ring has parts. */
     id: string;
-    tier: "courtside" | "lower" | "upper" | "grandstand" | "bleachers" | "wall";
+    tier: "courtside" | "gallery" | "lower" | "upper" | "grandstand" | "bleachers" | "wall";
     /** The band is `region` less `hole` (nothing for a polygon that is the band itself). */
     region: Outline;
     /** Further pieces of the band that are apart from `region` (a ballpark's bleachers either side of the batter's eye). */
@@ -90,6 +90,8 @@ export interface CrowdStands {
     };
     /** The seats of all the stands, from the model: what a density is a share of when no capacity is given. */
     seats: number;
+    /** The stands are a hall's gallery (a dojo's balcony): a thin band close to the walls, plain seats, a few neutral people and no sides. */
+    gallery?: boolean;
 }
 /** The crowd options read: every part has its value. */
 export interface Crowd {
@@ -145,6 +147,14 @@ export interface LayoutInput {
     awaySide: Side;
     /** A ground's key, for the stadium a soccer pitch stands in. */
     ground?: string;
+    /** The surface lies on an arena floor that fills most of the hall: the sport's closer stands, where it has them. */
+    arena?: boolean;
+    /** A hall's gallery instead of the sport's stands (a dojo's balcony, from `dojoRoom`): the distance of its first row from the surface, its depth and the heights of its first and last rows, in feet. */
+    gallery?: {
+        offset: number;
+        depth: number;
+        height: [number, number];
+    };
     /** The ballpark's fence as points on the field, for a ballpark (see `parkLayout`). */
     fence?: readonly Pt[];
     /** The foul lines' length at the poles and the backstop's distance, for a ballpark. */

package/dist/crowd.draw.js

@@ -14,7 +14,7 @@ const n1 = (v) => {
     return t === "-0" ? "0" : t.replace(/^0\./, ".");
 };
 /** One tile of people: the seats of a block 18 feet square, each taken with the probability `density`, in the colour of a team with the probability `share` and else in a neutral. */
-function tile(seed, density, share, team) {
+function tile(seed, density, share, team, neutral = false) {
     const next = generator(seed);
     const shirts = new Map();
     const heads = new Map();
@@ -42,16 +42,16 @@ function tile(seed, density, share, team) {
     }
     let out = "";
     if (empty.length > 0)
-        out += el("path", { class: "ky-cr-seat", d: empty.join("") });
+        out += el("path", { class: neutral ? "ky-cr-seat ky-bud-gseat" : "ky-cr-seat", d: empty.join("") });
     for (const [key, list] of shirts)
         out += key.startsWith("ky-") ? el("path", { class: key, d: list.join("") }) : el("path", { stroke: key, d: list.join("") });
     const headPaths = [...heads].map(([colour, list]) => el("path", { stroke: colour, "stroke-width": 1.15, d: list.join("") })).join("");
     return el("g", { fill: "none", "stroke-linecap": "round", "stroke-width": 2.3 }, out + headPaths);
 }
 /** The tiles a crowd needs: the home tile, the home tile of the upper tiers (emptier) and the visitors', and the display tiles. */
-function patterns(id, crowd, density, tifo) {
+function patterns(id, crowd, density, tifo, neutral = false) {
     const make = (suffix, body, size = TILE) => el("pattern", { id: `${id}-cr-${suffix}`, width: size, height: size, patternUnits: "userSpaceOnUse" }, body);
-    let out = make("h", tile(crowd.seed * 7 + 1, density, 0.88, "ky-cr-h")) + make("a", tile(crowd.seed * 7 + 3, Math.min(1, density * 1.04), 0.94, "ky-cr-a"));
+    let out = make("h", tile(crowd.seed * 7 + 1, density, neutral ? 0 : 0.88, "ky-cr-h", neutral)) + make("a", tile(crowd.seed * 7 + 3, Math.min(1, density * 1.04), 0.94, "ky-cr-a"));
     if (tifo !== undefined) {
         const stripes = (cls) => el("rect", { class: cls, width: 3, height: 6 }) + el("rect", { class: "ky-cr-tw", x: 3, width: 3, height: 6 });
         const checks = (cls) => el("rect", { class: cls, width: 3, height: 3 }) + el("rect", { class: cls, x: 3, y: 3, width: 3, height: 3 }) + el("rect", { class: "ky-cr-tw", x: 3, width: 3, height: 3 }) + el("rect", { class: "ky-cr-tw", y: 3, width: 3, height: 3 });
@@ -133,10 +133,11 @@ export function drawCrowd(stands, o) {
     for (const ring of stands.rings) {
         // The upper tiers are a little emptier: their paint is the same tile with the empty seats' bed showing through a veil.
         // The bed of seats under the tile, so that no seam of the pattern shows light.
+        const bed = stands.gallery === true ? "ky-cr-bed ky-bud-gbed" : "ky-cr-bed";
         if (fine)
-            body += el("path", { class: "ky-cr-bed", d: path(ring) }) + el("path", { class: "ky-cr-people", d: path(ring), fill: `url(#${id}-cr-h)` });
+            body += el("path", { class: bed, d: path(ring) }) + el("path", { class: "ky-cr-people", d: path(ring), fill: `url(#${id}-cr-h)` });
         else
-            body += el("path", { class: "ky-cr-bed", d: path(ring) }) + el("path", { class: "ky-cr-blk", d: path(ring), "fill-opacity": num(0.28 + 0.6 * density * ring.fill) });
+            body += el("path", { class: bed, d: path(ring) }) + el("path", { class: stands.gallery === true ? "ky-cr-blk ky-bud-gblk" : "ky-cr-blk", d: path(ring), "fill-opacity": num(0.28 + 0.6 * density * ring.fill) });
         if (fine && ring.fill < 0.95)
             body += el("path", { class: "ky-cr-bed", d: path(ring), "fill-opacity": num(Math.min(0.5, (1 - ring.fill) * 1.6)) });
     }
@@ -144,9 +145,14 @@ export function drawCrowd(stands, o) {
         body += sector(s, id, fine, density);
     if (fine)
         for (const ring of stands.rings)
-            body += rows(ring) + aisles(ring);
+            body += rows(ring) + (stands.gallery === true ? "" : aisles(ring));
     // Depth: the front wall of a tier throws a shade on its first rows (and the ground in front of it), the roof's edge on the last rows of the upper tier.
-    if (fine) {
+    // A gallery's railing: a line along its front edge, over the seats.
+    if (stands.gallery === true)
+        for (const ring of stands.rings)
+            if (ring.hole !== null)
+                body += el("path", { class: "ky-bud-rail", d: outlinePath(ring.hole), fill: "none" });
+    if (fine && stands.gallery !== true) {
         for (const ring of stands.rings) {
             if (ring.hole !== null)
                 body += el("path", { d: outlinePath(ring.hole), fill: "none", stroke: "#000", "stroke-opacity": 0.2, "stroke-width": 7 });
@@ -160,7 +166,7 @@ export function drawCrowd(stands, o) {
         const [x0, y0, x1, y1] = g.box;
         body += el("rect", { class: `ky-cr-${g.kind}`, x: n1(x0), y: n1(y0), width: n1(x1 - x0), height: n1(y1 - y0), rx: g.kind === "bench" ? 1 : undefined });
     }
-    return { defs: (fine ? patterns(id, crowd, density, tifo.home || tifo.away ? tifo : undefined) : ""), markup: el("g", { class: "ky-crowd" }, body), over };
+    return { defs: (fine ? patterns(id, crowd, density, tifo.home || tifo.away ? tifo : undefined, stands.gallery === true) : ""), markup: el("g", { class: "ky-crowd" }, body), over };
 }
 /** A block of visitors or a card display, a polygon over the band it is in. */
 function sector(s, id, fine, density) {

package/dist/crowd.js

@@ -91,6 +91,15 @@ const PROFILES = {
     cricket: { shape: "bowl", side: 30, end: 30, bench: 0, corner: 0, tiers: [lower(66), upper(73, 125)], oval: true, away: "end" },
     fieldhockey: { shape: "bowl", side: 20, end: 26, bench: 5, corner: 30, tiers: [lower(46, 3, 24), upper(53, 87, 32, 54)], away: "end" },
     handball: { shape: "bowl", side: 14, end: 18, bench: 4, corner: 16, tiers: [courtside(6), { id: "lower", from: 10, to: 46, height: [3, 22], fill: 1 }, upper(53, 97, 30, 56)], away: "corner" },
+    // The budō (ours: no rule gives the stands). The competition areas of judo, karate and kendo stand in an arena's bowl, as the Nippon Budokan's does round its octagonal floor (the Budokan's leaflet: 2,946 temporary
+    // seats on the arena, 2,959 to 3,199 on the first floor, 7,876 on the second and third); sumo's dohyō stands in the middle of a hall of box seats and a gallery (the Ryōgoku Kokugikan's); a kyūdōjō's
+    // spectators stand along the yamichi; a dojo's gallery looks down on the mats from above, as the Kodokan's does from the eighth floor.
+    judo: { shape: "bowl", side: 36, end: 36, bench: 6, corner: 50, tiers: [lower(60, 3, 24), upper(67, 120, 32, 60)], away: "corner", arena: { side: 8, end: 8, bench: 0, corner: 56, tiers: [lower(34, 3, 24), upper(40, 74, 32, 62)] } },
+    karate: { shape: "bowl", side: 36, end: 36, bench: 6, corner: 50, tiers: [lower(60, 3, 24), upper(67, 120, 32, 60)], away: "corner", arena: { side: 8, end: 8, bench: 0, corner: 56, tiers: [lower(34, 3, 24), upper(40, 74, 32, 62)] } },
+    kendo: { shape: "bowl", side: 36, end: 36, bench: 6, corner: 50, tiers: [lower(60, 3, 24), upper(67, 120, 32, 60)], away: "corner", arena: { side: 8, end: 8, bench: 0, corner: 56, tiers: [lower(34, 3, 24), upper(40, 74, 32, 62)] } },
+    sumo: { shape: "bowl", side: 58, end: 58, bench: 0, corner: 56, tiers: [{ id: "lower", from: 0, to: 54, height: [1, 8], fill: 1 }, upper(62, 128, 26, 62)], away: "corner" },
+    kyudo: { shape: "sides", side: 10, end: 8, bench: 0, corner: 6, tiers: [lower(24, 2, 8), upper(30, 52, 12, 22)], away: "corner" },
+    dojo: { shape: "bowl", side: 5, end: 5, bench: 0, corner: 8, tiers: [lower(26, 2, 14), upper(32, 58, 20, 36)], away: "corner" },
 };
 /** The grounds of the package that are the home of an NFL or a CFL club, where a soccer pitch stands inside a gridiron's stands. From each ground's article. */
 export const GRIDIRON_GROUNDS = Object.freeze({
@@ -297,8 +306,12 @@ function offsets(p, box, stadium) {
 }
 /** The layout of a sport's stands round its surface: rings, covers, sectors and gaps. For a ballpark see `parkLayout`. */
 export function layoutOf(input) {
-    const { sport, box, crowd } = input;
-    const base = PROFILES[sport];
+    const { sport, box } = input;
+    const gal = input.gallery;
+    // A gallery has no home and no visitors, no card display and no tunnel, camera or benches.
+    const crowd = gal === undefined ? input.crowd : { ...input.crowd, awayEnd: "none", tifo: undefined, gaps: false, shape: input.crowd.shape === "sides" ? "sides" : "bowl" };
+    const base0 = gal === undefined ? PROFILES[sport] : { shape: "bowl", side: gal.offset, end: gal.offset, bench: 0, corner: 0, tiers: [{ id: "gallery", from: 0, to: gal.depth, height: gal.height, fill: 1 }], away: "corner" };
+    const base = input.arena === true && base0.arena !== undefined ? { ...base0, ...base0.arena, tiers: base0.arena.tiers ?? base0.tiers } : base0;
     const host = sport === "soccer" ? (crowd.stadium === "nfl" || crowd.stadium === "cfl" ? crowd.stadium : crowd.stadium === "auto" && input.ground !== undefined ? GRIDIRON_GROUNDS[input.ground] : undefined) : undefined;
     const stadium = sport === "soccer" ? host ?? "purpose" : undefined;
     const p = stadium === "nfl" || stadium === "cfl" ? { ...PROFILES[stadium], shape: base.shape, away: base.away } : base;
@@ -360,6 +373,8 @@ export function layoutOf(input) {
     const stands = { sport, shape, box, rings, covers, concourses, sectors: [], gaps: [], reach: reachOf, seats: rings.reduce((n, r) => n + r.seats, 0) };
     if (stadium !== undefined)
         stands.stadium = stadium;
+    if (gal !== undefined)
+        stands.gallery = true;
     if (stadium === "nfl" || stadium === "cfl") {
         const f = gridiron(stadium);
         const field = { x: cx - f.length / 2, y: cy - f.width / 2, w: f.length, h: f.width };