feat: consumables

src/components/ConsumablesManager.tsx

@@ -0,0 +1,73 @@
+import { Flex } from '@radix-ui/themes';
+import { ConsumableEntry } from '../core/blitzkrieg/consumableDefinitions';
+import { ConsumableButton } from './ModuleButtons/ConsumableButton';
+
+interface ConsumablesManagerProps {
+  consumables: ConsumableEntry[];
+  selected: number[];
+  onChange?: (consumables: number[]) => void;
+  disabled?: boolean;
+  timers?: boolean;
+  hasHighEndConsumables?: boolean;
+  hasConsumableDeliverySystem?: boolean;
+  cooldownBooster?: number;
+}
+
+export function ConsumablesManager({
+  consumables,
+  selected,
+  onChange,
+  disabled,
+  timers,
+  hasConsumableDeliverySystem,
+  cooldownBooster,
+  hasHighEndConsumables,
+}: ConsumablesManagerProps) {
+  return (
+    <Flex wrap="wrap">
+      {consumables.map((consumable, index) => {
+        const isSelected = selected.some((id) => id === consumable.id);
+
+        return (
+          <ConsumableButton
+            special={consumable.duration === undefined}
+            duration={
+              timers
+                ? consumable.duration === undefined
+                  ? undefined
+                  : consumable.duration * (hasHighEndConsumables ? 0.7 : 1)
+                : undefined
+            }
+            cooldown={
+              timers
+                ? consumable.cooldown *
+                  (hasConsumableDeliverySystem ? 0.85 : 1) *
+                  (1 - cooldownBooster! * 0.1)
+                : undefined
+            }
+            key={consumable.id}
+            first={index === 0}
+            last={index === consumables.length - 1}
+            rowChild
+            disabled={disabled && !isSelected}
+            consumable={consumable.id}
+            selected={isSelected}
+            onClick={() => {
+              if (!onChange) return;
+
+              const draft = [...selected];
+
+              if (draft.some((id) => id === consumable.id)) {
+                draft.splice(draft.indexOf(consumable.id), 1);
+              } else {
+                draft.push(consumable.id);
+              }
+
+              onChange(draft);
+            }}
+          />
+        );
+      })}
+    </Flex>
+  );
+}

src/components/ModuleButtons/ConsumableButton.tsx

@@ -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>
   );
 }