fix issue with loser bracket bracket template

tournaments/models/round.py

@@ -177,7 +177,8 @@ class Round(SideStoreModel):
                 match_group = self.tournament.create_match_group(
                     name=name,
                     matches=first_half_matches,
-                    round_id=self.id
+                    round_id=self.id,
+                    round_index=self.index
                 )
                 return match_group
 

tournaments/models/tournament.py

@@ -548,7 +548,7 @@ class Tournament(BaseModel):
 
         return groups
 
-    def create_match_group(self, name, matches, round_id=None):
+    def create_match_group(self, name, matches, round_id=None, round_index=None):
         matches = list(matches)
         live_matches = [match.live_match() for match in matches]
         # Filter out matches that have a start_date of None
@@ -565,7 +565,7 @@ class Tournament(BaseModel):
             time_format = 'l d M'
             formatted_schedule = f" - {formats.date_format(local_start, format=time_format)}"
 
-        return MatchGroup(name, live_matches, formatted_schedule, round_id)
+        return MatchGroup(name, live_matches, formatted_schedule, round_id, round_index)
 
     def live_group_stages(self):
         group_stages = self.sorted_group_stages()
@@ -1864,11 +1864,12 @@ class Tournament(BaseModel):
 
 
 class MatchGroup:
-    def __init__(self, name, matches, formatted_schedule, round_id=None):
+    def __init__(self, name, matches, formatted_schedule, round_id=None, round_index=None):
         self.name = name
         self.matches = matches
         self.formatted_schedule = formatted_schedule
         self.round_id = round_id
+        self.round_index = round_index
 
     def add_match(self, match):
         self.matches.append(match)
@@ -1880,6 +1881,7 @@ class MatchGroup:
         return {
             'name': self.name,
             'round_id': self.round_id,
+            'round_index': self.round_index,
             'matches': [match.to_dict() for match in self.matches]
         }
 

tournaments/static/tournaments/js/tournament_bracket.js

@@ -34,7 +34,6 @@ function renderBracket(options) {
   let nextMatchDistance = baseDistance;
   let minimumMatchDistance = 1;
 
-  const totalRounds = document.querySelectorAll(".butterfly-round").length;
   const screenWidth = window.innerWidth;
   let roundTotalCount = roundCount;
   if (doubleButterflyMode == true && roundCount > 1) {
@@ -74,6 +73,7 @@ function renderBracket(options) {
     const matchGroupName = firstMatchTemplate.dataset.matchGroupName;
     const matchFormat = firstMatchTemplate.dataset.matchFormat;
     const roundId = firstMatchTemplate.dataset.roundId; // Add this line
+    const realRoundIndex = firstMatchTemplate.dataset.roundIndex; // Add this line
 
     let nameSpan = document.createElement("div");
     nameSpan.className = "round-name";
@@ -164,7 +164,8 @@ function renderBracket(options) {
         }
       } else if (roundIndex === roundCount - 1 && doubleButterflyMode == true) {
         nextMatchDistance = 0;
-      } else if (roundIndex == finalRoundIndex) {
+      } else if (roundIndex == finalRoundIndex && realRoundIndex == 0) {
+        //realRoundIndex 0 means final's round
         const values = Object.values(matchPositions[roundIndex - 1]);
         const parentPos1 = values[0];
         const parentPos2 = values[1];
@@ -199,7 +200,10 @@ function renderBracket(options) {
             }
           }
         }
-      } else if (roundIndex < finalRoundIndex) {
+      } else if (
+        (realRoundIndex == roundIndex && roundIndex <= finalRoundIndex) ||
+        (realRoundIndex != roundIndex && roundIndex < finalRoundIndex)
+      ) {
         const parentIndex1 = matchRealIndex * 2 + 1;
         const parentIndex2 = matchRealIndex * 2 + 2;
         const parentPos1 = matchPositions[roundIndex - 1][parentIndex1];
@@ -327,12 +331,8 @@ function renderBracket(options) {
         // }
 
         // Position title above the first match
-        if (
+        titleDiv.style.top = `${-80}px`; // Adjust the 60px offset as needed
-          roundIndex < finalRoundIndex - 1 ||
+        if (roundIndex == finalRoundIndex && realRoundIndex == 0) {
-          roundIndex > finalRoundIndex + 1
-        ) {
-          titleDiv.style.top = `${-80}px`; // Adjust the 60px offset as needed
-        } else {
           titleDiv.style.top = `${top - 80}px`; // Adjust the 60px offset as needed
         }
         titleDiv.style.position = "absolute";
@@ -348,6 +348,7 @@ function renderBracket(options) {
 
       if (
         roundIndex == finalRoundIndex &&
+        realRoundIndex == 0 &&
         matchIndex === 1 &&
         matchDisabled[roundIndex][matchRealIndex] == false &&
         displayLoserFinal == true &&
@@ -423,4 +424,23 @@ 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;
+        }
+      });
+    });
+
+    // 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`;
+  }
+
+  adjustSpacerHeight();
 }

tournaments/templates/tournaments/tournament_bracket.html

@@ -15,6 +15,7 @@
 {% include 'tournaments/navigation_tournament.html' %}
 
 <div class="butterfly-bracket" id="bracket"></div>
+<div id="bracket-spacer" style="height: 100px;"></div>
 
 <div id="match-templates" style="display: none;">
     {% for match_group in match_groups %}
@@ -28,6 +29,7 @@
                      data-match-title="{{ match.title }}"
                      data-match-real-index="{{ match.index }}"
                      data-round-id="{{ match_group.round_id }}"
+                     data-round-index="{{ match_group.round_index }}"
                      class="match-template">
                     {% include 'tournaments/bracket_match_cell.html' %}
                 </div>