feat: active camera positioner

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

@@ -0,0 +1,14 @@
+import { useFrame } from '@react-three/fiber';
+
+export const zoom = 60;
+
+export function CameraPositioner() {
+  useFrame(({ camera, gl: { domElement } }) => {
+    const { width } = domElement.getBoundingClientRect();
+    const physicalWidth = width / zoom;
+
+    camera.position.set(10, 0, -physicalWidth / 6);
+  });
+
+  return null;
+}

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

@@ -1,8 +1,7 @@
 import { Canvas } from '@react-three/fiber';
+import { CameraPositioner, zoom } from './CameraPositioner';
 import { CanvasContent } from './CanvasContent';
 
-export const zoom = 60;
-
 export function FlexibilityCanvas() {
   return (
     <Canvas
@@ -10,11 +9,11 @@ export function FlexibilityCanvas() {
       orthographic
       camera={{
         zoom,
-        position: [10, 0, -1.5],
         rotation: [0, Math.PI / 2, 0],
       }}
     >
       <CanvasContent />
+      <CameraPositioner />
     </Canvas>
   );
 }

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

@@ -59,7 +59,7 @@ export function ModelChunk({ onlyGun = false }: Props) {
                 <>
                   <mesh key={key} {...props} material={surfaceMaterial} />
                   <lineSegments material={outlineMaterial}>
-                    <edgesGeometry args={[mesh.geometry, 30]} />
+                    <edgesGeometry args={[mesh.geometry, 29]} />
                   </lineSegments>
                 </>
               );

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx

@@ -13,8 +13,8 @@ export function ShellBorder(props: ComponentProps<'svg'>) {
       <path
         d="M149.917 7.5L151.5 9.91406V50.085L149.917 52.5H134.674C133.504 51.6657 132.116 51.1813 130.673 51.1133L130.319 51.1045H93.085C91.8919 51.1046 90.7173 51.3895 89.6582 51.9336L89.4482 52.0459L88.6494 52.4883C48.806 52.0806 22.9344 39.046 11.1416 30C22.9344 20.954 48.806 7.91846 88.6494 7.51074L89.4482 7.9541C90.5611 8.57122 91.8125 8.89543 93.085 8.89551H130.319C131.888 8.89551 133.409 8.40216 134.674 7.5H149.917Z"
         stroke="currentColor"
-        stroke-width="15"
-        stroke-linejoin="round"
+        strokeWidth="15"
+        strokeLinejoin="round"
       />
     </svg>
   );