fix: contextual shot display card

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -2,6 +2,7 @@ import { PerspectiveCamera } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import { use, useEffect, useRef } from 'react';
 import { Armor } from '../../../../../../components/Armor';
+import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
@@ -142,6 +143,7 @@ export function TankSandbox() {
       <Lighting />
       <TankModel />
       <Armor />
+      <ShotDisplay />
     </Canvas>
   );
 }

src/components/Armor/components/CoreArmorScene.tsx

@@ -13,7 +13,6 @@ import { useModelDefinitions } from '../../../hooks/useModelDefinitions';
 import * as Duel from '../../../stores/duel';
 import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
 import { CoreArmorSceneComponent } from './CoreArmorSceneComponent';
-import { ShotDisplay } from './ShotDisplay';
 
 export const CoreArmorScene = memo(() => {
   const wrapper = useRef<Group>(null);
@@ -137,9 +136,6 @@ export const CoreArmorScene = memo(() => {
   ).applyAxisAngle(I_HAT, Math.PI / 2);
 
   return (
-    <>
-      <ShotDisplay />
-
     <group
       ref={wrapper}
       rotation={[-Math.PI / 2, 0, 0]}
@@ -206,18 +202,14 @@ export const CoreArmorScene = memo(() => {
                 armorId,
               );
 
-                if (!isVisible || spaced || thickness === undefined)
-                  return null;
+              if (!isVisible || spaced || thickness === undefined) return null;
 
               return (
                 <group
                   key={node.uuid}
                   position={turretOrigin.clone().add(gunOrigin)}
                 >
-                    <CoreArmorSceneComponent
-                      thickness={thickness}
-                      node={node}
-                    />
+                  <CoreArmorSceneComponent thickness={thickness} node={node} />
                 </group>
               );
             })}
@@ -225,6 +217,5 @@ export const CoreArmorScene = memo(() => {
         </group>
       </group>
     </group>
-    </>
   );
 });

src/components/Armor/components/ShotDisplay.tsx

@@ -82,7 +82,7 @@ export function ShotDisplay() {
             sm: 'block',
           }}
         >
-          <ShotDisplayCard />
+          <ShotDisplayCard shot={shot} />
         </Box>
       </Html>
 

src/components/Armor/components/ShotDisplayCard.tsx

@@ -108,9 +108,11 @@ function LayerEntry({
   );
 }
 
-export function ShotDisplayCard() {
-  const shot = TankopediaEphemeral.use((state) => state.shot);
+interface ShotDisplayCardProps {
+  shot: TankopediaEphemeral.Shot;
+}
 
+export function ShotDisplayCard({ shot }: ShotDisplayCardProps) {
   if (!shot) return null;
 
   const outTitleColor = shot.out