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,66 +17,107 @@ 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) => {
-              return (
-                <ModuleButton
-                  key={thisTurret.id}
-                  selected={duel.protagonist.turret.id === thisTurret.id}
-                  type="module"
-                  module="turret"
-                  tier={thisTurret.tier}
-                  first={index === 0}
-                  last={index === duel.protagonist.tank.turrets.length - 1}
-                  rowChild
-                  onClick={() => {
-                    setDuel(
-                      produce<Duel>((draft) => {
-                        draft.protagonist.turret = thisTurret;
-                        draft.protagonist.gun = thisTurret.guns.at(-1)!;
-                        draft.protagonist.shell =
-                          thisTurret.guns.at(-1)!.shells[0];
-                      }),
-                    );
-                  }}
-                />
-              );
-            })}
-          </Flex>
 
-          <Flex>
+      <Flex gap="2">
-            {duel.protagonist.turret.guns.map((thisGun, index) => {
+        <Flex>
-              return (
+          {duel.protagonist.tank.turrets.map((thisTurret, index) => {
+            return (
+              <ModuleButton
+                key={thisTurret.id}
+                selected={duel.protagonist.turret.id === thisTurret.id}
+                type="module"
+                module="turret"
+                tier={thisTurret.tier}
+                first={index === 0}
+                last={index === duel.protagonist.tank.turrets.length - 1}
+                rowChild
+                onClick={() => {
+                  setDuel(
+                    produce<Duel>((draft) => {
+                      draft.protagonist.turret = thisTurret;
+                      draft.protagonist.gun = thisTurret.guns.at(-1)!;
+                      draft.protagonist.shell =
+                        thisTurret.guns.at(-1)!.shells[0];
+                    }),
+                  );
+                }}
+              />
+            );
+          })}
+        </Flex>
+
+        <Flex>
+          {duel.protagonist.turret.guns.map((thisGun, index) => {
+            return (
+              <ModuleButton
+                key={thisGun.id}
+                type="module"
+                module="gun"
+                tier={thisGun.tier}
+                selected={duel.protagonist.gun.id === thisGun.id}
+                first={index === 0}
+                last={index === duel.protagonist.turret.guns.length - 1}
+                rowChild
+                onClick={() => {
+                  setDuel(
+                    produce<Duel>((draft) => {
+                      draft.protagonist.gun = thisGun;
+                      draft.protagonist.shell = thisGun.shells[0];
+                    }),
+                  );
+                }}
+              />
+            );
+          })}
+        </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
-                  key={thisGun.id}
+                  type="equipment"
-                  type="module"
+                  equipment={equipment[0]}
-                  module="gun"
+                  first
-                  tier={thisGun.tier}
-                  selected={duel.protagonist.gun.id === thisGun.id}
-                  first={index === 0}
-                  last={index === duel.protagonist.turret.guns.length - 1}
                   rowChild
+                  selected={equipmentMatrix[rowIndex][columnIndex] === 0}
                   onClick={() => {
-                    setDuel(
+                    mutateTankopedia((draft) => {
-                      produce<Duel>((draft) => {
+                      draft.equipmentMatrix[rowIndex][columnIndex] = 0;
-                        draft.protagonist.gun = thisGun;
+                    });
-                        draft.protagonist.shell = thisGun.shells[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>
+
+      {/* <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',
   })),
 );