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!

I worked on a PHP / Laravel plugin that generates brackets with / without preliminary round robin. Maybe it can be useful to you, I don't know what tech you are using. Here is the github. https://github.com/xoco70/kendo-tournaments Hope it helps! — Juliatzin, Aug 24 '17 at 11:13

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 02 '10 at 03:45

John Gietzen

48,783
32
145
190

hey John, was wondering if you were able to finish this project? would love to see and get an idea from your code on how I should approach my problems with generating brackets. – gdubs Nov 15 '11 at 04:46
@gdubs, the Tournaments API project is more-or-less complete. Here it is in action on our website: http://lanlordz.net/Events/ViewTournament/8/modern-warfare-2 (scroll down on the rounds list to see it rendered as SVG.) – John Gietzen Nov 15 '11 at 20:16
hey John, is there any chance I can have the source code for that? been experimenting with jquery and it's been a real pain, was wondering if there would be a c# version of it. Thank you! – gdubs Nov 16 '11 at 15:00
1

Yeha, the link in the answer has the code to the actual bracket generation code. Implementing it in HTML with a database backing it is in the LAN Lordz source code. http://lanlordz.codeplex.com/ – John Gietzen Nov 21 '11 at 20:35

score 1 · Accepted Answer · answered Feb 02 '10 at 03:41

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.

I used the first example with tables, but managed to duplicate it on both sides. Thanks. Any advice on a cleaner way to generate the table though? — Matt Dunbar, Feb 02 '10 at 04:06

score -3 · Answer 3 · answered Jun 15 '14 at 11:01

If you are up for a quick and dirty solution with No CSS or java needed. try this:

https://dl.dropboxusercontent.com/u/43939704/TournamentBrackets.7z

It's just HTML DIV's and a few .png files for the lines (see the 7Z file for pics).

Grtz, Theo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<meta http-equiv="refresh" content="1" >
<head>
  <title>Boom16 - dubbele afvalling </title>
</head>
<body>

<!-- Div info -->

    <div id="DivInfo"  style="position:absolute; top:10px; left:930px; width:300px; height:60px; "><FONT SIZE="10" COLOR="000000">DIVISIE 1</FONT></div>

<!-- Scheiding -->

    <div id="Scheiding"  style="position:absolute; top:604px; left:0px; width:926px; height:2x; border:2px solid #000; "></div>
    <div id="ST1"        style="position:absolute; top:585px; left:10px; width:200px; height:60px; "><FONT SIZE="3" COLOR="000000">Normale races<br>Herkansings races</FONT></div>


<!-- Lijnen -->

    <div id="H"    style="position:absolute; top:606px; left:1132px;width:24px; height:2x;     border:2px solid #000; "></div>
    <div id="HL2"  style="position:absolute; top:315px; left:900px; width:130px; height:260px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL3"  style="position:absolute; top:635px; left:900px; width:130px; height:260px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL4"  style="position:absolute; top:145px; left:670px; width:130px; height:110px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL5"  style="position:absolute; top:785px; left:670px; width:130px; height:110px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL6"  style="position:absolute; top:315px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL7"  style="position:absolute; top:955px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL8"  style="position:absolute; top:75px;  left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL9"  style="position:absolute; top:715px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL10" style="position:absolute; top:175px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL11" style="position:absolute; top:815px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL12" style="position:absolute; top:355px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL13" style="position:absolute; top:995px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL14" style="position:absolute; top:455px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL15" style="position:absolute; top:1095px;left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL16" style="position:absolute; top:30px;  left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL17" style="position:absolute; top:670px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL18" style="position:absolute; top:105px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL19" style="position:absolute; top:745px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL20" style="position:absolute; top:170px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL21" style="position:absolute; top:810px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL22" style="position:absolute; top:245px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL23" style="position:absolute; top:885px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL24" style="position:absolute; top:310px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL25" style="position:absolute; top:950px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL26" style="position:absolute; top:385px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL27" style="position:absolute; top:1025px;left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL28" style="position:absolute; top:1090px;left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL28" style="position:absolute; top:450px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL30" style="position:absolute; top:525px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL31" style="position:absolute; top:1165px;left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>

<!-- Blokken -->

    <div id="H0"  style="position:absolute; top:575px; left:1160px;width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H0  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H1"  style="position:absolute; top:575px; left:930px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H1  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H2"  style="position:absolute; top:255px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H2  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H3"  style="position:absolute; top:895px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H3  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H4"  style="position:absolute; top:115px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H4  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H5"  style="position:absolute; top:755px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H5  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H6"  style="position:absolute; top:395px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H6  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H7"  style="position:absolute; top:1035px;left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H7  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H8"  style="position:absolute; top:45px ; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H8  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H9"  style="position:absolute; top:685px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H9  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H10" style="position:absolute; top:185px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H10 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H11" style="position:absolute; top:825px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H11 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H12" style="position:absolute; top:325px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H12 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H13" style="position:absolute; top:965px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H13 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H14" style="position:absolute; top:465px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H14 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H15" style="position:absolute; top:1105px;left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H15 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H16" style="position:absolute; top:10px;  left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H16 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H17" style="position:absolute; top:650px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H17 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H18" style="position:absolute; top:80px;  left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H18 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H19" style="position:absolute; top:720px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H19 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H20" style="position:absolute; top:150px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H20 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H21" style="position:absolute; top:790px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H21 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H22" style="position:absolute; top:220px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H22 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H23" style="position:absolute; top:860px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H23 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H24" style="position:absolute; top:290px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H24 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H25" style="position:absolute; top:930px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H25 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H26" style="position:absolute; top:360px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H26 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H27" style="position:absolute; top:1000px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H27 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H28" style="position:absolute; top:1070px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H28" style="position:absolute; top:430px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H30" style="position:absolute; top:500px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H30 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H31" style="position:absolute; top:1140px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H31 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>


</body>
</html>

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

3 Answers3

Linked