feat: equipment ui

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

@@ -3,6 +3,9 @@ import { produce } from 'immer';
 import { Dispatch, SetStateAction, use } from 'react';
 import { ModuleButton } from '../../../../../components/ModuleButton';
 import { equipmentDefinitions } from '../../../../../core/blitzkrieg/equipmentDefinitions';
+import mutateTankopedia, {
+  useTankopedia,
+} from '../../../../../stores/tankopedia';
 import { Duel } from '../page';
 
 interface ConfigureProps {
@@ -14,13 +17,14 @@ export function Configure({ duel, setDuel }: ConfigureProps) {
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const equipmentRows =
     awaitedEquipmentDefinitions.presets[duel.protagonist.tank.equipment];
+  const equipmentMatrix = useTankopedia((state) => state.equipmentMatrix);
 
   return (
-    <Flex gap="6" direction="column">
+    <Flex gap="4" direction="column">
       <Heading>Configure</Heading>
 
-      <Flex gap="4" direction="column">
+      <Heading size="4">Modules</Heading>
-        <Heading size="5">Modules</Heading>
+
       <Flex gap="2">
         <Flex>
           {duel.protagonist.tank.turrets.map((thisTurret, index) => {
@@ -74,6 +78,46 @@ export function Configure({ duel, setDuel }: ConfigureProps) {
           })}
         </Flex>
       </Flex>
+
+      <Heading size="4">Equipment</Heading>
+
+      <Flex direction="column" gap="2">
+        {equipmentRows.map((equipmentRow, rowIndex) => (
+          <Flex gap="2">
+            {equipmentRow.map((equipment, columnIndex) => (
+              <Flex>
+                <ModuleButton
+                  type="equipment"
+                  equipment={equipment[0]}
+                  first
+                  rowChild
+                  selected={equipmentMatrix[rowIndex][columnIndex] === 0}
+                  onClick={() => {
+                    mutateTankopedia((draft) => {
+                      draft.equipmentMatrix[rowIndex][columnIndex] = 0;
+                    });
+                  }}
+                />
+                <ModuleButton
+                  type="equipment"
+                  equipment={equipment[1]}
+                  last
+                  rowChild
+                  selected={equipmentMatrix[rowIndex][columnIndex] === 1}
+                  onClick={() => {
+                    mutateTankopedia((draft) => {
+                      draft.equipmentMatrix[rowIndex][columnIndex] = 1;
+                    });
+                  }}
+                />
+              </Flex>
+            ))}
+          </Flex>
+        ))}
+      </Flex>
+
+      {/* <Flex gap="4" direction="column">
+        <Heading size="5">Modules</Heading>
       </Flex>
 
       <Flex gap="4" direction="column">
@@ -86,34 +130,7 @@ export function Configure({ duel, setDuel }: ConfigureProps) {
 
       <Flex gap="4" direction="column">
         <Heading size="5">Provisions</Heading>
-      </Flex>
+      </Flex> */}
-
-      <Flex gap="4" direction="column">
-        <Heading size="5">Equipment</Heading>
-
-        <Flex direction="column" gap="2">
-          {equipmentRows.map((equipmentRow) => (
-            <Flex gap="2">
-              {equipmentRow.map((equipment) => (
-                <Flex>
-                  <ModuleButton
-                    type="equipment"
-                    equipment={equipment[0]}
-                    first
-                    rowChild
-                  />
-                  <ModuleButton
-                    type="equipment"
-                    equipment={equipment[1]}
-                    last
-                    rowChild
-                  />
-                </Flex>
-              ))}
-            </Flex>
-          ))}
-        </Flex>
-      </Flex>
     </Flex>
   );
 }

src/stores/tankopedia.ts

@@ -43,6 +43,7 @@ interface Tankopedia {
       greenPenetration: boolean;
     };
   };
+  equipmentMatrix: (0 | 1)[][];
   mode: TankopediaMode;
 }
 
@@ -70,7 +71,11 @@ export const useTankopedia = create<Tankopedia>()(
         greenPenetration: false,
       },
     },
-    areTanksAssigned: false,
+    equipmentMatrix: [
+      [1, 0, 0],
+      [0, 1, 1],
+      [0, 1, 0],
+    ],
     mode: 'model',
   })),
 );