jQuery Bracket library [server]

jQuery bracket is a jQuery plugin that lets users create and display single and double elimination brackets for tournament play.

NEWNeed a tool for round-robin tournament groups? Check out the new jQuery Group library that's under development!

Installation and project sources

You can use npm or bower to install the library as a dependency to your project.

npm install jquery-bracket
or
bower install jquery-bracket

Get the original sources and report bugs at GitHub.

Star Issue

GotBracket.com, follow and host tournaments

Want to host a tournament? GotBracket.com might just be what you need. It's powered by jQuery Bracket.

Examples

To try most of the examples use these includes:
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.bracket.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bracket.min.css" />

Data structure

The bracket information is stored into a single object. Contents of the object determine what is rendered. Play with the save functionality demo and check the input data for other demos.

Unfortunately there is currently no example algorithm to map specific result into a team pair in case you would need to store the information in different format. Solving team names for anything else than first round requires you to calculate the whole tournament tree.

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

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

Minimal

Resizing

You can adjust the sizes and margins of the bracket elements with initialization parameters. Other styles can be overridden by CSS.

Save functionality and BYEs

Save output

Try to first modify some scores or teams

Data inquired at startup



Balancing tournaments with BYEs

Before using BYEs, please read this section to avoid unfair tournaments.

The library does not take into account the seeding of the players. As different users might have different ways to integrate with the library, it's up to the user to form the ordering of teams for the first round. This leaves room for error if you don't "dry run" your tournament and consider how the teams will advance when getting default wins from BYEd opponents.

The problem

Here's an example of a problem when teams are assigned in order and BYEs are left last. As you can see, "Team 5" gets to finals without playing a single round, getting an unfair advantage over other teams that have to play two rounds to get there. Of course this can also be the intended order, but if not, be aware of this issue.

The solution

To avoid situations similar to above, the teams need to be distributed evenly for the first round. You can see an example seeiding below. In principle the spots must be filled always as sparsely as possible, i.e. halve the empty space on each assignment. You can see why when you follow the branching of the bracket.

Match information

If you wish to make the bracket more interatctive and display match specific information, you can use the match callbacks. You can bind callbacks that are triggered when user clicks or hovers on a match. Custom data regarding which match was triggered will be passed as argument. The data can be input as the third value of each match, first two being the result of the match. The type of the value is not restricted. Hover gets a boolean as second argument indicating if mouse entered or left the match. Callbacks cannot be used in conjunction with the edit feature.

hover and click the matches below

Data customization

In this demo we customize the rendering and editing of a team. You can give the team data as country:name, where country is a two character country code. There is no proper input validation as it's only for demo purposes.

Double elimination

Note that to trigger empty double elimination bracket, the result must have correct level of nesting and top level arrays, otherwise the bracket will be determined as a single elimination bracket. Minimal result data for initializing double elimination is [[[[]]], [], []]

No secondary final

In double elimination, you can disable the secondary final which would generally be used if Loser Bracket winner wins the first match against Winner Bracket winner.

No consolation round

Skip the round to determine 3rd and 4th places.

No comeback from loser bracket (added in 0.7.0)

Double elimination in which you can reach 3rd at best if you drop from winner bracket. Tournament finalists come directly from winner bracket.

Reverse flow

Render the bracket from right to left.

Connector styles

Autocomplete demo, try input as "countrycode:name"

This demo uses jQuery UI for the autocomplete.

Large double elimination with 16 teams