add link under bracket

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;
+}

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";
+
+            // 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";
             }
 
-  if (isBroadcast == false) {
-    adjustSpacerHeight();
+            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);
   }
 }