feat: consumables

src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx

@@ -23,6 +23,9 @@ export function Consumables() {
         protagonist.gun,
       ),
   );
+  const cooldownBooster = useTankopediaTemporary(
+    (state) => state.cooldownBooster,
+  );
   const hasConsumableDeliverySystem = useEquipment(118);
   const hasHighEndConsumables = useEquipment(101);
 
@@ -42,7 +45,9 @@ export function Consumables() {
                   : undefined
               }
               cooldown={
-                consumable.cooldown * (hasConsumableDeliverySystem ? 0.85 : 1)
+                consumable.cooldown *
+                (hasConsumableDeliverySystem ? 0.85 : 1) *
+                (1 - cooldownBooster * 0.1)
               }
               key={consumable.id}
               first={index === 0}

src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx

@@ -1,5 +1,6 @@
 import { Flex, Heading } from '@radix-ui/themes';
-import { CamouflageButton } from '../../../../../../../components/ModuleButtons/CamouflageButton';
+import { GenericTankComponentButton } from '../../../../../../../components/ModuleButtons/GenericTankComponentButton';
+import { asset } from '../../../../../../../core/blitzkrieg/asset';
 import {
   mutateTankopediaTemporary,
   useTankopediaTemporary,
@@ -8,14 +9,23 @@ import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 export function Miscellaneous() {
   const camouflage = useTankopediaTemporary((state) => state.camouflage);
+  const cooldownBooster = useTankopediaTemporary(
+    (state) => state.cooldownBooster,
+  );
 
   return (
     <ConfigurationChildWrapper>
       <Heading size="4">Miscellaneous</Heading>
 
       <Flex gap="2">
-        <CamouflageButton
+        <GenericTankComponentButton
+          icon={asset('icons/camo.webp')}
           selected={camouflage}
+          iconStyles={{
+            top: '50%',
+            left: '50%',
+            transform: 'translate(calc(-50% + 4px), calc(-50% + 4px))',
+          }}
           first
           last
           onClick={() => {
@@ -24,6 +34,31 @@ export function Miscellaneous() {
             });
           }}
         />
+
+        <GenericTankComponentButton
+          icon={asset('icons/boosters/equipment.webp')}
+          selected={cooldownBooster > 0}
+          first
+          last
+          banner={
+            cooldownBooster === 0
+              ? undefined
+              : cooldownBooster === 1
+                ? '#afb0abc0'
+                : cooldownBooster === 2
+                  ? '#5f72cbc0'
+                  : '#9b3cc0c0'
+          }
+          iconStyles={{
+            transform: 'translate(-50%, -50%) scale(0.8)',
+          }}
+          onClick={() => {
+            mutateTankopediaTemporary((draft) => {
+              draft.cooldownBooster++;
+              if (draft.cooldownBooster === 4) draft.cooldownBooster = 0;
+            });
+          }}
+        />
       </Flex>
     </ConfigurationChildWrapper>
   );

src/app/tools/tankopedia/[id]/page.tsx

@@ -119,9 +119,9 @@ export default function Page({ params }: { params: { id: string } }) {
 
               <Flex direction="column" gap="4">
                 <Modules />
-                <Crew />
                 <Equipments />
                 <Consumables />
+                <Crew />
                 <Provisions />
                 <Miscellaneous />
               </Flex>