From 9b3c7451b73ab7646b5743ad4dbdd1f7f3f8e2ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 16 Jan 2024 12:34:00 -0600
Subject: [PATCH] fix: armor highlighting desync

---
 .../TankArmor/components/ArmorHighlighting.tsx           | 9 ++++-----
 .../TankArmor/components/ExternalModuleMask.tsx          | 9 ++++-----
 .../components/TankArmor/components/SpacedArmorDepth.tsx | 9 +++++----
 src/components/ArmorMesh/components/Armor/index.tsx      | 4 ++--
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx
index 29547eeb1..57f541236 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx
@@ -26,14 +26,12 @@ interface ArmorHighlightingProps {
 
 export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
   const wrapper = useRef<Group>(null);
-  const awaitedModelDefinitions = useModelDefinitions();
+  const modelDefinitions = useModelDefinitions();
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
   const initialTankopediaState = useTankopedia.getState();
 
   useEffect(() => {
-    if (!awaitedModelDefinitions) return;
-
     const turretOrigin = new Vector3(
       tankModelDefinition.turretOrigin[0],
       tankModelDefinition.turretOrigin[1],
@@ -90,12 +88,13 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
       turretContainer.current?.rotation.copy(turretRotation);
     }
 
+    handleModelTransform(useTankopedia.getState().model.physical);
     modelTransformEvent.on(handleModelTransform);
 
     return () => {
       modelTransformEvent.off(handleModelTransform);
     };
-  }, [awaitedModelDefinitions]);
+  });
 
   useEffect(() => {
     const unsubscribe = useTankopedia.subscribe(
@@ -114,7 +113,7 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
   );
 
   const armorNodes = Object.values(armorGltf.nodes);
-  const tankModelDefinition = awaitedModelDefinitions[duel.protagonist.tank.id];
+  const tankModelDefinition = modelDefinitions[duel.protagonist.tank.id];
   const turretModelDefinition =
     tankModelDefinition.turrets[duel.protagonist.turret.id];
   const gunModelDefinition =
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx
index d069e4928..c0bb57526 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx
@@ -33,14 +33,12 @@ interface ExternalModuleMaskProps {
  */
 export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
   const wrapper = useRef<Group>(null);
-  const awaitedModelDefinitions = useModelDefinitions();
+  const modelDefinitions = useModelDefinitions();
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
   const initialTankopediaState = useTankopedia.getState();
 
   useEffect(() => {
-    if (!awaitedModelDefinitions) return;
-
     const turretOrigin = new Vector3(
       tankModelDefinition.turretOrigin[0],
       tankModelDefinition.turretOrigin[1],
@@ -97,12 +95,13 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
       turretContainer.current?.rotation.copy(turretRotation);
     }
 
+    handleModelTransform(useTankopedia.getState().model.physical);
     modelTransformEvent.on(handleModelTransform);
 
     return () => {
       modelTransformEvent.off(handleModelTransform);
     };
-  }, [awaitedModelDefinitions]);
+  });
 
   useEffect(() => {
     const unsubscribe = useTankopedia.subscribe(
@@ -126,7 +125,7 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
 
   const armorNodes = Object.values(armorGltf.nodes);
   const modelNodes = Object.values(modelGltf.nodes);
-  const tankModelDefinition = awaitedModelDefinitions[duel.protagonist.tank.id];
+  const tankModelDefinition = modelDefinitions[duel.protagonist.tank.id];
   const turretModelDefinition =
     tankModelDefinition.turrets[duel.protagonist.turret.id];
   const gunModelDefinition =
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx
index 16430977f..9fd9a908d 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx
@@ -37,13 +37,13 @@ interface SpacedArmorDepthProps {
  */
 export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
   const wrapper = useRef<Group>(null);
-  const awaitedModelDefinitions = useModelDefinitions();
+  const modelDefinitions = useModelDefinitions();
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
   const initialTankopediaState = useTankopedia.getState();
 
   useEffect(() => {
-    if (!awaitedModelDefinitions) return;
+    if (!modelDefinitions) return;
 
     const turretOrigin = new Vector3(
       tankModelDefinition.turretOrigin[0],
@@ -101,12 +101,13 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
       turretContainer.current?.rotation.copy(turretRotation);
     }
 
+    handleModelTransform(useTankopedia.getState().model.physical);
     modelTransformEvent.on(handleModelTransform);
 
     return () => {
       modelTransformEvent.off(handleModelTransform);
     };
-  }, [awaitedModelDefinitions]);
+  });
 
   useEffect(() => {
     const unsubscribe = useTankopedia.subscribe(
@@ -130,7 +131,7 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
 
   const armorNodes = Object.values(armorGltf.nodes);
   const modelNodes = Object.values(modelGltf.nodes);
-  const tankModelDefinition = awaitedModelDefinitions[duel.protagonist.tank.id];
+  const tankModelDefinition = modelDefinitions[duel.protagonist.tank.id];
   const turretModelDefinition =
     tankModelDefinition.turrets[duel.protagonist.turret.id];
   const gunModelDefinition =
diff --git a/src/components/ArmorMesh/components/Armor/index.tsx b/src/components/ArmorMesh/components/Armor/index.tsx
index d5b296a2b..cbb785f4e 100644
--- a/src/components/ArmorMesh/components/Armor/index.tsx
+++ b/src/components/ArmorMesh/components/Armor/index.tsx
@@ -29,11 +29,11 @@ export function ArmorMesh({
   duel,
   ...props
 }: ArmorMeshProps) {
+  const camera = useThree((state) => state.camera);
+  const { shell } = duel.antagonist;
   const greenPenetration = useTankopedia(
     (state) => state.model.visual.greenPenetration,
   );
-  const camera = useThree((state) => state.camera);
-  const { shell } = duel.antagonist;
   const material = useRef<ShaderMaterial>(null);
   const resolution = new Vector2();