feat: syncronize tank model

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

@@ -7,14 +7,42 @@ import { Duel } from '../../../../../../../../stores/duel';
 
 const modelDefinitions = await awaitableModelDefinitions;
 
-const surfaceMaterial = new MeshBasicMaterial({
+const surfaceMaterial: Record<Props['only'], MeshBasicMaterial> = {
-  color: mauveDark.mauve6,
+  gun: new MeshBasicMaterial({
-  toneMapped: false,
+    color: mauveDark.mauve11,
-});
+    toneMapped: false,
-const outlineMaterial = new LineBasicMaterial({
+  }),
-  color: mauveDark.mauve8,
+  turret: new MeshBasicMaterial({
-  toneMapped: false,
+    color: mauveDark.mauve6,
-});
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.25,
+  }),
+  body: new MeshBasicMaterial({
+    color: mauveDark.mauve9,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.5,
+  }),
+};
+const outlineMaterial: Record<Props['only'], LineBasicMaterial> = {
+  gun: new LineBasicMaterial({
+    color: mauveDark.mauve3,
+    toneMapped: false,
+  }),
+  turret: new LineBasicMaterial({
+    color: mauveDark.mauve8,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.25,
+  }),
+  body: new LineBasicMaterial({
+    color: mauveDark.mauve11,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.5,
+  }),
+};
 
 interface Props {
   only: 'gun' | 'turret' | 'body';
@@ -67,8 +95,8 @@ export function ModelChunk({ only }: Props) {
           mesh(mesh, props, key) {
             return (
               <>
-                <mesh key={key} {...props} material={surfaceMaterial} />
+                <mesh key={key} {...props} material={surfaceMaterial[only]} />
-                <lineSegments material={outlineMaterial}>
+                <lineSegments material={outlineMaterial[only]}>
                   <edgesGeometry args={[mesh.geometry, 29]} />
                 </lineSegments>
               </>

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

@@ -194,8 +194,8 @@ export function GunFlexibilityVisualizer({
                   transparent,
                   ${Var('orange-a2')} ${Math.PI / 2 - maxPitch - CONIC_TRANSITION}rad,
 
-                  ${Var('cyan-a5')} ${Math.PI / 2 - maxPitch}rad,
+                  ${Var('cyan-a6')} ${Math.PI / 2 - maxPitch}rad,
-                  ${Var('jade-a5')} ${Math.PI / 2 - minPitch}rad,
+                  ${Var('jade-a6')} ${Math.PI / 2 - minPitch}rad,
 
                   ${Var('orange-a2')} ${Math.PI / 2 - minPitch + CONIC_TRANSITION}rad,
                   transparent 180deg

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

@@ -110,23 +110,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'))),
-          //   };
-          // },
         });
       })}
 
@@ -214,24 +197,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'))),
-            //   };
-            // },
           });
         })}
 
@@ -321,24 +286,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/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,16 @@ export function useTankTransform(
     const gunPosition = new Vector3();
     const gunRotation = new Euler();
 
-    function handleModelTransform(modelTransform?: ModelTransformEventData) {
+    function handleModelTransform(
+      event: QuicklimeEvent<ModelTransformEventData>,
+    ) {
+      handleModelTransformInner(event.data);
+    }
+
+    function handleModelTransformInner(data?: ModelTransformEventData) {
       const duel = duelStore.getState();
-      const yaw = modelTransform?.yaw ?? duel.protagonist.yaw;
+      const yaw = data?.yaw ?? duel.protagonist.yaw;
-      const pitch = modelTransform?.pitch ?? duel.protagonist.pitch;
+      const pitch = data?.pitch ?? duel.protagonist.pitch;
 
       gunPosition
         .set(0, 0, 0)
@@ -91,18 +98,18 @@ export function useTankTransform(
       invalidate();
     }
 
-    handleModelTransform();
+    handleModelTransformInner();
 
     modelTransformEvent.on(handleModelTransform);
 
     const unsubscribes = [
       duelStore.subscribe(
         (state) => state.protagonist.pitch,
-        () => handleModelTransform(),
+        () => handleModelTransformInner(),
       ),
       duelStore.subscribe(
         (state) => state.protagonist.yaw,
-        () => handleModelTransform(),
+        () => handleModelTransformInner(),
       ),
       () => modelTransformEvent.off(handleModelTransform),
     ];