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

php html css tournament
Matt Dunbar picture Matt Dunbar · Feb 2, 2010 · Viewed 30.6k times · Source

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

John Gietzen picture John Gietzen · Feb 2, 2010

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

Related questions

Convert HTML + CSS to PDF

I have an HTML (not XHTML) document that renders fine in Firefox 3 and IE 7. It uses fairly basic CSS to style it and renders fine in HTML. I'm now after a way of converting it to PDF. I have tried: …

Read More
how to get the base url in javascript

I am building a website with CodeIgniter, I have various resources that I load with the base_url helper function like this <link rel="stylesheet" type="text/css" href="'.base_url('assets/css/themes/default.css').'" id="…

Read More
How to write specific CSS for mozilla, chrome and IE

What would be the CSS conditional statement you can use to include specific CSS for IE, Mozilla, Chrome. If IE #container { top: 5px; } If Mozilla #container { top: 7px; } If Chrome #container { top: 9px; } What would be the respective 'If's' ?

Read More