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