feat: segmented control mode

src/components/Armor/components/CoreArmorScene.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { Group } from 'three';
 import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
 import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
@@ -31,26 +31,11 @@ export const CoreArmorScene = memo(() => {
   const turretOrigin = correctZYTuple(tankModelDefinition.turretOrigin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
-  const initialTankopediaState = tankopediaPersistentStore.getState();
 
   useTankTransform(protagonist, turretContainer, gunContainer);
 
-  useEffect(() => {
-    const unsubscribe = tankopediaPersistentStore.subscribe(
-      (state) => state.mode,
-      (mode) => {
-        if (wrapper.current) wrapper.current.visible = mode === 'armor';
-      },
-    );
-
-    return unsubscribe;
-  });
-
   return (
-    <ModelTankWrapper
-      ref={wrapper}
-      visible={initialTankopediaState.mode === 'armor'}
-    >
+    <ModelTankWrapper ref={wrapper}>
       <group position={hullOrigin}>
         {armorNodes.map((node) => {
           const isHull = node.name.startsWith('hull_');

src/components/StaticArmor/components/StaticArmorScene.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useRef } from 'react';
+import { memo, useMemo, useRef } from 'react';
 import { Group, Plane, Scene, Vector3 } from 'three';
 import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
 import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
@@ -9,7 +9,6 @@ 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 '../../Armor/components/ModelTankWrapper';
 import { ArmorType } from '../../Armor/components/SpacedArmorScene';
 import { SpacedArmorSceneComponent } from '../../Armor/components/SpacedArmorSceneComponent';
@@ -27,7 +26,6 @@ export interface ThicknessRange {
 export const StaticArmorScene = memo<StaticArmorSceneProps>(
   ({ scene, awaitedTankDefinitions }) => {
     const wrapper = useRef<Group>(null);
-    const tankopediaPersistentStore = TankopediaPersistent.useStore();
     const awaitedTankModelDefinitions = useModelDefinitions();
     const turretContainer = useRef<Group>(null);
     const gunContainer = useRef<Group>(null);
@@ -98,22 +96,6 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
 
     useTankTransform(protagonist, turretContainer, gunContainer);
 
-    useEffect(() => {
-      function handleMode(mode: TankopediaPersistent.TankopediaMode) {
-        if (!wrapper.current) return;
-        wrapper.current.visible = mode === 'armor';
-      }
-
-      const unsubscribe = tankopediaPersistentStore.subscribe(
-        (state) => state.mode,
-        handleMode,
-      );
-
-      handleMode(tankopediaPersistentStore.getState().mode);
-
-      return unsubscribe;
-    }, []);
-
     return (
       <ModelTankWrapper ref={wrapper}>
         <group position={hullOrigin}>