feat: armor modes 2

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -22,7 +22,7 @@ export function ArmorPlateDisplay() {
     (state) => state.highlightArmor,
   );
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
-  const developerMode = App.useDeferred(false, (state) => state.developerMode);
+  const developerMode = App.useDeferred((state) => state.developerMode, false);
   const duelStore = Duel.useStore();
   const input = useRef<HTMLInputElement>(null);
   const tankopediaEphemeralStore = TankopediaEphemeral.useStore();

packages/website/src/components/Armor/components/PrimaryArmorScene.tsx

@@ -87,8 +87,8 @@ export const PrimaryArmorScene = memo(() => {
             return null;
 
           return (
-            <group position={hullOrigin}>
-              <group key={node.uuid} position={turretOrigin}>
+            <group position={hullOrigin} key={node.uuid}>
+              <group position={turretOrigin}>
                 <PrimaryArmorSceneComponent
                   key={node.uuid}
                   thickness={thickness}
@@ -121,11 +121,8 @@ export const PrimaryArmorScene = memo(() => {
               return null;
 
             return (
-              <group position={hullOrigin}>
-                <group
-                  key={node.uuid}
-                  position={turretOrigin.clone().add(gunOrigin)}
-                >
+              <group position={hullOrigin} key={node.uuid}>
+                <group position={turretOrigin.clone().add(gunOrigin)}>
                   <PrimaryArmorSceneComponent
                     thickness={thickness}
                     node={node}

packages/website/src/components/Armor/components/ShotDisplay.tsx

@@ -1,5 +1,5 @@
-import { K_HAT } from '@blitzkit/core';
-import { Box, Text } from '@radix-ui/themes';
+import { J_HAT, K_HAT } from '@blitzkit/core';
+import { Box, Flex, Text } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
@@ -183,7 +183,7 @@ export function ShotDisplay() {
         </Box>
       </Html>
 
-      {/* {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => {
+      {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => {
         if (layer.type === null) return null;
 
         const shotStatusColor =
@@ -276,7 +276,7 @@ export function ShotDisplay() {
             />
           </mesh>
         </group>
-      )} */}
+      )}
     </group>
   );
 }

packages/website/src/components/Armor/components/ShotDisplayCard.tsx

@@ -1,9 +1,19 @@
-import { Flex, Text } from '@radix-ui/themes';
+import {
+  Card,
+  Flex,
+  Inset,
+  Separator,
+  Text,
+  type CardProps,
+} from '@radix-ui/themes';
 import type { ComponentProps } from 'react';
+import { radToDeg } from 'three/src/math/MathUtils.js';
 import type {
+  Shot,
   ShotLayer,
   ShotStatus,
 } from '../../../stores/tankopediaEphemeral';
+import { shotStatusColors } from './ShotDisplay';
 import { ArmorType } from './SpacedArmorScene';
 import type { ExternalModuleVariant } from './SpacedArmorSceneComponent';
 

packages/website/src/components/Armor/components/SpacedArmorScene.tsx

@@ -123,8 +123,8 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
             return null;
 
           return (
-            <group position={hullOrigin}>
-              <group key={node.uuid} position={turretOrigin}>
+            <group position={hullOrigin} key={node.uuid}>
+              <group position={turretOrigin}>
                 <SpacedArmorSceneComponent
                   scene={scene}
                   key={node.uuid}
@@ -158,11 +158,8 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
               return null;
 
             return (
-              <group position={hullOrigin}>
-                <group
-                  key={node.uuid}
-                  position={turretOrigin.clone().add(gunOrigin)}
-                >
+              <group position={hullOrigin} key={node.uuid}>
+                <group position={turretOrigin.clone().add(gunOrigin)}>
                   <SpacedArmorSceneComponent
                     scene={scene}
                     type={spaced ? ArmorType.Spaced : ArmorType.Primary}