From 2a261925c224aaefd9a3d6ba5c05a5f30df30b6e Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 19 May 2023 16:43:22 +0300
Subject: [PATCH] Seeds on tournament match page

---
 .../components/TeamRosterInputs.tsx            |  7 ++++++-
 .../routes/to.$id.matches.$mid.tsx             | 18 ++++++++++++++++++
 .../tournament-bracket/tournament-bracket.css  |  5 +++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/features/tournament-bracket/components/TeamRosterInputs.tsx b/app/features/tournament-bracket/components/TeamRosterInputs.tsx
index 1f13c5af8..bfde0a58d 100644
--- a/app/features/tournament-bracket/components/TeamRosterInputs.tsx
+++ b/app/features/tournament-bracket/components/TeamRosterInputs.tsx
@@ -67,7 +67,12 @@ export function TeamRosterInputs({
             />
             Team {teamI + 1}
           </div>
-          <h4>{team.name}</h4>
+          <h4>
+            <span className="tournament-bracket__during-match-actions__seed">
+              #{data.seeds[teamI]}
+            </span>{" "}
+            {team.name}
+          </h4>
           <WinnerRadio
             presentational={presentational}
             checked={
diff --git a/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx b/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
index 8304395bc..3bda11256 100644
--- a/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
@@ -276,7 +276,25 @@ export const loader = ({ params }: LoaderArgs) => {
   return {
     match,
     results: findResultsByMatchId(matchId),
+    seeds: resolveSeeds(),
   };
+
+  function resolveSeeds() {
+    const tournamentId = tournamentIdFromParams(params);
+    const teams = findTeamsByTournamentId(tournamentId);
+
+    const teamOneIndex = teams.findIndex(
+      (team) => team.id === match.opponentOne?.id
+    );
+    const teamTwoIndex = teams.findIndex(
+      (team) => team.id === match.opponentTwo?.id
+    );
+
+    return [
+      teamOneIndex !== -1 ? teamOneIndex + 1 : null,
+      teamTwoIndex !== -1 ? teamTwoIndex + 1 : null,
+    ];
+  }
 };
 
 export default function TournamentMatchPage() {
diff --git a/app/features/tournament-bracket/tournament-bracket.css b/app/features/tournament-bracket/tournament-bracket.css
index 4dc0de308..2cc31cfe7 100644
--- a/app/features/tournament-bracket/tournament-bracket.css
+++ b/app/features/tournament-bracket/tournament-bracket.css
@@ -190,6 +190,11 @@
   cursor: pointer;
 }
 
+.tournament-bracket__during-match-actions__seed {
+  font-size: var(--fonts-xxs);
+  color: var(--theme);
+}
+
 .tournament-bracket__mode-progress {
   display: flex;
   margin-bottom: var(--s-4);