commander damage in localstorage

my-app/src/Components/Buttons/CommanderDamageBar.tsx

@@ -60,56 +60,61 @@ const VerticalSeperator = styled.div`
 
 type CommanderDamageBarProps = {
   lifeTotal: number;
-  setLifeTotal: (lifeTotal: number) => void;
   opponents: Player[];
+  player: Player;
+  onPlayerChange: (updatedPlayer: Player) => void;
 };
 
 const CommanderDamageBar = ({
   opponents,
   lifeTotal,
-  setLifeTotal,
+  player,
+  onPlayerChange,
 }: CommanderDamageBarProps) => {
-  const [commanderDamage, setCommanderDamage] = useState<number[]>(
-    Array(opponents.length).fill(0)
-  );
-  const [partnerCommanderDamage, setPartnerCommanderDamage] = useState<
-    number[]
-  >(Array(opponents.length).fill(0));
-
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
   const [hasPressedDown, setHasPressedDown] = useState(false);
 
-  const handleCommanderDamageChange = (index: number, increment: number) => {
-    const currentCommanderDamage = commanderDamage[index];
-    if (currentCommanderDamage === 0 && increment === -1) {
-      return;
-    }
-
-    if (currentCommanderDamage === 21 && increment === 1) {
-      return;
-    }
-
-    const updatedCommanderDamage = [...commanderDamage];
-    updatedCommanderDamage[index] += increment;
-    setCommanderDamage(updatedCommanderDamage);
-    setLifeTotal(lifeTotal - increment);
+  const handleLifeChange = (updatedLifeTotal: number) => {
+    const updatedPlayer = { ...player, lifeTotal: updatedLifeTotal };
+    onPlayerChange(updatedPlayer);
   };
 
-  const handlePartnerCommanderDamageChange = (
+  const handleCommanderDamageChange = (
     index: number,
-    increment: number
+    increment: number,
+    isPartner: boolean
   ) => {
-    const currentPartnerCommanderDamage = partnerCommanderDamage[index];
-    if (currentPartnerCommanderDamage === 0 && increment === -1) {
+    const currentCommanderDamage = player.commanderDamage[index];
+    if (isPartner) {
+      if (currentCommanderDamage.partnerDamageTotal === 0 && increment === -1) {
         return;
       }
 
-    const updatedPartnerCommanderDamage = [...partnerCommanderDamage];
-    updatedPartnerCommanderDamage[index] += increment;
+      const updatedCommanderDamage = [...player.commanderDamage];
+      updatedCommanderDamage[index].partnerDamageTotal += increment;
 
-    setPartnerCommanderDamage(updatedPartnerCommanderDamage);
-    setLifeTotal(lifeTotal - increment);
+      const updatedPlayer = {
+        ...player,
+        commanderDamage: updatedCommanderDamage,
+      };
+      onPlayerChange(updatedPlayer);
+      handleLifeChange(lifeTotal - increment);
+      return;
+    }
+    if (currentCommanderDamage.damageTotal === 0 && increment === -1) {
+      return;
+    }
+
+    const updatedCommanderDamage = [...player.commanderDamage];
+    updatedCommanderDamage[index].damageTotal += increment;
+
+    const updatedPlayer = {
+      ...player,
+      commanderDamage: updatedCommanderDamage,
+    };
+    onPlayerChange(updatedPlayer);
+    handleLifeChange(lifeTotal - increment);
   };
 
   const handleDownInput = (index: number) => {
@@ -117,7 +122,7 @@ const CommanderDamageBar = ({
     setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
       setTimeoutFinished(true);
-      handleCommanderDamageChange(index, -1);
+      handleCommanderDamageChange(index, -1, false);
     }, 500);
   };
 
@@ -126,7 +131,7 @@ const CommanderDamageBar = ({
       return;
     }
     clearTimeout(timeoutRef.current);
-    handleCommanderDamageChange(index, 1);
+    handleCommanderDamageChange(index, 1, false);
     setHasPressedDown(false);
   };
 
@@ -141,7 +146,7 @@ const CommanderDamageBar = ({
     setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
       setTimeoutFinished(true);
-      handlePartnerCommanderDamageChange(index, -1);
+      handleCommanderDamageChange(index, -1, true);
     }, 500);
   };
 
@@ -150,7 +155,7 @@ const CommanderDamageBar = ({
       return;
     }
     clearTimeout(timeoutRef.current);
-    handlePartnerCommanderDamageChange(index, 1);
+    handleCommanderDamageChange(index, 1, true);
     setHasPressedDown(false);
   };
 
@@ -178,7 +183,9 @@ const CommanderDamageBar = ({
               backgroundColor={opponent.color}
             >
               <CommanderDamageButtonText>
-                {commanderDamage[index] > 0 ? commanderDamage[index] : ''}
+                {player.commanderDamage[index].damageTotal > 0
+                  ? player.commanderDamage[index].damageTotal
+                  : ''}
               </CommanderDamageButtonText>
             </CommanderDamageButton>
 
@@ -198,8 +205,8 @@ const CommanderDamageBar = ({
                   backgroundColor={opponent.color}
                 >
                   <CommanderDamageButtonText>
-                    {partnerCommanderDamage[index] > 0
-                      ? partnerCommanderDamage[index]
+                    {player.commanderDamage[index].partnerDamageTotal > 0
+                      ? player.commanderDamage[index].partnerDamageTotal
                       : ''}
                   </CommanderDamageButtonText>
                 </CommanderDamageButton>

my-app/src/Components/Counters/Counters.style.ts

@@ -34,3 +34,10 @@ export const GridItemContainerFlipped = styled.div`
   align-items: center;
   transform: rotate(180deg);
 `;
+
+export const ExtraCountersGrid = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  width: 100%;
+`;

my-app/src/Components/Counters/ExtraCountersBar.tsx

@@ -0,0 +1,115 @@
+import * as S from './Counters.style';
+import { CounterType, Player } from '../../Types/Player';
+import ExtraCounter from '../Buttons/ExtraCounter';
+import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
+import EnergyIcon from '../../Icons/EnergyIcon';
+import ExperienceIcon from '../../Icons/ExperienceIcon';
+import PoisonIcon from '../../Icons/PoisonIcon';
+import PartnerTaxIcon from '../../Icons/PartnerTaxIcon';
+
+type ExtraCountersBarProps = {
+  player: Player;
+  onPlayerChange: (updatedPlayer: Player) => void;
+};
+
+const ExtraCountersBar = ({
+  player,
+  onPlayerChange,
+}: ExtraCountersBarProps) => {
+  const handleCounterChange = (
+    updatedCounterTotal: number,
+    type: CounterType
+  ) => {
+    const existingCounter = player.extraCounters.find(
+      (counter) => counter.type === type
+    );
+
+    if (!existingCounter) {
+      const newCounter = {
+        type,
+        value: updatedCounterTotal,
+      };
+      const updatedExtraCounters = [...player.extraCounters, newCounter];
+      const updatedPlayer = { ...player, extraCounters: updatedExtraCounters };
+      onPlayerChange(updatedPlayer);
+      return;
+    }
+
+    const updatedExtraCounters = player.extraCounters.map((counter) => {
+      if (counter.type === type) {
+        return { ...counter, value: updatedCounterTotal };
+      }
+      return counter;
+    });
+
+    const updatedPlayer = { ...player, extraCounters: updatedExtraCounters };
+    onPlayerChange(updatedPlayer);
+  };
+
+  return (
+    <S.ExtraCountersGrid>
+      {player.settings.useCommanderDamage && (
+        <ExtraCounter
+          Icon={<CommanderTaxIcon size="8vmin" />}
+          type={CounterType.CommanderTax}
+          counterTotal={
+            player.extraCounters?.find(
+              (counter) => counter.type === 'commanderTax'
+            )?.value
+          }
+          setCounterTotal={handleCounterChange}
+        />
+      )}
+      {Boolean(
+        player.settings.useCommanderDamage && player.settings.usePartner
+      ) && (
+        <ExtraCounter
+          Icon={<PartnerTaxIcon size="8vmin" />}
+          type={CounterType.PartnerTax}
+          counterTotal={
+            player.extraCounters?.find(
+              (counter) => counter.type === 'partnerTax'
+            )?.value
+          }
+          setCounterTotal={handleCounterChange}
+        />
+      )}
+      {player.settings.usePoison && (
+        <ExtraCounter
+          Icon={<PoisonIcon size="8vmin" />}
+          type={CounterType.Poison}
+          counterTotal={
+            player.extraCounters?.find((counter) => counter.type === 'poison')
+              ?.value
+          }
+          setCounterTotal={handleCounterChange}
+        />
+      )}
+      {player.settings.useEnergy && (
+        <ExtraCounter
+          Icon={<EnergyIcon size="8vmin" />}
+          type={CounterType.Energy}
+          counterTotal={
+            player.extraCounters?.find((counter) => counter.type === 'energy')
+              ?.value
+          }
+          setCounterTotal={handleCounterChange}
+        />
+      )}
+      {player.settings.useExperience && (
+        <ExtraCounter
+          Icon={<ExperienceIcon size="8vmin" />}
+          type={CounterType.Experience}
+          counterTotal={
+            player.extraCounters?.find(
+              (counter) => counter.type === 'experience'
+            )?.value
+          }
+          setCounterTotal={handleCounterChange}
+        />
+      )}
+    </S.ExtraCountersGrid>
+  );
+};
+
+export default ExtraCountersBar;

my-app/src/Components/LifeCounter/LifeCounter.style.ts

@@ -51,10 +51,3 @@ export const LifeCounterText = styled.p`
   -webkit-user-select: none;
   -ms-user-select: none;
 `;
-
-export const ExtraCountersGrid = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  width: 100%;
-`;

my-app/src/Components/LifeCounter/LifeCounter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import * as S from './LifeCounter.style';
 import { CounterType, Player } from '../../Types/Player';
 import { useSwipeable } from 'react-swipeable';
@@ -6,14 +6,8 @@ import AddLifeButton from '../Buttons/AddLifeButton';
 import SubtractLifeButton from '../Buttons/SubtractLifeButton';
 import CommanderDamageBar from '../Buttons/CommanderDamageBar';
 import PlayerMenu from '../PlayerMenu/PlayerMenu';
-
-import ExtraCounter from '../Buttons/ExtraCounter';
-import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
-import EnergyIcon from '../../Icons/EnergyIcon';
-import ExperienceIcon from '../../Icons/ExperienceIcon';
-import PoisonIcon from '../../Icons/PoisonIcon';
-import PartnerTaxIcon from '../../Icons/PartnerTaxIcon';
 import SettingsButton from '../Buttons/SettingsButton';
+import ExtraCountersBar from '../Counters/ExtraCountersBar';
 
 type LifeCounterProps = {
   player: Player;
@@ -33,36 +27,6 @@ const LifeCounter = ({
     onPlayerChange(updatedPlayer);
   };
 
-  const handleCounterChange = (
-    updatedCounterTotal: number,
-    type: CounterType
-  ) => {
-    const existingCounter = player.extraCounters.find(
-      (counter) => counter.type === type
-    );
-
-    if (!existingCounter) {
-      const newCounter = {
-        type: type,
-        value: updatedCounterTotal,
-      };
-      const updatedExtraCounters = [...player.extraCounters, newCounter];
-      const updatedPlayer = { ...player, extraCounters: updatedExtraCounters };
-      onPlayerChange(updatedPlayer);
-      return;
-    }
-
-    const updatedExtraCounters = player.extraCounters.map((counter) => {
-      if (counter.type === type) {
-        return { ...counter, value: updatedCounterTotal };
-      }
-      return counter;
-    });
-
-    const updatedPlayer = { ...player, extraCounters: updatedExtraCounters };
-    onPlayerChange(updatedPlayer);
-  };
-
   const [showPlayerMenu, setShowPlayerMenu] = useState(false);
 
   const swipeHandlers = useSwipeable({
@@ -77,8 +41,9 @@ const LifeCounter = ({
       <S.LifeCounterContentContainer {...swipeHandlers}>
         <CommanderDamageBar
           lifeTotal={player.lifeTotal}
-          setLifeTotal={handleLifeChange}
           opponents={opponents}
+          player={player}
+          onPlayerChange={onPlayerChange}
         />
         <SettingsButton
           onClick={() => {
@@ -96,72 +61,8 @@ const LifeCounter = ({
             setLifeTotal={handleLifeChange}
           />
         </S.LifeCountainer>
-        <S.ExtraCountersGrid>
-          {player.settings.useCommanderDamage && (
-            <ExtraCounter
-              Icon={<CommanderTaxIcon size="8vmin" />}
-              type={CounterType.CommanderTax}
-              counterTotal={
-                player.extraCounters?.find(
-                  (counter) => counter.type === 'commanderTax'
-                )?.value
-              }
-              setCounterTotal={handleCounterChange}
-            />
-          )}
-          {Boolean(
-            player.settings.useCommanderDamage && player.settings.usePartner
-          ) && (
-            <ExtraCounter
-              Icon={<PartnerTaxIcon size="8vmin" />}
-              type={CounterType.PartnerTax}
-              counterTotal={
-                player.extraCounters?.find(
-                  (counter) => counter.type === 'partnerTax'
-                )?.value
-              }
-              setCounterTotal={handleCounterChange}
-            />
-          )}
-          {player.settings.usePoison && (
-            <ExtraCounter
-              Icon={<PoisonIcon size="8vmin" />}
-              type={CounterType.Poison}
-              counterTotal={
-                player.extraCounters?.find(
-                  (counter) => counter.type === 'poison'
-                )?.value
-              }
-              setCounterTotal={handleCounterChange}
-            />
-          )}
-          {player.settings.useEnergy && (
-            <ExtraCounter
-              Icon={<EnergyIcon size="8vmin" />}
-              type={CounterType.Energy}
-              counterTotal={
-                player.extraCounters?.find(
-                  (counter) => counter.type === 'energy'
-                )?.value
-              }
-              setCounterTotal={handleCounterChange}
-            />
-          )}
-          {player.settings.useExperience && (
-            <ExtraCounter
-              Icon={<ExperienceIcon size="8vmin" />}
-              type={CounterType.Experience}
-              counterTotal={
-                player.extraCounters?.find(
-                  (counter) => counter.type === 'experience'
-                )?.value
-              }
-              setCounterTotal={handleCounterChange}
-            />
-          )}
-        </S.ExtraCountersGrid>
+        <ExtraCountersBar player={player} onPlayerChange={onPlayerChange} />
       </S.LifeCounterContentContainer>
-
       {showPlayerMenu && (
         <PlayerMenu
           player={player}

my-app/src/Data/initialPlayers.ts

@@ -14,6 +14,12 @@ export const initialPlayers: Player[] = [
       flipped: true,
     },
     extraCounters: [],
+    commanderDamage: [
+      { source: 1, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 2, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 3, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 4, damageTotal: 0, partnerDamageTotal: 0 },
+    ],
   },
   {
     lifeTotal: 40,
@@ -28,6 +34,12 @@ export const initialPlayers: Player[] = [
       flipped: true,
     },
     extraCounters: [],
+    commanderDamage: [
+      { source: 1, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 2, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 3, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 4, damageTotal: 0, partnerDamageTotal: 0 },
+    ],
   },
   {
     lifeTotal: 40,
@@ -42,6 +54,12 @@ export const initialPlayers: Player[] = [
       flipped: false,
     },
     extraCounters: [],
+    commanderDamage: [
+      { source: 1, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 2, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 3, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 4, damageTotal: 0, partnerDamageTotal: 0 },
+    ],
   },
   {
     lifeTotal: 40,
@@ -56,5 +74,11 @@ export const initialPlayers: Player[] = [
       flipped: false,
     },
     extraCounters: [],
+    commanderDamage: [
+      { source: 1, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 2, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 3, damageTotal: 0, partnerDamageTotal: 0 },
+      { source: 4, damageTotal: 0, partnerDamageTotal: 0 },
+    ],
   },
 ];

my-app/src/Types/Player.ts

@@ -3,6 +3,7 @@ export type Player = {
   key: number;
   color: string;
   settings: PlayerSettings;
+  commanderDamage: CommanderDamage[];
   extraCounters: ExtraCounter[];
 };
 
@@ -20,6 +21,12 @@ type ExtraCounter = {
   value: number;
 };
 
+type CommanderDamage = {
+  source: number;
+  damageTotal: number;
+  partnerDamageTotal: number;
+};
+
 export enum CounterType {
   CommanderTax = 'commanderTax',
   PartnerTax = 'partnerTax',