From c1253e81212203a9a1102d6afdc4dd7572cc46b7 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:28:58 -0500
Subject: [PATCH] feat: equipment matrix visual start

---
 src/app/tools/compare/page.tsx           | 28 ++++++++++++++++++++++--
 src/components/EquipmentMatrixCompact.ts | 12 +++++++++-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 2a4795e5c..d676e4577 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -12,6 +12,7 @@ import {
 } from '@radix-ui/themes';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useCallback, useEffect, useMemo, useState } from 'react';
+import { EquipmentMatrixCompact } from '../../../components/EquipmentMatrixCompact';
 import PageWrapper from '../../../components/PageWrapper';
 import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
 import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
@@ -230,8 +231,8 @@ export default function Page() {
             <Heading size="4">{children}</Heading>
           </Table.ColumnHeaderCell>
 
-          {members.map(() => (
-            <Table.ColumnHeaderCell />
+          {members.map((_, index) => (
+            <Table.ColumnHeaderCell key={index} />
           ))}
         </Table.Row>
       </Table.Header>
@@ -338,6 +339,29 @@ export default function Page() {
               </Table.Row>
             </Table.Header>
 
+            <Table.Body>
+              <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>
+                ))}
+              </Table.Row>
+            </Table.Body>
+
             <Title>Fire</Title>
             <Table.Body>
               <Row name="DPM" value="dpm" decimals={0} />
diff --git a/src/components/EquipmentMatrixCompact.ts b/src/components/EquipmentMatrixCompact.ts
index 76e784074..c0eb37a27 100644
--- a/src/components/EquipmentMatrixCompact.ts
+++ b/src/components/EquipmentMatrixCompact.ts
@@ -1 +1,11 @@
-export function EquipmentMatrixCompact() {}
+import { EquipmentMatrix } from '../stores/duel';
+
+interface EquipmentMatrixCompactProps {
+  equipmentMatrix: EquipmentMatrix;
+}
+
+export function EquipmentMatrixCompact({
+  equipmentMatrix,
+}: EquipmentMatrixCompactProps) {
+  return null;
+}