brackets-viewer
v1.6.2
Published
A simple library to display tournament brackets (round-robin, single elimination, double elimination)
Downloads
1,035
Maintainers
Readme
brackets-viewer.js
A simple library to display tournament brackets (round-robin, single elimination, double elimination)
It contains all the logic needed to display tournaments.
Features
- Supports translation (i18next), which also allows you to change the vocabulary
- It was developed in vanilla JS, so you can use it in any framework
- A full working example of creating and displaying brackets (see
./demo/with-ui.html
) - Themes supported, with CSS variables (see
./demo/themes
) - Display participant images next to their name (example)
- Do actions when a match is clicked (example, feature request)
- Custom round names: do you want to say "Semi Finals" instead of "Round 2"? (example, feature request)
How to use?
Import the library from npm using jsDelivr (you can replace @latest
to lock a specific version):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/brackets-viewer@latest/dist/brackets-viewer.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brackets-viewer@latest/dist/brackets-viewer.min.js"></script>
Or from GitHub with (you can replace @master
by any branch name, tag name or commit id):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Drarig29/brackets-viewer.js@master/dist/brackets-viewer.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Drarig29/brackets-viewer.js@master/dist/brackets-viewer.min.js"></script>
Now, you can use it with data generated using brackets-manager or with crafted data following the brackets-model.
Usage:
This will find a unique element with a .brackets-viewer
class, and append to it:
window.bracketsViewer.render({
stages: data.stage,
matches: data.match,
matchGames: data.match_game,
participants: data.participant,
});
If you want to clear the container's content before rendering again, use this:
window.bracketsViewer.render({
stages: data.stage,
matches: data.match,
matchGames: data.match_game,
participants: data.participant,
}, {
clear: true,
});
If you have multiple elements with a .brackets-viewer
class, you must provide a selector
:
window.bracketsViewer.render({
stages: data.stage,
matches: data.match,
matchGames: data.match_game,
participants: data.participant,
}, {
selector: '#example',
});
See the full documentation for the render()
configuration.
Demos
To quickly test, you can also try the demos by visiting ./demo/index.html
.
To use json-server
, you can:
Run the npm script named
db
to serve the static database file./demo/db.json
npm run db
Or use directly the
db.json
file generated by unit tests in thebrackets-manager
projectnpx json-server --watch path/to/brackets-manager/db.json
Credits
This library has been created to be used by the Nantarena.
It has been inspired by:
- Toornament (design inspiration)
- Responsive Tournament Bracket (connection between matches in plain CSS)