Hi there, I would like to ask ideas on approaches on how to render tournament bracket for next round. For now I can render the first round but I am not sure how to render the next round bracket. Current output that I get https://i.imgur.com/X5iL6sw.png . The output that I wanted is something like this https://i.imgur.com/Zi3ytgl.png . For now the only approach I can think of hardcode the next round bracket which basically not an ideal approach.
(brackets controller@show)
if($bracket->type == "Single Elimination")
{
$numOfParticipant = $bracket->size;
$rounds = ceil(log($numOfParticipant)/log(2));
$bracketSize = pow(2, $rounds);
$requiredByes = $bracketSize - $numOfParticipant;
if($numOfParticipant<2)
{
return [];
}
$matches = array(array(1,2));
for($round=1; $round<$rounds; $round++)
{
$roundMatches = [];
$sum = pow(2, $round + 1) + 1;
foreach($matches as $match)
{
$teamA = $this->changeIntoBye($match[0], $numOfParticipant);
$teamB = $this->changeIntoBye($sum - $match[0], $numOfParticipant);
$roundMatches[] = array($teamA, $teamB);
$teamA = $this->changeIntoBye($sum - $match[1], $numOfParticipant);
$teamB = $this->changeIntoBye($match[1], $numOfParticipant);
$roundMatches[] = array($teamA, $teamB);
}
$matches = $roundMatches;
}
public function changeIntoBye($seed, $numOfParticipant)
{
return $seed <= $numOfParticipant ? $seed : null;
}
(brackets.show)
<div class="round r-of-2-se-4">
@foreach($matches as $match)
<div class="bracket-game">
<div class="player top">
<div class="score">
0
</div>
</div>
<div class="player bot">
<div class="score">
0
</div>
</div>
</div>
@endforeach
</div>
(dd output for $matches)
array:2 [▼
0 => array:2 [▼
0 => 1
1 => 4
]
1 => array:2 [▼
0 => 3
1 => 2
]
]
(full example hardcode bracket for numOfParticipant=4)
<div class="round r-of-2-se-4">
<div class="bracket-game">
<div class="player top">
<div class="score">
0
</div>
</div>
<div class="player bot">
<div class="score">
0
</div>
</div>
</div>
<div class="bracket-game">
<div class="player top">
<div class="score">
0
</div>
</div>
<div class="player bot">
<div class="score">
0
</div>
</div>
</div>
</div>
<div class="connectors r-of-1-se-4">
<div class="top-line"></div>
<div class="clear"></div>
<div class="bottom-line"></div>
<div class="clear"></div>
<div class="vert-line"></div>
<div class="clear"></div>
<div class="next-line"></div>
<div class="clear"></div>
</div>
<div class="round r-of-1-se-4">
<div class="bracket-game">
<div class="player top">
<div class="score">
0
</div>
</div>
<div class="player bot">
<div class="score">
0
</div>
</div>
</div>