From 2f2996a40c82aa62f658aea53e8954554ae87a09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:52:41 -0500
Subject: [PATCH] feat: equipment popover

---
 src/app/tools/compare/page.tsx            | 161 +++++++++++++++++++---
 src/components/EquipmentMatrixCompact.tsx |  61 --------
 2 files changed, 144 insertions(+), 78 deletions(-)
 delete mode 100644 src/components/EquipmentMatrixCompact.tsx

diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index d676e4577..130c043e6 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -6,13 +6,15 @@ import {
   Dialog,
   Flex,
   Heading,
+  Popover,
   SegmentedControl,
   Table,
   Text,
 } from '@radix-ui/themes';
+import { times } from 'lodash';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useCallback, useEffect, useMemo, useState } from 'react';
-import { EquipmentMatrixCompact } from '../../../components/EquipmentMatrixCompact';
+import { EquipmentButton } from '../../../components/ModuleButtons/EquipmentButton';
 import PageWrapper from '../../../components/PageWrapper';
 import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
 import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
@@ -343,22 +345,147 @@ export default function Page() {
               <Table.Row>
                 <Table.Cell />
 
-                {members.map(({ equipmentMatrix }) => (
-                  <Table.Cell>
-                    <Flex
-                      align="center"
-                      justify="between"
-                      style={{
-                        width: '100%',
-                        height: '100%',
-                      }}
-                    >
-                      <EquipmentMatrixCompact
-                        equipmentMatrix={equipmentMatrix}
-                      />
-                    </Flex>
-                  </Table.Cell>
-                ))}
+                {members.map(({ equipmentMatrix, tank }) => {
+                  const equipmentRows =
+                    awaitedEquipmentDefinitions.presets[tank.equipment];
+
+                  return (
+                    <Table.Cell>
+                      <Flex
+                        align="center"
+                        justify="between"
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                        }}
+                      >
+                        <Popover.Root>
+                          <Popover.Trigger>
+                            <Button variant="ghost" radius="large">
+                              <Flex gap="1" direction="column">
+                                {times(3, (y) => (
+                                  <Flex
+                                    style={{
+                                      gap: 6,
+                                    }}
+                                  >
+                                    {times(3, (x) => {
+                                      const equipment = equipmentMatrix[y][x];
+
+                                      return (
+                                        <Flex
+                                          style={{
+                                            gap: 2,
+                                          }}
+                                        >
+                                          <div
+                                            style={{
+                                              width: 4,
+                                              height: 8,
+                                              backgroundColor:
+                                                equipment === -1
+                                                  ? theme.colors
+                                                      .textLowContrast_green
+                                                  : theme.colors
+                                                      .textLowContrast,
+                                              borderRadius: 2,
+                                            }}
+                                          />
+                                          <div
+                                            style={{
+                                              width: 4,
+                                              height: 8,
+                                              backgroundColor:
+                                                equipment === 1
+                                                  ? theme.colors
+                                                      .textLowContrast_green
+                                                  : theme.colors
+                                                      .textLowContrast,
+                                              borderRadius: 2,
+                                            }}
+                                          />
+                                        </Flex>
+                                      );
+                                    })}
+                                  </Flex>
+                                ))}
+                              </Flex>
+                            </Button>
+                          </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={() => {
+                                            // 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>
+                          </Popover.Content>
+                        </Popover.Root>
+                      </Flex>
+                    </Table.Cell>
+                  );
+                })}
               </Table.Row>
             </Table.Body>
 
diff --git a/src/components/EquipmentMatrixCompact.tsx b/src/components/EquipmentMatrixCompact.tsx
deleted file mode 100644
index d4e5cabe9..000000000
--- a/src/components/EquipmentMatrixCompact.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Button, Flex } from '@radix-ui/themes';
-import { times } from 'lodash';
-import { theme } from '../stitches.config';
-import { EquipmentMatrix } from '../stores/duel';
-
-interface EquipmentMatrixCompactProps {
-  equipmentMatrix: EquipmentMatrix;
-}
-
-export function EquipmentMatrixCompact({
-  equipmentMatrix,
-}: EquipmentMatrixCompactProps) {
-  return (
-    <Button variant="ghost">
-      <Flex gap="1" direction="column">
-        {times(3, (y) => (
-          <Flex
-            style={{
-              gap: 6,
-            }}
-          >
-            {times(3, (x) => {
-              const equipment = equipmentMatrix[y][x];
-
-              return (
-                <Flex
-                  style={{
-                    gap: 2,
-                  }}
-                >
-                  <div
-                    style={{
-                      width: 4,
-                      height: 8,
-                      backgroundColor:
-                        equipment === -1
-                          ? theme.colors.textLowContrast_green
-                          : theme.colors.textLowContrast,
-                      borderRadius: 2,
-                    }}
-                  />
-                  <div
-                    style={{
-                      width: 4,
-                      height: 8,
-                      backgroundColor:
-                        equipment === 1
-                          ? theme.colors.textLowContrast_green
-                          : theme.colors.textLowContrast,
-                      borderRadius: 2,
-                    }}
-                  />
-                </Flex>
-              );
-            })}
-          </Flex>
-        ))}
-      </Flex>
-    </Button>
-  );
-}