Skip to content

Getting Started

Let's set up the most common use-case.

The manager creates the needed data to store the structure of the tournament, all the matches and their results.

Then, it is used to update the results during the progress of the tournament.

The viewer can display the state of the tournament at any point of its lifetime.

Choosing the storage

First, you need to choose what type of storage you will continue with.

The most common choices are:

  • A JSON database, stored in a file
  • An in-memory database, stored in a simple variable

To use a storage, you need to use a CrudInterface implementation.

You will find in this repository a list of NPM packages providing such implementations:

Package
brackets-json-db npm
brackets-memory-db npm

Using the manager

First, create an instance of the storage implementation you chose before:

const { JsonDatabase } = require('brackets-json-db');
const storage = new JsonDatabase();

Then, create a manager by passing the storage implementation to the constructor:

const { BracketsManager } = require('brackets-manager');
const manager = new BracketsManager(storage);

Now, you can start creating tournament stages!

await manager.create({
    name: 'Example stage',
    tournamentId: 0, // (1)
    type: 'single_elimination',
    seeding: [
        'Team 1',
        'Team 2',
        'Team 3',
        'Team 4',
        'Team 5',
        'Team 6',
        'Team 7',
        'Team 8',
    ],
});
  1. Why do you need tournamentId? See the answer in the FAQ.

For more information about the vocabulary (particularly the word "stage"), see the Glossary.

For an explanation about how the seeding works, see Seeding.

For other questions, see FAQ.

Using the viewer

The easiest way to use the viewer is to import it via the CDN links.

Drop this where it's the most suitable in your project:

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

Now you should have access to window.bracketsViewer.

After this, you will need data. Here, either you make an API yourself or you can use json-server to create a quick API directly from the JSON database (if you used brackets-json-db).

Note

If you choose to make an API yourself, you can use manager.get.tournamentData() and manager.get.stageData() to retrieve the needed data for the viewer.

Once you have something to get data from - let's assume the result is in a data variable for the example - you'll be able to do the following:

window.bracketsViewer.render({
    stages: data.stage,
    matches: data.match,
    matchGames: data.match_game,
    participants: data.participant,
})

Which would render something like this:

Fun fact

Here, both the manager and the viewer are running client-side! 😎

Back to top