@johnmorrisdotca/kyogijo-stadiums 0.5.0 → 0.6.1

package/dist/lineup.codes.d.ts

@@ -0,0 +1,23 @@
+import type { Formation, FormationPosition, FormationSport, LineupPlayer } from "./team.types.ts";
+/** The positions a short code may stand for, by sport, in the order a player takes them: a code that is also an id of the formation is that place first. */
+export declare const LINEUP_CODES: Readonly<Record<FormationSport, Readonly<Record<string, readonly string[]>>>>;
+/** A code as the table has it: upper case, with no spaces, dots or hyphens. */
+export declare const codeOf: (pos: unknown) => string;
+/** The ids a player's code may stand for in a formation of a sport, best first: the id itself, then the table's. A second line's ids end in its number. */
+export declare function candidates(sport: FormationSport, player: LineupPlayer, ids: ReadonlySet<string>): string[];
+/** The places of a formation that a lineup may fill: the side on the surface and, beside it, the places it only lists. */
+export declare const spotsOf: (f: Formation) => FormationPosition[];
+/** Where each player of a lineup stands in a formation, by the index of the player; the places taken; and the players with none. */
+export interface Assignment {
+    /** The id of the position of each player, or undefined. */
+    of: (string | undefined)[];
+    placed: number;
+    /** How many took the place their own code names, which settles a tie between formations. */
+    exact: number;
+}
+/** Players to places. Those whose code is a place's id take it first, then the others take the first free place their code may stand for; a volleyball team turns by `rotation`. */
+export declare function assign(f: Formation, players: readonly LineupPlayer[], rotation?: number): Assignment;
+/** The formations that may hold a lineup on a surface, in table order. */
+export declare const formationsFor: (sports: readonly FormationSport[]) => Formation[];
+/** The formation that places the most of the players: the first of the table on a tie. */
+export declare function bestFormation(candidatesList: readonly Formation[], players: readonly LineupPlayer[], rotation?: number): Formation | undefined;

package/dist/lineup.codes.js

@@ -0,0 +1,122 @@
+// How a lineup finds a player's place: the short codes a team sheet uses (`CB`, `D`, `OF`, `PR`, the scorer's numbers 1 to 9) are matched to the ids of a formation's positions,
+// and each player takes the first free place of the codes that fit. Written for this package; the codes are the conventional ones of each sport and are listed in docs/team-shape.md.
+import { FORMATIONS } from "./formations.js";
+/** The positions a short code may stand for, by sport, in the order a player takes them: a code that is also an id of the formation is that place first. */
+export const LINEUP_CODES = Object.freeze({
+    soccer: {
+        GOALKEEPER: ["GK"], G: ["GK"],
+        CB: ["CB", "RCB", "LCB"], D: ["CB", "RCB", "LCB"], DF: ["CB", "RCB", "LCB"],
+        RB: ["RB", "RWB"], LB: ["LB", "LWB"], RWB: ["RWB", "RB"], LWB: ["LWB", "LB"],
+        DM: ["CDM", "RDM", "LDM"], CDM: ["CDM", "RDM", "LDM"], RDM: ["RDM", "CDM"], LDM: ["LDM", "CDM"],
+        CM: ["CM", "RCM", "LCM"], M: ["CM", "RCM", "LCM"], RCM: ["RCM", "CM"], LCM: ["LCM", "CM"],
+        AM: ["CAM", "RAM", "LAM"], CAM: ["CAM", "RAM", "LAM"], RAM: ["RAM", "CAM"], LAM: ["LAM", "CAM"],
+        RM: ["RM", "RW"], LM: ["LM", "LW"], RW: ["RW", "RM"], LW: ["LW", "LM"],
+        ST: ["ST", "RS", "LS"], CF: ["ST", "RS", "LS"], S: ["ST", "RS", "LS"], FW: ["ST", "RS", "LS", "RW", "LW"], RS: ["RS", "ST"], LS: ["LS", "ST"],
+    },
+    nhl: {
+        GOALIE: ["G"], GK: ["G"], D: ["LD", "RD"], W: ["LW", "RW"], F: ["C", "LW", "RW"],
+        G2: ["G"],
+    },
+    nba: { G: ["PG", "SG"], F: ["SF", "PF"], GF: ["SG", "SF"], FC: ["PF", "C"] },
+    nfl: {
+        WR: ["WR1", "WR2", "WR3"], RB: ["HB", "FB"], OG: ["LG", "RG"], OT: ["LT", "RT"], T: ["LT", "RT"], G: ["LG", "RG"],
+        DE: ["LDE", "RDE"], DT: ["LDT", "RDT", "NT"], NT: ["NT"], CB: ["LCB", "RCB"], S: ["FS", "SS"],
+        LB: ["MLB", "LLB", "RLB", "LOLB", "LILB", "RILB", "ROLB"], OLB: ["LOLB", "ROLB", "LLB", "RLB"], ILB: ["LILB", "RILB", "MLB"],
+    },
+    mlb: {
+        "1": ["P"], "2": ["C"], "3": ["1B"], "4": ["2B"], "5": ["3B"], "6": ["SS"], "7": ["LF"], "8": ["CF"], "9": ["RF"],
+        PITCHER: ["P"], CATCHER: ["C"], OF: ["LF", "CF", "RF"], IF: ["1B", "2B", "SS", "3B"], DESIGNATEDHITTER: ["DH"],
+    },
+    rugby: {
+        LHP: ["1"], PR: ["1", "3"], HK: ["2"], HO: ["2"], THP: ["3"], LK: ["4", "5"], LO: ["4", "5"], L: ["4", "5"], FL: ["6", "7"], BF: ["6"], OF: ["7"], N8: ["8"], NO8: ["8"],
+        SH: ["9"], FH: ["10"], SO: ["10"], IC: ["12"], OC: ["13"], CTB: ["12", "13"], C: ["12", "13"], W: ["11", "14"], WG: ["11", "14"], WTB: ["11", "14"], LW: ["11"], RW: ["14"], FB: ["15"],
+    },
+    afl: {
+        BP: ["BPL", "BPR"], HB: ["HBFL", "CHB", "HBFR"], HBF: ["HBFL", "HBFR"], W: ["WL", "WR"], HF: ["HFFL", "CHF", "HFFR"], HFF: ["HFFL", "HFFR"], FP: ["FPL", "FPR"],
+        R: ["RUC"], RK: ["RUC"], RUCK: ["RUC"], RUCKROVER: ["RR"], ROVER: ["ROV"], RO: ["ROV"],
+    },
+    cricket: {
+        BOWLER: ["BWL"], KEEPER: ["WK"], SL: ["SL1", "SL2", "SL3"], SLIP: ["SL1", "SL2", "SL3"], GULLY: ["GU"], POINT: ["PT"], COVER: ["CV"], MIDOFF: ["MO"], MIDON: ["MN"],
+        MIDWICKET: ["MW"], SQUARELEG: ["SQ"], FINELEG: ["FL"], THIRDMAN: ["TM"], LONGOFF: ["LO"], LONGON: ["LN"], DEEPCOVER: ["DC"], DEEPMIDWICKET: ["DM"],
+    },
+    volleyball: { "1": ["P1"], "2": ["P2"], "3": ["P3"], "4": ["P4"], "5": ["P5"], "6": ["P6"] },
+    handball: { G: ["GK"], P: ["PV"], PIVOT: ["PV"], LINE: ["PV"], W: ["LW", "RW"], B: ["LB", "CB", "RB"] },
+    waterpolo: { G: ["GK"], W: ["LW", "RW"], D: ["LD", "RD"], FLAT: ["LD", "RD"], HS: ["CF"], HOLE: ["CF"], H: ["CF"], PT: ["CB"], POINT: ["CB"] },
+    fieldhockey: {
+        G: ["GK"], FB: ["RB", "LB"], CB: ["CB", "RCB", "LCB"], D: ["CB", "RCB", "LCB"], M: ["CM", "RCM", "LCM"], CM: ["CM", "RCM", "LCM"], RM: ["RM", "RW"], LM: ["LM", "LW"],
+        F: ["CF", "RW", "LW"], ST: ["CF"], RW: ["RW", "RM"], LW: ["LW", "LM"],
+    },
+    netball: {},
+});
+/** A code as the table has it: upper case, with no spaces, dots or hyphens. */
+export const codeOf = (pos) => String(typeof pos === "number" || typeof pos === "string" ? pos : "").trim().toUpperCase().replace(/[\s.\-_]+/g, "");
+/** The ids a player's code may stand for in a formation of a sport, best first: the id itself, then the table's. A second line's ids end in its number. */
+export function candidates(sport, player, ids) {
+    const own = typeof player.pos === "string" ? player.pos.trim() : String(player.pos);
+    const code = codeOf(player.pos);
+    const line = typeof player.line === "number" && Number.isInteger(player.line) && player.line > 1 ? String(player.line) : "";
+    const listed = Object.prototype.hasOwnProperty.call(LINEUP_CODES[sport], code) ? LINEUP_CODES[sport][code] : [];
+    const base = [own, code, ...listed];
+    const wanted = line === "" ? base : base.map((id) => `${id}${line}`);
+    return [...new Set(wanted)].filter((id) => ids.has(id));
+}
+/** The places of a formation that a lineup may fill: the side on the surface and, beside it, the places it only lists. */
+export const spotsOf = (f) => [...f.positions, ...(f.extra ?? [])];
+/** Players to places. Those whose code is a place's id take it first, then the others take the first free place their code may stand for; a volleyball team turns by `rotation`. */
+export function assign(f, players, rotation = 1) {
+    const ids = new Set(spotsOf(f).map((p) => p.id));
+    const turned = f.sport === "volleyball" ? players.map((p) => zoneAfter(p, rotation)) : players;
+    const of = new Array(turned.length).fill(undefined);
+    const taken = new Set();
+    const lists = turned.map((p) => (typeof p === "object" && p !== null ? candidates(f.sport, p, ids) : []));
+    // The exact codes first, so that a CB on the sheet cannot take the place an RCB has asked for by name.
+    let exact = 0;
+    turned.forEach((p, i) => {
+        if (typeof p !== "object" || p === null)
+            return;
+        const line = typeof p.line === "number" && p.line > 1 ? String(p.line) : "";
+        const own = lists[i].find((id) => id === `${typeof p.pos === "string" ? p.pos.trim() : String(p.pos)}${line}` || id === `${codeOf(p.pos)}${line}`);
+        if (own !== undefined && !taken.has(own)) {
+            of[i] = own;
+            taken.add(own);
+            exact += 1;
+        }
+    });
+    turned.forEach((_, i) => {
+        if (of[i] !== undefined)
+            return;
+        const free = lists[i].find((id) => !taken.has(id));
+        if (free !== undefined) {
+            of[i] = free;
+            taken.add(free);
+        }
+    });
+    return { of, placed: of.filter((id) => id !== undefined).length, exact };
+}
+/** A volleyball player after the rotations: each moves one place clockwise, from 2 to 1, 1 to 6, 6 to 5, 5 to 4, 4 to 3 and 3 to 2. */
+function zoneAfter(p, rotation) {
+    if (typeof p !== "object" || p === null)
+        return p;
+    const code = codeOf(p.pos).replace(/^P/, "");
+    if (!/^[1-6]$/.test(code))
+        return p;
+    const turns = Number.isInteger(rotation) && rotation >= 1 ? (rotation - 1) % 6 : 0;
+    const zone = ((((Number(code) - 1 - turns) % 6) + 6) % 6) + 1;
+    return { ...p, pos: `P${zone}` };
+}
+/** The formations that may hold a lineup on a surface, in table order. */
+export const formationsFor = (sports) => Object.values(FORMATIONS).filter((f) => sports.includes(f.sport));
+/** The formation that places the most of the players: the first of the table on a tie. */
+export function bestFormation(candidatesList, players, rotation = 1) {
+    let best;
+    let score = -1;
+    for (const f of candidatesList) {
+        const a = assign(f, players, rotation);
+        const n = a.placed * 1000 + a.exact;
+        if (n > score) {
+            best = f;
+            score = n;
+        }
+    }
+    return best;
+}

package/dist/logo.d.ts

@@ -0,0 +1,25 @@
+/** What a caller says about the team an emblem stands for: its colours and letters, so a crest id takes them; and the theme of the drawing it goes in. */
+export interface EmblemContext {
+    color?: string;
+    accent?: string;
+    initials?: string;
+    theme?: "inherit" | "auto" | "light" | "dark";
+}
+/**
+ * The SVG document for a value that names an emblem (`"trophy:cup"`, `"crest:shield"`, `"sport:nhl/line"`), or `undefined` when it does not or when no renderer is plugged in. Drawn for an image: the theme is `auto` unless
+ * the context says otherwise. A crest takes the context's colours and letters.
+ */
+export declare function emblemDocument(value: unknown, context?: EmblemContext): string | undefined;
+/**
+ * A logo as it may be written into an image's `href`, or `undefined`. An `https:` or `http:` address, a relative path, an image `data:` address, an SVG document as text (written as an image, which cannot
+ * run scripts), or, with a renderer of emblems plugged in, the id of an emblem (`"trophy:cup"`, `"medal:gold"`, `"sport:nhl"`, `"crest:shield"`, a trophy or award by its short name such as `"cup"`, with `/line`
+ * for the outline style), drawn for an image with the outline in dark or pale ink by the device's setting. The second argument gives a crest the team's colours and letters. With a renderer, a name that is
+ * an emblem's id is the emblem, not a file of that name: write `./cup` for the file. Without one, an id is an address like any other, and `"trophy:cup"` is refused.
+ * @example
+ * ```ts
+ * import { safeLogo } from "@johnmorrisdotca/kyogijo-stadiums";
+ * console.log(safeLogo("https://example.com/gulls.svg"), safeLogo("javascript:alert(1)"));
+ * // https://example.com/gulls.svg undefined
+ * ```
+ */
+export declare function safeLogo(value: unknown, context?: EmblemContext): string | undefined;

package/dist/logo.js

@@ -0,0 +1,47 @@
+// The one path every logo, flag, emblem and mark takes into a drawing: an address, an image `data:` address, an SVG document as text, or, when a renderer of ready-made emblems is plugged in
+// (`useEmblems`, or the `emblems` option), the id of one (`"trophy:cup"`, `"crest:shield"`, `"sport:hockey/line"`). The result is an address that may be written into an image's `href`, or `undefined`.
+import { safePicture } from "./colour.js";
+import { GROUPED_ID, emblemRenderer, renderedEmblem } from "./emblems-source.js";
+let told = false;
+/** Once, in development: an id with its group was given and nothing is plugged in to draw it. */
+function hint(value) {
+    if (told || typeof value !== "string" || !GROUPED_ID.test(value.trim()))
+        return;
+    const process = globalThis.process;
+    if (process?.env?.NODE_ENV === "production")
+        return;
+    told = true;
+    console.warn(`[kyogijo-stadiums] "${value.trim().slice(0, 40)}" is the id of an emblem, but no emblem renderer is plugged in, so it was ignored. Plug in Dougu Sports once: import { renderEmblem } from "@johnmorrisdotca/dougu-sports/emblems"; useEmblems(renderEmblem); (or pass emblems: renderEmblem). See https://johnmorrisdotca.github.io/kyogijo-stadiums/docs/emblems.html`);
+}
+/**
+ * The SVG document for a value that names an emblem (`"trophy:cup"`, `"crest:shield"`, `"sport:nhl/line"`), or `undefined` when it does not or when no renderer is plugged in. Drawn for an image: the theme is `auto` unless
+ * the context says otherwise. A crest takes the context's colours and letters.
+ */
+export function emblemDocument(value, context) {
+    const crest = typeof value === "string" && value.trim().startsWith("crest:");
+    return renderedEmblem(value, {
+        theme: context?.theme ?? "auto",
+        ...(crest ? { tint: context?.color, accent: context?.accent, initials: context?.initials } : {}),
+    });
+}
+/**
+ * A logo as it may be written into an image's `href`, or `undefined`. An `https:` or `http:` address, a relative path, an image `data:` address, an SVG document as text (written as an image, which cannot
+ * run scripts), or, with a renderer of emblems plugged in, the id of an emblem (`"trophy:cup"`, `"medal:gold"`, `"sport:nhl"`, `"crest:shield"`, a trophy or award by its short name such as `"cup"`, with `/line`
+ * for the outline style), drawn for an image with the outline in dark or pale ink by the device's setting. The second argument gives a crest the team's colours and letters. With a renderer, a name that is
+ * an emblem's id is the emblem, not a file of that name: write `./cup` for the file. Without one, an id is an address like any other, and `"trophy:cup"` is refused.
+ * @example
+ * ```ts
+ * import { safeLogo } from "@johnmorrisdotca/kyogijo-stadiums";
+ * console.log(safeLogo("https://example.com/gulls.svg"), safeLogo("javascript:alert(1)"));
+ * // https://example.com/gulls.svg undefined
+ * ```
+ */
+export function safeLogo(value, context) {
+    const emblem = emblemDocument(value, context);
+    if (emblem !== undefined)
+        return safePicture(emblem);
+    const picture = safePicture(value);
+    if (picture === undefined && emblemRenderer() === undefined)
+        hint(value);
+    return picture;
+}

package/dist/outline.d.ts

@@ -22,4 +22,4 @@ export declare const frameSizeOf: (o: Pick<SurfaceOptions, "sport" | "league">,
     unit: "ft";
 } | undefined;
 /** The outline of the surface the options draw. */
-export declare function outlineOf(o: Pick<SurfaceOptions, "sport" | "park" | "fence" | "units" | "pitch" | "league" | "year" | "sheet" | "net"> & Partial<Pick<SurfaceOptions, "field" | "detail" | "pool" | "athletics" | "skating">>): Outline;
+export declare function outlineOf(o: Pick<SurfaceOptions, "sport" | "park" | "fence" | "units" | "pitch" | "league" | "year" | "sheet" | "net"> & Partial<Pick<SurfaceOptions, "field" | "detail" | "pool" | "athletics" | "skating" | "budo" | "dojo" | "arena">>): Outline;

package/dist/outline.js

@@ -2,6 +2,7 @@
 // a ballpark's x is across the field and its y minus the distance out from home plate): where a data layer is cut, and the size
 // its marks follow.
 import { FEET_PER_METRE, FOOTBALL, NBA, NHL, footballLength, surfaceSize } from "./geometry.js";
+import { arenaById, arenaCourtIn, arenaRinkIn } from "./arenas.js";
 import { chooseLeague, courtOf, diamondOf, fieldOf, rinkOf } from "./leagues.js";
 import { diamondFence } from "./leagues/baseball.js";
 import { fenceFor, parkById } from "./parks.js";
@@ -17,6 +18,7 @@ import { sheetFor } from "./sheet.js";
 import { isPoolSport, poolBox } from "./pool.js";
 import { athleticsPlan } from "./athletics/plan.js";
 import { skatingPlan } from "./skating/plan.js";
+import { budoPlan, isBudoSport } from "./budo/plan.js";
 const inBox = (box, x, y) => x >= box.x && x <= box.x + box.w && y >= box.y && y <= box.y + box.h;
 const rect = (w, h) => {
     const box = { x: 0, y: 0, w, h };
@@ -34,7 +36,7 @@ function inPolygon(points, x, y) {
     return inside;
 }
 /** The size a provider's frame is fitted to: the drawn surface's own `box`, for a soccer pitch, a curling sheet, a net sport's court and a league's surface; none for a sport's own fixed one. */
-export const frameSizeOf = (o, box) => o.sport === "soccer" || o.sport === "curling" || isNetSport(o.sport) || isFieldSport(o.sport) || isPoolSport(o.sport) || o.sport === "athletics" || o.sport === "skating" || chooseLeague(o).league !== undefined ? { length: box.w, width: box.h, unit: "ft" } : undefined;
+export const frameSizeOf = (o, box) => o.sport === "soccer" || o.sport === "curling" || isNetSport(o.sport) || isFieldSport(o.sport) || isPoolSport(o.sport) || o.sport === "athletics" || o.sport === "skating" || isBudoSport(o.sport) || chooseLeague(o).league !== undefined ? { length: box.w, width: box.h, unit: "ft" } : undefined;
 /** The outline of the surface the options draw. */
 export function outlineOf(o) {
     const { sport, league } = chooseLeague(o);
@@ -50,7 +52,8 @@ export function outlineOf(o) {
         }
         case "nhl": {
             const rink = league?.family === "hockey" ? rinkOf(league, o.year) : undefined;
-            const [length, width, r] = rink === undefined ? [NHL.length, NHL.width, NHL.cornerRadius] : [rink.length, rink.width, rink.cornerRadius];
+            const sized = league === undefined ? arenaRinkIn(arenaById(o.arena), o.year) : undefined;
+            const [length, width, r] = rink !== undefined ? [rink.length, rink.width, rink.cornerRadius] : sized !== undefined ? [sized.length, sized.width, NHL.cornerRadius] : [NHL.length, NHL.width, NHL.cornerRadius];
             const box = { x: 0, y: 0, w: length, h: width };
             // A rectangle with quarter-circle corners: outside only when a point is in a corner's square but beyond its arc.
             const contains = (x, y) => {
@@ -67,7 +70,8 @@ export function outlineOf(o) {
                 const court = courtOf(league, o.year);
                 return rect(court.length, court.width);
             }
-            return rect(NBA.length, NBA.width);
+            const sized = league === undefined ? arenaCourtIn(arenaById(o.arena), o.year) : undefined;
+            return sized === undefined ? rect(NBA.length, NBA.width) : rect(sized.length, sized.width);
         }
         case "mlb": {
             const generic = league?.family === "baseball" ? diamondFence(diamondOf(league, o.year)) : undefined;
@@ -126,6 +130,16 @@ export function outlineOf(o) {
             const k = 1 / 0.3048;
             return rect((plan.box.x1 - plan.box.x0) * k, (plan.box.y1 - plan.box.y0) * k);
         }
+        case "judo":
+        case "karate":
+        case "kendo":
+        case "sumo":
+        case "kyudo":
+        case "dojo": {
+            const plan = budoPlan({ ...o, sport, detail: o.detail });
+            const k = 1 / 0.3048;
+            return rect((plan.box.x1 - plan.box.x0) * k, (plan.box.y1 - plan.box.y0) * k);
+        }
         case "athletics": {
             const plan = athleticsPlan(o);
             const k = 1 / 0.3048;

package/dist/pageant.js

@@ -2,7 +2,9 @@
 // (a `carpet`: a rectangle at the flag's own ratio with a border; a `stage`: a crest on a large round disc with a ring), and an emblem or a trophy in the centre circle. This file
 // decides what is asked (`pageantOf`) and where each picture goes (`pageantLayout`); `pageant.draw.ts` draws them. Written for this package; the idea is a broadcast's, and no
 // flag, crest or emblem is drawn or supplied here.
-import { safeColour, safeLogo } from "./colour.js";
+import { safeColour } from "./colour.js";
+import { renderedEmblem } from "./emblems-source.js";
+import { safeLogo } from "./logo.js";
 import { isNetSport } from "./court.js";
 /** The border band of a carpet, as a share of its shorter side: the least, the most and the usual. */
 export const PAGEANT_BORDER = { min: 0.02, max: 0.15, usual: 0.06 };
@@ -38,7 +40,7 @@ export function pageantOf(o) {
         return undefined;
     const p = given === true ? {} : typeof given === "string" ? { style: given } : typeof given === "object" ? given : {};
     const style = oneOf(p.style, ["carpet", "stage"]) ?? "carpet";
-    const href = safeLogo(p.emblem);
+    const href = safeLogo(p.emblem, { theme: o.theme === "light" || o.theme === "dark" ? o.theme : undefined });
     const asked = oneOf(p.score, ["auto", "centre", "strip"]) ?? "auto";
     // The emblem takes the middle, and a board is as wide as the middle: both send the score to the strip, unless the options say otherwise.
     const score = asked === "auto" && (href !== undefined || BOARDS(o.sport)) ? "strip" : asked;
@@ -75,7 +77,9 @@ export function ratioOf(team) {
         return clamp(team.logoRatio);
     const logo = typeof team.logo === "string" ? team.logo.trim() : "";
     let found;
-    if (/^(?:<\?xml|<svg)\b/i.test(logo))
+    if (renderedEmblem(logo) !== undefined)
+        found = 1;
+    else if (/^(?:<\?xml|<svg)\b/i.test(logo))
         found = svgRatio(logo);
     else if (/^data:image\/svg\+xml/i.test(logo)) {
         const comma = logo.indexOf(",");

package/dist/pointer-entry.d.ts

@@ -0,0 +1,2 @@
+export { clientPointToField, clientPointToFrames, fieldPointToClient } from "./pointer.ts";
+export type { ElementLike, FieldPoint, MatrixLike, PointerOptions, SvgLike } from "./pointer.ts";

package/dist/pointer-entry.js

@@ -0,0 +1,2 @@
+// A click on a drawing as a place on the field: the pointer in a provider's numbers with the zone, and the way back.
+export { clientPointToField, clientPointToFrames, fieldPointToClient } from "./pointer.js";

package/dist/pointer.d.ts

@@ -0,0 +1,113 @@
+import { type Attacking, type Frame } from "./frames.ts";
+import { type PlaceLike, type ZoneOptions } from "./rules.ts";
+import { type Unit } from "./units.ts";
+import type { Language } from "./types.ts";
+/** The six numbers of a matrix, as an SVG's `DOMMatrix` has them. */
+export interface MatrixLike {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+/** What the functions need of an element of the drawing: its attributes, and for the surface group its matrix to the page. */
+export interface ElementLike {
+    getAttribute(name: string): string | null;
+    getScreenCTM?(): MatrixLike | null;
+}
+/** What the functions need of the drawing's `<svg>`: to find the surface group in it. A real `SVGSVGElement` is one. */
+export interface SvgLike extends ElementLike {
+    querySelector(selectors: string): unknown;
+    closest?(selectors: string): unknown;
+}
+/** What the pointer functions take besides the position. */
+export interface PointerOptions {
+    /** The frame the answer is written in: the name of a frame of the drawing's sport (`nhl-api`, `opta`, `statsbomb`, `mlbam`), a frame, or `"surface"` for the drawing's own numbers (feet, or `units`). `"surface"` when missing. */
+    provider?: Frame | string;
+    /** The unit of the `"surface"` numbers: feet when missing. */
+    units?: Unit;
+    /** The end the provider's team attacks, as in `toSurface`: `left` says the provider's numbers are of a team that attacks the left end of the surface as it is drawn wide. */
+    attacking?: Attacking;
+    /** The language of the zone names. */
+    language?: Language;
+    /** The size of the surface when the frame is a variable one, in place of the drawing's own. */
+    size?: ZoneOptions["size"];
+}
+/** Where the pointer is on the field. */
+export interface FieldPoint {
+    /** The place in the provider's frame (feet in the drawing's wide frame for `"surface"`). */
+    x: number;
+    y: number;
+    /** The frame's name. */
+    provider: string;
+    /** The place on the surface: feet in the drawing's wide frame (x along the surface from the left, y across it from the top). */
+    surface: {
+        x: number;
+        y: number;
+    };
+    /** True when the pointer is on the surface, or on its edge: not on the apron, the stands or the page round it. */
+    inBounds: boolean;
+    /** The zone and the finer area, by id (`zoneAt` in the zones entry): `undefined` off the surface. */
+    zone: string | undefined;
+    subzone: string | undefined;
+    /** Every id that holds, with its name. */
+    zones: string[];
+    names: Record<string, string>;
+}
+/**
+ * Where a page position is on the field of a drawing, in a provider's numbers, with the zone the rules put it in. `svg` is the drawing's `<svg>` element, and
+ * the position is a pointer event's `clientX` and `clientY`. It holds whatever the drawing is: wide or tall, any size or padding, a range, a cropped viewBox. It answers `null` for
+ * a drawing with no surface to ask (a badge, a special game, or the 3D view, whose floor is laid in CSS 3D). `provider` names a frame of the drawing's sport (`nhl-api`,
+ * `opta`, `statsbomb`, `mlbam`...) and a frame of another sport is an error; without one, the numbers are the surface's own in feet.
+ * @example
+ * ```ts no-run
+ * import { clientPointToField } from "@johnmorrisdotca/kyogijo-stadiums/pointer";
+ * const svg = document.querySelector<SVGSVGElement>("svg.kyogijo")!;
+ * svg.addEventListener("click", (event) => {
+ *   const at = clientPointToField(svg, event.clientX, event.clientY, { provider: "nhl-api" });
+ *   if (at !== null) console.log(at.x, at.y, at.zone, at.inBounds);
+ * });
+ * ```
+ */
+export declare function clientPointToField(svg: SvgLike | Element, clientX: number, clientY: number, options?: PointerOptions): FieldPoint | null;
+/**
+ * The page position of a place on the field: the undoing of `clientPointToField`. The place is in a provider's numbers (or the surface's own, in feet or `units`); the answer is
+ * `clientX` and `clientY`, to put a marker over the drawing with. `null` for a drawing with no surface to ask.
+ * @example
+ * ```ts no-run
+ * import { fieldPointToClient } from "@johnmorrisdotca/kyogijo-stadiums/pointer";
+ * const svg = document.querySelector<SVGSVGElement>("svg.kyogijo")!;
+ * const at = fieldPointToClient(svg, [69, 22], { provider: "nhl-api" });
+ * declare const marker: HTMLElement;
+ * if (at !== null) marker.style.transform = `translate(${at.x}px, ${at.y}px)`;
+ * ```
+ */
+export declare function fieldPointToClient(svg: SvgLike | Element, point: PlaceLike, options?: PointerOptions): {
+    x: number;
+    y: number;
+} | null;
+/**
+ * The same page position in each of several frames at once, with the zone: what a readout that shows a place in every provider asks (the demo's). `providers` defaults to every
+ * frame of the drawing's sport.
+ * @example
+ * ```ts no-run
+ * import { clientPointToFrames } from "@johnmorrisdotca/kyogijo-stadiums/pointer";
+ * const svg = document.querySelector<SVGSVGElement>("svg.kyogijo")!;
+ * svg.addEventListener("pointermove", (event) => {
+ *   const all = clientPointToFrames(svg, event.clientX, event.clientY);
+ *   console.log(all?.points.map((p) => `${p.provider}: ${p.x}, ${p.y}`), all?.zone);
+ * });
+ * ```
+ */
+export declare function clientPointToFrames(svg: SvgLike | Element, clientX: number, clientY: number, options?: Omit<PointerOptions, "provider"> & {
+    providers?: readonly (Frame | string)[];
+}): (Omit<FieldPoint, "x" | "y" | "provider"> & {
+    points: {
+        provider: string;
+        title: string;
+        unit: string;
+        x: number;
+        y: number;
+    }[];
+}) | null;

package/dist/pointer.js

@@ -0,0 +1,151 @@
+// A click on a drawing, as a place on the field. `clientPointToField(svg, clientX, clientY, { provider })` asks the drawing where the pointer is: the browser's own
+// matrix for the surface group (`getScreenCTM`) carries a page coordinate back through the CSS size, the viewBox and its padding, the preserved aspect ratio, a
+// tall drawing's quarter turn and a range's crop, to the surface's wide frame in feet; the frame of the provider (frames.ts) turns that into the provider's numbers,
+// and the rules engine (rules.ts) names the zone. `fieldPointToClient` is the way back. A drawing writes the box of its surface and the options that decide its rules
+// on its surface group (field.data.ts), so the answer needs nothing but the SVG.
+import { FRAMES, frameByName, fromSurface, toSurface } from "./frames.js";
+import { frameSizeOf } from "./outline.js";
+import { readField } from "./field.data.js";
+import { zoneAtSurface } from "./rules.js";
+import { FEET_PER, isUnit } from "./units.js";
+const invert = (m) => {
+    const det = m.a * m.d - m.b * m.c;
+    if (!Number.isFinite(det) || Math.abs(det) < 1e-12)
+        return undefined;
+    return { a: m.d / det, b: -m.b / det, c: -m.c / det, d: m.a / det, e: (m.c * m.f - m.d * m.e) / det, f: (m.b * m.e - m.a * m.f) / det };
+};
+const apply = (m, x, y) => [m.a * x + m.c * y + m.e, m.b * x + m.d * y + m.f];
+/** The surface group of a drawing and what it says of its surface, or `undefined` for one the question does not apply to: a badge, a special game, a 3D view. */
+function find(svg) {
+    const root = svg;
+    // The 3D view lays the floor in CSS 3D, where the browser's matrix for an SVG element is the flat drawing's: it would answer for a place that is not under the pointer.
+    if (typeof root.closest === "function" && root.closest(".ky-turn") !== null)
+        return undefined;
+    const group = root.querySelector(".ky-surface-group");
+    if (group === null || typeof group.getAttribute !== "function")
+        return undefined;
+    const field = readField((name) => group.getAttribute(name));
+    const sport = root.getAttribute("data-sport");
+    if (field === undefined || sport === null)
+        return undefined;
+    return { sport: sport, league: root.getAttribute("data-league") ?? undefined, box: field.box, rules: field.rules, group };
+}
+const unitOf = (units) => (units !== undefined && isUnit(units) ? units : "ft");
+function frameOf(found, provider) {
+    if (provider === undefined || provider === "surface")
+        return undefined;
+    const frame = typeof provider === "string" ? frameByName(provider) : provider;
+    if (frame.sport !== found.sport)
+        throw new RangeError(`The frame "${frame.name}" is for ${frame.sport}, and this drawing is of ${found.sport}: use one of ${Object.values(FRAMES).filter((f) => f.sport === found.sport).map((f) => f.name).join(", ") || "surface"}`);
+    return frame;
+}
+const sizeOf = (found, options) => {
+    if (options.size !== undefined)
+        return options.size;
+    return frameSizeOf({ sport: found.sport, league: found.league }, { w: found.box.w, h: found.box.h });
+};
+/** The place on the surface, in feet, under a page position; `undefined` where the drawing has no matrix to ask (not in the page, or hidden). */
+function toLocal(found, clientX, clientY) {
+    const matrix = found.group.getScreenCTM?.();
+    if (matrix === null || matrix === undefined)
+        return undefined;
+    const back = invert(matrix);
+    return back === undefined ? undefined : apply(back, clientX, clientY);
+}
+/**
+ * Where a page position is on the field of a drawing, in a provider's numbers, with the zone the rules put it in. `svg` is the drawing's `<svg>` element, and
+ * the position is a pointer event's `clientX` and `clientY`. It holds whatever the drawing is: wide or tall, any size or padding, a range, a cropped viewBox. It answers `null` for
+ * a drawing with no surface to ask (a badge, a special game, or the 3D view, whose floor is laid in CSS 3D). `provider` names a frame of the drawing's sport (`nhl-api`,
+ * `opta`, `statsbomb`, `mlbam`...) and a frame of another sport is an error; without one, the numbers are the surface's own in feet.
+ * @example
+ * ```ts no-run
+ * import { clientPointToField } from "@johnmorrisdotca/kyogijo-stadiums/pointer";
+ * const svg = document.querySelector<SVGSVGElement>("svg.kyogijo")!;
+ * svg.addEventListener("click", (event) => {
+ *   const at = clientPointToField(svg, event.clientX, event.clientY, { provider: "nhl-api" });
+ *   if (at !== null) console.log(at.x, at.y, at.zone, at.inBounds);
+ * });
+ * ```
+ */
+export function clientPointToField(svg, clientX, clientY, options = {}) {
+    if (!Number.isFinite(clientX) || !Number.isFinite(clientY))
+        throw new TypeError("clientX and clientY are numbers");
+    const found = find(svg);
+    if (found === undefined)
+        return null;
+    const local = toLocal(found, clientX, clientY);
+    if (local === undefined)
+        return null;
+    const frame = frameOf(found, options.provider);
+    const unit = unitOf(options.units);
+    let x;
+    let y;
+    if (frame === undefined)
+        [x, y] = [local[0] / FEET_PER[unit], local[1] / FEET_PER[unit]];
+    else
+        [x, y] = fromSurface([local], { to: frame, size: sizeOf(found, options), attacking: options.attacking })[0];
+    const rules = { ...found.rules, league: found.league ?? found.rules.league, language: options.language };
+    const zone = zoneAtSurface(found.sport, local, rules);
+    return { x, y, provider: frame?.name ?? "surface", surface: { x: local[0], y: local[1] }, inBounds: zone.inBounds, zone: zone.zone, subzone: zone.subzone, zones: zone.zones, names: zone.names };
+}
+/**
+ * The page position of a place on the field: the undoing of `clientPointToField`. The place is in a provider's numbers (or the surface's own, in feet or `units`); the answer is
+ * `clientX` and `clientY`, to put a marker over the drawing with. `null` for a drawing with no surface to ask.
+ * @example
+ * ```ts no-run
+ * import { fieldPointToClient } from "@johnmorrisdotca/kyogijo-stadiums/pointer";
+ * const svg = document.querySelector<SVGSVGElement>("svg.kyogijo")!;
+ * const at = fieldPointToClient(svg, [69, 22], { provider: "nhl-api" });
+ * declare const marker: HTMLElement;
+ * if (at !== null) marker.style.transform = `translate(${at.x}px, ${at.y}px)`;
+ * ```
+ */
+export function fieldPointToClient(svg, point, options = {}) {
+    const found = find(svg);
+    if (found === undefined)
+        return null;
+    const matrix = found.group.getScreenCTM?.();
+    if (matrix === null || matrix === undefined)
+        return null;
+    const xy = Array.isArray(point) ? point : [point.x, point.y];
+    const [px, py] = xy;
+    if (typeof px !== "number" || typeof py !== "number" || !Number.isFinite(px) || !Number.isFinite(py))
+        throw new TypeError("a point is [x, y] or { x, y }, two finite numbers");
+    const frame = frameOf(found, options.provider);
+    const unit = unitOf(options.units);
+    const local = frame === undefined ? [px * FEET_PER[unit], py * FEET_PER[unit]] : toSurface([[px, py]], { from: frame, size: sizeOf(found, options), attacking: options.attacking })[0];
+    const [x, y] = apply(matrix, local[0], local[1]);
+    return { x, y };
+}
+/**
+ * The same page position in each of several frames at once, with the zone: what a readout that shows a place in every provider asks (the demo's). `providers` defaults to every
+ * frame of the drawing's sport.
+ * @example
+ * ```ts no-run
+ * import { clientPointToFrames } from "@johnmorrisdotca/kyogijo-stadiums/pointer";
+ * const svg = document.querySelector<SVGSVGElement>("svg.kyogijo")!;
+ * svg.addEventListener("pointermove", (event) => {
+ *   const all = clientPointToFrames(svg, event.clientX, event.clientY);
+ *   console.log(all?.points.map((p) => `${p.provider}: ${p.x}, ${p.y}`), all?.zone);
+ * });
+ * ```
+ */
+export function clientPointToFrames(svg, clientX, clientY, options = {}) {
+    const found = find(svg);
+    if (found === undefined)
+        return null;
+    const first = clientPointToField(svg, clientX, clientY, { ...options, provider: "surface" });
+    if (first === null)
+        return null;
+    const list = options.providers ?? Object.values(FRAMES).filter((frame) => frame.sport === found.sport);
+    const points = list.map((entry) => {
+        const frame = typeof entry === "string" ? frameByName(entry) : entry;
+        const [x, y] = fromSurface([[first.surface.x, first.surface.y]], { to: frame, size: sizeOf(found, options), attacking: options.attacking })[0];
+        return { provider: frame.name, title: frame.title, unit: frame.unit, x, y };
+    });
+    const { x: _x, y: _y, provider: _provider, ...rest } = first;
+    void _x;
+    void _y;
+    void _provider;
+    return { ...rest, points };
+}