@johnmorrisdotca/dougu-sports 0.0.1 → 0.2.0

package/dist/emblems/emblem.registry.js

@@ -1,7 +1,165 @@
 import { AWARD_MEDAL } from "./award/medal.js";
-import { BALL_SOCCER } from "./ball/soccer.js";
-/** Every emblem, by id. */
-export const EMBLEM_TABLE = {
+import { AWARD_BADGE } from "./award/badge.js";
+import { AWARD_CROWN } from "./award/crown.js";
+import { AWARD_STAR } from "./award/star.js";
+import { AWARD_SHIELD } from "./award/shield.js";
+import { TROPHY_CUP } from "./trophy/cup.js";
+import { TROPHY_LIDDED_CUP } from "./trophy/lidded-cup.js";
+import { TROPHY_BOWL } from "./trophy/bowl.js";
+import { TROPHY_SALVER } from "./trophy/salver.js";
+import { TROPHY_GLOBE } from "./trophy/globe.js";
+import { TROPHY_HOCKEY_CUP } from "./trophy/hockey-cup.js";
+import { TROPHY_BASKETBALL } from "./trophy/basketball.js";
+import { TROPHY_BASEBALL } from "./trophy/baseball.js";
+import { TROPHY_FOOTBALL } from "./trophy/football.js";
+import { TROPHY_CANADIAN_BOWL } from "./trophy/canadian-bowl.js";
+import { TROPHY_SOCCER_BALL } from "./trophy/soccer-ball.js";
+import { TROPHY_SOCCER_GLOBE } from "./trophy/soccer-globe.js";
+import { TROPHY_TENNIS_PLATE } from "./trophy/tennis-plate.js";
+import { TROPHY_TENNIS_CUP } from "./trophy/tennis-cup.js";
+import { TROPHY_CRICKET_URN } from "./trophy/cricket-urn.js";
+import { TROPHY_RUGBY_CUP } from "./trophy/rugby-cup.js";
+import { TROPHY_PLAQUE } from "./trophy/plaque.js";
+import { TROPHY_BELT } from "./trophy/belt.js";
+import { TROPHY_LAUREL } from "./trophy/laurel.js";
+import { TROPHY_ROSETTE } from "./trophy/rosette.js";
+import { TROPHY_SUMO_CUP } from "./trophy/sumo-cup.js";
+import { TROPHY_CHAMPIONSHIP_BANNER } from "./trophy/championship-banner.js";
+import { TROPHY_RING } from "./trophy/ring.js";
+import { TROPHY_BANNER } from "./trophy/banner.js";
+import { MEDAL_GOLD } from "./medal/gold.js";
+import { MEDAL_SILVER } from "./medal/silver.js";
+import { MEDAL_BRONZE } from "./medal/bronze.js";
+import { MEDAL_PLACE_1 } from "./medal/place-1.js";
+import { MEDAL_PLACE_2 } from "./medal/place-2.js";
+import { MEDAL_PLACE_3 } from "./medal/place-3.js";
+import { CREST_SHIELD } from "./crest/shield.js";
+import { CREST_ROUNDEL } from "./crest/roundel.js";
+import { CREST_DIAMOND } from "./crest/diamond.js";
+import { CREST_PENNANT } from "./crest/pennant.js";
+import { PENNANT_CHAMPIONSHIP } from "./pennant/championship.js";
+import { BALLS } from "./ball/ball.index.js";
+import { GEARS } from "./gear/gear.index.js";
+import { SPORT_NFL } from "./sport/nfl.js";
+import { SPORT_CFL } from "./sport/cfl.js";
+import { SPORT_IFAF } from "./sport/ifaf.js";
+import { SPORT_NHL } from "./sport/nhl.js";
+import { SPORT_NBA } from "./sport/nba.js";
+import { SPORT_MLB } from "./sport/mlb.js";
+import { SPORT_SOCCER } from "./sport/soccer.js";
+import { SPORT_CURLING } from "./sport/curling.js";
+import { SPORT_TENNIS } from "./sport/tennis.js";
+import { SPORT_VOLLEYBALL } from "./sport/volleyball.js";
+import { SPORT_BADMINTON } from "./sport/badminton.js";
+import { SPORT_PICKLEBALL } from "./sport/pickleball.js";
+import { SPORT_TABLETENNIS } from "./sport/tabletennis.js";
+import { SPORT_PADEL } from "./sport/padel.js";
+import { SPORT_SQUASH } from "./sport/squash.js";
+import { SPORT_RACQUETBALL } from "./sport/racquetball.js";
+import { SPORT_SEPAKTAKRAW } from "./sport/sepaktakraw.js";
+import { SPORT_TEQBALL } from "./sport/teqball.js";
+import { SPORT_ROUNDNET } from "./sport/roundnet.js";
+import { SPORT_NETBALL } from "./sport/netball.js";
+import { SPORT_SWIMMING } from "./sport/swimming.js";
+import { SPORT_WATERPOLO } from "./sport/waterpolo.js";
+import { SPORT_DIVING } from "./sport/diving.js";
+import { SPORT_ARTISTICSWIMMING } from "./sport/artisticswimming.js";
+import { SPORT_LACROSSE } from "./sport/lacrosse.js";
+import { SPORT_RUGBY } from "./sport/rugby.js";
+import { SPORT_AFL } from "./sport/afl.js";
+import { SPORT_GAELIC } from "./sport/gaelic.js";
+import { SPORT_CRICKET } from "./sport/cricket.js";
+import { SPORT_FIELDHOCKEY } from "./sport/fieldhockey.js";
+import { SPORT_HANDBALL } from "./sport/handball.js";
+import { SPORT_ATHLETICS } from "./sport/athletics.js";
+import { SPORT_SKATING } from "./sport/skating.js";
+import { SPORT_SUMO } from "./sport/sumo.js";
+import { SPORT_KENDO } from "./sport/kendo.js";
+import { SPORT_JUDO } from "./sport/judo.js";
+import { SPORT_KYUDO } from "./sport/kyudo.js";
+import { SPORT_KARATE } from "./sport/karate.js";
+/** The balls and the gear are drawn by families, each family in a module of its own, and listed in order by their own indexes. */
+const PIECES = Object.fromEntries([...BALLS, ...GEARS].map((piece) => [piece.id, piece]));
+/** The emblems drawn one to a module: every id but the balls and the gear. A missing or extra entry is a type error. */
+const OWN = {
     "award:medal": AWARD_MEDAL,
-    "ball:soccer": BALL_SOCCER,
+    "award:badge": AWARD_BADGE,
+    "award:crown": AWARD_CROWN,
+    "award:star": AWARD_STAR,
+    "award:shield": AWARD_SHIELD,
+    "trophy:cup": TROPHY_CUP,
+    "trophy:lidded-cup": TROPHY_LIDDED_CUP,
+    "trophy:bowl": TROPHY_BOWL,
+    "trophy:salver": TROPHY_SALVER,
+    "trophy:globe": TROPHY_GLOBE,
+    "trophy:hockey-cup": TROPHY_HOCKEY_CUP,
+    "trophy:basketball": TROPHY_BASKETBALL,
+    "trophy:baseball": TROPHY_BASEBALL,
+    "trophy:football": TROPHY_FOOTBALL,
+    "trophy:canadian-bowl": TROPHY_CANADIAN_BOWL,
+    "trophy:soccer-ball": TROPHY_SOCCER_BALL,
+    "trophy:soccer-globe": TROPHY_SOCCER_GLOBE,
+    "trophy:tennis-plate": TROPHY_TENNIS_PLATE,
+    "trophy:tennis-cup": TROPHY_TENNIS_CUP,
+    "trophy:cricket-urn": TROPHY_CRICKET_URN,
+    "trophy:rugby-cup": TROPHY_RUGBY_CUP,
+    "trophy:plaque": TROPHY_PLAQUE,
+    "trophy:belt": TROPHY_BELT,
+    "trophy:laurel": TROPHY_LAUREL,
+    "trophy:rosette": TROPHY_ROSETTE,
+    "trophy:sumo-cup": TROPHY_SUMO_CUP,
+    "trophy:championship-banner": TROPHY_CHAMPIONSHIP_BANNER,
+    "trophy:ring": TROPHY_RING,
+    "trophy:banner": TROPHY_BANNER,
+    "medal:gold": MEDAL_GOLD,
+    "medal:silver": MEDAL_SILVER,
+    "medal:bronze": MEDAL_BRONZE,
+    "medal:place-1": MEDAL_PLACE_1,
+    "medal:place-2": MEDAL_PLACE_2,
+    "medal:place-3": MEDAL_PLACE_3,
+    "crest:shield": CREST_SHIELD,
+    "crest:roundel": CREST_ROUNDEL,
+    "crest:diamond": CREST_DIAMOND,
+    "crest:pennant": CREST_PENNANT,
+    "pennant:championship": PENNANT_CHAMPIONSHIP,
+    "sport:nfl": SPORT_NFL,
+    "sport:cfl": SPORT_CFL,
+    "sport:ifaf": SPORT_IFAF,
+    "sport:nhl": SPORT_NHL,
+    "sport:nba": SPORT_NBA,
+    "sport:mlb": SPORT_MLB,
+    "sport:soccer": SPORT_SOCCER,
+    "sport:curling": SPORT_CURLING,
+    "sport:tennis": SPORT_TENNIS,
+    "sport:volleyball": SPORT_VOLLEYBALL,
+    "sport:badminton": SPORT_BADMINTON,
+    "sport:pickleball": SPORT_PICKLEBALL,
+    "sport:tabletennis": SPORT_TABLETENNIS,
+    "sport:padel": SPORT_PADEL,
+    "sport:squash": SPORT_SQUASH,
+    "sport:racquetball": SPORT_RACQUETBALL,
+    "sport:sepaktakraw": SPORT_SEPAKTAKRAW,
+    "sport:teqball": SPORT_TEQBALL,
+    "sport:roundnet": SPORT_ROUNDNET,
+    "sport:netball": SPORT_NETBALL,
+    "sport:swimming": SPORT_SWIMMING,
+    "sport:waterpolo": SPORT_WATERPOLO,
+    "sport:diving": SPORT_DIVING,
+    "sport:artisticswimming": SPORT_ARTISTICSWIMMING,
+    "sport:lacrosse": SPORT_LACROSSE,
+    "sport:rugby": SPORT_RUGBY,
+    "sport:afl": SPORT_AFL,
+    "sport:gaelic": SPORT_GAELIC,
+    "sport:cricket": SPORT_CRICKET,
+    "sport:fieldhockey": SPORT_FIELDHOCKEY,
+    "sport:handball": SPORT_HANDBALL,
+    "sport:athletics": SPORT_ATHLETICS,
+    "sport:skating": SPORT_SKATING,
+    "sport:sumo": SPORT_SUMO,
+    "sport:kendo": SPORT_KENDO,
+    "sport:judo": SPORT_JUDO,
+    "sport:kyudo": SPORT_KYUDO,
+    "sport:karate": SPORT_KARATE,
 };
+/** Every emblem, by id. */
+export const EMBLEM_TABLE = { ...OWN, ...PIECES };

package/dist/emblems/emblem.shapes.d.ts

@@ -1,21 +1,57 @@
 import { type Emblem, type EmblemSource, type Metal } from "./emblem.core.ts";
-/** A path and the part of the paint it takes. `detail` is the light colour, with a thin outline. */
-export interface Shape {
-    d: string;
-    part: "main" | "ribbon" | "detail";
-}
-/** What a flat emblem is drawn from. */
+import { type Plate } from "./emblem.engrave.ts";
+/**
+ * What a shape is for. `m` the main metal, shaded across a sheet; `o` the main metal on a round, lit from a corner; `e` a bevelled ring (a line the width of the third item, bright on one side and dark on
+ * the other); `s` its shade; `l` a glint (a fill with no outline, left out of the line style); `r` the second colour (a ribbon, a band: the `accent` option); `f` a fixed colour (the third item); `p` white
+ * ink at a tenth; `k` ink; `n` an outline with no fill; `t` a thin line (a detail); `b` a bold line in ink (a limb, a shaft); `d` a bold line in a fixed dark colour (a numeral on a medal).
+ */
+export type Role = DropRole | "m" | "o" | "e" | "s" | "l" | "r" | "f" | "p" | "k" | "n" | "t" | "b" | "d";
+/** A role in capitals is the same shape, left out of a face that is engraved (the star of a medal, the numeral of a place badge, the lines of a plaque). */
+type DropRole = "M" | "D" | "T" | "E";
+/** A path, its role, and for `f` its colour and for `e` its width. */
+export type Shape = readonly [Role, string, string?];
+/** A flat object or an icon. */
 export interface FlatModel {
+    /** The view box; "0 0 64 64" unless the drawing came from elsewhere. */
+    box?: string;
     metal: Metal;
     front: readonly Shape[];
-    back: readonly Shape[];
+    /** The back face, for an object that flips; the front's `m`, `o` and `s` shapes with no detail when missing. */
+    back?: readonly Shape[];
+    /** The main colour of a `flat` object when the caller gives no tint (a crest's blue). */
+    color?: string;
+    /** The second colour when the caller gives none: a ribbon, a band, a board. */
+    ribbon?: string;
+    /** The thickness of the rim in the box's units, for an object that flips. */
+    rim?: number;
+    /** The outline is the page's ink (a pictogram) and not a darker tone of the metal. */
+    ink?: boolean;
+    /** Shapes drawn when there are no initials, for a crest (and only then). */
+    blank?: readonly Shape[];
+    /** Where an engraving goes: the plate of the front (and of the year when a plate of its own holds it) and of the back, and the rank the front takes when it is engraved and none is given (a place badge's own place). */
+    engrave?: {
+        front: Plate;
+        year?: Plate;
+        back?: Plate;
+        rank?: string;
+    };
+    /** Where a crest's letters go: the centre's x and y, and the size for one letter. */
+    letters?: readonly [x: number, y: number, size: number];
 }
+/** A flat object (a medal, a crest, a plaque): drawn as it is by `svg`; turned about its vertical axis it flips like a coin and shows its back, with its rim for a moment edge on. */
+export declare function defineFlat(id: string, en: string, ja: string, source: EmblemSource, model: FlatModel): Emblem<FlatModel>;
+/** An icon: one drawing from shapes. Turned, it is a thin cut-out: it squeezes like a coin, shows its front mirrored and a little darker past a quarter turn, and has a dark rim. */
+export declare function defineIcon(id: string, en: string, ja: string, source: EmblemSource, model: FlatModel): Emblem<FlatModel>;
 /** A circle as a path, so every shape is one kind of thing. */
 export declare const circlePath: (cx: number, cy: number, r: number) => string;
+/** An ellipse as a path. */
+export declare const ellipsePath: (cx: number, cy: number, rx: number, ry: number) => string;
 /** A star as a path, one point up. */
 export declare function starPath(cx: number, cy: number, outer: number, inner: number, points?: number): string;
-/**
- * A flat emblem. Turning it about its vertical axis squeezes it by the cosine of the turn, and past a quarter turn shows the back, as a coin turns; a tilt squeezes it from the top.
- * The result is marked `@__PURE__` by the caller, so a bundler drops it when nothing uses it.
- */
-export declare function defineFlat(id: string, en: string, ja: string, source: EmblemSource, model: FlatModel): Emblem<FlatModel>;
+/** A regular polygon of `n` sides with a corner at `deg` degrees (0 is straight up), as a path. */
+export declare function polygon(cx: number, cy: number, r: number, n: number, deg?: number): string;
+/** An ellipse turned `deg` degrees about its centre, as a path. */
+export declare function tiltedEllipse(cx: number, cy: number, rx: number, ry: number, deg: number): string;
+/** A bar with square ends from one point to another, `w` wide, as a path. */
+export declare function bar(x1: number, y1: number, x2: number, y2: number, w: number): string;
+export {};

package/dist/emblems/emblem.shapes.js

@@ -1,7 +1,122 @@
-// A flat object: a front and a back drawn from paths, which the turning view flips like a coin. Imports only the core.
-import { degrees, mainOf, n2, paintFor, resolve, wrap } from "./emblem.core.js";
+// A flat object or an icon: a list of shapes, each with a role (the metal, its shade, a glint, a second colour, a fixed colour, ink, a line), drawn with gradients in the metal style, in flat fills in the
+// `color` style and as one outline in the `line` style. A flat object (a medal, a crest, a plaque) also has a back face and a rim, so the turning view flips it like a coin; an icon (a sport's pictogram)
+// is drawn as it is. Imports only the core.
+import { bevelGradient, defsOf, degrees, escape, hexOf, labelled, mainOf, mix, n2, onColour, orbGradient, readColour, resolve, sheetGradient, wrap, } from "./emblem.core.js";
+import { engravingOf, linesOf, plateMarkup } from "./emblem.engrave.js";
+import { flipSvg } from "./emblem.flip.js";
+const use = (ctx, g) => {
+    ctx.used.push(g);
+    return g.fill;
+};
+/** The attributes of one shape. In the metal style the fills are gradients, in `color` flat colours. */
+function attrs(shape, ctx) {
+    const metal = ctx.style === "metal";
+    const flatMain = hexOf(ctx.main);
+    switch (shape[0]) {
+        case "m": return `fill="${metal ? use(ctx, ctx.sheet) : flatMain}"`;
+        case "o": return `fill="${metal ? use(ctx, ctx.orb) : flatMain}"`;
+        case "e": return `fill="none" stroke="${metal ? use(ctx, ctx.bevel) : mix(ctx.main, 0.4)}" stroke-width="${shape[2] ?? "2"}"`;
+        case "s": return `fill="${mix(ctx.main, -0.28)}"`;
+        case "l": return `fill="${mix(ctx.main, 0.55)}" fill-opacity="${metal ? ".55" : "1"}" stroke="none"`;
+        case "r": return `fill="${ctx.ribbon}"`;
+        case "f": return `fill="${shape[2] ?? "#ffffff"}"`;
+        case "p": return 'fill="currentColor" fill-opacity=".1"';
+        case "k": return 'fill="currentColor"';
+        case "t": return 'fill="none" stroke-width="1.5"';
+        case "b": return 'fill="none" stroke-width="4.4"';
+        case "d": return 'fill="none" stroke="#20262d" stroke-width="4.2"';
+        default: return 'fill="none"';
+    }
+}
+/** The shapes as markup: consecutive shapes of one role (and colour) are one path. In the line style everything is one outline (the details a little thinner), and the glints are left out. */
+function shapesMarkup(shapes, ctx) {
+    if (ctx.style === "line") {
+        const join = (roles) => shapes.filter((s) => roles.includes(s[0])).map((s) => s[1]).join("");
+        const main = join("mosrfpkn");
+        const thin = join("te");
+        const bold = join("bd");
+        return (main === "" ? "" : `<path d="${main}"/>`) + (thin === "" ? "" : `<path d="${thin}" stroke-width="2"/>`) + (bold === "" ? "" : `<path d="${bold}"/>`);
+    }
+    let out = "";
+    let i = 0;
+    while (i < shapes.length) {
+        const [role, , extra] = shapes[i];
+        let d = "";
+        while (i < shapes.length && shapes[i][0] === role && shapes[i][2] === extra)
+            d += shapes[i++][1];
+        out += `<path d="${d}" ${attrs([role, d, extra], ctx)}/>`;
+    }
+    return out;
+}
+/** The letters of a crest. */
+function letters(model, ctx) {
+    if (model.letters === undefined || ctx.initials === "")
+        return "";
+    const [x, y, size] = model.letters;
+    const n = [...ctx.initials].length;
+    const fs = n === 1 ? size : n === 2 ? size * 0.82 : size * 0.64;
+    return `<text x="${x}" y="${n2(y + fs * 0.36)}" font-size="${n2(fs)}" font-weight="800" font-family="system-ui,sans-serif" text-anchor="middle" fill="${ctx.style === "line" ? "currentColor" : onColour(ctx.main)}" stroke="none">${escape(ctx.initials)}</text>`;
+}
+/** The lines cut into the face on `side`, as markup, or an empty string when there is nothing to cut or nowhere to cut it. */
+function engraved(model, ctx, side) {
+    const e = ctx.engrave;
+    const plates = model.engrave;
+    if (plates === undefined)
+        return "";
+    if (side === "back")
+        return plates.back === undefined || e.back === undefined ? "" : plateMarkup(linesOf({ free: e.back }).main, plates.back, ctx.main, ctx.style);
+    if (e.free === undefined && e.label === undefined && e.year === undefined && e.rank === undefined)
+        return "";
+    const { main, year } = linesOf(e, { rank: plates.rank, yearApart: plates.year !== undefined });
+    return plateMarkup(main, plates.front, ctx.main, ctx.style) + (year === undefined || plates.year === undefined ? "" : plateMarkup([[{ text: year, weight: 1 }]], plates.year, ctx.main, ctx.style));
+}
+/** One face of an object as markup: its shapes (the ones an engraving replaces left out when there is one), then the engraving, and a crest's letters. */
+function face(model, shapes, ctx, text = "") {
+    const shown = shapes.filter((x) => text === "" || x[0] === x[0].toLowerCase()).map((x) => (x[0] === x[0].toLowerCase() ? x : [x[0].toLowerCase(), x[1], x[2]]));
+    const blank = ctx.initials === "" && model.blank !== undefined ? shapesMarkup(model.blank, ctx) : "";
+    return shapesMarkup(shown, ctx) + blank + letters(model, ctx) + text;
+}
+function context(model, r) {
+    const main = r.tint ?? (model.color === undefined ? mainOf(model.metal, undefined) : readColour(model.color));
+    return { main, style: r.style, sheet: sheetGradient(main), orb: orbGradient(main), bevel: bevelGradient(main), ribbon: r.accent ?? model.ribbon ?? "#c0392b", initials: r.initials, engrave: {}, used: [] };
+}
+function document(title, model, r, ctx, body) {
+    return wrap({ title, size: r.size, style: r.style, theme: r.theme, defs: r.style === "metal" ? defsOf(ctx.used) : "", body, box: model.box, edge: model.ink === true ? undefined : mix(ctx.main, -0.5), width: model.ink === true ? undefined : 0.8 });
+}
+/** A flat object (a medal, a crest, a plaque): drawn as it is by `svg`; turned about its vertical axis it flips like a coin and shows its back, with its rim for a moment edge on. */
+export function defineFlat(id, en, ja, source, model) {
+    const draw = (o, yaw, pitch) => {
+        const r = resolve(o);
+        const ctx = context(model, r);
+        ctx.engrave = engravingOf(o);
+        if (yaw === 0 && pitch === 0)
+            return document(en, model, r, ctx, face(model, model.front, ctx, engraved(model, ctx, "front")));
+        const across = Math.cos((yaw * Math.PI) / 180);
+        const tilt = Math.cos((pitch * Math.PI) / 180);
+        const shown = across >= 0 ? model.front : (model.back ?? model.front.filter((x) => x[0] === "m" || x[0] === "o" || x[0] === "s"));
+        const sx = Math.max(Math.abs(across), 0.02);
+        const sy = Math.max(Math.abs(tilt), 0.02);
+        const rim = (model.rim ?? 0) * Math.sin((yaw * Math.PI) / 180);
+        const [x0, y0, w, h] = (model.box ?? "0 0 64 64").split(" ").map(Number);
+        const thick = rim === 0 ? "" : `<g transform="translate(${n2(rim)} 0)">${shapesMarkup(model.front.filter((x) => x[0] === "m" || x[0] === "o").map((x) => ["s", x[1]]), ctx)}</g>`;
+        return document(en, model, r, ctx, `<g transform="translate(${n2(x0 + w / 2)} ${n2(y0 + h / 2)}) scale(${n2(sx)} ${n2(sy)}) translate(${n2(-x0 - w / 2)} ${n2(-y0 - h / 2)})">${thick}${face(model, shown, ctx, engraved(model, ctx, across >= 0 ? "front" : "back"))}</g>`);
+    };
+    return { id, en, ja, source, kind: "flat", model, svg: labelled(en, ja, (o) => draw(o, 0, 0)), frame: labelled(en, ja, (o) => draw(o, degrees(o?.yaw), degrees(o?.pitch))) };
+}
+/** An icon: one drawing from shapes. Turned, it is a thin cut-out: it squeezes like a coin, shows its front mirrored and a little darker past a quarter turn, and has a dark rim. */
+export function defineIcon(id, en, ja, source, model) {
+    const svg = labelled(en, ja, (o) => {
+        const r = resolve(o);
+        const ctx = context(model, r);
+        return document(en, model, r, ctx, face(model, model.front, ctx));
+    });
+    const frame = (o) => flipSvg(svg(o), { yaw: degrees(o?.yaw), pitch: degrees(o?.pitch), line: o?.style === "line", thick: 0.03 });
+    return { id, en, ja, source, kind: "icon", model, svg, frame: labelled(en, ja, frame) };
+}
 /** A circle as a path, so every shape is one kind of thing. */
 export const circlePath = (cx, cy, r) => `M${n2(cx - r)} ${n2(cy)}a${n2(r)} ${n2(r)} 0 1 0 ${n2(2 * r)} 0a${n2(r)} ${n2(r)} 0 1 0 ${n2(-2 * r)} 0Z`;
+/** An ellipse as a path. */
+export const ellipsePath = (cx, cy, rx, ry) => `M${n2(cx - rx)} ${n2(cy)}a${n2(rx)} ${n2(ry)} 0 1 0 ${n2(2 * rx)} 0a${n2(rx)} ${n2(ry)} 0 1 0 ${n2(-2 * rx)} 0Z`;
 /** A star as a path, one point up. */
 export function starPath(cx, cy, outer, inner, points = 5) {
     const parts = [];
@@ -12,34 +127,26 @@ export function starPath(cx, cy, outer, inner, points = 5) {
     }
     return `${parts.join("")}Z`;
 }
-const fillOf = (shape, paint) => (shape.part === "main" ? paint.main : shape.part === "ribbon" ? paint.ribbon : paint.light);
-function drawShapes(shapes, paint) {
-    return shapes.map((shape) => `<path d="${shape.d}" fill="${fillOf(shape, paint)}"${shape.part === "detail" ? ` stroke-width="1.2"` : ""}/>`).join("");
+/** A regular polygon of `n` sides with a corner at `deg` degrees (0 is straight up), as a path. */
+export function polygon(cx, cy, r, n, deg = 0) {
+    let d = "";
+    for (let i = 0; i < n; i++) {
+        const a = ((deg + (360 * i) / n - 90) * Math.PI) / 180;
+        d += `${i === 0 ? "M" : "L"}${n2(cx + r * Math.cos(a))} ${n2(cy + r * Math.sin(a))}`;
+    }
+    return `${d}Z`;
 }
-/**
- * A flat emblem. Turning it about its vertical axis squeezes it by the cosine of the turn, and past a quarter turn shows the back, as a coin turns; a tilt squeezes it from the top.
- * The result is marked `@__PURE__` by the caller, so a bundler drops it when nothing uses it.
- */
-export function defineFlat(id, en, ja, source, model) {
-    const draw = (options, yaw, pitch) => {
-        const r = resolve(options);
-        const paint = paintFor(r.style, mainOf(model.metal, r.tint));
-        const across = Math.cos((yaw * Math.PI) / 180);
-        const tilt = Math.cos((pitch * Math.PI) / 180);
-        const sx = Math.sign(across || 1) * Math.max(Math.abs(across), 0.02);
-        const sy = Math.max(Math.abs(tilt), 0.02);
-        const shapes = across < 0 ? model.back : model.front;
-        const turned = yaw === 0 && pitch === 0 ? "" : ` transform="translate(32 32) scale(${n2(sx)} ${n2(sy)}) translate(-32 -32)"`;
-        return wrap({ title: en, size: r.size, style: r.style, theme: r.theme, defs: paint.defs, body: `<g${turned}>${drawShapes(shapes, paint)}</g>` });
-    };
-    return {
-        id,
-        en,
-        ja,
-        source,
-        kind: "flat",
-        model,
-        svg: (options) => draw(options, 0, 0),
-        frame: (options) => draw(options, degrees(options?.yaw), degrees(options?.pitch)),
-    };
+/** An ellipse turned `deg` degrees about its centre, as a path. */
+export function tiltedEllipse(cx, cy, rx, ry, deg) {
+    const a = (deg * Math.PI) / 180;
+    const x = rx * Math.cos(a);
+    const y = rx * Math.sin(a);
+    return `M${n2(cx - x)} ${n2(cy - y)}A${n2(rx)} ${n2(ry)} ${deg} 1 1 ${n2(cx + x)} ${n2(cy + y)}A${n2(rx)} ${n2(ry)} ${deg} 1 1 ${n2(cx - x)} ${n2(cy - y)}Z`;
+}
+/** A bar with square ends from one point to another, `w` wide, as a path. */
+export function bar(x1, y1, x2, y2, w) {
+    const l = Math.hypot(x2 - x1, y2 - y1) || 1;
+    const nx = (-(y2 - y1) / l) * (w / 2);
+    const ny = ((x2 - x1) / l) * (w / 2);
+    return `M${n2(x1 + nx)} ${n2(y1 + ny)}L${n2(x2 + nx)} ${n2(y2 + ny)}L${n2(x2 - nx)} ${n2(y2 - ny)}L${n2(x1 - nx)} ${n2(y1 - ny)}Z`;
 }

package/dist/emblems/emblem.sprite.d.ts

@@ -0,0 +1,38 @@
+import { type EmblemLocale, type EmblemOptions } from "./emblem.core.ts";
+import { type EmblemRef } from "./emblem.api.ts";
+/** What `emblemSprite` takes: the options every symbol is drawn with, and the prefix of its ids. */
+export interface SpriteOptions extends EmblemOptions {
+    /** The start of every id in the sheet (letters, digits and hyphens, starting with a letter). By default it is made from the emblems and the options, so the same call gives the same sheet. */
+    prefix?: string;
+}
+/** What one `<use>` takes. */
+export interface UseOptions {
+    /** The width and height in pixels (64 by default). */
+    size?: number;
+    /** A class for the `<svg>` that holds the `<use>`. */
+    class?: string;
+    /** The `<title>`: a string writes that title, `false` drops it and hides the drawing from a screen reader. By default it is the emblem's name. */
+    title?: string | false;
+    /** The language of the default title, `"en"` or `"ja"`. */
+    locale?: EmblemLocale;
+}
+/** A sheet of symbols and the snippets that draw them. */
+export interface Sprite {
+    /** One hidden `<svg>` of `<symbol>`s; put it once in the page, anywhere in `<body>`. */
+    sheet: string;
+    /** The markup for one use of a symbol: `<svg><title>…</title><use href="#…"/></svg>`. The emblem must be one the sprite was made with. */
+    use: (ref: EmblemRef, options?: UseOptions) => string;
+}
+/**
+ * A sprite sheet: every emblem in `ids` drawn once as a `<symbol>`, with the gradients and other definitions shared and every id unique across the sheet, and a `use(id, { size, class, title })` that returns the
+ * markup for one more of it. Put `sheet` in the page once; a bracket or a table that shows the same ball or medal fifty times then adds a few nodes each time, not the whole drawing. The symbols are drawn without the
+ * grain a large ball has by default (pass `grain: true` to keep it). `style`, `tint`, `accent` and `theme` are the sheet's, for every symbol; a different look is another sprite, or an id that names its style (`"medal:gold/line"`).
+ * @example
+ * ```ts
+ * import { emblemSprite } from "@johnmorrisdotca/dougu-sports/emblems";
+ * const sprite = emblemSprite(["ball:soccer", "medal:gold"]);
+ * console.log(sprite.use("ball:soccer", { size: 24 }).startsWith("<svg"));
+ * // true
+ * ```
+ */
+export declare function emblemSprite(ids: readonly EmblemRef[], options?: SpriteOptions): Sprite;

package/dist/emblems/emblem.sprite.js

@@ -0,0 +1,65 @@
+// A sheet of symbols: each emblem drawn once, then used as many times as a page wants it with a `<use>` that costs a few nodes and a few dozen bytes.
+import { EMBLEM_INK, escape, resolve } from "./emblem.core.js";
+import { emblemOf, parseEmblem, renderEmblem } from "./emblem.api.js";
+import { IdSpace, partsOf } from "./emblem.compose.js";
+const hash = (text) => {
+    let h = 2166136261;
+    for (let i = 0; i < text.length; i++)
+        h = Math.imul(h ^ text.charCodeAt(i), 16777619);
+    return (h >>> 0).toString(36);
+};
+/** The key a reference goes by in a sprite: the id, and the style when the reference names one. */
+function keyOf(ref) {
+    if (typeof ref !== "string")
+        return ref.id;
+    const parsed = parseEmblem(ref);
+    if (parsed === undefined)
+        throw new Error(`Unknown emblem "${ref.slice(0, 60)}". Ids look like "ball:soccer" or "medal:gold/line"; see EMBLEM_IDS.`);
+    return parsed.style === undefined ? parsed.id : `${parsed.id}/${parsed.style}`;
+}
+/**
+ * A sprite sheet: every emblem in `ids` drawn once as a `<symbol>`, with the gradients and other definitions shared and every id unique across the sheet, and a `use(id, { size, class, title })` that returns the
+ * markup for one more of it. Put `sheet` in the page once; a bracket or a table that shows the same ball or medal fifty times then adds a few nodes each time, not the whole drawing. The symbols are drawn without the
+ * grain a large ball has by default (pass `grain: true` to keep it). `style`, `tint`, `accent` and `theme` are the sheet's, for every symbol; a different look is another sprite, or an id that names its style (`"medal:gold/line"`).
+ * @example
+ * ```ts
+ * import { emblemSprite } from "@johnmorrisdotca/dougu-sports/emblems";
+ * const sprite = emblemSprite(["ball:soccer", "medal:gold"]);
+ * console.log(sprite.use("ball:soccer", { size: 24 }).startsWith("<svg"));
+ * // true
+ * ```
+ */
+export function emblemSprite(ids, options) {
+    const keys = [...new Set(ids.map(keyOf))];
+    const { prefix: asked, ...drawn } = options ?? {};
+    const prefix = typeof asked === "string" && /^[A-Za-z][\w-]{0,31}$/.test(asked) ? asked : `dgs${hash(`${keys.join(",")}|${JSON.stringify(drawn)}`)}`;
+    const theme = drawn.theme === "dark" || drawn.theme === "light" || drawn.theme === "auto" ? drawn.theme : "inherit";
+    const space = new IdSpace(prefix);
+    const symbols = [];
+    const symbolOf = new Map();
+    for (const key of keys) {
+        const svg = renderEmblem(key, { ...drawn, theme: "inherit", title: false, locale: undefined, grain: drawn.grain ?? false });
+        const parts = partsOf(svg);
+        const name = `${prefix}-${key.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`;
+        symbolOf.set(key, name);
+        symbols.push(`<symbol id="${name}" viewBox="${escape(parts.box)}">${space.add(parts)}</symbol>`);
+    }
+    const rule = theme === "auto" ? `<style>@media(prefers-color-scheme:dark){svg.${prefix}{color:${EMBLEM_INK.dark}}}</style>` : "";
+    const sheet = `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true" focusable="false">` +
+        `${rule}${space.defs.length === 0 ? "" : `<defs>${space.defs.join("")}</defs>`}${symbols.join("")}</svg>`;
+    const color = theme === "dark" ? EMBLEM_INK.dark : theme === "light" ? EMBLEM_INK.light : "";
+    const use = (ref, o) => {
+        const key = keyOf(ref);
+        const symbol = symbolOf.get(key);
+        if (symbol === undefined)
+            throw new Error(`"${key}" is not in this sprite; it holds ${keys.slice(0, 8).join(", ")}${keys.length > 8 ? ", …" : ""}.`);
+        const size = resolve({ size: o?.size }).size;
+        const classes = [theme === "auto" ? prefix : "", typeof o?.class === "string" ? o.class.trim() : ""].filter(Boolean).join(" ");
+        const { emblem } = emblemOf(ref);
+        const title = o?.title === false ? false : typeof o?.title === "string" && o.title.trim() !== "" ? o.title.trim().slice(0, 300) : o?.locale === "ja" ? emblem.ja : emblem.en;
+        const lang = o?.locale === "ja" && typeof o?.title !== "string" ? ' lang="ja"' : "";
+        return (`<svg width="${size}" height="${size}"${title === false ? ' aria-hidden="true"' : ` role="img"${lang}`}${classes === "" ? "" : ` class="${escape(classes)}"`}${color === "" ? "" : ` color="${color}"`}>` +
+            `${title === false ? "" : `<title>${escape(title)}</title>`}<use href="#${symbol}"/></svg>`);
+    };
+    return { sheet, use };
+}

package/dist/emblems/emblem.uri.d.ts

@@ -0,0 +1,22 @@
+import { type EmblemOptions } from "./emblem.core.ts";
+import { type EmblemRef } from "./emblem.api.ts";
+/** What `emblemDataUri` takes: the emblem's options, and the colour of the line. */
+export interface DataUriOptions extends EmblemOptions {
+    /** The colour of the outline and of anything drawn in the ink: `#rgb`, `#rrggbb` or `rgb()`. It wins over `theme`. Anything else is ignored. */
+    color?: string;
+}
+/** Text as the body of a data address: every character that could end an attribute, a quoted `url()` or an unquoted one is percent-encoded, and the rest is left alone. */
+export declare function encodeSvg(svg: string): string;
+/**
+ * An emblem as a data address, `data:image/svg+xml;utf8,…`, with every character that could break an attribute or a CSS `url()` percent-encoded, so the string goes anywhere: `img.src`, `background-image:
+ * url("…")`, `new Image().src` for a canvas. The ink is settled for you, because `currentColor` does not cross an `<img>` boundary: `color` is the line's colour; without it `theme: "dark"` is pale ink, and `"light"`
+ * and `"inherit"` (the default) are dark ink. `theme: "auto"` keeps the page's colour scheme (`prefers-color-scheme`) in the image.
+ * @example
+ * ```ts
+ * import { emblemDataUri } from "@johnmorrisdotca/dougu-sports/emblems";
+ * const src = emblemDataUri("medal:gold", { size: 48 });
+ * console.log(src.startsWith("data:image/svg+xml;utf8,%3Csvg"));
+ * // true
+ * ```
+ */
+export declare function emblemDataUri(ref: EmblemRef, options?: DataUriOptions): string;

package/dist/emblems/emblem.uri.js

@@ -0,0 +1,29 @@
+// An emblem as a data address, for an `<img>`, a CSS background or a canvas. An image cannot inherit its page's text colour, so the colour is settled here: the line style, a pictogram and a Material
+// icon are drawn in `currentColor`, and that becomes a concrete colour.
+import { EMBLEM_INK, hexOf, readColour } from "./emblem.core.js";
+import { renderEmblem } from "./emblem.api.js";
+/** Text as the body of a data address: every character that could end an attribute, a quoted `url()` or an unquoted one is percent-encoded, and the rest is left alone. */
+export function encodeSvg(svg) {
+    return encodeURIComponent(svg).replace(/%(3A|2F|2C|3B|3D|40)/g, (_, hex) => String.fromCharCode(parseInt(hex, 16))).replace(/['()*!]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+}
+/**
+ * An emblem as a data address, `data:image/svg+xml;utf8,…`, with every character that could break an attribute or a CSS `url()` percent-encoded, so the string goes anywhere: `img.src`, `background-image:
+ * url("…")`, `new Image().src` for a canvas. The ink is settled for you, because `currentColor` does not cross an `<img>` boundary: `color` is the line's colour; without it `theme: "dark"` is pale ink, and `"light"`
+ * and `"inherit"` (the default) are dark ink. `theme: "auto"` keeps the page's colour scheme (`prefers-color-scheme`) in the image.
+ * @example
+ * ```ts
+ * import { emblemDataUri } from "@johnmorrisdotca/dougu-sports/emblems";
+ * const src = emblemDataUri("medal:gold", { size: 48 });
+ * console.log(src.startsWith("data:image/svg+xml;utf8,%3Csvg"));
+ * // true
+ * ```
+ */
+export function emblemDataUri(ref, options) {
+    const { color, ...rest } = options ?? {};
+    const picked = readColour(color);
+    const ink = picked !== undefined ? hexOf(picked) : rest.theme === "dark" ? EMBLEM_INK.dark : rest.theme === "auto" ? undefined : EMBLEM_INK.light;
+    let svg = renderEmblem(ref, { ...rest, theme: ink === undefined ? "auto" : "inherit" });
+    // `currentColor` becomes the ink. A drawing that asked for `auto` keeps its colour-scheme rule, with the dark ink as its light default.
+    svg = ink === undefined ? svg.replace("<style>@media", `<style>svg{color:${EMBLEM_INK.light}}@media`) : svg.replace(/currentColor/g, ink);
+    return `data:image/svg+xml;utf8,${encodeSvg(svg)}`;
+}

package/dist/emblems/gear/gear.badmintonracket.d.ts

@@ -0,0 +1 @@
+export declare const GEAR_BADMINTON_RACKET: import("./gear.index.ts").Piece<import("./gear.core.ts").GearSpec>;

package/dist/emblems/gear/gear.badmintonracket.js

@@ -0,0 +1,19 @@
+// A badminton racket and a shuttlecock, drawn for this package: an oval strung head on a slender frame, a T-shaped throat and a grip, and a feathered shuttlecock on its cork.
+import { capsule, drawn, ellipse, seg, strings } from "./gear.core.js";
+const T = "rotate(34 32 32)";
+const S = "translate(50.5 50) rotate(48) scale(.95) translate(-32 -13)";
+export const GEAR_BADMINTON_RACKET = /* @__PURE__ */ drawn("gear:badminton-racket", "Badminton racket", "バドミントンのラケット", {
+    main: "#2f8fe0",
+    accent: "#2a2f38",
+    parts: [
+        { d: strings(32, 15, 10.4, 13.4, 3.1), fill: "none", stroke: "#9aa7b6", w: 0.6, t: T },
+        { d: ellipse(32, 15, 11, 14), fill: "none", stroke: "$main", w: 2.6, t: T },
+        { d: "M24.2 24.6L30.6 36M39.8 24.6L33.4 36", fill: "none", stroke: "$main", w: 2.2, t: T },
+        { d: capsule(32, 34, 32, 50, 2.2), fill: "#aeb6c0", t: T, cyl: 0.9, shade: 0 },
+        { d: capsule(32, 46, 32, 62, 4.4), fill: "$accent", t: T, cyl: 0.8, shade: 0 },
+        { d: seg(30, 52, 34, 52) + seg(30, 56, 34, 56), fill: "none", stroke: "#6a7482", w: 0.7, t: T, line: "none" },
+        { d: "M28.4 20L24 4Q32 1 40 4L35.6 20z", fill: "#f4f6f8", stroke: "#9aa7b6", t: S, shade: 0.8 },
+        { d: "M29.6 19L27 5M32 19.4V3.4M34.4 19L37 5", fill: "none", stroke: "#9aa7b6", w: 0.7, t: S, line: "none" },
+        { d: "M27.6 20h8.8a4.4 4.4 0 0 1-8.8 0z", fill: "#e8cf9a", t: S, shade: 0.9 },
+    ],
+});

package/dist/emblems/gear/gear.baseballglove.d.ts

@@ -0,0 +1 @@
+export declare const GEAR_BASEBALL_GLOVE: import("./gear.index.ts").Piece<import("./gear.core.ts").GearSpec>;