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>

src/components/ModuleButtons/CamouflageButton.tsx

@@ -1,17 +0,0 @@
-import { asset } from '../../core/blitzkrieg/asset';
-import { GenericTankComponentButton } from './GenericTankComponentButton';
-import { TankComponentButtonProps } from './TankComponentButton';
-
-export function CamouflageButton(props: TankComponentButtonProps) {
-  return (
-    <GenericTankComponentButton
-      icon={asset('icons/camo.webp')}
-      iconStyles={{
-        top: '50%',
-        left: '50%',
-        transform: 'translate(calc(-50% + 4px), calc(-50% + 4px))',
-      }}
-      {...props}
-    />
-  );
-}

src/components/ModuleButtons/GenericTankComponentButton.tsx

@@ -28,6 +28,7 @@ export function GenericTankComponentButton({
           draggable={false}
           src={icon}
           style={{
+            objectFit: 'contain',
             width: 32,
             height: 32,
             position: 'absolute',

src/components/ModuleButtons/TankComponentButton.tsx

@@ -10,6 +10,7 @@ export interface TankComponentButtonProps
   children?: ReactNode;
   discriminator?: ReactNode;
   disabled?: boolean;
+  banner?: string;
 }
 
 export function TankComponentButton({
@@ -19,6 +20,7 @@ export function TankComponentButton({
   rowChild,
   discriminator,
   children,
+  banner,
   ...props
 }: TankComponentButtonProps) {
   return (
@@ -36,9 +38,24 @@ export function TankComponentButton({
         borderBottomLeftRadius: first ? undefined : 0,
         borderBottomRightRadius: last ? undefined : 0,
         margin: rowChild ? -0.5 : 'unset',
+        overflow: 'hidden',
       }}
       {...props}
     >
+      {banner !== undefined && (
+        <div
+          style={{
+            position: 'absolute',
+            width: '200%',
+            height: 12,
+            backgroundColor: banner,
+            top: '50%',
+            left: '-50%',
+            transform: 'translateY(-50%) rotate(-22.5deg)',
+          }}
+        />
+      )}
+
       {discriminator !== undefined && (
         <Text
           size="1"

src/core/blitzkrieg/equipmentDefinitions.ts

@@ -25,5 +25,3 @@ export interface EquipmentDefinitions {
 export const equipmentDefinitions = fetchCdonLz4<EquipmentDefinitions>(
   asset('definitions/equipment.cdon.lz4'),
 );
-
-equipmentDefinitions.then(console.log);

src/stores/tankopedia.ts

@@ -69,6 +69,7 @@ interface TankopediaTemporary {
   consumables: number[];
   provisions: number[];
   camouflage: boolean;
+  cooldownBooster: number;
   shot?: Shot;
 }
 
@@ -178,6 +179,7 @@ export const useTankopediaTemporary = create<TankopediaTemporary>()(
     consumables: [],
     provisions: [],
     camouflage: false,
+    cooldownBooster: 0,
   })),
 );