diff --git a/my-app/src/Components/Buttons/CommanderDamageBar.tsx b/my-app/src/Components/Buttons/CommanderDamageBar.tsx index 77e6726..6b7b9ae 100644 --- a/my-app/src/Components/Buttons/CommanderDamageBar.tsx +++ b/my-app/src/Components/Buttons/CommanderDamageBar.tsx @@ -36,6 +36,9 @@ const CommanderDamageButtonText = styled.p` pointer-events: none; width: 2rem; user-select: none; + text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, + 1px 1px 0 #ffffff; + color: #000000; `; const VerticalSeperator = styled.div` diff --git a/my-app/src/Components/Buttons/EnergyButton.tsx b/my-app/src/Components/Buttons/EnergyButton.tsx deleted file mode 100644 index 1291ac6..0000000 --- a/my-app/src/Components/Buttons/EnergyButton.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useRef, useState } from 'react'; -import styled from 'styled-components'; -import EnergyIcon from '../../Icons/EnergyIcon'; - -export const StyledEnergyButton = styled.button` - flex-grow: 1; - border: none; - outline: none; - cursor: pointer; - background-color: transparent; - user-select: none; -`; - -const EnergyButton = () => { - const [energyCount, setEnergyCount] = useState(0); - - const timeoutRef = useRef(undefined); - const [timeoutFinished, setTimeoutFinished] = useState(false); - const [hasPressedDown, setHasPressedDown] = useState(false); - - const handleEnergyCountChange = (increment: number) => { - setEnergyCount(energyCount + increment); - }; - - const handleDownInput = () => { - setTimeoutFinished(false); - setHasPressedDown(true); - timeoutRef.current = setTimeout(() => { - setTimeoutFinished(true); - handleEnergyCountChange(-1); - }, 500); - }; - - const handleUpInput = () => { - if (!(hasPressedDown && !timeoutFinished)) { - return; - } - clearTimeout(timeoutRef.current); - handleEnergyCountChange(1); - setHasPressedDown(false); - }; - - const handleLeaveInput = () => { - setTimeoutFinished(true); - clearTimeout(timeoutRef.current); - setHasPressedDown(false); - }; - - return ( - ) => { - e.preventDefault(); - }} - > - - - ); -}; - -export default EnergyButton; diff --git a/my-app/src/Components/Buttons/ExperienceButton.tsx b/my-app/src/Components/Buttons/ExperienceButton.tsx deleted file mode 100644 index 834f625..0000000 --- a/my-app/src/Components/Buttons/ExperienceButton.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useRef, useState } from 'react'; -import styled from 'styled-components'; -import ExperienceIcon from '../../Icons/ExperienceIcon'; - -export const StyledExperienceButton = styled.button` - flex-grow: 1; - border: none; - outline: none; - cursor: pointer; - background-color: transparent; - user-select: none; -`; - -const ExperienceButton = () => { - const [experienceCount, setExperienceCount] = useState(0); - - const timeoutRef = useRef(undefined); - const [timeoutFinished, setTimeoutFinished] = useState(false); - const [hasPressedDown, setHasPressedDown] = useState(false); - - const handleExperienceCountChange = (increment: number) => { - setExperienceCount(experienceCount + increment); - }; - - const handleDownInput = () => { - setTimeoutFinished(false); - setHasPressedDown(true); - timeoutRef.current = setTimeout(() => { - setTimeoutFinished(true); - handleExperienceCountChange(-1); - }, 500); - }; - - const handleUpInput = () => { - if (!(hasPressedDown && !timeoutFinished)) { - return; - } - clearTimeout(timeoutRef.current); - handleExperienceCountChange(1); - setHasPressedDown(false); - }; - - const handleLeaveInput = () => { - setTimeoutFinished(true); - clearTimeout(timeoutRef.current); - setHasPressedDown(false); - }; - - return ( - ) => { - e.preventDefault(); - }} - > - - - ); -}; - -export default ExperienceButton; diff --git a/my-app/src/Components/Buttons/CommanderTaxButton.tsx b/my-app/src/Components/Buttons/ExtraCounter.tsx similarity index 56% rename from my-app/src/Components/Buttons/CommanderTaxButton.tsx rename to my-app/src/Components/Buttons/ExtraCounter.tsx index 329b93c..8bc826a 100644 --- a/my-app/src/Components/Buttons/CommanderTaxButton.tsx +++ b/my-app/src/Components/Buttons/ExtraCounter.tsx @@ -1,8 +1,8 @@ -import { useRef, useState } from 'react'; -import CommanderTaxIcon from '../../Icons/CommanderTaxIcon'; +import { ReactNode, useRef, useState } from 'react'; import styled from 'styled-components'; -export const StyledCommanderTaxButton = styled.button` +export const StyledExtraCounterButton = styled.button` + position: relative; flex-grow: 1; border: none; outline: none; @@ -11,15 +11,30 @@ export const StyledCommanderTaxButton = styled.button` user-select: none; `; -const CommanderTaxButton = () => { - const [commanderTax, setCommanderTax] = useState(0); +export const CenteredText = styled.div` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 5vh; + font-weight: bold; + text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, + 1px 1px 0 #ffffff; + color: #000000; +`; +type ExtraCounterProps = { + Icon: ReactNode; +}; + +const ExtraCounter = ({ Icon }: ExtraCounterProps) => { + const [count, setCount] = useState(0); const timeoutRef = useRef(undefined); const [timeoutFinished, setTimeoutFinished] = useState(false); const [hasPressedDown, setHasPressedDown] = useState(false); - const handleCommanderTaxChange = (increment: number) => { - setCommanderTax(commanderTax + increment); + const handleCountChange = (increment: number) => { + setCount(count + increment); }; const handleDownInput = () => { @@ -27,7 +42,7 @@ const CommanderTaxButton = () => { setHasPressedDown(true); timeoutRef.current = setTimeout(() => { setTimeoutFinished(true); - handleCommanderTaxChange(-1); + handleCountChange(-1); }, 500); }; @@ -36,7 +51,7 @@ const CommanderTaxButton = () => { return; } clearTimeout(timeoutRef.current); - handleCommanderTaxChange(1); + handleCountChange(1); setHasPressedDown(false); }; @@ -47,7 +62,7 @@ const CommanderTaxButton = () => { }; return ( - { e.preventDefault(); }} > - - + {Icon} + {count ? count : undefined} + ); }; -export default CommanderTaxButton; +export default ExtraCounter; diff --git a/my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx b/my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx deleted file mode 100644 index 0408f63..0000000 --- a/my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { useRef, useState } from 'react'; -import CommanderTaxIcon from '../../Icons/CommanderTaxIcon'; -import styled from 'styled-components'; - -export const StyledCommanderTaxButton = styled.button` - flex-grow: 1; - border: none; - outline: none; - cursor: pointer; - background-color: transparent; - user-select: none; -`; - -const PartnerCommanderTaxButton = () => { - 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 handleDownInput = () => { - setTimeoutFinished(false); - setHasPressedDown(true); - timeoutRef.current = setTimeout(() => { - setTimeoutFinished(true); - handlePartnerCommanderTaxChange(-1); - }, 500); - }; - - const handleUpInput = () => { - if (!(hasPressedDown && !timeoutFinished)) { - return; - } - clearTimeout(timeoutRef.current); - handlePartnerCommanderTaxChange(1); - setHasPressedDown(false); - }; - - const handleLeaveInput = () => { - setTimeoutFinished(true); - clearTimeout(timeoutRef.current); - setHasPressedDown(false); - }; - - return ( - ) => { - e.preventDefault(); - }} - > - {' '} - 2 - - ); -}; - -export default PartnerCommanderTaxButton; diff --git a/my-app/src/Components/Buttons/PoisonButton.tsx b/my-app/src/Components/Buttons/PoisonButton.tsx deleted file mode 100644 index b83d7ec..0000000 --- a/my-app/src/Components/Buttons/PoisonButton.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useRef, useState } from 'react'; -import PoisonIcon from '../../Icons/PoisonIcon'; -import styled from 'styled-components'; - -export const StyledPoisonButton = styled.button` - flex-grow: 1; - border: none; - outline: none; - cursor: pointer; - background-color: transparent; - user-select: none; -`; - -const PoisonButton = () => { - const [poisonCount, setPoisonCount] = useState(0); - - const timeoutRef = useRef(undefined); - const [timeoutFinished, setTimeoutFinished] = useState(false); - const [hasPressedDown, setHasPressedDown] = useState(false); - - const handlePoisonCountChange = (increment: number) => { - setPoisonCount(poisonCount + increment); - }; - - const handleDownInput = () => { - setTimeoutFinished(false); - setHasPressedDown(true); - timeoutRef.current = setTimeout(() => { - setTimeoutFinished(true); - handlePoisonCountChange(-1); - }, 500); - }; - - const handleUpInput = () => { - if (!(hasPressedDown && !timeoutFinished)) { - return; - } - clearTimeout(timeoutRef.current); - handlePoisonCountChange(1); - setHasPressedDown(false); - }; - - const handleLeaveInput = () => { - setTimeoutFinished(true); - clearTimeout(timeoutRef.current); - setHasPressedDown(false); - }; - - return ( - ) => { - e.preventDefault(); - }} - > - - - ); -}; - -export default PoisonButton; diff --git a/my-app/src/Components/LifeCounter/LifeCounter.style.ts b/my-app/src/Components/LifeCounter/LifeCounter.style.ts index b9dd148..d754fce 100644 --- a/my-app/src/Components/LifeCounter/LifeCounter.style.ts +++ b/my-app/src/Components/LifeCounter/LifeCounter.style.ts @@ -42,6 +42,9 @@ export const LifeCounterText = styled.p` font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; + text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, + 1px 1px 0 #ffffff; + color: #000000; `; export const ExtraCountersGrid = styled.div` diff --git a/my-app/src/Components/LifeCounter/LifeCounter.tsx b/my-app/src/Components/LifeCounter/LifeCounter.tsx index bd13bcd..a61ff15 100644 --- a/my-app/src/Components/LifeCounter/LifeCounter.tsx +++ b/my-app/src/Components/LifeCounter/LifeCounter.tsx @@ -2,15 +2,16 @@ import React, { useState } from 'react'; import * as S from './LifeCounter.style'; import { Player } from '../../Types/Player'; import { useSwipeable } from 'react-swipeable'; -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 PlayerMenu from '../PlayerMenu/PlayerMenu'; -import PoisonButton from '../Buttons/PoisonButton'; -import EnergyButton from '../Buttons/EnergyButton'; -import ExperienceButton from '../Buttons/ExperienceButton'; + +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'; type LifeCounterProps = { player: Player; @@ -59,13 +60,21 @@ const LifeCounter = ({ /> - {player.settings.useCommanderDamage && } + {player.settings.useCommanderDamage && ( + } /> + )} {Boolean( player.settings.useCommanderDamage && player.settings.usePartner - ) && } - {player.settings.usePoison && } - {player.settings.useEnergy && } - {player.settings.useExperience && } + ) && } />} + {player.settings.usePoison && ( + } /> + )} + {player.settings.useEnergy && ( + } /> + )} + {player.settings.useExperience && ( + } /> + )} diff --git a/my-app/src/Icons/CommanderTaxIcon.tsx b/my-app/src/Icons/CommanderTaxIcon.tsx index 8c790ee..9e4cdba 100644 --- a/my-app/src/Icons/CommanderTaxIcon.tsx +++ b/my-app/src/Icons/CommanderTaxIcon.tsx @@ -1,6 +1,6 @@ import { IconProps } from '../Types/Icon'; -const CommanderTaxIcon = ({ size, text, color }: IconProps) => { +const CommanderTaxIcon = ({ size, color }: IconProps) => { return (
{ d="m159.9 351.8c-11.4 0.3-22.5 0.7-33.2 1.2-10.6 0.6-20.8 1.3-30.5 1.8-9.6 0.5-18.8 0.6-27.2 0.5-8.4-0.6-16.1-1.6-23-3.4-6.9-2.3-12.9-5.5-18.1-9.5-5-4.7-9.1-10.4-12.2-16.9-3.1-7.1-5.2-15-6.3-23.4-1.1-8.8-1.2-17.9-0.4-27.1 0.8-9.2 2.4-17.7 4.7-25.3 2.2-7.4 5.2-13.9 8.8-19.5 3.6-5.3 7.8-9.9 12.8-13.6 4.8-3.7 10.5-6.9 16.8-9.5 6.4-2.9 13.6-5.4 21.5-7.6 7.9-2.4 16.6-4.6 26-6.5 9.4-2.1 19.4-3.8 29.9-5 10.6-1.3 21.7-2 33-2 11.3 0 22.4 0.7 33 2 10.5 1.2 20.6 2.9 30 5 9.4 1.9 18.2 4.1 26.2 6.5 7.9 2.3 15.2 4.8 21.7 7.6 6.4 2.7 12.2 5.8 17.1 9.5 5.1 3.8 9.4 8.3 12.9 13.7 3.7 5.5 6.7 12.1 8.9 19.5 2.3 7.7 3.8 16.2 4.5 25.3 0.7 9.2 0.4 18.3-0.9 27.1-1.3 8.4-3.6 16.2-6.8 23.3-3.4 6.4-7.8 11.9-13.1 16.4-5.5 3.9-11.8 6.9-19 9.1-7.3 1.6-15.4 2.6-24.1 3-8.8 0.1-18.3-0.1-28.2-0.5-10-0.4-20.5-0.9-31.4-1.3-10.8-0.3-22-0.5-33.4-0.4z" /> -
- {text} -
); }; diff --git a/my-app/src/Icons/EnergyIcon.tsx b/my-app/src/Icons/EnergyIcon.tsx index 88cb1b0..622fa2c 100644 --- a/my-app/src/Icons/EnergyIcon.tsx +++ b/my-app/src/Icons/EnergyIcon.tsx @@ -1,6 +1,6 @@ import { IconProps } from '../Types/Icon'; -const EnergyIcon = ({ color, size, text }: IconProps) => { +const EnergyIcon = ({ color, size }: IconProps) => { return (
{ > -
- {text} -
); }; diff --git a/my-app/src/Icons/ExperienceIcon.tsx b/my-app/src/Icons/ExperienceIcon.tsx index 59691a7..9d78cf6 100644 --- a/my-app/src/Icons/ExperienceIcon.tsx +++ b/my-app/src/Icons/ExperienceIcon.tsx @@ -1,6 +1,6 @@ import { IconProps } from '../Types/Icon'; -const ExperienceIcon = ({ color, size, text }: IconProps) => { +const ExperienceIcon = ({ color, size }: IconProps) => { return (
{ > -
- {text} -
); }; diff --git a/my-app/src/Icons/PoisonIcon.tsx b/my-app/src/Icons/PoisonIcon.tsx index f6edf9c..7a5ff32 100644 --- a/my-app/src/Icons/PoisonIcon.tsx +++ b/my-app/src/Icons/PoisonIcon.tsx @@ -1,6 +1,6 @@ import { IconProps } from '../Types/Icon'; -const PhyrexianIcon = ({ color, size, text }: IconProps) => { +const PhyrexianIcon = ({ color, size }: IconProps) => { return (
{ > -
- {text} -
); }; diff --git a/my-app/src/Types/Icon.ts b/my-app/src/Types/Icon.ts index a6b73b9..d0edf02 100644 --- a/my-app/src/Types/Icon.ts +++ b/my-app/src/Types/Icon.ts @@ -1,5 +1,4 @@ export type IconProps = { size?: string; - text?: number; - color?: string; // Add color prop + color?: string; };