Проектирование кронштейна турнира - плохо сочетается хорошо

Question

Я пытаюсь спроектировать визуальные эффекты кронштейна турнира, но он не хорошо сочетается!

CSS-выглядит следующим образом:

#tournament-holder{ 
width:708px; 
padding:20px 0 20px 15px; 
float:left; 
} 
.vertical-holder{ 
width:100px; 
padding-right:15px; 
float:left; 
} 
.horizontal-holder1{ 
width:98px; 
height:98px; 
margin-bottom:15px; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder2{ 
width:98px; 
height:98px; 
margin:57.5px 0 72.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder3{ 
width:98px; 
height:98px; 
margin:172.5px 0 187.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder4{ 
width:98px; 
height:98px; 
margin:402.5px 0 417.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder5{ 
width:98px; 
height:98px; 
margin:862.5px 0 877.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder6{ 
width:98px; 
height:98px; 
margin:1782.5px 0 1797.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.white-holder{ 
width:98px; 
height:49px; 
background-color:white; 
float:left; 
} 
.yellow-holder{ 
width:98px; 
height:49px; 
background-color:#FFF8DC; 
float:left; 
} 
.player-holder{ 
width:70px; 
height:49px; 
float:left; 
} 
.score-holder{ 
width:28px; 
height:49px; 
float:left; 
} 

Теперь для HTML:

<div id="tournament-holder"> 
      <div class="vertical-holder"> 
       <?php 
       $q = "SELECT u.username, p.position FROM ".TBL_FOOT_TOUR_PLAYERS." p 
         INNER JOIN ".TBL_USERS." u ON p.userid = u.id 
         WHERE p.tourid = '$tour_id' ORDER BY position"; 
       $result = $database->query($q); 
       $i = 1; 
       while($row=mysql_fetch_assoc($result)){ 
        extract($row); 
        if($i&1){ 
         ?> 
         <div class="horizontal-holder1"> 
          <div class="white-holder"> 
           <div class="player-holder"> 
            <? echo "$username"; ?> 
           </div> 
           <div class="score-holder"> 
            0 
           <div> 
          </div> 
         <?php 
        } 
        else{ 
         ?> 
          <div class="yellow-holder"> 
           <div class="player-holder"> 
            <? echo "$username"; ?> 
           </div> 
           <div class="score-holder"> 
            0 
           <div> 
          </div> 
         </div> 
         <?php 
        } 
        $i++; 
       } 
       ?> 
      </div> 

      <?php 
      //subsequent rounds 

      for($i=1; $i <= $rounds; $i++) 
      { 
       $j = $i + 1; //this is to generate the correct horizontal holder 
       $k = 1; //this is the order of the players - to check if they are odd or even as they come out. 
       $players = $players/2; 
       $q = "SELECT u.username, r.position FROM ".TBL_FOOT_TOUR_ROUNDS." r 
         INNER JOIN ".TBL_USERS." u ON u.id = r.winner 
         WHERE tourid = '$tour_id' && round = '$i' ORDER BY position"; 
       $result = $database->query($q); 
       ?> 
       <div class="vertical-holder"> 
        <?php 
        while($row=mysql_fetch_assoc($result)){ 
        extract($row); 
         if($k&1){ 
          ?> 
          <div class="horizontal-holder<?php echo $j; ?>"> 
           <div class="white-holder"> 
            <div class="player-holder"> 
             <? echo "$username"; ?> 
            </div> 
            <div class="score-holder"> 
             0 
            <div> 
           </div> 
          <?php 
         } 
         else{ 
          ?> 
           <div class="yellow-holder"> 
            <div class="player-holder"> 
             <? echo "$username"; ?> 
            </div> 
            <div class="score-holder"> 
             0 
            <div> 
           </div> 
          </div> 
          <?php 
         } 
         $k++; 
        } 
        ?> 
       </div> 
       <?php 
      } 
      ?> 
     </div> 

Ниже приводится ссылка на то, что скобка в настоящее время рендеринга, как:

Current Bracket problem

Ясно, что что-то не выстраивается правильно.

Идея кронштейна заключается в том, что «держатель турнира» будет удерживать общий кронштейн. Каждый раунд будет иметь «вертикальный держатель» ... каждый вертикальный держатель будет содержать горизонтальный держатель для каждых 2 команд (1 арматура). 6 разных горизонтальных держателей предназначены для разных расстояний между светильниками, поскольку турнир проходит дальше и дальше. В каждом горизонтальном держателе будет желтый или белый держатель. Оба одинаковые, только разные цвета фона. Внутри каждого из них будет игрок и обладатель очков.

Я знаю, что это довольно сложный вопрос для ответа, но он может ответить на это. У меня серьезные проблемы, я просто не могу это решить.

Спасибо :)

Answer 1

я сделал несколько графики, как они и используются, чтобы иметь программное обеспечение для управления веб-спортивной команды/лиги. Чтобы это сработало, вам нужно сначала подготовить свою структуру в памяти, а не просто к запросам и циклам.

$structure = array(); 
$data = mysql_query('SELECT * FROM standings WHERE blablabla'); 
while($datarow = mysql_fetch_assoc($data)){ 

    //Evaluate the round in the first level and the match in second 
    $round = $datarow['round']; 
    $matchid = $datarow['round']; 
    $homeorvisitor = ($datarow['ishome'] ? 'home' : 'visitor'); 
    $structure[$round][$mathid][$homeorvisitor] = $datarow; 

} 

Это создаст вам структуру, где вы найдете свои матчи и каждый противников для каждого матча, сгруппированных вместе в раундах.

Затем, используя простую логику цикла, вы можете создать таблицу, содержащую каждый раунд, и в каждой таблице вы создадите div, который показывает совпадение. Мне нравится использовать таблицы для этого, но если вы достаточно хороши с CSS, перейдите к нему с помощью CSS. Я пробовал использовать divs здесь, и он должен выводиться с помощью простого CSS.

foreach($structure as $roundkey => $round){ 

    ?><div id="round<?php echo $roundkey; ?>" class="round"><?php 

     foreach($round as $matchid => $match){ 

      ?><div id="match<?php echo $matchid; ?>" class="match round<?php echo $roundkey; ?>"><?php 

       //Output your match box content here 

      ?></div><?php 

     } 

    ?></div><?php 

} 

Это должен вывести вас

<div id="round1" class="round"> 
    <div id="match1" class="match round1"> 
    </div> 
    <div id="match2" class="match round1"> 
    </div> 
    <div id="match3" class="match round1"> 
    </div> 
    <div id="match4" class="match round1"> 
    </div> 
</div> 
<div id="round2" class="round"> 
    <div id="match5" class="match round2"> 
    </div> 
    <div id="match6" class="match round2"> 
    </div> 
</div> 
<div id="round3" class="round"> 
    <div id="match7" class="match round3"> 
    </div> 
</div> 

CSS-я предлагаю это сделать округляет определенную ширину, плавучий бок о бок, и каждый матч будет взять определенную высоту и ширину в зависимости от раунда # связанного с этим. Так что, как вы будете иметь возможность сделать один матч в Round1 меньше, чем матч в round2 (взять в два раза больше высоты в центр.

ли, что все имеет смысл?