feat: requestedDisplay

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
   );

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 && (
                 <IconButton
                   size="2"
                   highContrast
@@ -400,7 +402,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
         <Flex gap="3" align="center" mt="2">
           <SegmentedControl.Root
             variant="classic"
-            value={`${disturbed ? display : -1}`}
+            value={`${disturbed ? requestedDisplay : -1}`}
             onValueChange={(value) => {
               Tankopedia.mutate((draft) => {
                 draft.disturbed = true;
@@ -446,7 +448,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
             </SegmentedControl.Item>
           </SegmentedControl.Root>
 
-          {display === TankopediaDisplay.DynamicArmor && (
+          {requestedDisplay === TankopediaDisplay.DynamicArmor && (
             <Dialog.Root
               open={antagonistSelectorOpen}
               onOpenChange={setAntagonistSelectorOpen}

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

@@ -7,21 +7,22 @@ import { Tankopedia } from "../../../../../../stores/tankopedia";
 import { TankopediaPersistent } from "../../../../../../stores/tankopediaPersistent";
 import { HelpingSpotLight } from "../../../../../HelpingSpotLight";
 
-const ANGLE = Math.PI / 3;
+const ANGLE = Math.PI * 2 ** -2;
 const REVEAL_ANIMATION_TIME = 3;
 const TRANSITION_ANIMATION_TIME = 0.5;
 
 const LIGHTS_COUNT = 4;
 const THETA_OFFSET = degToRad(-150);
 const LIGHT_DISTANCE = 13;
-const LIGHT_HEIGHT_0 = 4;
+const LIGHT_HEIGHT_0 = 5;
-const LIGHT_HEIGHT_1 = 8;
+const LIGHT_HEIGHT_1 = 10;
-const INTENSITY_0 = 70;
+const INTENSITY_0 = 60;
-const INTENSITY_1 = 40;
+const INTENSITY_1 = 30;
 
 export function Lighting() {
   const wrapper = useRef<Group>(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]);
 

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

@@ -59,10 +59,7 @@ export function TankModel() {
         }
 
         function onPointerDown(event: ThreeEvent<PointerEvent>) {
-          if (
+          if (isTrack && Tankopedia.state.display === TankopediaDisplay.Model) {
-            isTrack &&
-            Tankopedia.state.requestedDisplay === TankopediaDisplay.Model
-          ) {
             position.set(event.clientX, event.clientY);
             event.stopPropagation();
 

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

@@ -47,7 +47,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
     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<HTMLCanvasElement, TankSandboxProps>(
       }
     }, [display]);
 
+    console.log(TankopediaDisplay[display]);
+
     return (
       <SmartCanvas
         ref={canvas}