A simple library to display tournament brackets (round-robin, single elimination, double elimination)
It contains all the logic needed to display tournaments.
- Supports translation (i18next)
- Full vanilla JS (no framework)
- One function to call (see
/demo/index.html
) - Themes supported, with CSS variables (see
/demo/themes
)
Import the library from npm using jsDelivr:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/brackets-viewer/dist/brackets-viewer.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brackets-viewer/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 just like in the /demo
folder.
To quickly test, you can use json-server
:
-
Run the npm script named
db
to serve the static database file/demo/db.json
npm run db
-
Use directly the
db.json
file generated by unit tests in thebrackets-manager
projectnpx json-server --watch path/to/brackets-manager/db.json
Install all npm dependencies:
npm install
Build with Webpack:
npm run build
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)