diff --git a/my-app/.prettierrc b/my-app/.prettierrc new file mode 100644 index 0000000..8685abf --- /dev/null +++ b/my-app/.prettierrc @@ -0,0 +1,5 @@ +{ + "singleQuote": true, + "trailingComma": "es5", + "tabWidth": 2 +} diff --git a/my-app/package.json b/my-app/package.json index 7b30d9b..4dd847d 100644 --- a/my-app/package.json +++ b/my-app/package.json @@ -44,5 +44,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "prettier": "2.8.8" } } diff --git a/my-app/src/App.tsx b/my-app/src/App.tsx index 7d6a664..6a2afa1 100644 --- a/my-app/src/App.tsx +++ b/my-app/src/App.tsx @@ -16,16 +16,16 @@ const FullScreenButtonContainer = styled.div` @media (orientation: portrait) { display: block; - height: 80px; - width: 80vw; - margin: auto; - position: relative; + height: 80px; + width: 80vw; + margin: auto; + position: relative; } `; const FullscreenButton = styled.button` display: none; - @media (orientation: portrait) { + @media (orientation: portrait) { display: block; height: 100%; width: 100%; @@ -46,7 +46,6 @@ const TitleText = styled.h1` } `; - const CountersWrapper = styled.div` display: flex; @media (orientation: portrait) { @@ -57,7 +56,7 @@ const CountersWrapper = styled.div` const players: Player[] = [ { key: 1, - color: "grey", + color: 'grey', settings: { useCommanderDamage: true, usePartner: true, @@ -65,11 +64,11 @@ const players: Player[] = [ useExperience: true, usePoison: true, flipped: true, - } + }, }, { key: 2, - color: "mintcream", + color: 'mintcream', settings: { useCommanderDamage: true, usePartner: false, @@ -77,11 +76,11 @@ const players: Player[] = [ useExperience: true, usePoison: true, flipped: true, - } + }, }, { key: 3, - color: "gold", + color: 'gold', settings: { useCommanderDamage: true, usePartner: false, @@ -89,11 +88,11 @@ const players: Player[] = [ useExperience: true, usePoison: true, flipped: false, - } + }, }, { key: 4, - color: "aquamarine", + color: 'aquamarine', settings: { useCommanderDamage: true, usePartner: false, @@ -101,7 +100,7 @@ const players: Player[] = [ useExperience: true, usePoison: true, flipped: false, - } + }, }, ]; @@ -122,10 +121,9 @@ function App() { return ( - You need to be in landscape mode to use this app. -
+
Pressing the fullscreen button is also very recommended. diff --git a/my-app/src/Components/Buttons/AddLifeButton.tsx b/my-app/src/Components/Buttons/AddLifeButton.tsx index 8b05cbd..d82b02b 100644 --- a/my-app/src/Components/Buttons/AddLifeButton.tsx +++ b/my-app/src/Components/Buttons/AddLifeButton.tsx @@ -1,5 +1,5 @@ -import { useRef, useState } from "react"; -import styled from "styled-components"; +import { useRef, useState } from 'react'; +import styled from 'styled-components'; export const StyledLifeCounterButton = styled.button<{ align?: string }>` width: 50%; @@ -12,51 +12,61 @@ export const StyledLifeCounterButton = styled.button<{ align?: string }>` outline: none; cursor: pointer; padding: 0 28px; - text-align: ${props => props.align || "center"}; + text-align: ${(props) => props.align || 'center'}; user-select: none; `; type AddLifeButtonProps = { - lifeTotal: number; - setLifeTotal: (lifeTotal: number) => void; + lifeTotal: number; + setLifeTotal: (lifeTotal: number) => void; }; const AddLifeButton = ({ lifeTotal, setLifeTotal }: AddLifeButtonProps) => { - const timeoutRef = useRef(undefined); - const [timeoutFinished, setTimeoutFinished] = useState(false); + const timeoutRef = useRef(undefined); + const [timeoutFinished, setTimeoutFinished] = useState(false); + const [hasPressedDown, setHasPressedDown] = useState(false); - const handleLifeChange = (increment: number) => { - setLifeTotal(lifeTotal + increment); - }; + const handleLifeChange = (increment: number) => { + setLifeTotal(lifeTotal + increment); + }; - const handleDownInput = () => { - setTimeoutFinished(false); - timeoutRef.current = setTimeout(() => { - handleLifeChange(10); - setTimeoutFinished(true); - }, 500) + const handleDownInput = () => { + setTimeoutFinished(false); + setHasPressedDown(true); + timeoutRef.current = setTimeout(() => { + handleLifeChange(10); + setTimeoutFinished(true); + }, 500); + }; + + const handleUpInput = () => { + if (!(hasPressedDown && !timeoutFinished)) { + return; } + clearTimeout(timeoutRef.current); + handleLifeChange(1); + setHasPressedDown(false); + }; - const handleUpInput = () => { - if (!timeoutFinished) { - clearTimeout(timeoutRef.current); - handleLifeChange(1); - } - } + const handleLeaveInput = () => { + setTimeoutFinished(true); + clearTimeout(timeoutRef.current); + setHasPressedDown(false); + }; - return ( - ) => { - e.preventDefault(); - }} - align="right" - > - + - - ); + return ( + ) => { + e.preventDefault(); + }} + align="right" + > + + + + ); }; export default AddLifeButton; diff --git a/my-app/src/Components/Buttons/CommanderDamageBar.tsx b/my-app/src/Components/Buttons/CommanderDamageBar.tsx index 2e50f1f..77e6726 100644 --- a/my-app/src/Components/Buttons/CommanderDamageBar.tsx +++ b/my-app/src/Components/Buttons/CommanderDamageBar.tsx @@ -1,16 +1,16 @@ -import { useRef, useState } from "react"; -import { Player } from "../../Types/Player"; -import styled from "styled-components"; +import { useRef, useState } from 'react'; +import { Player } from '../../Types/Player'; +import styled from 'styled-components'; const CommanderDamageGrid = styled.div` - display: flex; + display: flex; flex-direction: row; flex-grow: 1; width: 100%; `; const CommanderDamageContainer = styled.div` - display: flex; + display: flex; flex-direction: row; flex-grow: 1; width: 100%; @@ -23,7 +23,7 @@ const CommanderDamageButton = styled.button<{ backgroundColor?: string }>` height: 10vh; outline: none; cursor: pointer; - background-color: ${props => props.backgroundColor || "antiquewhite"}; + background-color: ${(props) => props.backgroundColor || 'antiquewhite'}; `; const CommanderDamageButtonText = styled.p` @@ -39,136 +39,162 @@ const CommanderDamageButtonText = styled.p` `; const VerticalSeperator = styled.div` - width: 1px; - background-color: rgba(0, 0, 0, 1); + width: 1px; + background-color: rgba(0, 0, 0, 1); `; - - type CommanderDamageBarProps = { - lifeTotal: number; - setLifeTotal: (lifeTotal: number) => void; - opponents: Player[]; + lifeTotal: number; + setLifeTotal: (lifeTotal: number) => void; + opponents: Player[]; }; -const CommanderDamageBar = ({ opponents, lifeTotal, setLifeTotal }: CommanderDamageBarProps) => { - const [commanderDamage, setCommanderDamage] = useState( - Array(opponents.length).fill(0) - ); - const [partnerCommanderDamage, setPartnerCommanderDamage] = useState( - Array(opponents.length).fill(0) - ); +const CommanderDamageBar = ({ + opponents, + lifeTotal, + setLifeTotal, +}: CommanderDamageBarProps) => { + const [commanderDamage, setCommanderDamage] = useState( + Array(opponents.length).fill(0) + ); + const [partnerCommanderDamage, setPartnerCommanderDamage] = useState< + number[] + >(Array(opponents.length).fill(0)); + const timeoutRef = useRef(undefined); + const [timeoutFinished, setTimeoutFinished] = useState(false); + const [hasPressedDown, setHasPressedDown] = useState(false); - const timeoutRef = useRef(undefined); - const [timeoutFinished, setTimeoutFinished] = 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 handlePartnerCommanderDamageChange = (index: number, increment: number) => { - const currentPartnerCommanderDamage = partnerCommanderDamage[index]; - if (currentPartnerCommanderDamage === 0 && increment === -1) { - return; - } - - const updatedPartnerCommanderDamage = [...partnerCommanderDamage]; - updatedPartnerCommanderDamage[index] += increment; - - setPartnerCommanderDamage(updatedPartnerCommanderDamage); - setLifeTotal(lifeTotal - increment); - }; - - const handleDownInput = (index: number) => { - setTimeoutFinished(false); - timeoutRef.current = setTimeout(() => { - setTimeoutFinished(true); - handleCommanderDamageChange(index, -1); - }, 500) + const handleCommanderDamageChange = (index: number, increment: number) => { + const currentCommanderDamage = commanderDamage[index]; + if (currentCommanderDamage === 0 && increment === -1) { + return; } - const handleUpInput = (index: number) => { - if (!timeoutFinished) { - clearTimeout(timeoutRef.current); - handleCommanderDamageChange(index, 1); - } - clearTimeout(timeoutRef.current); + if (currentCommanderDamage === 21 && increment === 1) { + return; } - const handlePartnerDownInput = (index: number) => { - setTimeoutFinished(false); - timeoutRef.current = setTimeout(() => { - setTimeoutFinished(true); - handlePartnerCommanderDamageChange(index, -1); - }, 500) + const updatedCommanderDamage = [...commanderDamage]; + updatedCommanderDamage[index] += increment; + setCommanderDamage(updatedCommanderDamage); + setLifeTotal(lifeTotal - increment); + }; + + const handlePartnerCommanderDamageChange = ( + index: number, + increment: number + ) => { + const currentPartnerCommanderDamage = partnerCommanderDamage[index]; + if (currentPartnerCommanderDamage === 0 && increment === -1) { + return; } - const handlePartnerUpInput = (index: number) => { - if (!timeoutFinished) { - clearTimeout(timeoutRef.current); - handlePartnerCommanderDamageChange(index, 1); - } + const updatedPartnerCommanderDamage = [...partnerCommanderDamage]; + updatedPartnerCommanderDamage[index] += increment; + + setPartnerCommanderDamage(updatedPartnerCommanderDamage); + setLifeTotal(lifeTotal - increment); + }; + + const handleDownInput = (index: number) => { + setTimeoutFinished(false); + setHasPressedDown(true); + timeoutRef.current = setTimeout(() => { + setTimeoutFinished(true); + handleCommanderDamageChange(index, -1); + }, 500); + }; + + const handleUpInput = (index: number) => { + if (!(hasPressedDown && !timeoutFinished)) { + return; } + clearTimeout(timeoutRef.current); + handleCommanderDamageChange(index, 1); + setHasPressedDown(false); + }; - return ( - - {opponents.map((opponent, index) => { - return ( - - handleDownInput(index)} - onPointerUp={() => handleUpInput(index)} - onContextMenu={(e: React.MouseEvent) => { - e.preventDefault(); - } - } - backgroundColor={opponent.color} - > - - {commanderDamage[index] > 0 ? commanderDamage[index] : ""} - - + const handleLeaveInput = () => { + setTimeoutFinished(true); + clearTimeout(timeoutRef.current); + setHasPressedDown(false); + }; - {opponent.settings.usePartner && ( - <> - - handlePartnerDownInput(index)} - onPointerUp={() => handlePartnerUpInput(index)} - onContextMenu={(e: React.MouseEvent) => { - e.preventDefault(); - } - } - backgroundColor={opponent.color} - > - - {partnerCommanderDamage[index] > 0 ? partnerCommanderDamage[index] : ""} - - - + const handlePartnerDownInput = (index: number) => { + setTimeoutFinished(false); + setHasPressedDown(true); + timeoutRef.current = setTimeout(() => { + setTimeoutFinished(true); + handlePartnerCommanderDamageChange(index, -1); + }, 500); + }; - ) - } - - ) - })} - - ); + const handlePartnerUpInput = (index: number) => { + if (!(hasPressedDown && !timeoutFinished)) { + return; + } + clearTimeout(timeoutRef.current); + handlePartnerCommanderDamageChange(index, 1); + setHasPressedDown(false); + }; + + const handlePartnerLeaveInput = () => { + setTimeoutFinished(true); + clearTimeout(timeoutRef.current); + setHasPressedDown(false); + }; + + return ( + + {opponents.map((opponent, index) => { + return ( + + handleDownInput(index)} + onPointerUp={() => handleUpInput(index)} + onPointerLeave={handleLeaveInput} + onContextMenu={( + e: React.MouseEvent + ) => { + e.preventDefault(); + }} + backgroundColor={opponent.color} + > + + {commanderDamage[index] > 0 ? commanderDamage[index] : ''} + + + + {opponent.settings.usePartner && ( + <> + + handlePartnerDownInput(index)} + onPointerUp={() => handlePartnerUpInput(index)} + onPointerLeave={handlePartnerLeaveInput} + onContextMenu={( + e: React.MouseEvent + ) => { + e.preventDefault(); + }} + backgroundColor={opponent.color} + > + + {partnerCommanderDamage[index] > 0 + ? partnerCommanderDamage[index] + : ''} + + + + )} + + ); + })} + + ); }; export default CommanderDamageBar; diff --git a/my-app/src/Components/Buttons/CommanderTaxButton.tsx b/my-app/src/Components/Buttons/CommanderTaxButton.tsx index bab5826..329b93c 100644 --- a/my-app/src/Components/Buttons/CommanderTaxButton.tsx +++ b/my-app/src/Components/Buttons/CommanderTaxButton.tsx @@ -1,6 +1,6 @@ -import { useRef, useState } from "react"; -import CommanderTaxIcon from "../../Icons/CommanderTaxIcon"; -import styled from "styled-components"; +import { useRef, useState } from 'react'; +import CommanderTaxIcon from '../../Icons/CommanderTaxIcon'; +import styled from 'styled-components'; export const StyledCommanderTaxButton = styled.button` flex-grow: 1; @@ -12,45 +12,55 @@ export const StyledCommanderTaxButton = styled.button` `; const CommanderTaxButton = () => { - const [commanderTax, setCommanderTax] = useState(0); + const [commanderTax, setCommanderTax] = useState(0); - const timeoutRef = useRef(undefined); - const [timeoutFinished, setTimeoutFinished] = useState(false); + const timeoutRef = useRef(undefined); + const [timeoutFinished, setTimeoutFinished] = useState(false); + const [hasPressedDown, setHasPressedDown] = useState(false); - const handleCommanderTaxChange = (increment: number) => { - setCommanderTax(commanderTax + increment); - }; + const handleCommanderTaxChange = (increment: number) => { + setCommanderTax(commanderTax + increment); + }; - const handleDownInput = () => { - setTimeoutFinished(false); - timeoutRef.current = setTimeout(() => { - setTimeoutFinished(true); - handleCommanderTaxChange(-1); - }, 500) + const handleDownInput = () => { + setTimeoutFinished(false); + setHasPressedDown(true); + timeoutRef.current = setTimeout(() => { + setTimeoutFinished(true); + handleCommanderTaxChange(-1); + }, 500); + }; + + const handleUpInput = () => { + if (!(hasPressedDown && !timeoutFinished)) { + return; } + clearTimeout(timeoutRef.current); + handleCommanderTaxChange(1); + setHasPressedDown(false); + }; - const handleUpInput = () => { - if (!timeoutFinished) { - clearTimeout(timeoutRef.current); - handleCommanderTaxChange(1); - } - } + const handleLeaveInput = () => { + setTimeoutFinished(true); + clearTimeout(timeoutRef.current); + setHasPressedDown(false); + }; - return ( - ) => { - e.preventDefault(); - } - } - > - - - ); + return ( + ) => { + e.preventDefault(); + }} + > + + + ); }; export default CommanderTaxButton; diff --git a/my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx b/my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx index dfb2b54..0408f63 100644 --- a/my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx +++ b/my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx @@ -1,6 +1,6 @@ -import { useRef, useState } from "react"; -import CommanderTaxIcon from "../../Icons/CommanderTaxIcon"; -import styled from "styled-components"; +import { useRef, useState } from 'react'; +import CommanderTaxIcon from '../../Icons/CommanderTaxIcon'; +import styled from 'styled-components'; export const StyledCommanderTaxButton = styled.button` flex-grow: 1; @@ -12,45 +12,55 @@ export const StyledCommanderTaxButton = styled.button` `; const PartnerCommanderTaxButton = () => { - const [partnerCommanderTax, setPartnerCommanderTax] = useState(0); - const timeoutRef = useRef(undefined); - const [timeoutFinished, setTimeoutFinished] = useState(false); + const [partnerCommanderTax, setPartnerCommanderTax] = useState(0); + const timeoutRef = useRef(undefined); + const [timeoutFinished, setTimeoutFinished] = useState(false); + const [hasPressedDown, setHasPressedDown] = useState(false); - const handlePartnerCommanderTaxChange = (increment: number) => { - setPartnerCommanderTax(partnerCommanderTax + increment); - }; + const handlePartnerCommanderTaxChange = (increment: number) => { + setPartnerCommanderTax(partnerCommanderTax + increment); + }; + const handleDownInput = () => { + setTimeoutFinished(false); + setHasPressedDown(true); + timeoutRef.current = setTimeout(() => { + setTimeoutFinished(true); + handlePartnerCommanderTaxChange(-1); + }, 500); + }; - const handleDownInput = () => { - setTimeoutFinished(false); - timeoutRef.current = setTimeout(() => { - setTimeoutFinished(true); - handlePartnerCommanderTaxChange(-1); - }, 500) + const handleUpInput = () => { + if (!(hasPressedDown && !timeoutFinished)) { + return; } + clearTimeout(timeoutRef.current); + handlePartnerCommanderTaxChange(1); + setHasPressedDown(false); + }; - const handleUpInput = () => { - if (!timeoutFinished) { - clearTimeout(timeoutRef.current); - handlePartnerCommanderTaxChange(1); - } - } - - return ( - ) => { - e.preventDefault(); - } - } - > - 2 - - ); + const handleLeaveInput = () => { + setTimeoutFinished(true); + clearTimeout(timeoutRef.current); + setHasPressedDown(false); + }; + + return ( + ) => { + e.preventDefault(); + }} + > + {' '} + 2 + + ); }; export default PartnerCommanderTaxButton; diff --git a/my-app/src/Components/Buttons/SubtractLifeButton.tsx b/my-app/src/Components/Buttons/SubtractLifeButton.tsx index 9df7f40..44f7e16 100644 --- a/my-app/src/Components/Buttons/SubtractLifeButton.tsx +++ b/my-app/src/Components/Buttons/SubtractLifeButton.tsx @@ -1,5 +1,5 @@ -import { useRef, useState } from "react"; -import styled from "styled-components"; +import { useRef, useState } from 'react'; +import styled from 'styled-components'; export const StyledLifeCounterButton = styled.button<{ align?: string }>` width: 50%; @@ -12,50 +12,64 @@ export const StyledLifeCounterButton = styled.button<{ align?: string }>` outline: none; cursor: pointer; padding: 0 28px; - text-align: ${props => props.align || "center"}; + text-align: ${(props) => props.align || 'center'}; user-select: none; `; type SubtractLifeButtonProps = { - lifeTotal: number; - setLifeTotal: (lifeTotal: number) => void; + lifeTotal: number; + setLifeTotal: (lifeTotal: number) => void; }; -const SubtractLifeButton = ({ lifeTotal, setLifeTotal }: SubtractLifeButtonProps) => { - const timeoutRef = useRef(undefined); - const [timeoutFinished, setTimeoutFinished] = useState(false); +const SubtractLifeButton = ({ + lifeTotal, + setLifeTotal, +}: SubtractLifeButtonProps) => { + const timeoutRef = useRef(undefined); + const [timeoutFinished, setTimeoutFinished] = useState(false); + const [hasPressedDown, setHasPressedDown] = useState(false); - const handleLifeChange = (increment: number) => { - setLifeTotal(lifeTotal + increment); - }; + const handleLifeChange = (increment: number) => { + setLifeTotal(lifeTotal + increment); + }; - const handleDownInput = () => { - setTimeoutFinished(false); - timeoutRef.current = setTimeout(() => { - handleLifeChange(-10); - setTimeoutFinished(true); - }, 500) + const handleDownInput = () => { + setTimeoutFinished(false); + setHasPressedDown(true); + timeoutRef.current = setTimeout(() => { + handleLifeChange(-10); + setTimeoutFinished(true); + }, 500); + }; + + const handleUpInput = () => { + if (!(hasPressedDown && !timeoutFinished)) { + return; } + clearTimeout(timeoutRef.current); + handleLifeChange(-1); + setHasPressedDown(false); + }; - const handleUpInput = () => { - if (!timeoutFinished) { - clearTimeout(timeoutRef.current); - handleLifeChange(-1); - } - } + const handleLeaveInput = () => { + setTimeoutFinished(true); + clearTimeout(timeoutRef.current); + setHasPressedDown(false); + }; - return ( - ) => { - e.preventDefault(); - }} - align="left" - > - − - - ); + return ( + ) => { + e.preventDefault(); + }} + align="left" + > + − + + ); }; export default SubtractLifeButton; diff --git a/my-app/src/Components/Counters/Counters.tsx b/my-app/src/Components/Counters/Counters.tsx index f7a57d6..f11ff44 100644 --- a/my-app/src/Components/Counters/Counters.tsx +++ b/my-app/src/Components/Counters/Counters.tsx @@ -1,12 +1,14 @@ -import * as S from "./Counters.style"; -import LifeCounter from "../LifeCounter/LifeCounter"; +import { useState } from "react"; import { Player } from "../../Types/Player"; +import LifeCounter from "../LifeCounter/LifeCounter"; +import * as S from "./Counters.style"; type CountersProps = { players: Player[]; }; const Counters = ({ players }: CountersProps) => { + const [isAnyButtonsPressed, setIsAnyButtonsPressed] = useState(false); return ( @@ -16,15 +18,20 @@ const Counters = ({ players }: CountersProps) => { opponent.key !== player.key) - } /> + } isAnyButtonsPressed={isAnyButtonsPressed} + setIsAnyButtonsPressed={setIsAnyButtonsPressed} + /> ) } return ( - opponent.key !== player.key) - } /> + } + isAnyButtonsPressed={isAnyButtonsPressed} + setIsAnyButtonsPressed={setIsAnyButtonsPressed} + /> ) })} diff --git a/my-app/src/Components/LifeCounter/LifeCounter.tsx b/my-app/src/Components/LifeCounter/LifeCounter.tsx index b4885c6..eff3ca8 100644 --- a/my-app/src/Components/LifeCounter/LifeCounter.tsx +++ b/my-app/src/Components/LifeCounter/LifeCounter.tsx @@ -1,35 +1,47 @@ -import { useState } from "react"; -import * as S from "./LifeCounter.style"; -import { Player } from "../../Types/Player"; -import CommanderTaxButton from "../Buttons/CommanderTaxButton"; -import PartnerCommanderTaxButton from "../Buttons/PartnerCommanderTaxButton copy"; -import AddLifeButton from "../Buttons/AddLifeButton"; -import SubtractLifeButton from "../Buttons/SubtractLifeButton"; -import CommanderDamageBar from "../Buttons/CommanderDamageBar"; +import { useState } from 'react'; +import * as S from './LifeCounter.style'; +import { Player } from '../../Types/Player'; +import CommanderTaxButton from '../Buttons/CommanderTaxButton'; +import PartnerCommanderTaxButton from '../Buttons/PartnerCommanderTaxButton copy'; +import AddLifeButton from '../Buttons/AddLifeButton'; +import SubtractLifeButton from '../Buttons/SubtractLifeButton'; +import CommanderDamageBar from '../Buttons/CommanderDamageBar'; type LifeCounterProps = { - player: Player; - backgroundColor: string; - opponents: Player[]; + player: Player; + backgroundColor: string; + opponents: Player[]; + setIsAnyButtonsPressed: (isAnyButtonsPressed: boolean) => void; + isAnyButtonsPressed: boolean; }; -const LifeCounter = ({ backgroundColor, player, opponents }: LifeCounterProps) => { - const [lifeTotal, setLifeTotal] = useState(40); +const LifeCounter = ({ + backgroundColor, + player, + opponents, + isAnyButtonsPressed, + setIsAnyButtonsPressed, +}: LifeCounterProps) => { + const [lifeTotal, setLifeTotal] = useState(40); - return ( - - - - - {lifeTotal} - - - - - {player.settings.usePartner && } - - - ); + return ( + + + + + {lifeTotal} + + + + + {player.settings.usePartner && } + + + ); }; export default LifeCounter; diff --git a/my-app/src/Icons/CommanderTaxIcon.tsx b/my-app/src/Icons/CommanderTaxIcon.tsx index e7ff0b0..eb96068 100644 --- a/my-app/src/Icons/CommanderTaxIcon.tsx +++ b/my-app/src/Icons/CommanderTaxIcon.tsx @@ -5,8 +5,14 @@ type CommanderTaxIconProps = { const CommanderTaxIcon = ({ size, text }: CommanderTaxIconProps) => { return ( -
- +
+ CommanderTaxIcon