feat: transition and continous

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

@@ -1,5 +1,6 @@
 import { Card } from '@radix-ui/themes';
 import { awaitableModelDefinitions } from '../../../../../../../core/awaitables/modelDefinitions';
+import { DEFAULT_PITCH_TRANSITION } from '../../../../../../../core/blitz/applyPitchYawLimits';
 import { Duel } from '../../../../../../../stores/duel';
 
 const MAX_MAG = 20;
@@ -28,58 +29,55 @@ export function GunFlexibilityVisualizer() {
   const y = turretModel.yaw;
   const f = p.front;
   const b = p.back;
+  const t = gunModel.pitch.transition ?? DEFAULT_PITCH_TRANSITION;
 
   let d = '';
 
   // right
-  d += `M 0 0`;
   const ms = mag(p.max);
   if (y) {
-    d += `L ${c(90 - y.max, ms)}`;
+    d += `M ${c(90 - y.max, ms)}`;
   } else if (b) {
-    d += `L ${c(-90 + b.range / 2, ms)}`;
+    d += `M ${c(-90 + b.range / 2 + t, ms)}`;
   } else {
-    d += `L ${c(-90 / 2, ms)}`;
+    d += `M ${c(-90 / 2, ms)}`;
   }
   if (f) {
-    d += `A ${ms} ${ms} 0 0 0 ${c(90 - f.range / 2, ms)}`;
+    d += `A ${ms} ${ms} 0 0 0 ${c(90 - f.range / 2 - t, ms)}`;
   } else {
     d += `A ${ms} ${ms} 0 0 0 ${c(90 / 2, ms)}`;
   }
 
-  // left
-  d += `M 0 0`;
+  // front
   if (f) {
-    d += `L ${c(90 + f.range / 2, ms)}`;
+    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, ms)}`;
   } else {
     d += `L ${c(90 / 2, ms)}`;
   }
   if (y) {
     d += `A ${ms} ${ms} 0 0 0 ${c(90 - y.min, ms)}`;
   } else if (b) {
-    d += `A ${ms} ${ms} 0 0 0 ${c(-90 - b.range / 2, ms)}`;
+    d += `A ${ms} ${ms} 0 0 0 ${c(-90 - b.range / 2 - t, ms)}`;
   } else {
     d += `A ${ms} ${ms} 0 0 0 ${c(-90 / 2, ms)}`;
   }
 
-  // front
-  if (f) {
-    const m = mag(f.max);
-    d += `M 0 0`;
-    d += `L ${c(90 - f.range / 2, m)}`;
-    d += `A ${m} ${m} 0 0 0 ${c(90 + f.range / 2, m)}`;
-    d += `Z`;
-  }
-
   // back
   if (!y && b) {
     const m = mag(b.max);
-    d += `M 0 0`;
     d += `L ${c(-90 - b.range / 2, m)}`;
     d += `A ${m} ${m} 0 0 0 ${c(-90 + b.range / 2, m)}`;
-    d += `Z`;
   }
 
+  d += `Z`;
+
   return (
     <Card style={{ aspectRatio: '1 / 1' }} variant="classic">
       <svg
@@ -87,16 +85,24 @@ export function GunFlexibilityVisualizer() {
           position: 'absolute',
           top: 0,
           left: 0,
-          width: '100%',
-          height: '100%',
+          width: 'calc(100%)',
+          height: 'calc(100%)',
         }}
         viewBox="-1 -1 2 2"
       >
         <path
-          fill="var(--gray-1)"
+          stroke="var(--gray-11)"
+          strokeWidth="0.01px"
+          fill="var(--gray-9)"
+          d={d}
+        />
+        <path
+          stroke="var(--gray-2)"
+          fill="transparent"
+          strokeWidth="0.01px"
+          strokeDasharray="0.05 0.01"
           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"
         />
-        <path fill="var(--gray-a9)" d={d} />
       </svg>
     </Card>
   );

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

@@ -6,6 +6,8 @@ import {
 import { clamp } from 'lodash-es';
 import { degToRad } from 'three/src/math/MathUtils.js';
 
+export const DEFAULT_PITCH_TRANSITION = 15;
+
 export function applyPitchYawLimits(
   pitch: number, // rad
   yaw: number, // rad
@@ -28,7 +30,9 @@ export function applyPitchYawLimits(
   const elevationBuff = verticalStabilizer ? degToRad(4) : 0;
   let lowerPitch = -degToRad(pitchLimits.max) - depressionBuff;
   let upperPitch = -degToRad(pitchLimits.min) + elevationBuff;
-  const transition = degToRad(pitchLimits.transition ?? 15);
+  const transition = degToRad(
+    pitchLimits.transition ?? DEFAULT_PITCH_TRANSITION,
+  );
 
   if (pitchLimits.back) {
     const range = degToRad(pitchLimits.back.range);