external-repos/LifeTrinket
1
0
Fork 1
mirror of https://github.com/Vikeo/LifeTrinket.git synced 2025-11-19 09:18:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

can't click on other buttons if you press a button

Browse Source
This commit is contained in:
Viktor Rådberg
2023-07-03 18:05:59 +02:00
parent f6a8aeeb6f
commit d794a1cfdb
12 changed files with 418 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
my-app/.prettierrc Normal file
View File

@@ -0,0 +1,5 @@
{
"singleQuote": true,
"trailingComma": "es5",
"tabWidth": 2
}

3
my-app/package.json
View File

@@ -44,5 +44,8 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"prettier": "2.8.8"
} }
} }

30
my-app/src/App.tsx
View File

@@ -16,16 +16,16 @@ const FullScreenButtonContainer = styled.div`
@media (orientation: portrait) { @media (orientation: portrait) {
display: block; display: block;
height: 80px; height: 80px;
width: 80vw; width: 80vw;
margin: auto; margin: auto;
position: relative; position: relative;
} }
`; `;
const FullscreenButton = styled.button` const FullscreenButton = styled.button`
display: none; display: none;
@media (orientation: portrait) { @media (orientation: portrait) {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -46,7 +46,6 @@ const TitleText = styled.h1`
} }
`; `;
const CountersWrapper = styled.div` const CountersWrapper = styled.div`
display: flex; display: flex;
@media (orientation: portrait) { @media (orientation: portrait) {
@@ -57,7 +56,7 @@ const CountersWrapper = styled.div`
const players: Player[] = [ const players: Player[] = [
{ {
key: 1, key: 1,
color: "grey", color: 'grey',
settings: { settings: {
useCommanderDamage: true, useCommanderDamage: true,
usePartner: true, usePartner: true,
@@ -65,11 +64,11 @@ const players: Player[] = [
useExperience: true, useExperience: true,
usePoison: true, usePoison: true,
flipped: true, flipped: true,
} },
}, },
{ {
key: 2, key: 2,
color: "mintcream", color: 'mintcream',
settings: { settings: {
useCommanderDamage: true, useCommanderDamage: true,
usePartner: false, usePartner: false,
@@ -77,11 +76,11 @@ const players: Player[] = [
useExperience: true, useExperience: true,
usePoison: true, usePoison: true,
flipped: true, flipped: true,
} },
}, },
{ {
key: 3, key: 3,
color: "gold", color: 'gold',
settings: { settings: {
useCommanderDamage: true, useCommanderDamage: true,
usePartner: false, usePartner: false,
@@ -89,11 +88,11 @@ const players: Player[] = [
useExperience: true, useExperience: true,
usePoison: true, usePoison: true,
flipped: false, flipped: false,
} },
}, },
{ {
key: 4, key: 4,
color: "aquamarine", color: 'aquamarine',
settings: { settings: {
useCommanderDamage: true, useCommanderDamage: true,
usePartner: false, usePartner: false,
@@ -101,7 +100,7 @@ const players: Player[] = [
useExperience: true, useExperience: true,
usePoison: true, usePoison: true,
flipped: false, flipped: false,
} },
}, },
]; ];
@@ -122,10 +121,9 @@ function App() {
return ( return (
<MainWrapper> <MainWrapper>
<TitleText> <TitleText>
You need to be in landscape mode to use this app. You need to be in landscape mode to use this app.
<hr/> <hr />
Pressing the fullscreen button is also very recommended. Pressing the fullscreen button is also very recommended.
</TitleText> </TitleText>
<FullScreenButtonContainer> <FullScreenButtonContainer>

80
my-app/src/Components/Buttons/AddLifeButton.tsx
View File

@@ -1,5 +1,5 @@
import { useRef, useState } from "react"; import { useRef, useState } from 'react';
import styled from "styled-components"; import styled from 'styled-components';
export const StyledLifeCounterButton = styled.button<{ align?: string }>` export const StyledLifeCounterButton = styled.button<{ align?: string }>`
width: 50%; width: 50%;
@@ -12,51 +12,61 @@ export const StyledLifeCounterButton = styled.button<{ align?: string }>`
outline: none; outline: none;
cursor: pointer; cursor: pointer;
padding: 0 28px; padding: 0 28px;
text-align: ${props => props.align || "center"}; text-align: ${(props) => props.align || 'center'};
user-select: none; user-select: none;
`; `;
type AddLifeButtonProps = { type AddLifeButtonProps = {
lifeTotal: number; lifeTotal: number;
setLifeTotal: (lifeTotal: number) => void; setLifeTotal: (lifeTotal: number) => void;
}; };
const AddLifeButton = ({ lifeTotal, setLifeTotal }: AddLifeButtonProps) => { const AddLifeButton = ({ lifeTotal, setLifeTotal }: AddLifeButtonProps) => {
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined); const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
const [timeoutFinished, setTimeoutFinished] = useState(false); const [timeoutFinished, setTimeoutFinished] = useState(false);
const [hasPressedDown, setHasPressedDown] = useState(false);
const handleLifeChange = (increment: number) => { const handleLifeChange = (increment: number) => {
setLifeTotal(lifeTotal + increment); setLifeTotal(lifeTotal + increment);
}; };
const handleDownInput = () => { const handleDownInput = () => {
setTimeoutFinished(false); setTimeoutFinished(false);
timeoutRef.current = setTimeout(() => { setHasPressedDown(true);
handleLifeChange(10); timeoutRef.current = setTimeout(() => {
setTimeoutFinished(true); handleLifeChange(10);
}, 500) setTimeoutFinished(true);
}, 500);
};
const handleUpInput = () => {
if (!(hasPressedDown && !timeoutFinished)) {
return;
} }
clearTimeout(timeoutRef.current);
handleLifeChange(1);
setHasPressedDown(false);
};
const handleUpInput = () => { const handleLeaveInput = () => {
if (!timeoutFinished) { setTimeoutFinished(true);
clearTimeout(timeoutRef.current); clearTimeout(timeoutRef.current);
handleLifeChange(1); setHasPressedDown(false);
} };
}
return ( return (
<StyledLifeCounterButton <StyledLifeCounterButton
onPointerDown={handleDownInput} onPointerDown={handleDownInput}
onPointerUp={handleUpInput} onPointerUp={handleUpInput}
onTouchCancel={handleDownInput} onPointerLeave={handleLeaveInput}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault(); e.preventDefault();
}} }}
align="right" align="right"
> >
&#43; &#43;
</StyledLifeCounterButton> </StyledLifeCounterButton>
); );
}; };
export default AddLifeButton; export default AddLifeButton;

264
my-app/src/Components/Buttons/CommanderDamageBar.tsx
View File

@@ -1,16 +1,16 @@
import { useRef, useState } from "react"; import { useRef, useState } from 'react';
import { Player } from "../../Types/Player"; import { Player } from '../../Types/Player';
import styled from "styled-components"; import styled from 'styled-components';
const CommanderDamageGrid = styled.div` const CommanderDamageGrid = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
`; `;
const CommanderDamageContainer = styled.div` const CommanderDamageContainer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
@@ -23,7 +23,7 @@ const CommanderDamageButton = styled.button<{ backgroundColor?: string }>`
height: 10vh; height: 10vh;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
background-color: ${props => props.backgroundColor || "antiquewhite"}; background-color: ${(props) => props.backgroundColor || 'antiquewhite'};
`; `;
const CommanderDamageButtonText = styled.p` const CommanderDamageButtonText = styled.p`
@@ -39,136 +39,162 @@ const CommanderDamageButtonText = styled.p`
`; `;
const VerticalSeperator = styled.div` const VerticalSeperator = styled.div`
width: 1px; width: 1px;
background-color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 1);
`; `;
type CommanderDamageBarProps = { type CommanderDamageBarProps = {
lifeTotal: number; lifeTotal: number;
setLifeTotal: (lifeTotal: number) => void; setLifeTotal: (lifeTotal: number) => void;
opponents: Player[]; opponents: Player[];
}; };
const CommanderDamageBar = ({ opponents, lifeTotal, setLifeTotal }: CommanderDamageBarProps) => { const CommanderDamageBar = ({
const [commanderDamage, setCommanderDamage] = useState<number[]>( opponents,
Array(opponents.length).fill(0) lifeTotal,
); setLifeTotal,
const [partnerCommanderDamage, setPartnerCommanderDamage] = useState<number[]>( }: CommanderDamageBarProps) => {
Array(opponents.length).fill(0) 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 timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined); const handleCommanderDamageChange = (index: number, increment: number) => {
const [timeoutFinished, setTimeoutFinished] = useState(false); const currentCommanderDamage = commanderDamage[index];
if (currentCommanderDamage === 0 && increment === -1) {
const handleCommanderDamageChange = (index: number, increment: number) => { return;
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 handleUpInput = (index: number) => { if (currentCommanderDamage === 21 && increment === 1) {
if (!timeoutFinished) { return;
clearTimeout(timeoutRef.current);
handleCommanderDamageChange(index, 1);
}
clearTimeout(timeoutRef.current);
} }
const handlePartnerDownInput = (index: number) => { const updatedCommanderDamage = [...commanderDamage];
setTimeoutFinished(false); updatedCommanderDamage[index] += increment;
timeoutRef.current = setTimeout(() => { setCommanderDamage(updatedCommanderDamage);
setTimeoutFinished(true); setLifeTotal(lifeTotal - increment);
handlePartnerCommanderDamageChange(index, -1); };
}, 500)
const handlePartnerCommanderDamageChange = (
index: number,
increment: number
) => {
const currentPartnerCommanderDamage = partnerCommanderDamage[index];
if (currentPartnerCommanderDamage === 0 && increment === -1) {
return;
} }
const handlePartnerUpInput = (index: number) => { const updatedPartnerCommanderDamage = [...partnerCommanderDamage];
if (!timeoutFinished) { updatedPartnerCommanderDamage[index] += increment;
clearTimeout(timeoutRef.current);
handlePartnerCommanderDamageChange(index, 1); 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 ( const handleLeaveInput = () => {
<CommanderDamageGrid> setTimeoutFinished(true);
{opponents.map((opponent, index) => { clearTimeout(timeoutRef.current);
return ( setHasPressedDown(false);
<CommanderDamageContainer> };
<CommanderDamageButton
key={index}
onPointerDown={() => handleDownInput(index)}
onPointerUp={() => handleUpInput(index)}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
}
}
backgroundColor={opponent.color}
>
<CommanderDamageButtonText>
{commanderDamage[index] > 0 ? commanderDamage[index] : ""}
</CommanderDamageButtonText>
</CommanderDamageButton>
{opponent.settings.usePartner && ( const handlePartnerDownInput = (index: number) => {
<> setTimeoutFinished(false);
<VerticalSeperator /> setHasPressedDown(true);
<CommanderDamageButton timeoutRef.current = setTimeout(() => {
key={index} setTimeoutFinished(true);
onPointerDown={() => handlePartnerDownInput(index)} handlePartnerCommanderDamageChange(index, -1);
onPointerUp={() => handlePartnerUpInput(index)} }, 500);
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { };
e.preventDefault();
}
}
backgroundColor={opponent.color}
>
<CommanderDamageButtonText>
{partnerCommanderDamage[index] > 0 ? partnerCommanderDamage[index] : ""}
</CommanderDamageButtonText>
</CommanderDamageButton>
</>
) const handlePartnerUpInput = (index: number) => {
} if (!(hasPressedDown && !timeoutFinished)) {
</CommanderDamageContainer> return;
) }
})} clearTimeout(timeoutRef.current);
</CommanderDamageGrid> handlePartnerCommanderDamageChange(index, 1);
); setHasPressedDown(false);
};
const handlePartnerLeaveInput = () => {
setTimeoutFinished(true);
clearTimeout(timeoutRef.current);
setHasPressedDown(false);
};
return (
<CommanderDamageGrid>
{opponents.map((opponent, index) => {
return (
<CommanderDamageContainer>
<CommanderDamageButton
key={index}
onPointerDown={() => handleDownInput(index)}
onPointerUp={() => handleUpInput(index)}
onPointerLeave={handleLeaveInput}
onContextMenu={(
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
e.preventDefault();
}}
backgroundColor={opponent.color}
>
<CommanderDamageButtonText>
{commanderDamage[index] > 0 ? commanderDamage[index] : ''}
</CommanderDamageButtonText>
</CommanderDamageButton>
{opponent.settings.usePartner && (
<>
<VerticalSeperator />
<CommanderDamageButton
key={index}
onPointerDown={() => handlePartnerDownInput(index)}
onPointerUp={() => handlePartnerUpInput(index)}
onPointerLeave={handlePartnerLeaveInput}
onContextMenu={(
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
e.preventDefault();
}}
backgroundColor={opponent.color}
>
<CommanderDamageButtonText>
{partnerCommanderDamage[index] > 0
? partnerCommanderDamage[index]
: ''}
</CommanderDamageButtonText>
</CommanderDamageButton>
</>
)}
</CommanderDamageContainer>
);
})}
</CommanderDamageGrid>
);
}; };
export default CommanderDamageBar; export default CommanderDamageBar;

82
my-app/src/Components/Buttons/CommanderTaxButton.tsx
View File

@@ -1,6 +1,6 @@
import { useRef, useState } from "react"; import { useRef, useState } from 'react';
import CommanderTaxIcon from "../../Icons/CommanderTaxIcon"; import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
import styled from "styled-components"; import styled from 'styled-components';
export const StyledCommanderTaxButton = styled.button` export const StyledCommanderTaxButton = styled.button`
flex-grow: 1; flex-grow: 1;
@@ -12,45 +12,55 @@ export const StyledCommanderTaxButton = styled.button`
`; `;
const CommanderTaxButton = () => { const CommanderTaxButton = () => {
const [commanderTax, setCommanderTax] = useState(0); const [commanderTax, setCommanderTax] = useState(0);
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined); const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
const [timeoutFinished, setTimeoutFinished] = useState(false); const [timeoutFinished, setTimeoutFinished] = useState(false);
const [hasPressedDown, setHasPressedDown] = useState(false);
const handleCommanderTaxChange = (increment: number) => { const handleCommanderTaxChange = (increment: number) => {
setCommanderTax(commanderTax + increment); setCommanderTax(commanderTax + increment);
}; };
const handleDownInput = () => { const handleDownInput = () => {
setTimeoutFinished(false); setTimeoutFinished(false);
timeoutRef.current = setTimeout(() => { setHasPressedDown(true);
setTimeoutFinished(true); timeoutRef.current = setTimeout(() => {
handleCommanderTaxChange(-1); setTimeoutFinished(true);
}, 500) handleCommanderTaxChange(-1);
}, 500);
};
const handleUpInput = () => {
if (!(hasPressedDown && !timeoutFinished)) {
return;
} }
clearTimeout(timeoutRef.current);
handleCommanderTaxChange(1);
setHasPressedDown(false);
};
const handleUpInput = () => { const handleLeaveInput = () => {
if (!timeoutFinished) { setTimeoutFinished(true);
clearTimeout(timeoutRef.current); clearTimeout(timeoutRef.current);
handleCommanderTaxChange(1); setHasPressedDown(false);
} };
}
return ( return (
<StyledCommanderTaxButton <StyledCommanderTaxButton
onPointerDown={handleDownInput} onPointerDown={handleDownInput}
onPointerUp={handleUpInput} onPointerUp={handleUpInput}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { onPointerLeave={handleLeaveInput}
e.preventDefault(); onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
} e.preventDefault();
} }}
> >
<CommanderTaxIcon <CommanderTaxIcon
size="8vh" size="8vh"
text={commanderTax ? commanderTax : undefined} text={commanderTax ? commanderTax : undefined}
/> />
</StyledCommanderTaxButton> </StyledCommanderTaxButton>
); );
}; };
export default CommanderTaxButton; export default CommanderTaxButton;

84
my-app/src/Components/Buttons/PartnerCommanderTaxButton copy.tsx
View File

@@ -1,6 +1,6 @@
import { useRef, useState } from "react"; import { useRef, useState } from 'react';
import CommanderTaxIcon from "../../Icons/CommanderTaxIcon"; import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
import styled from "styled-components"; import styled from 'styled-components';
export const StyledCommanderTaxButton = styled.button` export const StyledCommanderTaxButton = styled.button`
flex-grow: 1; flex-grow: 1;
@@ -12,45 +12,55 @@ export const StyledCommanderTaxButton = styled.button`
`; `;
const PartnerCommanderTaxButton = () => { const PartnerCommanderTaxButton = () => {
const [partnerCommanderTax, setPartnerCommanderTax] = useState(0); const [partnerCommanderTax, setPartnerCommanderTax] = useState(0);
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined); const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
const [timeoutFinished, setTimeoutFinished] = useState(false); const [timeoutFinished, setTimeoutFinished] = useState(false);
const [hasPressedDown, setHasPressedDown] = useState(false);
const handlePartnerCommanderTaxChange = (increment: number) => { const handlePartnerCommanderTaxChange = (increment: number) => {
setPartnerCommanderTax(partnerCommanderTax + increment); setPartnerCommanderTax(partnerCommanderTax + increment);
}; };
const handleDownInput = () => {
setTimeoutFinished(false);
setHasPressedDown(true);
timeoutRef.current = setTimeout(() => {
setTimeoutFinished(true);
handlePartnerCommanderTaxChange(-1);
}, 500);
};
const handleDownInput = () => { const handleUpInput = () => {
setTimeoutFinished(false); if (!(hasPressedDown && !timeoutFinished)) {
timeoutRef.current = setTimeout(() => { return;
setTimeoutFinished(true);
handlePartnerCommanderTaxChange(-1);
}, 500)
} }
clearTimeout(timeoutRef.current);
handlePartnerCommanderTaxChange(1);
setHasPressedDown(false);
};
const handleUpInput = () => { const handleLeaveInput = () => {
if (!timeoutFinished) { setTimeoutFinished(true);
clearTimeout(timeoutRef.current); clearTimeout(timeoutRef.current);
handlePartnerCommanderTaxChange(1); setHasPressedDown(false);
} };
}
return (
return ( <StyledCommanderTaxButton
<StyledCommanderTaxButton onPointerDown={handleDownInput}
onPointerDown={handleDownInput} onPointerUp={handleUpInput}
onPointerUp={handleUpInput} onPointerLeave={handleLeaveInput}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault(); e.preventDefault();
} }}
} >
> <CommanderTaxIcon
<CommanderTaxIcon size="8vh"
size="8vh" text={partnerCommanderTax ? partnerCommanderTax : undefined}
text={partnerCommanderTax ? partnerCommanderTax : undefined} />{' '}
/> 2 2
</StyledCommanderTaxButton> </StyledCommanderTaxButton>
); );
}; };
export default PartnerCommanderTaxButton; export default PartnerCommanderTaxButton;

84
my-app/src/Components/Buttons/SubtractLifeButton.tsx
View File

@@ -1,5 +1,5 @@
import { useRef, useState } from "react"; import { useRef, useState } from 'react';
import styled from "styled-components"; import styled from 'styled-components';
export const StyledLifeCounterButton = styled.button<{ align?: string }>` export const StyledLifeCounterButton = styled.button<{ align?: string }>`
width: 50%; width: 50%;
@@ -12,50 +12,64 @@ export const StyledLifeCounterButton = styled.button<{ align?: string }>`
outline: none; outline: none;
cursor: pointer; cursor: pointer;
padding: 0 28px; padding: 0 28px;
text-align: ${props => props.align || "center"}; text-align: ${(props) => props.align || 'center'};
user-select: none; user-select: none;
`; `;
type SubtractLifeButtonProps = { type SubtractLifeButtonProps = {
lifeTotal: number; lifeTotal: number;
setLifeTotal: (lifeTotal: number) => void; setLifeTotal: (lifeTotal: number) => void;
}; };
const SubtractLifeButton = ({ lifeTotal, setLifeTotal }: SubtractLifeButtonProps) => { const SubtractLifeButton = ({
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined); lifeTotal,
const [timeoutFinished, setTimeoutFinished] = useState(false); setLifeTotal,
}: SubtractLifeButtonProps) => {
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
const [timeoutFinished, setTimeoutFinished] = useState(false);
const [hasPressedDown, setHasPressedDown] = useState(false);
const handleLifeChange = (increment: number) => { const handleLifeChange = (increment: number) => {
setLifeTotal(lifeTotal + increment); setLifeTotal(lifeTotal + increment);
}; };
const handleDownInput = () => { const handleDownInput = () => {
setTimeoutFinished(false); setTimeoutFinished(false);
timeoutRef.current = setTimeout(() => { setHasPressedDown(true);
handleLifeChange(-10); timeoutRef.current = setTimeout(() => {
setTimeoutFinished(true); handleLifeChange(-10);
}, 500) setTimeoutFinished(true);
}, 500);
};
const handleUpInput = () => {
if (!(hasPressedDown && !timeoutFinished)) {
return;
} }
clearTimeout(timeoutRef.current);
handleLifeChange(-1);
setHasPressedDown(false);
};
const handleUpInput = () => { const handleLeaveInput = () => {
if (!timeoutFinished) { setTimeoutFinished(true);
clearTimeout(timeoutRef.current); clearTimeout(timeoutRef.current);
handleLifeChange(-1); setHasPressedDown(false);
} };
}
return ( return (
<StyledLifeCounterButton <StyledLifeCounterButton
onPointerDown={handleDownInput} onPointerDown={handleDownInput}
onPointerUp={handleUpInput} onPointerUp={handleUpInput}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { onPointerLeave={handleLeaveInput}
e.preventDefault(); onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
}} e.preventDefault();
align="left" }}
> align="left"
&#8722; >
</StyledLifeCounterButton> &#8722;
); </StyledLifeCounterButton>
);
}; };
export default SubtractLifeButton; export default SubtractLifeButton;

17
my-app/src/Components/Counters/Counters.tsx
View File

@@ -1,12 +1,14 @@
import * as S from "./Counters.style"; import { useState } from "react";
import LifeCounter from "../LifeCounter/LifeCounter";
import { Player } from "../../Types/Player"; import { Player } from "../../Types/Player";
import LifeCounter from "../LifeCounter/LifeCounter";
import * as S from "./Counters.style";
type CountersProps = { type CountersProps = {
players: Player[]; players: Player[];
}; };
const Counters = ({ players }: CountersProps) => { const Counters = ({ players }: CountersProps) => {
const [isAnyButtonsPressed, setIsAnyButtonsPressed] = useState(false);
return ( return (
<S.CountersWrapper> <S.CountersWrapper>
<S.CountersGrid> <S.CountersGrid>
@@ -16,15 +18,20 @@ const Counters = ({ players }: CountersProps) => {
<S.GridItemContainerFlipped> <S.GridItemContainerFlipped>
<LifeCounter backgroundColor={player.color} player={player} opponents={ <LifeCounter backgroundColor={player.color} player={player} opponents={
players.filter((opponent) => opponent.key !== player.key) players.filter((opponent) => opponent.key !== player.key)
} /> } isAnyButtonsPressed={isAnyButtonsPressed}
setIsAnyButtonsPressed={setIsAnyButtonsPressed}
/>
</S.GridItemContainerFlipped> </S.GridItemContainerFlipped>
) )
} }
return ( return (
<S.GridItemContainer> <S.GridItemContainer>
<LifeCounter backgroundColor={player.color} player={player} opponents={ <LifeCounter backgroundColor={player.color} player={player} opponents={
players.filter((opponent) => opponent.key !== player.key) players.filter((opponent) => opponent.key !== player.key)
} /> }
isAnyButtonsPressed={isAnyButtonsPressed}
setIsAnyButtonsPressed={setIsAnyButtonsPressed}
/>
</S.GridItemContainer> </S.GridItemContainer>
) )
})} })}

66
my-app/src/Components/LifeCounter/LifeCounter.tsx
View File

@@ -1,35 +1,47 @@
import { useState } from "react"; import { useState } from 'react';
import * as S from "./LifeCounter.style"; import * as S from './LifeCounter.style';
import { Player } from "../../Types/Player"; import { Player } from '../../Types/Player';
import CommanderTaxButton from "../Buttons/CommanderTaxButton"; import CommanderTaxButton from '../Buttons/CommanderTaxButton';
import PartnerCommanderTaxButton from "../Buttons/PartnerCommanderTaxButton copy"; import PartnerCommanderTaxButton from '../Buttons/PartnerCommanderTaxButton copy';
import AddLifeButton from "../Buttons/AddLifeButton"; import AddLifeButton from '../Buttons/AddLifeButton';
import SubtractLifeButton from "../Buttons/SubtractLifeButton"; import SubtractLifeButton from '../Buttons/SubtractLifeButton';
import CommanderDamageBar from "../Buttons/CommanderDamageBar"; import CommanderDamageBar from '../Buttons/CommanderDamageBar';
type LifeCounterProps = { type LifeCounterProps = {
player: Player; player: Player;
backgroundColor: string; backgroundColor: string;
opponents: Player[]; opponents: Player[];
setIsAnyButtonsPressed: (isAnyButtonsPressed: boolean) => void;
isAnyButtonsPressed: boolean;
}; };
const LifeCounter = ({ backgroundColor, player, opponents }: LifeCounterProps) => { const LifeCounter = ({
const [lifeTotal, setLifeTotal] = useState(40); backgroundColor,
player,
opponents,
isAnyButtonsPressed,
setIsAnyButtonsPressed,
}: LifeCounterProps) => {
const [lifeTotal, setLifeTotal] = useState(40);
return ( return (
<S.LifeCounterWrapper backgroundColor={backgroundColor}> <S.LifeCounterWrapper backgroundColor={backgroundColor}>
<CommanderDamageBar lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} opponents={opponents} /> <CommanderDamageBar
<S.LifeCountainer> lifeTotal={lifeTotal}
<SubtractLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal}/> setLifeTotal={setLifeTotal}
<S.LifeCounterText>{lifeTotal}</S.LifeCounterText> opponents={opponents}
<AddLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} /> />
</S.LifeCountainer> <S.LifeCountainer>
<S.ExtraCountersGrid> <SubtractLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} />
<CommanderTaxButton/> <S.LifeCounterText>{lifeTotal}</S.LifeCounterText>
{player.settings.usePartner && <PartnerCommanderTaxButton/>} <AddLifeButton lifeTotal={lifeTotal} setLifeTotal={setLifeTotal} />
</S.ExtraCountersGrid> </S.LifeCountainer>
</S.LifeCounterWrapper> <S.ExtraCountersGrid>
); <CommanderTaxButton />
{player.settings.usePartner && <PartnerCommanderTaxButton />}
</S.ExtraCountersGrid>
</S.LifeCounterWrapper>
);
}; };
export default LifeCounter; export default LifeCounter;

10
my-app/src/Icons/CommanderTaxIcon.tsx
View File

@@ -5,8 +5,14 @@ type CommanderTaxIconProps = {
const CommanderTaxIcon = ({ size, text }: CommanderTaxIconProps) => { const CommanderTaxIcon = ({ size, text }: CommanderTaxIconProps) => {
return ( return (
<div style={{ position: 'relative', display: 'inline-block'}}> <div style={{ position: 'relative', display: 'inline-block' }}>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 325 325" width={size || 'auto'} height={size || 'auto'}> <svg
version="1.2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 325 325"
width={size || 'auto'}
height={size || 'auto'}
>
<title>CommanderTaxIcon</title> <title>CommanderTaxIcon</title>
<style>{`.s0 { fill: #000000; fill-opacity: 0.5}`}</style> <style>{`.s0 { fill: #000000; fill-opacity: 0.5}`}</style>
<path <path

5
my-app/yarn.lock
View File

@@ -7594,6 +7594,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier@2.8.8:
version "2.8.8"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
pretty-bytes@^5.3.0, pretty-bytes@^5.4.1: pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
version "5.6.0" version "5.6.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"