From a1f6bbdf1fae36919c9eecbca58e94219a869b0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 16 Jan 2024 17:31:20 -0600
Subject: [PATCH] feat: equipment icons

---
 .../tankopedia/[id]/components/Configure.tsx  | 30 ++++++++++++++++++-
 src/components/ModuleButton.tsx               | 12 ++++++--
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Configure.tsx b/src/app/tools/tankopedia/[id]/components/Configure.tsx
index bb3b33d7d..1f65e7ac4 100644
--- a/src/app/tools/tankopedia/[id]/components/Configure.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Configure.tsx
@@ -1,7 +1,8 @@
 import { Flex, Heading } from '@radix-ui/themes';
 import { produce } from 'immer';
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, use } from 'react';
 import { ModuleButton } from '../../../../../components/ModuleButton';
+import { equipmentDefinitions } from '../../../../../core/blitzkrieg/equipmentDefinitions';
 import { Duel } from '../page';
 
 interface ConfigureProps {
@@ -10,6 +11,10 @@ interface ConfigureProps {
 }
 
 export function Configure({ duel, setDuel }: ConfigureProps) {
+  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
+  const equipmentRows =
+    awaitedEquipmentDefinitions.presets[duel.protagonist.tank.equipment];
+
   return (
     <Flex gap="6" direction="column">
       <Heading>Configure</Heading>
@@ -85,6 +90,29 @@ export function Configure({ duel, setDuel }: ConfigureProps) {
 
       <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>
   );
diff --git a/src/components/ModuleButton.tsx b/src/components/ModuleButton.tsx
index 0014953c8..486e7aaeb 100644
--- a/src/components/ModuleButton.tsx
+++ b/src/components/ModuleButton.tsx
@@ -18,13 +18,17 @@ type ModuleButtonProps = Omit<ComponentProps<typeof Button>, 'type'> & {
         type: 'shell';
         shell: string;
       }
+    | {
+        type: 'equipment';
+        equipment: number;
+      }
   );
 
 export function ModuleButton({
   selected,
   style,
-  first = true,
-  last = true,
+  first = false,
+  last = false,
   rowChild,
   ...props
 }: ModuleButtonProps) {
@@ -51,7 +55,9 @@ export function ModuleButton({
         src={asset(
           props.type === 'module'
             ? `icons/modules/${props.module}.webp`
-            : `icons/shells/${props.shell}.webp`,
+            : props.type === 'shell'
+              ? `icons/shells/${props.shell}.webp`
+              : `icons/equipment/${props.equipment}.webp`,
         )}
         style={{
           width: 32,