feat: consumable timings

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

@@ -3,6 +3,7 @@ import { use } from 'react';
 import { ConsumableButton } from '../../../../../../../components/ModuleButtons/ConsumableButton';
 import { checkConsumableProvisionInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableProvisionInclusivity';
 import { consumableDefinitions } from '../../../../../../../core/blitzkrieg/consumableDefinitions';
+import { useEquipment } from '../../../../../../../core/blitzkrieg/useEquipment';
 import { useDuel } from '../../../../../../../stores/duel';
 import {
   mutateTankopediaTemporary,
@@ -22,6 +23,8 @@ export function Consumables() {
         protagonist.gun,
       ),
   );
+  const hasConsumableDeliverySystem = useEquipment(118);
+  const hasHighEndConsumables = useEquipment(101);
 
   return (
     <ConfigurationChildWrapper>
@@ -33,6 +36,14 @@ export function Consumables() {
 
           return (
             <ConsumableButton
+              duration={
+                typeof consumable.duration === 'number'
+                  ? consumable.duration * (hasHighEndConsumables ? 0.7 : 1)
+                  : undefined
+              }
+              cooldown={
+                consumable.cooldown * (hasConsumableDeliverySystem ? 0.85 : 1)
+              }
               key={consumable.id}
               first={index === 0}
               last={index === consumablesList.length - 1}

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useDelta } from '../../../../../../../hooks/useDelta';
 import { Info, InfoProps } from './Info';
 
 interface InfoWithDeltaProps extends InfoProps {
@@ -6,14 +6,10 @@ interface InfoWithDeltaProps extends InfoProps {
 }
 
 export function InfoWithDelta({ children, ...props }: InfoWithDeltaProps) {
-  const lastValue = useRef(children);
-
-  useEffect(() => {
-    lastValue.current = children;
-  });
+  const delta = useDelta(children);
 
   return (
-    <Info {...props} delta={children - lastValue.current}>
+    <Info {...props} delta={delta}>
       {children}
     </Info>
   );

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

@@ -1,4 +1,4 @@
-import { Heading } from '@radix-ui/themes';
+import { Flex, Heading } from '@radix-ui/themes';
 import { CamouflageButton } from '../../../../../../../components/ModuleButtons/CamouflageButton';
 import {
   mutateTankopediaTemporary,
@@ -6,23 +6,25 @@ import {
 } from '../../../../../../../stores/tankopedia';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
-export function Camouflage() {
+export function Miscellaneous() {
   const camouflage = useTankopediaTemporary((state) => state.camouflage);
 
   return (
     <ConfigurationChildWrapper>
-      <Heading size="4">Camouflage</Heading>
+      <Heading size="4">Miscellaneous</Heading>
 
-      <CamouflageButton
-        selected={camouflage}
-        first
-        last
-        onClick={() => {
-          mutateTankopediaTemporary((draft) => {
-            draft.camouflage = !camouflage;
-          });
-        }}
-      />
+      <Flex gap="2">
+        <CamouflageButton
+          selected={camouflage}
+          first
+          last
+          onClick={() => {
+            mutateTankopediaTemporary((draft) => {
+              draft.camouflage = !camouflage;
+            });
+          }}
+        />
+      </Flex>
     </ConfigurationChildWrapper>
   );
 }

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

@@ -8,10 +8,10 @@ import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { AntagonistBar } from './components/AntagonistBar';
 import { Characteristics } from './components/Characteristics';
-import { Camouflage } from './components/Characteristics/components/Camouflage';
 import { Consumables } from './components/Characteristics/components/Consumables';
 import { Crew } from './components/Characteristics/components/Crew';
 import { Equipments } from './components/Characteristics/components/Equipments';
+import { Miscellaneous } from './components/Characteristics/components/Miscellaneous';
 import { Modules } from './components/Characteristics/components/Modules';
 import { Provisions } from './components/Characteristics/components/Provisions';
 import { TankSandbox } from './components/Model/TankSandbox';
@@ -119,11 +119,11 @@ export default function Page({ params }: { params: { id: string } }) {
 
               <Flex direction="column" gap="4">
                 <Modules />
-                <Equipments />
                 <Crew />
+                <Equipments />
                 <Consumables />
                 <Provisions />
-                <Camouflage />
+                <Miscellaneous />
               </Flex>
             </Flex>