@johnmorrisdotca/dougu-sports 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -6,6 +6,14 @@ All notable changes to this project are written here. The format follows
 
 ## [Unreleased]
 
+## [0.3.1] - 2026-10-14
+
+Nothing is cut off when an emblem turns: every cup and the pieces that were clipped at rest now draw inside their box at every angle.
+
+### Fixed
+
+- **Tall and wide things were cut off by their own box as they turned, and a few were cut off at rest.** Every emblem is drawn in a fixed square box sized for the still drawing, and a turn grows the outline past it: tilted toward the eye by 60 degrees, the rim and the foot of all 16 cups (and the handles of the sumo cup, up to 17.6 of 64 units, a quarter of the picture) went out of the box. Each cup now has a `turnBox`, measured from its drawing over every yaw and tilt, and `emblemFrame`, `bindTurn` and `renderEmblem(id, { turnBox: true })` draw in it, so a turn is one size from the first frame to the last and the resting view of `bindTurn` is the same size too (the cup is drawn up to 30 percent smaller in its square while it can turn). A still drawing keeps its box and its size. Eleven pieces of flat art whose stroke ran past the 64 by 64 box at rest (the swim goggles, three skates, the diving board, the referee's fan, the running track and three pictograms, by up to 3.3 units) have a box that holds them. Balls, medals, crests and the other flat art needed nothing. `test/turnbox.test.ts` measures the ink of every emblem, still and turned, against its box. A frame at no turn is now the still in the box of the turn (`renderEmblem(id, { turnBox: true })`), which is the still itself for everything but those cups.
+
 ## [0.3.0] - 2026-10-14
 
 Nineteen more soccer balls (26, 18, 14, 12 and 6 panels, winter orange and high-visibility yellow, futsal and beach soccer), 186 emblems in all.
@@ -100,7 +108,9 @@ First preview: the name, the API and two sample emblems. The full set of trophie
 - Tests for the drawing, the ids, the turns and the bundle size of one item; a package check that installs the packed tarball and bundles one item from it.
 - The demo (a playground with a turn slider, and a gallery page), `docs/layout.md`, `docs/turning.md`, `docs/gallery.md`, the family header and footer, the CI, Pages and Release workflows, and `LICENSES/` and `NOTICE.md` ready for third-party art.
 
-[Unreleased]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.2.1...HEAD
+[Unreleased]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.3.1...HEAD
+[0.3.1]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.3.0...v0.3.1
+[0.3.0]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.2.1...v0.3.0
 [0.2.1]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/johnmorrisdotca/dougu-sports/compare/v0.0.1...v0.1.0

package/README.md

@@ -217,7 +217,7 @@ console.log(renderEmblem("medal:gold").includes(" color=")); // false
 import { ballFrame, emblemFrame } from "@johnmorrisdotca/dougu-sports/turn";
 import { renderEmblem } from "@johnmorrisdotca/dougu-sports/emblems";
 
-console.log(emblemFrame("trophy:hockey-cup", { yaw: 0 }) === renderEmblem("trophy:hockey-cup")); // true
+console.log(emblemFrame("trophy:hockey-cup", { yaw: 0 }) === renderEmblem("trophy:hockey-cup", { turnBox: true })); // true
 console.log(emblemFrame("trophy:tennis-cup", { yaw: 90 }) === renderEmblem("trophy:tennis-cup")); // false
 console.log(ballFrame("ball:soccer", { yaw: 90 }) === ballFrame("ball:soccer", { yaw: 450 })); // true
 ```

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

@@ -44,6 +44,12 @@ export interface EmblemOptions {
     numberColor?: string;
     /** Which side of a pennant is drawn at rest: `"front"` (the default) or `"back"`. */
     view?: "front" | "back";
+    /**
+     * The box the drawing is made in. A turning emblem has two: the box of its still drawing, and a box that holds every turn of it (a cup tilted toward the eye shows its rim and its foot beyond the still drawing's
+     * edges). `true` draws in the box of the turn, so that a still drawing and the frames of its turn are one size; `false` draws a turned frame in the box of the still. By default a still drawing (`svg`) is in its own
+     * box and every turned frame (`frame`) is in the box of the turn, so nothing is cut off while it turns and the size does not change from one angle to the next.
+     */
+    turnBox?: boolean;
 }
 /** A turn, in degrees from the resting view (0 and 0 is the still drawing): `yaw` about the vertical axis, `pitch` the tilt toward the eye. */
 export interface FrameOptions extends EmblemOptions {

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

@@ -49,6 +49,14 @@ export interface LatheModel {
     tones?: Readonly<Record<string, string>>;
     /** The elevation of the eye in degrees at rest: how much of the top of a rim shows. */
     tilt?: number;
+    /** The view box of the still drawing, `x y width height`; "0 0 64 64" unless the still reaches past it (the stroke of a rim at the top edge). */
+    box?: string;
+    /**
+     * The view box of every turned frame. A turn tilts the body toward the eye by up to 60 degrees and away by 40: the rim and the foot swing up and down by the sine of the elevation times their radius, past the
+     * 64 by 64 box of the still drawing, and the handles, balls and poles swing out to their full reach. It is the box that holds the drawing at every yaw and pitch, so the drawing does not change size as it turns.
+     * `test/turnbox.test.ts` measures every frame against it, and `scripts/turn-boxes.mjs` prints the box a model needs.
+     */
+    turnBox?: string;
     solids: readonly Solid[];
     handles?: readonly Handle[];
     balls?: readonly Ball[];

package/dist/emblems/emblem.lathe.js

@@ -414,13 +414,17 @@ const PENTAGONS = [
 ];
 /** A lathe emblem: the object with its names and its model, the still drawing and the turned one. */
 export function defineLathe(id, en, ja, source, model) {
-    const frame = (o) => {
+    const rest = model.box ?? "0 0 64 64";
+    const turn = model.turnBox ?? rest;
+    // A still drawing is in its own box and a turned frame in the box of the turn, unless the options say otherwise; the box is the same for every angle.
+    const make = (o, turned) => {
         const r = resolve(o);
         const yaw = typeof o?.yaw === "number" && Number.isFinite(o.yaw) ? o.yaw % 360 : 0;
         const pitch = typeof o?.pitch === "number" && Number.isFinite(o.pitch) ? Math.max(-40, Math.min(60, o.pitch)) : 0;
         const d = draw(model, r, o, yaw, pitch);
-        return wrap({ title: en, size: r.size, style: r.style, theme: r.theme, defs: d.defs, body: d.body, edge: d.edge, width: r.style === "line" ? 2.3 : 0.6 });
+        const box = (o?.turnBox ?? turned) ? turn : rest;
+        return wrap({ title: en, size: r.size, style: r.style, theme: r.theme, defs: d.defs, body: d.body, box, edge: d.edge, width: r.style === "line" ? 2.3 : 0.6 });
     };
-    const still = labelled(en, ja, (o) => frame(o));
-    return { id, en, ja, source, kind: "lathe", model, svg: still, frame: labelled(en, ja, frame) };
+    const still = labelled(en, ja, (o) => make(o, false));
+    return { id, en, ja, source, kind: "lathe", model, svg: still, frame: labelled(en, ja, (o) => make(o, true)) };
 }

package/dist/emblems/gear/gear.skates.js

@@ -1,6 +1,7 @@
 // Ice skates drawn by us, all facing right: a hockey skate, a figure skate and a speed skate.
 import { capsule, drawn, rect, seg } from "./gear.core.js";
 export const GEAR_HOCKEY_SKATE = /* @__PURE__ */ drawn("gear:hockey-skate", "Hockey skate", "アイスホッケースケート", {
+    box: "-0.9 -0.9 65.8 65.8",
     main: "#232a36",
     accent: "#d4202c",
     parts: [
@@ -14,6 +15,7 @@ export const GEAR_HOCKEY_SKATE = /* @__PURE__ */ drawn("gear:hockey-skate", "Hoc
     ],
 });
 export const GEAR_FIGURE_SKATE = /* @__PURE__ */ drawn("gear:figure-skate", "Figure skate", "フィギュアスケート靴", {
+    box: "-1.4 -1.4 66.8 66.8",
     main: "#f6f2ea",
     accent: "#c8a26a",
     parts: [
@@ -26,6 +28,7 @@ export const GEAR_FIGURE_SKATE = /* @__PURE__ */ drawn("gear:figure-skate", "Fig
     ],
 });
 export const GEAR_SPEED_SKATE = /* @__PURE__ */ drawn("gear:speed-skate", "Speed skate", "スピードスケート靴", {
+    box: "-1.2 -1.2 66.4 66.4",
     main: "#2a5fb0",
     accent: "#1d1f24",
     parts: [

package/dist/emblems/gear/gear.sumo.js

@@ -1,6 +1,7 @@
 // Sumo gear, drawn for this package: the referee's war fan with its tassel, and the wrestler's belt with its stiff hanging cords.
 import { capsule, circle, drawn, seg } from "./gear.core.js";
 export const GEAR_GUNBAI = /* @__PURE__ */ drawn("gear:gunbai", "Referee's war fan", "軍配", {
+    box: "-0.4 0 64.7 64.7",
     main: "#4a2428",
     accent: "#f0dca6",
     parts: [

package/dist/emblems/gear/gear.water.js

@@ -1,6 +1,7 @@
 // Swimming and diving gear drawn by us: a diving board over water, and a pair of goggles.
 import { capsule, drawn, ellipse, rect } from "./gear.core.js";
 export const GEAR_DIVING_BOARD = /* @__PURE__ */ drawn("gear:diving-board", "Diving board", "飛び込み板", {
+    box: "-1.4 -0.8 66.8 66.8",
     main: "#4b84b8",
     accent: "#8a949f",
     parts: [
@@ -11,6 +12,7 @@ export const GEAR_DIVING_BOARD = /* @__PURE__ */ drawn("gear:diving-board", "Div
     ],
 });
 export const GEAR_SWIM_GOGGLES = /* @__PURE__ */ drawn("gear:swim-goggles", "Swim goggles", "水泳のゴーグル", {
+    box: "-2.1 -2.1 68.2 68.2",
     main: "#2a7fd0",
     accent: "#1d1f24",
     parts: [

package/dist/emblems/sport/artisticswimming.js

@@ -4,6 +4,7 @@ import { defineIcon } from "../emblem.shapes.js";
 const wave = (y) => `M3 ${y}q7-6 14 0t14 0 14 0 14 0`;
 /** Raised legs. */
 export const SPORT_ARTISTICSWIMMING = /* @__PURE__ */ defineIcon("sport:artisticswimming", "Raised legs", "水面に上げた脚", "ours", {
+    box: "-0.3 0 64.6 64.6",
     metal: "flat",
     ink: true,
     front: [

package/dist/emblems/sport/athletics.js

@@ -2,6 +2,7 @@
 import { defineIcon } from "../emblem.shapes.js";
 /** Running track. */
 export const SPORT_ATHLETICS = /* @__PURE__ */ defineIcon("sport:athletics", "Running track", "陸上競技のトラック", "ours", {
+    box: "-3.7 -3.7 71.4 71.4",
     metal: "flat",
     ink: true,
     front: [

package/dist/emblems/sport/diving.js

@@ -4,6 +4,7 @@ import { circlePath as circ, defineIcon } from "../emblem.shapes.js";
 const wave = (y) => `M3 ${y}q7-6 14 0t14 0 14 0 14 0`;
 /** Diver. */
 export const SPORT_DIVING = /* @__PURE__ */ defineIcon("sport:diving", "Diver", "飛込の選手", "ours", {
+    box: "-0.3 0 64.6 64.6",
     metal: "flat",
     ink: true,
     front: [

package/dist/emblems/sport/racquetball.js

@@ -2,6 +2,7 @@
 import { circlePath as circ, defineIcon } from "../emblem.shapes.js";
 /** Racquetball racket and ball. */
 export const SPORT_RACQUETBALL = /* @__PURE__ */ defineIcon("sport:racquetball", "Racquetball racket", "ラケットボールのラケット", "ours", {
+    box: "-0.3 0 64.6 64.6",
     metal: "flat",
     ink: true,
     front: [

package/dist/emblems/sport/sumo.js

@@ -3,6 +3,7 @@
 import { defineIcon } from "../emblem.shapes.js";
 /** Sumo. */
 export const SPORT_SUMO = /* @__PURE__ */ defineIcon("sport:sumo", "Sumo", "相撲", "ours", {
+    box: "-0.7 0 65.3 65.3",
     metal: "flat",
     ink: true,
     front: [

package/dist/emblems/trophy/baseball.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A ring of about thirty gold pennants standing round a silver baseball on a round base. */
 export const TROPHY_BASEBALL = /* @__PURE__ */ defineLathe("trophy:baseball", "Baseball trophy", "野球のトロフィー", "ours", {
     metal: "silver",
+    turnBox: "-9.3 -7.3 82.6 82.6",
     tones: { gilt: "#d9a620", pole: "#aab2bc", accent: "#e0b030" },
     solids: [
         {

package/dist/emblems/trophy/basketball.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A gold ball resting over a net and rim, on a tapered column and base. */
 export const TROPHY_BASKETBALL = /* @__PURE__ */ defineLathe("trophy:basketball", "Basketball trophy", "バスケットボールのトロフィー", "ours", {
     metal: "gold",
+    turnBox: "-5 0 74 74",
     solids: [
         {
             p: [

package/dist/emblems/trophy/bowl.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A round bowl on a short foot. */
 export const TROPHY_BOWL = /* @__PURE__ */ defineLathe("trophy:bowl", "Bowl", "ボウル", "ours", {
     metal: "gold",
+    turnBox: "-6.7 -9.2 77.4 77.4",
     solids: [{ open: true, p: [[16, 25, 1], [19, 24.8], [30, 15], [38, 7, 1], [38, 4.6, 1], [46, 3.6, 1], [46, 9, 1], [49, 9, 1], [49, 13.4, 1], [54, 13.4, 1]], decor: [["ring", 21]] }],
     plate: { y0: 49.2, y1: 53.8 },
 });

package/dist/emblems/trophy/canadian-bowl.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A wide silver bowl with two handles on a tall tiered base. */
 export const TROPHY_CANADIAN_BOWL = /* @__PURE__ */ defineLathe("trophy:canadian-bowl", "Wide two-handled bowl", "取っ手が二つの広いボウル", "ours", {
     metal: "silver",
+    turnBox: "-10.7 -9.6 85.3 85.3",
     tones: { dark: "#2b2f36" },
     solids: [
         {

package/dist/emblems/trophy/cricket-urn.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A small terracotta urn. */
 export const TROPHY_CRICKET_URN = /* @__PURE__ */ defineLathe("trophy:cricket-urn", "Urn", "取っ手付きの壺", "ours", {
     metal: "flat",
+    turnBox: "-2.2 0 68.4 68.4",
     color: "#a8442f",
     tones: { wood: "#b98a4f" },
     solids: [

package/dist/emblems/trophy/football.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A silver football standing on end, tilted as if ready for a kick, on a tapered three-sided stand. */
 export const TROPHY_FOOTBALL = /* @__PURE__ */ defineLathe("trophy:football", "Football trophy", "アメフトのトロフィー", "ours", {
     metal: "silver",
+    turnBox: "-5.1 0 74.1 74.1",
     solids: [
         { sides: 3, p: [[28.6, 3.4, 1], [49, 10.2, 1], [49, 12.8, 1], [53.4, 12.8, 1], [53.4, 15, 1], [58.4, 15, 1]] },
     ],

package/dist/emblems/trophy/globe.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A globe in a stand. */
 export const TROPHY_GLOBE = /* @__PURE__ */ defineLathe("trophy:globe", "Globe on a stand", "台座の上の地球儀", "ours", {
     metal: "gold",
+    turnBox: "-5.5 0 74.9 74.9",
     solids: [{ p: [[34, 3.4, 1], [48, 3.4, 1], [48, 8, 1], [51, 8, 1], [51, 13, 1], [55, 13, 1], [55, 15.2, 1], [59, 15.2, 1]] }],
     balls: [{ kind: "globe", cy: 21, r: 15 }],
     plate: { y0: 55.2, y1: 58.8 },

package/dist/emblems/trophy/hockey-cup.js

@@ -4,6 +4,8 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A tall silver cup: a small bowl on a collar over a tall tiered barrel of widening bands. */
 export const TROPHY_HOCKEY_CUP = /* @__PURE__ */ defineLathe("trophy:hockey-cup", "Banded silver cup", "段付きの銀カップ", "ours", {
     metal: "silver",
+    box: "-0.4 -0.8 64.8 64.8",
+    turnBox: "-8.8 -9.2 81.6 81.6",
     tones: { dark: "#2b2f36" },
     solids: [
         {

package/dist/emblems/trophy/lidded-cup.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A cup with a domed lid and a knob. */
 export const TROPHY_LIDDED_CUP = /* @__PURE__ */ defineLathe("trophy:lidded-cup", "Cup with a lid", "ふた付きカップ", "ours", {
     metal: "gold",
+    turnBox: "-1.2 0 66.4 66.4",
     solids: [
         {
             p: [

package/dist/emblems/trophy/rugby-cup.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A gilded two-handled cup with a lid. */
 export const TROPHY_RUGBY_CUP = /* @__PURE__ */ defineLathe("trophy:rugby-cup", "Gilded cup with a lid", "ふた付きの金色のカップ", "ours", {
     metal: "gold",
+    turnBox: "-6 -8.8 76.1 76.1",
     tones: { dark: "#3a2a22" },
     solids: [
         {

package/dist/emblems/trophy/salver.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A broad dish on a low foot, with a banded rim. */
 export const TROPHY_SALVER = /* @__PURE__ */ defineLathe("trophy:salver", "Salver", "足付きの丸盆", "ours", {
     metal: "gold",
+    turnBox: "-4.5 -8.4 72.9 72.9",
     tilt: 24,
     solids: [{ open: true, p: [[22, 30, 1], [24.4, 30, 1], [29, 22, 1], [34, 8, 1], [34, 4.8, 1], [42, 3.8, 1], [42, 9.4, 1], [46, 10.4, 1], [48, 12.6, 1], [51, 12.6, 1]], decor: [["disc", 26.4, "main"]] }],
     plate: { y0: 48.2, y1: 50.8 },

package/dist/emblems/trophy/soccer-ball.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A soccer ball held up on a tapering stand. */
 export const TROPHY_SOCCER_BALL = /* @__PURE__ */ defineLathe("trophy:soccer-ball", "Soccer ball trophy", "サッカーのトロフィー", "ours", {
     metal: "gold",
+    turnBox: "-5.4 0 74.7 74.7",
     solids: [{ p: [[27, 4.4, 1], [38, 3.4], [47, 5.4, 1], [47, 8, 1], [51, 8, 1], [51, 12.4, 1], [55, 12.4, 1], [55, 15, 1], [59, 15, 1]] }],
     balls: [{ kind: "soccer", cy: 16, r: 11.4 }],
     plate: { y0: 55.2, y1: 58.8 },

package/dist/emblems/trophy/soccer-globe.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** Gold spiral figures rising to hold up a globe, with green bands at the base. */
 export const TROPHY_SOCCER_GLOBE = /* @__PURE__ */ defineLathe("trophy:soccer-globe", "Globe on a column", "柱の上の地球儀", "ours", {
     metal: "gold",
+    turnBox: "-3.8 -0.4 71.6 71.6",
     tones: { green: "#1f8a5b" },
     solids: [
         {

package/dist/emblems/trophy/sumo-cup.js

@@ -6,6 +6,7 @@ const side = (a) => ({ a, w: 2.4, tone: "gilt", pts: [[8.4, 27], [14, 25], [18.4
 /** A tall silver cup with phoenix-crested handles on a tall stand. */
 export const TROPHY_SUMO_CUP = /* @__PURE__ */ defineLathe("trophy:sumo-cup", "Phoenix-handle cup", "鳳凰飾りの銀杯", "ours", {
     metal: "silver",
+    turnBox: "-12.9 -17.9 89.9 89.9",
     tones: { dark: "#2b2f36", gilt: "#d9a620" },
     solids: [
         {

package/dist/emblems/trophy/tennis-cup.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A two-handled cup with a lid and a small pineapple finial. */
 export const TROPHY_TENNIS_CUP = /* @__PURE__ */ defineLathe("trophy:tennis-cup", "Pineapple cup", "パイナップル飾りのカップ", "ours", {
     metal: "gold",
+    turnBox: "-3.6 -4.2 71.2 71.2",
     tones: { dark: "#2b2f36" },
     solids: [
         {

package/dist/emblems/trophy/tennis-plate.js

@@ -3,6 +3,7 @@ import { defineLathe } from "../emblem.lathe.js";
 /** A silver salver with a gilt pattern. */
 export const TROPHY_TENNIS_PLATE = /* @__PURE__ */ defineLathe("trophy:tennis-plate", "Plate on a pedestal", "台付きの大皿", "ours", {
     metal: "silver",
+    turnBox: "-5.9 -8.9 75.9 75.9",
     tilt: 36,
     tones: { gilt: "#d9a620", plain: "#9aa3ad" },
     solids: [

package/dist/turn-control.js

@@ -94,7 +94,8 @@ export function bindTurn(container, ref, options = {}) {
             renderId = undefined;
         }
         const at = angles.yaw === 0 && angles.pitch === 0 && angles.roll === 0;
-        container.innerHTML = !turnable || at ? renderEmblem(current, frame) : emblemFrame(current, { ...frame, ...angles });
+        // The resting view of an emblem that turns is drawn in the box of the turn too, so that the element is the same size at every angle and a drag does not make the emblem jump or zoom at its first step.
+        container.innerHTML = !turnable ? renderEmblem(current, frame) : at ? renderEmblem(current, { turnBox: true, ...frame }) : emblemFrame(current, { ...frame, ...angles });
     };
     /** One drawing for any number of changes within a frame. */
     const schedule = () => {

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.3.0";
+export declare const VERSION = "0.3.1";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.3.0";
+export const VERSION = "0.3.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/dougu-sports",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Dougu Sports 道具, sports emblems as SVG strings: trophies, medals, crests, sport icons, and the ball and gear of every sport, in metal, line or flat colour, with optional 3D turning. Light and dark, accessible, tree-shakeable. Zero dependencies.",
   "keywords": [
     "sports",