From 447b4629ceaaa019c1406fdc4c92917760c5c61d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 13 Jul 2024 19:49:00 -0500
Subject: [PATCH] fix: contextual shot display card

---
 .../[id]/components/Model/TankSandbox.tsx     |   2 +
 .../Armor/components/CoreArmorScene.tsx       | 109 ++++++++----------
 .../Armor/components/ShotDisplay.tsx          |   2 +-
 .../Armor/components/ShotDisplayCard.tsx      |   6 +-
 4 files changed, 57 insertions(+), 62 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
index 1b1402bc9..f0fe0a34b 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Armor/components/CoreArmorScene.tsx b/src/components/Armor/components/CoreArmorScene.tsx
index f46cbbba4..f44dfe225 100644
--- a/src/components/Armor/components/CoreArmorScene.tsx
+++ b/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,94 +136,86 @@ export const CoreArmorScene = memo(() => {
   ).applyAxisAngle(I_HAT, Math.PI / 2);
 
   return (
-    <>
-      <ShotDisplay />
+    <group
+      ref={wrapper}
+      rotation={[-Math.PI / 2, 0, 0]}
+      visible={initialTankopediaState.mode === 'armor'}
+    >
+      <group position={hullOrigin}>
+        {armorNodes.map((node) => {
+          const isHull = node.name.startsWith('hull_');
+          const isVisible = isHull;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            tankModelDefinition.armor,
+            armorId,
+          );
 
-      <group
-        ref={wrapper}
-        rotation={[-Math.PI / 2, 0, 0]}
-        visible={initialTankopediaState.mode === 'armor'}
-      >
+          if (!isVisible || spaced || thickness === undefined) return null;
+
+          return (
+            <CoreArmorSceneComponent
+              key={node.uuid}
+              thickness={thickness}
+              node={node}
+            />
+          );
+        })}
+      </group>
+
+      <group ref={turretContainer}>
         <group position={hullOrigin}>
           {armorNodes.map((node) => {
-            const isHull = node.name.startsWith('hull_');
-            const isVisible = isHull;
+            const isCurrentTurret = node.name.startsWith(
+              `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+            );
+            const isVisible = isCurrentTurret;
             const armorId = nameToArmorId(node.name);
             const { spaced, thickness } = resolveArmor(
-              tankModelDefinition.armor,
+              turretModelDefinition.armor,
               armorId,
             );
 
             if (!isVisible || spaced || thickness === undefined) return null;
 
             return (
-              <CoreArmorSceneComponent
-                key={node.uuid}
-                thickness={thickness}
-                node={node}
-              />
+              <group key={node.uuid} position={turretOrigin}>
+                <CoreArmorSceneComponent
+                  key={node.uuid}
+                  thickness={thickness}
+                  node={node}
+                />
+              </group>
             );
           })}
         </group>
-
-        <group ref={turretContainer}>
+        <group ref={gunContainer}>
           <group position={hullOrigin}>
             {armorNodes.map((node) => {
-              const isCurrentTurret = node.name.startsWith(
-                `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+              const isCurrentGun = node.name.startsWith(
+                `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
               );
-              const isVisible = isCurrentTurret;
+              const isVisible = isCurrentGun;
               const armorId = nameToArmorId(node.name);
               const { spaced, thickness } = resolveArmor(
-                turretModelDefinition.armor,
+                gunModelDefinition.armor,
                 armorId,
               );
 
               if (!isVisible || spaced || thickness === undefined) return null;
 
               return (
-                <group key={node.uuid} position={turretOrigin}>
-                  <CoreArmorSceneComponent
-                    key={node.uuid}
-                    thickness={thickness}
-                    node={node}
-                  />
+                <group
+                  key={node.uuid}
+                  position={turretOrigin.clone().add(gunOrigin)}
+                >
+                  <CoreArmorSceneComponent thickness={thickness} node={node} />
                 </group>
               );
             })}
           </group>
-          <group ref={gunContainer}>
-            <group position={hullOrigin}>
-              {armorNodes.map((node) => {
-                const isCurrentGun = node.name.startsWith(
-                  `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
-                );
-                const isVisible = isCurrentGun;
-                const armorId = nameToArmorId(node.name);
-                const { spaced, thickness } = resolveArmor(
-                  gunModelDefinition.armor,
-                  armorId,
-                );
-
-                if (!isVisible || spaced || thickness === undefined)
-                  return null;
-
-                return (
-                  <group
-                    key={node.uuid}
-                    position={turretOrigin.clone().add(gunOrigin)}
-                  >
-                    <CoreArmorSceneComponent
-                      thickness={thickness}
-                      node={node}
-                    />
-                  </group>
-                );
-              })}
-            </group>
-          </group>
         </group>
       </group>
-    </>
+    </group>
   );
 });
diff --git a/src/components/Armor/components/ShotDisplay.tsx b/src/components/Armor/components/ShotDisplay.tsx
index 7faaa6813..60544b58a 100644
--- a/src/components/Armor/components/ShotDisplay.tsx
+++ b/src/components/Armor/components/ShotDisplay.tsx
@@ -82,7 +82,7 @@ export function ShotDisplay() {
             sm: 'block',
           }}
         >
-          <ShotDisplayCard />
+          <ShotDisplayCard shot={shot} />
         </Box>
       </Html>
 
diff --git a/src/components/Armor/components/ShotDisplayCard.tsx b/src/components/Armor/components/ShotDisplayCard.tsx
index be661972c..b7b29cbaf 100644
--- a/src/components/Armor/components/ShotDisplayCard.tsx
+++ b/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