ryan/LifeTrinket
1
0
Fork 0
forked from external-repos/LifeTrinket
Code Pull Requests Activity

refactor extra buttons, change text styling

Browse Source
This commit is contained in:
Viktor Rådberg
2023-07-04 00:17:08 +02:00
parent 2945972e81
commit 075b9c5db2
13 changed files with 59 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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`

67
my-app/src/Components/Buttons/EnergyButton.tsx
View File

@@ -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<NodeJS.Timeout | undefined>(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 (
<StyledEnergyButton
onPointerDown={handleDownInput}
onPointerUp={handleUpInput}
onPointerLeave={handleLeaveInput}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
}}
>
<EnergyIcon
size="8vh"
text={energyCount ? energyCount : undefined}
color=""
/>
</StyledEnergyButton>
);
};
export default EnergyButton;

67
my-app/src/Components/Buttons/ExperienceButton.tsx
View File

@@ -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<NodeJS.Timeout | undefined>(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 (
<StyledExperienceButton
onPointerDown={handleDownInput}
onPointerUp={handleUpInput}
onPointerLeave={handleLeaveInput}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
}}
>
<ExperienceIcon
size="8vh"
text={experienceCount ? experienceCount : undefined}
color=""
/>
</StyledExperienceButton>
);
};
export default ExperienceButton;

45
my-app/src/Components/Buttons/CommanderTaxButton.tsx → my-app/src/Components/Buttons/ExtraCounter.tsx
View File

@@ -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<NodeJS.Timeout | undefined>(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 (
<StyledCommanderTaxButton
<StyledExtraCounterButton
onPointerDown={handleDownInput}
onPointerUp={handleUpInput}
onPointerLeave={handleLeaveInput}
@@ -55,12 +70,10 @@ const CommanderTaxButton = () => {
e.preventDefault();
}}
>
<CommanderTaxIcon
size="8vh"
text={commanderTax ? commanderTax : undefined}
/>
</StyledCommanderTaxButton>
{Icon}
<CenteredText>{count ? count : undefined}</CenteredText>
</StyledExtraCounterButton>
);
};
export default CommanderTaxButton;
export default ExtraCounter;

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

@@ -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<NodeJS.Timeout | undefined>(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 (
<StyledCommanderTaxButton
onPointerDown={handleDownInput}
onPointerUp={handleUpInput}
onPointerLeave={handleLeaveInput}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
}}
>
<CommanderTaxIcon
size="8vh"
text={partnerCommanderTax ? partnerCommanderTax : undefined}
/>{' '}
2
</StyledCommanderTaxButton>
);
};
export default PartnerCommanderTaxButton;

67
my-app/src/Components/Buttons/PoisonButton.tsx
View File

@@ -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<NodeJS.Timeout | undefined>(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 (
<StyledPoisonButton
onPointerDown={handleDownInput}
onPointerUp={handleUpInput}
onPointerLeave={handleLeaveInput}
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
}}
>
<PoisonIcon
size="8vh"
text={poisonCount ? poisonCount : undefined}
color=""
/>
</StyledPoisonButton>
);
};
export default PoisonButton;

3
my-app/src/Components/LifeCounter/LifeCounter.style.ts
View File

@@ -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`

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

@@ -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 = ({
/>
</S.LifeCountainer>
<S.ExtraCountersGrid>
{player.settings.useCommanderDamage && <CommanderTaxButton />}
{player.settings.useCommanderDamage && (
<ExtraCounter Icon={<CommanderTaxIcon size="8vh" />} />
)}
{Boolean(
player.settings.useCommanderDamage && player.settings.usePartner
) && <PartnerCommanderTaxButton />}
{player.settings.usePoison && <PoisonButton />}
{player.settings.useEnergy && <EnergyButton />}
{player.settings.useExperience && <ExperienceButton />}
) && <ExtraCounter Icon={<CommanderTaxIcon size="8vh" />} />}
{player.settings.usePoison && (
<ExtraCounter Icon={<PoisonIcon size="8vh" />} />
)}
{player.settings.useEnergy && (
<ExtraCounter Icon={<EnergyIcon size="8vh" />} />
)}
{player.settings.useExperience && (
<ExtraCounter Icon={<ExperienceIcon size="8vh" />} />
)}
</S.ExtraCountersGrid>
</S.LifeCounterContentContainer>

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

@@ -1,6 +1,6 @@
import { IconProps } from '../Types/Icon';
const CommanderTaxIcon = ({ size, text, color }: IconProps) => {
const CommanderTaxIcon = ({ size, color }: IconProps) => {
return (
<div style={{ position: 'relative', display: 'inline-block' }}>
<svg
@@ -24,18 +24,6 @@ const CommanderTaxIcon = ({ size, text, color }: IconProps) => {
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"
/>
</svg>
<div
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
fontSize: '8vh',
fontWeight: 'bold',
}}
>
{text}
</div>
</div>
);
};

14
my-app/src/Icons/EnergyIcon.tsx
View File

@@ -1,6 +1,6 @@
import { IconProps } from '../Types/Icon';
const EnergyIcon = ({ color, size, text }: IconProps) => {
const EnergyIcon = ({ color, size }: IconProps) => {
return (
<div style={{ position: 'relative', display: 'inline-block' }}>
<svg
@@ -14,18 +14,6 @@ const EnergyIcon = ({ color, size, text }: IconProps) => {
>
<path d="M234.896 485.029c-2.669-2.858-3.364-8.205-5.593-11.658-2.645-4.099-5.889-7.763-8.697-11.742-3.68-5.217-7.881-10.06-11.601-15.262-6.362-8.897-13.587-16.63-21.201-24.468-18.683-19.234-38.196-37.019-60.371-52.199-34.356-23.52-70.771-44.106-109.819-58.761-2.709-1.017 0 0-17.614-8.609 3.325-5.34 23.831-34.407 28.638-42.12 8.028-12.881 13.8-26.964 19.782-40.866 7.616-17.7 14.438-35.819 19.899-54.296 6.976-23.604 12.835-47.549 17.354-71.747C86.931 86.566 94.42 29.508 98.888.314c39.192 11.299 25.749 7.891 34.636 10.185 24.621 6.357 50.451 7.612 75.722 9.557 14.404 1.109 28.678.999 43.104.777 21.448-.33 42.94-1.344 64.203-4.293 10.585-1.468 21.127-3.467 31.478-6.126 8.192-2.104 13.47-3.289 31.032-10.1 1.937 7.533 21.898 144.985 48.764 208.185 10.624 24.992 42.674 79.876 52.745 92.264-14.321 5.362-71.933 31.841-101.849 49.629-36.743 21.848-71.48 48.623-100.156 80.446-13.532 15.02-24.152 32.606-35.086 49.537-4.266 6.604-5.912 7.501-8.585 4.654zm11.489-54.904c7.625-39.942 29.623-90.766 63.953-147.75 11.581-19.223 33.603-52.214 46.967-70.363 8.287-11.254 10.945-15.403 10.945-17.086 0-1.254-.476-2.405-1.093-2.642-.602-.231-5.917.457-11.813 1.529-36.192 6.578-73.021 8.765-101.648 6.036-12.956-1.235-22.442-2.794-23.514-3.865-.759-.759 2.172-19.29 4.559-28.822 9.985-39.881 33.304-81.786 63.095-113.384 4.589-4.866 8.156-9.034 7.93-9.26-.228-.227-3.052.433-6.277 1.467-37.805 12.116-79.837 13.334-110.1 3.191-4.133-1.386-7.625-2.414-7.762-2.287-.136.128.165 4.227.669 9.11 4.746 45.95-17.074 106.187-62.849 173.502-6.884 10.124-20.352 28.227-28.176 37.875-3.156 3.891-4.503 6.084-3.834 6.239.567.132 6.354-1.116 12.86-2.772 18.57-4.727 34.105-7.629 55.329-10.332 16.237-2.068 56.226-1.88 70.125.33 9.04 1.437 21.549 4.209 22.277 4.938.15.15-.213 1.752-.806 3.561-3.145 9.582-7.186 28.637-9.049 42.662-3.581 26.956-3.578 70.348.006 102.375 1.409 12.596 3.907 28.753 4.624 29.913.611.986.929-.272 3.582-14.165z" />
</svg>
<div
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
fontSize: '8vh',
fontWeight: 'bold',
}}
>
{text}
</div>
</div>
);
};

14
my-app/src/Icons/ExperienceIcon.tsx
View File

@@ -1,6 +1,6 @@
import { IconProps } from '../Types/Icon';
const ExperienceIcon = ({ color, size, text }: IconProps) => {
const ExperienceIcon = ({ color, size }: IconProps) => {
return (
<div style={{ position: 'relative', display: 'inline-block' }}>
<svg
@@ -14,18 +14,6 @@ const ExperienceIcon = ({ color, size, text }: IconProps) => {
>
<path d="M.775 171.102c96.217.111 192.488-.717 288.65.386 26.868 13.406 51.584 31.281 75.087 50.039-11.696 41.378-8.552 88.438 16.055 124.74 17.434 27.474 47.611 45.239 79.445 50.314l.055 497.248C351.107 834.08 244.959 767.49 151.445 685.175c-32.053-28.467-63.28-62.729-70.893-106.423-9.103-51.97 12.689-102.395 14.345-154.035.717-40.108-.111-81.541-16.331-118.946-15.227-40.494-46.783-71.224-70.065-106.865-6.014-8.054-7.503-17.985-7.724-27.805zm624.469 50.148c23.834-18.316 48.551-36.301 75.418-49.763 96.108-1.103 192.268-.275 288.43-.386-.719 8.219-.497 16.992-5.572 23.999-21.572 35.253-52.523 64.548-68.963 103.057-19.475 40.108-20.799 85.734-19.529 129.485 2.481 50.369 22.675 99.581 14.454 150.339-7.613 44.134-39.115 78.616-71.39 107.36-94.23 83.251-201.702 149.842-311.491 210.418-.055-166.337-.055-332.675-.055-499.012 35.75-4.359 69.403-25.378 86.837-57.156 20.965-35.418 22.731-79.334 11.861-118.34z" />
</svg>
<div
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
fontSize: '8vh',
fontWeight: 'bold',
}}
>
{text}
</div>
</div>
);
};

14
my-app/src/Icons/PoisonIcon.tsx
View File

@@ -1,6 +1,6 @@
import { IconProps } from '../Types/Icon';
const PhyrexianIcon = ({ color, size, text }: IconProps) => {
const PhyrexianIcon = ({ color, size }: IconProps) => {
return (
<div style={{ position: 'relative', display: 'inline-block' }}>
<svg
@@ -14,18 +14,6 @@ const PhyrexianIcon = ({ color, size, text }: IconProps) => {
>
<path d="M64.333 20.833V223l24-20.333V0M76.334 46.5C34.176 46.5 0 75.644 0 111.454c0 35.904 34.176 65.048 76.334 65.048 42.157 0 76.333-29.144 76.333-65.048 0-35.81-34.176-64.954-76.333-64.954zm.166 101.667c-23.748 0-43-16.146-43-36.083S52.752 76 76.5 76s43 16.147 43 36.083-19.252 36.084-43 36.084z" />
</svg>
<div
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
fontSize: '8vh',
fontWeight: 'bold',
}}
>
{text}
</div>
</div>
);
};

3
my-app/src/Types/Icon.ts
View File

@@ -1,5 +1,4 @@
export type IconProps = {
size?: string;
text?: number;
color?: string; // Add color prop
color?: string;
};