From 6e1133bf47f83402a6630a97b594d32e30a1996f Mon Sep 17 00:00:00 2001
From: Raz <razmig@staxriver.com>
Date: Sun, 23 Mar 2025 10:09:14 +0100
Subject: [PATCH] fix bracket

---
 tournaments/models/match.py                   | 11 +++++++---
 tournaments/static/tournaments/css/style.css  | 17 ++++++++++++++++
 .../tournaments/css/tournament_bracket.css    |  6 +++++-
 .../tournaments/js/tournament_bracket.js      |  4 +++-
 .../tournaments/bracket_match_cell.html       | 20 +++++++++++++++++++
 5 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/tournaments/models/match.py b/tournaments/models/match.py
index 0414ae1..0080673 100644
--- a/tournaments/models/match.py
+++ b/tournaments/models/match.py
@@ -406,13 +406,16 @@ class Match(models.Model):
         time_indication = self.time_indication()
         court = self.court_name(self.court_index)
         group_stage_name = None
+        bracket_name = None
         if self.group_stage:
             group_stage_name = self.group_stage.display_name()
+        else:
+            bracket_name = f"Match n˚{self.index_in_round() + 1}"
 
         ended = self.end_date is not None
         live_format = "Format " + FederalMatchCategory(self.format).format_label_short
 
-        livematch = LiveMatch(self.index, title, date, time_indication, court, self.started(), ended, group_stage_name, live_format, self.start_date, self.court_index, self.disabled)
+        livematch = LiveMatch(self.index, title, date, time_indication, court, self.started(), ended, group_stage_name, live_format, self.start_date, self.court_index, self.disabled, bracket_name)
 
         for team in self.live_teams():
             livematch.add_team(team)
@@ -473,7 +476,7 @@ class Team:
         }
 
 class LiveMatch:
-    def __init__(self, index, title, date, time_indication, court, started, ended, group_stage_name, format, start_date, court_index, disabled):
+    def __init__(self, index, title, date, time_indication, court, started, ended, group_stage_name, format, start_date, court_index, disabled, bracket_name):
         self.index = index
         self.title = title
         self.date = date
@@ -488,6 +491,7 @@ class LiveMatch:
         self.disabled = disabled
         self.start_date = start_date
         self.court_index = court_index
+        self.bracket_name = bracket_name
 
     def add_team(self, team):
         self.teams.append(team)
@@ -508,7 +512,8 @@ class LiveMatch:
             "group_stage_name": self.group_stage_name,
             "format": self.format,
             "disabled": self.disabled,
-            "court_index": self.court_index
+            "court_index": self.court_index,
+            "bracket_name": self.bracket_name
         }
 
     def show_time_indication(self):
diff --git a/tournaments/static/tournaments/css/style.css b/tournaments/static/tournaments/css/style.css
index 8498c51..7abb2f5 100644
--- a/tournaments/static/tournaments/css/style.css
+++ b/tournaments/static/tournaments/css/style.css
@@ -862,6 +862,23 @@ h-margin {
     border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */
 }
 
+.status-container-bracket {
+    margin: 0px -20px -20px -20px; /* Negative margin to counter the bubble padding, including bottom */
+    padding: 10px 20px 20px 20px; /* Add padding back to maintain text alignment, including bottom */
+    border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */
+}
+
+.status-container-bracket-header {
+    height: 30px;
+    text-align: left;
+}
+
+.status-container-bracket-header-bottom {
+    height: 30px;
+    text-align: left;
+}
+
+.status-container-bracket.running,
 .status-container.running {
     background-color: #90ee90; /* Light green color */
 }
diff --git a/tournaments/static/tournaments/css/tournament_bracket.css b/tournaments/static/tournaments/css/tournament_bracket.css
index 1be8f50..ed1a1a4 100644
--- a/tournaments/static/tournaments/css/tournament_bracket.css
+++ b/tournaments/static/tournaments/css/tournament_bracket.css
@@ -43,7 +43,7 @@
     transform: translateX(-50%); /* Center it exactly */
     text-align: center;
     font-weight: bold;
-    width: auto; /* Change from 100% to auto */
+    width: 100%; /* Change from 100% to auto */
     padding: 5px 10px;
 
     white-space: nowrap; /* Prevent text from wrapping */
@@ -53,6 +53,10 @@
     justify-content: center;
 }
 
+.round-title.broadcast-mode {
+    width: auto; /* Change from 100% to auto */
+}
+
 .round-name {
     color: #707070;
     font-size: 1.5em;
diff --git a/tournaments/static/tournaments/js/tournament_bracket.js b/tournaments/static/tournaments/js/tournament_bracket.js
index 3f610f1..bbf058d 100644
--- a/tournaments/static/tournaments/js/tournament_bracket.js
+++ b/tournaments/static/tournaments/js/tournament_bracket.js
@@ -66,7 +66,9 @@ function renderBracket(options) {
     // Create title
     const titleDiv = document.createElement("div");
     titleDiv.className = "round-title";
-
+    if (isBroadcast) {
+      titleDiv.className = "round-title broadcast-mode";
+    }
     // Get the match group name and format
     const firstMatchTemplate = roundMatches[0].closest(".match-template");
     const matchGroupName = firstMatchTemplate.dataset.matchGroupName;
diff --git a/tournaments/templates/tournaments/bracket_match_cell.html b/tournaments/templates/tournaments/bracket_match_cell.html
index 6df8cb2..33a3bbc 100644
--- a/tournaments/templates/tournaments/bracket_match_cell.html
+++ b/tournaments/templates/tournaments/bracket_match_cell.html
@@ -2,6 +2,17 @@
 
         <div class="cell medium-12 large-3 my-block">
             <div class="bubble">
+
+                <div class="status-container-bracket-header">
+                    {% if match.bracket_name %}
+                    <label class="minor-info bold">{{ match.bracket_name }}</label>
+                    {% endif %}
+                    {% if not match.ended %}
+                    <label class="right-label minor-info bold">{{ match.court }}</label>
+                    {% endif %}
+                </div>
+
+
                 <div>
                 {% for team in match.teams %}
                 <div class="match-result {% cycle 'bottom-border' '' %}">
@@ -53,5 +64,14 @@
                 {% endfor %}
 
                 </div>
+                <div class="status-container-bracket-header-bottom">
+                    <div class="status-container-bracket {% if not match.ended and match.started %}running{% endif %}">
+                        <label class="left-label minor-info bold">
+                            {% if match.show_time_indication %}
+                            {{ match.time_indication }}
+                            {% endif %}
+                        </label>
+                    </div>
+                </div>
             </div>
         </div>