Taisen Brackets documentation
Taisen Brackets 対戦 — Knockout brackets as SVG
Knockout brackets as SVG, from a list of ties.
Install
npm install @johnmorrisdotca/taisen-bracketsStart here
Entry points
| Import it | What it is |
|---|---|
@johnmorrisdotca/Where every tie sits · 61 exports | |
@johnmorrisdotca/Ready-made formats for each league · 9 exports | |
@johnmorrisdotca/The road to the final · 14 exports | |
@johnmorrisdotca/Backgrounds for a bracket · 11 exports | |
@johnmorrisdotca/Draw a bracket, a table or a road to the final · 205 exports |
Guides
How-to
- Ties and resultsA bracket is made of ties, and a tie is whatever it took to decide who goes on: one game, a best-of-seven series, two legs added up, or a game replayed.
- A bracket for any number of teamsSometimes you have a bracket before you have a result: a tournament that is about to start, or one that is filling in as the games are played.
- Layouts, looks and backgroundsThe same ties can be drawn many ways.
- Formats by era: NHL, NBA, MLB, NFL, CFL, MLS and the World CupA bracket is not the same thing in every year.
- Plain HTML and CDNsDraw a bracket on a plain page with one module script from jsDelivr or unpkg.
- Vite and webpackInstall the package and draw a bracket in a Vite or webpack project.
- Marks, flags, the champion and its trophyA bracket of names is a table.
- In React, Vue, Svelte and AngularDraw a bracket in React, Vue, Svelte and Angular: the SVG string goes in as HTML.
- The road to the finalA bracket shows the whole tournament.
- TypeScript and NodeUse the package's types, and draw the same bracket as SVG text on a server with no DOM.
- Embed a bracket in an iframeShow a bracket on a page that allows no scripts, with an iframe of the demo's embed page.
- Languages and accessibilityA World Cup is read in many languages, and a bracket is read by people who cannot see it.
- Judo, rankings, medals and broadcast boardsThe package began with knockout brackets, and the same drawing kit now makes the other graphics around a tournament: a judo bracket with its repechage, a scoreboard for one contest, a rankin
Explanation
- How a bracket is drawnWhat the package does with a list of ties, from the layout to the SVG.
- Architecture: from a list of ties to a string of SVGThis guide is for someone who wants to change the package or to know why it behaves as it does.