From 724dcf086cfa4c28770c5e00b3f4f6af2a2639a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <thevikeo@gmail.com>
Date: Sat, 27 Jan 2024 09:32:00 +0100
Subject: [PATCH] is side

---
 src/Components/Buttons/CommanderDamage.tsx   |  8 ++------
 src/Components/Buttons/ExtraCounter.tsx      |  5 ++---
 src/Components/Counters/ExtraCountersBar.tsx |  5 +++++
 src/Components/LifeCounter/Health.tsx        | 18 +++++++++---------
 src/Components/LifeCounter/LifeCounter.tsx   |  6 +-----
 src/Data/getInitialPlayers.ts                |  1 +
 src/Types/Player.ts                          |  1 +
 7 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx
index 53c815e..156a2d2 100644
--- a/src/Components/Buttons/CommanderDamage.tsx
+++ b/src/Components/Buttons/CommanderDamage.tsx
@@ -66,10 +66,6 @@ export const CommanderDamage = ({
   const [timeoutFinished, setTimeoutFinished] = useState(false);
   const [hasPressedDown, setHasPressedDown] = useState(false);
 
-  const isSide =
-    player.settings.rotation === Rotation.Side ||
-    player.settings.rotation === Rotation.SideFlipped;
-
   const handleCommanderDamageChange = (
     index: number,
     increment: number,
@@ -132,9 +128,9 @@ export const CommanderDamage = ({
   };
 
   const opponentIndex = opponent.index;
-  const fontSize = isSide ? '4vmax' : '7vmin';
+  const fontSize = player.isSide ? '4vmax' : '7vmin';
   const fontWeight = 'bold';
-  const strokeWidth = isSide ? '0.4vmax' : '0.7vmin';
+  const strokeWidth = player.isSide ? '0.4vmax' : '0.7vmin';
 
   return (
     <CommanderDamageContainer
diff --git a/src/Components/Buttons/ExtraCounter.tsx b/src/Components/Buttons/ExtraCounter.tsx
index f4fffbb..18bb804 100644
--- a/src/Components/Buttons/ExtraCounter.tsx
+++ b/src/Components/Buttons/ExtraCounter.tsx
@@ -47,6 +47,7 @@ type ExtraCounterProps = {
   type: CounterType;
   setCounterTotal: (updatedCounterTotal: number, type: CounterType) => void;
   rotation: number;
+  isSide: boolean;
   playerIndex: number;
 };
 
@@ -56,15 +57,13 @@ const ExtraCounter = ({
   setCounterTotal,
   type,
   rotation,
+  isSide,
   playerIndex,
 }: ExtraCounterProps) => {
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
   const [hasPressedDown, setHasPressedDown] = useState(false);
 
-  const isSide =
-    rotation === Rotation.Side || rotation === Rotation.SideFlipped;
-
   const handleCountChange = (increment: number) => {
     if (!counterTotal) {
       setCounterTotal(increment, type);
diff --git a/src/Components/Counters/ExtraCountersBar.tsx b/src/Components/Counters/ExtraCountersBar.tsx
index 34f3ad3..d63890c 100644
--- a/src/Components/Counters/ExtraCountersBar.tsx
+++ b/src/Components/Counters/ExtraCountersBar.tsx
@@ -100,6 +100,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
                 (counter) => counter.type === 'commanderTax'
               )?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
@@ -114,6 +115,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
                 (counter) => counter.type === 'partnerTax'
               )?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
@@ -127,6 +129,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
               player.extraCounters?.find((counter) => counter.type === 'poison')
                 ?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
@@ -140,6 +143,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
               player.extraCounters?.find((counter) => counter.type === 'energy')
                 ?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
@@ -154,6 +158,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
                 (counter) => counter.type === 'experience'
               )?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
diff --git a/src/Components/LifeCounter/Health.tsx b/src/Components/LifeCounter/Health.tsx
index 7227a0e..a3b1e2b 100644
--- a/src/Components/LifeCounter/Health.tsx
+++ b/src/Components/LifeCounter/Health.tsx
@@ -8,7 +8,7 @@ import {
 import LifeCounterButton from '../Buttons/LifeCounterButton';
 import { OutlinedText } from '../Misc/OutlinedText';
 
-const LifeCountainer = twc.div<RotationDivProps>((props) => [
+const LifeContainer = twc.div<RotationDivProps>((props) => [
   'flex flex-grow relative w-full h-full justify-between items-center',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
     ? 'flex-col-reverse'
@@ -49,7 +49,6 @@ type HealthProps = {
 
 const Health = ({
   player,
-  rotation,
   handleLifeChange,
   differenceKey,
   recentDifference,
@@ -99,12 +98,13 @@ const Health = ({
   }, [textContainerRef]);
 
   const calculateFontSize = (container: HTMLDivElement) => {
-    const isSide =
-      rotation === Rotation.SideFlipped || rotation === Rotation.Side;
+    const widthRatio = player.isSide
+      ? container.clientHeight
+      : container.clientWidth;
 
-    const widthRatio = isSide ? container.clientHeight : container.clientWidth;
-
-    const heightRatio = isSide ? container.clientWidth : container.clientHeight;
+    const heightRatio = player.isSide
+      ? container.clientWidth
+      : container.clientHeight;
 
     const minRatio = Math.min(widthRatio, heightRatio);
 
@@ -116,7 +116,7 @@ const Health = ({
   };
 
   return (
-    <LifeCountainer $rotation={player.settings.rotation}>
+    <LifeContainer $rotation={player.settings.rotation}>
       <LifeCounterButton
         lifeTotal={player.lifeTotal}
         setLifeTotal={handleLifeChange}
@@ -154,7 +154,7 @@ const Health = ({
         operation="add"
         increment={1}
       />
-    </LifeCountainer>
+    </LifeContainer>
   );
 };
 
diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx
index 154b5c5..e0b82d5 100644
--- a/src/Components/LifeCounter/LifeCounter.tsx
+++ b/src/Components/LifeCounter/LifeCounter.tsx
@@ -73,11 +73,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   const [recentDifference, setRecentDifference] = useState(0);
   const [differenceKey, setDifferenceKey] = useState(Date.now());
 
-  const isSide =
-    player.settings.rotation === Rotation.Side ||
-    player.settings.rotation === Rotation.SideFlipped;
-
-  const rotationAngle = isSide
+  const rotationAngle = player.isSide
     ? player.settings.rotation - 180
     : player.settings.rotation;
 
diff --git a/src/Data/getInitialPlayers.ts b/src/Data/getInitialPlayers.ts
index 322b749..3584f43 100644
--- a/src/Data/getInitialPlayers.ts
+++ b/src/Data/getInitialPlayers.ts
@@ -229,6 +229,7 @@ export const createInitialPlayers = ({
       extraCounters: [],
       commanderDamage,
       hasLost: false,
+      isSide: rotation === Rotation.Side || rotation === Rotation.SideFlipped,
     };
 
     players.push(player);
diff --git a/src/Types/Player.ts b/src/Types/Player.ts
index 76b9eac..93ecd3f 100644
--- a/src/Types/Player.ts
+++ b/src/Types/Player.ts
@@ -8,6 +8,7 @@ export type Player = {
   isStartingPlayer: boolean;
   showStartingPlayer: boolean;
   hasLost: boolean;
+  isSide: boolean;
 };
 
 export type PlayerSettings = {