diff --git a/tournaments/static/tournaments/css/tournament_bracket.css b/tournaments/static/tournaments/css/tournament_bracket.css index 12ba4d6..9598719 100644 --- a/tournaments/static/tournaments/css/tournament_bracket.css +++ b/tournaments/static/tournaments/css/tournament_bracket.css @@ -255,3 +255,19 @@ .match-result.broadcast-mode { padding: 0px; } + +.round-footer { + width: 100%; + text-decoration: underline; /* Ensures the link is underlined */ + padding: 20px; + margin: 0 auto; + text-align: center; + background-color: #f5f5f5; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: background-color 0.3s ease; +} + +.round-footer:hover { + background-color: #e8e8e8; +} diff --git a/tournaments/static/tournaments/js/tournament_bracket.js b/tournaments/static/tournaments/js/tournament_bracket.js index 85a9e67..d57091d 100644 --- a/tournaments/static/tournaments/js/tournament_bracket.js +++ b/tournaments/static/tournaments/js/tournament_bracket.js @@ -428,24 +428,64 @@ function renderBracket(options) { bracket.appendChild(roundDiv); }); - function adjustSpacerHeight() { - // Find the tallest match position to determine total height needed - let maxHeight = 0; - Object.values(matchPositions).forEach((round) => { - Object.values(round).forEach((position) => { - if (position > maxHeight) { - maxHeight = position; - } + if (isBroadcast == false || isBroadcast == undefined) { + setTimeout(() => { + const roundDivs = document.querySelectorAll(".butterfly-round"); + + // First, find the maximum bottom position across all rounds + let globalMaxBottom = 0; + + roundDivs.forEach((roundDiv) => { + const matches = roundDiv.querySelectorAll(".butterfly-match"); + matches.forEach((match) => { + const bottom = match.offsetTop + match.offsetHeight; + if (bottom > globalMaxBottom) { + globalMaxBottom = bottom; + } + }); }); - }); - // Add extra space for the match height itself - const spacerHeight = maxHeight + matchHeight / 2 + 40; // 100px extra padding - document.getElementById("bracket-spacer").style.height = - `${spacerHeight}px`; - } + // Now create and position footers for all rounds at the same y-position + roundDivs.forEach((roundDiv, index) => { + // Get the match templates from this round to extract data + const roundMatches = rounds[index] || []; + if (roundMatches.length > 0) { + const firstMatchTemplate = roundMatches[0].closest(".match-template"); + const roundId = firstMatchTemplate.dataset.roundId; + const realRoundIndex = firstMatchTemplate.dataset.roundIndex; + if (realRoundIndex > 1) { + // Create footer div + const footerDiv = document.createElement("div"); + footerDiv.className = "round-footer"; + footerDiv.style.width = `${responsiveMatchWidth}px`; + footerDiv.style.paddingBottom = "40px"; + footerDiv.style.textAlign = "center"; - if (isBroadcast == false) { - adjustSpacerHeight(); + // Create footer content + let linkSpan = document.createElement("a"); + linkSpan.className = "small styled-link"; + linkSpan.textContent = "accès au tableau de classement"; + if (roundId) { + linkSpan.href = `/tournament/${tournamentId}/round/${roundId}/bracket/`; + linkSpan.style.cursor = "pointer"; + } + + footerDiv.appendChild(linkSpan); + + // Create a container that will sit at the same position for all rounds + const footerContainer = document.createElement("div"); + footerContainer.style.position = "absolute"; + footerContainer.style.top = `${globalMaxBottom}px`; // Same position for all footers + footerContainer.style.width = "100%"; + footerContainer.appendChild(footerDiv); + + // Add to the round div + const matchesContainer = + roundDiv.querySelector(".matches-container"); + matchesContainer.appendChild(footerContainer); + } + } + }); + }, 100); } }