feat: provisions

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

@@ -1,8 +1,8 @@
 import { Flex, Heading, Text } from '@radix-ui/themes';
 import { use } from 'react';
 import { ModuleButton } from '../../../../../../../components/ModuleButton';
-import { checkConsumableInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableInclusivity';
-import { consumableDefinitions } from '../../../../../../../core/blitzkrieg/consumablesDefinitions';
+import { checkConsumableProvisionInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableInclusivity';
+import { consumableDefinitions } from '../../../../../../../core/blitzkrieg/consumableDefinitions';
 import { useDuel } from '../../../../../../../stores/duel';
 import {
   mutateTankopediaTemporary,
@@ -15,7 +15,11 @@ export function Consumables() {
   const consumables = useTankopediaTemporary((state) => state.consumables);
   const consumablesList = Object.values(awaitedConsumableDefinitions).filter(
     (consumable) =>
-      checkConsumableInclusivity(consumable, protagonist.tank, protagonist.gun),
+      checkConsumableProvisionInclusivity(
+        consumable,
+        protagonist.tank,
+        protagonist.gun,
+      ),
   );
 
   return (

src/app/tools/tankopedia/[id]/components/Configure/components/Provisions.tsx

@@ -0,0 +1,63 @@
+import { Flex, Heading, Text } from '@radix-ui/themes';
+import { use } from 'react';
+import { ModuleButton } from '../../../../../../../components/ModuleButton';
+import { checkConsumableProvisionInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableInclusivity';
+import { provisionDefinitions } from '../../../../../../../core/blitzkrieg/provisionDefinitions';
+import { useDuel } from '../../../../../../../stores/duel';
+import {
+  mutateTankopediaTemporary,
+  useTankopediaTemporary,
+} from '../../../../../../../stores/tankopedia';
+
+export function Provisions() {
+  const protagonist = useDuel((state) => state.protagonist!);
+  const awaitedProvisionDefinitions = use(provisionDefinitions);
+  const provisions = useTankopediaTemporary((state) => state.provisions);
+  const provisionsList = Object.values(awaitedProvisionDefinitions).filter(
+    (provision) =>
+      checkConsumableProvisionInclusivity(
+        provision,
+        protagonist.tank,
+        protagonist.gun,
+      ),
+  );
+
+  return (
+    <Flex gap="2" direction="column">
+      <Heading size="4">
+        Provisions <Text color="gray">(max {protagonist.tank.provisions})</Text>
+      </Heading>
+
+      <Flex>
+        {provisionsList.map((provision, index) => {
+          const selected = provisions.includes(provision.id);
+
+          return (
+            <ModuleButton
+              first={index === 0}
+              last={index === provisionsList.length - 1}
+              rowChild
+              type="provision"
+              disabled={
+                protagonist.tank.provisions === provisions.length && !selected
+              }
+              provision={provision.id}
+              selected={selected}
+              onClick={() => {
+                mutateTankopediaTemporary((draft) => {
+                  if (selected) {
+                    draft.provisions = draft.provisions.filter(
+                      (id) => id !== provision.id,
+                    );
+                  } else {
+                    draft.provisions.push(provision.id);
+                  }
+                });
+              }}
+            />
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/components/Configure/index.tsx

@@ -3,6 +3,7 @@ import { Camouflage } from './components/Camouflage';
 import { Consumables } from './components/Consumables';
 import { Equipments } from './components/Equipments';
 import { Modules } from './components/Modules';
+import { Provisions } from './components/Provisions';
 
 export function Configure() {
   return (
@@ -14,13 +15,10 @@ export function Configure() {
         <Equipments />
         <Consumables />
         <Camouflage />
+        <Provisions />
       </Flex>
 
       {/*
-      <Flex gap="4" direction="column">
-        <Heading size="5">Camouflage</Heading>
-      </Flex>
-
       <Flex gap="4" direction="column">
         <Heading size="5">Provisions</Heading>
       </Flex> */}