Drawing a tournament bracket (CSS/HTML based on PHP Dataset).

Question

If you're not familiar with what I mean by tournament bracket, see here: http://baseballguru.com/bracket1.gif

That said, I have built the dataset and figured out the number of rounds (ceil(log($numPlayers,2))) and I am comfortable finding the number of players in each round, etc.

What I need to do now is move my array of matches for each round into a bracket. Be it CSS, or tabled, I can play with the design myself, I'm just wondering how I should go about building this (consider the tournament can have a variable number of rounds) into something visual.

Thanks!

Answer 1

You could go with tables and set appropriate rowspans to line up the bracket. This is the easier way, but some will say not semantically correct. Example.

You could also do it with CSS'd layers by simply calculating appropriate positions and using absolutely positioned divs to make it look like a bracket. Note that this approach won't be fluid unless you move it around by javascript. More on this.

Finally, you could do it with nested lists, as described in this topic, but that looks quite messy.

Answer 2

I have a project (TournamentsApi) that was made for tracking and rendering tournaments. You should take a look at it.

On my site, I'm rendering the brackets to SVG and embedding them in the HTML. I'd be happy to share the code I use for the SVG generation / embedding, if you were inclined to use my implementation.

Of course, mine is written in C#, so it may not suit you uses. However, the source code was released under the MIT license, and you are free to use the data structures I have created for your own project