From d8804372262167d248170aea30a4a9ffc2e4ace2 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 20 Mar 2026 01:48:28 +0900
Subject: style(frontend): improve tournament bracket visual presentation

- Use brand-600 color for winner lines instead of pink-700
- Unify border width to 2px across all bracket lines
- Fix vertical lines changing color midway by using child match
  winner color for leg segments
- Add vertical stem above final round connector
- Increase vertical line height (3x) for better visual spacing

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/app/pages/TournamentPage.tsx | 53 ++++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/frontend/app/pages/TournamentPage.tsx b/frontend/app/pages/TournamentPage.tsx
index 01fcb9b..fd7cac8 100644
--- a/frontend/app/pages/TournamentPage.tsx
+++ b/frontend/app/pages/TournamentPage.tsx
@@ -15,7 +15,7 @@ function getBorderColor(match: TournamentMatch, userID?: number): string {
     return "border-black";
   }
   if (userID !== undefined && match.winner_user_id === userID) {
-    return "border-pink-700";
+    return "border-brand-600";
   }
   return "border-gray-400";
 }
@@ -25,7 +25,7 @@ function getBgColor(match: TournamentMatch, userID?: number): string {
     return "bg-black";
   }
   if (userID !== undefined && match.winner_user_id === userID) {
-    return "bg-pink-700";
+    return "bg-brand-600";
   }
   return "bg-gray-400";
 }
@@ -34,7 +34,7 @@ function getWinnerBgColor(match: TournamentMatch | undefined): string {
   if (!match?.winner_user_id) {
     return "bg-black";
   }
-  return "bg-pink-700";
+  return "bg-brand-600";
 }
 
 function PlayerCard({ entry }: { entry: TournamentEntry | undefined }) {
@@ -68,11 +68,15 @@ function Connector({
   colSpan,
   match,
   isTopRound,
+  leftChildMatch,
+  rightChildMatch,
 }: {
   position: number;
   colSpan: number;
   match: TournamentMatch | undefined;
   isTopRound: boolean;
+  leftChildMatch?: TournamentMatch;
+  rightChildMatch?: TournamentMatch;
 }) {
   const leftHalf = colSpan / 2;
   const rightHalf = colSpan - leftHalf;
@@ -83,12 +87,17 @@ function Connector({
   const rightBorderColor = match
     ? getBorderColor(match, match.player2?.user_id)
     : "border-black";
-  const leftBgColor = match
-    ? getBgColor(match, match.player1?.user_id)
-    : "bg-black";
-  const rightBgColor = match
-    ? getBgColor(match, match.player2?.user_id)
-    : "bg-black";
+  // Leg colors: use child match winner color so vertical lines don't change color midway
+  const leftLegColor = leftChildMatch
+    ? getWinnerBgColor(leftChildMatch)
+    : match
+      ? getBgColor(match, match.player1?.user_id)
+      : "bg-black";
+  const rightLegColor = rightChildMatch
+    ? getWinnerBgColor(rightChildMatch)
+    : match
+      ? getBgColor(match, match.player2?.user_id)
+      : "bg-black";
   const winnerBg = getWinnerBgColor(match);
 
   return (
@@ -98,21 +107,19 @@ function Connector({
       }}
     >
       {/* Center stem going UP to parent round */}
-      {!isTopRound && (
-        <div className="flex justify-center h-4">
-          <div className={`w-0.5 ${winnerBg}`} />
-        </div>
-      )}
+      <div className={`flex justify-center ${isTopRound ? "h-24" : "h-12"}`}>
+        <div className={`w-0.5 ${winnerBg}`} />
+      </div>
 
       {/* Horizontal line */}
       <div className="flex justify-center">
-        <div className={`w-1/4 border-t-4 ${leftBorderColor}`} />
-        <div className={`w-1/4 border-t-4 ${rightBorderColor}`} />
+        <div className={`w-1/4 border-t-2 ${leftBorderColor}`} />
+        <div className={`w-1/4 border-t-2 ${rightBorderColor}`} />
       </div>
 
       {/* Two legs going DOWN to child elements */}
       <div
-        className="grid h-4"
+        className="grid h-12"
         style={{
           gridTemplateColumns: `repeat(${colSpan}, 1fr)`,
         }}
@@ -121,13 +128,13 @@ function Connector({
           className="flex justify-center"
           style={{ gridColumn: `1 / span ${leftHalf}` }}
         >
-          <div className={`w-0.5 ${leftBgColor}`} />
+          <div className={`w-0.5 ${leftLegColor}`} />
         </div>
         <div
           className="flex justify-center"
           style={{ gridColumn: `${leftHalf + 1} / span ${rightHalf}` }}
         >
-          <div className={`w-0.5 ${rightBgColor}`} />
+          <div className={`w-0.5 ${rightLegColor}`} />
         </div>
       </div>
     </div>
@@ -161,6 +168,10 @@ function TournamentBracket({ tournament }: { tournament: Tournament }) {
     const connectors: React.ReactNode[] = [];
     for (let pos = 0; pos < numPositions; pos++) {
       const match = matchByKey.get(`${round}-${pos}`);
+      const leftChildMatch =
+        round > 0 ? matchByKey.get(`${round - 1}-${pos * 2}`) : undefined;
+      const rightChildMatch =
+        round > 0 ? matchByKey.get(`${round - 1}-${pos * 2 + 1}`) : undefined;
       connectors.push(
         <Connector
           key={`conn-${round}-${pos}`}
@@ -168,6 +179,8 @@ function TournamentBracket({ tournament }: { tournament: Tournament }) {
           colSpan={colSpan}
           match={match}
           isTopRound={round === num_rounds - 1}
+          leftChildMatch={leftChildMatch}
+          rightChildMatch={rightChildMatch}
         />,
       );
     }
@@ -199,7 +212,7 @@ function TournamentBracket({ tournament }: { tournament: Tournament }) {
     playerStems.push(
       <div
         key={`stem-${slot}`}
-        className="flex justify-center h-4"
+        className="flex justify-center h-12"
         style={{ gridColumn: `${slot + 1} / span 1` }}
       >
         <div className={`w-0.5 ${stemColor}`} />
-- 
cgit v1.3.1