diff --git a/my-app/src/Components/Buttons/ExtraCounter.tsx b/my-app/src/Components/Buttons/ExtraCounter.tsx index 1f85b99..7a24ca2 100644 --- a/my-app/src/Components/Buttons/ExtraCounter.tsx +++ b/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(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} - {count ? count : undefined} + {counterTotal ? counterTotal : undefined} ); }; diff --git a/my-app/src/Components/LifeCounter/LifeCounter.tsx b/my-app/src/Components/LifeCounter/LifeCounter.tsx index 6a48229..98c6171 100644 --- a/my-app/src/Components/LifeCounter/LifeCounter.tsx +++ b/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 = ({ {player.settings.useCommanderDamage && ( - } /> + } + type={CounterType.CommanderTax} + counterTotal={ + player.extraCounters?.find( + (counter) => counter.type === 'commanderTax' + )?.value + } + setCounterTotal={handleCounterChange} + /> )} {Boolean( player.settings.useCommanderDamage && player.settings.usePartner - ) && } />} + ) && ( + } + type={CounterType.PartnerTax} + counterTotal={ + player.extraCounters?.find( + (counter) => counter.type === 'partnerTax' + )?.value + } + setCounterTotal={handleCounterChange} + /> + )} {player.settings.usePoison && ( - } /> + } + type={CounterType.Poison} + counterTotal={ + player.extraCounters?.find( + (counter) => counter.type === 'poison' + )?.value + } + setCounterTotal={handleCounterChange} + /> )} {player.settings.useEnergy && ( - } /> + } + type={CounterType.Energy} + counterTotal={ + player.extraCounters?.find( + (counter) => counter.type === 'energy' + )?.value + } + setCounterTotal={handleCounterChange} + /> )} {player.settings.useExperience && ( - } /> + } + type={CounterType.Experience} + counterTotal={ + player.extraCounters?.find( + (counter) => counter.type === 'experience' + )?.value + } + setCounterTotal={handleCounterChange} + /> )} diff --git a/my-app/src/Data/initialPlayers.ts b/my-app/src/Data/initialPlayers.ts index fb03f8f..3bda8b8 100644 --- a/my-app/src/Data/initialPlayers.ts +++ b/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: [], }, ]; diff --git a/my-app/src/Types/Player.ts b/my-app/src/Types/Player.ts index 5027b00..e4420e6 100644 --- a/my-app/src/Types/Player.ts +++ b/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', +}