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