feat: consumable max

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

@@ -21,6 +21,10 @@ export function Configure() {
     (state) => state.equipmentMatrix,
   );
   const consumables = useTankopediaTemporary((state) => state.consumables);
+  const consumablesList = Object.values(awaitedConsumableDefinitions).filter(
+    (consumable) =>
+      checkConsumableInclusivity(consumable, protagonist.tank, protagonist.gun),
+  );
 
   return (
     <Flex gap="4" direction="column">
@@ -94,10 +98,14 @@ export function Configure() {
                       equipment={equipment[0]}
                       first
                       rowChild
-                      selected={equipmentMatrix[rowIndex][columnIndex] === 0}
+                      selected={equipmentMatrix[rowIndex][columnIndex] === -1}
                       onClick={() => {
                         mutateTankopediaTemporary((draft) => {
-                          draft.equipmentMatrix[rowIndex][columnIndex] = 0;
+                          if (equipmentMatrix[rowIndex][columnIndex] === -1) {
+                            draft.equipmentMatrix[rowIndex][columnIndex] = 0;
+                          } else {
+                            draft.equipmentMatrix[rowIndex][columnIndex] = -1;
+                          }
                         });
                       }}
                     />
@@ -109,7 +117,11 @@ export function Configure() {
                       selected={equipmentMatrix[rowIndex][columnIndex] === 1}
                       onClick={() => {
                         mutateTankopediaTemporary((draft) => {
-                          draft.equipmentMatrix[rowIndex][columnIndex] = 1;
+                          if (equipmentMatrix[rowIndex][columnIndex] === 1) {
+                            draft.equipmentMatrix[rowIndex][columnIndex] = 0;
+                          } else {
+                            draft.equipmentMatrix[rowIndex][columnIndex] = 1;
+                          }
                         });
                       }}
                     />
@@ -121,36 +133,41 @@ export function Configure() {
         </Flex>
 
         <Flex gap="2" direction="column">
-          <Heading size="4">Consumables</Heading>
+          <Heading size="4">
+            Consumables (max {protagonist.tank.consumables})
+          </Heading>
 
-          {Object.values(awaitedConsumableDefinitions)
-            .filter((consumable) =>
-              checkConsumableInclusivity(
-                consumable,
-                protagonist.tank,
-                protagonist.gun,
-              ),
-            )
-            .map((consumable) => (
-              <ModuleButton
-                first
-                last
-                type="consumable"
-                consumable={consumable.id}
-                selected={consumables.includes(consumable.id)}
-                onClick={() => {
-                  mutateTankopediaTemporary((draft) => {
-                    if (draft.consumables.includes(consumable.id)) {
-                      draft.consumables = draft.consumables.filter(
-                        (id) => id !== consumable.id,
-                      );
-                    } else {
-                      draft.consumables.push(consumable.id);
-                    }
-                  });
-                }}
-              />
-            ))}
+          <Flex>
+            {consumablesList.map((consumable, index) => {
+              const selected = consumables.includes(consumable.id);
+
+              return (
+                <ModuleButton
+                  first={index === 0}
+                  last={index === consumablesList.length - 1}
+                  rowChild
+                  type="consumable"
+                  disabled={
+                    protagonist.tank.consumables === consumables.length &&
+                    !selected
+                  }
+                  consumable={consumable.id}
+                  selected={selected}
+                  onClick={() => {
+                    mutateTankopediaTemporary((draft) => {
+                      if (selected) {
+                        draft.consumables = draft.consumables.filter(
+                          (id) => id !== consumable.id,
+                        );
+                      } else {
+                        draft.consumables.push(consumable.id);
+                      }
+                    });
+                  }}
+                />
+              );
+            })}
+          </Flex>
         </Flex>
       </Flex>
 

src/components/ModuleButton.tsx

@@ -72,6 +72,7 @@ export function ModuleButton({
       {...(props as unknown as ComponentProps<typeof Button>)}
     >
       <img
+        draggable={false}
         src={asset(
           props.type === 'module'
             ? `icons/modules/${props.module}.webp`

src/core/blitz/readYAML.ts

@@ -3,6 +3,5 @@ import { parse } from 'yaml';
 
 export async function readYAML<Type>(file: string) {
   const yaml = (await readFile(file)).toString();
-
   return parse(yaml) as Type;
 }

src/core/blitzkrieg/tankDefinitions.ts

@@ -19,6 +19,7 @@ export interface TankDefinition {
   name: string;
   name_full?: string;
   tree_type: TreeTypeString;
+  consumables: number;
   tier: Tier;
   type: TankType;
   testing?: boolean;

src/stores/tankopedia.ts

@@ -46,7 +46,7 @@ interface TankopediaPersistent {
   };
 }
 
-export type EquipmentMatrix = (0 | 1)[][];
+export type EquipmentMatrix = (-1 | 0 | 1)[][];
 
 interface TankopediaTemporary {
   model: {
@@ -100,9 +100,9 @@ export const useTankopediaTemporary = create<TankopediaTemporary>()(
       },
     },
     equipmentMatrix: [
-      [1, 0, 0],
-      [0, 1, 1],
-      [0, 1, 0],
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0],
     ],
     mode: 'model',
     consumables: [],