Counters stored in local storage

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

@@ -1,5 +1,6 @@
 import { ReactNode, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { CounterType } from '../../Types/Player';
 
 export const StyledExtraCounterButton = styled.button`
   position: relative;
@@ -36,16 +37,27 @@ export const CenteredText = styled.div`
 
 type ExtraCounterProps = {
   Icon: ReactNode;
+  counterTotal?: number;
+  type: CounterType;
+  setCounterTotal: (updatedCounterTotal: number, type: CounterType) => void;
 };
 
-const ExtraCounter = ({ Icon }: ExtraCounterProps) => {
-  const [count, setCount] = useState(0);
+const ExtraCounter = ({
+  Icon,
+  counterTotal,
+  setCounterTotal,
+  type,
+}: ExtraCounterProps) => {
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
   const [hasPressedDown, setHasPressedDown] = useState(false);
 
   const handleCountChange = (increment: number) => {
-    setCount(count + increment);
+    if (!counterTotal) {
+      setCounterTotal(increment, type);
+      return;
+    }
+    setCounterTotal(counterTotal + increment, type);
   };
 
   const handleDownInput = () => {
@@ -82,7 +94,7 @@ const ExtraCounter = ({ Icon }: ExtraCounterProps) => {
       }}
     >
       {Icon}
-      <CenteredText>{count ? count : undefined}</CenteredText>
+      <CenteredText>{counterTotal ? counterTotal : undefined}</CenteredText>
     </StyledExtraCounterButton>
   );
 };

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import * as S from './LifeCounter.style';
-import { Player } from '../../Types/Player';
+import { CounterType, Player } from '../../Types/Player';
 import { useSwipeable } from 'react-swipeable';
 import AddLifeButton from '../Buttons/AddLifeButton';
 import SubtractLifeButton from '../Buttons/SubtractLifeButton';
@@ -33,6 +33,36 @@ 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({
@@ -68,19 +98,66 @@ const LifeCounter = ({
         </S.LifeCountainer>
         <S.ExtraCountersGrid>
           {player.settings.useCommanderDamage && (
-            <ExtraCounter Icon={<CommanderTaxIcon size="8vmin" />} />
+            <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" />} />}
+          ) && (
+            <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" />} />
+            <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" />} />
+            <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" />} />
+            <ExtraCounter
+              Icon={<ExperienceIcon size="8vmin" />}
+              type={CounterType.Experience}
+              counterTotal={
+                player.extraCounters?.find(
+                  (counter) => counter.type === 'experience'
+                )?.value
+              }
+              setCounterTotal={handleCounterChange}
+            />
           )}
         </S.ExtraCountersGrid>
       </S.LifeCounterContentContainer>

my-app/src/Data/initialPlayers.ts

@@ -13,6 +13,7 @@ export const initialPlayers: Player[] = [
       usePoison: false,
       flipped: true,
     },
+    extraCounters: [],
   },
   {
     lifeTotal: 40,
@@ -26,6 +27,7 @@ export const initialPlayers: Player[] = [
       usePoison: false,
       flipped: true,
     },
+    extraCounters: [],
   },
   {
     lifeTotal: 40,
@@ -39,6 +41,7 @@ export const initialPlayers: Player[] = [
       usePoison: false,
       flipped: false,
     },
+    extraCounters: [],
   },
   {
     lifeTotal: 40,
@@ -52,5 +55,6 @@ export const initialPlayers: Player[] = [
       usePoison: false,
       flipped: false,
     },
+    extraCounters: [],
   },
 ];

my-app/src/Types/Player.ts

@@ -3,7 +3,7 @@ export type Player = {
   key: number;
   color: string;
   settings: PlayerSettings;
-  extraCounters?: ExtraCounters;
+  extraCounters: ExtraCounter[];
 };
 
 type PlayerSettings = {
@@ -15,10 +15,15 @@ type PlayerSettings = {
   useExperience?: boolean;
 };
 
-type ExtraCounters = {
-  commanderDamage?: number;
-  partnerDamage?: number;
-  poison?: number;
-  energy?: number;
-  experience?: number;
+type ExtraCounter = {
+  type: CounterType;
+  value: number;
 };
+
+export enum CounterType {
+  CommanderTax = 'commanderTax',
+  PartnerTax = 'partnerTax',
+  Poison = 'poison',
+  Energy = 'energy',
+  Experience = 'experience',
+}