From 92337f37e22628f20f472bc0e23708880b2ffec5 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 19 Jan 2022 09:10:09 +0200
Subject: [PATCH] Display "Winner" as text in presentational mode

---
 .../tournament/TeamRosterInputs.tsx           | 53 +++++++++++++++----
 app/styles/tournament-bracket.css             |  6 +++
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/app/components/tournament/TeamRosterInputs.tsx b/app/components/tournament/TeamRosterInputs.tsx
index 6b18e941e..cc3a041f0 100644
--- a/app/components/tournament/TeamRosterInputs.tsx
+++ b/app/components/tournament/TeamRosterInputs.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import clone from "just-clone";
 import { TOURNAMENT_TEAM_ROSTER_MIN_SIZE } from "~/constants";
 import { Label } from "../Label";
@@ -55,17 +56,12 @@ export function TeamRosterInputs({
       {[teamUpper, teamLower].map((team, teamI) => (
         <div key={team.id}>
           <h4>{team.name}</h4>
-          <div className="tournament-bracket__during-match-actions__radio-container">
-            <input
-              type="radio"
-              id={team.id}
-              onChange={() => setWinnerId(team.id)}
-              checked={winnerId === team.id}
-            />
-            <Label className="mb-0 ml-2" htmlFor={team.id}>
-              Winner
-            </Label>
-          </div>
+          <WinnerRadio
+            presentational={presentational}
+            checked={winnerId === team.id}
+            teamId={team.id}
+            onChange={() => setWinnerId(team.id)}
+          />
           <TeamRosterInputsCheckboxes
             team={team}
             checkedPlayers={checkedPlayers[teamI]}
@@ -90,3 +86,38 @@ export function TeamRosterInputs({
     </div>
   );
 }
+
+/** Renders radio button to select winner, or in presentational mode just display the text "Winner" */
+function WinnerRadio({
+  presentational,
+  teamId,
+  checked,
+  onChange,
+}: {
+  presentational: boolean;
+  teamId: string;
+  checked: boolean;
+  onChange: () => void;
+}) {
+  if (presentational) {
+    return (
+      <div
+        className={clsx(
+          "tournament-bracket__during-match-actions__winner-text",
+          { invisible: !checked }
+        )}
+      >
+        Winner
+      </div>
+    );
+  }
+
+  return (
+    <div className="tournament-bracket__during-match-actions__radio-container">
+      <input type="radio" id={teamId} onChange={onChange} checked={checked} />
+      <Label className="mb-0 ml-2" htmlFor={teamId}>
+        Winner
+      </Label>
+    </div>
+  );
+}
diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css
index acdddce32..539de6588 100644
--- a/app/styles/tournament-bracket.css
+++ b/app/styles/tournament-bracket.css
@@ -134,6 +134,12 @@
   text-align: center;
 }
 
+.tournament-bracket__during-match-actions__winner-text {
+  font-size: var(--fonts-xs);
+  font-weight: var(--bold);
+  color: var(--theme-secondary);
+}
+
 .tournament-bracket__during-match-actions__radio-container {
   display: flex;
   align-items: center;