bracket update

tournaments/templates/tournaments/tournament_bracket.html

@@ -85,23 +85,21 @@ function renderBracket() {
         const formatSpan = document.createElement('div');
         formatSpan.className = 'round-format';
         formatSpan.textContent = matchFormat;
-        if (roundIndex >= finalRoundIndex - 1) {
-            if (roundCount > 5) {
-                titleDiv.style.transform = `translateX(-50%)`;
-                if (roundIndex >= finalRoundIndex + 2) {
-                    titleDiv.style.transform = `translateX(-100%)`;
-                }
-            }
-        }
 
         titleDiv.appendChild(nameSpan);
         titleDiv.appendChild(formatSpan);
-        roundDiv.appendChild(titleDiv);
 
         // Create matches container
         const matchesContainer = document.createElement('div');
         matchesContainer.className = 'matches-container';
-
+        if (roundIndex >= finalRoundIndex - 1) {
+          if (roundCount > 5) {
+            matchesContainer.style.transform = `translateX(-25%)`;
+            if (roundIndex >= finalRoundIndex + 2) {
+                matchesContainer.style.transform = `translateX(-50%)`;
+            }
+          }
+        }
         roundDiv.appendChild(matchesContainer);
 
         matchPositions[roundIndex] = [];
@@ -176,11 +174,6 @@ function renderBracket() {
 
             if (roundIndex >= finalRoundIndex - 1) {
               if (roundCount > 5) {
-                matchDiv.style.transform = `translateX(-50%)`;
-                if (roundIndex >= finalRoundIndex + 2) {
-                    matchDiv.style.transform = `translateX(-100%)`;
-                }
-
                 if (roundIndex == finalRoundIndex - 1) {
                   matchDiv.classList.add('inward');
                 }
@@ -201,6 +194,32 @@ function renderBracket() {
             matchDiv.style.setProperty('--next-match-distance', `${nextMatchDistance}px`);
             matchDiv.style.top = `${top}px`;
             matchPositions[roundIndex][matchIndex] = top;
+            if (matchIndex === 0) {
+
+              // // Add logo for final round
+              // if (roundIndex == finalRoundIndex) {
+              //     const logoDiv = document.createElement('div');
+              //     logoDiv.className = 'round-logo';
+              //     const logoImg = document.createElement('img');
+              //     logoImg.src = '/static/tournaments/images/PadelClub_logo_512.png';
+              //     logoImg.alt = 'PadelClub Logo';
+              //     logoDiv.appendChild(logoImg);
+              //     logoDiv.style.transform = `translateX(-50%)`;
+              //     matchesContainer.appendChild(logoDiv);
+              // }
+
+
+                // Position title above the first match
+                titleDiv.style.top = `${top - 80}px`; // Adjust the 60px offset as needed
+                titleDiv.style.position = 'absolute';
+                if (roundIndex == finalRoundIndex - 1) {
+                    titleDiv.style.marginLeft = '50px';
+                } else if (roundIndex == finalRoundIndex + 1) {
+                    titleDiv.style.marginLeft = '-50px';
+                }
+
+                matchesContainer.appendChild(titleDiv);
+            }
 
             matchDiv.innerHTML = `
                 <div class="incoming-line ${isDisabled ? 'disabled' : ''}"></div>
@@ -210,9 +229,6 @@ function renderBracket() {
             if (roundIndex == finalRoundIndex - 1) {
               const matchDiv2 = document.createElement('div');
               matchDiv2.className = 'butterfly-match';
-              if (roundCount > 5) {
-                matchDiv2.style.transform = `translateX(-50%)`;
-              }
               matchDiv2.classList.add('inward');
               matchDiv2.classList.add('semi-final');
               matchDiv2.style.setProperty('--next-match-distance', `${baseDistance}px`);
@@ -231,7 +247,21 @@ function renderBracket() {
 </script>
 
 <style>
+.round-logo img {
+    width: 50px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+    position: relative;
+    top: -100px; /* Increased negative value to move it higher up */
+}
 
+.round-logo img {
+    width: 100px; /* Adjust size as needed */
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
 .butterfly-match.same-level::before {
     display: none;
 }
@@ -255,10 +285,12 @@ function renderBracket() {
 
 
 .round-title {
-    width: 100%;
+    position: absolute;
-    margin-top: 20px;
+    top: 0px; /* Adjust this value to position the title where you want it */
+    padding: 5px 10px;
     text-align: center;
     font-weight: bold;
+    width: 100%; /* Change from 100% to auto */
 }
 
 .round-name {
@@ -285,6 +317,7 @@ function renderBracket() {
     position: relative;
     width: var(--match-width);
     flex-shrink: 0;
+    margin-top: 100px; /* Add padding to account for absolute positioned title */
 }
 
 .butterfly-match {
@@ -313,7 +346,7 @@ function renderBracket() {
 }
 
 /* Vertical line connecting pair of matches */
-.butterfly-match:nth-child(2n+1)::before {
+.butterfly-match:nth-child(2n)::before {
     content: "";
     position: absolute;
     left: calc(100% + 20px); /* After horizontal line */
@@ -323,7 +356,7 @@ function renderBracket() {
     background: #666;
 }
 
-.butterfly-match:nth-child(2n)::before {
+.butterfly-match:nth-child(2n+1)::before {
     content: "";
     position: absolute;
     left: calc(100% + 20px);
@@ -334,7 +367,7 @@ function renderBracket() {
 }
 
 /* Vertical line connecting pair of matches */
-.butterfly-match.reverse-bracket:nth-child(2n+1)::before {
+.butterfly-match.reverse-bracket:nth-child(2n)::before {
     content: "";
     position: absolute;
     left: calc(0% - 20px); /* After horizontal line */
@@ -344,7 +377,7 @@ function renderBracket() {
     background: #666;
 }
 
-.butterfly-match.reverse-bracket:nth-child(2n)::before {
+.butterfly-match.reverse-bracket:nth-child(2n+1)::before {
     content: "";
     position: absolute;
     left: calc(0% - 20px);