seikon / tournament.js

Javascript library to generate tournaments charts with HTML5 canvas

Tournament.js

Javascript library to generate canvas tournament brackets easily with automatic bracket fit

Welcome to Tournament.js

This library wants to develop a simply solution for web projects that need Tournaments diagrams deploying it in a few lines, but with the flexibility of customize the visualization and design

Based on HTML5 canvas to generate Graphics and Text. It allows to customize the size and style of each element,implements animations and fit it automatically with the brackets.

For the moment the library has only the direct-elimination (Play-off) tournament with 2 ways of visualization:

• Normal: Tournament generates itself from left to right
• Divided: Tournament generates itself from left to a center point (Math.log2(number of participants)) and from right to the same center point.

And two types of animation:

• FadeOut: A participant appears in the next round from transparency 0 to 1
• ByLetter: A participant appears in the next round letter by letter until its entire name is displayed

You can find practical examples and images in "examples" folder with all types of visualization.

Feel free to fork the repository and add new funcionalities to help grow up the library! :)

tournament.js's Issues

Font color param only RGB matrix

In constructor of the class Tournament, parameter "fontColor" only accepts rgb array.

filter only log base 2 participants

the number of participants permited should be checked by if log base 2 of the total participants equals to a whole number