mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 10:47:04 +02:00
feat: legacy
This commit is contained in:
TrèsAbhi committed
1 parent
9640920863
commit
8d9ca3d716
271 files changed
+1
-1
No files matched your search
@@ -1,72 +0,0 @@
|
||||
import { asset, consumableDefinitions } from '@blitzkit/core';
|
||||
import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons';
|
||||
import { Flex, Text } from '@radix-ui/themes';
|
||||
import { use } from 'react';
|
||||
import { useDelta } from '../../hooks/useDelta';
|
||||
import { GenericTankComponentButton } from './GenericTankComponentButton';
|
||||
import { TankComponentButtonProps } from './TankComponentButton';
|
||||
|
||||
interface ConsumableButtonProps extends TankComponentButtonProps {
|
||||
consumable: number;
|
||||
duration?: number;
|
||||
cooldown?: number;
|
||||
}
|
||||
|
||||
export function ConsumableButton({
|
||||
consumable,
|
||||
cooldown,
|
||||
duration,
|
||||
...props
|
||||
}: ConsumableButtonProps) {
|
||||
const awaitedConsumableDefinitions = use(consumableDefinitions);
|
||||
const cooldownDelta = useDelta(cooldown ?? 0);
|
||||
const durationDelta = useDelta(duration ?? 0);
|
||||
|
||||
return (
|
||||
<GenericTankComponentButton
|
||||
style={{ width: '6rem' }}
|
||||
tooltip={awaitedConsumableDefinitions[consumable].name}
|
||||
icon={asset(`icons/consumables/${consumable}.webp`)}
|
||||
{...props}
|
||||
>
|
||||
{(cooldown || duration) && (
|
||||
<Flex direction="column" gap="1" ml="-2" mr="2">
|
||||
{duration && (
|
||||
<Text
|
||||
size="1"
|
||||
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
|
||||
size="1"
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { asset, equipmentDefinitions } from '@blitzkit/core';
|
||||
import { use } from 'react';
|
||||
import { GenericTankComponentButton } from './GenericTankComponentButton';
|
||||
import { TankComponentButtonProps } from './TankComponentButton';
|
||||
|
||||
interface EquipmentButtonProps extends TankComponentButtonProps {
|
||||
equipment: number;
|
||||
}
|
||||
|
||||
export function EquipmentButton({ equipment, ...props }: EquipmentButtonProps) {
|
||||
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
|
||||
|
||||
return (
|
||||
<GenericTankComponentButton
|
||||
tooltip={awaitedEquipmentDefinitions.equipments[equipment].name}
|
||||
icon={asset(`icons/equipment/${equipment}.webp`)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import { HTMLAttributes } from 'react';
|
||||
import {
|
||||
TankComponentButton,
|
||||
TankComponentButtonProps,
|
||||
} from './TankComponentButton';
|
||||
|
||||
interface GenericTankComponentButtonProps extends TankComponentButtonProps {
|
||||
icon: string;
|
||||
iconStyles?: HTMLAttributes<HTMLImageElement>['style'];
|
||||
}
|
||||
|
||||
export function GenericTankComponentButton({
|
||||
icon,
|
||||
iconStyles,
|
||||
children,
|
||||
...props
|
||||
}: GenericTankComponentButtonProps) {
|
||||
return (
|
||||
<TankComponentButton {...props}>
|
||||
<div
|
||||
style={{
|
||||
width: 48,
|
||||
height: 40,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
alt={icon}
|
||||
draggable={false}
|
||||
src={icon}
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
width: 32,
|
||||
height: 32,
|
||||
position: 'absolute',
|
||||
opacity: props.disabled ? 0.5 : 1,
|
||||
transform: 'translate(-50%, -50%) scale(0.75)',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
...iconStyles,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</TankComponentButton>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { asset } from '@blitzkit/core';
|
||||
import { GenericTankComponentButton } from './GenericTankComponentButton';
|
||||
import { TankComponentButtonProps } from './TankComponentButton';
|
||||
|
||||
interface ModuleProps extends TankComponentButtonProps {
|
||||
module: string;
|
||||
}
|
||||
|
||||
export function ModuleButton({ module, ...props }: ModuleProps) {
|
||||
return (
|
||||
<GenericTankComponentButton
|
||||
icon={asset(`icons/modules/${module}.webp`)}
|
||||
iconStyles={{
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(calc(-50% + 2px), calc(-50% + 2px))',
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { asset, provisionDefinitions } from '@blitzkit/core';
|
||||
import { use } from 'react';
|
||||
import { GenericTankComponentButton } from './GenericTankComponentButton';
|
||||
import { TankComponentButtonProps } from './TankComponentButton';
|
||||
|
||||
interface ProvisionButtonProps extends TankComponentButtonProps {
|
||||
provision: number;
|
||||
}
|
||||
|
||||
export function ProvisionButton({ provision, ...props }: ProvisionButtonProps) {
|
||||
const awaitedProvisionDefinitions = use(provisionDefinitions);
|
||||
|
||||
return (
|
||||
<GenericTankComponentButton
|
||||
tooltip={awaitedProvisionDefinitions[provision].name}
|
||||
icon={asset(`icons/provisions/${provision}.webp`)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { asset } from '@blitzkit/core';
|
||||
import { GenericTankComponentButton } from './GenericTankComponentButton';
|
||||
import { TankComponentButtonProps } from './TankComponentButton';
|
||||
|
||||
interface ShellButtonProps extends TankComponentButtonProps {
|
||||
shell: string;
|
||||
}
|
||||
|
||||
export function ShellButton({ shell, ...props }: ShellButtonProps) {
|
||||
return (
|
||||
<GenericTankComponentButton
|
||||
icon={asset(`icons/shells/${shell}.webp`)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import { Button, Text, Tooltip } from '@radix-ui/themes';
|
||||
import { ComponentProps, ReactNode } from 'react';
|
||||
|
||||
export interface TankComponentButtonProps
|
||||
extends ComponentProps<typeof Button> {
|
||||
selected?: boolean;
|
||||
children?: ReactNode;
|
||||
discriminator?: ReactNode;
|
||||
disabled?: boolean;
|
||||
banner?: string;
|
||||
special?: boolean;
|
||||
tooltip?: string;
|
||||
}
|
||||
|
||||
export function TankComponentButton({
|
||||
variant,
|
||||
selected,
|
||||
discriminator,
|
||||
special,
|
||||
children,
|
||||
banner,
|
||||
disabled,
|
||||
style,
|
||||
tooltip,
|
||||
...props
|
||||
}: TankComponentButtonProps) {
|
||||
const button = (
|
||||
<Button
|
||||
radius="medium"
|
||||
color={selected ? (special ? 'amber' : undefined) : 'gray'}
|
||||
variant={variant ?? (selected ? 'surface' : 'soft')}
|
||||
style={{
|
||||
padding: 0,
|
||||
minWidth: 48,
|
||||
height: 40,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'unset',
|
||||
pointerEvents: variant === 'ghost' ? 'none' : undefined,
|
||||
...style,
|
||||
}}
|
||||
disabled={variant === 'ghost' || disabled}
|
||||
{...props}
|
||||
>
|
||||
{banner !== undefined && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '200%',
|
||||
height: 12,
|
||||
backgroundColor: banner,
|
||||
top: '50%',
|
||||
left: '-50%',
|
||||
transform: 'translateY(-50%) rotate(-22.5deg)',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{children}
|
||||
|
||||
{discriminator !== undefined && (
|
||||
<Text
|
||||
size="1"
|
||||
style={{
|
||||
textShadow: '0 0 4px black',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
right: 8,
|
||||
textAlign: 'right',
|
||||
}}
|
||||
color={variant === 'ghost' ? 'gray' : undefined}
|
||||
>
|
||||
{discriminator}
|
||||
</Text>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
|
||||
if (tooltip) return <Tooltip content={tooltip}>{button}</Tooltip>;
|
||||
return button;
|
||||
}
|
||||
Reference in new issue
Block a user