Add time indication for matches in broadcast bracket

tournaments/static/tournaments/css/tournament_bracket.css

@@ -61,6 +61,23 @@
     justify-content: center;
 }
 
+.match-time-indication {
+    position: absolute;
+    color: #fff;
+    left: 50%; /* Center horizontally */
+    transform: translateX(-50%); /* Center it exactly */
+    text-align: center;
+    font-weight: bold;
+    width: 100%; /* Change from 100% to auto */
+    padding: 0px 0px;
+
+    white-space: nowrap; /* Prevent text from wrapping */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
 .round-title.broadcast-mode {
     font-size: 0.8em;
     width: auto; /* Change from 100% to auto */

tournaments/static/tournaments/js/tournament_bracket.js

@@ -347,7 +347,7 @@ function renderBracket(options) {
       }
       matchDiv.style.setProperty(
         "--semi-final-distance",
-        `${baseDistance / 2}px`,
+        `${baseDistance / 2.3}px`,
       );
 
       matchDiv.style.setProperty(

tournaments/templates/tournaments/broadcast/broadcasted_bracket.html

@@ -158,8 +158,15 @@
 
                             // Create the match content using our HTML generator
                             template.innerHTML = `<div class="bubble broadcast-bracket-match ${(!match.ended && match.started) ? 'match-running' : ''}">${createMatchHTML(match)}</div>`;
+                            template_time = document.createElement('div');
+                            template_time.className = 'match-time-indication';
+                            template_time.style.textAlign = 'center';
+
+                            template_time.innerHTML = `<div>${match.time_indication}</div>`;
+                            template.appendChild(template_time);
 
                             tempContainer.appendChild(template);
+
                         });
                     });