diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx index 3eefe7fe5..7fdb09d73 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx @@ -15,7 +15,7 @@ type ThicknessesProps = MaybeSkeletonComponentProps & { }; export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) { - const display = Tankopedia.use((state) => state.requestedDisplay); + const display = Tankopedia.use((state) => state.display); const showExternalModules = TankopediaPersistent.use( (state) => state.showExternalModules ); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx index a9659776d..02becaed7 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx @@ -56,7 +56,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { const hasCustomShell = Tankopedia.use( (state) => state.customShell !== undefined ); - const display = Tankopedia.use((state) => state.requestedDisplay); + const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay); const isFullScreen = useFullScreen(); const advancedHighlighting = TankopediaPersistent.use( (state) => state.advancedHighlighting @@ -86,7 +86,9 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { gap="2" direction="column" top="50%" - right={display === TankopediaDisplay.DynamicArmor ? "3" : "-4rem"} + right={ + requestedDisplay === TankopediaDisplay.DynamicArmor ? "3" : "-4rem" + } style={{ position: "absolute", transform: "translateY(-50%)", @@ -298,7 +300,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { > {disturbed && ( <> - {display === TankopediaDisplay.DynamicArmor && ( + {requestedDisplay === TankopediaDisplay.DynamicArmor && ( { Tankopedia.mutate((draft) => { draft.disturbed = true; @@ -446,7 +448,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { - {display === TankopediaDisplay.DynamicArmor && ( + {requestedDisplay === TankopediaDisplay.DynamicArmor && ( (null!); const t0 = useRef(0); + const transition = useRef(false); const clock = useThree((state) => state.clock); const display = Tankopedia.use((state) => state.display); const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay); @@ -36,13 +37,18 @@ export function Lighting() { t0.current = clock.elapsedTime - REVEAL_ANIMATION_TIME; }, []); - useFrame(({ clock, invalidate }) => { + useFrame(({ invalidate }) => { + if (transition.current) { + transition.current = false; + t0.current = clock.elapsedTime; + } + const x = clamp( (clock.elapsedTime - t0.current) / animationTime.current, 0, 2 ); - const t = 0.5 * Math.sin(Math.PI * (x + 0.5)) + 0.5; + const t = (0.5 * Math.sin(Math.PI * (x + 0.5)) + 0.5) ** 2; for (const child of wrapper.current.children) { if (child instanceof SpotLight) { @@ -52,7 +58,10 @@ export function Lighting() { if (x < 2) invalidate(); - if (x === 2 && display !== requestedDisplay) { + if ( + x > 1 && + Tankopedia.state.display !== Tankopedia.state.requestedDisplay + ) { Tankopedia.mutate((draft) => { draft.display = requestedDisplay; }); @@ -62,7 +71,7 @@ export function Lighting() { useEffect(() => { if (requestedDisplay === display) return; - t0.current = clock.elapsedTime; + transition.current = true; animationTime.current = TRANSITION_ANIMATION_TIME; }, [requestedDisplay]); 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 6a5b650c5..54835be29 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 @@ -59,10 +59,7 @@ export function TankModel() { } function onPointerDown(event: ThreeEvent) { - if ( - isTrack && - Tankopedia.state.requestedDisplay === TankopediaDisplay.Model - ) { + if (isTrack && Tankopedia.state.display === TankopediaDisplay.Model) { position.set(event.clientX, event.clientY); event.stopPropagation(); 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 057c75ade..5c66a69f4 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx @@ -47,7 +47,7 @@ export const TankSandbox = forwardRef( const turretModelDefinition = tankModelDefinition.turrets[protagonistTurret.id]; const gunModelDefinition = turretModelDefinition.guns[protagonistGun.id]; - const display = Tankopedia.use((state) => state.requestedDisplay); + const display = Tankopedia.use((state) => state.display); const hideTankModelUnderArmor = TankopediaPersistent.use( (state) => state.hideTankModelUnderArmor ); @@ -148,6 +148,8 @@ export const TankSandbox = forwardRef( } }, [display]); + console.log(TankopediaDisplay[display]); + return (