diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx index 40c6ca864..4cca908ff 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx @@ -1,6 +1,6 @@ import { normalizeAngleRad } from '@blitzkit/core'; import { invalidate, useThree, type ThreeEvent } from '@react-three/fiber'; -import { memo, useRef } from 'react'; +import { useEffect, useRef } from 'react'; import { Group, Mesh, MeshStandardMaterial, Vector2 } from 'three'; import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits'; import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment'; @@ -10,11 +10,14 @@ import { useModel } from '../../../../../../hooks/useModel'; import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition'; import { useTankTransform } from '../../../../../../hooks/useTankTransform'; import { Duel } from '../../../../../../stores/duel'; -import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral'; +import { + ShootingRangeZoom, + TankopediaEphemeral, +} from '../../../../../../stores/tankopediaEphemeral'; import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants'; import { ModelTankWrapper } from '../../../../../Armor/components/ModelTankWrapper'; -export const TankModel = memo(() => { +export function TankModel() { const mutateDuel = Duel.useMutation(); const duelStore = Duel.useStore(); const protagonist = Duel.use((draft) => draft.protagonist); @@ -34,6 +37,18 @@ export const TankModel = memo(() => { const { gltf } = useModel(protagonist.tank.id); const nodes = Object.values(gltf.nodes); + useEffect(() => { + const unsubscribeShootingRangeZoom = tankopediaEphemeralStore.subscribe( + (state) => state.shootingRangeZoom, + (zoom) => { + if (!hullContainer.current) return; + hullContainer.current.visible = zoom === ShootingRangeZoom.Arcade; + }, + ); + + return unsubscribeShootingRangeZoom; + }, []); + useTankTransform(track, turret, turretContainer, gunContainer); return ( @@ -142,7 +157,12 @@ export const TankModel = memo(() => { function onPointerDown(event: ThreeEvent) { event.stopPropagation(); - if (!isTurret) return; + if ( + !isTurret || + tankopediaEphemeralStore.getState().display === + TankopediaDisplay.ShootingRange + ) + return; position.set(event.clientX, event.clientY); yaw = protagonist.yaw; @@ -239,6 +259,12 @@ export const TankModel = memo(() => { function onPointerDown(event: ThreeEvent) { event.stopPropagation(); + if ( + tankopediaEphemeralStore.getState().display === + TankopediaDisplay.ShootingRange + ) + return; + mutateTankopediaEphemeral((draft) => { draft.controlsEnabled = false; }); @@ -315,4 +341,4 @@ export const TankModel = memo(() => { ); -}); +} diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx index c7ec91fdc..47c0a8cf5 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx @@ -13,10 +13,7 @@ import { useEquipment } from '../../../../../hooks/useEquipment'; import { useOnScreen } from '../../../../../hooks/useOnScreen'; import { useTankModelDefinition } from '../../../../../hooks/useTankModelDefinition'; import { Duel } from '../../../../../stores/duel'; -import { - ShootingRangeZoom, - TankopediaEphemeral, -} from '../../../../../stores/tankopediaEphemeral'; +import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral'; import { TankopediaDisplay } from '../../../../../stores/tankopediaPersistent/constants'; import { Armor } from '../../../../Armor'; import { ArmorPlateDisplay } from '../../../../Armor/components/ArmorPlateDisplay'; @@ -51,9 +48,6 @@ export const TankSandbox = forwardRef( turretModelDefinition.guns[protagonistGun.gun_type!.value.base.id]; const display = TankopediaEphemeral.use((state) => state.display); const onScreen = useOnScreen(canvas); - const shootingRangeZoom = TankopediaEphemeral.use( - (state) => state.shootingRangeZoom, - ); useImperativeHandle(ref, () => canvas.current!, []); @@ -162,6 +156,8 @@ export const TankSandbox = forwardRef( } }, [display]); + console.log('rendering tank sandbox'); + return ( ( > - {display !== TankopediaDisplay.StaticArmor && - shootingRangeZoom === ShootingRangeZoom.Arcade && } + {display !== TankopediaDisplay.StaticArmor && }