minor adjustments, fixed potential issue with idle scene

src/components/GateScene/GateMiddleObject.tsx

@@ -4,6 +4,7 @@ import BlueOne from "./GateMiddleObject/BlueOne";
 import { a, useSpring, useSprings } from "@react-spring/three";
 import blue_digit_positions from "../../resources/blue_digit_positions.json";
 import Mirror from "./GateMiddleObject/Mirror";
+import sleep from "../../utils/sleep";
 
 type GateMiddleObjectProps = {
   intro: boolean;
@@ -29,24 +30,26 @@ const GateMiddleObject = (props: GateMiddleObjectProps) => {
   });
 
   useEffect(() => {
-    set((intIdx) => {
-      const idx = intIdx.toString();
-      return {
-        posX:
-          blue_digit_positions[idx as keyof typeof blue_digit_positions]
-            .final_x,
-        posY:
-          blue_digit_positions[idx as keyof typeof blue_digit_positions]
-            .final_y,
-        delay:
-          blue_digit_positions[idx as keyof typeof blue_digit_positions].delay,
-        visibility: true,
-      };
-    });
+    (async () => {
+      set((intIdx) => {
+        const idx = intIdx.toString();
+        return {
+          posX:
+            blue_digit_positions[idx as keyof typeof blue_digit_positions]
+              .final_x,
+          posY:
+            blue_digit_positions[idx as keyof typeof blue_digit_positions]
+              .final_y,
+          delay:
+            blue_digit_positions[idx as keyof typeof blue_digit_positions]
+              .delay,
+          visibility: true,
+        };
+      });
 
-    setTimeout(() => {
+      await sleep(1400);
       setMiddleGroupPos([-0.15, -0.2, -0.1]);
-    }, 1400);
+    })();
   }, [set]);
 
   const middleObjectGroupState = useSpring({

src/components/GateScene/GateSide.tsx

@@ -18,7 +18,7 @@ const GateSide = () => {
 
   useFrame(() => {
     const now = Date.now();
-    if (matRef.current && last.current) {
+    if (matRef.current) {
       if (now > last.current + 50) {
         matRef.current.uniforms.offset.value += 0.5;
         last.current = now;

src/components/KeyPressHandler.tsx

@@ -36,6 +36,7 @@ import idleManager from "../core/setters/main/idleManager";
 import * as audio from "../static/sfx";
 import handleEndSceneKeyPress from "../core/scene-keypress-handlers/handleEndSceneKeyPress";
 import endManager from "../core/setters/end/endManager";
+import sleep from "../utils/sleep";
 
 const KeyPressHandler = () => {
   const mediaSceneSetters = useMemo(
@@ -111,21 +112,27 @@ const KeyPressHandler = () => {
         // after one idle animation plays, the second comes sooner than it would after a regular keypress
         lainIdleCounter.current = now - 2500;
       }
-      // if (now > idleSceneCounter.current + 5000) {
-      //   idleManager(getRandomIdleMedia());
-      //   playAudio(audio.sound32);
-      //   setTimeout(() => {
-      //     sceneManager({ event: "play_idle_media" });
-      //   }, 1200);
-      //   // put it on lock until the next action, since while the idle media plays, the
-      //   // Date.now() value keeps increasing, which can result in another idle media playing right after one finishes
-      //   // one way to work around this would be to modify the value depending on the last played idle media's duration
-      //   // but i'm way too lazy for that
-      //   idleSceneCounter.current = -1;
-      // }
+      if (now > idleSceneCounter.current + 30000) {
+        (async () => {
+          idleManager(getRandomIdleMedia());
+          playAudio(audio.sound32);
+          await sleep(1200);
+
+          sceneManager({ event: "play_idle_media" });
+          // put it on lock until the next action, since while the idle media plays, the
+          // Date.now() value keeps increasing, which can result in another idle media playing right after one finishes
+          // one way to work around this would be to modify the value depending on the last played idle media's duration
+          // but i'm way too lazy for that
+          idleSceneCounter.current = -1;
+        })();
+      }
     }
   });
 
+  useEffect(() => {
+    if (scene !== "main") idleSceneCounter.current = -1;
+  }, [scene]);
+
   const handleKeyPress = useCallback(
     (event) => {
       const { keyCode } = event;

src/components/MainScene/Lain.tsx

@@ -33,6 +33,7 @@ import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
 import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
 
 import { useStore } from "../../store";
+import sleep from "../../utils/sleep";
 
 type LainConstructorProps = {
   sprite: string;
@@ -408,11 +409,12 @@ const Lain = (props: LainProps) => {
   const regularColor = useMemo(() => new THREE.Color(1, 1, 1), []);
 
   useEffect(() => {
-    if (wordSelected) {
-      setTimeout(() => {
+    (async () => {
+      if (wordSelected) {
+        await sleep(3100);
         if (lainRef.current) lainRef.current.material.color = glowColor;
-      }, 3100);
-    }
+      }
+    })();
   }, [glowColor, wordSelected]);
 
   useFrame(() => {

src/core/setters/boot/bootManager.ts

@@ -50,9 +50,7 @@ const bootManager = (eventState: any) => {
 
   const { action } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    action();
-  }
+  action && action();
 };
 
 export default bootManager;

src/core/setters/boot/bootSubsceneManager.ts

@@ -21,9 +21,7 @@ const bootSubsceneManager = (eventState: any) => {
 
   const { action } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    action();
-  }
+  action && action();
 };
 
 export default bootSubsceneManager;

src/core/setters/end/endManager.ts

@@ -18,9 +18,7 @@ const endManager = (eventState: any) => {
 
   const { action } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    action();
-  }
+  action && action();
 };
 
 export default endManager;

src/core/setters/main/mainSubsceneManager.ts

@@ -1,7 +1,7 @@
 import { useStore } from "../../../store";
 import sleep from "../../../utils/sleep";
 
-const mainSubsceneManager = async (eventState: any) => {
+const mainSubsceneManager = (eventState: any) => {
   const setMainSubscene = useStore.getState().setMainSubscene;
 
   const dispatchAction = (eventState: { event: string }) => {
@@ -38,8 +38,10 @@ const mainSubsceneManager = async (eventState: any) => {
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  delay && (await sleep(delay));
-  action && action();
+  (async () => {
+    delay && (await sleep(delay));
+    action && action();
+  })();
 };
 
 export default mainSubsceneManager;

src/core/setters/main/site/lainManager.ts

@@ -1,7 +1,7 @@
 import { useStore } from "../../../../store";
 import sleep from "../../../../utils/sleep";
 
-const lainManager = async (eventState: any) => {
+const lainManager = (eventState: any) => {
   const setLainMoveState = useStore.getState().setLainMoveState;
 
   const dispatchAction = (eventState: any) => {
@@ -59,10 +59,12 @@ const lainManager = async (eventState: any) => {
 
   const { action, duration } = { ...dispatchAction(eventState) };
 
-  action && action();
+  (async () => {
+    action && action();
 
-  duration && (await sleep(duration));
-  setLainMoveState("standing");
+    duration && (await sleep(duration));
+    setLainMoveState("standing");
+  })();
 };
 
 export default lainManager;

src/core/setters/main/site/nodeManager.ts

@@ -2,7 +2,7 @@ import { useStore } from "../../../../store";
 import { NodeDataType } from "../../../../components/MainScene/Site";
 import sleep from "../../../../utils/sleep";
 
-const nodeManager = async (eventState: any) => {
+const nodeManager = (eventState: any) => {
   const setActiveNode = useStore.getState().setNode;
   const setActiveNodePos = useStore.getState().setNodePos;
   const setActiveNodeRot = useStore.getState().setNodeRot;
@@ -182,8 +182,10 @@ const nodeManager = async (eventState: any) => {
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  delay && (await sleep(delay));
-  action && action();
+  (async () => {
+    delay && (await sleep(delay));
+    action && action();
+  })();
 };
 
 export default nodeManager;

src/core/setters/main/site/siteManager.ts

@@ -1,7 +1,7 @@
 import { useStore } from "../../../../store";
 import sleep from "../../../../utils/sleep";
 
-const siteManager = async (eventState: any) => {
+const siteManager = (eventState: any) => {
   const setRotY = useStore.getState().setSiteRotY;
   const setRotX = useStore.getState().setSiteRotX;
   const setOldRot = useStore.getState().setOldSiteRot;
@@ -41,8 +41,10 @@ const siteManager = async (eventState: any) => {
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  delay && (await sleep(delay));
-  action && action();
+  (async () => {
+    delay && (await sleep(delay));
+    action && action();
+  })();
 };
 
 export default siteManager;

src/core/setters/media/mediaManager.ts

@@ -1,5 +1,4 @@
 import { useStore } from "../../../store";
-import * as THREE from "three";
 
 const mediaManager = (eventState: any) => {
   const toggleSide = useStore.getState().toggleMediaSide;

src/core/setters/progressManager.ts

@@ -2,7 +2,7 @@ import { useStore } from "../../store";
 import { NodeDataType } from "../../components/MainScene/Site";
 import sleep from "../../utils/sleep";
 
-const progressManager = async (eventState: any) => {
+const progressManager = (eventState: any) => {
   const updateNodeViewed = useStore.getState().setNodeViewed;
   const setPolytanPartUnlocked = useStore.getState().setPolytanPartUnlocked;
   const incrementGateLvl = useStore.getState().incrementGateLvl;
@@ -91,8 +91,10 @@ const progressManager = async (eventState: any) => {
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  delay && (await sleep(delay));
-  action && action();
+  (async () => {
+    delay && (await sleep(delay));
+    action && action();
+  })();
 };
 
 export default progressManager;

src/core/setters/sceneManager.ts

@@ -1,7 +1,7 @@
 import { useStore } from "../../store";
 import sleep from "../../utils/sleep";
 
-const sceneManager = async (eventState: any) => {
+const sceneManager = (eventState: any) => {
   const dispatchAction = (eventState: { event: string; scene: string }) => {
     switch (eventState.event) {
       case "throw_node_sskn":
@@ -9,7 +9,7 @@ const sceneManager = async (eventState: any) => {
         return {
           action: () => {
             useStore.setState({
-              currentScene: "sskn",
+              currentScene: eventState.scene,
               intro: false,
               ssknComponentMatrixIdx: 0,
               ssknLoading: false,
@@ -93,9 +93,11 @@ const sceneManager = async (eventState: any) => {
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  delay && (await sleep(delay));
+  (async () => {
+    delay && (await sleep(delay));
 
-  action && action();
+    action && action();
+  })();
 };
 
 export default sceneManager;

src/scenes/MainScene.tsx

@@ -17,6 +17,7 @@ import NotFound from "../components/MainScene/NotFound";
 import PausePopUps from "../components/MainScene/PauseSubscene/PausePopUps";
 import { playAudio } from "../store";
 import * as audio from "../static/sfx";
+import sleep from "../utils/sleep";
 
 const MainScene = () => {
   const intro = useStore((state) => state.intro);
@@ -27,21 +28,23 @@ const MainScene = () => {
   const setWordSelected = useStore((state) => state.setWordSelected);
 
   useEffect(() => {
-    if (subscene === "pause") {
-      setTimeout(() => {
+    (async () => {
+      if (subscene === "pause") {
+        await sleep(3400);
         setPaused(true);
-      }, 3400);
-    } else {
-      setPaused(false);
-    }
+      } else {
+        setPaused(false);
+      }
+    })();
   }, [subscene]);
 
   useEffect(() => {
-    if (wordSelected) {
-      setTimeout(() => {
+    (async () => {
+      if (wordSelected) {
+        await sleep(3100);
         setWordSelected(false);
-      }, 3100);
-    }
+      }
+    })();
   }, [setWordSelected, wordSelected]);
 
   const introWrapperRef = useRef<THREE.Group>();