feat: armor modes

packages/core/src/blitzkit/index.ts

@@ -1,6 +1,6 @@
 export * from './assertSecret';
 export * from './asset';
-// export * from './availableProvisions';
+export * from './availableProvisions';
 // export * from './averageDefinitions';
 // export * from './camouflageDefinitions';
 // export * from './checkConsumableProvisionInclusivity';
@@ -11,7 +11,7 @@ export * from './asset';
 // export * from './degressiveStat';
 // export * from './discoveredIdDefinitions';
 // export * from './emblemURL';
-// export * from './equipmentDefinitions';
+export * from './equipmentDefinitions';
 export * from './eventManager';
 // export * from './fetchCdonLz4';
 // export * from './flagUserActivity';
@@ -21,7 +21,7 @@ export * from './gameDefinitions';
 // export * from './getArchivedRatingLeaderboard';
 // export * from './getArchivedRatingMidnightLeaderboard';
 // export * from './getTimeDaysAgo';
-// export * from './isExplosive';
+export * from './isExplosive';
 // export * from './linkBlitzAndDiscord';
 // export * from './mapDefinitions';
 export * from './modelDefinitions';
@@ -42,7 +42,7 @@ export * from './tankDefinitions';
 export * from './tankIcon';
 export * from './tankNames';
 export * from './unionBoundingBox';
-// export * from './uniqueGuns';
+export * from './uniqueGuns';
 // export * from './unwrapBlitzkitResponse';
 // export * from './votes';
 // export * from './withCORSProxy';

packages/website-legacy/package.json

@@ -13,7 +13,6 @@
     "@blitzkit/core": "workspace:*",
     "fuzzysort": "^2.0.4",
     "@nivo/bar": "^0.87.0",
-    "three": "0.159.0",
     "lodash": "^4.17.21",
     "next": "^14.2.7",
     "three-stdlib": "^2.32.2",
@@ -26,13 +25,10 @@
     "react-dom": "^18.3.1",
     "react-fuzzysort": "^1.0.1",
     "immer": "^10.1.1",
-    "@vanilla-extract/dynamic": "^2.1.2",
+    "@vanilla-extract/dynamic": "^2.1.2"
   },
   "devDependencies": {
-    "@types/react-dom": "^18",
     "@types/lodash": "^4.17.7",
-    "@types/three": "^0.160.0",
+    "@vanilla-extract/next-plugin": "^2.4.5"
-    "@vanilla-extract/next-plugin": "^2.4.5",
-    "@types/react": "^18.3.5"
   }
 }

packages/website/package.json

@@ -18,6 +18,7 @@
     "@radix-ui/themes": "^3.1.3",
     "@vanilla-extract/css": "^1.15.5",
     "astro": "^4.15.6",
+    "three": "0.159.0",
     "@react-three/drei": "^9.111.5",
     "@react-three/fiber": "^8.17.6",
     "astro-purgecss": "^4.6.0",
@@ -29,6 +30,9 @@
     "react-promise-suspense": "^0.3.4"
   },
   "devDependencies": {
-    "@vanilla-extract/vite-plugin": "^4.0.15"
+    "@types/three": "^0.160.0",
+    "@vanilla-extract/vite-plugin": "^4.0.15",
+    "@types/react-dom": "^18",
+    "@types/react": "^18.3.5"
   }
 }

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -9,6 +9,10 @@ import {
 } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
 import { useRef } from 'react';
+import { radToDeg } from 'three/src/math/MathUtils.js';
+import { resolveArmorIndex } from '../../../core/blitzkit/resolveArmorIndex';
+import { App } from '../../../stores/app';
+import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
 import { layerTypeNames } from './ShotDisplayCard';
 import { ArmorType } from './SpacedArmorScene';

packages/website/src/components/Armor/components/PrimaryArmorScene.tsx

@@ -6,6 +6,7 @@ import { resolveArmor } from '../../../core/blitzkit/resolveThickness';
 import { useArmor } from '../../../hooks/useArmor';
 import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
 import { useTankTransform } from '../../../hooks/useTankTransform';
+import { Duel } from '../../../stores/duel';
 import { ModelTankWrapper } from './ModelTankWrapper';
 import { PrimaryArmorSceneComponent } from './PrimaryArmorSceneComponent';
 

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/index.tsx

@@ -1,5 +1,5 @@
 import {
-  ShellDefinition,
+  type ShellDefinition,
   canSplash,
   isExplosive,
   resolveNearPenetration,
@@ -8,13 +8,13 @@ import {
 import { useFrame } from '@react-three/fiber';
 import { useEffect } from 'react';
 import { MeshBasicMaterial, Object3D, ShaderMaterial, Vector2 } from 'three';
-import { degToRad } from 'three/src/math/MathUtils';
+import { degToRad } from 'three/src/math/MathUtils.js';
-import { hasEquipment } from '../../../../../../website-legacy/src/core/blitzkit/hasEquipment';
+import { hasEquipment } from '../../../../core/blitzkit/hasEquipment';
-import { jsxTree } from '../../../../../../website-legacy/src/core/blitzkit/jsxTree';
+import { jsxTree } from '../../../../core/blitzkit/jsxTree';
-import * as Duel from '../../../../../../website-legacy/src/stores/duel';
+import { Duel, type EquipmentMatrix } from '../../../../stores/duel';
-import * as TankopediaPersistent from '../../../../../../website-legacy/src/stores/tankopediaPersistent';
+import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
-import fragmentShader from './shaders/fragment.glsl';
+import fragmentShader from './shaders/fragment.glsl?raw';
-import vertexShader from './shaders/vertex.glsl';
+import vertexShader from './shaders/vertex.glsl?raw';
 import { spacedArmorRenderTarget } from './target';
 
 interface PrimaryArmorSceneComponentProps {
@@ -76,15 +76,17 @@ export function PrimaryArmorSceneComponent({
       await handleProtagonistEquipmentChange(duel.protagonist.equipmentMatrix);
       await handleAntagonistEquipmentChange(duel.antagonist.equipmentMatrix);
     }
-    function handleVisualChange(
+    function handleGreenPenetrationChange(greenPenetration: boolean) {
-      visual: TankopediaPersistent.TankopediaPersistent['model']['visual'],
+      material.uniforms.greenPenetration.value = greenPenetration;
-    ) {
+    }
-      material.uniforms.greenPenetration.value = visual.greenPenetration;
+    function handleOpaqueChange(opaque: boolean) {
-      material.uniforms.opaque.value = visual.opaque || visual.wireframe;
+      material.uniforms.opaque.value = opaque;
-      material.wireframe = visual.wireframe;
+    }
+    function handleWireframeChange(wireframe: boolean) {
+      material.wireframe = wireframe;
     }
     async function handleProtagonistEquipmentChange(
-      equipment: Duel.EquipmentMatrix,
+      equipment: EquipmentMatrix,
     ) {
       const duel = duelStore.getState();
       const hasEnhancedArmor = await hasEquipment(
@@ -96,9 +98,7 @@ export function PrimaryArmorSceneComponent({
         ? thickness * 1.03
         : thickness;
     }
-    async function handleAntagonistEquipmentChange(
+    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
-      equipment: Duel.EquipmentMatrix,
-    ) {
       const duel = duelStore.getState();
       const shell = duel.antagonist.shell;
       const penetration = resolveNearPenetration(shell.penetration);
@@ -114,7 +114,11 @@ export function PrimaryArmorSceneComponent({
     }
 
     handleShellChange(duelStore.getState().antagonist.shell);
-    handleVisualChange(tankopediaPersistentStore.getState().model.visual);
+    handleGreenPenetrationChange(
+      tankopediaPersistentStore.getState().greenPenetration,
+    );
+    handleOpaqueChange(tankopediaPersistentStore.getState().opaque);
+    handleWireframeChange(tankopediaPersistentStore.getState().wireframe);
     handleProtagonistEquipmentChange(
       duelStore.getState().protagonist.equipmentMatrix,
     );
@@ -125,9 +129,10 @@ export function PrimaryArmorSceneComponent({
     const unsubscribes = [
       duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
       tankopediaPersistentStore.subscribe(
-        (state) => state.model.visual,
+        (state) => state.greenPenetration,
-        handleVisualChange,
+        handleGreenPenetrationChange,
       ),
+
       duelStore.subscribe(
         (state) => state.protagonist.equipmentMatrix,
         handleProtagonistEquipmentChange,

packages/website/src/components/Armor/components/ShotDisplay.tsx

@@ -1,9 +1,9 @@
-import { J_HAT, K_HAT } from '@blitzkit/core';
+import { K_HAT } from '@blitzkit/core';
-import { Box, Flex, Text } from '@radix-ui/themes';
+import { Box, Text } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
-import { type ComponentProps, useEffect, useRef } from 'react';
+import { useEffect, useRef, type ComponentProps } from 'react';
 import {
   BufferGeometry,
   DoubleSide,
@@ -16,12 +16,16 @@ import {
   Path,
   Quaternion,
 } from 'three';
-import { useFullScreen } from '../../../../../website-legacy/src/hooks/useFullScreen';
+import { useFullScreen } from '../../../hooks/useFullScreen';
-import * as TankopediaEphemeral from '../../../../../website-legacy/src/stores/tankopediaEphemeral';
+import {
+  TankopediaEphemeral,
+  type ShotLayerNonExternal,
+  type ShotStatus,
+} from '../../../stores/tankopediaEphemeral';
 import { ShotDisplayCard } from './ShotDisplayCard';
 
 export const shotStatusColors: Record<
-  TankopediaEphemeral.ShotStatus,
+  ShotStatus,
   ComponentProps<typeof Text>['color']
 > = {
   blocked: 'red',
@@ -127,16 +131,13 @@ export function ShotDisplay() {
     }, 0) + SHOT_DISPLAY_LENGTH_INFINITY;
   const outLength =
     shot.out && shot.out.layers.length > 0
-      ? (
+      ? (shot.in.layers.at(-1) as ShotLayerNonExternal).point.distanceTo(
-          shot.in.layers.at(-1) as TankopediaEphemeral.ShotLayerNonExternal
+          (shot.out.layers.at(-1) as ShotLayerNonExternal).point,
-        ).point.distanceTo(
-          (shot.out.layers.at(-1) as TankopediaEphemeral.ShotLayerNonExternal)
-            .point,
         )
       : SHOT_DISPLAY_LENGTH_INFINITY;
   const inLast = shot.in.layers.findLast(
     (layer) => layer.type !== null,
-  ) as TankopediaEphemeral.ShotLayerNonExternal;
+  ) as ShotLayerNonExternal;
   const outTitleColor = shot.out
     ? shotStatusColors[shot.out.status]
     : undefined;
@@ -182,7 +183,7 @@ export function ShotDisplay() {
         </Box>
       </Html>
 
-      {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => {
+      {/* {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => {
         if (layer.type === null) return null;
 
         const shotStatusColor =
@@ -275,7 +276,7 @@ export function ShotDisplay() {
             />
           </mesh>
         </group>
-      )}
+      )} */}
     </group>
   );
 }

packages/website/src/components/Armor/components/ShotDisplayCard.tsx

@@ -1,17 +1,11 @@
-import {
+import { Flex, Text } from '@radix-ui/themes';
-  Card,
-  CardProps,
-  Flex,
-  Inset,
-  Separator,
-  Text,
-} from '@radix-ui/themes';
 import type { ComponentProps } from 'react';
-import { radToDeg } from 'three/src/math/MathUtils';
+import type {
-import * as TankopediaEphemeral from '../../../../../website-legacy/src/stores/tankopediaEphemeral';
+  ShotLayer,
-import { shotStatusColors } from './ShotDisplay';
+  ShotStatus,
+} from '../../../stores/tankopediaEphemeral';
 import { ArmorType } from './SpacedArmorScene';
-import { ExternalModuleVariant } from './SpacedArmorSceneComponent';
+import type { ExternalModuleVariant } from './SpacedArmorSceneComponent';
 
 export const layerTypeNames: Record<ArmorType | 'null', string> = {
   [ArmorType.Primary]: 'Primary',
@@ -25,7 +19,7 @@ const externalLayerNames: Record<ExternalModuleVariant, string> = {
   track: 'Tracks',
 };
 
-const shotStatusNames: Record<TankopediaEphemeral.ShotStatus, string> = {
+const shotStatusNames: Record<ShotStatus, string> = {
   blocked: 'Blocked',
   ricochet: 'Ricochet',
   penetration: 'penetration',
@@ -42,7 +36,7 @@ function LayerEntry({
   layerIndex?: string;
   shotStatusColor: ComponentProps<typeof Text>['color'];
   layerName: string;
-  layer: TankopediaEphemeral.ShotLayer;
+  layer: ShotLayer;
   angle?: number;
 }) {
   return (
@@ -95,7 +89,7 @@ function LayerEntry({
 }
 
 interface ShotDisplayCardProps extends CardProps {
-  shot: TankopediaEphemeral.Shot;
+  shot: Shot;
 }
 
 export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {

packages/website/src/components/Armor/components/SpacedArmorScene.tsx

@@ -7,6 +7,7 @@ import { useArmor } from '../../../hooks/useArmor';
 import { useModel } from '../../../hooks/useModel';
 import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
 import { useTankTransform } from '../../../hooks/useTankTransform';
+import { Duel } from '../../../stores/duel';
 import { ModelTankWrapper } from './ModelTankWrapper';
 import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent';
 

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/index.tsx

@@ -16,8 +16,8 @@ import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
 import { jsxTree } from '../../../../../../core/blitzkit/jsxTree';
 import { Duel, type EquipmentMatrix } from '../../../../../../stores/duel';
 import { ArmorType } from '../../../SpacedArmorScene';
-import fragmentShader from './shaders/fragment.glsl';
+import fragmentShader from './shaders/fragment.glsl?raw';
-import vertexShader from './shaders/vertex.glsl';
+import vertexShader from './shaders/vertex.glsl?raw';
 
 interface SpacedArmorSubExternalProps {
   node: Object3D;

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/index.tsx

@@ -1,24 +1,24 @@
 import {
-  ShellDefinition,
   isExplosive,
   resolveNearPenetration,
   resolvePenetrationCoefficient,
+  type ShellDefinition,
 } from '@blitzkit/core';
 import { useEffect } from 'react';
 import {
   AdditiveBlending,
   MeshBasicMaterial,
-  Object3D,
   ShaderMaterial,
+  type Object3D,
 } from 'three';
-import { degToRad } from 'three/src/math/MathUtils';
+import { degToRad } from 'three/src/math/MathUtils.js';
-import { ArmorUserData } from '../..';
+import type { ArmorUserData } from '../..';
-import { hasEquipment } from '../../../../../../../../website-legacy/src/core/blitzkit/hasEquipment';
+import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
-import { jsxTree } from '../../../../../../../../website-legacy/src/core/blitzkit/jsxTree';
+import { jsxTree } from '../../../../../../core/blitzkit/jsxTree';
-import * as Duel from '../../../../../../../../website-legacy/src/stores/duel';
+import { Duel, type EquipmentMatrix } from '../../../../../../stores/duel';
 import { ArmorType } from '../../../SpacedArmorScene';
-import fragmentShader from './shaders/fragment.glsl';
+import fragmentShader from './shaders/fragment.glsl?raw';
-import vertexShader from './shaders/vertex.glsl';
+import vertexShader from './shaders/vertex.glsl?raw';
 
 interface SpacedArmorSubSpacedProps {
   node: Object3D;
@@ -66,7 +66,7 @@ export function SpacedArmorSubSpaced({
       );
     }
     async function handleProtagonistEquipmentChange(
-      equipment: Duel.EquipmentMatrix,
+      equipment: EquipmentMatrix,
     ) {
       const duel = duelStore.getState();
       const hasEnhancedArmor = await hasEquipment(
@@ -78,9 +78,7 @@ export function SpacedArmorSubSpaced({
         ? thickness * 1.03
         : thickness;
     }
-    async function handleAntagonistEquipmentChange(
+    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
-      equipment: Duel.EquipmentMatrix,
-    ) {
       const duel = duelStore.getState();
       const shell = duelStore.getState().antagonist.shell;
       const penetration = resolveNearPenetration(shell.penetration);

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

@@ -1,5 +1,5 @@
 import {
-  type ShellType,
+  ShellType,
   isExplosive,
   resolveNearPenetration,
   resolvePenetrationCoefficient,
@@ -16,9 +16,17 @@ import {
   Scene,
   Vector3,
 } from 'three';
-import { degToRad } from 'three/src/math/MathUtils';
+import { degToRad } from 'three/src/math/MathUtils.js';
-import * as Duel from '../../../../stores/duel';
+import { hasEquipment } from '../../../../core/blitzkit/hasEquipment';
-import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
+import { jsxTree } from '../../../../core/blitzkit/jsxTree';
+import { discardClippingPlane } from '../../../../core/three/discardClippingPlane';
+import { Duel } from '../../../../stores/duel';
+import {
+  type Shot,
+  type ShotLayerBase,
+  type ShotLayerNonExternal,
+  TankopediaEphemeral,
+} from '../../../../stores/tankopediaEphemeral';
 import { ArmorType } from '../SpacedArmorScene';
 import { SpacedArmorSubExternal } from './components/SpacedArmorSubExternal';
 import { SpacedArmorSubSpaced } from './components/SpacedArmorSubSpaced';
@@ -83,7 +91,7 @@ export function SpacedArmorSceneComponent({
       const { antagonist, protagonist } = duelStore.getState();
       const shell = antagonist.shell;
       const cameraNormal = camera.position.clone().sub(point).normalize();
-      const shot: TankopediaEphemeral.Shot = {
+      const shot: Shot = {
         splashRadius: shell.explosionRadius,
         damage: -1,
         containsGaps: shell.type === ShellType.HEAT,
@@ -157,9 +165,7 @@ export function SpacedArmorSceneComponent({
           );
 
         if (shell.type === ShellType.HEAT && index > 0) {
-          const lastLayer = shot.in.layers.at(
+          const lastLayer = shot.in.layers.at(-1) as ShotLayerBase;
-            -1,
-          ) as TankopediaEphemeral.ShotLayerBase;
           const distance = lastLayer.point.distanceTo(intersection.point);
           remainingPenetration -= 0.5 * remainingPenetration * distance;
           const blocked = remainingPenetration <= 0;
@@ -255,11 +261,9 @@ export function SpacedArmorSceneComponent({
       }
 
       const lastLayer = shot.in.layers.at(-1) as
-        | TankopediaEphemeral.ShotLayerNonExternal
+        | ShotLayerNonExternal
-        | undefined;
-      const firstLayer = shot.in.layers[0] as
-        | TankopediaEphemeral.ShotLayerBase
         | undefined;
+      const firstLayer = shot.in.layers[0] as ShotLayerBase | undefined;
 
       if (!lastLayer || !firstLayer) {
         return null;

packages/website/src/components/Armor/components/StaticArmor.tsx

@@ -12,6 +12,7 @@ import { useArmor } from '../../../hooks/useArmor';
 import { useModel } from '../../../hooks/useModel';
 import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
 import { useTankTransform } from '../../../hooks/useTankTransform';
+import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
 import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
 import { ModelTankWrapper } from './ModelTankWrapper';

packages/website/src/components/Armor/components/StaticArmorSceneComponent.tsx

@@ -1,5 +1,5 @@
 import { I_HAT, J_HAT } from '@blitzkit/core';
-import { MeshProps, useThree } from '@react-three/fiber';
+import { type MeshProps, useThree } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
 import { useEffect, useMemo } from 'react';
 import {
@@ -15,20 +15,20 @@ import {
   Quaternion,
   Vector3,
 } from 'three';
-import { unrotateDavaVector } from '../../../../../website-legacy/src/core/blitz/unrotateDavaVector';
+import { unrotateDavaVector } from '../../../core/blitz/unrotateDavaVector';
-import { jsxTree } from '../../../../../website-legacy/src/core/blitzkit/jsxTree';
+import { jsxTree } from '../../../core/blitzkit/jsxTree';
 import {
-  ModelTransformEventData,
+  type ModelTransformEventData,
   modelTransformEvent,
-} from '../../../../../website-legacy/src/core/blitzkit/modelTransform';
+} from '../../../core/blitzkit/modelTransform';
-import { discardClippingPlane } from '../../../../../website-legacy/src/core/three/discardClippingPlane';
+import { discardClippingPlane } from '../../../core/three/discardClippingPlane';
-import * as TankopediaEphemeral from '../../../../../website-legacy/src/stores/tankopediaEphemeral';
+import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
 import { ArmorType } from './SpacedArmorScene';
-import {
+import type {
   ArmorUserData,
   ExternalModuleVariant,
 } from './SpacedArmorSceneComponent';
-import { ThicknessRange } from './StaticArmor';
+import type { ThicknessRange } from './StaticArmor';
 
 type StaticArmorSceneComponentProps = {
   name: string;

packages/website/src/components/ModuleButtons/GenericTankComponentButton.tsx

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'react';
 import {
   TankComponentButton,
-  TankComponentButtonProps,
+  type TankComponentButtonProps,
 } from './TankComponentButton';
 
 interface GenericTankComponentButtonProps extends TankComponentButtonProps {

packages/website/src/components/ModuleButtons/ModuleButton.tsx

@@ -1,6 +1,6 @@
 import { asset } from '@blitzkit/core';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
-import { TankComponentButtonProps } from './TankComponentButton';
+import type { TankComponentButtonProps } from './TankComponentButton';
 
 interface ModuleProps extends TankComponentButtonProps {
   module: string;

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/DynamicArmorSwitcher.tsx

@@ -2,6 +2,7 @@ import { asset } from '@blitzkit/core';
 import { IconButton } from '@radix-ui/themes';
 import { invalidate } from '@react-three/fiber';
 import { useArmor } from '../../../../../../hooks/useArmor';
+import { Duel } from '../../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 
 export function DynamicArmorSwitcher() {

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx

@@ -1,12 +1,15 @@
 import { HeightIcon, WidthIcon } from '@radix-ui/react-icons';
 import { Flex, TextField } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
-import { degToRad, radToDeg } from 'three/src/math/MathUtils';
+import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
-import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
+import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
-import { modelTransformEvent, ModelTransformEventData } from '../../../../../../core/blitzkit/modelTransform';
+import {
-import { useEquipment } from '../../../../../../hooks/useEquipment';
+  type ModelTransformEventData,
-import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
+  modelTransformEvent,
-import * as Duel from '../../../../../../stores/duel';
+} from '../../../../../../../core/blitzkit/modelTransform';
+import { useEquipment } from '../../../../../../../hooks/useEquipment';
+import { useTankModelDefinition } from '../../../../../../../hooks/useTankModelDefinition';
+import { Duel } from '../../../../../../../stores/duel';
 import * as styles from './index.css';
 
 export function QuickInputs() {
@@ -22,13 +25,19 @@ export function QuickInputs() {
   const hasImprovedVerticalStabilizer = useEquipment(122);
 
   useEffect(() => {
-    yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+    if (!yawInput.current) return;
+
+    yawInput.current.value = radToDeg(protagonist.yaw).toFixed(1);
   }, [protagonist.yaw]);
+
   useEffect(() => {
-    pitchInput.current!.value = (
+    if (!pitchInput.current) return;
+
+    pitchInput.current.value = (
       -radToDeg(protagonist.pitch) + initialGunPitch
     ).toFixed(1);
   }, [protagonist.pitch]);
+
   useEffect(() => {
     function handleTransformEvent({ pitch, yaw }: ModelTransformEventData) {
       if (!pitchInput.current || !yawInput.current) return;
@@ -66,10 +75,8 @@ export function QuickInputs() {
       <TextField.Root
         size="1"
         radius="full"
-        style={{
+        style={{ flex: 1, textAlign: 'right' }}
-          flex: 1,
+        defaultValue="0.0"
-          textAlign: 'right',
-        }}
         onBlur={() => {
           const value = Number(yawInput.current!.value);
           if (isNaN(value)) {
@@ -98,23 +105,17 @@ export function QuickInputs() {
         onFocus={() => yawInput.current?.focus()}
         ref={yawInput}
       >
-        <TextField.Slot
+        <TextField.Slot style={{ userSelect: 'none' }}>
-          style={{
-            userSelect: 'none',
-          }}
-        >
           <WidthIcon />
         </TextField.Slot>
-        <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
+        <TextField.Slot />
       </TextField.Root>
 
       <TextField.Root
         size="1"
         radius="full"
-        style={{
+        style={{ flex: 1, textAlign: 'right' }}
-          flex: 1,
+        defaultValue="0.0"
-          textAlign: 'right',
-        }}
         onBlur={() => {
           const value = Number(pitchInput.current!.value);
           if (isNaN(value)) {
@@ -154,13 +155,7 @@ export function QuickInputs() {
         >
           <HeightIcon />
         </TextField.Slot>
-        <TextField.Slot
+        <TextField.Slot />
-          style={{
-            userSelect: 'none',
-          }}
-        >
-          °
-        </TextField.Slot>
       </TextField.Root>
     </Flex>
   );

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx

@@ -1,11 +1,11 @@
 import { EyeClosedIcon, EyeOpenIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { Box, Button, Checkbox, Flex, Text } from '@radix-ui/themes';
-import { ThicknessRange } from '../../../../../components/Armor/components/StaticArmor';
+import { useArmor } from '../../../../../../hooks/useArmor';
-import { useArmor } from '../../../../../hooks/useArmor';
+import { Duel } from '../../../../../../stores/duel';
-import * as Duel from '../../../../../stores/duel';
+import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
-import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
+import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
-import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
+import type { ThicknessRange } from '../../../../../Armor/components/StaticArmor';
-import { DynamicArmorSwitcher } from './Model/components/Options/components/DynamicArmorSwitcher';
+import { DynamicArmorSwitcher } from './DynamicArmorSwitcher';
 
 interface ThicknessesProps {
   thicknessRange: ThicknessRange;
@@ -13,13 +13,13 @@ interface ThicknessesProps {
 
 export function Thicknesses({ thicknessRange }: ThicknessesProps) {
   const showExternalModules = TankopediaPersistent.use(
-    (state) => state.model.visual.showExternalModules,
+    (state) => state.showExternalModules,
   );
   const showSpacedArmor = TankopediaPersistent.use(
-    (state) => state.model.visual.showSpacedArmor,
+    (state) => state.showSpacedArmor,
   );
   const showPrimaryArmor = TankopediaPersistent.use(
-    (state) => state.model.visual.showPrimaryArmor,
+    (state) => state.showPrimaryArmor,
   );
   const mutateDuel = Duel.useMutation();
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
@@ -46,8 +46,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
         style={{ opacity: showPrimaryArmor ? 1 : 0.5, cursor: 'pointer' }}
         onClick={() => {
           mutateTankopediaPersistent((draft) => {
-            draft.model.visual.showPrimaryArmor =
+            draft.showPrimaryArmor = !draft.showPrimaryArmor;
-              !draft.model.visual.showPrimaryArmor;
           });
           mutateTankopediaEphemeral((draft) => {
             draft.highlightArmor = undefined;
@@ -83,8 +82,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
         style={{ opacity: showSpacedArmor ? 1 : 0.5, cursor: 'pointer' }}
         onClick={() => {
           mutateTankopediaPersistent((draft) => {
-            draft.model.visual.showSpacedArmor =
+            draft.showSpacedArmor = !draft.showSpacedArmor;
-              !draft.model.visual.showSpacedArmor;
           });
           mutateTankopediaEphemeral((draft) => {
             draft.highlightArmor = undefined;
@@ -119,8 +117,7 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
         style={{ opacity: showExternalModules ? 1 : 0.5, cursor: 'pointer' }}
         onClick={() => {
           mutateTankopediaPersistent((draft) => {
-            draft.model.visual.showExternalModules =
+            draft.showExternalModules = !draft.showExternalModules;
-              !draft.model.visual.showExternalModules;
           });
           mutateTankopediaEphemeral((draft) => {
             draft.highlightArmor = undefined;

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -28,22 +28,24 @@ import {
   Tooltip,
 } from '@radix-ui/themes';
 import { invalidate } from '@react-three/fiber';
-import { type RefObject, useState } from 'react';
+import { useState, type RefObject } from 'react';
 import { ENVIRONMENTS } from '../../../../../constants/lightingEnvironments';
 import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
 import { useEquipment } from '../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../hooks/useFullScreen';
 import { useFullscreenAvailability } from '../../../../../hooks/useFullscreenAvailability';
-import { useStoreBoolean } from '../../../../../hooks/useStoreBoolean';
+import { App } from '../../../../../stores/app';
-import { useStoreKey } from '../../../../../hooks/useStoreKey';
+import { Duel } from '../../../../../stores/duel';
-import { $app } from '../../../../../stores/app';
+import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
-import { $tankopediaPersistent } from '../../../../../stores/tankopediaPersistent';
+import { TankopediaPersistent } from '../../../../../stores/tankopediaPersistent';
 import { TankopediaDisplay } from '../../../../../stores/tankopediaPersistent/constants';
 import type { ThicknessRange } from '../../../../Armor/components/StaticArmor';
 import { ModuleButton } from '../../../../ModuleButtons/ModuleButton';
 import { SmallTankIcon } from '../../../../SmallTankIcon';
 import { TankSearch } from '../../../../TankSearch';
 import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher';
+import { QuickInputs } from './components/QuickInputs';
+import { Thicknesses } from './components/Thicknesses';
 
 interface OptionsProps {
   thicknessRange: ThicknessRange;
@@ -51,23 +53,20 @@ interface OptionsProps {
 }
 
 export function Options({ thicknessRange, canvas }: OptionsProps) {
-  // const { display } = useStore($tankopediaPersistent, { keys: ['display'] });
+  const display = TankopediaPersistent.use((state) => state.display);
-  const display = useStoreKey($tankopediaPersistent, 'display');
   const isFullScreen = useFullScreen();
-  const showGrid = useStoreBoolean($tankopediaPersistent, 'showGrid');
+  const showGrid = TankopediaPersistent.use((state) => state.showGrid);
-  const showEnvironment = useStoreBoolean(
+  const showEnvironment = TankopediaPersistent.use(
-    $tankopediaPersistent,
+    (state) => state.showEnvironment,
-    'showEnvironment',
   );
-  const greenPenetration = useStoreBoolean(
+  const greenPenetration = TankopediaPersistent.use(
-    $tankopediaPersistent,
+    (state) => state.greenPenetration,
-    'greenPenetration',
   );
-  const wireframe = useStoreBoolean($tankopediaPersistent, 'wireframe');
+  const wireframe = TankopediaPersistent.use((state) => state.wireframe);
-  const opaque = useStoreBoolean($tankopediaPersistent, 'opaque');
+  const opaque = TankopediaPersistent.use((state) => state.opaque);
   const fullScreenAvailable = useFullscreenAvailability();
-  const environment = useStoreKey($tankopediaPersistent, 'environment');
+  const environment = TankopediaPersistent.use((state) => state.environment);
-  const developerMode = useStoreBoolean($app, 'developerMode');
+  const developerMode = App.use((state) => state.developerMode);
   const protagonistTank = Duel.use((state) => state.protagonist.tank);
   const antagonistGun = Duel.use((state) => state.antagonist.gun);
   const antagonistShell = Duel.use((state) => state.antagonist.shell);
@@ -78,6 +77,8 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
   const mutateDuel = Duel.useMutation();
   const hasEnhancedArmor = useEquipment(110);
   const antagonistUniqueGuns = uniqueGuns(antagonistTank.turrets);
+  const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   return (
     <>
@@ -395,7 +396,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                     checked={greenPenetration}
                     onCheckedChange={(checked) => {
                       mutateTankopediaPersistent((draft) => {
-                        draft.model.visual.greenPenetration = checked;
+                        draft.greenPenetration = checked;
                       });
                     }}
                   >
@@ -406,7 +407,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                     checked={opaque}
                     onCheckedChange={(checked) => {
                       mutateTankopediaPersistent((draft) => {
-                        draft.model.visual.opaque = checked;
+                        draft.opaque = checked;
                       });
                     }}
                   >
@@ -418,7 +419,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                       checked={wireframe}
                       onCheckedChange={(checked) => {
                         mutateTankopediaPersistent((draft) => {
-                          draft.model.visual.wireframe = checked;
+                          draft.wireframe = checked;
                         });
                       }}
                     >
@@ -434,7 +435,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                 checked={showGrid}
                 onCheckedChange={(checked) => {
                   mutateTankopediaPersistent((draft) => {
-                    draft.model.visual.showGrid = checked;
+                    draft.showGrid = checked;
                   });
                 }}
               >
@@ -445,7 +446,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                 checked={showEnvironment}
                 onCheckedChange={(checked) => {
                   mutateTankopediaPersistent((draft) => {
-                    draft.model.visual.showEnvironment = checked;
+                    draft.showEnvironment = checked;
                   });
                 }}
               >
@@ -463,7 +464,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                         value={environment}
                         onClick={() => {
                           mutateTankopediaPersistent((draft) => {
-                            draft.model.visual.environment = environment;
+                            draft.environment = environment;
                           });
                         }}
                       >

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx

@@ -4,12 +4,12 @@ import { useThree } from '@react-three/fiber';
 import { useEffect, useRef, useState } from 'react';
 import { Vector3 } from 'three';
 import { OrbitControls as OrbitControlsClass } from 'three-stdlib';
-import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
+import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
-import { hasEquipment } from '../../../../../core/blitzkit/hasEquipment';
+import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
-import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
+import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
-import { useAwait } from '../../../../../hooks/useAwait';
+import { useAwait } from '../../../../../../hooks/useAwait';
-import * as Duel from '../../../../../stores/duel';
+import { Duel } from '../../../../../../stores/duel';
-import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
+import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 
 const initialPosition = [0, 4, -18] as const;
 const poseDistances: Record<Pose, number> = {

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx

@@ -1,17 +1,15 @@
 import { Environment } from '@react-three/drei';
-import { useModel } from '../../../../../hooks/useModel';
+import { useModel } from '../../../../../../hooks/useModel';
-import * as Duel from '../../../../../stores/duel';
+import { Duel } from '../../../../../../stores/duel';
-import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
+import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
 
 export function Lighting() {
   const protagonist = Duel.use((state) => state.protagonist);
   const { hasPbr } = useModel(protagonist.tank.id);
   const showEnvironment = TankopediaPersistent.use(
-    (state) => state.model.visual.showEnvironment,
+    (state) => state.showEnvironment,
-  );
-  const environment = TankopediaPersistent.use(
-    (state) => state.model.visual.environment,
   );
+  const environment = TankopediaPersistent.use((state) => state.environment);
 
   return (
     <>

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps.tsx

@@ -2,12 +2,11 @@ import { useFrame, useLoader } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
 import { useRef } from 'react';
 import { MeshStandardMaterial, TextureLoader } from 'three';
-import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
+import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
 
 export function SceneProps() {
   const show = TankopediaPersistent.use(
-    (state) =>
+    (state) => state.showGrid && !state.showEnvironment,
-      state.model.visual.showGrid && !state.model.visual.showEnvironment,
   );
   const texture = useLoader(TextureLoader, 'https://i.imgur.com/C28Z8nU.png');
   const material = useRef<MeshStandardMaterial>(null);

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx

@@ -1,19 +1,19 @@
 import { normalizeAngleRad } from '@blitzkit/core';
-import { invalidate, ThreeEvent, useThree } from '@react-three/fiber';
+import { invalidate, useThree, type ThreeEvent } 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 { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
+import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
-import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment';
+import { jsxTree } from '../../../../../../core/blitzkit/jsxTree';
-import { jsxTree } from '../../../../../../../core/blitzkit/jsxTree';
+import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
-import { modelTransformEvent } from '../../../../../../../core/blitzkit/modelTransform';
+import { useModel } from '../../../../../../hooks/useModel';
-import { useModel } from '../../../../../../../hooks/useModel';
+import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
-import { useTankModelDefinition } from '../../../../../../../hooks/useTankModelDefinition';
+import { useTankTransform } from '../../../../../../hooks/useTankTransform';
-import { useTankTransform } from '../../../../../../../hooks/useTankTransform';
+import { Duel } from '../../../../../../stores/duel';
-import * as Duel from '../../../../../../../stores/duel';
+import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
-import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
+import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
-import * as TankopediaPersistent from '../../../../../../../stores/tankopediaPersistent';
+import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
-import { TankopediaDisplay } from '../../../../../../../stores/tankopediaPersistent/constants';
+import { ModelTankWrapper } from '../../../../../Armor/components/ModelTankWrapper';
 
 export const TankModel = memo(() => {
   const mutateDuel = Duel.useMutation();

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx

@@ -6,29 +6,29 @@ import {
   useImperativeHandle,
   useRef,
 } from 'react';
-import { Armor } from '../../../../../../components/Armor';
+import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
-import { ArmorPlateDisplay } from '../../../../../../components/Armor/components/ArmorPlateDisplay';
+import { modelTransformEvent } from '../../../../../core/blitzkit/modelTransform';
-import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
+import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
+import { useEquipment } from '../../../../../hooks/useEquipment';
+import { useOnScreen } from '../../../../../hooks/useOnScreen';
+import { useTankModelDefinition } from '../../../../../hooks/useTankModelDefinition';
+import { Duel } from '../../../../../stores/duel';
+import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
+import { TankopediaPersistent } from '../../../../../stores/tankopediaPersistent';
+import { TankopediaDisplay } from '../../../../../stores/tankopediaPersistent/constants';
+import { Armor } from '../../../../Armor';
+import { ArmorPlateDisplay } from '../../../../Armor/components/ArmorPlateDisplay';
+import { ShotDisplay } from '../../../../Armor/components/ShotDisplay';
 import {
   StaticArmor,
-  ThicknessRange,
+  type ThicknessRange,
-} from '../../../../../../components/Armor/components/StaticArmor';
+} from '../../../../Armor/components/StaticArmor';
-import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
+import { AutoClear } from './components/AutoClear';
-import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
+import { Controls } from './components/Control';
-import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
+import { Lighting } from './components/Lighting';
-import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { ModelLoader } from './components/ModelLoader';
-import { useOnScreen } from '../../../../../../hooks/useOnScreen';
+import { SceneProps } from './components/SceneProps';
-import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
+import { TankModel } from './components/TankModel';
-import * as Duel from '../../../../../../stores/duel';
-import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
-import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent';
-import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
-import { Controls } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Control';
-import { Lighting } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Lighting';
-import { SceneProps } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/SceneProps';
-import { AutoClear } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Model/AutoClear';
-import { ModelLoader } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader';
-import { TankModel } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/TankModel';
 
 interface TankSandboxProps {
   thicknessRange: ThicknessRange;
@@ -178,7 +178,6 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
         <Controls />
         <SceneProps />
         {display !== TankopediaDisplay.StaticArmor && <TankModel />}
-
         <ShotDisplay />
         <ArmorPlateDisplay />
         <AutoClear />

packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx

@@ -1,5 +1,5 @@
 import { tankIcon } from '@blitzkit/core';
-import { Flex, FlexProps, Progress } from '@radix-ui/themes';
+import { Flex, type FlexProps, Progress } from '@radix-ui/themes';
 import { useProgress } from '@react-three/drei';
 
 type TankSandboxLoaderProps = Omit<FlexProps, 'id'> & {

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -4,6 +4,7 @@ import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import { NAVBAR_HEIGHT } from '../../../constants/navbar';
 import { Var } from '../../../core/radix/var';
 import { useFullScreen } from '../../../hooks/useFullScreen';
+import { Duel } from '../../../stores/duel';
 import type { ThicknessRange } from '../../Armor/components/StaticArmor';
 import { classIcons } from '../../ClassIcon';
 import { Options } from './components/Options';
@@ -12,14 +13,10 @@ import { TankSandboxLoader } from './components/TankSandboxLoader';
 
 const awaitedTankDefinitions = await tankDefinitions;
 
-interface HeroSectionProps {
+export function HeroSection() {
-  id: number;
-}
-
-export function HeroSection({ id }: HeroSectionProps) {
   const canvas = useRef<HTMLCanvasElement>(null);
   const isFullScreen = useFullScreen();
-  const protagonist = awaitedTankDefinitions[id];
+  const protagonist = Duel.use((state) => state.protagonist.tank);
   const Icon = classIcons[protagonist.class];
   const [dummyLoader, setDummyLoader] = useState(true);
   const treeColor =

packages/website/src/core/blitz/applyPitchYawLimits.ts

@@ -1,6 +1,10 @@
-import { normalizeAngleRad, PitchLimits, YawLimits } from '@blitzkit/core';
+import {
+  normalizeAngleRad,
+  type PitchLimits,
+  type YawLimits,
+} from '@blitzkit/core';
 import { clamp } from 'lodash-es';
-import { degToRad } from 'three/src/math/MathUtils';
+import { degToRad } from 'three/src/math/MathUtils.js';
 
 export function applyPitchYawLimits(
   pitch: number, // rad

packages/website/src/core/blitzkit/hasEquipment.ts

@@ -1,5 +1,5 @@
 import { equipmentDefinitions } from '@blitzkit/core';
-import { EquipmentMatrix } from '../../stores/duel';
+import type { EquipmentMatrix } from '../../stores/duel';
 
 export async function hasEquipment(
   id: number,

packages/website/src/core/blitzkit/resolveThickness.ts

@@ -1,4 +1,4 @@
-import { ModelArmor } from '@blitzkit/core';
+import type { ModelArmor } from '@blitzkit/core';
 
 export function resolveArmor(armor: ModelArmor, index: number) {
   const spaced = armor.spaced?.includes(index) ?? false;

packages/website/src/core/blitzkit/tankToDuelMember.ts

@@ -1,9 +1,9 @@
 import {
   availableProvisions,
-  ProvisionDefinitions,
+  type ProvisionDefinitions,
-  TankDefinition,
+  type TankDefinition,
 } from '@blitzkit/core';
-import { DuelMember } from '../../stores/duel';
+import type { DuelMember } from '../../stores/duel';
 import { genericDefaultEquipmentMatrix } from '../../stores/duel/constants';
 
 const PROVISION_PREFERENCES = [

packages/website/src/hooks/useEquipment.ts

@@ -1,6 +1,6 @@
 import { equipmentDefinitions } from '@blitzkit/core';
 import { useMemo } from 'react';
-import * as Duel from '../stores/duel';
+import { Duel } from '../stores/duel';
 
 const awaitedEquipmentDefinitions = await equipmentDefinitions;
 

packages/website/src/hooks/useTankModelDefinition.ts

@@ -1,4 +1,4 @@
-import * as TankopediaEphemeral from '../stores/tankopediaEphemeral';
+import { TankopediaEphemeral } from '../stores/tankopediaEphemeral';
 
 export function useTankModelDefinition() {
   return TankopediaEphemeral.use((state) => state.model);

packages/website/src/hooks/useTankTransform.ts

@@ -1,13 +1,13 @@
 import { I_HAT, J_HAT, K_HAT } from '@blitzkit/core';
 import { type RefObject, useEffect } from 'react';
 import { Euler, Group, Vector3 } from 'three';
-import { degToRad } from 'three/src/math/MathUtils';
+import { degToRad } from 'three/src/math/MathUtils.js';
 import { correctZYTuple } from '../core/blitz/correctZYTuple';
 import {
-  ModelTransformEventData,
+  type ModelTransformEventData,
   modelTransformEvent,
 } from '../core/blitzkit/modelTransform';
-import { DuelMember } from '../stores/duel';
+import type { DuelMember } from '../stores/duel';
 import { useTankModelDefinition } from './useTankModelDefinition';
 
 export function useTankTransform(

packages/website/src/pages/tools/tankopedia/[id]/index.astro

@@ -1,6 +1,7 @@
 ---
 import { tankDefinitions } from '@blitzkit/core';
 import type { GetStaticPaths } from 'astro';
+import ToolLayout from '../../../../layouts/ToolLayout.astro';
 import { Page } from './index';
 
 export const getStaticPaths = (async () => {
@@ -14,4 +15,6 @@ export const getStaticPaths = (async () => {
 const { id } = Astro.params;
 ---
 
-<Page id={id} client:load />
+<ToolLayout>
+  <Page id={id} client:load />
+</ToolLayout>

packages/website/src/pages/tools/tankopedia/[id]/index.tsx

@@ -1,15 +1,37 @@
+import {
+  modelDefinitions,
+  provisionDefinitions,
+  tankDefinitions,
+} from '@blitzkit/core';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import { HeroSection } from '../../../../components/Tankopedia/HeroSection';
+import { App } from '../../../../stores/app';
+import { Duel } from '../../../../stores/duel';
+import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
+import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
 
 interface PageProps {
   id: number;
 }
 
+const awaitedTankDefinitions = await tankDefinitions;
+const awaitedProvisionDefinitions = await provisionDefinitions;
+const awaitedModelDefinitions = await modelDefinitions;
+
 export function Page({ id }: PageProps) {
+  const tank = awaitedTankDefinitions[id];
+  const model = awaitedModelDefinitions[id];
+
   return (
-    <PageWrapper p="0" noMaxWidth color="purple" size={1600} gap="9">
+    <TankopediaEphemeral.Provider data={model}>
-      <HeroSection id={id} />
+      <App.Provider>
-      {/* <ShotDisplaySection />
+        <TankopediaPersistent.Provider>
+          <Duel.Provider
+            data={{ tank, provisionDefinitions: awaitedProvisionDefinitions }}
+          >
+            <PageWrapper p="0" noMaxWidth color="purple" size={1600} gap="9">
+              <HeroSection />
+              {/* <ShotDisplaySection />
       <MetaSection />
       <TechTreeSection />
       {!exempt && <AdMidSectionResponsive />}
@@ -20,6 +42,10 @@ export function Page({ id }: PageProps) {
       <VideoSection />
       <HistorySection />
       {!exempt && <AdMidSectionResponsive mb="6" />} */}
-    </PageWrapper>
+            </PageWrapper>
+          </Duel.Provider>
+        </TankopediaPersistent.Provider>
+      </App.Provider>
+    </TankopediaEphemeral.Provider>
   );
 }

packages/website/src/stores/duel/constants.ts

@@ -1,4 +1,4 @@
-import { EquipmentMatrix } from '.';
+import type { EquipmentMatrix } from '.';
 
 export const genericDefaultEquipmentMatrix: EquipmentMatrix = [
   [-1, 1, -1],

packages/website/src/stores/tankPerformancePersistent/index.ts

@@ -1,4 +1,4 @@
-import lodash from 'lodash-es';
+import * as lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { createContextualStore } from '../../core/zustand/createContextualStore';

packages/website/src/stores/tankopediaEphemeral.ts

@@ -1,8 +1,8 @@
 import type { ModelDefinition } from '@blitzkit/core';
-import { Vector3 } from 'three';
+import type { Vector3 } from 'three';
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
-import { ArmorType } from '../components/Armor/components/SpacedArmorScene';
+import type { ArmorType } from '../components/Armor/components/SpacedArmorScene';
 import type { ExternalModuleVariant } from '../components/Armor/components/SpacedArmorSceneComponent';
 import type { XP_MULTIPLIERS } from '../components/Tankopedia/TechTreeSection';
 import { createContextualStore } from '../core/zustand/createContextualStore';
@@ -66,19 +66,6 @@ export type ArmorPiercingLayer =
       gap: number;
     };
 
-export const TankopediaEphemeral = createContextualStore(
-  (model: ModelDefinition) =>
-    create<TankopediaEphemeral>()(
-      subscribeWithSelector<TankopediaEphemeral>(() => ({
-        editStatic: false,
-        skills: {},
-        model,
-        controlsEnabled: true,
-        xpMultiplier: 1,
-      })),
-    ),
-);
-
 interface TankopediaEphemeral {
   shot?: Shot;
   skills: Record<string, number>;
@@ -101,3 +88,16 @@ interface TankopediaEphemeral {
   );
   xpMultiplier: (typeof XP_MULTIPLIERS)[number];
 }
+
+export const TankopediaEphemeral = createContextualStore(
+  (model: ModelDefinition) =>
+    create<TankopediaEphemeral>()(
+      subscribeWithSelector<TankopediaEphemeral>(() => ({
+        editStatic: false,
+        skills: {},
+        model,
+        controlsEnabled: true,
+        xpMultiplier: 1,
+      })),
+    ),
+);

packages/website/src/stores/tankopediaPersistent/index.ts

@@ -1,6 +1,6 @@
 import * as lodash from 'lodash-es';
 import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { ENVIRONMENTS } from '../../constants/lightingEnvironments';
 import { createContextualStore } from '../../core/zustand/createContextualStore';
 import { SORT_NAMES, TankopediaDisplay } from './constants';
@@ -31,13 +31,13 @@ export interface TankopediaPersistentStore {
 export const TankopediaPersistent = createContextualStore(() =>
   create<TankopediaPersistentStore>()(
     persist(
-      (set) => ({
+      subscribeWithSelector<TankopediaPersistentStore>(() => ({
         wireframe: false,
         opaque: false,
         environment: ENVIRONMENTS[0],
         showGrid: true,
-        greenPenetration: true,
+        greenPenetration: false,
-        showEnvironment: true,
+        showEnvironment: false,
         showSpacedArmor: true,
         showExternalModules: true,
         showPrimaryArmor: true,
@@ -46,7 +46,7 @@ export const TankopediaPersistent = createContextualStore(() =>
           direction: 'ascending',
         },
         display: TankopediaDisplay.Model,
-      }),
+      })),
       { name: 'tankopedia', merge: (a, b) => lodash.merge(b, a) },
     ),
   ),