feat: spaced armor toggle

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

@@ -37,6 +37,7 @@ export function TankDisplay() {
   const mode = useTankopedia((state) => state.mode);
   const showGrid = useTankopedia((state) => state.model.showGrid);
   const opaqueArmor = useTankopedia((state) => state.model.opaqueArmor);
+  const showSpacedArmor = useTankopedia((state) => state.model.showSpacedArmor);
   const protagonist = useTankopedia((state) => {
     if (!state.areTanksAssigned) return;
     return state.protagonist;
@@ -188,6 +189,17 @@ export function TankDisplay() {
                   >
                     Opaque armor
                   </DropdownMenu.CheckboxItem>
+
+                  <DropdownMenu.CheckboxItem
+                    checked={showSpacedArmor}
+                    onCheckedChange={(checked) => {
+                      mutateTankopedia((draft) => {
+                        draft.model.showSpacedArmor = checked;
+                      });
+                    }}
+                  >
+                    Spaced armor
+                  </DropdownMenu.CheckboxItem>
                 </DropdownMenu.Content>
               </DropdownMenu.Root>
 

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

@@ -28,6 +28,7 @@ export function TankArmor({ ...props }: TankArmorProps) {
     if (!state.areTanksAssigned) return;
     return state.antagonist;
   });
+  const showSpacedArmor = useTankopedia((state) => state.model.showSpacedArmor);
 
   if (!protagonist || !antagonist) return null;
 
@@ -93,7 +94,12 @@ export function TankArmor({ ...props }: TankArmorProps) {
           const thickness = tankModelDefinition.armor.thickness[armorId];
           const isSpaced = tankModelDefinition.armor.spaced?.includes(armorId);
 
-          if (!isVisible || thickness === undefined) return null;
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (isSpaced && !showSpacedArmor)
+          )
+            return null;
           return (
             <ArmorMesh
               spaced={isSpaced}
@@ -121,7 +127,12 @@ export function TankArmor({ ...props }: TankArmorProps) {
             const isSpaced =
               turretModelDefinition.armor.spaced?.includes(armorId);
 
-            if (!isVisible || thickness === undefined) return null;
+            if (
+              !isVisible ||
+              thickness === undefined ||
+              (isSpaced && !showSpacedArmor)
+            )
+              return null;
             return (
               <ArmorMesh
                 spaced={isSpaced}
@@ -156,7 +167,12 @@ export function TankArmor({ ...props }: TankArmorProps) {
               const isSpaced =
                 gunModelDefinition.armor.spaced?.includes(armorId);
 
-              if (!isVisible || thickness === undefined) return null;
+              if (
+                !isVisible ||
+                thickness === undefined ||
+                (isSpaced && !showSpacedArmor)
+              )
+                return null;
               return (
                 <ArmorMesh
                   spaced={isSpaced}

src/stores/tankopedia.ts

@@ -33,6 +33,7 @@ type Tankopedia = {
     controlsEnabled: boolean;
     showGrid: boolean;
     opaqueArmor: boolean;
+    showSpacedArmor: boolean;
   };
   mode: TankopediaMode;
 } & (
@@ -72,6 +73,7 @@ export const useTankopedia = create<Tankopedia>()(() => ({
     controlsEnabled: true,
     showGrid: true,
     opaqueArmor: false,
+    showSpacedArmor: true,
   },
   areTanksAssigned: false,
   mode: 'model',