Skip to content

A simple library to display tournament brackets (round-robin, single elimination, double elimination).

License

Notifications You must be signed in to change notification settings

Drarig29/brackets-viewer.js

Repository files navigation

brackets-viewer.js

npm Downloads jsDelivr Package Quality

A simple library to display tournament brackets (round-robin, single elimination, double elimination)

It contains all the logic needed to display tournaments.

Features

Screenshot

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 the brackets-manager project

    npx 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: