feat: dev mode debug

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>