Single Elimination Tournament Bracket Generator In jQuery - Gracket.js

Single Elimination Tournament Bracket Generator In jQuery - Gracket.js

Gracket.js is a small jQuery bracket plugin to dynamically generate a customizable single-elimination tournament bracket on the webpage.

The plugin makes use of HTML5 canvas to build the bracket structure with several useful options.

1. Insert the minified version of the Gracket.js library after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jquery.gracket.min.js"></script>

2. Prepare your data (team/player name, ID, seed, etc) for the tournament bracket.

myData = [
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1, "displaySeed": "D1", "score" : 47 }, {"name" : "Andrew Miller", "id" : "andrew-miller", "seed" : 2} ],
    [ {"name" : "James Coutry", "id" : "james-coutry", "seed" : 3}, {"name" : "Sam Merrill", "id" : "sam-merrill", "seed" : 4}],
    [ {"name" : "Anothy Hopkins", "id" : "anthony-hopkins", "seed" : 5}, {"name" : "Everett Zettersten", "id" : "everett-zettersten", "seed" : 6} ],
    [ {"name" : "John Scott", "id" : "john-scott", "seed" : 7}, {"name" : "Teddy Koufus", "id" : "teddy-koufus", "seed" : 8}],
    [ {"name" : "Arnold Palmer", "id" : "arnold-palmer", "seed" : 9}, {"name" : "Ryan Anderson", "id" : "ryan-anderson", "seed" : 10} ],
    [ {"name" : "Jesse James", "id" : "jesse-james", "seed" : 1}, {"name" : "Scott Anderson", "id" : "scott-anderson", "seed" : 12}],
    [ {"name" : "Josh Groben", "id" : "josh-groben", "seed" : 13}, {"name" : "Sammy Zettersten", "id" : "sammy-zettersten", "seed" : 14} ],
    [ {"name" : "Jake Coutry", "id" : "jake-coutry", "seed" : 15}, {"name" : "Spencer Zettersten", "id" : "spencer-zettersten", "seed" : 16}]
  ],
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1}, {"name" : "James Coutry", "id" : "james-coutry", "seed" : 3} ],
    [ {"name" : "Anothy Hopkins", "id" : "anthony-hopkins", "seed" : 5}, {"name" : "Teddy Koufus", "id" : "teddy-koufus", "seed" : 8} ],
    [ {"name" : "Ryan Anderson", "id" : "ryan-anderson", "seed" : 10}, {"name" : "Scott Anderson", "id" : "scott-anderson", "seed" : 12} ],
    [ {"name" : "Sammy Zettersten", "id" : "sammy-zettersten", "seed" : 14}, {"name" : "Jake Coutry", "id" : "jake-coutry", "seed" : 15} ]
  ],
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1}, {"name" : "Anothy Hopkins", "id" : "anthony-hopkins", "seed" : 5} ],
    [ {"name" : "Ryan Anderson", "id" : "ryan-anderson", "seed" : 10}, {"name" : "Sammy Zettersten", "id" : "sammy-zettersten", "seed" : 14} ]
  ],
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1}, {"name" : "Ryan Anderson", "id" : "ryan-anderson", "seed" : 10} ]
  ],
  [
    [ {"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1} ]
  ]
];

3. Create an empty gracket element in which the Tournament Bracket will generate.

<div class="my_gracket"></div>

4. Call the function to render a basic Tournament Bracket inside the element. Make sure the min-width of the .gracket h3 element is set to width of the largest name/player. Gracket needs to build its canvas based on the width of the largest element.

$(".my_gracket").gracket({ 
  src: myData
});

5. Apply your own styles to the Tournament Bracket.

.g_gracket {
  width: 9999px;
  background-color: #fff;
  padding: 55px 15px 5px;
  line-height: 100%;
  position: relative;
  overflow: hidden;
}
.g_round {
  float: left;
  margin-right: 70px;
}
.g_game {
  position: relative;
  margin-bottom: 15px;
}
.g_gracket h3 {
  margin: 0;
  padding: 10px 8px 8px;
  font-size: 18px;
  font-weight: normal;
  color: #fff
}
.g_team {
  background: #3597AE;
}
.g_team:last-child {
  background: #FCB821;
}
.g_round:last-child {
  margin-right: 20px;
}
.g_winner {
  background: #444;
}
.g_winner .g_team {
  background: none;
}
.g_current {
  cursor: pointer;
  background: #A0B43C!important;
}
.g_round_label {
  top: -5px;
  font-weight: normal;
  color: #CCC;
  text-align: center;
  font-size: 18px;
}

6. Available options to customize the Tournament Bracket.

$(".my_gracket").gracket({ 
  // default CSS classes
  gracketClass : "g_gracket",
  gameClass : "g_game",
  roundClass : "g_round",
  roundLabelClass : "g_round_label",
  teamClass : "g_team",
  winnerClass : "g_winner",
  spacerClass : "g_spacer",
  currentClass : "g_current",
  seedClass : "g_seed",
  // radius in pixels
  cornerRadius : 15,
  // canvas options
  canvasId : "g_canvas",
  canvasClass : "g_canvas",
  canvasLineColor : "#eee",
  canvasLineCap : "round",
  canvasLineWidth : 2,
  canvasLineGap : 15,
  // an array of round labels
  roundLabels : []
  
});

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

  • Publication date: 06.08.2018
  • Source