feat: static armor

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

@@ -7,6 +7,7 @@ import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawL
 import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
+import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import * as Duel from '../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
@@ -22,6 +23,7 @@ export function TankSandbox() {
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const awaitedModelDefinitions = use(modelDefinitions);
+  const awaitedTankDefinitions = use(tankDefinitions);
   const protagonist = Duel.use((state) => state.protagonist);
   const mutateDuel = Duel.useMutation();
   const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
@@ -137,13 +139,14 @@ export function TankSandbox() {
     >
       <Controls />
       <SceneProps />
-
       <TankModel />
 
       {/* idk why the shot display doesn't work without suspense here lol */}
       <Suspense fallback={<ModelLoader />}>
         {armorMode === 'blitz' && <Armor />}
-        {armorMode === 'static' && <StaticArmor />}
+        {armorMode === 'static' && (
+          <StaticArmor awaitedTankDefinitions={awaitedTankDefinitions} />
+        )}
         <Lighting />
       </Suspense>
 

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

@@ -1,5 +1,5 @@
 import { ThreeEvent, useThree } from '@react-three/fiber';
-import { memo, useRef } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import { Group, Mesh, MeshStandardMaterial, Vector2 } from 'three';
 import { ModelTankWrapper } from '../../../../../../../components/Armor/components/ModelTankWrapper';
 import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
@@ -13,12 +13,14 @@ import { useModel } from '../../../../../../../hooks/useModel';
 import { useTankTransform } from '../../../../../../../hooks/useTankTransform';
 import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
+import * as TankopediaPersistent from '../../../../../../../stores/tankopediaPersistent';
 
 export const TankModel = memo(() => {
   const mutateDuel = Duel.useMutation();
   const duelStore = Duel.useStore();
   const awaitedModelDefinitions = useAwait(modelDefinitions);
   const protagonist = Duel.use((draft) => draft.protagonist);
+  const tankopediaPersistentStore = TankopediaPersistent.useStore();
   const canvas = useThree((state) => state.gl.domElement);
   const hullContainer = useRef<Group>(null);
   const turretContainer = useRef<Group>(null);
@@ -36,6 +38,32 @@ export const TankModel = memo(() => {
   const { gltf } = useModel(protagonist.tank.id);
   const nodes = Object.values(gltf.nodes);
 
+  useEffect(() => {
+    function handleVisibility() {
+      if (!hullContainer.current) return;
+
+      const state = tankopediaPersistentStore.getState();
+
+      hullContainer.current.visible =
+        state.mode === 'model' || state.armorMode === 'blitz';
+    }
+
+    const unsubscribes = [
+      tankopediaPersistentStore.subscribe(
+        (state) => state.mode,
+        handleVisibility,
+      ),
+      tankopediaPersistentStore.subscribe(
+        (state) => state.armorMode,
+        handleVisibility,
+      ),
+    ];
+
+    handleVisibility();
+
+    return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+  }, []);
+
   return (
     <ModelTankWrapper ref={hullContainer}>
       {nodes.map((node) => {