Merge branch 'main' of https://gitea.staxriver.com/staxriver/padelclub_backend
commit
a92a5103f6
@ -0,0 +1,80 @@ |
||||
{% load static %} |
||||
|
||||
<div class="cell medium-12 large-3 my-block"> |
||||
<div class="bubble"> |
||||
|
||||
<div class="flex-row"> |
||||
<label class="matchtitle">{{ match.title }}</label> |
||||
{% if not match.ended %} |
||||
<label class="right-label minor-info bold">{{ match.court }}</label> |
||||
{% endif %} |
||||
</div> |
||||
|
||||
<div> |
||||
|
||||
{% for team in match.teams %} |
||||
<div class="match-result {% cycle 'bottom-border' '' %}"> |
||||
<div class="player"> |
||||
{% if team.id %} |
||||
<a href="{% url 'team-details' tournament.id team.id %}" class="player-link"> |
||||
{% endif %} |
||||
|
||||
{% if team.is_lucky_loser or team.walk_out == 1 %} |
||||
<div class="overlay-text"> |
||||
{% if team.is_lucky_loser %}(LL){% elif team.walk_out == 1 %}(WO){% endif %} |
||||
</div> |
||||
{% endif %} |
||||
|
||||
{% for name in team.names %} |
||||
<div class="semibold{% if team.walk_out == 1 %} strikethrough{% endif %}{% if team.is_winner %} winner{% endif %}"> |
||||
{% if name|length > 0 %} |
||||
{{ name }} |
||||
{% else %} |
||||
|
||||
{% endif %} |
||||
</div> |
||||
{% endfor %} |
||||
{% if team.id %} |
||||
</a> |
||||
{% endif %} |
||||
</div> |
||||
|
||||
{% if match.has_walk_out %} |
||||
<span class="score ws w60px"> |
||||
{% if team.is_walk_out %}WO{% endif %} |
||||
</span> |
||||
{% elif match.should_show_scores %} |
||||
<div class="scores"> |
||||
{% for score in team.scores %} |
||||
<span class="score ws {% if score.tiebreak %}w35px{% else %}w30px{% endif %}{% if team.is_winner %} winner{% endif %}"> |
||||
{{ score.main }} |
||||
{% if score.tiebreak %} |
||||
<sup>{{ score.tiebreak }}</sup> |
||||
{% endif %} |
||||
</span> |
||||
{% endfor %} |
||||
</div> |
||||
{% elif not tournament.hide_weight and team.weight %} |
||||
<span class="score ws numbers">{{ team.weight }}</span> |
||||
{% endif %} |
||||
</div> |
||||
|
||||
{% endfor %} |
||||
|
||||
</div> |
||||
<div class="status-container {% if not match.ended and match.started %}running{% endif %}"> |
||||
<div class="flex-row top-margin"> |
||||
<label class="left-label minor-info bold"> |
||||
{% if match.show_time_indication %} |
||||
{{ match.time_indication }} |
||||
{% endif %} |
||||
</label> |
||||
<label class="right-label minor-info"> |
||||
{% if not match.ended %} |
||||
{{ match.format }} |
||||
{% endif %} |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,40 @@ |
||||
{% 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 %} |
||||
|
||||
{% block content %} |
||||
|
||||
{% if tournament.display_matches %} |
||||
{% include 'tournaments/navigation_tournament.html' %} |
||||
|
||||
{% if tournament.display_matches or tournament.display_group_stages %} |
||||
|
||||
{% regroup match_groups.matches by start_date|date:"l d F Y" as matches_by_date %} |
||||
|
||||
{% for date in matches_by_date %} |
||||
|
||||
{% regroup date.list by start_date|date:"H:i" as matches_by_hour %} |
||||
|
||||
{% for hour_group in matches_by_hour %} |
||||
<h1 class="club my-block topmargin20">{{ date.grouper }} {{ hour_group.grouper }}</h1> |
||||
|
||||
{% regroup hour_group.list by court_index as matches_by_court %} |
||||
|
||||
<div class="grid-x"> |
||||
{% for court in matches_by_court|dictsort:"grouper" %} |
||||
{% for match_data in court.list %} |
||||
{% with match=match_data.match %} |
||||
{% include 'tournaments/match_cell.html' %} |
||||
{% endwith %} |
||||
{% endfor %} |
||||
{% endfor %} |
||||
</div> |
||||
{% endfor %} |
||||
{% endfor %} |
||||
|
||||
|
||||
{% endif %} |
||||
{% endif %} |
||||
{% endblock %} |
||||
@ -0,0 +1,288 @@ |
||||
{% 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 %} |
||||
|
||||
{% block content %} |
||||
|
||||
{% if tournament.display_matches %} |
||||
{% 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/bracket_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; |
||||
const baseDistance = matchHeight + matchSpacing; |
||||
bracket.innerHTML = ''; |
||||
const roundCount = rounds.length; |
||||
const finalRoundIndex = (roundCount - 1) / 2; |
||||
|
||||
rounds.forEach((roundMatches, roundIndex) => { |
||||
const roundDiv = document.createElement('div'); |
||||
roundDiv.className = 'butterfly-round'; |
||||
roundDiv.style.setProperty('--match-width', `${365}px`); |
||||
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; |
||||
let left; |
||||
let right; |
||||
let nextMatchDistance = baseDistance; |
||||
|
||||
// Check if this round has only one match |
||||
const isSingleMatchRound = roundMatches.length === 1; |
||||
if (isSingleMatchRound) { |
||||
matchDiv.classList.add('single-match-round'); |
||||
nextMatchDistance = 0; |
||||
} |
||||
|
||||
if (roundIndex > finalRoundIndex) { |
||||
matchDiv.classList.add('reverse-bracket'); |
||||
top = matchPositions[roundCount - roundIndex - 1][matchIndex]; |
||||
nextMatchDistance = baseDistance * Math.pow(2, rounds.length - roundIndex - 1); |
||||
} else { |
||||
nextMatchDistance = baseDistance * Math.pow(2, roundIndex); |
||||
} |
||||
|
||||
if (roundIndex === 0) { |
||||
top = matchIndex * (matchHeight + matchSpacing); |
||||
} else if (roundIndex == finalRoundIndex) { |
||||
let lgth = matchPositions[0].length / 2; |
||||
let index = lgth + matchIndex - 1; |
||||
// If index goes negative, use 0 instead |
||||
top = matchPositions[0][index < 0 ? 0 : index]; |
||||
nextMatchDistance = baseDistance; |
||||
} else if (roundIndex < finalRoundIndex) { |
||||
const parentIndex1 = matchIndex * 2; |
||||
const parentIndex2 = parentIndex1 + 1; |
||||
const parentPos1 = matchPositions[roundIndex - 1][parentIndex1]; |
||||
const parentPos2 = matchPositions[roundIndex - 1][parentIndex2]; |
||||
top = (parentPos1 + parentPos2) / 2; |
||||
nextMatchDistance = baseDistance * Math.pow(2, roundIndex); |
||||
} |
||||
|
||||
if (roundIndex >= finalRoundIndex - 1) { |
||||
if (roundCount > 5) { |
||||
matchDiv.style.transform = `translateX(-50%)`; |
||||
if (roundIndex >= finalRoundIndex + 2) { |
||||
matchDiv.style.transform = `translateX(-100%)`; |
||||
} |
||||
|
||||
if (roundIndex == finalRoundIndex - 1) { |
||||
matchDiv.classList.add('inward'); |
||||
} |
||||
if (roundIndex == finalRoundIndex + 1) { |
||||
matchDiv.classList.add('outward'); |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
if (roundIndex === finalRoundIndex - 2 || roundIndex === finalRoundIndex + 2) { |
||||
nextMatchDistance = (nextMatchDistance - baseDistance); |
||||
} |
||||
else if (roundIndex == finalRoundIndex - 1 || roundIndex == finalRoundIndex + 1) { |
||||
nextMatchDistance = baseDistance; |
||||
} |
||||
|
||||
matchDiv.style.setProperty('--next-match-distance', `${nextMatchDistance}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> |
||||
`; |
||||
|
||||
if (roundIndex == finalRoundIndex - 1) { |
||||
const matchDiv2 = document.createElement('div'); |
||||
matchDiv2.className = 'butterfly-match'; |
||||
matchDiv2.style.position = 'absolute'; |
||||
if (roundCount > 5) { |
||||
matchDiv2.style.transform = `translateX(-50%)`; |
||||
} |
||||
matchDiv2.classList.add('inward'); |
||||
matchDiv2.classList.add('semi-final'); |
||||
matchDiv2.style.setProperty('--next-match-distance', `${baseDistance}px`); |
||||
matchDiv2.style.top = `${top}px`; |
||||
matchDiv2.innerHTML = ` |
||||
`; |
||||
roundDiv.appendChild(matchDiv2); |
||||
} |
||||
roundDiv.appendChild(matchDiv); |
||||
}); |
||||
|
||||
bracket.appendChild(roundDiv); |
||||
}); |
||||
} |
||||
|
||||
renderBracket(); |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
|
||||
.butterfly-match.same-level::before { |
||||
display: none; |
||||
} |
||||
|
||||
/* Adjust styling for matches with single parent */ |
||||
.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: var(--match-width); /* 300px for match + 20px on each side for lines */ |
||||
flex-shrink: 0; /* Prevents rounds from shrinking */ |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
|
||||
.semi-final::after { |
||||
content: ""; |
||||
position: absolute; |
||||
left: calc(100% + 20px); /* After horizontal line */ |
||||
top: -4px; |
||||
width: 2px; |
||||
height: calc(var(--next-match-distance)); |
||||
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; |
||||
} |
||||
|
||||
/* Vertical line connecting pair of matches */ |
||||
.butterfly-match.reverse-bracket:nth-child(2n+1)::before { |
||||
content: ""; |
||||
position: absolute; |
||||
left: calc(0% - 20px); /* After horizontal line */ |
||||
top: calc(50% + 2px); |
||||
width: 2px; |
||||
height: calc((var(--next-match-distance)) / 2); |
||||
background: #666; |
||||
} |
||||
|
||||
.butterfly-match.reverse-bracket:nth-child(2n)::before { |
||||
content: ""; |
||||
position: absolute; |
||||
left: calc(0% - 20px); |
||||
bottom: 50%; /* 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; |
||||
} |
||||
|
||||
.inward .incoming-line { |
||||
display: none; |
||||
} |
||||
|
||||
.butterfly-match.outward::after { |
||||
display: none; |
||||
} |
||||
|
||||
.butterfly-round:last-child .butterfly-match::after, |
||||
.butterfly-round:first-child .incoming-line { |
||||
display: none; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
{% endif %} |
||||
{% endblock %} |
||||
Loading…
Reference in new issue