Rebracket NPM | npm.io

Rebracket

Rebracket is a JavaScript library for building and displaying single- and double-elimination tournament brackets.

Usage

<div id="bracketExample"></div>

<script src="rebracket.min.js"></script>

var ctx = document.getElementById("bracketExample");

var bracketInstance = window.Rebracket(ctx, {
    format: 'double-elimination',
    size: 4,
    competitors: [
        { name: 'Competitor 1' },
        { name: 'Competitor 2' },
        { name: 'Competitor 3' },
        { name: 'Competitor 4' }
    ],
    results: [
        { matchNumber: 1, winner: 1, score: [5, 3] },
        { matchNumber: 2, winner: 2, score: [0, 1] },
        { matchNumber: 3, winner: 1, score: [2, 1] },
        { matchNumber: 4, winner: 1, score: [3, 1] },
        { matchNumber: 5, winner: 1, score: [4, 1] },
        { matchNumber: 6, winner: 2, score: [0, 1] },
        { matchNumber: 7, winner: 1, score: [3, 2] },
    ],
    options: {
        showMatchNumber: false,
        showScores: true,
        highlightWinner: true
    }
});

Properties

Property	Values	Description
format	`single-elimination` \| `double-elimination`	Specifies type of elimination tournament.
size	`4` \| `8` \| `16` \| `32` \| ... \| `1024`	Specifies size of the bracket with maximum number of competitors.
competitors		List of tournament participants.
results		List of matches results.
options		An options object, with the properties described in the section below.

Options

Property	Values	Description
highlightWinner	`true` (default) or `false`	Displays the names of the winners in bold.
showMatchNumber	`true` or `false` (default)	Displays match numbers.
showScores	`true` (default) or `false`	Displays match scores.
losersRoundsSeeding	`natural` (default) \| `reverse` \| `half-shift` \| `reverse-half-shift` \| `pair-flip`	Represents a collection of key-value pairs, where key is a round number in lower bracket and value is a seeding type. Applies only to even-numbered rounds (when the losers from the upper bracket move to the lower bracket). Usage example:`losersRoundsSeeding: { 2: 'reverse', 4: 'half-shift' }`

License

Rebracket is available under the MIT license.

TypeScript javascript

@infinitebrahmanuniverse/nolb-reb @everything-registry/sub-chunk-2631

1.0.0

6 years ago