jQuery Plugin For Customizable Tournament Brackets - Bracket

jQuery Plugin For Customizable Tournament Brackets - Bracket
File Size: 49.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.0 (2016-11-13)

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

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.