diff --git a/tournaments/templates/tournaments/tournament_bracket.html b/tournaments/templates/tournaments/tournament_bracket.html index ac3763b..76ae6d9 100644 --- a/tournaments/templates/tournaments/tournament_bracket.html +++ b/tournaments/templates/tournaments/tournament_bracket.html @@ -85,23 +85,21 @@ function renderBracket() { const formatSpan = document.createElement('div'); formatSpan.className = 'round-format'; formatSpan.textContent = matchFormat; - if (roundIndex >= finalRoundIndex - 1) { - if (roundCount > 5) { - titleDiv.style.transform = `translateX(-50%)`; - if (roundIndex >= finalRoundIndex + 2) { - titleDiv.style.transform = `translateX(-100%)`; - } - } - } titleDiv.appendChild(nameSpan); titleDiv.appendChild(formatSpan); - roundDiv.appendChild(titleDiv); // Create matches container const matchesContainer = document.createElement('div'); matchesContainer.className = 'matches-container'; - + if (roundIndex >= finalRoundIndex - 1) { + if (roundCount > 5) { + matchesContainer.style.transform = `translateX(-25%)`; + if (roundIndex >= finalRoundIndex + 2) { + matchesContainer.style.transform = `translateX(-50%)`; + } + } + } roundDiv.appendChild(matchesContainer); matchPositions[roundIndex] = []; @@ -176,11 +174,6 @@ function renderBracket() { 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'); } @@ -201,6 +194,32 @@ function renderBracket() { matchDiv.style.setProperty('--next-match-distance', `${nextMatchDistance}px`); matchDiv.style.top = `${top}px`; matchPositions[roundIndex][matchIndex] = top; + if (matchIndex === 0) { + + // // Add logo for final round + // if (roundIndex == finalRoundIndex) { + // const logoDiv = document.createElement('div'); + // logoDiv.className = 'round-logo'; + // const logoImg = document.createElement('img'); + // logoImg.src = '/static/tournaments/images/PadelClub_logo_512.png'; + // logoImg.alt = 'PadelClub Logo'; + // logoDiv.appendChild(logoImg); + // logoDiv.style.transform = `translateX(-50%)`; + // matchesContainer.appendChild(logoDiv); + // } + + + // Position title above the first match + titleDiv.style.top = `${top - 80}px`; // Adjust the 60px offset as needed + titleDiv.style.position = 'absolute'; + if (roundIndex == finalRoundIndex - 1) { + titleDiv.style.marginLeft = '50px'; + } else if (roundIndex == finalRoundIndex + 1) { + titleDiv.style.marginLeft = '-50px'; + } + + matchesContainer.appendChild(titleDiv); + } matchDiv.innerHTML = `
@@ -210,9 +229,6 @@ function renderBracket() { if (roundIndex == finalRoundIndex - 1) { const matchDiv2 = document.createElement('div'); matchDiv2.className = 'butterfly-match'; - 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`); @@ -231,7 +247,21 @@ function renderBracket() {