is side

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

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);

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}
           />

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>
   );
 };
 

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;
 

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);

src/Types/Player.ts

@@ -8,6 +8,7 @@ export type Player = {
   isStartingPlayer: boolean;
   showStartingPlayer: boolean;
   hasLost: boolean;
+  isSide: boolean;
 };
 
 export type PlayerSettings = {