feat: functional armor type toggling

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

@@ -70,9 +70,6 @@ export function Options({ thicknessRange }: OptionsProps) {
   const wireframe = TankopediaPersistent.use(
     (state) => state.model.visual.wireframe,
   );
-  const showSpacedArmor = TankopediaPersistent.use(
-    (state) => state.model.visual.showSpacedArmor,
-  );
   const opaque = TankopediaPersistent.use((state) => state.model.visual.opaque);
   const fullScreenAvailable = useFullscreenAvailability();
   const environment = TankopediaPersistent.use(
@@ -537,24 +534,10 @@ export function Options({ thicknessRange }: OptionsProps) {
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Content>
-              {display !== TankopediaDisplay.Model && (
+              {display === TankopediaDisplay.DynamicArmor && (
                 <>
                   <DropdownMenu.Label>Armor</DropdownMenu.Label>
 
-                  <DropdownMenu.CheckboxItem
-                    checked={showSpacedArmor}
-                    onCheckedChange={(checked) => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.model.visual.showSpacedArmor = checked;
-                      });
-                      mutateTankopediaEphemeral((draft) => {
-                        draft.shot = undefined;
-                      });
-                    }}
-                  >
-                    Spaced armor
-                  </DropdownMenu.CheckboxItem>
-
                   <DropdownMenu.CheckboxItem
                     checked={greenPenetration}
                     onCheckedChange={(checked) => {

src/app/tools/tankopedia/[id]/components/Thicknesses.tsx

@@ -1,6 +1,7 @@
 import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
 import { Box, Flex, Text } from '@radix-ui/themes';
 import { ThicknessRange } from '../../../../../components/StaticArmor/components/StaticArmorScene';
+import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
 import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
 
 interface ThicknessesProps {
@@ -18,6 +19,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
     (state) => state.model.visual.showCoreArmor,
   );
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   return (
     <Flex
@@ -25,7 +27,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
       right="0"
       top="50%"
       mr="4"
-      style={{ transform: 'translateY(-50%)' }}
+      style={{ transform: 'translateY(-50%)', userSelect: 'none' }}
       direction="column"
       gap="2"
       align="end"
@@ -39,6 +41,9 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
             draft.model.visual.showCoreArmor =
               !draft.model.visual.showCoreArmor;
           });
+          mutateTankopediaEphemeral((draft) => {
+            draft.highlightArmor = undefined;
+          });
         }}
       >
         <Flex direction="column" align="end" justify="between">
@@ -73,6 +78,9 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
             draft.model.visual.showSpacedArmor =
               !draft.model.visual.showSpacedArmor;
           });
+          mutateTankopediaEphemeral((draft) => {
+            draft.highlightArmor = undefined;
+          });
         }}
       >
         <Flex direction="column" align="end" justify="between">
@@ -106,6 +114,9 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
             draft.model.visual.showExternalModules =
               !draft.model.visual.showExternalModules;
           });
+          mutateTankopediaEphemeral((draft) => {
+            draft.highlightArmor = undefined;
+          });
         }}
       >
         <Flex direction="column" align="end" justify="between">

src/components/Armor/components/CoreArmorSceneComponent/index.tsx

@@ -48,7 +48,6 @@ export function CoreArmorSceneComponent({
       explosionRadius: { value: null },
       greenPenetration: { value: null },
       opaque: { value: null },
-      useSpacedArmor: { value: null },
 
       inverseProjectionMatrix: { value: null },
       resolution: { value: new Vector2() },
@@ -80,7 +79,6 @@ export function CoreArmorSceneComponent({
     ) {
       material.uniforms.greenPenetration.value = visual.greenPenetration;
       material.uniforms.opaque.value = visual.opaque || visual.wireframe;
-      material.uniforms.useSpacedArmor.value = visual.showSpacedArmor;
       material.wireframe = visual.wireframe;
     }
     async function handleProtagonistEquipmentChange(

src/components/Armor/components/CoreArmorSceneComponent/shaders/fragment.glsl

@@ -13,7 +13,6 @@ uniform float damage;
 uniform float explosionRadius;
 uniform bool greenPenetration;
 uniform bool opaque;
-uniform bool useSpacedArmor;
 uniform mat4 inverseProjectionMatrix;
 
 uniform highp sampler2D spacedArmorBuffer;
@@ -49,7 +48,7 @@ void main() {
     float coreArmorDistance = depthToDistance(gl_FragCoord.z);
     float distanceFromSpacedArmor = coreArmorDistance - spacedArmorDistance;
 
-    if (canSplash && useSpacedArmor && isUnderSpacedArmor) {
+    if (canSplash && isUnderSpacedArmor) {
       float spacedArmorThickness = spacedArmorBufferFragment.r * penetration;
       float finalDamage = 0.5 * damage * (1.0 - distanceFromSpacedArmor / explosionRadius) - 1.1 * (finalThickness + spacedArmorThickness);
 
@@ -58,7 +57,7 @@ void main() {
     } else {
       float remainingPenetration = penetration;
 
-      if (useSpacedArmor && isUnderSpacedArmor) {
+      if (isUnderSpacedArmor) {
         float spacedArmorThickness = spacedArmorBufferFragment.r * penetration;
         remainingPenetration -= spacedArmorThickness;
 

src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -149,7 +149,7 @@ export function SpacedArmorSceneComponent({
         if (selectedName === undefined) {
           // nothing selected, go back to defaults
           material.opacity = opacity;
-          material.transparent = opacity < 1;
+          // material.transparent = opacity < 1;
           material.color = color;
           material.depthWrite = props.type !== ArmorType.External;
           material.side = FrontSide;
@@ -164,14 +164,14 @@ export function SpacedArmorSceneComponent({
         ) {
           // this selected, stand out!
           material.opacity = 1;
-          material.transparent = false;
+          // material.transparent = false;
           material.color = color;
           material.depthWrite = true;
           material.side = DoubleSide;
         } else {
           // something else selected, become background
           material.opacity = 1 / 4;
-          material.transparent = true;
+          // material.transparent = true;
           material.color = unselectedColor;
           material.depthWrite = props.type !== ArmorType.External;
           material.side = FrontSide;
@@ -188,7 +188,7 @@ export function SpacedArmorSceneComponent({
 
     return jsxTree(node, {
       material,
-      renderOrder,
+      // renderOrder,
       userData: {
         type: props.type,
         variant: props.type === ArmorType.External ? props.variant : 'gun',

src/components/StaticArmor/components/StaticArmorScene.tsx

@@ -8,6 +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 '../../Armor/components/ModelTankWrapper';
 import { ArmorType } from '../../Armor/components/SpacedArmorScene';
 import { SpacedArmorSceneComponent } from '../../Armor/components/SpacedArmorSceneComponent';
@@ -47,6 +48,15 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
       gunModelDefinition.mask === undefined
         ? undefined
         : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
+    const showCoreArmor = TankopediaPersistent.use(
+      (state) => state.model.visual.showCoreArmor,
+    );
+    const showSpacedArmor = TankopediaPersistent.use(
+      (state) => state.model.visual.showSpacedArmor,
+    );
+    const showExternalModules = TankopediaPersistent.use(
+      (state) => state.model.visual.showExternalModules,
+    );
 
     useTankTransform(protagonist, turretContainer, gunContainer);
 
@@ -62,7 +72,13 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
               armorId,
             );
 
-            if (!isVisible || thickness === undefined) return null;
+            if (
+              !isVisible ||
+              thickness === undefined ||
+              (!showCoreArmor && !spaced) ||
+              (!showSpacedArmor && spaced)
+            )
+              return null;
 
             return (
               <SpacedArmorSceneComponent
@@ -83,7 +99,7 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
           const isTrack = node.name.startsWith('chassis_track_');
           const isVisible = isWheel || isTrack;
 
-          if (!isVisible) return null;
+          if (!isVisible || !showExternalModules) return null;
 
           return (
             <SpacedArmorSceneComponent
@@ -111,7 +127,13 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
               armorId,
             );
 
-            if (!isVisible || thickness === undefined) return null;
+            if (
+              !isVisible ||
+              thickness === undefined ||
+              (!showCoreArmor && !spaced) ||
+              (!showSpacedArmor && spaced)
+            )
+              return null;
 
             return (
               <group position={hullOrigin}>
@@ -142,7 +164,13 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
                 armorId,
               );
 
-              if (!isVisible || thickness === undefined) return null;
+              if (
+                !isVisible ||
+                thickness === undefined ||
+                (!showCoreArmor && !spaced) ||
+                (!showSpacedArmor && spaced)
+              )
+                return null;
 
               return (
                 <group position={hullOrigin}>
@@ -170,7 +198,7 @@ export const StaticArmorScene = memo<StaticArmorSceneProps>(
                 : node.name === gunString;
               const isVisible = isCurrentGun;
 
-              if (!isVisible) return null;
+              if (!isVisible || !showExternalModules) return null;
 
               return (
                 <SpacedArmorSceneComponent