jQuery Plugin For Customizable Tournament Brackets - Bracket

Just another jQuery based tournament brackets which allows you to create, organize and manage single and double elimination tournaments.

Features:

• Supports both single and double elimination tournaments.
• AJAX enabled.
• Autocomplete.
• Fully customizable data structure.
• Easy to add / remove / edit matches.

Basic usage:

1. Load the required files from dist folder. Make sure the JavaScript file jquery.bracket.min.js is loaded after jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.bracket.min.js"></script>

<link href="dist/jquery.bracket.min.css" rel="stylesheet">

2. You need to create a container element to place the tournament bracket.

<div class="demo">
</div>

3. The data structure to generate a single elimination tournament.

var singleElimination = {
  "teams": [              // Matchups
    ["Team 1", "Team 2"], // First match
    ["Team 3", "Team 4"]  // Second match
  ],
  "results": [            // List of brackets (single elimination, so only one bracket)
    [                     // List of rounds in bracket
      [                   // First round in this bracket
        [1, 2],           // Team 1 vs Team 2
        [3, 4]            // Team 3 vs Team 4
      ],
      [                   // Second (final) round in single elimination bracket
        [5, 6],           // Match for first place
        [7, 8]            // Match for 3rd place
      ]
    ]
  ]
}

4. The data structure to generate a double elimination tournament.

var doubleElimination = {
  "teams": [
    ["Team 1", "Team 2"],
    ["Team 3", "Team 4"]
  ],
  "results": [            // List of brackets (three since this is double elimination)
    [                     // Winner bracket
      [[1, 2], [3, 4]],   // First round and results
      [[5, 6]]            // Second round
    ],
    [                     // Loser bracket
      [[7, 8]],           // First round
      [[9, 10]]           // Second round
    ],
    [                     // Final "bracket"
      [                   // First round
        [11, 12],         // Match to determine 1st and 2nd
        [13, 14]          // Match to determine 3rd and 4th
      ],
      [                   // Second round
        [15, 16]          // LB winner won first round (11-12) so need a final decisive round
      ]
    ]
  ]
}

5. Draw a basic tournament bracket inside the container you just created.

$('.demo').bracket({
  init: singleElimination
});

6. Several options to customize the tournament bracket.

$('.demo').bracket({
  init: null, // data to initialize
  save: null, // called whenever bracket is modified
  userData: null, // custom user data
  onMatchClick: null, // callback
  onMatchHover: null, // callback
  decorator: null, // a function
  skipSecondaryFinal: false,
  skipGrandFinalComeback: false,
  skipConsolationRound: false,
  dir: 'rl', // "rl" or  "lr",
  disableToolbar: false,
  disableTeamEdit: false,
  teamWidth: '', // number
  scoreWidth: '', // number
  roundMargin: '', // number
  matchMargin: '', // number
});

Change log:

v0.11.1 (2018-01-25)

• Fix TBD propagation and final connector bug.

v0.11.0 (2017-10-16)

• Center connectors with centerConnectors: boolean and disable hover highlight with disableHighlight: boolean.
• Bug fixes.
• Update dependencies

v0.10.1 (2016-11-06)

• Pass entry state to render decorator to allow custom visualization for TBD, BYE, no-score, and default win scenarios.

v0.9.0 (2016-10-26)

• Adjust bracket proportions with teamWidth: number, scoreWidth: number, matchMargin: number, roundMargin: number.
• disableTeamEdit: boolean prevents modifying the team when in edit mode.
• disableToolbar: boolean prevents modifying the bracket size and format in edit mode.

2016-10-17

• v0.8.0
• Gives proper support for having any number of teams in a tournament (instead of just 2^N, i.e. 2, 4, 8...).
• Leaving teams empty (null) creates a BYE branch. Any team scheduled against BYE will get a default win with no score, and advance automatically to the next match.

---

This awesome jQuery plugin is developed by teijo. For more Advanced Usages, please check the demo page or visit the official website.