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

create health component

Browse Source
This commit is contained in:
Viktor Rådberg
2023-09-17 18:16:58 +02:00
parent abbaec90e9
commit 444d4086aa
8 changed files with 475 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/Components/Counters/ExtraCountersBar.tsx
View File

@@ -11,15 +11,31 @@ import {
Poison,
} from '../../Icons/generated';
const Container = styled.div<{ rotation: number }>`
width: 100%;
height: 20vmin;
display: flex;
${(props) => {
if (
props.rotation === Rotation.SideFlipped ||
props.rotation === Rotation.Side
) {
return css`
height: 100%;
width: 9.3vmax;
`;
}
}}
`;
const ExtraCountersGrid = styled.div<{ rotation: number }>`
display: flex;
position: absolute;
width: 100%;
flex-direction: row;
flex-grow: 1;
width: 100%;
justify-content: space-evenly;
bottom: 0;
width: 100%;
pointer-events: none;
${(props) => {
@@ -81,76 +97,95 @@ const ExtraCountersBar = ({
onPlayerChange(updatedPlayer);
};
const iconSize = '8vmin';
const iconSize =
player.settings.rotation === Rotation.SideFlipped ||
player.settings.rotation === Rotation.Side
? '5vmax'
: '10vmin';
const {
useCommanderDamage,
usePartner,
usePoison,
useEnergy,
useExperience,
} = player.settings;
const hasExtraCounters =
useCommanderDamage || usePartner || usePoison || useEnergy || useExperience;
if (!hasExtraCounters) {
return null;
}
return (
<ExtraCountersGrid rotation={player.settings.rotation}>
{player.settings.useCommanderDamage && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<CommanderTax size={iconSize} opacity="0.5" color="black" />}
type={CounterType.CommanderTax}
counterTotal={
player.extraCounters?.find(
(counter) => counter.type === 'commanderTax'
)?.value
}
setCounterTotal={handleCounterChange}
/>
)}
{Boolean(
player.settings.useCommanderDamage && player.settings.usePartner
) && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<PartnerTax size={iconSize} opacity="0.5" color="black" />}
type={CounterType.PartnerTax}
counterTotal={
player.extraCounters?.find(
(counter) => counter.type === 'partnerTax'
)?.value
}
setCounterTotal={handleCounterChange}
/>
)}
{player.settings.usePoison && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<Poison size={iconSize} opacity="0.5" color="black" />}
type={CounterType.Poison}
counterTotal={
player.extraCounters?.find((counter) => counter.type === 'poison')
?.value
}
setCounterTotal={handleCounterChange}
/>
)}
{player.settings.useEnergy && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<Energy size={iconSize} opacity="0.5" color="black" />}
type={CounterType.Energy}
counterTotal={
player.extraCounters?.find((counter) => counter.type === 'energy')
?.value
}
setCounterTotal={handleCounterChange}
/>
)}
{player.settings.useExperience && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<Experience size={iconSize} opacity="0.5" color="black" />}
type={CounterType.Experience}
counterTotal={
player.extraCounters?.find(
(counter) => counter.type === 'experience'
)?.value
}
setCounterTotal={handleCounterChange}
/>
)}
</ExtraCountersGrid>
<Container rotation={player.settings.rotation}>
<ExtraCountersGrid rotation={player.settings.rotation}>
{useCommanderDamage && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<CommanderTax size={iconSize} opacity="0.5" color="black" />}
type={CounterType.CommanderTax}
counterTotal={
player.extraCounters?.find(
(counter) => counter.type === 'commanderTax'
)?.value
}
setCounterTotal={handleCounterChange}
/>
)}
{Boolean(useCommanderDamage && usePartner) && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<PartnerTax size={iconSize} opacity="0.5" color="black" />}
type={CounterType.PartnerTax}
counterTotal={
player.extraCounters?.find(
(counter) => counter.type === 'partnerTax'
)?.value
}
setCounterTotal={handleCounterChange}
/>
)}
{usePoison && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<Poison size={iconSize} opacity="0.5" color="black" />}
type={CounterType.Poison}
counterTotal={
player.extraCounters?.find((counter) => counter.type === 'poison')
?.value
}
setCounterTotal={handleCounterChange}
/>
)}
{useEnergy && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<Energy size={iconSize} opacity="0.5" color="black" />}
type={CounterType.Energy}
counterTotal={
player.extraCounters?.find((counter) => counter.type === 'energy')
?.value
}
setCounterTotal={handleCounterChange}
/>
)}
{useExperience && (
<ExtraCounter
rotation={player.settings.rotation}
Icon={<Experience size={iconSize} opacity="0.5" color="black" />}
type={CounterType.Experience}
counterTotal={
player.extraCounters?.find(
(counter) => counter.type === 'experience'
)?.value
}
setCounterTotal={handleCounterChange}
/>
)}
</ExtraCountersGrid>
</Container>
);
};