parent
274cd248f6
commit
8de5758650
@ -0,0 +1,181 @@ |
||||
{% extends 'tournaments/base.html' %} |
||||
|
||||
{% block head_title %}Matchs du {{ tournament.display_name }}{% endblock %} |
||||
{% block first_title %}{{ tournament.event.display_name }}{% endblock %} |
||||
{% block second_title %}{{ tournament.display_name }}{% endblock %} |
||||
|
||||
{% if tournament.display_matches %} |
||||
{% block content %} |
||||
|
||||
{% include 'tournaments/navigation_tournament.html' %} |
||||
|
||||
<div class="butterfly-bracket" id="bracket"></div> |
||||
|
||||
<div id="match-templates" style="display: none;"> |
||||
{% for match_group in match_groups %} |
||||
{% if match_group.matches %} |
||||
{% for match in match_group.matches %} |
||||
<div data-match-round="{{ forloop.parentloop.counter0 }}" |
||||
data-match-index="{{ forloop.counter0 }}" |
||||
data-disabled="{{ match.disabled|lower }}" |
||||
class="match-template"> |
||||
{% include 'tournaments/match_cell.html' %} |
||||
</div> |
||||
{% endfor %} |
||||
{% endif %} |
||||
{% endfor %} |
||||
</div> |
||||
|
||||
<script> |
||||
|
||||
function renderBracket() { |
||||
const bracket = document.getElementById('bracket'); |
||||
const matchTemplates = document.getElementById('match-templates').children; |
||||
const rounds = []; |
||||
const matchPositions = []; |
||||
|
||||
// Group matches by round |
||||
Array.from(matchTemplates).forEach(template => { |
||||
const roundIndex = parseInt(template.dataset.matchRound); |
||||
if (!rounds[roundIndex]) { |
||||
rounds[roundIndex] = []; |
||||
} |
||||
rounds[roundIndex].push(template); |
||||
}); |
||||
|
||||
// First create a test match to get natural height |
||||
const firstMatch = document.createElement('div'); |
||||
firstMatch.className = 'butterfly-match'; |
||||
firstMatch.innerHTML = `<div class="match-content">${rounds[0][0].innerHTML}</div>`; |
||||
bracket.appendChild(firstMatch); |
||||
const matchHeight = firstMatch.offsetHeight; |
||||
const matchSpacing = 10; |
||||
bracket.innerHTML = ''; |
||||
|
||||
rounds.forEach((roundMatches, roundIndex) => { |
||||
const roundDiv = document.createElement('div'); |
||||
roundDiv.className = 'butterfly-round'; |
||||
matchPositions[roundIndex] = []; |
||||
|
||||
roundMatches.forEach((matchTemplate, matchIndex) => { |
||||
const matchDiv = document.createElement('div'); |
||||
matchDiv.className = 'butterfly-match'; |
||||
matchDiv.style.position = 'absolute'; |
||||
const isDisabled = matchTemplate.dataset.disabled === 'true'; |
||||
let top; |
||||
if (roundIndex === 0) { |
||||
top = matchIndex * (matchHeight + matchSpacing); |
||||
} else { |
||||
const parentIndex1 = matchIndex * 2; |
||||
const parentIndex2 = parentIndex1 + 1; |
||||
const parentPos1 = matchPositions[roundIndex - 1][parentIndex1]; |
||||
const parentPos2 = matchPositions[roundIndex - 1][parentIndex2]; |
||||
top = (parentPos1 + parentPos2) / 2; |
||||
} |
||||
|
||||
const baseDistance = matchHeight + matchSpacing; |
||||
const distance = baseDistance * Math.pow(2, roundIndex); |
||||
matchDiv.style.setProperty('--next-match-distance', `${distance}px`); |
||||
matchDiv.style.top = `${top}px`; |
||||
matchPositions[roundIndex][matchIndex] = top; |
||||
|
||||
matchDiv.innerHTML = ` |
||||
<div class="incoming-line ${isDisabled ? 'disabled' : ''}"></div> |
||||
<div class="match-content ${isDisabled ? 'disabled' : ''}">${matchTemplate.innerHTML}</div> |
||||
`; |
||||
|
||||
roundDiv.appendChild(matchDiv); |
||||
}); |
||||
|
||||
bracket.appendChild(roundDiv); |
||||
}); |
||||
} |
||||
|
||||
renderBracket(); |
||||
</script> |
||||
|
||||
<style> |
||||
.match-content.disabled { |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.incoming-line.disabled, |
||||
.butterfly-match:has(.match-content.disabled)::after, |
||||
.butterfly-match:has(.match-content.disabled)::before { |
||||
visibility: hidden; |
||||
} |
||||
|
||||
.butterfly-bracket { |
||||
display: flex; |
||||
gap: 40px; /* Increased to account for horizontal lines (20px on each side) */ |
||||
position: relative; |
||||
} |
||||
|
||||
.butterfly-round { |
||||
position: relative; |
||||
width: 25%; /* 300px for match + 20px on each side for lines */ |
||||
} |
||||
|
||||
.butterfly-match { |
||||
position: absolute; |
||||
width: 100%; |
||||
} |
||||
|
||||
/* Horizontal line after match */ |
||||
.butterfly-match::after { |
||||
content: ""; |
||||
position: absolute; |
||||
left: 100%; /* Start from end of match cell */ |
||||
top: 50%; |
||||
width: 20px; |
||||
height: 2px; |
||||
background: #666; |
||||
} |
||||
|
||||
/* Vertical line connecting pair of matches */ |
||||
.butterfly-match:nth-child(2n+1)::before { |
||||
content: ""; |
||||
position: absolute; |
||||
left: calc(100% + 20px); /* After horizontal line */ |
||||
top: 50%; |
||||
width: 2px; |
||||
height: calc((var(--next-match-distance)) / 2); |
||||
background: #666; |
||||
} |
||||
|
||||
.butterfly-match:nth-child(2n)::before { |
||||
content: ""; |
||||
position: absolute; |
||||
left: calc(100% + 20px); |
||||
bottom: calc(50% - 2px); /* Account for half of horizontal line height */ |
||||
width: 2px; |
||||
height: calc((var(--next-match-distance)) / 2); /* Add half of horizontal line height */ |
||||
background: #666; |
||||
} |
||||
|
||||
/* Horizontal line to next round match */ |
||||
.butterfly-match .incoming-line { |
||||
position: absolute; |
||||
left: -20px; |
||||
top: 50%; |
||||
width: 20px; |
||||
height: 2px; |
||||
background: #666; |
||||
} |
||||
|
||||
/* Hide incoming line for first round */ |
||||
.butterfly-round:first-child .incoming-line { |
||||
display: none; |
||||
} |
||||
|
||||
/* Hide outgoing lines for last round */ |
||||
.butterfly-round:last-child .butterfly-match::after, |
||||
.butterfly-round:last-child .butterfly-match::before { |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
{% endblock %} |
||||
{% endif %} |
||||
Loading…
Reference in new issue