fix: shell and quick equipment frame invalidations

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx

@@ -9,6 +9,7 @@ import {
   Text,
   TextField,
 } from '@radix-ui/themes';
+import { throttle } from 'lodash-es';
 import { type ChangeEvent } from 'react';
 import { Duel } from '../../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
@@ -154,7 +155,13 @@ export function CustomShellButton() {
                   <Flex align="center" justify="between" gap="4" py="1">
                     <Text>Normalization</Text>
 
-                    <Flex align="center" gap="2" flexGrow="1" maxWidth="15rem">
+                    <Flex
+                      align="center"
+                      gap="2"
+                      flexGrow="1"
+                      maxWidth="15rem"
+                      minWidth="8rem"
+                    >
                       <Text color="gray">
                         {customShell.normalization ?? 0}°
                       </Text>
@@ -162,11 +169,13 @@ export function CustomShellButton() {
                         min={0}
                         max={90}
                         value={[customShell.normalization ?? 0]}
-                        onValueChange={([value]) => {
+                        onValueChange={throttle(([value]) => {
+                          console.log('asd');
+
                           mutateTankopediaEphemeral((draft) => {
                             draft.customShell!.normalization = value;
                           });
-                        }}
+                        }, 1000)}
                       />
                     </Flex>
                   </Flex>
@@ -180,11 +189,11 @@ export function CustomShellButton() {
                         min={0}
                         max={90}
                         value={[customShell.ricochet ?? 90]}
-                        onValueChange={([value]) => {
+                        onValueChange={throttle(([value]) => {
                           mutateTankopediaEphemeral((draft) => {
                             draft.customShell!.ricochet = value;
                           });
-                        }}
+                        }, 1000)}
                       />
                     </Flex>
                   </Flex>

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/DynamicArmorSwitcher.tsx

@@ -1,6 +1,5 @@
 import { asset } from '@blitzkit/core';
 import { IconButton } from '@radix-ui/themes';
-import { invalidate } from '@react-three/fiber';
 import { useArmor } from '../../../../../../hooks/useArmor';
 import { Duel } from '../../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
@@ -22,7 +21,7 @@ export function DynamicArmorSwitcher() {
       variant="soft"
       size={{ initial: '2', sm: '3' }}
       onClick={() => {
-        invalidate();
+        // invalidate();
         mutateDuel((draft) => {
           if (draft.protagonist.consumables.includes(73)) {
             draft.protagonist.consumables =

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

@@ -26,7 +26,6 @@ import {
   Text,
   Tooltip,
 } from '@radix-ui/themes';
-import { invalidate } from '@react-three/fiber';
 import { useState, type RefObject } from 'react';
 import { ENVIRONMENTS } from '../../../../../constants/lightingEnvironments';
 import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
@@ -202,7 +201,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                 size={{ initial: '2', sm: '3' }}
                 radius="none"
                 onClick={() => {
-                  invalidate();
+                  // invalidate();
                   mutateDuel((draft) => {
                     draft.antagonist.shell = thisShell;
                   });
@@ -240,7 +239,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
               size={{ initial: '2', sm: '3' }}
               radius="none"
               onClick={() => {
-                invalidate();
+                // invalidate();
                 mutateDuel((draft) => {
                   draft.antagonist.equipmentMatrix[0][0] = hasCalibratedShells
                     ? 0
@@ -266,7 +265,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
               size={{ initial: '2', sm: '3' }}
               radius="none"
               onClick={() => {
-                invalidate();
+                // invalidate();
                 mutateDuel((draft) => {
                   draft.protagonist.equipmentMatrix[1][1] = hasEnhancedArmor
                     ? 0

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

@@ -1,5 +1,5 @@
 import { normalizeAngleRad } from '@blitzkit/core';
-import { invalidate, useThree, type ThreeEvent } from '@react-three/fiber';
+import { useThree, type ThreeEvent } from '@react-three/fiber';
 import { memo, useRef } from 'react';
 import { Group, Mesh, MeshStandardMaterial, Vector2 } from 'three';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
@@ -20,6 +20,8 @@ export const TankModel = memo(() => {
   const duelStore = Duel.useStore();
   const protagonist = Duel.use((draft) => draft.protagonist);
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
+  const track = Duel.use((state) => state.protagonist.track);
+  const turret = Duel.use((state) => state.protagonist.turret);
   const canvas = useThree((state) => state.gl.domElement);
   const hullContainer = useRef<Group>(null);
   const turretContainer = useRef<Group>(null);
@@ -33,7 +35,7 @@ export const TankModel = memo(() => {
   const { gltf } = useModel(protagonist.tank.id);
   const nodes = Object.values(gltf.nodes);
 
-  useTankTransform(protagonist, turretContainer, gunContainer);
+  useTankTransform(track, turret, turretContainer, gunContainer);
 
   return (
     <ModelTankWrapper ref={hullContainer}>
@@ -53,7 +55,7 @@ export const TankModel = memo(() => {
 
           if (!material) return;
 
-          invalidate();
+          // invalidate();
 
           if (material.map) material.map.offset.y += offset;
           if (material.aoMap) material.aoMap.offset.y += offset;