From d0055bb118768d635307bd9c4463de2c66828825 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 29 Jul 2024 20:40:32 -0500
Subject: [PATCH] feat: dev mode debug

---
 src/components/Armor/components/ArmorPlateDisplay.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Armor/components/ArmorPlateDisplay.tsx b/src/components/Armor/components/ArmorPlateDisplay.tsx
index bc2d54e61..c52987cf2 100644
--- a/src/components/Armor/components/ArmorPlateDisplay.tsx
+++ b/src/components/Armor/components/ArmorPlateDisplay.tsx
@@ -1,6 +1,7 @@
-import { Card, Flex, Text } from '@radix-ui/themes';
+import { Card, Code, Flex, Text } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
 import { radToDeg } from 'three/src/math/MathUtils';
+import * as App from '../../../stores/app';
 import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
 import { layerTypeNames } from './ShotDisplayCard';
 import { ArmorType } from './SpacedArmorScene';
@@ -9,6 +10,7 @@ export function ArmorPlateDisplay() {
   const highlightArmor = TankopediaEphemeral.use(
     (state) => state.highlightArmor,
   );
+  const developerMode = App.use((state) => state.developerMode);
 
   if (highlightArmor === undefined) return null;
 
@@ -39,6 +41,11 @@ export function ArmorPlateDisplay() {
                 </Text>
               </Text>
             )}
+            {developerMode && (
+              <Text mt="2" color="gray" size="2">
+                <b>DEV:</b> <Code>{highlightArmor.name}</Code>
+              </Text>
+            )}
           </Flex>
         </Card>
       </Html>