From 48603b918fece675e78039220b0852948c37c8bf 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:40:14 -0500
Subject: [PATCH] feat: equipment preview

---
 src/components/EquipmentMatrixCompact.ts  | 11 ----
 src/components/EquipmentMatrixCompact.tsx | 61 +++++++++++++++++++++++
 2 files changed, 61 insertions(+), 11 deletions(-)
 delete mode 100644 src/components/EquipmentMatrixCompact.ts
 create mode 100644 src/components/EquipmentMatrixCompact.tsx

diff --git a/src/components/EquipmentMatrixCompact.ts b/src/components/EquipmentMatrixCompact.ts
deleted file mode 100644
index c0eb37a27..000000000
--- a/src/components/EquipmentMatrixCompact.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { EquipmentMatrix } from '../stores/duel';
-
-interface EquipmentMatrixCompactProps {
-  equipmentMatrix: EquipmentMatrix;
-}
-
-export function EquipmentMatrixCompact({
-  equipmentMatrix,
-}: EquipmentMatrixCompactProps) {
-  return null;
-}
diff --git a/src/components/EquipmentMatrixCompact.tsx b/src/components/EquipmentMatrixCompact.tsx
new file mode 100644
index 000000000..d4e5cabe9
--- /dev/null
+++ b/src/components/EquipmentMatrixCompact.tsx
@@ -0,0 +1,61 @@
+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>
+  );
+}