From f5c0a38ff36b2e3343b22f57274d821ec5a5178e Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 23 Dec 2021 23:31:09 +0200
Subject: [PATCH] Fix bracket lines for losers

---
 .../tournament/EliminationBracket.tsx         | 22 ++++++++++++++-----
 .../$organization.$tournament/bracket.$id.tsx |  1 -
 app/styles/tournament-bracket.css             |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/components/tournament/EliminationBracket.tsx b/app/components/tournament/EliminationBracket.tsx
index f0a006836..8739b8592 100644
--- a/app/components/tournament/EliminationBracket.tsx
+++ b/app/components/tournament/EliminationBracket.tsx
@@ -28,16 +28,24 @@ export function EliminationBracket({
           />
         ))}
         {bracketSide.map((round, i) => {
+          const nextRound: Unpacked<BracketModified["winners"]> | undefined =
+            bracketSide[i + 1];
+          const amountOfMatchesBetweenRoundsEqual =
+            round.matches.length === nextRound?.matches.length;
+          const drawStraightLines =
+            round.matches.length === 1 || amountOfMatchesBetweenRoundsEqual;
           return (
             <div
               key={round.id}
               className="tournament-bracket__elim__column"
               style={
                 {
-                  "--brackets-bottom-border-length":
-                    round.matches.length === 1 ? 0 : undefined,
-                  "--brackets-column-matches":
-                    round.matches.length === 1 ? 0 : round.matches.length,
+                  "--brackets-bottom-border-length": drawStraightLines
+                    ? 0
+                    : undefined,
+                  "--brackets-column-matches": drawStraightLines
+                    ? 0
+                    : round.matches.length,
                 } as any
               }
             >
@@ -48,7 +56,11 @@ export function EliminationBracket({
               </div>
               <div className="tournament-bracket__elim__lines">
                 {i !== bracketSide.length - 1 &&
-                  new Array(Math.ceil(round.matches.length / 2))
+                  new Array(
+                    amountOfMatchesBetweenRoundsEqual
+                      ? round.matches.length
+                      : Math.ceil(round.matches.length / 2)
+                  )
                     .fill(null)
                     .map((_, i) => <div key={i} />)}
               </div>
diff --git a/app/routes/to/$organization.$tournament/bracket.$id.tsx b/app/routes/to/$organization.$tournament/bracket.$id.tsx
index b9665937b..7da86057d 100644
--- a/app/routes/to/$organization.$tournament/bracket.$id.tsx
+++ b/app/routes/to/$organization.$tournament/bracket.$id.tsx
@@ -19,7 +19,6 @@ export const loader: LoaderFunction = async ({ params }) => {
   return typedJson(bracket);
 };
 
-// TODO: bottom bracket lines are wrong
 // TODO: make bracket a bit smaller
 export default function BracketTabWrapper() {
   const data = useLoaderData<BracketModified>();
diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css
index 3585734ba..2970500f6 100644
--- a/app/styles/tournament-bracket.css
+++ b/app/styles/tournament-bracket.css
@@ -107,7 +107,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  padding-left: 7px;
+  padding-left: 5px;
 }
 
 .tournament-bracket__elim__lines > div {