feat: equipment icons

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

@@ -0,0 +1,91 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { produce } from 'immer';
+import { Dispatch, SetStateAction } from 'react';
+import { ModuleButton } from '../../../../../components/ModuleButton';
+import { Duel } from '../page';
+
+interface ConfigureProps {
+  duel: Duel;
+  setDuel: Dispatch<SetStateAction<Duel>>;
+}
+
+export function Configure({ duel, setDuel }: ConfigureProps) {
+  return (
+    <Flex gap="6" direction="column">
+      <Heading>Configure</Heading>
+
+      <Flex gap="4" direction="column">
+        <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>
+            {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>
+      </Flex>
+
+      <Flex gap="4" direction="column">
+        <Heading size="5">Camouflage</Heading>
+      </Flex>
+
+      <Flex gap="4" direction="column">
+        <Heading size="5">Consumables</Heading>
+      </Flex>
+
+      <Flex gap="4" direction="column">
+        <Heading size="5">Provisions</Heading>
+      </Flex>
+
+      <Flex gap="4" direction="column">
+        <Heading size="5">Equipment</Heading>
+      </Flex>
+    </Flex>
+  );
+}

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

@@ -1,67 +0,0 @@
-import { Flex } from '@radix-ui/themes';
-import { produce } from 'immer';
-import { Dispatch, SetStateAction } from 'react';
-import { ModuleButton } from '../../../../../components/ModuleButton';
-import { Duel } from '../page';
-
-interface ModulesProps {
-  duel: Duel;
-  setDuel: Dispatch<SetStateAction<Duel>>;
-}
-
-export function Modules({ duel, setDuel }: ModulesProps) {
-  return (
-    <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>
-        {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>
-  );
-}

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

@@ -7,8 +7,8 @@ import PageWrapper from '../../../../components/PageWrapper';
 import { tankDefinitions } from '../../../../core/blitzkrieg/tankDefinitions';
 import mutateTankopedia, { DuelMember } from '../../../../stores/tankopedia';
 import { AntagonistBar } from './components/AntagonistBar';
+import { Configure } from './components/Configure';
 import { TankDisplay } from './components/Model/TankDisplay';
-import { Modules } from './components/Modules';
 import { Title } from './components/Title';
 
 export interface Duel {
@@ -83,8 +83,9 @@ export default function Page({ params }: { params: { id: string } }) {
           <Title duel={duel} />
           <TankDisplay duel={duel} />
           <AntagonistBar duel={duel} setDuel={setDuel} />
-          <Modules duel={duel} setDuel={setDuel} />
         </Flex>
+
+        <Configure duel={duel} setDuel={setDuel} />
       </Flex>
     </PageWrapper>
   );

src/core/blitzkrieg/equipmentDefinitions.ts

@@ -0,0 +1,22 @@
+import { asset } from './asset';
+
+type EquipmentOptions = [number, number];
+
+type EquipmentRow = [EquipmentOptions, EquipmentOptions, EquipmentOptions];
+
+type EquipmentRows = [EquipmentRow, EquipmentRow, EquipmentRow];
+
+interface EquipmentDefinitions {
+  presets: {
+    [key: string]: EquipmentRows;
+  };
+  equipments: {
+    [key: number]: {
+      name: string;
+    };
+  };
+}
+
+export const equipmentDefinitions = fetch(asset('definitions/equipment.json'), {
+  cache: 'no-cache',
+}).then(async (response) => response.json() as Promise<EquipmentDefinitions>);

src/core/blitzkrieg/tankDefinitions.ts

@@ -24,6 +24,7 @@ export interface TankDefinition {
   turrets: TurretDefinition[];
   price: TankDefinitionPrice;
   camouflage: { still: number; moving: number; firing: number };
+  equipment: string;
 }
 export type TankDefinitionPrice =
   | { type: 'credits'; value: number }