From 1040b92eeeea45fe08ff6084d8c381f96b144f48 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 28 Dec 2021 09:19:10 +0200
Subject: [PATCH] Bracket defeated team visual

---
 app/components/tournament/EliminationBracket.tsx | 14 ++++++++++++--
 app/core/tournament/utils.ts                     | 11 +++++++++++
 app/styles/tournament-bracket.css                |  4 ++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/components/tournament/EliminationBracket.tsx b/app/components/tournament/EliminationBracket.tsx
index 4e0bb2ade..47f3dbeca 100644
--- a/app/components/tournament/EliminationBracket.tsx
+++ b/app/components/tournament/EliminationBracket.tsx
@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import invariant from "tiny-invariant";
+import { matchIsOver } from "~/core/tournament/utils";
 import type { BracketModified } from "~/services/tournament";
 import { MyCSSProperties, Unpacked } from "~/utils";
 
@@ -92,6 +93,7 @@ export function EliminationBracket({
                       key={match.id}
                       match={match}
                       ownTeamName={ownTeamName}
+                      isOver={matchIsOver(round.bestOf, match.score)}
                     />
                   );
                 })}
@@ -140,10 +142,12 @@ export function Match({
   match,
   hidden,
   ownTeamName,
+  isOver,
 }: {
   match: Unpacked<Unpacked<BracketModified["winners"]>["matches"]>;
   hidden?: boolean;
   ownTeamName?: string;
+  isOver: boolean;
 }) {
   return (
     <div className={classNames("tournament-bracket__elim__match", { hidden })}>
@@ -155,7 +159,10 @@ export function Match({
           "tournament-bracket__elim__team",
           "tournament-bracket__elim__teamOne",
           {
-            own: ownTeamName && ownTeamName === match.participants?.[0],
+            own:
+              !isOver && ownTeamName && ownTeamName === match.participants?.[0],
+            defeated:
+              isOver && (match.score?.[0] ?? 0) < (match.score?.[1] ?? 0),
           }
         )}
       >
@@ -173,7 +180,10 @@ export function Match({
           "tournament-bracket__elim__team",
           "tournament-bracket__elim__teamTwo",
           {
-            own: ownTeamName && ownTeamName === match.participants?.[1],
+            own:
+              !isOver && ownTeamName && ownTeamName === match.participants?.[1],
+            defeated:
+              isOver && (match.score?.[1] ?? 0) < (match.score?.[0] ?? 0),
           }
         )}
       >
diff --git a/app/core/tournament/utils.ts b/app/core/tournament/utils.ts
index e55080eea..785ddecb3 100644
--- a/app/core/tournament/utils.ts
+++ b/app/core/tournament/utils.ts
@@ -36,6 +36,17 @@ export function tournamentHasStarted(
   return brackets[0].rounds.length > 0;
 }
 
+export function matchIsOver(
+  bestOf: number,
+  score?: [upperTeamScore: number, lowerTeamScore: number]
+) {
+  if (!score) return false;
+
+  const [upperTeamScore, lowerTeamScore] = score;
+  const half = bestOf / 2;
+  return upperTeamScore > half || lowerTeamScore > half;
+}
+
 export const friendCodeRegExpString = "^(SW-)?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$";
 export const friendCodeRegExp = new RegExp(friendCodeRegExpString, "i");
 
diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css
index 8eb43468c..90a43939a 100644
--- a/app/styles/tournament-bracket.css
+++ b/app/styles/tournament-bracket.css
@@ -88,6 +88,10 @@
   font-weight: var(--bold);
 }
 
+.tournament-bracket__elim__team.defeated {
+  color: var(--text-lighter);
+}
+
 .tournament-bracket__elim__teamOne {
   border-radius: var(--rounded) var(--rounded) 0 0;
   grid-area: team-one;