feat: generalize wrapper

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

@@ -1,6 +1,7 @@
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { memo, useRef } from 'react';
 import { Group, Mesh, MeshStandardMaterial, Vector2 } from 'three';
+import { ModelTankWrapper } from '../../../../../../../components/Armor/components/ModelTankWrapper';
 import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
 import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment';
 import { jsxTree } from '../../../../../../../core/blitzkit/jsxTree';
@@ -36,7 +37,7 @@ export const TankModel = memo(() => {
   const nodes = Object.values(gltf.nodes);
 
   return (
-    <group ref={hullContainer} rotation={[-Math.PI / 2, 0, 0]}>
+    <ModelTankWrapper ref={hullContainer}>
       {nodes.map((node) => {
         const isHull = node.name === 'hull';
         const isWheel = node.name.startsWith('chassis_wheel_');
@@ -260,6 +261,6 @@ export const TankModel = memo(() => {
           })}
         </group>
       </group>
-    </group>
+    </ModelTankWrapper>
   );
 });

src/components/Armor/components/CoreArmorScene.tsx

@@ -9,6 +9,7 @@ import { useTankTransform } from '../../../hooks/useTankTransform';
 import * as Duel from '../../../stores/duel';
 import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
 import { CoreArmorSceneComponent } from './CoreArmorSceneComponent';
+import { ModelTankWrapper } from './ModelTankWrapper';
 
 export const CoreArmorScene = memo(() => {
   const wrapper = useRef<Group>(null);
@@ -47,9 +48,8 @@ export const CoreArmorScene = memo(() => {
   const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
 
   return (
-    <group
+    <ModelTankWrapper
       ref={wrapper}
-      rotation={[-Math.PI / 2, 0, 0]}
       visible={initialTankopediaState.mode === 'armor'}
     >
       <group position={hullOrigin}>
@@ -75,7 +75,6 @@ export const CoreArmorScene = memo(() => {
       </group>
 
       <group ref={turretContainer}>
-        <group position={hullOrigin}>
         {armorNodes.map((node) => {
           const isCurrentTurret = node.name.startsWith(
             `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
@@ -99,9 +98,8 @@ export const CoreArmorScene = memo(() => {
             </group>
           );
         })}
-        </group>
+
         <group ref={gunContainer}>
-          <group position={hullOrigin}>
           {armorNodes.map((node) => {
             const isCurrentGun = node.name.startsWith(
               `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
@@ -126,7 +124,6 @@ export const CoreArmorScene = memo(() => {
           })}
         </group>
       </group>
-      </group>
+    </ModelTankWrapper>
-    </group>
   );
 });

src/components/Armor/components/ModelTankWrapper.tsx

@@ -0,0 +1,7 @@
+import { GroupProps } from '@react-three/fiber';
+import { forwardRef } from 'react';
+import { Group } from 'three';
+
+export const ModelTankWrapper = forwardRef<Group, GroupProps>((props, ref) => {
+  return <group rotation={[-Math.PI / 2, 0, 0]} ref={ref} {...props} />;
+});

src/components/Armor/components/SpacedArmorScene.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { Group, Plane, Scene, Vector3 } from 'three';
 import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
 import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
@@ -8,7 +8,7 @@ import { useModel } from '../../../hooks/useModel';
 import { useModelDefinitions } from '../../../hooks/useModelDefinitions';
 import { useTankTransform } from '../../../hooks/useTankTransform';
 import * as Duel from '../../../stores/duel';
-import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
+import { ModelTankWrapper } from './ModelTankWrapper';
 import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent';
 
 export enum ArmorType {
@@ -26,8 +26,6 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
   const modelDefinitions = useModelDefinitions();
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
-  const tankopediaPersistentStore = TankopediaPersistent.useStore();
-  const initialTankopediaState = tankopediaPersistentStore.getState();
   const protagonist = Duel.use((draft) => draft.protagonist);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
@@ -51,23 +49,8 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
 
   useTankTransform(protagonist, turretContainer, gunContainer);
 
-  useEffect(() => {
-    const unsubscribe = tankopediaPersistentStore.subscribe(
-      (state) => state.mode,
-      (mode) => {
-        if (wrapper.current) wrapper.current.visible = mode === 'armor';
-      },
-    );
-
-    return unsubscribe;
-  });
-
   return (
-    <group
+    <ModelTankWrapper ref={wrapper}>
-      ref={wrapper}
-      rotation={[-Math.PI / 2, 0, 0]}
-      visible={initialTankopediaState.mode === 'armor'}
-    >
       <group position={hullOrigin}>
         {armorNodes.map((node) => {
           const isHull = node.name.startsWith('hull_');
@@ -91,6 +74,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
           );
         })}
       </group>
+
       {modelNodes.map((node) => {
         const isWheel = node.name.startsWith('chassis_wheel_');
         const isTrack = node.name.startsWith('chassis_track_');
@@ -111,7 +95,6 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
       })}
 
       <group ref={turretContainer}>
-        <group position={hullOrigin}>
         {armorNodes.map((node) => {
           const isCurrentTurret = node.name.startsWith(
             `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
@@ -137,9 +120,8 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
             </group>
           );
         })}
-        </group>
+
         <group ref={gunContainer}>
-          <group position={hullOrigin}>
           {armorNodes.map((node) => {
             const isCurrentGun = node.name.startsWith(
               `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
@@ -167,7 +149,6 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
               </group>
             );
           })}
-          </group>
 
           {modelNodes.map((node) => {
             const gunString = `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`;
@@ -196,6 +177,6 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
           })}
         </group>
       </group>
-    </group>
+    </ModelTankWrapper>
   );
 });