Dessin d'un support de tournoi (CSS/HTML basé sur PHP Dataset)

Si vous n'êtes pas familier avec ce que je veux dire par tranche tournoi, voir ici: http://baseballguru.com/bracket1.gif Dessin d'un support de tournoi (CSS/HTML basé sur PHP Dataset)

Cela dit, j'ai construit l'ensemble de données et compris le nombre de tours (ceil (log ($ numPlayers, 2))) et je suis à l'aise de trouver le nombre de joueurs dans chaque tour, etc.

Ce que je dois faire maintenant est de déplacer mon tableau de matchs pour chaque tour dans un support. Que ce soit en CSS, ou en tablé, je peux jouer avec le design moi-même, je me demande juste comment je dois construire ça (considérer le tournoi peut avoir un nombre variable de rounds) en quelque chose de visuel.

Merci!

Source

2010-02-02 Matt Dunbar

I a travaillé sur un plugin de PHP/Laravel qui génère des supports avec/sans la ronde préliminaire. Peut-être que cela peut vous être utile, je ne sais pas quelle technologie vous utilisez. Voici le github. https://github.com/xoco70/kendo-tournaments J'espère que ça aide! –

Vous pouvez utiliser des tables et définir les rowspan appropriés pour aligner le support. C'est le moyen le plus simple, mais certains diront non sémantiquement correct. Example.

Vous pouvez également le faire avec des couches CSS en calculant simplement les positions appropriées et en utilisant des divs positionnés de manière absolue pour donner l'apparence d'un support. Notez que cette approche ne sera pas fluide si vous ne la déplacez pas en javascript. More on this. Enfin, vous pouvez le faire avec des listes imbriquées, comme décrit dans this topic, mais cela semble assez compliqué.

Source

2010-02-02 03:41:28

J'ai utilisé le premier exemple avec des tables, mais j'ai réussi à le dupliquer des deux côtés. Merci. Un conseil sur une façon plus propre de générer la table? –

J'ai un projet (TournamentsApi) qui a été conçu pour le suivi et le rendu des tournois. Vous devriez y jeter un coup d'oeil.

Sur mon site, je rends les crochets au format SVG et je les incorpore dans le HTML. Je serais heureux de partager le code que j'utilise pour la génération/intégration SVG, si vous étiez enclin à utiliser ma mise en œuvre.

Bien sûr, le mien est écrit en C#, donc cela ne vous convient peut-être pas. Cependant, le code source a été publié sous la licence MIT, et vous êtes libre d'utiliser les structures de données que j'ai créées pour votre propre projet

Source

2010-02-02 03:45:21

hey John, se demandait si vous étiez en mesure de terminer ce projet? J'aimerais voir et obtenir une idée de votre code sur la façon dont je devrais aborder mes problèmes avec des supports de génération. – gdubs

@gdubs, le projet API Tournaments est plus ou moins complet. Ici, il est en action sur notre site Web: http://lanlordz.net/Events/ViewTournament/8/modern-warfare-2 (faites défiler vers le bas sur la liste des tours pour voir le rendu en SVG. –

hey John, est-il possible que je puisse avoir le code source pour ça? expérimenté avec jquery et ça a été une vraie douleur, je me demandais s'il y aurait une version C# de celui-ci. Je vous remercie! – gdubs

-3

Si vous êtes prêt pour une solution rapide et sans CSS ou java nécessaire. essayez ceci:

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

Il est juste des fichiers HTML DIV et quelques .png pour les lignes (voir le fichier 7Z pour les photos).

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>

Source

2014-06-15 11:01:21 user3742089

Dessin d'un support de tournoi (CSS/HTML basé sur PHP Dataset)

Répondre

Questions connexes