Page 1 of 1

Tournament Bracket

Posted: Sun Sep 12, 2010 5:16 pm
by zackh
I've been working on a tournament platform site, and I'm having problems with creating a bracket tree for viewing. I have the following methods of finding useful information :

Code: Select all

function num_teams_in_round($initial, $round)
{
	return $initial * pow(.5, $round-1);
}

$participants  = 32;
$rounds = round(log($participants, 2));
$num_matches_in_round = num_teams_in_round($participants, $whatever_round)/2;
I'm not currently working on participant sizes that are not divisible by four, so byes are not a necessary consideration yet. I've been trying with different methods such as <table>'s and <div>'s with different positioning, but my CSS isn't exactly up to par, and I just can't seem to wrap my head around it. Does anyone have an algorithm to generate tournament bracket trees? I can figure out the input data, just not how to draw it properly. (with the correct amount of spacing/etc)

Re: Tournament Bracket

Posted: Sun Sep 12, 2010 5:39 pm
by buckit
seems most people create an image of a bracket and then place transparent div absolute positioned to the correct location on the bracket overtop of the image. would take some CSS knowledge to do it.

thats how this guy did it: http://www.breathingfire.com/nba/playof ... et2010.php

he explains in it in minor detail here: http://www.breathingfire.com/2008/03/nb ... s-it-work/

you can view source on his page and see how he laid out the HTML and what CSS he used on each element to position everything.

Re: Tournament Bracket

Posted: Sun Sep 12, 2010 5:49 pm
by zackh
The problem I have with that method is that there may be differing amounts of players. I suppose I could create an image for every possible combination( :banghead: ), but I was hoping to find a more mathematical way to approach it since I'm hoping to have some jQuery drag/drop elements (transparent divs in this case I suppose) for moderators.

Edit: Also, thanks for the response :)

Double Edit: http://challonge.com/double_elim/module ... &width=820 -- Perhaps I can find something interesting here. Challonge seems to use jQuery/css. Although this only gives me the final result, and not the algorithm to create it, I might be able to figure something out with it.

Re: Tournament Bracket

Posted: Sun Sep 12, 2010 8:16 pm
by zackh
I believe I've found a solution in binary trees. However, I'm not sure how to structure it.

Code: Select all

			<?php

			$teams = 8;
			$num_rounds = round(log($teams, 2))+1;

			for ($i = 0; $i < $num_rounds; ++$i)
			{
				$matches = $teams*pow(.5, $i-1)/2;
				for ($j = 0; $j < $matches; ++$j)
				{
					echo "<div style=\"border-style: inset;\"><span>Round $i Match $j</span></div>\n";
				}
			}
			?>
http://zackhovatter.com/tourneys/bracket/

As you can see, simply outputting it in order is not the solution. What's the proper way to create a 'perfect binary tree' (as I've seen it called)?