TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-22 11:17:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: consumables

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-04-06 19:37:57 -05:00
1 parent db1e4af20c
commit 94558393d9
4 files changed
+247 -94
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/ModuleButtons/ConsumableButton.tsx
+38 -34
View File
@@ -8,7 +8,7 @@ import { TankComponentButtonProps } from './TankComponentButton';
interface ConsumableButtonProps extends TankComponentButtonProps {
consumable: number;
duration?: number;
cooldown: number;
cooldown?: number;
}
export function ConsumableButton({
@@ -17,7 +17,7 @@ export function ConsumableButton({
duration,
...props
}: ConsumableButtonProps) {
const cooldownDelta = useDelta(cooldown);
const cooldownDelta = useDelta(cooldown ?? 0);
const durationDelta = useDelta(duration ?? 0);
return (
@@ -25,38 +25,42 @@ export function ConsumableButton({
icon={asset(`icons/consumables/${consumable}.webp`)}
{...props}
>
<Flex direction="column" style={{ transform: 'translateX(-10px)' }}>
{duration && (
<Text
color={
durationDelta < 0
? 'green'
: durationDelta > 0
? 'tomato'
: undefined
}
>
<Flex align="center" gap="1" style={{ marginBottom: -4 }}>
<ClockIcon width={12} height={12} />
{Math.round(duration)}s
</Flex>
</Text>
)}
<Text
color={
cooldownDelta < 0
? 'green'
: cooldownDelta > 0
? 'tomato'
: undefined
}
>
<Flex align="center" gap="1">
<ReloadIcon width={12} height={12} />
{Math.round(cooldown)}s
</Flex>
</Text>
</Flex>
{(cooldown || duration) && (
<Flex direction="column" style={{ transform: 'translateX(-10px)' }}>
{duration && (
<Text
color={
durationDelta < 0
? 'green'
: durationDelta > 0
? 'tomato'
: undefined
}
>
<Flex align="center" gap="1" style={{ marginBottom: -4 }}>
<ClockIcon width={12} height={12} />
{Math.round(duration)}s
</Flex>
</Text>
)}
{cooldown && (
<Text
color={
cooldownDelta < 0
? 'green'
: cooldownDelta > 0
? 'tomato'
: undefined
}
>
<Flex align="center" gap="1">
<ReloadIcon width={12} height={12} />
{Math.round(cooldown)}s
</Flex>
</Text>
)}
</Flex>
)}
</GenericTankComponentButton>
);
}