feat: migration 2

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

@@ -0,0 +1,189 @@
+import { ReloadIcon } from '@radix-ui/react-icons';
+import {
+  Card,
+  Code,
+  Flex,
+  IconButton,
+  Text,
+  TextField,
+} from '@radix-ui/themes';
+import { Html } from '@react-three/drei';
+import { useRef } from 'react';
+import { radToDeg } from 'three/src/math/MathUtils';
+import * as App from '../../../stores/app';
+import * as Duel from '../../../stores/duel';
+import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
+import { layerTypeNames } from './ShotDisplayCard';
+import { ArmorType } from './SpacedArmorScene';
+
+export function ArmorPlateDisplay() {
+  const highlightArmor = TankopediaEphemeral.use(
+    (state) => state.highlightArmor,
+  );
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const developerMode = App.useDeferred(false, (state) => state.developerMode);
+  const duelStore = Duel.useStore();
+  const input = useRef<HTMLInputElement>(null);
+  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
+
+  if (highlightArmor === undefined) return null;
+
+  return (
+    <group position={highlightArmor.point}>
+      <Html
+        center
+        style={{ pointerEvents: highlightArmor.editingPlate ? 'auto' : 'none' }}
+      >
+        <Card
+          mb="4"
+          style={{
+            whiteSpace: 'nowrap',
+            color: highlightArmor.color,
+            transform: 'translateY(-50%)',
+          }}
+        >
+          <Flex direction="column">
+            <Text weight="bold">
+              {layerTypeNames[highlightArmor.type]}{' '}
+              {highlightArmor.thickness.toFixed(0)}
+              <Text size="1" weight="regular">
+                mm
+              </Text>
+            </Text>
+
+            {highlightArmor.type !== ArmorType.External && (
+              <Text size="2" color="gray">
+                {highlightArmor.thicknessAngled.toFixed(0)}
+                <Text size="1">
+                  mm {radToDeg(highlightArmor.angle).toFixed(0)}°
+                </Text>
+              </Text>
+            )}
+
+            {developerMode && (
+              <>
+                <Text mt="2" color="gray" size="2">
+                  <b>DEV:</b> <Code>{highlightArmor.name}</Code>
+                </Text>
+              </>
+            )}
+
+            {highlightArmor.editingPlate && (
+              <Flex gap="2" align="center">
+                <TextField.Root
+                  style={{ width: 96 }}
+                  mt="2"
+                  ref={input}
+                  key={highlightArmor.name}
+                  type="number"
+                  autoFocus
+                  onFocus={(event) => event.target.select()}
+                  onKeyDown={(event) => {
+                    if (!highlightArmor.editingPlate) return;
+
+                    const index = resolveArmorIndex(highlightArmor.name);
+
+                    if (index === undefined) return;
+
+                    const thickness = event.currentTarget.valueAsNumber;
+
+                    if (isNaN(thickness) || thickness < 0) return;
+
+                    if (event.key === 'Enter') {
+                      input.current?.blur();
+
+                      mutateTankopediaEphemeral((draft) => {
+                        draft.highlightArmor = undefined;
+                        const { protagonist } = duelStore.getState();
+                        const tank = draft.model;
+                        const turret = tank.turrets[protagonist.turret.id];
+                        const gun = turret.guns[protagonist.gun.id];
+                        const track = tank.tracks[protagonist.track.id];
+
+                        console.log(highlightArmor.name);
+                        if (highlightArmor.name.startsWith('hull_')) {
+                          tank.armor.thickness[index] = thickness;
+                        } else if (highlightArmor.name.startsWith('turret_')) {
+                          turret.armor.thickness[index] = thickness;
+                        } else if (highlightArmor.name.startsWith('gun_')) {
+                          if (highlightArmor.name.includes('_armor_')) {
+                            gun.armor.thickness[index] = thickness;
+                          } else {
+                            gun.thickness = thickness;
+                          }
+                        } else if (highlightArmor.name.startsWith('chassis_')) {
+                          track.thickness = thickness;
+                        }
+                      });
+                    } else if (event.key === 'Escape') {
+                      input.current?.blur();
+                      mutateTankopediaEphemeral((draft) => {
+                        draft.highlightArmor = undefined;
+                      });
+                    }
+                  }}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                  }}
+                  defaultValue={highlightArmor.thickness.toFixed(0)}
+                >
+                  <TextField.Slot side="right">mm</TextField.Slot>
+                </TextField.Root>
+
+                <IconButton
+                  mt="2"
+                  color="red"
+                  onClick={() => {
+                    mutateTankopediaEphemeral((draft) => {
+                      if (!highlightArmor.editingPlate) return;
+
+                      const index = resolveArmorIndex(highlightArmor.name);
+
+                      if (index === undefined) return;
+
+                      draft.highlightArmor = undefined;
+                      const initialState =
+                        tankopediaEphemeralStore.getInitialState();
+                      const { protagonist } = duelStore.getState();
+                      const tank = draft.model;
+                      const initialTank = initialState.model;
+                      const turret = tank.turrets[protagonist.turret.id];
+                      const initialTurret =
+                        initialTank.turrets[protagonist.turret.id];
+                      const gun = turret.guns[protagonist.gun.id];
+                      const initialGun = initialTurret.guns[protagonist.gun.id];
+                      const track = tank.tracks[protagonist.track.id];
+                      const initialTrack =
+                        initialTank.tracks[protagonist.track.id];
+
+                      console.log(highlightArmor.name);
+                      if (highlightArmor.name.startsWith('hull_')) {
+                        tank.armor.thickness[index] =
+                          initialTank.armor.thickness[index];
+                      } else if (highlightArmor.name.startsWith('turret_')) {
+                        turret.armor.thickness[index] =
+                          initialTurret.armor.thickness[index];
+                      } else if (highlightArmor.name.startsWith('gun_')) {
+                        if (highlightArmor.name.includes('_armor_')) {
+                          gun.armor.thickness[index] =
+                            initialGun.armor.thickness[index];
+                        } else {
+                          gun.thickness = initialGun.thickness;
+                        }
+                      } else if (highlightArmor.name.startsWith('chassis_')) {
+                        track.thickness = initialTrack.thickness;
+                      }
+                    });
+                  }}
+                >
+                  <ReloadIcon />
+                </IconButton>
+              </Flex>
+            )}
+          </Flex>
+        </Card>
+      </Html>
+    </group>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { GroupProps } from '@react-three/fiber';
+import { forwardRef } from 'react';
+import { Group } from 'three';
+
+export const ModelTankWrapper = forwardRef<Group, GroupProps>((props, ref) => {
+  return <group rotation={[-Math.PI / 2, 0, 0]} ref={ref} {...props} />;
+});

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

@@ -0,0 +1,138 @@
+import { memo, useRef } from 'react';
+import { Group } from 'three';
+import { useArmor } from '../../../hooks/useArmor';
+import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
+import { useTankTransform } from '../../../hooks/useTankTransform';
+import * as Duel from '../../../stores/duel';
+import { ModelTankWrapper } from './ModelTankWrapper';
+import { PrimaryArmorSceneComponent } from './PrimaryArmorSceneComponent';
+
+export const PrimaryArmorScene = memo(() => {
+  const wrapper = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null);
+  const gunContainer = useRef<Group>(null);
+  const protagonist = Duel.use((draft) => draft.protagonist);
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const track = Duel.use((state) => state.protagonist.track);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const armorGltf = useArmor(tank.id).gltf;
+  const armorNodes = Object.values(armorGltf.nodes);
+  const tankModelDefinition = useTankModelDefinition();
+  const trackModelDefinition = tankModelDefinition.tracks[track.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+  const hullOrigin = correctZYTuple(trackModelDefinition.origin);
+  const turretOrigin = correctZYTuple(tankModelDefinition.turretOrigin);
+  const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
+  const isDynamicArmorActive = Duel.use((state) =>
+    state.protagonist.consumables.includes(73),
+  );
+
+  useTankTransform(protagonist, turretContainer, gunContainer);
+
+  return (
+    <ModelTankWrapper ref={wrapper}>
+      <group position={hullOrigin}>
+        {armorNodes.map((node) => {
+          const isHull = node.name.startsWith('hull_');
+          const isVisible = isHull;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            tankModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            spaced ||
+            thickness === undefined ||
+            (isDynamicArmorActive && node.name.includes('state_01')) ||
+            (!isDynamicArmorActive && node.name.includes('state_00'))
+          )
+            return null;
+
+          return (
+            <PrimaryArmorSceneComponent
+              key={node.uuid}
+              thickness={thickness}
+              node={node}
+            />
+          );
+        })}
+      </group>
+
+      <group ref={turretContainer}>
+        {armorNodes.map((node) => {
+          const isCurrentTurret = node.name.startsWith(
+            `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+          );
+          const isVisible = isCurrentTurret;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            turretModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            spaced ||
+            thickness === undefined ||
+            (isDynamicArmorActive && node.name.includes('state_01')) ||
+            (!isDynamicArmorActive && node.name.includes('state_00'))
+          )
+            return null;
+
+          return (
+            <group position={hullOrigin}>
+              <group key={node.uuid} position={turretOrigin}>
+                <PrimaryArmorSceneComponent
+                  key={node.uuid}
+                  thickness={thickness}
+                  node={node}
+                />
+              </group>
+            </group>
+          );
+        })}
+
+        <group ref={gunContainer}>
+          {armorNodes.map((node) => {
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+            );
+            const isVisible = isCurrentGun;
+            const armorId = nameToArmorId(node.name);
+            const { spaced, thickness } = resolveArmor(
+              gunModelDefinition.armor,
+              armorId,
+            );
+
+            if (
+              !isVisible ||
+              spaced ||
+              thickness === undefined ||
+              (isDynamicArmorActive && node.name.includes('state_01')) ||
+              (!isDynamicArmorActive && node.name.includes('state_00'))
+            )
+              return null;
+
+            return (
+              <group position={hullOrigin}>
+                <group
+                  key={node.uuid}
+                  position={turretOrigin.clone().add(gunOrigin)}
+                >
+                  <PrimaryArmorSceneComponent
+                    thickness={thickness}
+                    node={node}
+                  />
+                </group>
+              </group>
+            );
+          })}
+        </group>
+      </group>
+    </ModelTankWrapper>
+  );
+});

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

@@ -0,0 +1,164 @@
+import { isExplosive } from '@blitzkit/core/src/blitzkit/isExplosive';
+import { resolvePenetrationCoefficient } from '@blitzkit/core/src/blitzkit/resolvePenetrationCoefficient';
+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 * as Duel from '../../../../stores/duel';
+import * as TankopediaPersistent from '../../../../stores/tankopediaPersistent';
+import fragmentShader from './shaders/fragment.glsl';
+import vertexShader from './shaders/vertex.glsl';
+import { spacedArmorRenderTarget } from './target';
+
+interface PrimaryArmorSceneComponentProps {
+  thickness: number;
+  node: Object3D;
+}
+
+const excludeMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+});
+
+export function PrimaryArmorSceneComponent({
+  node,
+  thickness,
+}: PrimaryArmorSceneComponentProps) {
+  const tankopediaPersistentStore = TankopediaPersistent.useStore();
+  const duelStore = Duel.useStore();
+  const material = new ShaderMaterial({
+    fragmentShader,
+    vertexShader,
+
+    transparent: true,
+
+    uniforms: {
+      thickness: { value: null },
+      penetration: { value: null },
+      caliber: { value: null },
+      ricochet: { value: null },
+      normalization: { value: null },
+      isExplosive: { value: null },
+      canSplash: { value: null },
+      damage: { value: null },
+      explosionRadius: { value: null },
+      greenPenetration: { value: null },
+      opaque: { value: null },
+
+      inverseProjectionMatrix: { value: null },
+      resolution: { value: new Vector2() },
+      spacedArmorBuffer: { value: null },
+      spacedArmorDepth: { value: null },
+    },
+  });
+
+  useEffect(() => {
+    async function handleShellChange(shell: ShellDefinition) {
+      material.uniforms.caliber.value = shell.caliber;
+      material.uniforms.ricochet.value = degToRad(
+        isExplosive(shell.type) ? 90 : shell.ricochet!,
+      );
+      material.uniforms.normalization.value = degToRad(
+        shell.normalization ?? 0,
+      );
+      material.uniforms.isExplosive.value = isExplosive(shell.type);
+      material.uniforms.canSplash.value = canSplash(shell.type);
+      material.uniforms.damage.value = shell.damage.armor;
+      material.uniforms.explosionRadius.value = shell.explosionRadius;
+
+      const duel = duelStore.getState();
+      await handleProtagonistEquipmentChange(duel.protagonist.equipmentMatrix);
+      await handleAntagonistEquipmentChange(duel.antagonist.equipmentMatrix);
+    }
+    function handleVisualChange(
+      visual: TankopediaPersistent.TankopediaPersistent['model']['visual'],
+    ) {
+      material.uniforms.greenPenetration.value = visual.greenPenetration;
+      material.uniforms.opaque.value = visual.opaque || visual.wireframe;
+      material.wireframe = visual.wireframe;
+    }
+    async function handleProtagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const hasEnhancedArmor = await hasEquipment(
+        110,
+        duel.protagonist.tank.equipment,
+        equipment,
+      );
+      material.uniforms.thickness.value = hasEnhancedArmor
+        ? thickness * 1.03
+        : thickness;
+    }
+    async function handleAntagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const shell = duel.antagonist.shell;
+      const penetration = resolveNearPenetration(shell.penetration);
+      const hasCalibratedShells = await hasEquipment(
+        103,
+        duel.antagonist.tank.equipment,
+        equipment,
+      );
+
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+    }
+
+    handleShellChange(duelStore.getState().antagonist.shell);
+    handleVisualChange(tankopediaPersistentStore.getState().model.visual);
+    handleProtagonistEquipmentChange(
+      duelStore.getState().protagonist.equipmentMatrix,
+    );
+    handleAntagonistEquipmentChange(
+      duelStore.getState().antagonist.equipmentMatrix,
+    );
+
+    const unsubscribes = [
+      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      tankopediaPersistentStore.subscribe(
+        (state) => state.model.visual,
+        handleVisualChange,
+      ),
+      duelStore.subscribe(
+        (state) => state.protagonist.equipmentMatrix,
+        handleProtagonistEquipmentChange,
+      ),
+      duelStore.subscribe(
+        (state) => state.antagonist.equipmentMatrix,
+        handleAntagonistEquipmentChange,
+      ),
+    ];
+
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  });
+
+  useFrame(({ gl, camera }) => {
+    gl.getSize(material.uniforms.resolution.value).multiplyScalar(
+      gl.getPixelRatio(),
+    );
+    material.uniforms.spacedArmorBuffer.value = spacedArmorRenderTarget.texture;
+    material.uniforms.spacedArmorDepth.value =
+      spacedArmorRenderTarget.depthTexture;
+    material.uniforms.inverseProjectionMatrix.value =
+      camera.projectionMatrixInverse;
+  });
+
+  return (
+    <>
+      {jsxTree(
+        node,
+        { mesh: { renderOrder: 0, material: excludeMaterial } },
+        `${node.uuid}-exclude`,
+      )}
+      {jsxTree(
+        node,
+        { mesh: { renderOrder: 1, material } },
+        `${node.uuid}-include`,
+      )}
+    </>
+  );
+}

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/shaders/fragment.glsl

@@ -0,0 +1,93 @@
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+uniform float thickness;
+uniform float penetration;
+uniform float caliber;
+uniform float ricochet;
+uniform float normalization;
+uniform vec2 resolution;
+uniform bool isExplosive;
+uniform bool canSplash;
+uniform float damage;
+uniform float explosionRadius;
+uniform bool greenPenetration;
+uniform bool opaque;
+uniform mat4 inverseProjectionMatrix;
+
+uniform highp sampler2D spacedArmorBuffer;
+uniform highp sampler2D spacedArmorDepth;
+
+float depthToDistance(float depth) {
+  vec4 clipPosition = vec4(gl_FragCoord.xy / resolution * 2.0 - 1.0, depth * 2.0 - 1.0, 1.0);
+  vec4 eyePosition = inverseProjectionMatrix * clipPosition;
+  return length(eyePosition.xyz / eyePosition.w);
+}
+
+void main() {
+  float penetrationChance = -1.0;
+  float splashChance = -1.0;
+
+  vec2 screenCoordinates = gl_FragCoord.xy / resolution;
+  float angle = acos(dot(vNormal, -vViewPosition) / length(vViewPosition));
+
+  vec4 spacedArmorBufferFragment = texture2D(spacedArmorBuffer, screenCoordinates);
+  bool isUnderSpacedArmor = spacedArmorBufferFragment.a != 0.0;
+
+  bool threeCalibersRule = caliber > thickness * 3.0 || isUnderSpacedArmor;
+  if (!threeCalibersRule && angle >= ricochet) {
+    penetrationChance = 0.0;
+  } else {
+    bool twoCalibersRule = caliber > thickness * 2.0 && thickness > 0.0;
+    float finalNormalization = twoCalibersRule ? ((1.4 * normalization * caliber) / (2.0 * thickness)) : normalization;
+    float finalThickness = thickness / cos(max(0.0, angle - finalNormalization));
+
+    // world space in meters
+    vec4 spacedArmorDepthFragment = texture2D(spacedArmorDepth, screenCoordinates);
+    float spacedArmorDistance = depthToDistance(spacedArmorDepthFragment.r);
+    float primaryArmorDistance = depthToDistance(gl_FragCoord.z);
+    float distanceFromSpacedArmor = primaryArmorDistance - spacedArmorDistance;
+
+    if (canSplash && isUnderSpacedArmor) {
+      float spacedArmorThickness = spacedArmorBufferFragment.r * penetration;
+      float finalDamage = 0.5 * damage * (1.0 - distanceFromSpacedArmor / explosionRadius) - 1.1 * (finalThickness + spacedArmorThickness);
+
+      penetrationChance = 0.0;
+      splashChance = finalDamage > 0.0 ? 1.0 : 0.0;
+    } else {
+      float remainingPenetration = penetration;
+
+      if (isUnderSpacedArmor) {
+        float spacedArmorThickness = spacedArmorBufferFragment.r * penetration;
+        remainingPenetration -= spacedArmorThickness;
+
+        if (isExplosive && remainingPenetration > 0.0) {
+          remainingPenetration -= 0.5 * remainingPenetration * distanceFromSpacedArmor;
+        }
+      }
+
+      remainingPenetration = max(0.0, remainingPenetration);
+      float delta = finalThickness - remainingPenetration;
+      float randomization = remainingPenetration * 0.05;
+      penetrationChance = clamp(1.0 - (delta + randomization) / (2.0 * randomization), 0.0, 1.0);
+
+      if (canSplash) {
+        float splashDamage = 0.5 * damage - 1.1 * finalThickness;
+        splashChance = splashDamage > 0.0 ? 1.0 : 0.0;
+      } else {
+        splashChance = 0.0;
+      }
+    }
+  }
+
+  float alpha = opaque ? 1.0 : 0.5;
+  vec3 color = vec3(1.0, splashChance * 0.392, 0.0);
+  if (greenPenetration) {
+    // non-trigonometric red-green mixing: https://www.desmos.com/calculator/ceo1oq7l67
+    float falling = -pow(penetrationChance, 2.0) + 1.0;
+    float gaining = -pow(penetrationChance - 1.0, 2.0) + 1.0;
+    gl_FragColor = vec4(falling * color + gaining * vec3(0.0, 1.0, 0.0), alpha);
+  } else {
+    gl_FragColor = vec4(color, (1.0 - penetrationChance) * alpha);
+  }
+}

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/shaders/vertex.glsl

@@ -0,0 +1,11 @@
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+void main() {
+  vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1.0);
+
+  vViewPosition = vViewPosition4.xyz;
+  vNormal = normalMatrix * normal;
+
+  gl_Position = projectionMatrix * vViewPosition4;
+}

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

@@ -0,0 +1,3 @@
+import { WebGLRenderTarget } from 'three';
+
+export const spacedArmorRenderTarget = new WebGLRenderTarget();

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

@@ -0,0 +1,279 @@
+import { Box, Flex, Text } from '@radix-ui/themes';
+import { Html } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+import { clamp } from 'lodash';
+import { ComponentProps, useEffect, useRef } from 'react';
+import {
+  BufferGeometry,
+  DoubleSide,
+  Euler,
+  Group,
+  Line,
+  LineDashedMaterial,
+  Mesh,
+  MeshBasicMaterial,
+  Path,
+  Quaternion,
+} from 'three';
+import { useFullScreen } from '../../../hooks/useFullScreen';
+import { ShotDisplayCard } from './ShotDisplayCard';
+
+export const shotStatusColors: Record<
+  TankopediaEphemeral.ShotStatus,
+  ComponentProps<typeof Text>['color']
+> = {
+  blocked: 'red',
+  penetration: 'green',
+  ricochet: 'yellow',
+  splash: 'orange',
+};
+
+const SURFACE_POINT_SIZE = 12;
+export const SHOT_DISPLAY_LENGTH_INFINITY = 4;
+const TRACER_THICK = 1 / 32;
+const TRACER_THIN = TRACER_THICK / 2;
+
+export function ShotDisplay() {
+  const isFullscreen = useFullScreen();
+  const shot = TankopediaEphemeral.use((state) => state.shot);
+  const inTracer = useRef<Mesh>(null);
+  const outTracer = useRef<Mesh>(null);
+  const splashRadiusWrapper = useRef<Group>(null);
+  const splashRadiusMaterial = useRef<MeshBasicMaterial>(null);
+  let animationStartTime: number | null = null;
+
+  useEffect(() => {
+    if (shot?.splashRadius !== undefined) {
+      const outlineGeometry = new BufferGeometry().setFromPoints(
+        new Path().absarc(0, 0, 1, 0, Math.PI * 2).getSpacedPoints(50),
+      );
+      const outlineMaterial = new LineDashedMaterial({
+        color: 'orange',
+        dashSize: 0.05,
+        gapSize: 0.025,
+      });
+      const outline = new Line(
+        outlineGeometry,
+        outlineMaterial,
+      ).computeLineDistances();
+
+      splashRadiusWrapper.current?.add(outline);
+
+      return () => {
+        splashRadiusWrapper.current?.remove(outline);
+      };
+    }
+  });
+
+  useEffect(() => {
+    const data = new Date();
+    const isHalloween = data.getMonth() === 9 && data.getDate() === 31;
+
+    if (
+      isHalloween &&
+      shot?.splashRadius !== undefined &&
+      shot.in.status === 'penetration'
+    ) {
+      const audio = new Audio('/assets/audio/lotta-damage.mp3');
+
+      audio.currentTime = 0.7;
+      audio.volume = 0.25;
+      audio.play();
+    }
+  }, [shot]);
+
+  useFrame(({ clock }) => {
+    if (!shot) return;
+
+    const t = clock.elapsedTime;
+
+    if (inTracer.current) {
+      const tracerT1 = t % 1;
+      const tracerT2 = (t + 0.5) % 1;
+
+      inTracer.current.scale.set(1, 1 - 2 * Math.abs(tracerT1 - 0.5), 1);
+      inTracer.current.position.set(0, (1 - tracerT1) * inLength, 0);
+
+      if (outTracer.current) {
+        outTracer.current.scale.set(1, 1 - 2 * Math.abs(tracerT2 - 0.5), 1);
+        outTracer.current.position.set(0, tracerT2 * outLength, 0);
+      }
+    }
+
+    if (
+      shot.splashRadius !== undefined &&
+      splashRadiusWrapper.current &&
+      splashRadiusMaterial.current
+    ) {
+      if (animationStartTime === null) animationStartTime = t;
+
+      const scale =
+        clamp(4 * (t - animationStartTime), 0, 1) * shot.splashRadius;
+      const opacity = 1 - clamp(2 * (t - animationStartTime), 0, 1);
+
+      splashRadiusWrapper.current.scale.set(scale, scale, scale);
+      splashRadiusMaterial.current.opacity = opacity;
+    }
+  });
+
+  if (!shot) return null;
+
+  const inLength =
+    shot.in.layers.reduce((accumulator, layer) => {
+      if (layer.type === null) return accumulator + layer.distance;
+      return accumulator;
+    }, 0) + SHOT_DISPLAY_LENGTH_INFINITY;
+  const outLength =
+    shot.out && shot.out.layers.length > 0
+      ? (
+          shot.in.layers.at(-1) as TankopediaEphemeral.ShotLayerNonExternal
+        ).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;
+  const outTitleColor = shot.out
+    ? shotStatusColors[shot.out.status]
+    : undefined;
+  const inTitleColor = shotStatusColors[shot.in.status];
+  const tracerGoingUp =
+    shot.in.surfaceNormal.y + (shot.out?.surfaceNormal.y ?? 0) > 0;
+
+  return (
+    <group>
+      {shot.splashRadius && (
+        <group
+          position={inLast.point}
+          ref={splashRadiusWrapper}
+          rotation={new Euler().setFromQuaternion(
+            new Quaternion().setFromUnitVectors(K_HAT, shot.in.surfaceNormal),
+          )}
+        >
+          <mesh>
+            <circleGeometry />
+            <meshBasicMaterial
+              side={DoubleSide}
+              color="orange"
+              transparent
+              ref={splashRadiusMaterial}
+            />
+          </mesh>
+        </group>
+      )}
+
+      <Html position={inLast.point} center>
+        <Box
+          display={isFullscreen ? undefined : { initial: 'none', sm: 'block' }}
+          style={{
+            pointerEvents: 'none',
+            transform: `translateY(${tracerGoingUp ? 50 : -50}%)`,
+          }}
+          mb={tracerGoingUp ? '0' : '9'}
+          pb={tracerGoingUp ? '0' : '4'}
+          mt={tracerGoingUp ? '9' : '0'}
+          pt={tracerGoingUp ? '4' : '0'}
+        >
+          <ShotDisplayCard shot={shot} />
+        </Box>
+      </Html>
+
+      {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => {
+        if (layer.type === null) return null;
+
+        const shotStatusColor =
+          shot.in.status === 'splash'
+            ? shotStatusColors.splash
+            : shotStatusColors[layer.status];
+
+        return (
+          <Html
+            position={layer.point}
+            key={index}
+            style={{
+              pointerEvents: 'none',
+              transform: 'translateY(-50%)',
+            }}
+          >
+            <Flex
+              style={{
+                marginLeft: -SURFACE_POINT_SIZE / 2,
+              }}
+            >
+              <div
+                style={{
+                  width: SURFACE_POINT_SIZE,
+                  height: SURFACE_POINT_SIZE,
+                  backgroundColor: shotStatusColor,
+                  opacity: 0.75,
+                  borderRadius: SURFACE_POINT_SIZE / 2,
+                }}
+              />
+            </Flex>
+          </Html>
+        );
+      })}
+
+      <group
+        position={inLast.point}
+        rotation={new Euler().setFromQuaternion(
+          new Quaternion().setFromUnitVectors(J_HAT, shot.in.surfaceNormal),
+        )}
+      >
+        <mesh position={[0, inLength / 2, 0]} renderOrder={2}>
+          <cylinderGeometry
+            args={[TRACER_THIN / 2, TRACER_THIN / 2, inLength]}
+          />
+          <meshBasicMaterial depthTest={false} transparent />
+        </mesh>
+
+        <mesh ref={inTracer} position={[0, inLength / 2, 0]} renderOrder={3}>
+          <cylinderGeometry
+            args={[TRACER_THICK / 2, TRACER_THICK / 2, inLength]}
+          />
+          <meshBasicMaterial
+            color={inTitleColor}
+            depthTest={false}
+            transparent
+          />
+        </mesh>
+      </group>
+
+      {shot.out && (
+        <group
+          position={inLast.point}
+          rotation={new Euler().setFromQuaternion(
+            new Quaternion().setFromUnitVectors(
+              J_HAT,
+              shot.out.surfaceNormal.clone(),
+            ),
+          )}
+        >
+          <mesh position={[0, outLength / 2, 0]} renderOrder={2}>
+            <cylinderGeometry
+              args={[TRACER_THIN / 2, TRACER_THIN / 2, outLength]}
+            />
+            <meshBasicMaterial depthTest={false} transparent />
+          </mesh>
+
+          <mesh
+            ref={outTracer}
+            position={[0, outLength / 2, 0]}
+            renderOrder={3}
+          >
+            <cylinderGeometry
+              args={[TRACER_THICK / 2, TRACER_THICK / 2, outLength]}
+            />
+            <meshBasicMaterial
+              color={outTitleColor}
+              depthTest={false}
+              transparent
+            />
+          </mesh>
+        </group>
+      )}
+    </group>
+  );
+}

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

@@ -0,0 +1,229 @@
+import {
+  Card,
+  CardProps,
+  Flex,
+  Inset,
+  Separator,
+  Text,
+} from '@radix-ui/themes';
+import { ComponentProps } from 'react';
+import { radToDeg } from 'three/src/math/MathUtils';
+import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
+import { shotStatusColors } from './ShotDisplay';
+import { ArmorType } from './SpacedArmorScene';
+import { ExternalModuleVariant } from './SpacedArmorSceneComponent';
+
+export const layerTypeNames: Record<ArmorType | 'null', string> = {
+  [ArmorType.Primary]: 'Primary',
+  [ArmorType.Spaced]: 'Spaced',
+  [ArmorType.External]: 'External',
+  null: 'Gap',
+};
+
+const externalLayerNames: Record<ExternalModuleVariant, string> = {
+  gun: 'Gun',
+  track: 'Tracks',
+};
+
+const shotStatusNames: Record<TankopediaEphemeral.ShotStatus, string> = {
+  blocked: 'Blocked',
+  ricochet: 'Ricochet',
+  penetration: 'penetration',
+  splash: 'splash',
+};
+
+function LayerEntry({
+  layerIndex,
+  shotStatusColor,
+  layerName,
+  layer,
+  angle,
+}: {
+  layerIndex?: string;
+  shotStatusColor: ComponentProps<typeof Text>['color'];
+  layerName: string;
+  layer: TankopediaEphemeral.ShotLayer;
+  angle?: number;
+}) {
+  return (
+    <Flex align="center" gap="2">
+      <Text size="1" color="gray" style={{ width: 12 }}>
+        {layerIndex}
+      </Text>
+      <Text size="2" color={shotStatusColor} style={{ width: 48 }}>
+        {layerName}
+      </Text>
+
+      {layer.type === null && (
+        <>
+          <Text size="2" color={shotStatusColor} style={{ width: 64 }}>
+            {Math.round(layer.distance * 1000).toLocaleString()}
+            <Text size="1">mm</Text>
+          </Text>
+
+          <Text size="2" color="gray">
+            {Math.max(-100, Math.round(-50 * layer.distance))}% penetration
+          </Text>
+        </>
+      )}
+
+      {layer.type === ArmorType.External && (
+        <Text size="2" color={shotStatusColor} style={{ width: 64 }}>
+          {Math.round(layer.thickness).toLocaleString()}
+          <Text size="1">mm</Text>
+        </Text>
+      )}
+
+      {(layer.type === ArmorType.Primary ||
+        layer.type === ArmorType.Spaced) && (
+        <>
+          <Text size="2" color={shotStatusColor} style={{ width: 80 }}>
+            {Math.round(layer.thicknessAngled).toLocaleString()}
+            <Text size="1">{`mm${
+              angle === undefined ? '' : ` ${Math.round(radToDeg(angle))}°`
+            }`}</Text>
+          </Text>
+
+          <Text size="2" color="gray">
+            {Math.round(layer.thickness).toLocaleString()}
+            <Text size="1">mm</Text> nominal
+          </Text>
+        </>
+      )}
+    </Flex>
+  );
+}
+
+interface ShotDisplayCardProps extends CardProps {
+  shot: TankopediaEphemeral.Shot;
+}
+
+export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
+  if (!shot) return null;
+
+  const outTitleColor = shot.out
+    ? shotStatusColors[shot.out.status]
+    : undefined;
+  const inTitleColor = shotStatusColors[shot.in.status];
+
+  return (
+    <Card style={{ width: 300 }} {...props}>
+      <Flex direction="column" gap="2">
+        <Flex direction="column" gap="1">
+          <Text color={inTitleColor} weight="bold">
+            {shot.in.status !== 'blocked' && shot.in.status !== 'ricochet' && (
+              <>
+                {Math.round(shot.damage).toLocaleString()}
+                <Text size="1">hp</Text>
+              </>
+            )}
+            {` ${shotStatusNames[shot.in.status]} `}
+          </Text>
+
+          <Flex direction="column">
+            {shot.in.layers.map((layer, index) => {
+              const layerName =
+                layer.type === ArmorType.External
+                  ? externalLayerNames[layer.variant]
+                  : layerTypeNames[`${layer.type}`];
+              const layerIndex =
+                layer.type === null
+                  ? undefined
+                  : `${(shot.containsGaps ? index / 2 : index) + 1}.`;
+              const shotStatusColor =
+                shot.in.status === 'splash'
+                  ? shotStatusColors.splash
+                  : shotStatusColors[layer.status];
+
+              return (
+                <LayerEntry
+                  key={index}
+                  layer={layer}
+                  layerIndex={layerIndex}
+                  layerName={layerName}
+                  shotStatusColor={shotStatusColor}
+                  angle={
+                    layer.type === ArmorType.Primary ||
+                    layer.type === ArmorType.Spaced
+                      ? layer.angle
+                      : undefined
+                  }
+                />
+              );
+            })}
+          </Flex>
+        </Flex>
+
+        {shot.out && shot.out.layers.length > 0 && (
+          <>
+            <Inset side="x">
+              <Flex align="center" gap="2">
+                <Separator
+                  style={{
+                    flex: 1,
+                  }}
+                />
+                <Text size="1" color="gray">
+                  ricochet (-25% penetration)
+                </Text>
+                <Separator
+                  style={{
+                    flex: 1,
+                  }}
+                />
+              </Flex>
+            </Inset>
+
+            <Text color={outTitleColor} weight="bold">
+              {shot.out.status !== 'blocked' &&
+                shot.out.status !== 'ricochet' && (
+                  <>
+                    {Math.round(shot.damage).toLocaleString()}
+                    <Text size="1">hp</Text>
+                  </>
+                )}
+              {` ${shotStatusNames[shot.out.status]} `}
+            </Text>
+
+            <Flex direction="column">
+              {shot.out.layers.map((layer, index) => {
+                const layerName =
+                  layer.type === ArmorType.External
+                    ? externalLayerNames[layer.variant]
+                    : layerTypeNames[`${layer.type}`];
+                const shiftedIndex = index + shot.out!.layers.length;
+                const layerIndex =
+                  layer.type === null
+                    ? undefined
+                    : `${
+                        (shot.containsGaps ? shiftedIndex / 2 : shiftedIndex) +
+                        1
+                      }.`;
+                const shotStatusColor =
+                  shot.out!.status === 'splash'
+                    ? shotStatusColors.splash
+                    : shotStatusColors[layer.status];
+
+                return (
+                  <LayerEntry
+                    key={index}
+                    layer={layer}
+                    layerIndex={layerIndex}
+                    layerName={layerName}
+                    shotStatusColor={shotStatusColor}
+                    angle={
+                      layer.type === ArmorType.Primary ||
+                      layer.type === ArmorType.Spaced
+                        ? layer.angle
+                        : undefined
+                    }
+                  />
+                );
+              })}
+            </Flex>
+          </>
+        )}
+      </Flex>
+    </Card>
+  );
+}

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

@@ -0,0 +1,205 @@
+import { memo, useRef } from 'react';
+import { Group, Plane, Scene, Vector3 } from 'three';
+import { useArmor } from '../../../hooks/useArmor';
+import { useModel } from '../../../hooks/useModel';
+import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
+import { useTankTransform } from '../../../hooks/useTankTransform';
+import * as Duel from '../../../stores/duel';
+import { ModelTankWrapper } from './ModelTankWrapper';
+import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent';
+
+export enum ArmorType {
+  Primary,
+  Spaced,
+  External,
+}
+
+interface SpacedArmorSceneProps {
+  scene: Scene;
+}
+
+export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
+  const wrapper = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null);
+  const gunContainer = useRef<Group>(null);
+  const protagonist = Duel.use((draft) => draft.protagonist);
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const track = Duel.use((state) => state.protagonist.track);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const { gltf: armorGltf } = useArmor(tank.id);
+  const { gltf: modelGltf } = useModel(tank.id);
+  const armorNodes = Object.values(armorGltf.nodes);
+  const modelNodes = Object.values(modelGltf.nodes);
+  const tankModelDefinition = useTankModelDefinition();
+  const trackModelDefinition = tankModelDefinition.tracks[track.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+  const hullOrigin = correctZYTuple(trackModelDefinition.origin);
+  const turretOrigin = correctZYTuple(tankModelDefinition.turretOrigin);
+  const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
+  const maskOrigin =
+    gunModelDefinition.mask === undefined
+      ? undefined
+      : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
+  const isDynamicArmorActive = Duel.use((state) =>
+    state.protagonist.consumables.includes(73),
+  );
+
+  useTankTransform(protagonist, turretContainer, gunContainer);
+
+  return (
+    <ModelTankWrapper ref={wrapper}>
+      <group position={hullOrigin}>
+        {armorNodes.map((node) => {
+          const isHull = node.name.startsWith('hull_');
+          const isVisible = isHull;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            tankModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (!isDynamicArmorActive && node.name.includes('state_01'))
+          )
+            return null;
+
+          return (
+            <SpacedArmorSceneComponent
+              scene={scene}
+              key={node.uuid}
+              type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+              thickness={thickness}
+              node={node}
+            />
+          );
+        })}
+      </group>
+
+      {modelNodes.map((node) => {
+        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isTrack = node.name.startsWith('chassis_track_');
+        const isVisible = isWheel || isTrack;
+
+        if (!isVisible) return null;
+
+        return (
+          <SpacedArmorSceneComponent
+            scene={scene}
+            key={node.uuid}
+            type={ArmorType.External}
+            thickness={trackModelDefinition.thickness}
+            variant="track"
+            node={node}
+          />
+        );
+      })}
+
+      <group ref={turretContainer}>
+        {armorNodes.map((node) => {
+          const isCurrentTurret = node.name.startsWith(
+            `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+          );
+          const isVisible = isCurrentTurret;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            turretModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (!isDynamicArmorActive && node.name.includes('state_01'))
+          )
+            return null;
+
+          return (
+            <group position={hullOrigin}>
+              <group key={node.uuid} position={turretOrigin}>
+                <SpacedArmorSceneComponent
+                  scene={scene}
+                  key={node.uuid}
+                  type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+                  thickness={thickness}
+                  node={node}
+                />
+              </group>
+            </group>
+          );
+        })}
+
+        <group ref={gunContainer}>
+          {armorNodes.map((node) => {
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+            );
+            const isVisible = isCurrentGun;
+            const armorId = nameToArmorId(node.name);
+            const { spaced, thickness } = resolveArmor(
+              gunModelDefinition.armor,
+              armorId,
+            );
+
+            if (
+              !isVisible ||
+              thickness === undefined ||
+              (isDynamicArmorActive && node.name.includes('state_00')) ||
+              (!isDynamicArmorActive && node.name.includes('state_01'))
+            )
+              return null;
+
+            return (
+              <group position={hullOrigin}>
+                <group
+                  key={node.uuid}
+                  position={turretOrigin.clone().add(gunOrigin)}
+                >
+                  <SpacedArmorSceneComponent
+                    scene={scene}
+                    type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+                    thickness={thickness}
+                    node={node}
+                  />
+                </group>
+              </group>
+            );
+          })}
+
+          {modelNodes.map((node) => {
+            const gunString = `gun_${gunModelDefinition.model
+              .toString()
+              .padStart(2, '0')}`;
+            const isCurrentGun = gunModelDefinition.mask
+              ? node.name.startsWith(gunString)
+              : node.name === gunString;
+            const isVisible = isCurrentGun;
+
+            if (!isVisible) return null;
+
+            return (
+              <SpacedArmorSceneComponent
+                scene={scene}
+                key={node.uuid}
+                type={ArmorType.External}
+                thickness={gunModelDefinition.thickness}
+                variant="gun"
+                node={node}
+                clip={
+                  maskOrigin === undefined
+                    ? undefined
+                    : new Plane(new Vector3(0, 0, -1), -maskOrigin)
+                }
+              />
+            );
+          })}
+        </group>
+      </group>
+    </ModelTankWrapper>
+  );
+});

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

@@ -0,0 +1,138 @@
+import { resolvePenetrationCoefficient } from '@blitzkit/core/src/blitzkit/resolvePenetrationCoefficient';
+import { useEffect } from 'react';
+import {
+  AdditiveBlending,
+  MeshBasicMaterial,
+  Object3D,
+  Plane,
+  ShaderMaterial,
+} from 'three';
+import { ArmorUserData, ExternalModuleVariant } from '../..';
+import * as Duel from '../../../../../../stores/duel';
+import { ArmorType } from '../../../SpacedArmorScene';
+import fragmentShader from './shaders/fragment.glsl';
+import vertexShader from './shaders/vertex.glsl';
+
+interface SpacedArmorSubExternalProps {
+  node: Object3D;
+  thickness: number;
+  variant: ExternalModuleVariant;
+  clip?: Plane;
+}
+
+export function SpacedArmorSubExternal({
+  node,
+  thickness,
+  variant,
+  clip,
+}: SpacedArmorSubExternalProps) {
+  const duelStore = Duel.useStore();
+  const material = new ShaderMaterial({
+    fragmentShader,
+    vertexShader,
+
+    depthTest: true,
+    depthWrite: false,
+    blending: AdditiveBlending,
+    clipping: clip !== undefined,
+    ...(clip ? { clippingPlanes: [clip] } : {}),
+
+    uniforms: {
+      thickness: { value: null },
+      penetration: { value: null },
+    },
+  });
+
+  useEffect(() => {
+    function handleShellChange(shell: ShellDefinition) {
+      material.uniforms.penetration.value = resolveNearPenetration(
+        shell.penetration,
+      );
+    }
+    async function handleProtagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const hasEnhancedArmor = await hasEquipment(
+        110,
+        duel.protagonist.tank.equipment,
+        equipment,
+      );
+      material.uniforms.thickness.value = hasEnhancedArmor
+        ? thickness * 1.03
+        : thickness;
+    }
+    async function handleAntagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const shell = duel.antagonist.shell;
+      const penetration = resolveNearPenetration(shell.penetration);
+      const hasCalibratedShells = await hasEquipment(
+        103,
+        duel.antagonist.tank.equipment,
+        equipment,
+      );
+
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+    }
+
+    handleShellChange(duelStore.getState().antagonist.shell);
+    handleProtagonistEquipmentChange(
+      duelStore.getState().protagonist.equipmentMatrix,
+    );
+    handleAntagonistEquipmentChange(
+      duelStore.getState().antagonist.equipmentMatrix,
+    );
+
+    const unsubscribes = [
+      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      duelStore.subscribe(
+        (state) => state.protagonist.equipmentMatrix,
+        handleProtagonistEquipmentChange,
+      ),
+      duelStore.subscribe(
+        (state) => state.antagonist.equipmentMatrix,
+        handleAntagonistEquipmentChange,
+      ),
+    ];
+
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  });
+
+  return (
+    <>
+      {jsxTree(
+        node,
+        {
+          mesh: {
+            renderOrder: 3,
+            material: new MeshBasicMaterial({
+              colorWrite: false,
+              depthTest: true,
+              depthWrite: true,
+              ...(clip ? { clippingPlanes: [clip] } : {}),
+            }),
+            onClick() {},
+            userData: {
+              type: ArmorType.External,
+              thickness,
+              variant,
+            } satisfies ArmorUserData,
+          },
+        },
+        `${node.uuid}-exclude`,
+      )}
+
+      {jsxTree(
+        node,
+        { mesh: { renderOrder: 4, material } },
+        `${node.uuid}-include`,
+      )}
+    </>
+  );
+}

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/shaders/fragment.glsl

@@ -0,0 +1,10 @@
+uniform float thickness;
+uniform float penetration;
+
+#include <clipping_planes_pars_fragment>
+
+void main() {
+  #include <clipping_planes_fragment>
+
+  gl_FragColor = vec4(thickness / penetration, 0.0, 0.0, 1.0);
+}

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/shaders/vertex.glsl

@@ -0,0 +1,7 @@
+#include <clipping_planes_pars_vertex>
+
+void main() {
+  #include <begin_vertex>
+  #include <project_vertex>
+  #include <clipping_planes_vertex>
+}

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

@@ -0,0 +1,147 @@
+import { isExplosive } from '@blitzkit/core/src/blitzkit/isExplosive';
+import { resolvePenetrationCoefficient } from '@blitzkit/core/src/blitzkit/resolvePenetrationCoefficient';
+import { useEffect } from 'react';
+import {
+  AdditiveBlending,
+  MeshBasicMaterial,
+  Object3D,
+  ShaderMaterial,
+} from 'three';
+import { degToRad } from 'three/src/math/MathUtils';
+import { ArmorUserData } from '../..';
+import * as Duel from '../../../../../../stores/duel';
+import { ArmorType } from '../../../SpacedArmorScene';
+import fragmentShader from './shaders/fragment.glsl';
+import vertexShader from './shaders/vertex.glsl';
+
+interface SpacedArmorSubSpacedProps {
+  node: Object3D;
+  thickness: number;
+}
+
+const depthWriteMaterial = new MeshBasicMaterial({
+  depthWrite: true,
+  colorWrite: false,
+});
+
+export function SpacedArmorSubSpaced({
+  node,
+  thickness,
+}: SpacedArmorSubSpacedProps) {
+  const duelStore = Duel.useStore();
+  const material = new ShaderMaterial({
+    fragmentShader,
+    vertexShader,
+
+    depthTest: true,
+    depthWrite: false,
+    blending: AdditiveBlending,
+
+    uniforms: {
+      thickness: { value: null },
+      penetration: { value: null },
+      caliber: { value: null },
+      ricochet: { value: null },
+      normalization: { value: null },
+    },
+  });
+
+  useEffect(() => {
+    function handleShellChange(shell: ShellDefinition) {
+      material.uniforms.penetration.value = resolveNearPenetration(
+        shell.penetration,
+      );
+      material.uniforms.caliber.value = shell.caliber;
+      material.uniforms.ricochet.value = degToRad(
+        isExplosive(shell.type) ? 90 : shell.ricochet!,
+      );
+      material.uniforms.normalization.value = degToRad(
+        shell.normalization ?? 0,
+      );
+    }
+    async function handleProtagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const hasEnhancedArmor = await hasEquipment(
+        110,
+        duel.protagonist.tank.equipment,
+        equipment,
+      );
+      material.uniforms.thickness.value = hasEnhancedArmor
+        ? thickness * 1.03
+        : thickness;
+    }
+    async function handleAntagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const shell = duelStore.getState().antagonist.shell;
+      const penetration = resolveNearPenetration(shell.penetration);
+      const hasCalibratedShells = await hasEquipment(
+        103,
+        duel.antagonist.tank.equipment,
+        equipment,
+      );
+
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+    }
+
+    handleShellChange(duelStore.getState().antagonist.shell);
+    handleProtagonistEquipmentChange(
+      duelStore.getState().protagonist.equipmentMatrix,
+    );
+    handleAntagonistEquipmentChange(
+      duelStore.getState().antagonist.equipmentMatrix,
+    );
+
+    const unsubscribes = [
+      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      duelStore.subscribe(
+        (state) => state.protagonist.equipmentMatrix,
+        handleProtagonistEquipmentChange,
+      ),
+      duelStore.subscribe(
+        (state) => state.antagonist.equipmentMatrix,
+        handleAntagonistEquipmentChange,
+      ),
+    ];
+
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  });
+
+  return (
+    <>
+      {jsxTree(
+        node,
+        {
+          mesh: {
+            renderOrder: 2,
+            material,
+            onClick() {},
+            userData: {
+              type: ArmorType.Spaced,
+              thickness,
+            } satisfies ArmorUserData,
+          },
+        },
+        `${node.uuid}-exclude`,
+      )}
+
+      {jsxTree(
+        node,
+        {
+          mesh: {
+            renderOrder: 5,
+            material: depthWriteMaterial,
+          },
+        },
+        `${node.uuid}-include`,
+      )}
+    </>
+  );
+}

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/shaders/fragment.glsl

@@ -0,0 +1,24 @@
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+uniform float thickness;
+uniform float penetration;
+uniform float caliber;
+uniform float ricochet;
+uniform float normalization;
+
+void main() {
+  float angle = acos(dot(vNormal, -vViewPosition) / length(vViewPosition));
+
+  bool threeCalibersRule = caliber > thickness * 3.0;
+  if (!threeCalibersRule && angle >= ricochet) {
+    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+    return;
+  }
+
+  bool twoCalibersRule = caliber > thickness * 2.0 && thickness > 0.0;
+  float finalNormalization = twoCalibersRule ? ((1.4 * normalization * caliber) / (2.0 * thickness)) : normalization;
+  float finalThickness = thickness / cos(max(0.0, angle - finalNormalization));
+
+  gl_FragColor = vec4(finalThickness / penetration, 0.0, 0.0, 1.0);
+}

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/shaders/vertex.glsl

@@ -0,0 +1,11 @@
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+void main() {
+  vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1.0);
+
+  vViewPosition = vViewPosition4.xyz;
+  vNormal = normalMatrix * normal;
+
+  gl_Position = projectionMatrix * vViewPosition4;
+}

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

@@ -0,0 +1,404 @@
+import { isExplosive } from '@blitzkit/core/src/blitzkit/isExplosive';
+import { resolvePenetrationCoefficient } from '@blitzkit/core/src/blitzkit/resolvePenetrationCoefficient';
+import { useThree } from '@react-three/fiber';
+import { useCallback } from 'react';
+import {
+  Intersection,
+  MeshBasicMaterial,
+  Object3D,
+  Plane,
+  Quaternion,
+  Raycaster,
+  Scene,
+  Vector3,
+} from 'three';
+import { degToRad } from 'three/src/math/MathUtils';
+import * as Duel from '../../../../stores/duel';
+import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
+import { ArmorType } from '../SpacedArmorScene';
+import { SpacedArmorSubExternal } from './components/SpacedArmorSubExternal';
+import { SpacedArmorSubSpaced } from './components/SpacedArmorSubSpaced';
+
+type SpacedArmorSceneComponentProps = {
+  node: Object3D;
+  thickness: number;
+  clip?: Plane;
+  scene: Scene;
+} & (
+  | {
+      type: Exclude<ArmorType, ArmorType.External>;
+    }
+  | {
+      type: ArmorType.External;
+      variant: ExternalModuleVariant;
+    }
+);
+
+export type ExternalModuleVariant = 'gun' | 'track';
+export type ArmorUserData = {
+  thickness: number;
+} & (
+  | {
+      type: Exclude<ArmorType, ArmorType.External>;
+    }
+  | {
+      type: ArmorType.External;
+      variant: ExternalModuleVariant;
+    }
+);
+
+const omitMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+  depthWrite: true,
+});
+
+/**
+ * Render orders allocations:
+ * - 0  : core omission
+ * - 1-2: spaced without depth buffer write but do test to allow additive blending
+ * - 3-4: external with depth buffer write in first pass and read in second to simplify geometry
+ * - 5  : spaced depth write
+ */
+export function SpacedArmorSceneComponent({
+  node,
+  thickness,
+  clip,
+  ...props
+}: SpacedArmorSceneComponentProps) {
+  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
+  const duelStore = Duel.useStore();
+  const camera = useThree((state) => state.camera);
+
+  const shoot = useCallback(
+    async (
+      point: Vector3,
+      intersections: Intersection[],
+      allowRicochet: boolean,
+      remainingPenetrationInput?: number,
+    ) => {
+      const { antagonist, protagonist } = duelStore.getState();
+      const shell = antagonist.shell;
+      const cameraNormal = camera.position.clone().sub(point).normalize();
+      const shot: TankopediaEphemeral.Shot = {
+        splashRadius: shell.explosionRadius,
+        damage: -1,
+        containsGaps: shell.type === ShellType.HEAT,
+        in: {
+          surfaceNormal: cameraNormal,
+          layers: [],
+          status: 'blocked',
+        },
+      };
+
+      const hasCalibratedShells = await hasEquipment(
+        103,
+        antagonist.tank.equipment,
+        antagonist.equipmentMatrix,
+      );
+      const hasEnhancedArmor = await hasEquipment(
+        110,
+        protagonist.tank.equipment,
+        protagonist.equipmentMatrix,
+      );
+      const penetration =
+        resolveNearPenetration(shell.penetration) *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+      const thicknessCoefficient = hasEnhancedArmor ? 1.03 : 1;
+      const filteredIntersections = intersections.filter(
+        (intersection) =>
+          'type' in intersection.object.userData &&
+          !discardClippingPlane(intersection.object, intersection.point),
+      ) as unknown as Intersection<Object3D & { userData: ArmorUserData }>[];
+      const encounteredExternalModuleVariants: ExternalModuleVariant[] = [];
+      const noDuplicateIntersections: typeof filteredIntersections = [];
+
+      for (const intersection of filteredIntersections) {
+        if (intersection.object.userData.type === ArmorType.External) {
+          if (
+            !encounteredExternalModuleVariants.includes(
+              intersection.object.userData.variant,
+            )
+          ) {
+            noDuplicateIntersections.push(intersection);
+            encounteredExternalModuleVariants.push(
+              intersection.object.userData.variant,
+            );
+          }
+        } else {
+          noDuplicateIntersections.push(intersection);
+
+          if (intersection.object.userData.type === ArmorType.Primary) {
+            break;
+          }
+        }
+      }
+
+      if (
+        !allowRicochet &&
+        noDuplicateIntersections.every((intersection) => {
+          intersection.object.userData.type !== ArmorType.Primary;
+        })
+      ) {
+        return null;
+      }
+
+      let remainingPenetration = remainingPenetrationInput ?? penetration;
+      let index = 0;
+      for (const intersection of noDuplicateIntersections) {
+        const layer = intersection.object.userData;
+        const surfaceNormal = intersection
+          .normal!.clone()
+          .applyQuaternion(
+            intersection.object.getWorldQuaternion(new Quaternion()),
+          );
+
+        if (shell.type === ShellType.HEAT && index > 0) {
+          const lastLayer = shot.in.layers.at(
+            -1,
+          ) as TankopediaEphemeral.ShotLayerBase;
+          const distance = lastLayer.point.distanceTo(intersection.point);
+          remainingPenetration -= 0.5 * remainingPenetration * distance;
+          const blocked = remainingPenetration <= 0;
+
+          shot.in.layers.push({
+            type: null,
+            distance,
+            status: blocked ? 'blocked' : 'penetration',
+          });
+
+          if (blocked) break;
+        }
+
+        if (layer.type === ArmorType.External) {
+          const thickness = layer.thickness * thicknessCoefficient;
+          remainingPenetration -= thickness;
+          const blocked =
+            remainingPenetration <= 0 || shell.type === ShellType.HE;
+
+          shot.in.layers.push({
+            type: ArmorType.External,
+            index,
+            thickness,
+            point: intersection.point,
+            surfaceNormal,
+            status:
+              shell.type === ShellType.HE
+                ? 'blocked'
+                : blocked
+                ? 'blocked'
+                : 'penetration',
+            variant: layer.variant,
+          });
+        } else {
+          const thickness = layer.thickness;
+          const ricochet = degToRad(
+            isExplosive(shell.type) ? 90 : shell.ricochet!,
+          );
+          const angle = surfaceNormal.angleTo(cameraNormal);
+
+          const threeCalibersRule =
+            shell.caliber > thickness * 3 || index > 0 || !allowRicochet;
+          const twoCalibersRule = shell.caliber > thickness * 2;
+          const normalization = degToRad(shell.normalization ?? 0);
+          const finalNormalization = twoCalibersRule
+            ? (1.4 * normalization * shell.caliber) / (2.0 * thickness)
+            : normalization;
+          const finalThickness =
+            thickness / Math.cos(Math.max(0, angle - finalNormalization));
+
+          if (!threeCalibersRule && angle >= ricochet) {
+            remainingPenetration *= 0.75;
+
+            shot.in.layers.push({
+              type: layer.type,
+              index,
+              thickness,
+              thicknessAngled: finalThickness,
+              point: intersection.point,
+              surfaceNormal,
+              status: 'ricochet',
+              angle,
+            });
+
+            break;
+          } else {
+            remainingPenetration -= finalThickness;
+            const blocked = remainingPenetration <= 0;
+
+            shot.in.layers.push({
+              type: layer.type,
+              index,
+              thickness,
+              thicknessAngled: finalThickness,
+              point: intersection.point,
+              surfaceNormal: intersection.face!.normal,
+              status:
+                shell.type === ShellType.HE && layer.type !== ArmorType.Primary
+                  ? 'blocked'
+                  : blocked
+                  ? 'blocked'
+                  : 'penetration',
+              angle,
+            });
+          }
+        }
+
+        if (shell.type !== ShellType.HE && remainingPenetration <= 0) {
+          break;
+        }
+
+        index++;
+      }
+
+      const lastLayer = shot.in.layers.at(-1) as
+        | TankopediaEphemeral.ShotLayerNonExternal
+        | undefined;
+      const firstLayer = shot.in.layers[0] as
+        | TankopediaEphemeral.ShotLayerBase
+        | undefined;
+
+      if (!lastLayer || !firstLayer) {
+        return null;
+      } else {
+        if (shell.type === ShellType.HE) {
+          const totalSpacedArmorThickness = shot.in.layers.reduce(
+            (acc, layer) => {
+              if (layer.type === null || layer.type === ArmorType.Primary) {
+                return acc;
+              }
+
+              if (layer.type === ArmorType.External) {
+                return acc + layer.thickness;
+              }
+
+              return acc + layer.thicknessAngled;
+            },
+            0,
+          );
+          const distanceFromSpacedArmor = firstLayer.point.distanceTo(
+            lastLayer.point,
+          );
+          const finalDamage = Math.max(
+            0,
+            0.5 *
+              shell.damage.armor *
+              (1 - distanceFromSpacedArmor / shell.explosionRadius!) -
+              1.1 *
+                (lastLayer.thicknessAngled +
+                  Math.min(penetration, totalSpacedArmorThickness)),
+          );
+
+          /**
+           * Above is some peculiar math. We're multiplying 1.1 by the
+           * thickness of the core plate plus the total spaced armor
+           * thickness capped to the penetration itself. This is because
+           * the shader is normalized by the penetration value; hence,
+           * the total spaced armor thickness cannot ever be thicker
+           * than the penetration. This is a precision error on the
+           * shader-side and I do not intend on fixing it. Instead,
+           * for parity's sake, I am capping the value here.
+           */
+
+          if (shot.in.layers.length > 1 || lastLayer.status === 'blocked') {
+            shot.in.status = finalDamage > 0 ? 'splash' : 'blocked';
+            shot.damage = finalDamage;
+          } else {
+            shot.in.status = 'penetration';
+            shot.damage = shell.damage.armor;
+          }
+        } else {
+          if (lastLayer.status === 'blocked') {
+            shot.in.status = 'blocked';
+            shot.damage = 0;
+          } else if (lastLayer.status === 'penetration') {
+            shot.in.status = 'penetration';
+            shot.damage = shell.damage.armor;
+          } else {
+            const caster = new Raycaster();
+            // https://math.stackexchange.com/a/13263/1222875
+            const shellNormal = cameraNormal.clone().multiplyScalar(-1);
+            const ricochetNormal = shellNormal
+              .clone()
+              .sub(
+                lastLayer.surfaceNormal
+                  .clone()
+                  .multiplyScalar(2 * shellNormal.dot(lastLayer.surfaceNormal)),
+              );
+
+            caster.set(lastLayer.point, ricochetNormal);
+
+            const ricochetIntersections = caster.intersectObjects(
+              props.scene.children,
+              true,
+            );
+            const outShot = await shoot(
+              lastLayer.point,
+              ricochetIntersections,
+              false,
+              remainingPenetration,
+            );
+
+            shot.in.status = 'ricochet';
+            if (outShot === null) {
+              shot.damage = 0;
+              shot.out = {
+                surfaceNormal: ricochetNormal,
+                layers: [],
+                status: 'ricochet',
+              };
+            } else {
+              shot.damage = outShot.damage;
+              shot.out = outShot.in;
+              shot.out.surfaceNormal = ricochetNormal;
+            }
+          }
+        }
+      }
+
+      return shot;
+    },
+    [camera],
+  );
+
+  return (
+    <>
+      {props.type === ArmorType.Primary &&
+        jsxTree(
+          node,
+          {
+            mesh: {
+              renderOrder: 0,
+              material: omitMaterial,
+              userData: {
+                type: ArmorType.Primary,
+                thickness,
+              } satisfies ArmorUserData,
+              async onClick(event) {
+                event.stopPropagation();
+                const shot = (await shoot(
+                  event.point,
+                  event.intersections,
+                  true,
+                ))!;
+                tankopediaEphemeralStore.setState({ shot });
+              },
+            },
+          },
+          node.uuid,
+        )}
+
+      {props.type === ArmorType.Spaced && (
+        <SpacedArmorSubSpaced node={node} thickness={thickness} />
+      )}
+
+      {props.type === ArmorType.External && (
+        <SpacedArmorSubExternal
+          node={node}
+          thickness={thickness}
+          variant={props.variant}
+          clip={clip}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,406 @@
+import { normalizeAngleRad } from '@blitzkit/core/src/math/normalizeAngleRad';
+import { ThreeEvent, useThree } from '@react-three/fiber';
+import { memo, useRef } from 'react';
+import { Group, Plane, Vector2, Vector3 } from 'three';
+import { useArmor } from '../../../hooks/useArmor';
+import { useModel } from '../../../hooks/useModel';
+import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
+import { useTankTransform } from '../../../hooks/useTankTransform';
+import * as Duel from '../../../stores/duel';
+import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
+import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
+import { ModelTankWrapper } from './ModelTankWrapper';
+import { ArmorType } from './SpacedArmorScene';
+import { StaticArmorSceneComponent } from './StaticArmorSceneComponent';
+
+interface ArmorSceneProps {
+  thicknessRange: ThicknessRange;
+}
+
+export interface ThicknessRange {
+  value: number;
+}
+
+export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
+  const wrapper = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null);
+  const gunContainer = useRef<Group>(null);
+  const protagonist = Duel.use((draft) => draft.protagonist);
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const track = Duel.use((state) => state.protagonist.track);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const { gltf: armorGltf } = useArmor(tank.id);
+  const { gltf: modelGltf } = useModel(tank.id);
+  const armorNodes = Object.values(armorGltf.nodes);
+  const modelNodes = Object.values(modelGltf.nodes);
+  const tankModelDefinition = useTankModelDefinition();
+  const trackModelDefinition = tankModelDefinition.tracks[track.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+  const hullOrigin = correctZYTuple(trackModelDefinition.origin);
+  const turretOrigin = correctZYTuple(tankModelDefinition.turretOrigin);
+  const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
+  const mutateDuel = Duel.useMutation();
+  const canvas = useThree((state) => state.gl.domElement);
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const duelStore = Duel.useStore();
+  const maskOrigin =
+    gunModelDefinition.mask === undefined
+      ? undefined
+      : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
+  const showPrimaryArmor = TankopediaPersistent.use(
+    (state) => state.model.visual.showPrimaryArmor,
+  );
+  const showSpacedArmor = TankopediaPersistent.use(
+    (state) => state.model.visual.showSpacedArmor,
+  );
+  const showExternalModules = TankopediaPersistent.use(
+    (state) => state.model.visual.showExternalModules,
+  );
+  const isDynamicArmorActive = Duel.use((state) =>
+    state.protagonist.consumables.includes(73),
+  );
+
+  useTankTransform(protagonist, turretContainer, gunContainer);
+
+  return (
+    <ModelTankWrapper ref={wrapper}>
+      <group position={hullOrigin}>
+        {armorNodes.map((node) => {
+          const isHull = node.name.startsWith('hull_');
+          const isVisible = isHull;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            tankModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (!showPrimaryArmor && !spaced) ||
+            (!showSpacedArmor && spaced) ||
+            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (!isDynamicArmorActive && node.name.includes('state_01'))
+          )
+            return null;
+
+          return (
+            <StaticArmorSceneComponent
+              name={node.name}
+              thicknessRange={thicknessRange}
+              key={node.uuid}
+              type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+              thickness={thickness}
+              node={node}
+              onPointerDown={(event) => event.stopPropagation()}
+            />
+          );
+        })}
+      </group>
+
+      {modelNodes.map((node) => {
+        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isTrack = node.name.startsWith('chassis_track_');
+        const isVisible = isWheel || isTrack;
+
+        if (!isVisible || !showExternalModules) return null;
+
+        return (
+          <StaticArmorSceneComponent
+            name={node.name}
+            thicknessRange={thicknessRange}
+            key={node.uuid}
+            type={ArmorType.External}
+            thickness={trackModelDefinition.thickness}
+            variant="track"
+            node={node}
+            onPointerDown={(event) => event.stopPropagation()}
+          />
+        );
+      })}
+
+      <group ref={turretContainer}>
+        {armorNodes.map((node) => {
+          const isCurrentTurret = node.name.startsWith(
+            `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+          );
+          const isVisible = isCurrentTurret;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            turretModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (!showPrimaryArmor && !spaced) ||
+            (!showSpacedArmor && spaced) ||
+            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (!isDynamicArmorActive && node.name.includes('state_01'))
+          ) {
+            return null;
+          }
+
+          const position = new Vector2();
+          const delta = new Vector2();
+          let pitch = 0;
+          let yaw = 0;
+
+          function onPointerDown(event: ThreeEvent<PointerEvent>) {
+            event.stopPropagation();
+
+            position.set(event.clientX, event.clientY);
+            yaw = protagonist.yaw;
+            pitch = protagonist.pitch;
+
+            mutateTankopediaEphemeral((draft) => {
+              draft.controlsEnabled = false;
+            });
+            mutateTankopediaEphemeral((draft) => {
+              draft.shot = undefined;
+              draft.highlightArmor = undefined;
+            });
+            window.addEventListener('pointermove', handlePointerMove);
+            window.addEventListener('pointerup', handlePointerUp);
+          }
+          async function handlePointerMove(event: PointerEvent) {
+            const duel = duelStore.getState();
+            const hasImprovedVerticalStabilizer = await hasEquipment(
+              122,
+              duel.protagonist.tank.equipment,
+              duel.protagonist.equipmentMatrix,
+            );
+            const boundingRect = canvas.getBoundingClientRect();
+
+            delta.set(event.clientX, event.clientY).sub(position);
+            position.set(event.clientX, event.clientY);
+
+            [pitch, yaw] = applyPitchYawLimits(
+              pitch,
+              yaw + delta.x * (Math.PI / boundingRect.width),
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+            modelTransformEvent.emit({ pitch, yaw });
+          }
+          function handlePointerUp() {
+            mutateDuel((draft) => {
+              draft.protagonist.pitch = normalizeAngleRad(pitch);
+              draft.protagonist.yaw = normalizeAngleRad(yaw);
+            });
+            mutateTankopediaEphemeral((draft) => {
+              draft.controlsEnabled = true;
+            });
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+          }
+
+          return (
+            <group position={hullOrigin}>
+              <group key={node.uuid} position={turretOrigin}>
+                <StaticArmorSceneComponent
+                  name={node.name}
+                  thicknessRange={thicknessRange}
+                  key={node.uuid}
+                  type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+                  thickness={thickness}
+                  node={node}
+                  onPointerDown={onPointerDown}
+                />
+              </group>
+            </group>
+          );
+        })}
+
+        <group ref={gunContainer}>
+          {armorNodes.map((node) => {
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+            );
+            const isVisible = isCurrentGun;
+            const armorId = nameToArmorId(node.name);
+            const { spaced, thickness } = resolveArmor(
+              gunModelDefinition.armor,
+              armorId,
+            );
+
+            if (
+              !isVisible ||
+              thickness === undefined ||
+              (!showPrimaryArmor && !spaced) ||
+              (!showSpacedArmor && spaced) ||
+              (isDynamicArmorActive && node.name.includes('state_00')) ||
+              (!isDynamicArmorActive && node.name.includes('state_01'))
+            )
+              return null;
+
+            const position = new Vector2();
+            const delta = new Vector2();
+            let pitch = 0;
+            let yaw = 0;
+
+            function onPointerDown(event: ThreeEvent<PointerEvent>) {
+              event.stopPropagation();
+
+              mutateTankopediaEphemeral((draft) => {
+                draft.controlsEnabled = false;
+              });
+              mutateTankopediaEphemeral((draft) => {
+                draft.shot = undefined;
+                draft.highlightArmor = undefined;
+              });
+
+              position.set(event.clientX, event.clientY);
+              pitch = protagonist.pitch;
+              yaw = protagonist.yaw;
+
+              window.addEventListener('pointermove', handlePointerMove);
+              window.addEventListener('pointerup', handlePointerUp);
+            }
+            async function handlePointerMove(event: PointerEvent) {
+              const duel = duelStore.getState();
+              const hasImprovedVerticalStabilizer = await hasEquipment(
+                122,
+                duel.protagonist.tank.equipment,
+                duel.protagonist.equipmentMatrix,
+              );
+              const boundingRect = canvas.getBoundingClientRect();
+              delta.set(event.clientX, event.clientY).sub(position);
+              position.set(event.clientX, event.clientY);
+
+              [pitch, yaw] = applyPitchYawLimits(
+                pitch - delta.y * (Math.PI / boundingRect.height),
+                yaw + delta.x * (Math.PI / boundingRect.width),
+                gunModelDefinition.pitch,
+                turretModelDefinition.yaw,
+                hasImprovedVerticalStabilizer,
+              );
+              modelTransformEvent.emit({ pitch, yaw });
+            }
+            function handlePointerUp() {
+              mutateTankopediaEphemeral((draft) => {
+                draft.controlsEnabled = true;
+              });
+              mutateDuel((draft) => {
+                draft.protagonist.pitch = normalizeAngleRad(pitch);
+                draft.protagonist.yaw = normalizeAngleRad(yaw);
+              });
+              window.removeEventListener('pointermove', handlePointerMove);
+              window.removeEventListener('pointerup', handlePointerUp);
+            }
+
+            return (
+              <group position={hullOrigin}>
+                <group
+                  key={node.uuid}
+                  position={turretOrigin.clone().add(gunOrigin)}
+                >
+                  <StaticArmorSceneComponent
+                    name={node.name}
+                    thicknessRange={thicknessRange}
+                    type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+                    thickness={thickness}
+                    node={node}
+                    onPointerDown={onPointerDown}
+                  />
+                </group>
+              </group>
+            );
+          })}
+
+          {modelNodes.map((node) => {
+            const gunString = `gun_${gunModelDefinition.model
+              .toString()
+              .padStart(2, '0')}`;
+            const isCurrentGun = gunModelDefinition.mask
+              ? node.name.startsWith(gunString)
+              : node.name === gunString;
+            const isVisible = isCurrentGun;
+
+            if (!isVisible || !showExternalModules) return null;
+
+            const position = new Vector2();
+            const delta = new Vector2();
+            let pitch = 0;
+            let yaw = 0;
+
+            function onPointerDown(event: ThreeEvent<PointerEvent>) {
+              event.stopPropagation();
+
+              mutateTankopediaEphemeral((draft) => {
+                draft.controlsEnabled = false;
+              });
+              mutateTankopediaEphemeral((draft) => {
+                draft.shot = undefined;
+                draft.highlightArmor = undefined;
+              });
+
+              position.set(event.clientX, event.clientY);
+              pitch = protagonist.pitch;
+              yaw = protagonist.yaw;
+
+              window.addEventListener('pointermove', handlePointerMove);
+              window.addEventListener('pointerup', handlePointerUp);
+            }
+            async function handlePointerMove(event: PointerEvent) {
+              const duel = duelStore.getState();
+              const hasImprovedVerticalStabilizer = await hasEquipment(
+                122,
+                duel.protagonist.tank.equipment,
+                duel.protagonist.equipmentMatrix,
+              );
+              const boundingRect = canvas.getBoundingClientRect();
+              delta.set(event.clientX, event.clientY).sub(position);
+              position.set(event.clientX, event.clientY);
+
+              [pitch, yaw] = applyPitchYawLimits(
+                pitch - delta.y * (Math.PI / boundingRect.height),
+                yaw + delta.x * (Math.PI / boundingRect.width),
+                gunModelDefinition.pitch,
+                turretModelDefinition.yaw,
+                hasImprovedVerticalStabilizer,
+              );
+              modelTransformEvent.emit({ pitch, yaw });
+            }
+            function handlePointerUp() {
+              mutateTankopediaEphemeral((draft) => {
+                draft.controlsEnabled = true;
+              });
+              mutateDuel((draft) => {
+                draft.protagonist.pitch = normalizeAngleRad(pitch);
+                draft.protagonist.yaw = normalizeAngleRad(yaw);
+              });
+              window.removeEventListener('pointermove', handlePointerMove);
+              window.removeEventListener('pointerup', handlePointerUp);
+            }
+
+            return (
+              <StaticArmorSceneComponent
+                name={node.name}
+                thicknessRange={thicknessRange}
+                key={node.uuid}
+                type={ArmorType.External}
+                thickness={gunModelDefinition.thickness}
+                variant="gun"
+                node={node}
+                clip={
+                  maskOrigin === undefined
+                    ? undefined
+                    : new Plane(new Vector3(0, 0, -1), -maskOrigin)
+                }
+                hullOrigin={hullOrigin}
+                turretOrigin={turretOrigin}
+                gunOrigin={gunOrigin}
+                onPointerDown={onPointerDown}
+              />
+            );
+          })}
+        </group>
+      </group>
+    </ModelTankWrapper>
+  );
+});

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

@@ -0,0 +1,265 @@
+import { I_HAT, J_HAT } from '@blitzkit/core/src/math/axis';
+import { MeshProps, useThree } from '@react-three/fiber';
+import { clamp } from 'lodash';
+import { useEffect, useMemo } from 'react';
+import {
+  Box3,
+  Color,
+  DoubleSide,
+  FrontSide,
+  LineBasicMaterial,
+  Mesh,
+  MeshStandardMaterial,
+  Object3D,
+  Plane,
+  Quaternion,
+  Vector3,
+} from 'three';
+import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
+import { ArmorType } from './SpacedArmorScene';
+import {
+  ArmorUserData,
+  ExternalModuleVariant,
+} from './SpacedArmorSceneComponent';
+import { ThicknessRange } from './StaticArmor';
+
+type StaticArmorSceneComponentProps = {
+  name: string;
+  thickness: number;
+  thicknessRange: ThicknessRange;
+  node: Object3D;
+  onPointerDown?: MeshProps['onPointerDown'];
+} & (
+  | {
+      type: Exclude<ArmorType, ArmorType.External>;
+    }
+  | {
+      type: ArmorType.External;
+      variant: ExternalModuleVariant;
+    }
+) &
+  (
+    | {
+        clip?: undefined;
+      }
+    | {
+        clip: Plane;
+        hullOrigin: Vector3;
+        turretOrigin: Vector3;
+        gunOrigin: Vector3;
+      }
+  );
+
+const unselectedColor = new Color(0x404040);
+const externalModuleColor = new Color(0, 1 / 4, 1 / 2);
+
+export function StaticArmorSceneComponent({
+  name,
+  thickness,
+  thicknessRange,
+  node,
+  onPointerDown,
+  ...props
+}: StaticArmorSceneComponentProps) {
+  const mutateTankopediaEphemeralStore = TankopediaEphemeral.useMutation();
+  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
+  const camera = useThree((state) => state.camera);
+  const x = thickness / thicknessRange.value;
+  const xClamped = clamp(x, 0, 1);
+  let color: Color;
+  let opacity: number;
+  let depthWrite = true;
+
+  switch (props.type) {
+    case ArmorType.Primary:
+      if (x > 1) {
+        color = new Color(clamp(2 - x, 0.5, 1), 0, 0);
+      } else {
+        color = new Color(-((1 - x) ** 2) + 1, -(x ** 2) + 1, 0);
+      }
+      opacity = 1;
+      break;
+
+    case ArmorType.Spaced:
+      color = new Color(
+        clamp(1 - (7 / 8) * xClamped, 0, 1),
+        0,
+        clamp(1 - (1 / 8) * xClamped, 0, 1),
+      );
+      opacity = clamp(x + 1 / 2, 0, 1);
+      break;
+
+    case ArmorType.External:
+      color = externalModuleColor;
+      opacity = 1 / 8;
+      depthWrite = false;
+      break;
+  }
+
+  opacity = clamp(opacity, 0, 1);
+
+  const surfaceMaterial = useMemo(
+    () =>
+      new MeshStandardMaterial({
+        color,
+        opacity,
+        transparent: opacity < 1,
+        depthWrite,
+        ...(props.clip ? { clippingPlanes: [props.clip] } : {}),
+      }),
+    [thickness],
+  );
+  const outlineMaterial = useMemo(
+    () =>
+      new LineBasicMaterial({
+        color: color
+          .clone()
+          .multiplyScalar(props.type === ArmorType.Spaced ? 2 ** 2 : 2 ** -1),
+      }),
+    [thickness],
+  );
+
+  useEffect(() => {
+    function handleHighlightArmor(selectedName?: string) {
+      if (selectedName === undefined) {
+        // nothing selected, go back to defaults
+        surfaceMaterial.opacity = opacity;
+        surfaceMaterial.transparent = opacity < 1;
+        surfaceMaterial.color = color;
+        surfaceMaterial.depthWrite = props.type !== ArmorType.External;
+        surfaceMaterial.side = FrontSide;
+        outlineMaterial.visible = true;
+      } else if (
+        selectedName === name ||
+        (name.startsWith('chassis_') && selectedName.startsWith('chassis_')) ||
+        (name.startsWith('gun_') &&
+          selectedName.startsWith('gun_') &&
+          !name.includes('_armor_') &&
+          !selectedName.includes('_armor_'))
+      ) {
+        // this selected, stand out!
+        surfaceMaterial.opacity = 1;
+        surfaceMaterial.transparent = false;
+        surfaceMaterial.color = color;
+        surfaceMaterial.depthWrite = true;
+        surfaceMaterial.side = DoubleSide;
+        outlineMaterial.visible = true;
+      } else {
+        // something else selected, become background
+        surfaceMaterial.opacity = 1 / 4;
+        surfaceMaterial.transparent = true;
+        surfaceMaterial.color = unselectedColor;
+        surfaceMaterial.depthWrite = props.type !== ArmorType.External;
+        surfaceMaterial.side = FrontSide;
+        outlineMaterial.visible = false;
+      }
+
+      surfaceMaterial.needsUpdate = true;
+    }
+
+    const unsubscribes = [
+      tankopediaEphemeralStore.subscribe(
+        (state) => state.highlightArmor?.name,
+        handleHighlightArmor,
+      ),
+    ];
+
+    if (props.clip) {
+      /**
+       * hook inside an if statement?? don't panic! I assure you the clip prop
+       * never mutates :)
+       */
+
+      const { clip } = props;
+      const gunOrigin = unrotateDavaVector(props.gunOrigin.clone());
+      const neckOrigin = unrotateDavaVector(props.hullOrigin.clone()).add(
+        unrotateDavaVector(props.turretOrigin.clone()),
+      );
+      const barrelOrigin = neckOrigin.clone().add(gunOrigin);
+      const distanceToBarrel = clip.distanceToPoint(barrelOrigin);
+      const point = new Vector3();
+
+      function handleModelTransform(data: ModelTransformEventData) {
+        clip.normal
+          .set(0, 0, -1)
+          .applyAxisAngle(I_HAT, data.pitch)
+          .applyAxisAngle(J_HAT, data.yaw ?? 0);
+        clip.constant = 0;
+
+        point
+          .copy(gunOrigin)
+          .applyAxisAngle(J_HAT, data.yaw ?? 0)
+          .add(clip.normal.multiplyScalar(-distanceToBarrel))
+          .add(neckOrigin);
+        clip.normal.normalize();
+        clip.constant -= clip.distanceToPoint(point);
+      }
+
+      modelTransformEvent.on(handleModelTransform);
+
+      unsubscribes.push(() => modelTransformEvent.off(handleModelTransform));
+    }
+
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [thickness]);
+
+  return (
+    <>
+      {jsxTree(node, {
+        mesh: {
+          material: surfaceMaterial,
+          onPointerDown,
+          userData: {
+            type: props.type,
+            variant: props.type === ArmorType.External ? props.variant : 'gun',
+            thickness,
+          } satisfies ArmorUserData,
+
+          onClick(event) {
+            if (discardClippingPlane(event.object, event.point)) return;
+
+            event.stopPropagation();
+
+            const { editStatic } = tankopediaEphemeralStore.getState();
+
+            const bounds = new Box3().setFromObject(event.object);
+            const point = bounds.min
+              .clone()
+              .add(bounds.max)
+              .divideScalar(2)
+              .setY(bounds.max.y);
+            const cameraNormal = camera.position.clone().sub(point).normalize();
+            const surfaceNormal = event
+              .normal!.clone()
+              .applyQuaternion(
+                event.object.getWorldQuaternion(new Quaternion()),
+              );
+            const angle = surfaceNormal.angleTo(cameraNormal);
+            const thicknessAngled = thickness / Math.sin(Math.PI / 2 - angle);
+
+            mutateTankopediaEphemeralStore((draft) => {
+              draft.highlightArmor = {
+                type: props.type,
+                name,
+                point,
+                thickness,
+                thicknessAngled,
+                angle,
+                color: `#${color.getHexString()}`,
+                editingPlate: editStatic,
+              };
+            });
+          },
+        },
+      })}
+
+      {node instanceof Mesh && (
+        <lineSegments material={outlineMaterial}>
+          <edgesGeometry args={[node.geometry, 45]} />
+        </lineSegments>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { createPortal, useFrame } from '@react-three/fiber';
+import { memo, useState } from 'react';
+import { DepthTexture, Scene, Vector2 } from 'three';
+import { PrimaryArmorScene } from './components/PrimaryArmorScene';
+import { spacedArmorRenderTarget } from './components/PrimaryArmorSceneComponent/target';
+import { SpacedArmorScene } from './components/SpacedArmorScene';
+
+export const Armor = memo(() => {
+  const [spacedArmorScene] = useState(() => new Scene());
+  const [primaryArmorScene] = useState(() => new Scene());
+  const spacedArmorPortal = createPortal(
+    <SpacedArmorScene scene={spacedArmorScene} />,
+    spacedArmorScene,
+  );
+  const primaryArmorPortal = createPortal(
+    <PrimaryArmorScene />,
+    primaryArmorScene,
+  );
+
+  const renderSize = new Vector2();
+  const newRenderSize = new Vector2();
+
+  useFrame(({ gl, camera, scene }) => {
+    gl.autoClear = true;
+
+    gl.getSize(newRenderSize).multiplyScalar(gl.getPixelRatio());
+
+    if (!newRenderSize.equals(renderSize)) {
+      renderSize.copy(newRenderSize);
+      spacedArmorRenderTarget.depthTexture = new DepthTexture(
+        renderSize.x,
+        renderSize.y,
+      );
+    }
+
+    spacedArmorRenderTarget.setSize(renderSize.x, renderSize.y);
+    gl.setRenderTarget(spacedArmorRenderTarget);
+    gl.render(spacedArmorScene, camera);
+
+    gl.autoClear = false;
+
+    gl.setRenderTarget(null);
+    gl.render(scene, camera);
+
+    gl.clearDepth();
+    gl.render(primaryArmorScene, camera);
+  }, 1);
+
+  return (
+    <>
+      {spacedArmorPortal}
+      {primaryArmorPortal}
+    </>
+  );
+});

packages/website/src/components/ConsumablesManager.tsx

@@ -0,0 +1,71 @@
+import { ConsumableEntry } from '@blitzkit/core/src/blitzkit/consumableDefinitions';
+import { Flex, FlexProps } from '@radix-ui/themes';
+import { ConsumableButton } from './ModuleButtons/ConsumableButton';
+
+type ConsumablesManagerProps = FlexProps & {
+  consumables: ConsumableEntry[];
+  selected: number[];
+  onConsumablesChange?: (consumables: number[]) => void;
+  disabled?: boolean;
+  timers?: boolean;
+  hasHighEndConsumables?: boolean;
+  hasConsumableDeliverySystem?: boolean;
+  cooldownBooster?: number;
+};
+
+export function ConsumablesManager({
+  consumables,
+  selected,
+  onConsumablesChange,
+  disabled,
+  timers,
+  hasConsumableDeliverySystem,
+  cooldownBooster,
+  hasHighEndConsumables,
+  ...props
+}: ConsumablesManagerProps) {
+  return (
+    <Flex wrap="wrap" gap="2" {...props}>
+      {consumables.map((consumable) => {
+        const isSelected = selected.some((id) => id === consumable.id);
+
+        return (
+          <ConsumableButton
+            special={consumable.duration === undefined}
+            duration={
+              timers
+                ? consumable.duration === undefined
+                  ? undefined
+                  : consumable.duration * (hasHighEndConsumables ? 1.7 : 1)
+                : undefined
+            }
+            cooldown={
+              timers
+                ? consumable.cooldown *
+                  (hasConsumableDeliverySystem ? 0.88 : 1) *
+                  (1 - cooldownBooster! * 0.1)
+                : undefined
+            }
+            key={consumable.id}
+            disabled={disabled && !isSelected}
+            consumable={consumable.id}
+            selected={isSelected}
+            onClick={() => {
+              if (!onConsumablesChange) return;
+
+              const draft = [...selected];
+
+              if (draft.some((id) => id === consumable.id)) {
+                draft.splice(draft.indexOf(consumable.id), 1);
+              } else {
+                draft.push(consumable.id);
+              }
+
+              onConsumablesChange(draft);
+            }}
+          />
+        );
+      })}
+    </Flex>
+  );
+}

packages/website/src/components/CrewSkillManager.tsx

@@ -0,0 +1,58 @@
+import { asset, Tier, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
+import { permanentSkills } from '@blitzkit/core/src/blitz/permanentSkills';
+import { skillDefinitions } from '@blitzkit/core/src/blitzkit/skillDefinitions';
+import { Flex } from '@radix-ui/themes';
+import { use } from 'react';
+import { GenericTankComponentButton } from './ModuleButtons/GenericTankComponentButton';
+
+interface CrewSkillManagerProps {
+  skillLevels: Record<string, number>;
+  onChange?: (skillLevels: Record<string, number>) => void;
+}
+
+export function CrewSkillManager({
+  skillLevels,
+  onChange,
+}: CrewSkillManagerProps) {
+  const awaitedSkillDefinitions = use(skillDefinitions);
+
+  return (
+    <Flex direction="column" gap="2">
+      {Object.entries(awaitedSkillDefinitions.classes).map(
+        ([tankClass, skills]) => (
+          <Flex gap="2" key={tankClass}>
+            {skills.map((skill) => {
+              const level = skillLevels[skill];
+
+              return (
+                <GenericTankComponentButton
+                  key={skill}
+                  special={!permanentSkills.includes(skill)}
+                  selected={level > 0}
+                  discriminator={
+                    level === 0 ? undefined : TIER_ROMAN_NUMERALS[level as Tier]
+                  }
+                  icon={asset(`icons/skills/${skill}.webp`)}
+                  onClick={(event) => {
+                    if (!onChange) return;
+
+                    const draft = { ...skillLevels };
+
+                    if (event.shiftKey) {
+                      draft[skill] = draft[skill] === 0 ? 7 : 0;
+                    } else {
+                      draft[skill] = level - 1;
+                      if (draft[skill] < 0) draft[skill] = 7;
+                    }
+
+                    onChange(draft);
+                  }}
+                />
+              );
+            })}
+          </Flex>
+        ),
+      )}
+    </Flex>
+  );
+}

packages/website/src/components/EquipmentManager.tsx

@@ -0,0 +1,67 @@
+import { EquipmentPreset } from '@blitzkit/core/src/blitzkit/equipmentDefinitions';
+import { Flex } from '@radix-ui/themes';
+import { cloneDeep } from 'lodash';
+import { EquipmentButton } from './ModuleButtons/EquipmentButton';
+
+interface EquipmentManagerProps {
+  preset: EquipmentPreset;
+  matrix: EquipmentMatrix;
+  onChange: (matrix: EquipmentMatrix) => void;
+}
+
+export function EquipmentManager({
+  preset,
+  matrix,
+  onChange,
+}: EquipmentManagerProps) {
+  return (
+    <Flex direction="column" gap="2">
+      {preset.map((equipmentRow, rowIndex) => (
+        <Flex gap="2" key={rowIndex}>
+          {equipmentRow.map((equipment, columnIndex) => (
+            <Flex key={columnIndex}>
+              <EquipmentButton
+                equipment={equipment[0]}
+                style={{
+                  borderTopRightRadius: 0,
+                  borderBottomRightRadius: 0,
+                }}
+                selected={matrix[rowIndex][columnIndex] === -1}
+                onClick={() => {
+                  const draft = cloneDeep(matrix);
+
+                  if (draft[rowIndex][columnIndex] === -1) {
+                    draft[rowIndex][columnIndex] = 0;
+                  } else {
+                    draft[rowIndex][columnIndex] = -1;
+                  }
+
+                  onChange(draft);
+                }}
+              />
+              <EquipmentButton
+                equipment={equipment[1]}
+                style={{
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                }}
+                selected={matrix[rowIndex][columnIndex] === 1}
+                onClick={() => {
+                  const draft = cloneDeep(matrix);
+
+                  if (draft[rowIndex][columnIndex] === 1) {
+                    draft[rowIndex][columnIndex] = 0;
+                  } else {
+                    draft[rowIndex][columnIndex] = 1;
+                  }
+
+                  onChange(draft);
+                }}
+              />
+            </Flex>
+          ))}
+        </Flex>
+      ))}
+    </Flex>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { asset } from '@blitzkit/core';
+import { consumableDefinitions } from '@blitzkit/core/src/blitzkit/consumableDefinitions';
+import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { Flex, Text } from '@radix-ui/themes';
+import { use } from 'react';
+import { useDelta } from '../../hooks/useDelta';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ConsumableButtonProps extends TankComponentButtonProps {
+  consumable: number;
+  duration?: number;
+  cooldown?: number;
+}
+
+export function ConsumableButton({
+  consumable,
+  cooldown,
+  duration,
+  ...props
+}: ConsumableButtonProps) {
+  const awaitedConsumableDefinitions = use(consumableDefinitions);
+  const cooldownDelta = useDelta(cooldown ?? 0);
+  const durationDelta = useDelta(duration ?? 0);
+
+  return (
+    <GenericTankComponentButton
+      style={{ width: '6rem' }}
+      tooltip={awaitedConsumableDefinitions[consumable].name}
+      icon={asset(`icons/consumables/${consumable}.webp`)}
+      {...props}
+    >
+      {(cooldown || duration) && (
+        <Flex direction="column" gap="1" ml="-2" mr="2">
+          {duration && (
+            <Text
+              size="1"
+              color={
+                durationDelta > 0
+                  ? 'green'
+                  : durationDelta < 0
+                  ? 'tomato'
+                  : undefined
+              }
+            >
+              <Flex align="center" gap="1" style={{ marginBottom: -4 }}>
+                <ClockIcon width={12} height={12} />
+                {Math.round(duration)}s
+              </Flex>
+            </Text>
+          )}
+          {cooldown && (
+            <Text
+              size="1"
+              color={
+                cooldownDelta < 0
+                  ? 'green'
+                  : cooldownDelta > 0
+                  ? 'tomato'
+                  : undefined
+              }
+            >
+              <Flex align="center" gap="1">
+                <ReloadIcon width={12} height={12} />
+                {Math.round(cooldown)}s
+              </Flex>
+            </Text>
+          )}
+        </Flex>
+      )}
+    </GenericTankComponentButton>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { asset } from '@blitzkit/core';
+import { equipmentDefinitions } from '@blitzkit/core/src/blitzkit/equipmentDefinitions';
+import { use } from 'react';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface EquipmentButtonProps extends TankComponentButtonProps {
+  equipment: number;
+}
+
+export function EquipmentButton({ equipment, ...props }: EquipmentButtonProps) {
+  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
+
+  return (
+    <GenericTankComponentButton
+      tooltip={awaitedEquipmentDefinitions.equipments[equipment].name}
+      icon={asset(`icons/equipment/${equipment}.webp`)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import {
+  TankComponentButton,
+  TankComponentButtonProps,
+} from './TankComponentButton';
+
+interface GenericTankComponentButtonProps extends TankComponentButtonProps {
+  icon: string;
+  iconStyles?: HTMLAttributes<HTMLImageElement>['style'];
+}
+
+export function GenericTankComponentButton({
+  icon,
+  iconStyles,
+  children,
+  ...props
+}: GenericTankComponentButtonProps) {
+  return (
+    <TankComponentButton {...props}>
+      <div
+        style={{
+          width: 48,
+          height: 40,
+          position: 'relative',
+        }}
+      >
+        <img
+          alt={icon}
+          draggable={false}
+          src={icon}
+          style={{
+            objectFit: 'contain',
+            width: 32,
+            height: 32,
+            position: 'absolute',
+            opacity: props.disabled ? 0.5 : 1,
+            transform: 'translate(-50%, -50%) scale(0.75)',
+            top: '50%',
+            left: '50%',
+            ...iconStyles,
+          }}
+        />
+      </div>
+
+      {children}
+    </TankComponentButton>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { asset } from '../../core/blitzkit/asset';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ModuleProps extends TankComponentButtonProps {
+  module: string;
+}
+
+export function ModuleButton({ module, ...props }: ModuleProps) {
+  return (
+    <GenericTankComponentButton
+      icon={asset(`icons/modules/${module}.webp`)}
+      iconStyles={{
+        top: '50%',
+        left: '50%',
+        transform: 'translate(calc(-50% + 2px), calc(-50% + 2px))',
+      }}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,21 @@
+import { asset } from '@blitzkit/core';
+import { provisionDefinitions } from '@blitzkit/core/src/blitzkit/provisionDefinitions';
+import { use } from 'react';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ProvisionButtonProps extends TankComponentButtonProps {
+  provision: number;
+}
+
+export function ProvisionButton({ provision, ...props }: ProvisionButtonProps) {
+  const awaitedProvisionDefinitions = use(provisionDefinitions);
+
+  return (
+    <GenericTankComponentButton
+      tooltip={awaitedProvisionDefinitions[provision].name}
+      icon={asset(`icons/provisions/${provision}.webp`)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,16 @@
+import { asset } from '@blitzkit/core/src/blitzkit/asset';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ShellButtonProps extends TankComponentButtonProps {
+  shell: string;
+}
+
+export function ShellButton({ shell, ...props }: ShellButtonProps) {
+  return (
+    <GenericTankComponentButton
+      icon={asset(`icons/shells/${shell}.webp`)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,81 @@
+import { Button, Text, Tooltip } from '@radix-ui/themes';
+import { ComponentProps, ReactNode } from 'react';
+
+export interface TankComponentButtonProps
+  extends ComponentProps<typeof Button> {
+  selected?: boolean;
+  children?: ReactNode;
+  discriminator?: ReactNode;
+  disabled?: boolean;
+  banner?: string;
+  special?: boolean;
+  tooltip?: string;
+}
+
+export function TankComponentButton({
+  variant,
+  selected,
+  discriminator,
+  special,
+  children,
+  banner,
+  disabled,
+  style,
+  tooltip,
+  ...props
+}: TankComponentButtonProps) {
+  const button = (
+    <Button
+      radius="medium"
+      color={selected ? (special ? 'amber' : undefined) : 'gray'}
+      variant={variant ?? (selected ? 'surface' : 'soft')}
+      style={{
+        padding: 0,
+        minWidth: 48,
+        height: 40,
+        position: 'relative',
+        overflow: 'hidden',
+        cursor: 'unset',
+        pointerEvents: variant === 'ghost' ? 'none' : undefined,
+        ...style,
+      }}
+      disabled={variant === 'ghost' || disabled}
+      {...props}
+    >
+      {banner !== undefined && (
+        <div
+          style={{
+            position: 'absolute',
+            width: '200%',
+            height: 12,
+            backgroundColor: banner,
+            top: '50%',
+            left: '-50%',
+            transform: 'translateY(-50%) rotate(-22.5deg)',
+          }}
+        />
+      )}
+
+      {children}
+
+      {discriminator !== undefined && (
+        <Text
+          size="1"
+          style={{
+            textShadow: '0 0 4px black',
+            position: 'absolute',
+            top: '50%',
+            right: 8,
+            textAlign: 'right',
+          }}
+          color={variant === 'ghost' ? 'gray' : undefined}
+        >
+          {discriminator}
+        </Text>
+      )}
+    </Button>
+  );
+
+  if (tooltip) return <Tooltip content={tooltip}>{button}</Tooltip>;
+  return button;
+}

packages/website/src/components/ModuleManager.tsx

@@ -0,0 +1,201 @@
+import { DropdownMenu, Flex } from '@radix-ui/themes';
+import { useState } from 'react';
+import {
+  EngineDefinition,
+  GunDefinition,
+  ShellDefinition,
+  TankDefinition,
+  TrackDefinition,
+  TurretDefinition,
+} from '../core/blitzkit/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../core/blitzkit/tankDefinitions/constants';
+import { ModuleButton } from './ModuleButtons/ModuleButton';
+
+interface ModuleManagerProps {
+  tank: TankDefinition;
+  turret: TurretDefinition;
+  gun: GunDefinition;
+  shell: ShellDefinition;
+  engine: EngineDefinition;
+  track: TrackDefinition;
+  onChange?: (modules: {
+    turret: TurretDefinition;
+    gun: GunDefinition;
+    engine: EngineDefinition;
+    track: TrackDefinition;
+  }) => void;
+}
+
+export function ModuleManager({
+  tank,
+  onChange,
+  ...modules
+}: ModuleManagerProps) {
+  const [turretMenuOpen, setTurretMenuOpen] = useState(false);
+  const [gunMenuOpen, setGunMenuOpen] = useState(false);
+  const [engineMenuOpen, setEngineMenuOpen] = useState(false);
+  const [trackMenuOpen, setTrackMenuOpen] = useState(false);
+
+  return (
+    <Flex gap="1" wrap="wrap">
+      <ModuleButton
+        module="turret"
+        discriminator={TIER_ROMAN_NUMERALS[modules.turret.tier]}
+        onClick={() => setTurretMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={turretMenuOpen} onOpenChange={setTurretMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.turret.id}`}>
+            {[...tank.turrets].reverse().map((turret) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={turret.id}
+                  value={`${turret.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.turret = turret;
+                    draft.gun = draft.turret.guns.at(-1)!;
+                    draft.shell = draft.gun.shells[0];
+
+                    onChange?.(draft);
+                    setTurretMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="turret"
+                    discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                  />{' '}
+                  {turret.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="gun"
+        discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
+        onClick={() => setGunMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={gunMenuOpen} onOpenChange={setGunMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.gun.id}`}>
+            {[...modules.turret.guns].reverse().map((gun) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={gun.id}
+                  value={`${gun.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.gun = gun;
+                    draft.shell = draft.gun.shells[0];
+
+                    onChange?.(draft);
+                    setGunMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="gun"
+                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                  />{' '}
+                  {gun.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="engine"
+        discriminator={TIER_ROMAN_NUMERALS[modules.engine.tier]}
+        onClick={() => setEngineMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={engineMenuOpen} onOpenChange={setEngineMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.engine.id}`}>
+            {[...tank.engines].reverse().map((engine) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={engine.id}
+                  value={`${engine.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.engine = engine;
+
+                    onChange?.(draft);
+                    setEngineMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="engine"
+                    discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
+                  />{' '}
+                  {engine.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="chassis"
+        discriminator={TIER_ROMAN_NUMERALS[modules.track.tier]}
+        onClick={() => setTrackMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={trackMenuOpen} onOpenChange={setTrackMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.track.id}`}>
+            {[...tank.tracks].reverse().map((track) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={track.id}
+                  value={`${track.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.track = track;
+
+                    onChange?.(draft);
+                    setTrackMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="chassis"
+                    discriminator={TIER_ROMAN_NUMERALS[track.tier]}
+                  />{' '}
+                  {track.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </Flex>
+  );
+}

packages/website/src/components/Navbar/components/WargamingAccountName.tsx

@@ -1,7 +1,6 @@
 import { idToRegion } from '@blitzkit/core';
 import { Text } from '@radix-ui/themes';
 import { use, useMemo } from 'react';
-import { getAccountInfo } from '../../../../../../src/core/blitz/getAccountInfo';
 import * as App from '../../../stores/app';
 
 export function WargamingAccountName() {

packages/website/src/components/ProvisionsManager.tsx

@@ -0,0 +1,46 @@
+import { Flex } from '@radix-ui/themes';
+import { ProvisionButton } from './ModuleButtons/ProvisionButton';
+
+interface ProvisionsManagerProps {
+  provisions: number[];
+  selected: number[];
+  disabled?: boolean;
+  onChange?: (provisions: number[]) => void;
+}
+
+export function ProvisionsManager({
+  provisions,
+  selected,
+  onChange,
+  disabled,
+}: ProvisionsManagerProps) {
+  return (
+    <Flex wrap="wrap" gap="2">
+      {provisions.map((provision, index) => {
+        const isSelected = selected.includes(provision);
+
+        return (
+          <ProvisionButton
+            key={provision}
+            disabled={disabled && !isSelected}
+            provision={provision}
+            selected={isSelected}
+            onClick={() => {
+              if (!onChange) return;
+
+              const draft = [...selected];
+
+              if (isSelected) {
+                draft.splice(draft.indexOf(provision), 1);
+              } else {
+                draft.push(provision);
+              }
+
+              onChange(draft);
+            }}
+          />
+        );
+      })}
+    </Flex>
+  );
+}