jQuery Bracket library [server]

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

Installation and project sources

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

npm install jquery-bracket

bower install jquery-bracket

Get the original sources and report bugs at GitHub.

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

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

• Number of team pairs determines the size of the bracket. null team will result into BYE. Team playing against BYE will get a default win with no score
• Number of result lists determines the tournament type. One list indicates single elimination. Three (winners, losers and finals) indicates double elimination.
• null instead of a number indicates empty result.

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

Save output

Try to first modify some scores or teams

Data inquired at startup

Balancing tournaments with BYEs ¶

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.