@johnmorrisdotca/taisen-brackets 0.17.2 → 0.17.3
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 +10 -0
- package/README.md +73 -194
- 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,16 @@ All notable changes to this project are written here. The format follows
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [0.17.3] - 2026-10-20
|
|
10
|
+
|
|
11
|
+
The npm page and the demo open on the best of it, in motion. No change to the package's code beyond its version.
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- **README: the first thing is a bracket filling in.** The 2022 World Cup knockout fills in game by game (`docs/images/hero-fill-*.webp`), then "The best of it", a picture each: the judo scoreboard on flip cards from the first second to ippon, the mat queue, a provincial ranking list re-ordering with its movement arrows, the broadcast results board, a medal table changing from one Games to the next, and the road look. Every animation is an animated webp in a light and a dark twin, under 150 kB each. The README is shorter than before: "Every sport" moved to `docs/every-sport.md` and the per-layout pictures and examples to the end of `docs/layouts.md` (nothing removed).
|
|
16
|
+
- **The pictures are made by a script from the demo:** `pnpm animations` (`scripts/animations.mjs`) takes one frame per step with Playwright, from the demo's own data, and joins them with `img2webp`.
|
|
17
|
+
- **Demo: it opens on the World Cup bracket filling in game by game**, with its options beside it on a desk (the bracket and its play bar stay in view while the options scroll) and under it on a phone, where the bar is pinned at the top. Pause, Play again and a slider hold or replay any game; changing the sport's options, the look, the language or the layout while it plays leaves the games coming in; the stage keeps room for the finished bracket so nothing below moves. The address holds `game` and `play=0` once it is paused (an address that names a game opens paused at it); a reader who prefers reduced motion gets the finished bracket. A jump bar leads to the judo, ranking, medal and broadcast sections.
|
|
18
|
+
|
|
9
19
|
## [0.17.2] - 2026-10-20
|
|
10
20
|
|
|
11
21
|
Security fix.
|
package/README.md
CHANGED
|
@@ -11,54 +11,75 @@ Give it the games, series, two-legged ties or replays of a tournament and it wor
|
|
|
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/taisen-brackets/"><strong>Open the demo →</strong></a> · <a href="./docs/layout.md">Layout</a> · <a href="./docs/layouts.md">Layouts</a> · <a href="./docs/drawing.md">Drawing</a> · <a href="./docs/road.md">Road to the final</a> · <a href="./docs/backgrounds.md">Backgrounds</a> · <a href="./docs/judo.md">Judo</a> · <a href="./docs/rankings.md">Rankings</a> · <a href="./docs/medals.md">Medal table</a> · <a href="./docs/broadcast.md">Broadcast boards</a> · <a href="./docs/formats.md">Formats</a> · <a href="./docs/compare.md">How it compares</a></p>
|
|
14
|
+
<p align="center"><a href="https://johnmorrisdotca.github.io/taisen-brackets/"><strong>Open the demo →</strong></a> · <a href="./docs/layout.md">Layout</a> · <a href="./docs/layouts.md">Layouts</a> · <a href="./docs/every-sport.md">Every sport</a> · <a href="./docs/drawing.md">Drawing</a> · <a href="./docs/road.md">Road to the final</a> · <a href="./docs/backgrounds.md">Backgrounds</a> · <a href="./docs/judo.md">Judo</a> · <a href="./docs/rankings.md">Rankings</a> · <a href="./docs/medals.md">Medal table</a> · <a href="./docs/broadcast.md">Broadcast boards</a> · <a href="./docs/formats.md">Formats</a> · <a href="./docs/compare.md">How it compares</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/taisen-brackets/main/docs/images/hero-
|
|
19
|
-
<img alt="The 2022 World Cup knockout: two halves
|
|
18
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/hero-fill-dark.webp">
|
|
19
|
+
<img alt="The 2022 World Cup knockout filling in game by game: sixteen teams in two halves on a pitch, the round of 16 results coming in one after another, then the quarter-finals and the semi-finals, and at the end the final and the third-place match, with Argentina's round flag, a trophy and the word Champion in the centre." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/hero-fill-light.webp" width="760">
|
|
20
20
|
</picture>
|
|
21
21
|
</p>
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
<tr>
|
|
25
|
-
<td align="center" valign="top">
|
|
26
|
-
<img alt="The poster look: the 2026 World Cup knockout of 32 nations as round flags on dark navy joined by gold lines, Spain's flag in the centre above the word Champion." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/poster-desk.webp" width="470"><br><em>The poster look: flags only, gold on navy (the 2026 World Cup).</em>
|
|
27
|
-
</td>
|
|
28
|
-
<td align="center" valign="top">
|
|
29
|
-
<img alt="The 2022 World Cup on a phone: the champion at the top, then the rounds as rows, the first round at the top and at the bottom, the final in the middle, and the third-place match at the foot." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/phone-light.webp" width="190"><br><em>On a phone the rounds are rows.</em>
|
|
30
|
-
</td>
|
|
31
|
-
</tr>
|
|
32
|
-
</table>
|
|
23
|
+
## The best of it
|
|
33
24
|
|
|
34
|
-
|
|
25
|
+
The pictures above and below are drawn by the package from the demo's own data and made by `pnpm animations` and `pnpm images`; the demo opens on the same bracket filling in, with its options beside it. Brackets of every sport and layout are in [Every sport](./docs/every-sport.md) and [Layouts](./docs/layouts.md).
|
|
35
26
|
|
|
36
|
-
|
|
27
|
+
### Judo: the scoreboard, flip cards and the mat queue
|
|
37
28
|
|
|
38
|
-
<
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
</
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
29
|
+
<p align="center">
|
|
30
|
+
<picture>
|
|
31
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-flip-dark.webp">
|
|
32
|
+
<img alt="A judo contest on the flip-card scoreboard, from four minutes on the clock to ippon: a shido for blue, a yuko for each side, the osaekomi timer counting up to ten seconds for a waza-ari and on to twenty for the ippon, and the winner named at the foot." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-flip-light.webp" width="720">
|
|
33
|
+
</picture>
|
|
34
|
+
</p>
|
|
35
|
+
A judo contest is a tie with a `judo` result: ippon, waza-ari, yuko and shido as the IJF's current Sport and Organisation Rules score them (yuko is back since 2025), golden score, the contest time and how it was won. The box writes the marks (`I`, `W`, `Y`), the shido as yellow and red cards and a note under the two rows, in the five languages. `judoBracket` makes a weight category's bracket with the IJF's repechage and its two bronze medal contests. [docs/judo.md](./docs/judo.md) quotes the rules it follows. `judoScoreboard` draws one contest's scoreboard for a given state (the athletes with flags and codes, ippon, waza-ari and yuko counters, shido cards, clock, golden score, osaekomi timer, weight class and round), on a TV or a tablet, as a screen board or as table-top flip cards: [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#board). `judoContestCard` and `judoMatQueue` draw the card shown when the athletes enter and the board of the next contests per mat, with a big mat number and colour ([demo](https://johnmorrisdotca.github.io/taisen-brackets/#queue)). `judoWins` and `judoRoadPanel` draw the road to the final of one judoka, the contests they have won on the way, most recent first ([demo](https://johnmorrisdotca.github.io/taisen-brackets/#judoroad)).
|
|
36
|
+
|
|
37
|
+
<p align="center"><picture>
|
|
38
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-desk-dark.webp">
|
|
39
|
+
<img alt="A made-up men's minus 66 kilogram judo tournament of 16 athletes with round flags, score marks, shido cards, how each contest was won and its time, and the repechage and bronze medal contests under the tree." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-desk-light.webp" width="720">
|
|
40
|
+
</picture><br><em>Men's -66 kg, with the quarter-final repechage (invented names).</em></p>
|
|
41
|
+
|
|
42
|
+
<p align="center"><img alt="The mat queue board on a tablet: for each mat a big number and colour and the contests to come in order, each with the white and the blue athlete's flag and code." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-queue-tablet-light.webp" width="560"></p>
|
|
43
|
+
<p align="center"><em>The mat queue (invented athletes).</em></p>
|
|
44
|
+
|
|
45
|
+
### Rankings, in the style of a provincial federation
|
|
46
|
+
|
|
47
|
+
<p align="center">
|
|
48
|
+
<picture>
|
|
49
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/ranking-live-dark.webp">
|
|
50
|
+
<img alt="A provincial ranking list taking in new results: the top three as big gold, silver and bronze rows and the ranks 4 to 12 beside them, re-ordering after each tournament with green and red arrows for the places gained and lost." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/ranking-live-light.webp" width="720">
|
|
51
|
+
</picture>
|
|
52
|
+
</p>
|
|
53
|
+
`rankingList` draws a ranking for any ranked sport from your own data (a province's or a club's feed, a federation's list), text first, with no photo slot to leave empty: the rank, a flag (a country's or a Canadian province's, `CA-BC`), the name, the club and the points, with the movement since the last list as arrows or row colours. The top three can be big gold, silver and bronze rows above a compact list, a champion row is marked `C`, tied ranks share a number (`10`, `10`), a newly ranked athlete is `NR`, and points are written to the sport's own precision (`91.60`). `rankingNumberOnes` draws the number one of each category as a card (`#1 in -57 kg`), and `rankingEntryList` an event's entry list in the order of the draw with each athlete's ranking beside the name. `rankingMatchup` draws the head-to-head card of two athletes with their previous meetings and the record. `rankingRanks` and `rankingCategoryLabel` are helpers, `describeRanking`, `describeNumberOnes` and `describeEntryList` the descriptions, `NUMBER_ONE_COLORS` the card colours and `BOARD_SIZES` the sizes of every board (a TV, a tablet, a phone, and a square and a 4:5 card for social media). [docs/rankings.md](./docs/rankings.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#rankings)
|
|
54
|
+
|
|
55
|
+
<p align="center"><picture>
|
|
56
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/ranking-podium-tv-dark.webp">
|
|
57
|
+
<img alt="A ranking list on a TV: three big rows tinted gold, silver and bronze for the first three, and the ranks 4 to 15 as compact rows beside them, each with its rank, movement arrow, round flag, name, club and points." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/ranking-podium-tv-light.webp" width="720">
|
|
58
|
+
</picture><br><em>A made-up provincial ranking (invented names and clubs).</em></p>
|
|
60
59
|
|
|
61
|
-
|
|
60
|
+
### Broadcast boards
|
|
61
|
+
|
|
62
|
+
`resultsBoard` draws a results board in the manner of a television graphic: a title band with an icon, a sub bar, and a row for each athlete with a rank in a box, the country code, a 4:3 flag, the name, a record badge (`OR`, `WR`, `NR`) and one or more columns of scores or times at the sport's own precision (a gymnastics final, an all-around, a swimming final, athletics, speed skating). It is one standalone SVG of a width you choose and a height that follows from the rows (`resultsBoardSize`), made to be placed over a picture, in three looks and with no mark of any games or broadcaster. `boutBoard` draws the bout presentation: the two athletes in a red and a blue band, the referee and the judges. `broadcastMedalTable` draws the medal table with a disc for each medal. [docs/broadcast.md](./docs/broadcast.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#boards)
|
|
63
|
+
|
|
64
|
+
<p align="center"><picture>
|
|
65
|
+
<img alt="A results board in the blue look: a gymnastics apparatus final with a title band, a sub bar with three score columns, and eight rows with a red rank box, country code, flag, name and scores." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/results-apparatus-blue.webp" width="640">
|
|
66
|
+
</picture><br><em>A made-up apparatus final (invented athletes and scores).</em></p>
|
|
67
|
+
|
|
68
|
+
### Medal table
|
|
69
|
+
|
|
70
|
+
<p align="center">
|
|
71
|
+
<picture>
|
|
72
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/medals-live-dark.webp">
|
|
73
|
+
<img alt="A medal table changing from one Games to the next: the ranks, flags, gold, silver and bronze counts and totals of the top eight countries, re-ordered each time, with equal rows sharing a rank." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/medals-live-light.webp" width="640">
|
|
74
|
+
</picture>
|
|
75
|
+
</p>
|
|
76
|
+
`medalTable` draws a medal table for any sport and event (an Olympic Games, a world championship, a club tournament): ranked gold first or by the total, equal rows sharing a rank (5, 5, 7), a flag or a badge for each country or team (a former country such as the Soviet Union is a row of its own), the three medals and the total, in two columns where the board is wide. `tallyMedals` adds up a list of medals filtered to one sport, one weight class or one Games, and `medalRanks` gives the ranks as data. [docs/medals.md](./docs/medals.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#medals)
|
|
77
|
+
|
|
78
|
+
<p align="center"><picture>
|
|
79
|
+
<img alt="A medal table on a 4:5 card: ten countries with rank, flag or badge, name, gold, silver and bronze counts in tinted cells and the total." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/medal-table-portrait-light.webp" width="480">
|
|
80
|
+
</picture><br><em>A made-up medal table (invented results).</em></p>
|
|
81
|
+
|
|
82
|
+
### The road look, and the road to the final
|
|
62
83
|
|
|
63
84
|
`look: "road"` draws the bracket with large round flags, big bold scores and a team's path as a dotted line, and `roadToFinal` draws the way each finalist came from the same tournament.
|
|
64
85
|
|
|
@@ -75,132 +96,24 @@ One layout draws them all, each from real results: the demo has a picker for the
|
|
|
75
96
|
</tr>
|
|
76
97
|
</table>
|
|
77
98
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
`layout` draws the same ties another way: the default, `"tree"`, is the bracket above; the others are `"rows"`, `"shields"`, `"update"`, `"columns"`, `"playin"`, `"series"` and `"groups"`. Each takes the `background`, both looks, the four sizes, the five languages, `href` links, seeds, codes, flags and logos, and a team with no picture is its tile. [docs/layouts.md](./docs/layouts.md) has the options and what each needs.
|
|
81
|
-
|
|
82
|
-
### rows
|
|
83
|
-
|
|
84
|
-
Each team a row, its name on the left and its mark on the right, its seed tag at the outer corner, and a slot for the result at the end that faces the centre (empty until the tie is played): the NHL poster's style.
|
|
85
|
-
|
|
86
|
-
<p align="center"><img alt="The 2024 NHL playoffs as rows: each team's abbreviation and seed tag, its logo tile and a slot with the games won, on an ice background." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/layout-rows-nhl.webp" width="640"></p>
|
|
87
|
-
|
|
88
|
-
```js
|
|
89
|
-
import { drawBracket } from "@johnmorrisdotca/taisen-brackets";
|
|
90
|
-
|
|
91
|
-
const ties = [
|
|
92
|
-
{ id: "a", sides: ["BOS", "MIA"], round: 1, bestOf: 7, score: [4, 1] },
|
|
93
|
-
{ id: "b", sides: ["NYK", "IND"], round: 1, bestOf: 7, score: [4, 3] },
|
|
94
|
-
{ id: "c", sides: ["BOS", "NYK"], round: 2, bestOf: 7, score: [2, 1] },
|
|
95
|
-
];
|
|
96
|
-
const svg = drawBracket(ties, { layout: "rows", look: "road", seeds: true });
|
|
97
|
-
console.log(svg.includes("tb-slot")); // true
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
### shields
|
|
101
|
-
|
|
102
|
-
Marks in shield shapes with "vs" between the two of a tie, the matchups listed down both sides of the trophy; no connector lines.
|
|
103
|
-
|
|
104
|
-
<p align="center"><img alt="The 2022 World Cup as shields: each tie two round flags in shields with vs between them and the score under each, the final under the trophy." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/layout-shields-wc2022.webp" width="640"></p>
|
|
105
|
-
|
|
106
|
-
```js
|
|
107
|
-
import { drawBracket } from "@johnmorrisdotca/taisen-brackets";
|
|
108
|
-
|
|
109
|
-
const svg = drawBracket([{ sides: ["ARG", "FRA"], score: [3, 3], pens: [4, 2] }], { layout: "shields" });
|
|
110
|
-
console.log(svg.includes("tb-shield"), svg.includes(">vs<")); // true true
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
### update
|
|
114
|
-
|
|
115
|
-
A compact score-update card: each side's abbreviation, seed and series score, and empty cards for the rounds still to come, the final in the centre. Put the "as of" date in `subtitle`.
|
|
116
|
-
|
|
117
|
-
<p align="center"><img alt="A score-update card of the 2024 NHL playoffs: abbreviations with seeds and the games won in a cell on the right, on an aurora background." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/layout-update-nhl.webp" width="640"></p>
|
|
99
|
+
### Every size and look
|
|
118
100
|
|
|
119
|
-
|
|
120
|
-
import { drawBracket } from "@johnmorrisdotca/taisen-brackets";
|
|
121
|
-
|
|
122
|
-
const teams = [{ id: "A", name: "Alpha", abbr: "ALP", seed: 1 }, { id: "B", name: "Beta", abbr: "BET", seed: 8 }];
|
|
123
|
-
const svg = drawBracket({ teams, matchups: [{ sides: ["A", "B"], round: 1, bestOf: 7, score: [4, 2] }] }, { layout: "update", subtitle: "as of May 1" });
|
|
124
|
-
console.log(svg.includes(">ALP<"), svg.includes(">as of May 1<")); // true true
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### columns
|
|
128
|
-
|
|
129
|
-
The NFL poster's style: each round a column of tall slots that get taller toward the centre, one conference in each of two colours, a "VS" tag between the two slots of a tie, a big seed number beside a team that has a `seed`, and the final as two tall slots side by side. `at: true` writes the language's "AT" in place of "VS", the second side being the one at home (or the side `Matchup.home` names). `headers: true` adds the conference tiles.
|
|
130
|
-
|
|
131
|
-
<p align="center"><img alt="The 2024 NFL playoffs as columns: tall slots growing toward the centre, the AFC in blue and the NFC in red, VS tags between the slots, the Super Bowl as two tall slots, with a title tile over each half." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/layout-columns-nfl.webp" width="640"></p>
|
|
132
|
-
|
|
133
|
-
```js
|
|
134
|
-
import { drawBracket } from "@johnmorrisdotca/taisen-brackets";
|
|
135
|
-
|
|
136
|
-
const ties = [{ sides: ["KC", "BUF"], round: 1, score: [27, 24], home: 0 }, { sides: ["PHI", "WAS"], round: 1, score: [28, 23] }];
|
|
137
|
-
const svg = drawBracket(ties, { layout: "columns", at: true });
|
|
138
|
-
console.log(svg.includes(">AT<"), svg.includes(">VS<")); // true false
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
### playin
|
|
142
|
-
|
|
143
|
-
The NBA's play-in: the games of each half (a `stage: "play-in"` tie), with a **winner's arrow solid and a loser's dashed**, into the game that takes it ("Winner 9/10", "Loser 7/8") or the seed it earns, and the seeds that need no game as tiles. A tie says where a side comes from with `feeds`, whose entries can now be `{ tie, result: "winner" | "loser" }`; `Tie.from` has it back.
|
|
144
|
-
|
|
145
|
-
<p align="center"><img alt="The 2024 NBA play-in: for each conference the 7 v 8 and 9 v 10 games, a dashed arrow for the 7 v 8 loser into the decider with the 9 v 10 winner, and a solid arrow into the 7th and 8th seed slots, beside tiles for seeds 1 to 6." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/layout-playin-nba.webp" width="640"></p>
|
|
146
|
-
|
|
147
|
-
```js
|
|
148
|
-
import { drawBracket, layoutBracket } from "@johnmorrisdotca/taisen-brackets";
|
|
149
|
-
|
|
150
|
-
const matchups = [
|
|
151
|
-
{ id: "p78", stage: "play-in", sides: ["T7", "T8"], score: [105, 104], seeds: [7, 8] },
|
|
152
|
-
{ id: "p910", stage: "play-in", sides: ["T9", "T10"], score: [131, 116], seeds: [9, 10] },
|
|
153
|
-
{ id: "dec", stage: "play-in", sides: ["T8", "T9"], score: [112, 91], feeds: [{ tie: "p78", result: "loser" }, { tie: "p910", result: "winner" }] },
|
|
154
|
-
];
|
|
155
|
-
console.log(JSON.stringify(layoutBracket({ matchups }).ties[2].from)); // [{"tie":0,"result":"loser"},{"tie":1,"result":"winner"}]
|
|
156
|
-
console.log(drawBracket({ matchups }, { layout: "playin" }).includes("tb-arrow-loser")); // true
|
|
157
|
-
```
|
|
101
|
+
Wide, square, a card for a post and a tall one for a phone, in light, dark or a gold-on-navy poster look; [Every sport](./docs/every-sport.md) has the same bracket drawn for the NHL, NBA, MLB, NFL, CFL, MLS and the World Cup.
|
|
158
102
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
console.log(svg.includes('viewBox="0 0 1080 1350"'), svg.includes(">4–0<")); // true true
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
### groups
|
|
173
|
-
|
|
174
|
-
The group stage as one card a group: a title tile ("Group A"), a row a team with its flag or mark, its name and its record, the places that go through marked. The standings are worked out from the round-robin games (`round: 0`); `standings: "record"` is wins and losses (softball's), and `"points"` (the default) played, won, drawn, lost, goal difference and points. `qualify: 2` marks the top two of each group.
|
|
175
|
-
|
|
176
|
-
<p align="center"><img alt="The group stage of a made-up cup: four cards, each with a title tile and four teams with their marks and played, won, drawn, lost, goal difference and points, the top two of each marked." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/layout-groups-cup.webp" width="640"></p>
|
|
177
|
-
|
|
178
|
-
<p align="center"><img alt="Softball pool play on a phone: three cards of four teams with their wins and losses, the top two of each marked, on a royal background." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/layout-groups-softball.webp" width="260"></p>
|
|
179
|
-
|
|
180
|
-
```js
|
|
181
|
-
import { drawBracket, groupStandings } from "@johnmorrisdotca/taisen-brackets";
|
|
182
|
-
|
|
183
|
-
const games = [
|
|
184
|
-
{ sides: ["A", "B"], round: 0, score: [2, 0] }, { sides: ["A", "C"], round: 0, score: [1, 1] }, { sides: ["B", "C"], round: 0, score: [0, 3] },
|
|
185
|
-
];
|
|
186
|
-
console.log(groupStandings({ matchups: games })[0].rows.map((r) => `${r.team.id} ${r.points}`).join(", ")); // C 4, A 4, B 0
|
|
187
|
-
console.log(drawBracket({ matchups: games }, { layout: "groups", qualify: 2 }).includes("Group A")); // true
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
### Conference headers, a lone final, one stylesheet
|
|
191
|
-
|
|
192
|
-
`headers: true` puts a big title tile over each half (West and East, AFC and NFC) in the colour of that half, in any layout. A tournament that ended with a lone final and a third-place match (the World Cups of 1974 and 1978) is drawn with them centred, the champion over the final. And two sizes of the same bracket on one page can share one stylesheet: `styleScope` names the class that carries the rules, `style: false` leaves the `<style>` out of the second drawing, and `bracketStyle(options)` is the stylesheet for a page that writes it once itself.
|
|
193
|
-
|
|
194
|
-
<p align="center"><img alt="A lone final and a third-place match, centred: the champion above the final, the third place under it, on a pitch background." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/layout-lone-final.webp" width="560"></p>
|
|
103
|
+
<table align="center">
|
|
104
|
+
<tr>
|
|
105
|
+
<td align="center" valign="top">
|
|
106
|
+
<img alt="The poster look: the 2026 World Cup knockout of 32 nations as round flags on dark navy joined by gold lines, Spain's flag in the centre above the word Champion." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/poster-desk.webp" width="470"><br><em>The poster look: flags only, gold on navy (the 2026 World Cup).</em>
|
|
107
|
+
</td>
|
|
108
|
+
<td align="center" valign="top">
|
|
109
|
+
<img alt="The 2022 World Cup on a phone: the champion at the top, then the rounds as rows, the first round at the top and at the bottom, the final in the middle, and the third-place match at the foot." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/phone-light.webp" width="190"><br><em>On a phone the rounds are rows.</em>
|
|
110
|
+
</td>
|
|
111
|
+
</tr>
|
|
112
|
+
</table>
|
|
195
113
|
|
|
196
|
-
|
|
197
|
-
import { bracketStyle, drawBracket } from "@johnmorrisdotca/taisen-brackets";
|
|
114
|
+
## Layouts
|
|
198
115
|
|
|
199
|
-
|
|
200
|
-
const desk = drawBracket(ties, { styleScope: "mine", size: "wide" });
|
|
201
|
-
const phone = drawBracket(ties, { styleScope: "mine", size: "phone", style: false });
|
|
202
|
-
console.log(desk.includes("<style>"), phone.includes("<style>"), desk.includes(bracketStyle({ styleScope: "mine" }))); // true false true
|
|
203
|
-
```
|
|
116
|
+
`layout` draws the same ties another way: the default, `"tree"`, is the bracket above; the others are `"rows"`, `"shields"`, `"update"`, `"columns"`, `"playin"`, `"series"` and `"groups"`. Each takes the `background`, both looks, the four sizes, the five languages, `href` links, seeds, codes, flags and logos, and a team with no picture is its tile. [docs/layouts.md](./docs/layouts.md) has the options and what each needs.
|
|
204
117
|
|
|
205
118
|
## Backgrounds
|
|
206
119
|
|
|
@@ -238,40 +151,6 @@ console.log(ice.includes("tb-bgd"), mine.includes("#ff7ac8"), photo.includes('<i
|
|
|
238
151
|
|
|
239
152
|
In the road look, `seeds: true` writes a small tag (`P1`, `WC2`) beside each team's mark, `codes: true` its three letters under the mark in a box of marks, `vs: true` a "v" between the two marks, and a team with no flag or logo is a tile with its letters. [docs/backgrounds.md](./docs/backgrounds.md) has the options, the contrast rules and the module the other packages of the family share.
|
|
240
153
|
|
|
241
|
-
## Judo
|
|
242
|
-
|
|
243
|
-
A judo contest is a tie with a `judo` result: ippon, waza-ari, yuko and shido as the IJF's current Sport and Organisation Rules score them (yuko is back since 2025), golden score, the contest time and how it was won. The box writes the marks (`I`, `W`, `Y`), the shido as yellow and red cards and a note under the two rows, in the five languages. `judoBracket` makes a weight category's bracket with the IJF's repechage and its two bronze medal contests. [docs/judo.md](./docs/judo.md) quotes the rules it follows. `judoScoreboard` draws one contest's scoreboard for a given state (the athletes with flags and codes, ippon, waza-ari and yuko counters, shido cards, clock, golden score, osaekomi timer, weight class and round), on a TV or a tablet, as a screen board or as table-top flip cards: [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#board). `judoContestCard` and `judoMatQueue` draw the card shown when the athletes enter and the board of the next contests per mat, with a big mat number and colour ([demo](https://johnmorrisdotca.github.io/taisen-brackets/#queue)). `judoWins` and `judoRoadPanel` draw the road to the final of one judoka, the contests they have won on the way, most recent first ([demo](https://johnmorrisdotca.github.io/taisen-brackets/#judoroad)).
|
|
244
|
-
|
|
245
|
-
<p align="center"><picture>
|
|
246
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-desk-dark.webp">
|
|
247
|
-
<img alt="A made-up men's minus 66 kilogram judo tournament of 16 athletes with round flags, score marks, shido cards, how each contest was won and its time, and the repechage and bronze medal contests under the tree." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/judo-desk-light.webp" width="720">
|
|
248
|
-
</picture><br><em>Men's -66 kg, with the quarter-final repechage (invented names).</em></p>
|
|
249
|
-
|
|
250
|
-
## Rankings
|
|
251
|
-
|
|
252
|
-
`rankingList` draws a ranking for any ranked sport from your own data (a province's or a club's feed, a federation's list), text first, with no photo slot to leave empty: the rank, a flag (a country's or a Canadian province's, `CA-BC`), the name, the club and the points, with the movement since the last list as arrows or row colours. The top three can be big gold, silver and bronze rows above a compact list, a champion row is marked `C`, tied ranks share a number (`10`, `10`), a newly ranked athlete is `NR`, and points are written to the sport's own precision (`91.60`). `rankingNumberOnes` draws the number one of each category as a card (`#1 in -57 kg`), and `rankingEntryList` an event's entry list in the order of the draw with each athlete's ranking beside the name. `rankingMatchup` draws the head-to-head card of two athletes with their previous meetings and the record. `rankingRanks` and `rankingCategoryLabel` are helpers, `describeRanking`, `describeNumberOnes` and `describeEntryList` the descriptions, `NUMBER_ONE_COLORS` the card colours and `BOARD_SIZES` the sizes of every board (a TV, a tablet, a phone, and a square and a 4:5 card for social media). [docs/rankings.md](./docs/rankings.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#rankings)
|
|
253
|
-
|
|
254
|
-
<p align="center"><picture>
|
|
255
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/ranking-podium-tv-dark.webp">
|
|
256
|
-
<img alt="A ranking list on a TV: three big rows tinted gold, silver and bronze for the first three, and the ranks 4 to 15 as compact rows beside them, each with its rank, movement arrow, round flag, name, club and points." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/ranking-podium-tv-light.webp" width="720">
|
|
257
|
-
</picture><br><em>A made-up provincial ranking (invented names and clubs).</em></p>
|
|
258
|
-
|
|
259
|
-
## Medal table
|
|
260
|
-
|
|
261
|
-
`medalTable` draws a medal table for any sport and event (an Olympic Games, a world championship, a club tournament): ranked gold first or by the total, equal rows sharing a rank (5, 5, 7), a flag or a badge for each country or team (a former country such as the Soviet Union is a row of its own), the three medals and the total, in two columns where the board is wide. `tallyMedals` adds up a list of medals filtered to one sport, one weight class or one Games, and `medalRanks` gives the ranks as data. [docs/medals.md](./docs/medals.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#medals)
|
|
262
|
-
|
|
263
|
-
<p align="center"><picture>
|
|
264
|
-
<img alt="A medal table on a 4:5 card: ten countries with rank, flag or badge, name, gold, silver and bronze counts in tinted cells and the total." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/medal-table-portrait-light.webp" width="480">
|
|
265
|
-
</picture><br><em>A made-up medal table (invented results).</em></p>
|
|
266
|
-
|
|
267
|
-
## Broadcast boards
|
|
268
|
-
|
|
269
|
-
`resultsBoard` draws a results board in the manner of a television graphic: a title band with an icon, a sub bar, and a row for each athlete with a rank in a box, the country code, a 4:3 flag, the name, a record badge (`OR`, `WR`, `NR`) and one or more columns of scores or times at the sport's own precision (a gymnastics final, an all-around, a swimming final, athletics, speed skating). It is one standalone SVG of a width you choose and a height that follows from the rows (`resultsBoardSize`), made to be placed over a picture, in three looks and with no mark of any games or broadcaster. `boutBoard` draws the bout presentation: the two athletes in a red and a blue band, the referee and the judges. `broadcastMedalTable` draws the medal table with a disc for each medal. [docs/broadcast.md](./docs/broadcast.md) · [try it in the demo](https://johnmorrisdotca.github.io/taisen-brackets/#boards)
|
|
270
|
-
|
|
271
|
-
<p align="center"><picture>
|
|
272
|
-
<img alt="A results board in the blue look: a gymnastics apparatus final with a title band, a sub bar with three score columns, and eight rows with a red rank box, country code, flag, name and scores." src="https://raw.githubusercontent.com/johnmorrisdotca/taisen-brackets/main/docs/images/results-apparatus-blue.webp" width="640">
|
|
273
|
-
</picture><br><em>A made-up apparatus final (invented athletes and scores).</em></p>
|
|
274
|
-
|
|
275
154
|
## In 30 seconds
|
|
276
155
|
|
|
277
156
|
```sh
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "0.17.
|
|
1
|
+
export declare const VERSION = "0.17.3";
|
package/dist/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const VERSION = "0.17.
|
|
1
|
+
export const VERSION = "0.17.3";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@johnmorrisdotca/taisen-brackets",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.3",
|
|
4
4
|
"description": "Taisen Brackets 対戦, knockout brackets as SVG: from a list of ties (games, best-of series, two legs, replays, byes, a third-place match) it works out the rounds and halves and draws the bracket with the halves meeting at the final, or left to right, wide, square, as a tall card or for a phone, in a classic or a road look (large round flags, big scores, a team's dotted path, a link on every box), in light, dark or a gold-on-navy poster look, in eight layouts (the tree, rows, shields, a score-update card, tall columns, the NBA's play-in, a series card and group tables), on one of twenty-five poster backgrounds (the playing surfaces of five sports among them) or your own, with each team's logo or round flag, the champion in the centre, and an accessible table; and the road to the final of either finalist. NHL, NBA, MLB, NFL, CFL, MLS and World Cup formats by era, in English, French, Japanese, Spanish and German. Zero dependencies.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"bracket",
|
|
@@ -101,7 +101,8 @@
|
|
|
101
101
|
"site": "pnpm build && node scripts/site.mjs",
|
|
102
102
|
"test:demo": "pnpm site && playwright test",
|
|
103
103
|
"images": "pnpm site && node scripts/screenshots.mjs",
|
|
104
|
-
"screenshots": "pnpm site && node scripts/screenshots.mjs"
|
|
104
|
+
"screenshots": "pnpm site && node scripts/screenshots.mjs",
|
|
105
|
+
"animations": "pnpm build && node scripts/animations.mjs"
|
|
105
106
|
},
|
|
106
107
|
"peerDependencies": {
|
|
107
108
|
"@johnmorrisdotca/dougu-sports": ">=0.1.0 <1",
|