feat: optimize info lines

packages/i18n/strings/en.json

@@ -918,8 +918,8 @@
           "flexibility": {
             "yaw": "Yaw",
             "pitch": "Pitch",
-            "depression": "Depression",
-            "elevation": "Elevation"
+            "min": "Min",
+            "max": "Max"
           }
         },
 

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

@@ -1,4 +1,3 @@
-import { normalizeAngleRad } from '@blitzkit/core';
 import { useThree, type ThreeEvent } from '@react-three/fiber';
 import { memo, useRef } from 'react';
 import { Group, Plane, Vector2, Vector3 } from 'three';
@@ -153,15 +152,11 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
 
           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;
@@ -190,9 +185,10 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             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),
+            const [pitch, yaw] = applyPitchYawLimits(
+              modelTransformEvent.last!.pitch,
+              modelTransformEvent.last!.yaw +
+                delta.x * (Math.PI / boundingRect.width),
               gunModelDefinition.pitch,
               turretModelDefinition.yaw,
               hasImprovedVerticalStabilizer,
@@ -201,10 +197,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             modelTransformEvent.dispatch({ pitch, yaw });
           }
           function handlePointerUp() {
-            mutateDuel((draft) => {
-              draft.protagonist.pitch = normalizeAngleRad(pitch);
-              draft.protagonist.yaw = normalizeAngleRad(yaw);
-            });
             mutateTankopediaEphemeral((draft) => {
               draft.controlsEnabled = true;
             });
@@ -253,8 +245,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
 
             const position = new Vector2();
             const delta = new Vector2();
-            let pitch = 0;
-            let yaw = 0;
 
             function onPointerDown(event: ThreeEvent<PointerEvent>) {
               event.stopPropagation();
@@ -268,8 +258,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               });
 
               position.set(event.clientX, event.clientY);
-              pitch = protagonist.pitch;
-              yaw = protagonist.yaw;
 
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
@@ -290,9 +278,11 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               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),
+              const [pitch, yaw] = applyPitchYawLimits(
+                modelTransformEvent.last!.pitch -
+                  delta.y * (Math.PI / boundingRect.height),
+                modelTransformEvent.last!.yaw +
+                  delta.x * (Math.PI / boundingRect.width),
                 gunModelDefinition.pitch,
                 turretModelDefinition.yaw,
                 hasImprovedVerticalStabilizer,
@@ -304,10 +294,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               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);
             }
@@ -341,8 +327,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
 
             const position = new Vector2();
             const delta = new Vector2();
-            let pitch = 0;
-            let yaw = 0;
 
             function onPointerDown(event: ThreeEvent<PointerEvent>) {
               event.stopPropagation();
@@ -356,9 +340,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               });
 
               position.set(event.clientX, event.clientY);
-              pitch = protagonist.pitch;
-              yaw = protagonist.yaw;
-
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }
@@ -378,9 +359,11 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               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),
+              const [pitch, yaw] = applyPitchYawLimits(
+                modelTransformEvent.last!.pitch -
+                  delta.y * (Math.PI / boundingRect.height),
+                modelTransformEvent.last!.yaw +
+                  delta.x * (Math.PI / boundingRect.width),
                 gunModelDefinition.pitch,
                 turretModelDefinition.yaw,
                 hasImprovedVerticalStabilizer,
@@ -392,10 +375,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               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);
             }

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

@@ -1,6 +1,7 @@
 import { I_HAT, J_HAT } from '@blitzkit/core';
 import { type MeshProps, useThree } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
+import type { QuicklimeEvent } from 'quicklime';
 import { useEffect, useMemo } from 'react';
 import {
   Box3,
@@ -186,16 +187,18 @@ export function StaticArmorSceneComponent({
       const distanceToBarrel = clip.distanceToPoint(barrelOrigin);
       const point = new Vector3();
 
-      function handleModelTransform(data: ModelTransformEventData) {
+      function handleModelTransform(
+        event: QuicklimeEvent<ModelTransformEventData>,
+      ) {
         clip.normal
           .set(0, 0, -1)
-          .applyAxisAngle(I_HAT, data.pitch)
-          .applyAxisAngle(J_HAT, data.yaw ?? 0);
+          .applyAxisAngle(I_HAT, event.data.pitch)
+          .applyAxisAngle(J_HAT, event.data.yaw);
         clip.constant = 0;
 
         point
           .copy(gunOrigin)
-          .applyAxisAngle(J_HAT, data.yaw ?? 0)
+          .applyAxisAngle(J_HAT, event.data.yaw)
           .add(clip.normal.multiplyScalar(-distanceToBarrel))
           .add(neckOrigin);
         clip.normal.normalize();

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Firepower.tsx

@@ -26,7 +26,6 @@ import { AssaultRangesVisualizer } from './AssaultRangesVisualizer';
 import { GunFlexibilityVisualizer } from './GunFlexibilityVisualizer';
 import { Info } from './Info';
 import { InfoWithDelta } from './InfoWithDelta';
-import { ReloadVisualizer } from './ReloadVisualizer';
 import { RicochetVisualizer } from './RicochetVisualizer';
 import { StatsTableWrapper } from './StatsTableWrapper';
 import type { StatsAcceptorProps } from './TraverseVisualizer';
@@ -191,7 +190,7 @@ export function Firepower({
           value="intraClip"
         />
       )}
-      <ReloadVisualizer stats={stats} />
+      {/* <ReloadVisualizer stats={stats} /> */}
 
       {typeof shell.penetration !== 'number' && (
         <>

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/CanvasContent.tsx

@@ -1,23 +1,34 @@
 import type { QuicklimeEvent } from 'quicklime';
 import { useEffect, useRef } from 'react';
 import type { Group } from 'three';
+import { awaitableModelDefinitions } from '../../../../../../../../core/awaitables/modelDefinitions';
 import {
   modelTransformEvent,
   type ModelTransformEventData,
 } from '../../../../../../../../core/blitzkit/modelTransform';
+import { Duel } from '../../../../../../../../stores/duel';
 import { ModelChunk } from './ModelChunk';
 
+const modelDefinitions = await awaitableModelDefinitions;
+
 export function CanvasContent() {
-  const hull = useRef<Group>(null);
-  const gun = useRef<Group>(null);
+  const hullWrapper = useRef<Group>(null);
+  const gunWrapper = useRef<Group>(null);
+
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const turret = Duel.use((state) => state.protagonist.turret);
+
+  const tankModel = modelDefinitions.models[tank.id];
+  const turretModel = tankModel.turrets[turret.id];
 
   useEffect(() => {
     function handleModelTransformEvent(
       event: QuicklimeEvent<ModelTransformEventData>,
     ) {
-      if (!gun.current) return;
+      if (!gunWrapper.current || !hullWrapper.current) return;
 
-      gun.current.rotation.x = event.data.pitch;
+      gunWrapper.current.rotation.x = event.data.pitch;
+      if (event.data.yaw) hullWrapper.current.rotation.y = event.data.yaw;
     }
 
     modelTransformEvent.on(handleModelTransformEvent);
@@ -26,15 +37,18 @@ export function CanvasContent() {
       modelTransformEvent.off(handleModelTransformEvent);
     };
   }, []);
-
   return (
     <>
-      <group ref={hull}>
-        <ModelChunk />
+      <group ref={hullWrapper} position={[0, 0, turretModel.gun_origin.z]}>
+        <group position={[0, 0, -turretModel.gun_origin.z]}>
+          <ModelChunk only="body" />
+        </group>
       </group>
 
-      <group ref={gun}>
-        <ModelChunk onlyGun />
+      <ModelChunk only="turret" />
+
+      <group ref={gunWrapper}>
+        <ModelChunk only="gun" />
       </group>
     </>
   );

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/FlexibilityCard.tsx

@@ -1,343 +0,0 @@
-import { literals } from '@blitzkit/i18n';
-import { Box } from '@radix-ui/themes';
-import { useRef, useState } from 'react';
-import { clamp, degToRad, radToDeg } from 'three/src/math/MathUtils.js';
-import { awaitableModelDefinitions } from '../../../../../../../../core/awaitables/modelDefinitions';
-import {
-  DEFAULT_PITCH_TRANSITION,
-  applyPitchYawLimits,
-} from '../../../../../../../../core/blitz/applyPitchYawLimits';
-import { hasEquipment } from '../../../../../../../../core/blitzkit/hasEquipment';
-import { modelTransformEvent } from '../../../../../../../../core/blitzkit/modelTransform';
-import { Var } from '../../../../../../../../core/radix/var';
-import { useLocale } from '../../../../../../../../hooks/useLocale';
-import { Duel } from '../../../../../../../../stores/duel';
-import { VisualizerCard } from '../../VisualizerCard';
-import { VisualizerCornerStat } from '../../VisualizerCornerStat';
-
-const ANGLE_COEFFICIENT = 1 / 10;
-
-const modelDefinition = await awaitableModelDefinitions;
-
-function mag(x: number) {
-  return (1 / Math.PI) * Math.atan(ANGLE_COEFFICIENT * x) + 1 / 2;
-}
-
-function magInverse(y: number): number {
-  return (1 / ANGLE_COEFFICIENT) * Math.tan(Math.PI * y - Math.PI / 2);
-}
-
-function c(thetaDeg: number, m = 1) {
-  const theta = thetaDeg * (Math.PI / 180);
-  return `${m * Math.cos(theta)} ${-m * Math.sin(theta)}`;
-}
-
-export function FlexibilityCard() {
-  const { strings } = useLocale();
-
-  const [yaw, setYaw] = useState(0);
-  const [pitch, setPitch] = useState(0);
-  const [minPitch, setMinPitch] = useState(0);
-  const [maxPitch, setMaxPitch] = useState(0);
-
-  const container = useRef<HTMLDivElement>(null);
-  const highlighter = useRef<HTMLDivElement>(null);
-  const pointer = useRef<HTMLDivElement>(null);
-
-  const duelStore = Duel.useStore();
-  const tank = Duel.use((state) => state.protagonist.tank);
-  const turret = Duel.use((state) => state.protagonist.turret);
-  const gun = Duel.use((state) => state.protagonist.gun);
-
-  const tankModel = modelDefinition.models[tank.id];
-  const turretModel = tankModel.turrets[turret.id];
-  const gunModel = turretModel.guns[gun.gun_type!.value.base.id];
-
-  const p = gunModel.pitch;
-  const y = turretModel.yaw;
-  const f = p.front;
-  const b = p.back;
-  const t = gunModel.pitch.transition ?? DEFAULT_PITCH_TRANSITION;
-
-  let d = '';
-
-  // right
-  const mo = mag(p.max);
-  if (y) {
-    d += `M 0 0`;
-    d += `L ${c(90 - y.max, mo)}`;
-  } else if (b) {
-    d += `M ${c(-90 + b.range / 2 + t, mo)}`;
-  } else {
-    d += `M ${c(-90, mo)}`;
-  }
-  if (f) {
-    d += `A ${mo} ${mo} 0 0 0 ${c(90 - f.range / 2 - t, mo)}`;
-  } else {
-    d += `A ${mo} ${mo} 0 0 0 ${c(90, mo)}`;
-  }
-
-  // front
-  if (f) {
-    const m = mag(f.max);
-    d += `L ${c(90 - f.range / 2, m)}`;
-    d += `A ${m} ${m} 0 0 0 ${c(90 + f.range / 2, m)}`;
-  }
-
-  // left
-  if (f) {
-    d += `L ${c(90 + f.range / 2 + t, mo)}`;
-  } else {
-    d += `L ${c(90, mo)}`;
-  }
-  if (y) {
-    d += `A ${mo} ${mo} 0 0 0 ${c(90 - y.min, mo)}`;
-  } else if (b) {
-    d += `A ${mo} ${mo} 0 0 0 ${c(-90 - b.range / 2 - t, mo)}`;
-  } else {
-    d += `A ${mo} ${mo} 0 0 0 ${c(-90, mo)}`;
-  }
-
-  // back
-  if (!y && b) {
-    const m = mag(b.max);
-    d += `L ${c(-90 - b.range / 2, m)}`;
-    d += `A ${m} ${m} 0 0 0 ${c(-90 + b.range / 2, m)}`;
-  }
-
-  d += `Z`;
-
-  // right
-  const mi = mag(p.min);
-  if (y) {
-    d += `M 0 0`;
-    d += `L ${c(90 - y.max, mi)}`;
-  } else if (b) {
-    d += `M ${c(-90 + b.range / 2 + t, mi)}`;
-  } else {
-    d += `M ${c(-90, mi)}`;
-  }
-  if (f) {
-    d += `A ${mi} ${mi} 0 0 0 ${c(90 - f.range / 2 - t, mi)}`;
-  } else {
-    d += `A ${mi} ${mi} 0 0 0 ${c(90, mi)}`;
-  }
-
-  // front
-  if (f) {
-    const m = mag(f.min);
-    d += `L ${c(90 - f.range / 2, m)}`;
-    d += `A ${m} ${m} 0 0 0 ${c(90 + f.range / 2, m)}`;
-  }
-
-  // left
-  if (f) {
-    d += `L ${c(90 + f.range / 2 + t, mi)}`;
-  } else {
-    d += `L ${c(90, mi)}`;
-  }
-  if (y) {
-    d += `A ${mi} ${mi} 0 0 0 ${c(90 - y.min, mi)}`;
-  } else if (b) {
-    d += `A ${mi} ${mi} 0 0 0 ${c(-90 - b.range / 2 - t, mi)}`;
-  } else {
-    d += `A ${mi} ${mi} 0 0 0 ${c(-90, mi)}`;
-  }
-
-  // back
-  if (!y && b) {
-    const m = mag(b.min);
-    d += `L ${c(-90 - b.range / 2, m)}`;
-    d += `A ${m} ${m} 0 0 0 ${c(-90 + b.range / 2, m)}`;
-  }
-
-  d += `Z`;
-
-  const r = mag(radToDeg(-pitch));
-  const dotX = r * Math.sin(yaw);
-  const dotY = r * Math.cos(yaw);
-
-  return (
-    <VisualizerCard
-      ref={container}
-      onPointerMove={(event) => {
-        if (!container.current || !highlighter.current || !pointer.current)
-          return;
-
-        const rect = container.current.getBoundingClientRect();
-        const u = event.clientX - rect.left - rect.width / 2;
-        const v = event.clientY - rect.top - rect.height / 2;
-        let yaw = Math.atan2(u, -v);
-
-        const {
-          equipmentMatrix,
-          tank: { equipment_preset },
-        } = duelStore.getState().protagonist;
-        const hasImprovedVerticalStabilizer = hasEquipment(
-          122,
-          equipment_preset,
-          equipmentMatrix,
-        );
-        const hasDownImprovedVerticalStabilizer = hasEquipment(
-          124,
-          equipment_preset,
-          equipmentMatrix,
-        );
-
-        const min = applyPitchYawLimits(
-          -Math.PI,
-          yaw,
-          p,
-          y,
-          hasImprovedVerticalStabilizer,
-          hasDownImprovedVerticalStabilizer,
-        );
-        const max = applyPitchYawLimits(
-          Math.PI,
-          yaw,
-          p,
-          y,
-          hasImprovedVerticalStabilizer,
-          hasDownImprovedVerticalStabilizer,
-        );
-
-        yaw = min[1];
-        let t = 2 * Math.sqrt((u / rect.width) ** 2 + (v / rect.height) ** 2);
-        t = clamp(t, 0, 1);
-        let pitch = degToRad(magInverse(-t));
-        pitch = clamp(pitch, min[0], max[0]);
-
-        setPitch(pitch);
-        setYaw(yaw);
-        setMinPitch(min[0]);
-        setMaxPitch(max[0]);
-
-        modelTransformEvent.dispatch({ pitch, yaw });
-      }}
-      mb="0"
-    >
-      <Box
-        ref={highlighter}
-        position="absolute"
-        top="0"
-        left="0"
-        width="100%"
-        height="100%"
-        style={{
-          borderRadius: Var('radius-2'),
-          overflow: 'hidden',
-        }}
-      >
-        <Box
-          width="100%"
-          height="100%"
-          style={{
-            opacity: 2 ** -3,
-            backgroundImage: `url(/assets/images/tankopedia/visualizers/ricochet/armor-hash.png)`,
-          }}
-        />
-      </Box>
-
-      <svg
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: 'calc(100%)',
-          height: 'calc(100%)',
-        }}
-        viewBox="-1 -1 2 2"
-      >
-        <path
-          fillRule="evenodd"
-          fill="var(--gray-5)"
-          stroke="var(--gray-8)"
-          strokeWidth="1px"
-          vectorEffect="non-scaling-stroke"
-          d={d}
-        />
-
-        <path
-          stroke="var(--gray-11)"
-          fill="transparent"
-          strokeWidth="1px"
-          strokeDasharray="0.5rem 0.5rem"
-          vectorEffect="non-scaling-stroke"
-          d={`
-            M 0.5 0
-            A 0.5 0.5 0 1 1 -0.5 0
-            A 0.5 0.5 0 1 1 0.5 0
-            Z
-          `}
-        />
-      </svg>
-
-      <Box
-        ref={pointer}
-        position="absolute"
-        top="50%"
-        left="50%"
-        width="0"
-        height="0"
-        style={{
-          transform: `translate(-50%, -50%) rotate(${yaw + Math.PI}rad)`,
-        }}
-      >
-        <Box
-          width="1pt"
-          height="14rem"
-          style={{
-            borderRadius: Var('radius-1'),
-            background: `linear-gradient(${Var('gray-a11')}, ${Var('gray-a6')})`,
-            transform: 'translateX(-50%)',
-          }}
-        />
-      </Box>
-
-      <Box
-        position="absolute"
-        left={`${50 * (dotX + 1)}%`}
-        bottom={`${50 * (dotY + 1)}%`}
-        width="0.25rem"
-        height="0.25rem"
-        style={{
-          borderRadius: '50%',
-          backgroundColor: Var('gray-12'),
-          transform: 'translate(-50%, 50%)',
-        }}
-      />
-
-      <VisualizerCornerStat
-        label={
-          strings.website.tools.tankopedia.visualizers.flexibility.elevation
-        }
-        value={literals(strings.common.units.deg, [
-          radToDeg(maxPitch).toFixed(0),
-        ])}
-        side="top-left"
-      />
-
-      <VisualizerCornerStat
-        label={
-          strings.website.tools.tankopedia.visualizers.flexibility.depression
-        }
-        value={literals(strings.common.units.deg, [
-          radToDeg(-minPitch).toFixed(0),
-        ])}
-        side="top-right"
-      />
-
-      <VisualizerCornerStat
-        label={strings.website.tools.tankopedia.visualizers.flexibility.pitch}
-        value={literals(strings.common.units.deg, [radToDeg(pitch).toFixed(0)])}
-        side="bottom-left"
-      />
-
-      <VisualizerCornerStat
-        label={strings.website.tools.tankopedia.visualizers.flexibility.yaw}
-        value={literals(strings.common.units.deg, [radToDeg(yaw).toFixed(0)])}
-        side="bottom-right"
-      />
-    </VisualizerCard>
-  );
-}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/ModelChunk.tsx

@@ -7,20 +7,48 @@ import { Duel } from '../../../../../../../../stores/duel';
 
 const modelDefinitions = await awaitableModelDefinitions;
 
-const surfaceMaterial = new MeshBasicMaterial({
-  color: mauveDark.mauve6,
-  toneMapped: false,
-});
-const outlineMaterial = new LineBasicMaterial({
-  color: mauveDark.mauve8,
-  toneMapped: false,
-});
+const surfaceMaterial: Record<Props['only'], MeshBasicMaterial> = {
+  gun: new MeshBasicMaterial({
+    color: mauveDark.mauve8,
+    toneMapped: false,
+  }),
+  turret: new MeshBasicMaterial({
+    color: mauveDark.mauve6,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.5,
+  }),
+  body: new MeshBasicMaterial({
+    color: mauveDark.mauve6,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.5,
+  }),
+};
+const outlineMaterial: Record<Props['only'], LineBasicMaterial> = {
+  gun: new LineBasicMaterial({
+    color: mauveDark.mauve11,
+    toneMapped: false,
+  }),
+  turret: new LineBasicMaterial({
+    color: mauveDark.mauve8,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.5,
+  }),
+  body: new LineBasicMaterial({
+    color: mauveDark.mauve8,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.5,
+  }),
+};
 
 interface Props {
-  onlyGun?: boolean;
+  only: 'gun' | 'turret' | 'body';
 }
 
-export function ModelChunk({ onlyGun = false }: Props) {
+export function ModelChunk({ only }: Props) {
   const tank = Duel.use((state) => state.protagonist.tank);
   const turret = Duel.use((state) => state.protagonist.turret);
   const gun = Duel.use((state) => state.protagonist.gun);
@@ -43,29 +71,38 @@ export function ModelChunk({ onlyGun = false }: Props) {
           `gun_${gunModel.model_id.toString().padStart(2, '0')}_mask`;
         const isCurrentGun =
           node.name === `gun_${gunModel.model_id.toString().padStart(2, '0')}`;
-        const isVisible = isCurrentGun || isCurrentMantlet;
-        const isHull = node.name === 'hull';
-        const isWheel = node.name.startsWith('chassis_wheel_');
-        const isTrack = node.name.startsWith('chassis_track_');
+        const isGun = isCurrentGun || isCurrentMantlet;
+
         const isCurrentTurret =
           node.name ===
           `turret_${turretModel.model_id.toString().padStart(2, '0')}`;
-        const isAnythingElse = isHull || isWheel || isTrack || isCurrentTurret;
+        const isTurret = isCurrentTurret;
 
-        if ((onlyGun && isVisible) || (!onlyGun && isAnythingElse)) {
-          return jsxTree(node, {
-            mesh(mesh, props, key) {
-              return (
-                <>
-                  <mesh key={key} {...props} material={surfaceMaterial} />
-                  <lineSegments material={outlineMaterial}>
-                    <edgesGeometry args={[mesh.geometry, 29]} />
-                  </lineSegments>
-                </>
-              );
-            },
-          });
+        const isHull = node.name === 'hull';
+        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isTrack = node.name.startsWith('chassis_track_');
+        const isBody = isHull || isWheel || isTrack;
+
+        if (
+          (only === 'gun' && !isGun) ||
+          (only === 'turret' && !isTurret) ||
+          (only === 'body' && !isBody)
+        ) {
+          return null;
         }
+
+        return jsxTree(node, {
+          mesh(mesh, props, key) {
+            return (
+              <>
+                <mesh key={key} {...props} material={surfaceMaterial[only]} />
+                <lineSegments material={outlineMaterial[only]}>
+                  <edgesGeometry args={[mesh.geometry, 29]} />
+                </lineSegments>
+              </>
+            );
+          },
+        });
       })}
     </group>
   );

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/index.tsx

@@ -1,18 +1,179 @@
+import { literals } from '@blitzkit/i18n';
 import { Box, Card, Flex } from '@radix-ui/themes';
+import { clamp } from 'lodash-es';
+import { useRef, useState } from 'react';
+import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
+import { awaitableModelDefinitions } from '../../../../../../../core/awaitables/modelDefinitions';
+import {
+  DEFAULT_PITCH_TRANSITION,
+  applyPitchYawLimits,
+} from '../../../../../../../core/blitz/applyPitchYawLimits';
+import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment';
+import { modelTransformEvent } from '../../../../../../../core/blitzkit/modelTransform';
 import { Var } from '../../../../../../../core/radix/var';
+import { useLocale } from '../../../../../../../hooks/useLocale';
+import { Duel } from '../../../../../../../stores/duel';
 import type { MaybeSkeletonComponentProps } from '../../../../../../../types/maybeSkeletonComponentProps';
+import { VisualizerCard } from '../VisualizerCard';
+import { VisualizerCornerStat } from '../VisualizerCornerStat';
 import { FlexibilityCanvas } from './components/FlexibilityCanvas';
-import { FlexibilityCard } from './components/FlexibilityCard';
+
+const ANGLE_COEFFICIENT = 1 / 10;
+
+const modelDefinition = await awaitableModelDefinitions;
+
+function mag(x: number) {
+  return (1 / Math.PI) * Math.atan(ANGLE_COEFFICIENT * x) + 1 / 2;
+}
+
+function magInverse(y: number): number {
+  return (1 / ANGLE_COEFFICIENT) * Math.tan(Math.PI * y - Math.PI / 2);
+}
+
+function c(thetaDeg: number, m = 1) {
+  const theta = thetaDeg * (Math.PI / 180);
+  return `${m * Math.cos(theta)} ${-m * Math.sin(theta)}`;
+}
 
 export function GunFlexibilityVisualizer({
   skeleton,
 }: MaybeSkeletonComponentProps) {
+  const { strings } = useLocale();
+
+  const duelStore = Duel.useStore();
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+
+  const tankModel = modelDefinition.models[tank.id];
+  const turretModel = tankModel.turrets[turret.id];
+  const gunModel = turretModel.guns[gun.gun_type!.value.base.id];
+
+  const [yaw, setYaw] = useState(0);
+  const [pitch, setPitch] = useState(0);
+  const [minPitch, setMinPitch] = useState(
+    -degToRad(gunModel.pitch.front?.max ?? gunModel.pitch.max),
+  );
+  const [maxPitch, setMaxPitch] = useState(
+    -degToRad(gunModel.pitch.front?.min ?? gunModel.pitch.min),
+  );
+
+  const container = useRef<HTMLDivElement>(null);
+  const highlighter = useRef<HTMLDivElement>(null);
+  const pointer = useRef<HTMLDivElement>(null);
+
+  const p = gunModel.pitch;
+  const y = turretModel.yaw;
+  const f = p.front;
+  const b = p.back;
+  const t = gunModel.pitch.transition ?? DEFAULT_PITCH_TRANSITION;
+
+  let d = '';
+
+  // right
+  const mo = mag(p.max);
+  if (y) {
+    d += `M 0 0`;
+    d += `L ${c(90 - y.max, mo)}`;
+  } else if (b) {
+    d += `M ${c(-90 + b.range / 2 + t, mo)}`;
+  } else {
+    d += `M ${c(-90, mo)}`;
+  }
+  if (f) {
+    d += `A ${mo} ${mo} 0 0 0 ${c(90 - f.range / 2 - t, mo)}`;
+  } else {
+    d += `A ${mo} ${mo} 0 0 0 ${c(90, mo)}`;
+  }
+
+  // front
+  if (f) {
+    const m = mag(f.max);
+    d += `L ${c(90 - f.range / 2, m)}`;
+    d += `A ${m} ${m} 0 0 0 ${c(90 + f.range / 2, m)}`;
+  }
+
+  // left
+  if (f) {
+    d += `L ${c(90 + f.range / 2 + t, mo)}`;
+  } else {
+    d += `L ${c(90, mo)}`;
+  }
+  if (y) {
+    d += `A ${mo} ${mo} 0 0 0 ${c(90 - y.min, mo)}`;
+  } else if (b) {
+    d += `A ${mo} ${mo} 0 0 0 ${c(-90 - b.range / 2 - t, mo)}`;
+  } else {
+    d += `A ${mo} ${mo} 0 0 0 ${c(-90, mo)}`;
+  }
+
+  // back
+  if (!y && b) {
+    const m = mag(b.max);
+    d += `L ${c(-90 - b.range / 2, m)}`;
+    d += `A ${m} ${m} 0 0 0 ${c(-90 + b.range / 2, m)}`;
+  }
+
+  d += `Z`;
+
+  // right
+  const mi = mag(p.min);
+  if (y) {
+    d += `M 0 0`;
+    d += `L ${c(90 - y.max, mi)}`;
+  } else if (b) {
+    d += `M ${c(-90 + b.range / 2 + t, mi)}`;
+  } else {
+    d += `M ${c(-90, mi)}`;
+  }
+  if (f) {
+    d += `A ${mi} ${mi} 0 0 0 ${c(90 - f.range / 2 - t, mi)}`;
+  } else {
+    d += `A ${mi} ${mi} 0 0 0 ${c(90, mi)}`;
+  }
+
+  // front
+  if (f) {
+    const m = mag(f.min);
+    d += `L ${c(90 - f.range / 2, m)}`;
+    d += `A ${m} ${m} 0 0 0 ${c(90 + f.range / 2, m)}`;
+  }
+
+  // left
+  if (f) {
+    d += `L ${c(90 + f.range / 2 + t, mi)}`;
+  } else {
+    d += `L ${c(90, mi)}`;
+  }
+  if (y) {
+    d += `A ${mi} ${mi} 0 0 0 ${c(90 - y.min, mi)}`;
+  } else if (b) {
+    d += `A ${mi} ${mi} 0 0 0 ${c(-90 - b.range / 2 - t, mi)}`;
+  } else {
+    d += `A ${mi} ${mi} 0 0 0 ${c(-90, mi)}`;
+  }
+
+  // back
+  if (!y && b) {
+    const m = mag(b.min);
+    d += `L ${c(-90 - b.range / 2, m)}`;
+    d += `A ${m} ${m} 0 0 0 ${c(-90 + b.range / 2, m)}`;
+  }
+
+  d += `Z`;
+
+  const r = mag(radToDeg(-pitch));
+  const dotX = r * Math.sin(yaw);
+  const dotY = r * Math.cos(yaw);
+
   return (
     <Flex direction="column-reverse" gap="0">
-      <Box mt="-4" px="2">
+      <Box mt="-3" px="2">
         <Card variant="classic" style={{ height: '10rem' }}>
           <Box
-            style={{ backgroundColor: Var('gray-1') }}
+            style={{
+              background: 'linear-gradient(var(--gray-1), var(--gray-3))',
+            }}
             position="absolute"
             width="100%"
             height="100%"
@@ -20,11 +181,218 @@ export function GunFlexibilityVisualizer({
             left="0"
           >
             {!skeleton && <FlexibilityCanvas />}
+
+            <Box
+              position="absolute"
+              width="100%"
+              height="100%"
+              top="0"
+              left="33%"
+              style={{
+                background: `conic-gradient(
+                  at 0 50%,
+                  
+                  transparent,
+                  transparent ${Math.PI / 2 - maxPitch}rad,
+
+                  ${Var('cyan-a4')} ${Math.PI / 2 - maxPitch}rad,
+                  ${Var('jade-a4')} ${Math.PI / 2 - minPitch}rad,
+
+                  transparent ${Math.PI / 2 - minPitch}rad,
+                  transparent 180deg
+                )`,
+                filter: 'blur(0.25rem)',
+              }}
+            />
           </Box>
         </Card>
       </Box>
 
-      <FlexibilityCard />
+      <VisualizerCard
+        ref={container}
+        style={{ touchAction: 'none' }}
+        onPointerMove={(event) => {
+          event.preventDefault();
+
+          if (!container.current || !highlighter.current || !pointer.current)
+            return;
+
+          const rect = container.current.getBoundingClientRect();
+          const u = event.clientX - rect.left - rect.width / 2;
+          const v = event.clientY - rect.top - rect.height / 2;
+          let yaw = Math.atan2(u, -v);
+
+          const {
+            equipmentMatrix,
+            tank: { equipment_preset },
+          } = duelStore.getState().protagonist;
+          const hasImprovedVerticalStabilizer = hasEquipment(
+            122,
+            equipment_preset,
+            equipmentMatrix,
+          );
+          const hasDownImprovedVerticalStabilizer = hasEquipment(
+            124,
+            equipment_preset,
+            equipmentMatrix,
+          );
+
+          const min = applyPitchYawLimits(
+            -Math.PI,
+            yaw,
+            p,
+            y,
+            hasImprovedVerticalStabilizer,
+            hasDownImprovedVerticalStabilizer,
+          );
+          const max = applyPitchYawLimits(
+            Math.PI,
+            yaw,
+            p,
+            y,
+            hasImprovedVerticalStabilizer,
+            hasDownImprovedVerticalStabilizer,
+          );
+
+          yaw = min[1];
+          let t = 2 * Math.sqrt((u / rect.width) ** 2 + (v / rect.height) ** 2);
+          t = clamp(t, 0, 1);
+          let pitch = degToRad(magInverse(-t));
+          pitch = clamp(pitch, min[0], max[0]);
+
+          setPitch(pitch);
+          setYaw(yaw);
+          setMinPitch(min[0]);
+          setMaxPitch(max[0]);
+
+          modelTransformEvent.dispatch({ pitch, yaw });
+        }}
+        mb="0"
+      >
+        <Box
+          ref={highlighter}
+          position="absolute"
+          top="0"
+          left="0"
+          width="100%"
+          height="100%"
+          style={{
+            borderRadius: Var('radius-2'),
+            overflow: 'hidden',
+          }}
+        >
+          <Box
+            width="100%"
+            height="100%"
+            style={{
+              opacity: 2 ** -3,
+              backgroundImage: `url(/assets/images/tankopedia/visualizers/ricochet/armor-hash.png)`,
+              boxShadow: 'inset 0 0 4rem 1rem black',
+            }}
+          />
+        </Box>
+
+        <svg
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: 'calc(100%)',
+            height: 'calc(100%)',
+          }}
+          viewBox="-1 -1 2 2"
+        >
+          <path
+            fillRule="evenodd"
+            fill="var(--gray-5)"
+            stroke="var(--gray-8)"
+            strokeWidth="1px"
+            vectorEffect="non-scaling-stroke"
+            d={d}
+          />
+
+          <path
+            stroke="var(--gray-10)"
+            fill="transparent"
+            strokeWidth="1px"
+            strokeDasharray="0.5rem 0.5rem"
+            vectorEffect="non-scaling-stroke"
+            d={`
+            M 0.5 0
+            A 0.5 0.5 0 1 1 -0.5 0
+            A 0.5 0.5 0 1 1 0.5 0
+            Z
+          `}
+          />
+        </svg>
+
+        <Box
+          ref={pointer}
+          position="absolute"
+          top="50%"
+          left="50%"
+          width="0"
+          height="0"
+          style={{
+            transform: `translate(-50%, -50%) rotate(${yaw + Math.PI}rad)`,
+          }}
+        >
+          <Box
+            width="1pt"
+            height="14rem"
+            style={{
+              borderRadius: Var('radius-1'),
+              background: `linear-gradient(${Var('gray-a11')}, ${Var('gray-a6')})`,
+              boxShadow:
+                'var(--white-a12) -0.25rem 0 1rem, var(--black-a12) 0.25rem 0 1rem',
+              transform: 'translateX(-50%)',
+            }}
+          />
+        </Box>
+
+        <Box
+          position="absolute"
+          left={`${50 * (dotX + 1)}%`}
+          bottom={`${50 * (dotY + 1)}%`}
+          width="0.25rem"
+          height="0.25rem"
+          style={{
+            borderRadius: '50%',
+            backgroundColor: Var('gray-12'),
+            transform: 'translate(-50%, 50%)',
+          }}
+        />
+
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.flexibility.max}
+          value={literals(strings.common.units.deg, [
+            radToDeg(maxPitch).toFixed(0),
+          ])}
+          side="bottom-left"
+        />
+
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.flexibility.min}
+          value={literals(strings.common.units.deg, [
+            radToDeg(minPitch).toFixed(0),
+          ])}
+          side="bottom-right"
+        />
+
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.flexibility.pitch}
+          value={literals(strings.common.units.deg, [
+            radToDeg(pitch).toFixed(0),
+          ])}
+          side="top-left"
+        />
+
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.flexibility.yaw}
+          value={literals(strings.common.units.deg, [radToDeg(yaw).toFixed(0)])}
+          side="top-right"
+        />
+      </VisualizerCard>
     </Flex>
   );
 }

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx

@@ -1,7 +1,7 @@
 import { createDefaultSkills } from '@blitzkit/core';
 import { Flex, Progress, Text } from '@radix-ui/themes';
 import { clamp } from 'lodash-es';
-import { useMemo, type ComponentProps, type ReactNode } from 'react';
+import { memo, useMemo, type ComponentProps, type ReactNode } from 'react';
 import { awaitableEquipmentDefinitions } from '../../../../../../core/awaitables/equipmentDefinitions';
 import { awaitableModelDefinitions } from '../../../../../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../../../../../core/awaitables/provisionDefinitions';
@@ -48,148 +48,151 @@ const [
   awaitableSkillDefinitions,
 ]);
 
-export function InfoWithDelta({
-  stats,
-  indent,
-  noRanking,
-  deltaType,
-  ...props
-}: InfoWithDeltaProps) {
-  const { strings } = useLocale();
-  const relativeAgainst = TankopediaEphemeral.use(
-    (state) => state.relativeAgainst,
-  );
-  const uhWhatDoICallThisVariable =
-    typeof props.value === 'function'
-      ? props.value(stats)!
-      : (stats[props.value] as number);
-  const delta = useDelta(uhWhatDoICallThisVariable);
-  const protagonistTank = Duel.use((state) => state.protagonist.tank);
-  const shellIndex = Duel.use((state) =>
-    state.protagonist.gun.gun_type!.value.base.shells.indexOf(
-      state.protagonist.shell,
-    ),
-  );
-  const equipmentMatrix = Duel.use(
-    (state) => state.protagonist.equipmentMatrix,
-  );
-  const others = useMemo(() => {
-    const defaultSkills = createDefaultSkills(skillDefinitions);
-
-    return Object.values(tankDefinitions.tanks)
-      .filter(
-        (tank) =>
-          (relativeAgainst === TankopediaRelativeAgainst.Class &&
-            tank.tier === protagonistTank.tier &&
-            tank.class === protagonistTank.class) ||
-          (relativeAgainst === TankopediaRelativeAgainst.Tier &&
-            tank.tier === protagonistTank.tier) ||
-          relativeAgainst === TankopediaRelativeAgainst.All,
-      )
-      .map((tank) => {
-        const thisTankModel = modelDefinitions.models[tank.id];
-        const member = tankToDuelMember(
-          tank,
-          thisTankModel,
-          provisionDefinitions,
-        );
-
-        if (member.gun.gun_type!.value.base.shells[shellIndex] === undefined) {
-          return undefined;
-        }
-
-        return tankCharacteristics(
-          {
-            applyDynamicArmor: false,
-            applyReactiveArmor: false,
-            applySpallLiner: false,
-            camouflage: member.camouflage,
-            consumables: member.consumables,
-            crewSkills: defaultSkills,
-            provisions: member.provisions,
-            engine: member.engine,
-            gun: member.gun,
-            equipmentMatrix: equipmentMatrix,
-            shell: member.gun.gun_type!.value.base.shells[shellIndex],
-            stockEngine: tank.engines[0],
-            stockGun: tank.turrets[0].guns[0],
-            stockTrack: tank.tracks[0],
-            stockTurret: tank.turrets[0],
-            tank,
-            track: member.track,
-            turret: member.turret,
-            assaultDistance: member.assaultDistance,
-          },
-          {
-            equipmentDefinitions,
-            provisionDefinitions,
-            tankModelDefinition: modelDefinitions.models[tank.id],
-          },
-        );
-      })
-      .filter((tank) => {
-        if (tank === undefined) return false;
-
-        const othersValue =
-          typeof props.value === 'function'
-            ? props.value(tank)!
-            : (tank[props.value] as number);
-
-        return othersValue !== undefined;
-      }) as TankCharacteristics[];
-  }, [relativeAgainst, shellIndex, equipmentMatrix]);
-  const betterTanks = others.filter((tank) => {
-    const othersValue =
+export const InfoWithDelta = memo<InfoWithDeltaProps>(
+  ({ stats, indent, noRanking, deltaType, ...props }) => {
+    const { strings } = useLocale();
+    const relativeAgainst = TankopediaEphemeral.use(
+      (state) => state.relativeAgainst,
+    );
+    const uhWhatDoICallThisVariable =
       typeof props.value === 'function'
-        ? props.value(tank)!
-        : (tank[props.value] as number);
+        ? props.value(stats)!
+        : (stats[props.value] as number);
+    const delta = useDelta(uhWhatDoICallThisVariable);
+    const protagonistTank = Duel.use((state) => state.protagonist.tank);
+    const shellIndex = Duel.use((state) =>
+      state.protagonist.gun.gun_type!.value.base.shells.indexOf(
+        state.protagonist.shell,
+      ),
+    );
+    const equipmentMatrix = Duel.use(
+      (state) => state.protagonist.equipmentMatrix,
+    );
+    const others = useMemo(() => {
+      const defaultSkills = createDefaultSkills(skillDefinitions);
 
-    if (othersValue === undefined) return false;
-    return deltaType === 'lowerIsBetter'
-      ? othersValue < uhWhatDoICallThisVariable
-      : othersValue > uhWhatDoICallThisVariable;
-  });
-  const goodness = (others.length - betterTanks.length) / others.length;
-  let color: ComponentProps<typeof Progress>['color'];
+      return Object.values(tankDefinitions.tanks)
+        .filter(
+          (tank) =>
+            (relativeAgainst === TankopediaRelativeAgainst.Class &&
+              tank.tier === protagonistTank.tier &&
+              tank.class === protagonistTank.class) ||
+            (relativeAgainst === TankopediaRelativeAgainst.Tier &&
+              tank.tier === protagonistTank.tier) ||
+            relativeAgainst === TankopediaRelativeAgainst.All,
+        )
+        .map((tank) => {
+          const thisTankModel = modelDefinitions.models[tank.id];
+          const member = tankToDuelMember(
+            tank,
+            thisTankModel,
+            provisionDefinitions,
+          );
 
-  if (goodness <= 0.25) color = 'red';
-  else if (goodness <= 0.5) color = 'orange';
-  else if (goodness <= 0.75) color = 'yellow';
-  else color = 'green';
+          if (
+            member.gun.gun_type!.value.base.shells[shellIndex] === undefined
+          ) {
+            return undefined;
+          }
 
-  return (
-    <Flex direction="column">
-      <Info
-        deltaType={deltaType}
-        indent={indent}
-        name={
-          'name' in props
-            ? props.name
-            : strings.website.tools.tankopedia.characteristics.values[
-                props.value
-              ]
-        }
-        delta={delta}
-        {...props}
-      >
-        {uhWhatDoICallThisVariable}
-      </Info>
+          return tankCharacteristics(
+            {
+              applyDynamicArmor: false,
+              applyReactiveArmor: false,
+              applySpallLiner: false,
+              camouflage: member.camouflage,
+              consumables: member.consumables,
+              crewSkills: defaultSkills,
+              provisions: member.provisions,
+              engine: member.engine,
+              gun: member.gun,
+              equipmentMatrix: equipmentMatrix,
+              shell: member.gun.gun_type!.value.base.shells[shellIndex],
+              stockEngine: tank.engines[0],
+              stockGun: tank.turrets[0].guns[0],
+              stockTrack: tank.tracks[0],
+              stockTurret: tank.turrets[0],
+              tank,
+              track: member.track,
+              turret: member.turret,
+              assaultDistance: member.assaultDistance,
+            },
+            {
+              equipmentDefinitions,
+              provisionDefinitions,
+              tankModelDefinition: modelDefinitions.models[tank.id],
+            },
+          );
+        })
+        .filter((tank) => {
+          if (tank === undefined) return false;
 
-      {!noRanking && (
-        <Flex pl={indent ? '2' : '0'} align="center" gap="2">
-          <Progress
-            variant="soft"
-            size="1"
-            value={goodness * 100}
-            color={color}
-            style={{ height: '0.125rem', opacity: 0.5 }}
-          />
+          const othersValue =
+            typeof props.value === 'function'
+              ? props.value(tank)!
+              : (tank[props.value] as number);
 
-          <Text color="gray" size="1">
-            {clamp(betterTanks.length + 1, 1, others.length)} / {others.length}
-          </Text>
-        </Flex>
-      )}
-    </Flex>
-  );
-}
+          return othersValue !== undefined;
+        }) as TankCharacteristics[];
+    }, [relativeAgainst, shellIndex, equipmentMatrix]);
+    const betterTanks = others.filter((tank) => {
+      const othersValue =
+        typeof props.value === 'function'
+          ? props.value(tank)!
+          : (tank[props.value] as number);
+
+      if (othersValue === undefined) return false;
+      return deltaType === 'lowerIsBetter'
+        ? othersValue < uhWhatDoICallThisVariable
+        : othersValue > uhWhatDoICallThisVariable;
+    });
+    const goodness = (others.length - betterTanks.length) / others.length;
+    let color: ComponentProps<typeof Progress>['color'];
+
+    if (goodness <= 0.25) color = 'red';
+    else if (goodness <= 0.5) color = 'orange';
+    else if (goodness <= 0.75) color = 'yellow';
+    else color = 'green';
+
+    return (
+      <Flex direction="column">
+        <Info
+          deltaType={deltaType}
+          indent={indent}
+          name={
+            'name' in props
+              ? props.name
+              : strings.website.tools.tankopedia.characteristics.values[
+                  props.value
+                ]
+          }
+          delta={delta}
+          {...props}
+        >
+          {uhWhatDoICallThisVariable}
+        </Info>
+
+        {!noRanking && (
+          <Flex pl={indent ? '2' : '0'} align="center" gap="2">
+            <Progress
+              variant="soft"
+              size="1"
+              value={goodness * 100}
+              color={color}
+              style={{ height: '0.125rem', opacity: 0.5 }}
+            />
+
+            <Text color="gray" size="1">
+              {clamp(betterTanks.length + 1, 1, others.length)} /{' '}
+              {others.length}
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+    );
+  },
+
+  (a, b) =>
+    (typeof a.value === 'function' ? a.value(a.stats) : a.stats[a.value]) ===
+    (typeof b.value === 'function' ? b.value(b.stats) : b.stats[b.value]),
+);

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { awaitableEquipmentDefinitions } from '../../../../../core/awaitables/equipmentDefinitions';
 import { awaitableProvisionDefinitions } from '../../../../../core/awaitables/provisionDefinitions';
 import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
+import { modelTransformEvent } from '../../../../../core/blitzkit/modelTransform';
 import { tankCharacteristics } from '../../../../../core/blitzkit/tankCharacteristics';
 import { useEquipment } from '../../../../../hooks/useEquipment';
 import { useTankModelDefinition } from '../../../../../hooks/useTankModelDefinition';
@@ -75,16 +76,16 @@ export function Characteristics({ skeleton }: MaybeSkeletonComponentProps) {
   const hasDownImprovedVerticalStabilizer = useEquipment(124);
 
   useEffect(() => {
-    mutateDuel((draft) => {
-      [draft.protagonist.pitch, draft.protagonist.yaw] = applyPitchYawLimits(
-        draft.protagonist.pitch,
-        draft.protagonist.yaw,
-        gunModelDefinition.pitch,
-        turretModelDefinition.yaw,
-        hasImprovedVerticalStabilizer,
-        hasDownImprovedVerticalStabilizer,
-      );
-    });
+    const [pitch, yaw] = applyPitchYawLimits(
+      modelTransformEvent.last!.pitch,
+      modelTransformEvent.last!.yaw,
+      gunModelDefinition.pitch,
+      turretModelDefinition.yaw,
+      hasImprovedVerticalStabilizer,
+      hasDownImprovedVerticalStabilizer,
+    );
+
+    modelTransformEvent.dispatch({ pitch, yaw });
   }, [hasImprovedVerticalStabilizer, hasDownImprovedVerticalStabilizer]);
 
   return (

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

@@ -1,5 +1,6 @@
 import { HeightIcon, WidthIcon } from '@radix-ui/react-icons';
 import { Flex, TextField } from '@radix-ui/themes';
+import type { QuicklimeEvent } from 'quicklime';
 import { useEffect, useRef } from 'react';
 import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
 import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
@@ -28,31 +29,19 @@ export function QuickInputs() {
   const hasDownImprovedVerticalStabilizer = useEquipment(124);
 
   useEffect(() => {
-    if (!yawInput.current) return;
-
-    yawInput.current.value = radToDeg(protagonist.yaw).toFixed(1);
-  }, [protagonist.yaw]);
-
-  useEffect(() => {
-    if (!pitchInput.current) return;
-
-    pitchInput.current.value = (
-      -radToDeg(protagonist.pitch) + initialGunPitch
-    ).toFixed(1);
-  }, [protagonist.pitch]);
-
-  useEffect(() => {
-    function handleTransformEvent({ pitch, yaw }: ModelTransformEventData) {
+    function handleTransformEvent(
+      event: QuicklimeEvent<ModelTransformEventData>,
+    ) {
       if (!pitchInput.current || !yawInput.current) return;
 
       pitchInput.current.value = (
-        -radToDeg(pitch) +
+        -radToDeg(event.data.pitch) +
         (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
       ).toFixed(1);
 
-      if (yaw === undefined) return;
+      if (event.data.yaw === undefined) return;
 
-      yawInput.current.value = radToDeg(yaw).toFixed(1);
+      yawInput.current.value = radToDeg(event.data.yaw).toFixed(1);
     }
 
     modelTransformEvent.on(handleTransformEvent);
@@ -85,24 +74,27 @@ export function QuickInputs() {
         defaultValue="0.0"
         onBlur={() => {
           const value = Number(yawInput.current!.value);
+
           if (isNaN(value)) {
-            yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+            yawInput.current!.value = radToDeg(
+              modelTransformEvent.last!.yaw,
+            ).toFixed(1);
             return;
           }
+
           const [pitch, yaw] = applyPitchYawLimits(
-            protagonist.pitch,
+            modelTransformEvent.last!.pitch,
             degToRad(value),
             gunModelDefinition.pitch,
             turretModelDefinition.yaw,
             hasImprovedVerticalStabilizer,
             hasDownImprovedVerticalStabilizer,
           );
+
           modelTransformEvent.dispatch({ pitch, yaw });
-          mutateDuel((state) => {
-            state.protagonist.pitch = pitch;
-            state.protagonist.yaw = yaw;
-          });
-          yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+          yawInput.current!.value = radToDeg(
+            modelTransformEvent.last!.yaw,
+          ).toFixed(1);
         }}
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
@@ -128,25 +120,21 @@ export function QuickInputs() {
           const value = Number(pitchInput.current!.value);
           if (isNaN(value)) {
             pitchInput.current!.value = (
-              -radToDeg(protagonist.pitch) + initialGunPitch
+              -radToDeg(modelTransformEvent.last!.pitch) + initialGunPitch
             ).toFixed(1);
             return;
           }
           const [pitch, yaw] = applyPitchYawLimits(
             degToRad(-value + initialGunPitch),
-            protagonist.yaw,
+            modelTransformEvent.last!.yaw,
             gunModelDefinition.pitch,
             turretModelDefinition.yaw,
             hasImprovedVerticalStabilizer,
             hasDownImprovedVerticalStabilizer,
           );
           modelTransformEvent.dispatch({ pitch, yaw });
-          mutateDuel((state) => {
-            state.protagonist.pitch = pitch;
-            state.protagonist.yaw = yaw;
-          });
           pitchInput.current!.value = (
-            -radToDeg(protagonist.pitch) + initialGunPitch
+            -radToDeg(modelTransformEvent.last!.pitch) + initialGunPitch
           ).toFixed(1);
         }}
         onKeyDown={(event) => {

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

@@ -101,6 +101,8 @@ export function Controls({
       .copy(inspectModeInitialPosition)
       .applyAxisAngle(I_HAT, (Math.PI / 32) * Math.sin(t / 9))
       .applyAxisAngle(J_HAT, (-Math.PI / 16) * Math.sin(t / 7));
+
+    invalidate();
   });
 
   useEffect(() => {

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

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { degToRad } from 'three/src/math/MathUtils.js';
+import { awaitableModelDefinitions } from '../../../../../../core/awaitables/modelDefinitions';
+import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
+import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
+import { Duel } from '../../../../../../stores/duel';
+
+const modelDefinitions = await awaitableModelDefinitions;
+
+export function InitialAligner() {
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+
+  const tankModel = modelDefinitions.models[tank.id];
+  const turretModel = tankModel.turrets[turret.id];
+  const gunModel = turretModel.guns[gun.gun_type!.value.base.id];
+
+  useEffect(() => {
+    const [pitch, yaw] = applyPitchYawLimits(
+      degToRad(8),
+      degToRad(25),
+      gunModel.pitch,
+      turretModel.yaw,
+    );
+
+    modelTransformEvent.dispatch({ pitch, yaw });
+  }, []);
+
+  return null;
+}

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

@@ -39,9 +39,6 @@ export function SceneProps() {
   const material = useRef<MeshStandardMaterial>(null);
   const playground = useRef<Group>(null);
 
-  let lastPitch = Duel.use((state) => state.protagonist.pitch);
-  let lastYaw = Duel.use((state) => state.protagonist.yaw);
-  const display = TankopediaEphemeral.use((state) => state.display);
   const turret = Duel.use((state) => state.protagonist.turret);
   const track = Duel.use((state) => state.protagonist.track);
   const tank = Duel.use((state) => state.protagonist.tank);
@@ -152,8 +149,8 @@ export function SceneProps() {
 
     const desiredPitch = Math.asin(direction.y);
     const desiredYaw = Math.atan2(-direction.x, -direction.z);
-    const deltaPitch = desiredPitch - lastPitch;
-    const deltaYaw = desiredYaw - lastYaw;
+    const deltaPitch = desiredPitch - modelTransformEvent.last!.pitch;
+    const deltaYaw = desiredYaw - modelTransformEvent.last!.yaw;
     const deltaAngle = Math.sqrt(deltaPitch ** 2 + deltaYaw ** 2);
     const maxPossibleRotationInTime = gunRotationSpeed * deltaT;
     const clampedDeltaAngle = Math.min(maxPossibleRotationInTime, deltaAngle);
@@ -163,14 +160,14 @@ export function SceneProps() {
       deltaAngle === 0 ? 0 : deltaYaw * (clampedDeltaAngle / deltaAngle);
 
     const [pitch, yaw] = applyPitchYawLimits(
-      lastPitch + clampedDeltaPitch,
-      lastYaw + clampedDeltaYaw,
+      modelTransformEvent.last!.pitch + clampedDeltaPitch,
+      modelTransformEvent.last!.yaw + clampedDeltaYaw,
       gunModelDefinition.pitch,
       turretModelDefinition.yaw,
     );
 
-    const actualDeltaPitch = pitch - lastPitch;
-    const actualDeltaYaw = yaw - lastYaw;
+    const actualDeltaPitch = pitch - modelTransformEvent.last!.pitch;
+    const actualDeltaYaw = yaw - modelTransformEvent.last!.yaw;
     const deltaRotation = Math.abs(actualDeltaPitch) + Math.abs(actualDeltaYaw);
     const rotationSpeed = deltaRotation / deltaT;
     const turretTraversePenalty =
@@ -190,8 +187,6 @@ export function SceneProps() {
     }
 
     modelTransformEvent.dispatch({ pitch, yaw });
-    lastPitch = pitch;
-    lastYaw = yaw;
 
     const gunDirection = new Vector3(0, 0, -1)
       .applyAxisAngle(I_HAT, pitch)

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

@@ -1,4 +1,3 @@
-import { normalizeAngleRad } from '@blitzkit/core';
 import { invalidate, useThree, type ThreeEvent } from '@react-three/fiber';
 import { useRef } from 'react';
 import { Group, Mesh, MeshStandardMaterial, Vector2 } from 'three';
@@ -110,23 +109,6 @@ export function TankModel() {
               />
             );
           },
-
-          // group(group) {
-          //   return {
-          //     visible:
-          //       group.name !== 'ST_base' &&
-          //       group.name !== 'MR_Base2' &&
-          //       (!group.name.includes('state_entity') ||
-          //         (isDynamicArmorActive &&
-          //           group.name.includes('state_entity_01')) ||
-          //         (!isDynamicArmorActive &&
-          //           group.name.includes('state_entity_00'))) &&
-          //       (!group.name.includes('shields') ||
-          //         (isDynamicArmorActive &&
-          //           group.name.includes('shields_rev')) ||
-          //         (!isDynamicArmorActive && group.name.endsWith('shields'))),
-          //   };
-          // },
         });
       })}
 
@@ -142,17 +124,12 @@ export function TankModel() {
 
           if (!isVisible) return null;
 
-          let pitch = 0;
-          let yaw = 0;
-
           function onPointerDown(event: ThreeEvent<PointerEvent>) {
             event.stopPropagation();
 
             if (!isTurret) return;
 
             position.set(event.clientX, event.clientY);
-            yaw = protagonist.yaw;
-            pitch = protagonist.pitch;
 
             mutateTankopediaEphemeral((draft) => {
               draft.controlsEnabled = false;
@@ -181,9 +158,10 @@ export function TankModel() {
             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),
+            const [pitch, yaw] = applyPitchYawLimits(
+              modelTransformEvent.last!.pitch,
+              modelTransformEvent.last!.yaw +
+                delta.x * (Math.PI / boundingRect.width),
               gunModelDefinition.pitch,
               turretModelDefinition.yaw,
               hasImprovedVerticalStabilizer,
@@ -192,10 +170,6 @@ export function TankModel() {
             modelTransformEvent.dispatch({ pitch, yaw });
           }
           function handlePointerUp() {
-            mutateDuel((draft) => {
-              draft.protagonist.pitch = normalizeAngleRad(pitch);
-              draft.protagonist.yaw = normalizeAngleRad(yaw);
-            });
             mutateTankopediaEphemeral((draft) => {
               draft.controlsEnabled = true;
             });
@@ -214,24 +188,6 @@ export function TankModel() {
                 />
               );
             },
-
-            // group(group) {
-            //   return {
-            //     visible:
-            //       group.name !== 'ST_base' &&
-            //       group.name !== 'MR_Base2' &&
-            //       (!group.name.includes('state_entity') ||
-            //         (isDynamicArmorActive &&
-            //           group.name.includes('state_entity_01')) ||
-            //         (!isDynamicArmorActive &&
-            //           group.name.includes('state_entity_00'))) &&
-            //       (!group.name.includes('shields') ||
-            //         (isDynamicArmorActive &&
-            //           group.name.includes('shields_rev')) ||
-            //         (!isDynamicArmorActive &&
-            //           group.name.endsWith('shields'))),
-            //   };
-            // },
           });
         })}
 
@@ -266,8 +222,8 @@ export function TankModel() {
               });
 
               position.set(event.clientX, event.clientY);
-              pitch = protagonist.pitch;
-              yaw = protagonist.yaw;
+              pitch = modelTransformEvent.last!.pitch;
+              yaw = modelTransformEvent.last!.yaw;
 
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
@@ -302,10 +258,6 @@ export function TankModel() {
               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);
             }
@@ -321,24 +273,6 @@ export function TankModel() {
                   />
                 );
               },
-
-              // group(group) {
-              //   return {
-              //     visible:
-              //       group.name !== 'ST_base' &&
-              //       group.name !== 'MR_Base2' &&
-              //       (!group.name.includes('state_entity') ||
-              //         (isDynamicArmorActive &&
-              //           group.name.includes('state_entity_01')) ||
-              //         (!isDynamicArmorActive &&
-              //           group.name.includes('state_entity_00'))) &&
-              //       (!group.name.includes('shields') ||
-              //         (isDynamicArmorActive &&
-              //           group.name.includes('shields_rev')) ||
-              //         (!isDynamicArmorActive &&
-              //           group.name.endsWith('shields'))),
-              //   };
-              // },
             });
           })}
         </group>

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

@@ -28,6 +28,7 @@ import {
 import { SmartCanvas } from '../../../../SmartCanvas';
 import { AutoClear } from './components/AutoClear';
 import { Controls } from './components/Control';
+import { InitialAligner } from './components/InitialAligner';
 import { InitialFogReveal } from './components/InitialFogReveal';
 import { Lighting } from './components/Lighting';
 import { SceneProps } from './components/SceneProps';
@@ -114,56 +115,44 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
       function handlePoseEvent(pose: Pose) {
         switch (pose) {
           case Pose.HullDown: {
-            mutateDuel((draft) => {
-              const [pitch, yaw] = applyPitchYawLimits(
-                -Infinity,
-                0,
-                gunModelDefinition.pitch,
-                turretModelDefinition.yaw,
-                hasImprovedVerticalStabilizer,
-                hasDownImprovedVerticalStabilizer,
-              );
+            const [pitch, yaw] = applyPitchYawLimits(
+              -Infinity,
+              0,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+              hasDownImprovedVerticalStabilizer,
+            );
 
-              modelTransformEvent.dispatch({ pitch, yaw });
-              draft.protagonist.pitch = pitch;
-              draft.protagonist.yaw = yaw;
-            });
+            modelTransformEvent.dispatch({ pitch, yaw });
 
             break;
           }
 
           case Pose.FaceHug: {
-            mutateDuel((draft) => {
-              const [pitch, yaw] = applyPitchYawLimits(
-                Infinity,
-                0,
-                gunModelDefinition.pitch,
-                turretModelDefinition.yaw,
-                hasImprovedVerticalStabilizer,
-              );
+            const [pitch, yaw] = applyPitchYawLimits(
+              Infinity,
+              0,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
 
-              modelTransformEvent.dispatch({ pitch, yaw });
-              draft.protagonist.pitch = pitch;
-              draft.protagonist.yaw = yaw;
-            });
+            modelTransformEvent.dispatch({ pitch, yaw });
 
             break;
           }
 
           case Pose.Default:
-            mutateDuel((draft) => {
-              const [pitch, yaw] = applyPitchYawLimits(
-                0,
-                0,
-                gunModelDefinition.pitch,
-                turretModelDefinition.yaw,
-                hasImprovedVerticalStabilizer,
-              );
+            const [pitch, yaw] = applyPitchYawLimits(
+              0,
+              0,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
 
-              modelTransformEvent.dispatch({ pitch, yaw });
-              draft.protagonist.pitch = pitch;
-              draft.protagonist.yaw = yaw;
-            });
+            modelTransformEvent.dispatch({ pitch, yaw });
 
             break;
         }
@@ -177,15 +166,15 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
     });
 
     useEffect(() => {
-      mutateDuel((draft) => {
-        [draft.protagonist.pitch, draft.protagonist.yaw] = applyPitchYawLimits(
-          draft.protagonist.pitch,
-          draft.protagonist.yaw,
-          gunModelDefinition.pitch,
-          turretModelDefinition.yaw,
-          hasImprovedVerticalStabilizer,
-        );
-      });
+      const [pitch, yaw] = applyPitchYawLimits(
+        modelTransformEvent.last!.pitch,
+        modelTransformEvent.last!.yaw,
+        gunModelDefinition.pitch,
+        turretModelDefinition.yaw,
+        hasImprovedVerticalStabilizer,
+      );
+
+      modelTransformEvent.dispatch({ pitch, yaw });
     }, [protagonistGun, protagonistTurret]);
 
     useEffect(() => {
@@ -246,6 +235,8 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           )}
           <Lighting display={display} />
         </Suspense>
+
+        <InitialAligner />
       </SmartCanvas>
     );
   },

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

@@ -1,8 +1,11 @@
 import { Quicklime } from 'quicklime';
 
 export interface ModelTransformEventData {
-  yaw?: number;
+  yaw: number;
   pitch: number;
 }
 
-export const modelTransformEvent = new Quicklime<ModelTransformEventData>();
+export const modelTransformEvent = new Quicklime<ModelTransformEventData>({
+  pitch: 0,
+  yaw: 0,
+});

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

@@ -4,10 +4,8 @@ import {
   type ProvisionDefinitions,
   type TankDefinition,
 } from '@blitzkit/core';
-import { degToRad } from 'three/src/math/MathUtils.js';
 import type { DuelMember } from '../../stores/duel';
 import { genericDefaultEquipmentMatrix } from '../../stores/duel/constants';
-import { applyPitchYawLimits } from '../blitz/applyPitchYawLimits';
 
 export function tankToDuelMember(
   tank: TankDefinition,
@@ -15,16 +13,7 @@ export function tankToDuelMember(
   provisionDefinitions: ProvisionDefinitions,
 ) {
   const turret = tank.turrets.at(-1)!;
-  const turretModel = model.turrets[turret.id];
   const gun = turret.guns.at(-1)!;
-  const gunModel = turretModel.guns[gun.gun_type!.value.base.id];
-
-  const [pitch, yaw] = applyPitchYawLimits(
-    degToRad(8),
-    degToRad(25),
-    gunModel.pitch,
-    turretModel.yaw,
-  );
 
   return {
     camouflage: true,
@@ -37,8 +26,6 @@ export function tankToDuelMember(
     shell: tank.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0],
     tank,
     track: tank.tracks.at(-1)!,
-    yaw,
-    pitch,
     turret,
     assaultDistance:
       (gun.gun_type!.value.base.assault_ranges?.ranges[0].distance ?? 0) / 2,

packages/website/src/hooks/useTankTransform.ts

@@ -6,6 +6,7 @@ import {
   TurretDefinition,
 } from '@blitzkit/core';
 import { invalidate } from '@react-three/fiber';
+import type { QuicklimeEvent } from 'quicklime';
 import { type RefObject, useEffect } from 'react';
 import { Euler, Group, Vector3 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils.js';
@@ -37,10 +38,15 @@ export function useTankTransform(
     const gunPosition = new Vector3();
     const gunRotation = new Euler();
 
-    function handleModelTransform(modelTransform?: ModelTransformEventData) {
-      const duel = duelStore.getState();
-      const yaw = modelTransform?.yaw ?? duel.protagonist.yaw;
-      const pitch = modelTransform?.pitch ?? duel.protagonist.pitch;
+    function handleModelTransform(
+      event: QuicklimeEvent<ModelTransformEventData>,
+    ) {
+      handleModelTransformInner(event.data);
+    }
+
+    function handleModelTransformInner(data?: ModelTransformEventData) {
+      const yaw = data?.yaw ?? modelTransformEvent.last!.yaw;
+      const pitch = data?.pitch ?? modelTransformEvent.last!.pitch;
 
       gunPosition
         .set(0, 0, 0)
@@ -91,24 +97,12 @@ export function useTankTransform(
       invalidate();
     }
 
-    handleModelTransform();
+    handleModelTransformInner();
 
     modelTransformEvent.on(handleModelTransform);
 
-    const unsubscribes = [
-      duelStore.subscribe(
-        (state) => state.protagonist.pitch,
-        () => handleModelTransform(),
-      ),
-      duelStore.subscribe(
-        (state) => state.protagonist.yaw,
-        () => handleModelTransform(),
-      ),
-      () => modelTransformEvent.off(handleModelTransform),
-    ];
-
     return () => {
-      unsubscribes.forEach((unsubscribe) => unsubscribe());
+      modelTransformEvent.off(handleModelTransform);
     };
   }, [track, turret]);
 }

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

@@ -33,8 +33,6 @@ export interface DuelMember {
   shell: ShellDefinition;
   track: TrackDefinition;
   equipmentMatrix: EquipmentMatrix;
-  pitch: number;
-  yaw: number;
   consumables: number[];
   provisions: number[];
   camouflage: boolean;