feat: consumable timings

src/components/ModuleButtons/ConsumableButton.tsx

@@ -1,19 +1,62 @@
+import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { Flex, Text } from '@radix-ui/themes';
 import { asset } from '../../core/blitzkrieg/asset';
+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 cooldownDelta = useDelta(cooldown);
+  const durationDelta = useDelta(duration ?? 0);
+
   return (
     <GenericTankComponentButton
       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 />
+              {Math.round(duration)}s
+            </Flex>
+          </Text>
+        )}
+        <Text
+          color={
+            cooldownDelta < 0
+              ? 'green'
+              : cooldownDelta > 0
+                ? 'tomato'
+                : undefined
+          }
+        >
+          <Flex align="center" gap="1">
+            <ReloadIcon />
+            {Math.round(cooldown)}s
+          </Flex>
+        </Text>
+      </Flex>
+    </GenericTankComponentButton>
   );
 }

src/components/ModuleButtons/GenericTankComponentButton.tsx

@@ -12,22 +12,35 @@ interface GenericTankComponentButtonProps extends TankComponentButtonProps {
 export function GenericTankComponentButton({
   icon,
   iconStyles,
+  children,
   ...props
 }: GenericTankComponentButtonProps) {
   return (
-    <TankComponentButton disabled={props.disabled} {...props}>
-      <img
-        draggable={false}
-        src={icon}
+    <TankComponentButton {...props}>
+      <div
         style={{
-          width: 32,
-          height: 32,
-          position: 'absolute',
-          opacity: props.disabled ? 0.5 : 1,
-          transform: 'scale(0.75)',
-          ...iconStyles,
+          width: 48,
+          height: 40,
+          position: 'relative',
         }}
-      />
+      >
+        <img
+          draggable={false}
+          src={icon}
+          style={{
+            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>
   );
 }

src/components/ModuleButtons/TankComponentButton.tsx

@@ -18,19 +18,17 @@ export function TankComponentButton({
   last = false,
   rowChild,
   discriminator,
-  disabled,
   children,
   ...props
 }: TankComponentButtonProps) {
   return (
     <Button
-      disabled={disabled}
       radius="medium"
       color={selected ? undefined : 'gray'}
       variant={selected ? 'surface' : 'soft'}
       style={{
         padding: 0,
-        width: 48,
+        minWidth: 48,
         height: 40,
         position: 'relative',
         borderTopLeftRadius: first ? undefined : 0,
@@ -39,10 +37,8 @@ export function TankComponentButton({
         borderBottomRightRadius: last ? undefined : 0,
         margin: rowChild ? -0.5 : 'unset',
       }}
-      {...(props as unknown as ComponentProps<typeof Button>)}
+      {...props}
     >
-      {children}
-
       {discriminator !== undefined && (
         <Text
           size="1"
@@ -59,6 +55,8 @@ export function TankComponentButton({
           {discriminator}
         </Text>
       )}
+
+      {children}
     </Button>
   );
 }