fix bracket

tournaments/models/match.py

@@ -390,7 +390,7 @@ class Match(models.Model):
         ended = self.end_date is not None
         live_format = "Format " + FederalMatchCategory(self.format).format_label_short
 
-        livematch = LiveMatch(title, date, time_indication, court, self.started(), ended, group_stage_name, live_format, self.start_date, self.court_index, self.disabled)
+        livematch = LiveMatch(title, date, time_indication, court, self.started(), ended, group_stage_name, live_format, self.start_date, self.court_index, self.disabled, self.index)
 
         for team in self.live_teams():
             livematch.add_team(team)
@@ -447,7 +447,7 @@ class Team:
         }
 
 class LiveMatch:
-    def __init__(self, title, date, time_indication, court, started, ended, group_stage_name, format, start_date, court_index, disabled):
+    def __init__(self, title, date, time_indication, court, started, ended, group_stage_name, format, start_date, court_index, disabled, index):
         self.title = title
         self.date = date
         self.teams = []
@@ -461,6 +461,7 @@ class LiveMatch:
         self.disabled = disabled
         self.start_date = start_date
         self.court_index = court_index
+        self.index = index
 
     def add_team(self, team):
         self.teams.append(team)
@@ -481,7 +482,8 @@ class LiveMatch:
             "format": self.format,
             "disabled": self.disabled,
             "start_date": self.start_date,
-            "court_index": self.court_index
+            "court_index": self.court_index,
+            "index": self.index
         }
 
     def show_time_indication(self):

tournaments/templates/tournaments/tournament_bracket.html

@@ -58,7 +58,7 @@ function renderBracket() {
     rounds.forEach((roundMatches, roundIndex) => {
         const roundDiv = document.createElement('div');
         roundDiv.className = 'butterfly-round';
-        roundDiv.style.setProperty('--match-width', `${360}px`);
+        roundDiv.style.setProperty('--match-width', `${365}px`);
         matchPositions[roundIndex] = [];
 
         roundMatches.forEach((matchTemplate, matchIndex) => {
@@ -78,46 +78,29 @@ function renderBracket() {
                 nextMatchDistance = 0;
             }
 
-            if (roundIndex === 0 || roundIndex === rounds.length - 1) {
-                top = matchIndex * (matchHeight + matchSpacing);
-                if (roundIndex === rounds.length - 1) {
-                  nextMatchDistance = baseDistance * Math.pow(2, rounds.length - roundIndex - 1);
-                  matchDiv.classList.add('reverse-bracket');
-                }
+            if (roundIndex > finalRoundIndex) {
+              matchDiv.classList.add('reverse-bracket');
+              top = matchPositions[roundCount - roundIndex - 1][matchIndex];
+              nextMatchDistance = baseDistance * Math.pow(2, rounds.length - roundIndex - 1);
             } else {
-                const previousRoundMatches = rounds[roundIndex - 1].length;
-                const currentRoundMatches = roundMatches.length;
-                if (currentRoundMatches === previousRoundMatches || roundIndex == finalRoundIndex + 1) {
-                    // Same number of matches as previous round
-                    top = matchPositions[roundIndex - 2][matchIndex];
-                    nextMatchDistance = 0;
-                } else if (roundIndex == finalRoundIndex) {
-                    if (finalRoundIndex === 2) {
-                      top = matchPositions[0][matchIndex];
-                    } else {
-                      top = matchPositions[0][1 + matchIndex];
-                    }
-                    nextMatchDistance = baseDistance;
-                } else if (currentRoundMatches > previousRoundMatches) {
-                    // Bracket is reversed - matches are splitting instead of combining
-                    const parentIndex = Math.floor(matchIndex / 2);
-                    if (parentIndex < matchPositions[roundIndex - 1].length) {
-                        const parentPos = matchPositions[roundIndex - 1][parentIndex];
-                        // Calculate offset based on whether it's an even or odd match
-                        const offset = (matchIndex % 2 === 0) ? -baseDistance : baseDistance;
-                        top = parentPos + offset;
-                    }
-                    nextMatchDistance = baseDistance * Math.pow(2, rounds.length - roundIndex - 1);
-                    matchDiv.classList.add('reverse-bracket');
-                } else {
-                    // Normal case where matches are combining
-                    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 = !isSingleMatchRound ? baseDistance * Math.pow(2, roundIndex) : 0;
-                }
+              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) {
@@ -128,18 +111,22 @@ function renderBracket() {
                 }
 
                 if (roundIndex == finalRoundIndex - 1) {
-                                  matchDiv.classList.add('inward');
-                                }
-                                if (roundIndex == finalRoundIndex + 1) {
-                                  matchDiv.classList.add('outward');
-                                }
+                  matchDiv.classList.add('inward');
+                }
+                if (roundIndex == finalRoundIndex + 1) {
+                  matchDiv.classList.add('outward');
+                }
               }
 
             }
 
-            if (roundIndex == 1 || roundIndex == roundCount - 2) {
-                nextMatchDistance = nextMatchDistance / 2;
+            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;

tournaments/views.py

@@ -985,7 +985,7 @@ def tournament_bracket(request, tournament_id):
 
     # Add first half of each round (from last to semi-finals)
     for round in main_rounds:
-        matches = round.match_set.all()
+        matches = round.match_set.all().order_by('index')
 
         if matches:
             if len(matches) > 1:
@@ -1008,7 +1008,7 @@ def tournament_bracket(request, tournament_id):
                 serializable_match_groups.append(match_group)
 
     for round in main_rounds_reversed:
-        matches = round.match_set.all()
+        matches = round.match_set.all().order_by('index')
         if matches:
             if len(matches) > 1:
                 midpoint = int(len(matches) / 2)