@johnmorrisdotca/dougu-sports 0.12.0 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/README.md +41 -41
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,20 @@ All notable changes to this project are written here. The format follows
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [0.12.1] - 2026-10-20
|
|
10
|
+
|
|
11
|
+
The npm page and the demo open on a trophy that turns. No change to the package's code beyond its version.
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- **README: the first thing is a turning trophy.** Five famous trophies turning in 3D (the Stanley Cup first), seven balls rolling, and a medal, a banner, a crest, a skate and a glove flipping like coins, each an animated webp in a light and a dark twin (`docs/images/trophies-turn-*.webp`, `balls-turn-*.webp`, `flips-turn-*.webp`, each under 1 MB), then "The best of it": the 47 famous trophies, the 117 balls and implements, the trophies, medals and crests, and the 70 pieces of gear, a picture each. The vintage balls picture moved to `docs/vintage-balls.md`, the turned-emblems strip to `docs/turning.md`, and the engraving examples to a new `docs/engraving.md` (nothing removed); the README is not longer than before.
|
|
16
|
+
- **The pictures are made by a script from the demo:** `pnpm animations` (`scripts/animations.ts`) takes one frame per angle with Playwright and joins them with `img2webp`.
|
|
17
|
+
- **Demo: it opens on the Stanley Cup turning by itself**, with quick picks (cups, balls, a medal, a banner, a skate) and its controls (Stop, speed, the turn slider) under it, the stage pinned in view while the options scroll past, on a phone and on a desk. Changing the emblem, the style or the tint while it turns leaves the turn going from where it was. The address holds `turn=0` once it is paused (an address with an angle opens still); a reader who prefers reduced motion gets it still. The trophy case turns by itself too.
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- The shared background module in `scripts/` (tooling for the demo and the README pictures; the package ships none of it) is now the family's version 1.0.1: the `id` it is given is made safe (letters, digits, `_` and `-`; `bg-` in front of one that does not start with a letter) before it is written into element ids and `url(#...)`. `test/family-backgrounds.test.ts` draws every preset with hostile ids.
|
|
22
|
+
|
|
9
23
|
## [0.12.0] - 2026-10-19
|
|
10
24
|
|
|
11
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -11,29 +11,33 @@ The ball and the gear of every sport, trophies, medals, crests and the icon of e
|
|
|
11
11
|
<img alt="TypeScript" src="https://img.shields.io/badge/types-TypeScript-3178c6">
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
|
-
<p align="center"><a href="https://johnmorrisdotca.github.io/dougu-sports/"><strong>Open the demo →</strong></a> · <a href="https://johnmorrisdotca.github.io/dougu-sports/gallery.html">Gallery</a> · <a href="./docs/gallery.md">Every id</a> · <a href="./docs/turning.md">Turning</a> · <a href="./docs/layout.md">Layout</a> · <a href="./docs/japanese-sports.md">Japanese sports</a></p>
|
|
14
|
+
<p align="center"><a href="https://johnmorrisdotca.github.io/dougu-sports/"><strong>Open the demo →</strong></a> · <a href="https://johnmorrisdotca.github.io/dougu-sports/gallery.html">Gallery</a> · <a href="./docs/gallery.md">Every id</a> · <a href="./docs/turning.md">Turning</a> · <a href="./docs/engraving.md">Engraving</a> · <a href="./docs/layout.md">Layout</a> · <a href="./docs/japanese-sports.md">Japanese sports</a></p>
|
|
15
15
|
|
|
16
16
|
<p align="center">
|
|
17
17
|
<picture>
|
|
18
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/
|
|
19
|
-
<img alt="
|
|
18
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/trophies-turn-dark.webp">
|
|
19
|
+
<img alt="Five famous trophies turning in 3D on royal purple, each a little behind the one before: the Stanley Cup first, then the FIFA World Cup, the Lombardi Trophy, the Larry O'Brien trophy and the Webb Ellis Cup. Each keeps its outline while its light and its handles move." src="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/trophies-turn-light.webp" width="760">
|
|
20
20
|
</picture>
|
|
21
21
|
</p>
|
|
22
22
|
|
|
23
23
|
<p align="center">
|
|
24
24
|
<picture>
|
|
25
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/
|
|
26
|
-
<img alt="
|
|
25
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/balls-turn-dark.webp">
|
|
26
|
+
<img alt="Seven balls rolling under floodlights: a soccer ball, a basketball, a baseball, a rugby ball, a volleyball, a tennis ball and a golf ball, each turned a little differently so that the seams and panels travel across them." src="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/balls-turn-light.webp" width="760">
|
|
27
27
|
</picture>
|
|
28
28
|
</p>
|
|
29
29
|
|
|
30
30
|
<p align="center">
|
|
31
31
|
<picture>
|
|
32
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/
|
|
33
|
-
<img alt="
|
|
32
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/flips-turn-dark.webp">
|
|
33
|
+
<img alt="A gold and a silver medal, a championship banner, a crest, a hockey skate and a baseball glove flipping like coins on royal purple: each shows its face, then its edge, then its plain back." src="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/flips-turn-light.webp" width="760">
|
|
34
34
|
</picture>
|
|
35
35
|
</p>
|
|
36
36
|
|
|
37
|
+
## The best of it
|
|
38
|
+
|
|
39
|
+
- **47 famous trophies**, each a close likeness measured on a photograph and carrying no lettering, logo or mark: the Stanley Cup, the FIFA World Cup, the Lombardi Trophy, the Larry O'Brien trophy, the Grey Cup and the rest ([famous trophies](./docs/famous-trophies.md)).
|
|
40
|
+
|
|
37
41
|
<p align="center">
|
|
38
42
|
<picture>
|
|
39
43
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/famous-desk-dark.webp">
|
|
@@ -41,6 +45,26 @@ The ball and the gear of every sport, trophies, medals, crests and the icon of e
|
|
|
41
45
|
</picture>
|
|
42
46
|
</p>
|
|
43
47
|
|
|
48
|
+
- **117 balls and implements in 3D**, from the 32-panel soccer ball to the pucks and the curling stone, that roll as they turn ([gallery](./docs/gallery.md), [vintage and era-style balls](./docs/vintage-balls.md)).
|
|
49
|
+
|
|
50
|
+
<p align="center">
|
|
51
|
+
<picture>
|
|
52
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/balls-desk-dark.webp">
|
|
53
|
+
<img alt="Thirty-six balls and pucks drawn in 3D under floodlights, in four rows of nine: soccer balls of several constructions and colours, then basketball, the 3x3 ball, baseball, softball, a football, a rugby ball, an Australian football and two volleyballs, then tennis, padel, pickleball with its holes, squash with its two dots, racquetball, golf, red and pink cricket and water polo, and last sepak takraw, a shuttlecock, a puck, a curling stone, lacrosse, handball, table tennis, a sliotar and a roundnet ball." src="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/balls-desk-light.webp" width="760">
|
|
54
|
+
</picture>
|
|
55
|
+
</p>
|
|
56
|
+
|
|
57
|
+
- **Trophies, medals, crests and the icon of every sport**, in metal, one line or flat colour, light and dark.
|
|
58
|
+
|
|
59
|
+
<p align="center">
|
|
60
|
+
<picture>
|
|
61
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/hero-desk-dark.webp">
|
|
62
|
+
<img alt="Trophies, medals and crests, in four rows of nine: nine famous cups, then a gilded cup, a phoenix-handle cup, a soccer ball trophy, a wreath, a rosette, a belt, a banner, a ring and a plaque, then three medals, three place badges and three crests, and last three cups each in metal, line and colour." src="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/hero-desk-light.webp" width="760">
|
|
63
|
+
</picture>
|
|
64
|
+
</p>
|
|
65
|
+
|
|
66
|
+
- **70 pieces of gear**, among them the Japanese sports and budo ([Japanese sports](./docs/japanese-sports.md)).
|
|
67
|
+
|
|
44
68
|
<p align="center">
|
|
45
69
|
<picture>
|
|
46
70
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/gear-desk-dark.webp">
|
|
@@ -48,16 +72,13 @@ The ball and the gear of every sport, trophies, medals, crests and the icon of e
|
|
|
48
72
|
</picture>
|
|
49
73
|
</p>
|
|
50
74
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</td>
|
|
59
|
-
</tr>
|
|
60
|
-
</table>
|
|
75
|
+
- **On a phone**, and **turned by hand**: drag, arrow keys or the automatic turn ([turning](./docs/turning.md)).
|
|
76
|
+
|
|
77
|
+
<p align="center">
|
|
78
|
+
<picture>
|
|
79
|
+
<img alt="Cups, a medal, balls and gear on a phone, three to a row." src="https://raw.githubusercontent.com/johnmorrisdotca/dougu-sports/main/docs/images/phone-light.webp" width="200">
|
|
80
|
+
</picture>
|
|
81
|
+
</p>
|
|
61
82
|
|
|
62
83
|
> **Status: preview.** 321 emblems: 71 trophies, 6 awards, 6 medals, 4 crests, a pictogram for each of the 38 sports, 117 balls and implements drawn in 3D, 8 printed pucks ([docs/pucks.md](./docs/pucks.md)), 70 pieces of gear (among them the Japanese sports and budo, [docs/japanese-sports.md](./docs/japanese-sports.md)) and a championship pennant; [docs/layout.md](./docs/layout.md) says where each goes. All of it is drawn for this package: no art is copied from another project.
|
|
63
84
|
|
|
@@ -91,7 +112,7 @@ Put the string in a page (`element.innerHTML = svg`), write it to a file, or sen
|
|
|
91
112
|
- **Three styles** for every emblem: `metal` (polished metal: a gradient, a highlight and a soft rim of reflected light, edged in a darker tone of its own metal, with no heavy outline), `line` (one clean outline in the page's text colour, made to read at 14 pixels) and `color` (flat fills); see [Theming](#theming).
|
|
92
113
|
- **Size, tint, accent and theme** as options: a tint recolours the main part (a medal's metal, a crest's colour, a ball's patches), an accent the second colour (a ribbon, a crest's band, the pennants), a theme sets the ink for light, dark or either.
|
|
93
114
|
- **Turning**: `emblemFrame` and `ballFrame` return the emblem at an angle, in plain SVG: every emblem turns, a ball rolls, a cup keeps its outline and moves its light, and everything flat (gear, a bat, a crown, a sport's icon) flips like a coin; `bindTurn` lets a drag, the arrow keys or an auto-turn do the turning in a page; see [docs/turning.md](./docs/turning.md).
|
|
94
|
-
- **Engraving**: text cut into a medal, a plaque, the belt, a ring, a banner, a pennant and the plinth of a cup, from `label`, `year` and `rank` or one `engrave` string, in the ink that reads at 4.5 to 1 on the metal, and it turns with the emblem; see [
|
|
115
|
+
- **Engraving**: text cut into a medal, a plaque, the belt, a ring, a banner, a pennant and the plinth of a cup, from `label`, `year` and `rank` or one `engrave` string, in the ink that reads at 4.5 to 1 on the metal, and it turns with the emblem; see [engraving](./docs/engraving.md).
|
|
95
116
|
- **Custom balls**: a baseball, a softball and the classic soccer balls take `paint` (a solid colour, or two: along the seam or in halves, with stitches that still show), `decal` (your own SVG or image as a logo, wrapped onto the sphere so that it turns with the ball), `stamp` (condensed bold text between small stars, with an optional made-up signature), `script` (an original cursive word) and `mark` (a letter in a circle, or an SVG of your own); see [docs/custom-balls.md](./docs/custom-balls.md). The package carries no logo of anyone's: a logo or a mark is the one you pass.
|
|
96
117
|
- **Labels in two languages**: the `<title>` is English or Japanese (`locale`), your own words (`title: "…"`), or left out for an emblem that sits beside text that says the same (`title: false`).
|
|
97
118
|
- **As an image, a sprite, a podium or a case**: `emblemDataUri` for an `<img>`, a CSS background or a canvas, `emblemSprite` to draw one emblem fifty times cheaply, `sportEquipment` for what a sport is played with, and `podium` and `awardCase` for results and trophy shelves; see [docs/compose.md](./docs/compose.md).
|
|
@@ -259,28 +280,7 @@ More in [docs/turning.md](./docs/turning.md).
|
|
|
259
280
|
|
|
260
281
|
### Engrave an emblem
|
|
261
282
|
|
|
262
|
-
|
|
263
|
-
import { renderEmblem } from "@johnmorrisdotca/dougu-sports/emblems";
|
|
264
|
-
|
|
265
|
-
const medal = renderEmblem("medal:gold", { engrave: "MVP 2026" });
|
|
266
|
-
console.log(medal.includes(">MVP<") && medal.includes(">2026<")); // true
|
|
267
|
-
const plaque = renderEmblem("trophy:plaque", { label: "Champions", year: 2026 });
|
|
268
|
-
console.log(plaque.includes(">Champions<") && plaque.includes(">2026<")); // true
|
|
269
|
-
const cup = renderEmblem("trophy:hockey-cup", { engrave: "優勝 2026" });
|
|
270
|
-
console.log(cup.includes(">優<")); // true
|
|
271
|
-
console.log(renderEmblem("medal:gold").includes("<text")); // false
|
|
272
|
-
```
|
|
273
|
-
|
|
274
|
-
A medal, a place badge, the plaque, the belt, a ring (the team up one shoulder and the year down the other), a banner and a pennant take an engraving, and so does the plinth of every cup that stands on one. Give one string (`engrave`, any text, Japanese included, up to three lines of 24 letters), or a `label`, a `year` and a `rank`: the rank is the biggest line, the year the smallest. The text is escaped, fitted to its face (a longer word is set smaller, and a space is a place to break the line when that makes bigger letters) and cut in the ink that reads at 4.5 to 1 on the metal, a tone of the metal, black or white, in the line style the page's ink.
|
|
275
|
-
|
|
276
|
-
```js
|
|
277
|
-
import { emblemFrame } from "@johnmorrisdotca/dougu-sports/turn";
|
|
278
|
-
|
|
279
|
-
const at = (yaw) => emblemFrame("medal:gold", { engrave: "MVP", engraveBack: "2026", yaw });
|
|
280
|
-
console.log(at(0).includes(">MVP<"), at(180).includes(">MVP<"), at(180).includes(">2026<")); // true false true
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
Turned, the engraving goes with its face: squeezed with a medal, hidden on its back (which has an engraving of its own when `engraveBack` is given), and on a cup set letter by letter round the plinth, so it foreshortens, slides behind the edge and comes round again. A drawn numeral or star that an engraving replaces is left out.
|
|
283
|
+
`engrave` (one string, any text, Japanese included), or `label`, `year` and `rank`, cuts text into a medal, a place badge, the plaque, the belt, a ring, a banner, a pennant and the plinth of every cup that stands on one, in the ink that reads on the metal, and it turns with the emblem. Every option, the back of a medal (`engraveBack`) and every example: [engraving](./docs/engraving.md).
|
|
284
284
|
|
|
285
285
|
### Draw a championship pennant
|
|
286
286
|
|
|
@@ -484,7 +484,7 @@ The thirty-eight sports the ball, gear and sport emblems are made for are `SPORT
|
|
|
484
484
|
| `initials` | Up to three letters (a crest, or the championship banner) | none: the crest has a star, the banner a ring and a star |
|
|
485
485
|
| `theme` | `"inherit"`, `"auto"`, `"light"`, `"dark"` | `"inherit"` |
|
|
486
486
|
| `grain` | `true` or `false` (a ball only) | on for a ball of 48 pixels or more that is not turning |
|
|
487
|
-
| `engrave` | Any text, up to three lines of 24 letters, Japanese included: cut into the face (see [
|
|
487
|
+
| `engrave` | Any text, up to three lines of 24 letters, Japanese included: cut into the face (see [engraving](./docs/engraving.md)) | none |
|
|
488
488
|
| `label`, `year`, `rank` | The words, the year (smaller, under them) and the number (the biggest line) to engrave when `engrave` is not given | none (a place badge's rank is its place) |
|
|
489
489
|
| `engraveBack` | The text of a medal's, ring's or banner's back, shown when it is turned over | a plain back |
|
|
490
490
|
| `backnumber` | `{ name, code, band }` for `gear:judogi-back` and `gear:judogi-blue-back`: the family name in capitals, the three letters of the National Olympic Committee, and `"blue"`, `"gold"` or `"red"` for the band ([docs/judogi-back.md](./docs/judogi-back.md)) | `TANAKA`, `JPN`, blue |
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "0.12.
|
|
1
|
+
export declare const VERSION = "0.12.1";
|
package/dist/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const VERSION = "0.12.
|
|
1
|
+
export const VERSION = "0.12.1";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@johnmorrisdotca/dougu-sports",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.1",
|
|
4
4
|
"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.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sports",
|
|
@@ -130,7 +130,8 @@
|
|
|
130
130
|
"flags": "node scripts/make-flags.mjs",
|
|
131
131
|
"site": "pnpm build && node scripts/site.ts",
|
|
132
132
|
"test:demo": "pnpm site && playwright test",
|
|
133
|
-
"screenshots": "pnpm site && node scripts/screenshots.ts"
|
|
133
|
+
"screenshots": "pnpm site && node scripts/screenshots.ts",
|
|
134
|
+
"animations": "pnpm build && node scripts/animations.ts"
|
|
134
135
|
},
|
|
135
136
|
"devDependencies": {
|
|
136
137
|
"@eslint/js": "^9.0.0",
|