Huge Tournament Bracket Test

Recently we started working on a tournament web app. The request was to show all tournament matches in one single page, but working with tournaments with over 4000 teams (overfourthousands!)

It should work like google map, with pinch and zoom and live search, if you get it.

Well, we started figuring out how many tags we had to show on the page.

The bracket is a binary tree where the root node is the final match and the leaves are the bracket first turn matches (2048 leaves when we have 4096 teams).

Each bracket turn will have match_of_previous_turn / 2 matches. With 4096 teams we have:

teams         = 4096
turns         = Math.log2(teams) # => 12
total_matches = teams - 1 # => 4095 

The tournament web page will show at least 4095 divs. Each div will contain the teams names and icons, and one div for the result (5 additional nodes).

match_nodes = 5
nodes = total_matches + (5 * match_nodes) # => 24570

Then we have the connectors between the matches:

This can be seen as three tags used to compose the T. One is going from Match 1 to the center of the T, another from Match 2 to the center of the T, and the third from the center of the T to the next match. This three tags have to be applied to each match except the final one:

match_connector_nodes = 3
nodes += match_connector_nodes * (total_matches - 1) # => 36852

The doubt is legit: with a web page completely styled and full of javascript interactions, will a browser be able to render it quickly enough ?

We decided not to risk and to rely on javascript the less we could. So the binary tree should have been created server side.

Me, Giovanni and Ivan, two hours with a pen and a piece of paper, writing down formulas to generate a binary tree using absolute positioning. You can see the demo here, the source code here, and the page generation code  with all the formulas here.

Post Mortem: We ended up creating an impressive demo, but even if we add pinch and zoom features it’s not good from a user interaction point of view. So we decided to switch to a more classic management (mini brackets with 128 teams, and a final bracket to handle all the finals between the 128 winners).