feat: start of static armor mode

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

@@ -2,6 +2,7 @@ import { Canvas } from '@react-three/fiber';
 import { Suspense, use, useEffect, useRef } from 'react';
 import { Armor } from '../../../../../../components/Armor';
 import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
+import { StaticArmor } from '../../../../../../components/StaticArmor';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
@@ -9,6 +10,7 @@ import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import * as Duel from '../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
+import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent';
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
 import { SceneProps } from '../SceneProps';
@@ -26,6 +28,7 @@ export function TankSandbox() {
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
+  const armorMode = TankopediaPersistent.use((state) => state.armorMode);
 
   function handlePointerDown() {
     window.addEventListener('pointermove', handlePointerMove);
@@ -139,7 +142,8 @@ export function TankSandbox() {
 
       {/* idk why the shot display doesn't work without suspense here lol */}
       <Suspense fallback={<ModelLoader />}>
-        <Armor />
+        {armorMode === 'blitz' && <Armor />}
+        {armorMode === 'static' && <StaticArmor />}
         <Lighting />
       </Suspense>
 

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

@@ -485,7 +485,9 @@ export function Options() {
             mr="1"
           >
             <Switch size="1" checked={mode === 'armor'} />
-            Armor
+            <Text color="gray" size="2">
+              Armor
+            </Text>
           </Flex>
 
           <DropdownMenu.Root>

src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx

@@ -11,6 +11,7 @@ import {
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import * as Duel from '../../../../../../stores/duel';
+import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent';
 import * as styles from './index.css';
 
 export function RotationInputs() {
@@ -26,6 +27,9 @@ export function RotationInputs() {
   const initialGunPitch = tankModelDefinition.turretRotation?.pitch ?? 0;
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const isFullScreen = useFullScreen();
+  const mode = TankopediaPersistent.use((state) => state.mode);
+  const armorMode = TankopediaPersistent.use((state) => state.armorMode);
+  const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
 
   useEffect(() => {
     yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
@@ -57,8 +61,9 @@ export function RotationInputs() {
 
   return (
     <Flex
-      className={isFullScreen ? undefined : styles.container}
-      gap="2"
+      className={
+        isFullScreen || mode === 'armor' ? undefined : styles.container
+      }
       style={{
         width: 128 + 32,
         pointerEvents: 'auto',
@@ -67,106 +72,145 @@ export function RotationInputs() {
         top: 16,
         transform: 'translateX(-50%)',
       }}
+      direction="column"
+      align="center"
+      gap="2"
     >
-      <TextField.Root
-        size="1"
-        radius="full"
-        style={{
-          flex: 1,
-          textAlign: 'right',
-        }}
-        onBlur={() => {
-          const value = Number(yawInput.current!.value);
-          if (isNaN(value)) {
-            yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
-            return;
-          }
-          const [pitch, yaw] = applyPitchYawLimits(
-            protagonist.pitch,
-            degToRad(value),
-            gunModelDefinition.pitch,
-            turretModelDefinition.yaw,
-            hasImprovedVerticalStabilizer,
-          );
-          modelTransformEvent.emit({ pitch, yaw });
-          mutateDuel((state) => {
-            state.protagonist.pitch = pitch;
-            state.protagonist.yaw = yaw;
-          });
-          yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
-        }}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter') {
-            yawInput.current?.blur();
-          }
-        }}
-        onFocus={() => yawInput.current?.focus()}
-        ref={yawInput}
-      >
-        <TextField.Slot
+      <Flex gap="2">
+        <TextField.Root
+          size="1"
+          radius="full"
           style={{
-            userSelect: 'none',
+            flex: 1,
+            textAlign: 'right',
           }}
+          onBlur={() => {
+            const value = Number(yawInput.current!.value);
+            if (isNaN(value)) {
+              yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+              return;
+            }
+            const [pitch, yaw] = applyPitchYawLimits(
+              protagonist.pitch,
+              degToRad(value),
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+            modelTransformEvent.emit({ pitch, yaw });
+            mutateDuel((state) => {
+              state.protagonist.pitch = pitch;
+              state.protagonist.yaw = yaw;
+            });
+            yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              yawInput.current?.blur();
+            }
+          }}
+          onFocus={() => yawInput.current?.focus()}
+          ref={yawInput}
         >
-          <WidthIcon />
-        </TextField.Slot>
-        <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
-      </TextField.Root>
+          <TextField.Slot
+            style={{
+              userSelect: 'none',
+            }}
+          >
+            <WidthIcon />
+          </TextField.Slot>
+          <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
+        </TextField.Root>
 
-      <TextField.Root
-        size="1"
-        radius="full"
-        style={{
-          flex: 1,
-          textAlign: 'right',
-        }}
-        onBlur={() => {
-          const value = Number(pitchInput.current!.value);
-          if (isNaN(value)) {
+        <TextField.Root
+          size="1"
+          radius="full"
+          style={{
+            flex: 1,
+            textAlign: 'right',
+          }}
+          onBlur={() => {
+            const value = Number(pitchInput.current!.value);
+            if (isNaN(value)) {
+              pitchInput.current!.value = (
+                -radToDeg(protagonist.pitch) + initialGunPitch
+              ).toFixed(1);
+              return;
+            }
+            const [pitch, yaw] = applyPitchYawLimits(
+              degToRad(-value + initialGunPitch),
+              protagonist.yaw,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+            modelTransformEvent.emit({ pitch, yaw });
+            mutateDuel((state) => {
+              state.protagonist.pitch = pitch;
+              state.protagonist.yaw = yaw;
+            });
             pitchInput.current!.value = (
               -radToDeg(protagonist.pitch) + initialGunPitch
             ).toFixed(1);
-            return;
-          }
-          const [pitch, yaw] = applyPitchYawLimits(
-            degToRad(-value + initialGunPitch),
-            protagonist.yaw,
-            gunModelDefinition.pitch,
-            turretModelDefinition.yaw,
-            hasImprovedVerticalStabilizer,
-          );
-          modelTransformEvent.emit({ pitch, yaw });
-          mutateDuel((state) => {
-            state.protagonist.pitch = pitch;
-            state.protagonist.yaw = yaw;
-          });
-          pitchInput.current!.value = (
-            -radToDeg(protagonist.pitch) + initialGunPitch
-          ).toFixed(1);
-        }}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter') {
-            pitchInput.current?.blur();
-          }
-        }}
-        onFocus={() => pitchInput.current?.focus()}
-        ref={pitchInput}
-      >
-        <TextField.Slot
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              pitchInput.current?.blur();
+            }
+          }}
+          onFocus={() => pitchInput.current?.focus()}
+          ref={pitchInput}
+        >
+          <TextField.Slot
+            style={{
+              userSelect: 'none',
+            }}
+          >
+            <HeightIcon />
+          </TextField.Slot>
+          <TextField.Slot
+            style={{
+              userSelect: 'none',
+            }}
+          >
+            °
+          </TextField.Slot>
+        </TextField.Root>
+      </Flex>
+
+      {/* <Flex gap="2">
+        <Box
+          width="var(--space-6)"
+          height="var(--space-4)"
           style={{
-            userSelect: 'none',
+            borderRadius: 'var(--radius-1)',
+            background: 'linear-gradient(90deg, #FF2020, #FF8080)',
+            opacity: armorMode === 'blitz' ? 1 : 0.5,
+          }}
+          onClick={() => {
+            mutateTankopediaPersistent((draft) => {
+              draft.armorMode = 'blitz';
+            });
+          }}
+        />
+        <Flex
+          width="var(--space-6)"
+          height="var(--space-4)"
+          style={{
+            borderRadius: 'var(--radius-1)',
+            overflow: 'hidden',
+            opacity: armorMode === 'static' ? 1 : 0.5,
+          }}
+          onClick={() => {
+            mutateTankopediaPersistent((draft) => {
+              draft.armorMode = 'static';
+            });
           }}
         >
-          <HeightIcon />
-        </TextField.Slot>
-        <TextField.Slot
-          style={{
-            userSelect: 'none',
-          }}
-        >
-          °
-        </TextField.Slot>
-      </TextField.Root>
+          <Box flexGrow="1" style={{ backgroundColor: '#8000FF' }} />
+          <Box flexGrow="1" style={{ backgroundColor: '#FF0080' }} />
+        </Flex>
+      </Flex> */}
     </Flex>
   );
 }

src/components/StaticArmor/index.tsx

@@ -0,0 +1,3 @@
+export function StaticArmor() {
+  return null;
+}

src/stores/tankopediaPersistent/index.ts

@@ -13,6 +13,7 @@ export type TankopediaSortBy = keyof typeof SORT_NAMES;
 export type TankopediaSortDirection = 'ascending' | 'descending';
 export type TankopediaTestTankDisplay = 'include' | 'exclude' | 'only';
 export type TankopediaMode = 'model' | 'armor';
+export type TankopediaArmorMode = 'blitz' | 'static';
 
 export interface TankopediaPersistent {
   model: {
@@ -39,6 +40,7 @@ export interface TankopediaPersistent {
     page: number;
   };
   mode: TankopediaMode;
+  armorMode: TankopediaArmorMode;
 }
 
 export const { Provider, use, useMutation, useStore } = createNextSafeStore(
@@ -70,6 +72,7 @@ export const { Provider, use, useMutation, useStore } = createNextSafeStore(
             page: 0,
           },
           mode: 'model',
+          armorMode: 'blitz',
         })),
         { name: 'tankopedia', merge: (a, b) => merge(b, a) },
       ),