From 9f07d910b8cc1b7e12e8141620d4de24dddd3834 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 6 Apr 2024 10:06:59 -0500
Subject: [PATCH] feat: generalized equipment matrix manager

---
 src/app/tools/compare/page.tsx                | 119 +++++++-----------
 .../Characteristics/components/Equipment.tsx  |  61 ++-------
 src/components/EquipmentManager.tsx           |  64 ++++++++++
 3 files changed, 117 insertions(+), 127 deletions(-)
 create mode 100644 src/components/EquipmentManager.tsx

diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index c1fe9bc9c..bd49bad88 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -14,7 +14,7 @@ import {
 import { times } from 'lodash';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useCallback, useEffect, useMemo, useState } from 'react';
-import { EquipmentButton } from '../../../components/ModuleButtons/EquipmentButton';
+import { EquipmentManager } from '../../../components/EquipmentManager';
 import PageWrapper from '../../../components/PageWrapper';
 import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
 import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
@@ -32,6 +32,7 @@ import {
   useComparePersistent,
   useCompareTemporary,
 } from '../../../stores/compare';
+import { EquipmentMatrix } from '../../../stores/duel';
 import { TankSearch } from '../tankopedia/components/TankSearch';
 import { TankControl } from './components/TankControl';
 
@@ -346,7 +347,7 @@ export default function Page() {
                 <Table.Cell />
 
                 {members.map(({ equipmentMatrix, tank }, index) => {
-                  const equipmentRows =
+                  const equipmentPreset =
                     awaitedEquipmentDefinitions.presets[tank.equipment];
 
                   return (
@@ -414,81 +415,45 @@ export default function Page() {
                           </Popover.Trigger>
 
                           <Popover.Content>
-                            <Flex direction="column" gap="2">
-                              {equipmentRows.map((equipmentRow, rowIndex) => (
-                                <Flex gap="2" key={rowIndex}>
-                                  {equipmentRow.map(
-                                    (equipment, columnIndex) => (
-                                      <Flex key={columnIndex}>
-                                        <EquipmentButton
-                                          equipment={equipment[0]}
-                                          first
-                                          rowChild
-                                          selected={
-                                            equipmentMatrix[rowIndex][
-                                              columnIndex
-                                            ] === -1
-                                          }
-                                          onClick={() => {
-                                            mutateCompareTemporary((draft) => {
-                                              if (
-                                                draft.members[index]
-                                                  .equipmentMatrix[rowIndex][
-                                                  columnIndex
-                                                ] === -1
-                                              ) {
-                                                draft.members[
-                                                  index
-                                                ].equipmentMatrix[rowIndex][
-                                                  columnIndex
-                                                ] = 0;
-                                              } else {
-                                                draft.members[
-                                                  index
-                                                ].equipmentMatrix[rowIndex][
-                                                  columnIndex
-                                                ] = -1;
-                                              }
-                                            });
-                                          }}
-                                        />
-                                        <EquipmentButton
-                                          equipment={equipment[1]}
-                                          last
-                                          rowChild
-                                          selected={
-                                            equipmentMatrix[rowIndex][
-                                              columnIndex
-                                            ] === 1
-                                          }
-                                          onClick={() => {
-                                            mutateCompareTemporary((draft) => {
-                                              if (
-                                                draft.members[index]
-                                                  .equipmentMatrix[rowIndex][
-                                                  columnIndex
-                                                ] === 1
-                                              ) {
-                                                draft.members[
-                                                  index
-                                                ].equipmentMatrix[rowIndex][
-                                                  columnIndex
-                                                ] = 0;
-                                              } else {
-                                                draft.members[
-                                                  index
-                                                ].equipmentMatrix[rowIndex][
-                                                  columnIndex
-                                                ] = 1;
-                                              }
-                                            });
-                                          }}
-                                        />
-                                      </Flex>
-                                    ),
-                                  )}
-                                </Flex>
-                              ))}
+                            <Flex direction="column" gap="4">
+                              <EquipmentManager
+                                matrix={equipmentMatrix}
+                                preset={equipmentPreset}
+                                onChange={(matrix) => {
+                                  mutateCompareTemporary((draft) => {
+                                    draft.members[index].equipmentMatrix =
+                                      matrix;
+                                  });
+                                }}
+                              />
+
+                              <Flex justify="end" gap="2">
+                                <Button
+                                  color="red"
+                                  onClick={() => {
+                                    mutateCompareTemporary((draft) => {
+                                      draft.members[index].equipmentMatrix =
+                                        times(3, () =>
+                                          times(3, () => 0),
+                                        ) as EquipmentMatrix;
+                                    });
+                                  }}
+                                >
+                                  Reset
+                                </Button>
+                                <Button
+                                  onClick={() => {
+                                    mutateCompareTemporary((draft) => {
+                                      draft.members.forEach((member) => {
+                                        member.equipmentMatrix =
+                                          draft.members[index].equipmentMatrix;
+                                      });
+                                    });
+                                  }}
+                                >
+                                  Apply to all
+                                </Button>
+                              </Flex>
                             </Flex>
                           </Popover.Content>
                         </Popover.Root>
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx
index 36c8433e4..2eb7973ff 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx
@@ -1,6 +1,6 @@
 import { Button, Flex, Heading } from '@radix-ui/themes';
 import { use } from 'react';
-import { EquipmentButton } from '../../../../../../../components/ModuleButtons/EquipmentButton';
+import { EquipmentManager } from '../../../../../../../components/EquipmentManager';
 import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equipmentDefinitions';
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -8,7 +8,7 @@ import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 export function Equipment() {
   const protagonist = useDuel((state) => state.protagonist!);
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
-  const equipmentRows =
+  const equipmentPreset =
     awaitedEquipmentDefinitions.presets[protagonist.tank.equipment];
   const equipmentMatrix = useDuel(
     (state) => state.protagonist!.equipmentMatrix,
@@ -35,54 +35,15 @@ export function Equipment() {
         </Button>
       </Flex>
 
-      <Flex direction="column" gap="2">
-        {equipmentRows.map((equipmentRow, rowIndex) => (
-          <Flex gap="2" key={rowIndex}>
-            {equipmentRow.map((equipment, columnIndex) => (
-              <Flex key={columnIndex}>
-                <EquipmentButton
-                  equipment={equipment[0]}
-                  first
-                  rowChild
-                  selected={equipmentMatrix[rowIndex][columnIndex] === -1}
-                  onClick={() => {
-                    mutateDuel((draft) => {
-                      if (equipmentMatrix[rowIndex][columnIndex] === -1) {
-                        draft.protagonist!.equipmentMatrix[rowIndex][
-                          columnIndex
-                        ] = 0;
-                      } else {
-                        draft.protagonist!.equipmentMatrix[rowIndex][
-                          columnIndex
-                        ] = -1;
-                      }
-                    });
-                  }}
-                />
-                <EquipmentButton
-                  equipment={equipment[1]}
-                  last
-                  rowChild
-                  selected={equipmentMatrix[rowIndex][columnIndex] === 1}
-                  onClick={() => {
-                    mutateDuel((draft) => {
-                      if (equipmentMatrix[rowIndex][columnIndex] === 1) {
-                        draft.protagonist!.equipmentMatrix[rowIndex][
-                          columnIndex
-                        ] = 0;
-                      } else {
-                        draft.protagonist!.equipmentMatrix[rowIndex][
-                          columnIndex
-                        ] = 1;
-                      }
-                    });
-                  }}
-                />
-              </Flex>
-            ))}
-          </Flex>
-        ))}
-      </Flex>
+      <EquipmentManager
+        matrix={equipmentMatrix}
+        preset={equipmentPreset}
+        onChange={(matrix) => {
+          mutateDuel((draft) => {
+            draft.protagonist!.equipmentMatrix = matrix;
+          });
+        }}
+      />
     </ConfigurationChildWrapper>
   );
 }
diff --git a/src/components/EquipmentManager.tsx b/src/components/EquipmentManager.tsx
new file mode 100644
index 000000000..b132222b3
--- /dev/null
+++ b/src/components/EquipmentManager.tsx
@@ -0,0 +1,64 @@
+import { Flex } from '@radix-ui/themes';
+import { cloneDeep } from 'lodash';
+import { EquipmentPreset } from '../core/blitzkrieg/equipmentDefinitions';
+import { EquipmentMatrix } from '../stores/duel';
+import { EquipmentButton } from './ModuleButtons/EquipmentButton';
+
+interface EquipmentManagerProps {
+  preset: EquipmentPreset;
+  matrix: EquipmentMatrix;
+  onChange: (matrix: EquipmentMatrix) => void;
+}
+
+export function EquipmentManager({
+  preset,
+  matrix,
+  onChange,
+}: EquipmentManagerProps) {
+  return (
+    <Flex direction="column" gap="2">
+      {preset.map((equipmentRow, rowIndex) => (
+        <Flex gap="2" key={rowIndex}>
+          {equipmentRow.map((equipment, columnIndex) => (
+            <Flex key={columnIndex}>
+              <EquipmentButton
+                equipment={equipment[0]}
+                first
+                rowChild
+                selected={matrix[rowIndex][columnIndex] === -1}
+                onClick={() => {
+                  const draft = cloneDeep(matrix);
+
+                  if (draft[rowIndex][columnIndex] === -1) {
+                    draft[rowIndex][columnIndex] = 0;
+                  } else {
+                    draft[rowIndex][columnIndex] = -1;
+                  }
+
+                  onChange(draft);
+                }}
+              />
+              <EquipmentButton
+                equipment={equipment[1]}
+                last
+                rowChild
+                selected={matrix[rowIndex][columnIndex] === 1}
+                onClick={() => {
+                  const draft = cloneDeep(matrix);
+
+                  if (draft[rowIndex][columnIndex] === 1) {
+                    draft[rowIndex][columnIndex] = 0;
+                  } else {
+                    draft[rowIndex][columnIndex] = 1;
+                  }
+
+                  onChange(draft);
+                }}
+              />
+            </Flex>
+          ))}
+        </Flex>
+      ))}
+    </Flex>
+  );
+}