prettified managers, more sleeps

src/App.tsx

@@ -45,7 +45,7 @@ const App = () => {
         <Canvas concurrent>
           <KeyPressHandler />
           <Suspense fallback={null}>
-            {/*<Preloader />*/}
+            <Preloader />
             {dispatchScene[currentScene as keyof typeof dispatchScene]}
           </Suspense>
         </Canvas>

src/components/BootScene/BootAnimation.tsx

@@ -14,6 +14,7 @@ import bootBackgroundDistortedTex from "../../static/sprite/distorted_text.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import { a, useSpring } from "@react-spring/three";
 import * as THREE from "three";
+import sleep from "../../utils/sleep";
 
 type BootAnimationProps = {
   visible: boolean;
@@ -110,37 +111,31 @@ const BootAnimation = (props: BootAnimationProps) => {
 
   useEffect(() => {
     if (props.visible) {
-      setTimeout(() => {
+      (async () => {
+        await sleep(900);
         currentBootStatusTextTex.offset.y = 0.528;
-      }, 900);
 
-      setTimeout(() => {
+        await sleep(300);
         currentBootStatusTextTex.offset.y = 0.79;
-      }, 1200);
 
-      setTimeout(() => {
+        await sleep(300);
         currentBootStatusTextTex.offset.y = 0.264;
-      }, 1500);
 
-      setTimeout(() => {
+        await sleep(100);
         currentBootStatusTextTex.offset.y = 0.79;
-      }, 1600);
 
-      setTimeout(() => {
+        await sleep(500);
         currentBootStatusTextTex.offset.x = 0.5;
         currentBootStatusTextTex.offset.y = 0.264;
-      }, 2100);
 
-      setTimeout(() => {
+        await sleep(300);
         currentBootStatusTextTex.offset.x = 0;
         currentBootStatusTextTex.offset.y = 0.005;
-      }, 2400);
 
-      setTimeout(() => {
+        await sleep(100);
         currentBootStatusTextTex.offset.y = 0.79;
-      }, 2500);
 
-      setTimeout(() => {
+        await sleep(1700);
         currentBootStatusTextTex.offset.x = 0.5;
         currentBootStatusTextTex.offset.y = 0.005;
         setBootOpacity(0);
@@ -149,8 +144,7 @@ const BootAnimation = (props: BootAnimationProps) => {
         setLofPosY(1);
 
         setBackgroundFloatingTextShown(true);
-        //4200
-      }, 0);
+      })();
     }
   }, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
 
@@ -276,7 +270,11 @@ const BootAnimation = (props: BootAnimationProps) => {
               opacity={bootState.bootOpacity}
             />
           </sprite>
-          <sprite scale={[0.2, 0.2, 0]} position={[0, -0.8, 0]} renderOrder={-1}>
+          <sprite
+            scale={[0.2, 0.2, 0]}
+            position={[0, -0.8, 0]}
+            renderOrder={-1}
+          >
             <a.spriteMaterial
               attach="material"
               map={bootPurpleSquareTex}

src/components/GateScene/GateMiddleObject/BlueOne.tsx

@@ -1,8 +1,9 @@
-import React, {useEffect, useMemo, useRef} from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import gateBlueBinarySingularOne from "../../../static/sprite/blue_binary_singular_one.png";
 import { a, SpringValue } from "@react-spring/three";
+import sleep from "../../../utils/sleep";
 
 type BlueOneProps = {
   posX: SpringValue<number>;
@@ -46,11 +47,12 @@ const BlueOne = (props: BlueOneProps) => {
       `;
 
   useEffect(() => {
-    setTimeout(() => {
+    (async () => {
+      await sleep(1400);
       if (matRef.current) {
         matRef.current.uniforms.brightnessMultiplier.value = 3.5;
       }
-    }, 1400);
+    })();
   }, []);
 
   return (

src/components/GateScene/GateMiddleObject/BlueZero.tsx

@@ -3,6 +3,7 @@ import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import gateBlueBinarySingularZero from "../../../static/sprite/blue_binary_singular_zero.png";
 import { a, SpringValue } from "@react-spring/three";
+import sleep from "../../../utils/sleep";
 
 type BlueZeroProps = {
   posX: SpringValue<number>;
@@ -47,11 +48,12 @@ const BlueZero = (props: BlueZeroProps) => {
       `;
 
   useEffect(() => {
-    setTimeout(() => {
+    (async () => {
+      await sleep(1400);
       if (matRef.current) {
         matRef.current.uniforms.brightnessMultiplier.value = 3.5;
       }
-    }, 1400);
+    })();
   }, []);
 
   return (

src/components/Images.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useStore } from "../store";
 import { a, useSpring } from "@react-spring/three";
 import dummy from "../static/sprite/dummy.png";
 import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
+import sleep from "../utils/sleep";
 
 const Images = () => {
   const idleNodeImages = useStore((state) => state.idleImages);
@@ -28,6 +29,8 @@ const Images = () => {
     config: { duration: 300 },
   });
 
+  const textureLoader = useMemo(() => new THREE.TextureLoader(), []);
+
   useEffect(() => {
     let images;
     if (currentScene === "media" || currentScene === "tak") {
@@ -61,24 +64,24 @@ const Images = () => {
   }, [currentScene, currentSite, idleNodeImages, nodeImages]);
 
   useEffect(() => {
-    if (mediaPercentageElapsed === 0 && sceneImages[0]) {
-      new THREE.TextureLoader().load(sceneImages[0].default, setActiveImage);
-    }
-    if (mediaPercentageElapsed === 35 && sceneImages[1]) {
-      setImageScaleY(0);
-      setTimeout(() => {
-        new THREE.TextureLoader().load(sceneImages[1].default, setActiveImage);
+    (async () => {
+      if (mediaPercentageElapsed === 0 && sceneImages[0]) {
+        textureLoader.load(sceneImages[0].default, setActiveImage);
+      } else if (mediaPercentageElapsed === 35 && sceneImages[1]) {
+        setImageScaleY(0);
+
+        await sleep(300);
+        textureLoader.load(sceneImages[1].default, setActiveImage);
         setImageScaleY(3.75);
-      }, 300);
-    }
-    if (mediaPercentageElapsed === 70 && sceneImages[2]) {
-      setImageScaleY(0);
-      setTimeout(() => {
-        new THREE.TextureLoader().load(sceneImages[2].default, setActiveImage);
+      } else if (mediaPercentageElapsed === 70 && sceneImages[2]) {
+        setImageScaleY(0);
+
+        await sleep(300);
+        textureLoader.load(sceneImages[2].default, setActiveImage);
         setImageScaleY(3.75);
-      }, 300);
-    }
-  }, [mediaPercentageElapsed, sceneImages]);
+      }
+    })();
+  }, [mediaPercentageElapsed, sceneImages, textureLoader]);
 
   return (
     <a.sprite

src/components/MainScene/LevelSelection.tsx

@@ -12,6 +12,7 @@ import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import { a, useSpring } from "@react-spring/three";
 import usePrevious from "../../hooks/usePrevious";
+import sleep from "../../utils/sleep";
 
 const LevelSelection = () => {
   const levelSelectionFontTex = useLoader(
@@ -48,66 +49,72 @@ const LevelSelection = () => {
   const downArrowRef = useRef<THREE.Sprite>();
 
   useEffect(() => {
-    const generateGeom = (number: number) => {
-      const geometry = new THREE.PlaneBufferGeometry();
+    (async () => {
+      const generateGeom = (number: number) => {
+        const geometry = new THREE.PlaneBufferGeometry();
 
-      const uvAttribute = geometry.attributes.uv;
+        const uvAttribute = geometry.attributes.uv;
 
-      for (let i = 0; i < uvAttribute.count; i++) {
-        let u = uvAttribute.getX(i);
-        let v = uvAttribute.getY(i);
+        for (let i = 0; i < uvAttribute.count; i++) {
+          let u = uvAttribute.getX(i);
+          let v = uvAttribute.getY(i);
 
-        u = (u * 22) / 240 + number / 10;
+          u = (u * 22) / 240 + number / 10;
 
-        uvAttribute.setXY(i, u, v);
+          uvAttribute.setXY(i, u, v);
+        }
+        return geometry;
+      };
+
+      if (subscene === "level_selection") {
+        set({ vertPosY: 0, horizPosX: -0.6 });
+        if (fstNumberRef.current && sndNumberRef.current) {
+          fstNumberRef.current.geometry = generateGeom(
+            parseInt(activeLevel[0])
+          );
+          sndNumberRef.current.geometry = generateGeom(
+            parseInt(activeLevel[1])
+          );
+        }
+      } else if (
+        subscene === "site" &&
+        prevData?.subscene === "level_selection"
+      ) {
+        set({ vertPosY: -2.5, horizPosX: -4 });
       }
-      return geometry;
-    };
+      if (selectedLevel !== prevData?.selectedLevel) {
+        if (fstNumberRef.current && sndNumberRef.current) {
+          fstNumberRef.current.geometry = generateGeom(
+            parseInt(selectedLevel[0])
+          );
+          sndNumberRef.current.geometry = generateGeom(
+            parseInt(selectedLevel[1])
+          );
 
-    if (subscene === "level_selection") {
-      set({ vertPosY: 0, horizPosX: -0.6 });
-      if (fstNumberRef.current && sndNumberRef.current) {
-        fstNumberRef.current.geometry = generateGeom(parseInt(activeLevel[0]));
-        sndNumberRef.current.geometry = generateGeom(parseInt(activeLevel[1]));
-      }
-    } else if (
-      subscene === "site" &&
-      prevData?.subscene === "level_selection"
-    ) {
-      set({ vertPosY: -2.5, horizPosX: -4 });
-    }
-    if (selectedLevel !== prevData?.selectedLevel) {
-      if (fstNumberRef.current && sndNumberRef.current) {
-        fstNumberRef.current.geometry = generateGeom(
-          parseInt(selectedLevel[0])
-        );
-        sndNumberRef.current.geometry = generateGeom(
-          parseInt(selectedLevel[1])
-        );
+          if (
+            prevData?.selectedLevel &&
+            upArrowRef.current &&
+            downArrowRef.current
+          ) {
+            if (selectedLevel > prevData?.selectedLevel) {
+              upArrowRef.current.material.map = upArrowActiveTex;
+              upArrowRef.current.material.needsUpdate = true;
 
-        if (
-          prevData?.selectedLevel &&
-          upArrowRef.current &&
-          downArrowRef.current
-        ) {
-          if (selectedLevel > prevData?.selectedLevel) {
-            upArrowRef.current.material.map = upArrowActiveTex;
-            upArrowRef.current.material.needsUpdate = true;
-            setTimeout(() => {
+              await sleep(100);
               upArrowRef.current!.material.map = upArrowTex;
               upArrowRef.current!.material.needsUpdate = true;
-            }, 100);
-          } else if (selectedLevel < prevData?.selectedLevel) {
-            downArrowRef.current.material.map = downArrowActiveTex;
-            downArrowRef.current.material.needsUpdate = true;
-            setTimeout(() => {
+            } else if (selectedLevel < prevData?.selectedLevel) {
+              downArrowRef.current.material.map = downArrowActiveTex;
+              downArrowRef.current.material.needsUpdate = true;
+
+              await sleep(100);
               downArrowRef.current!.material.map = downArrowTex;
               downArrowRef.current!.material.needsUpdate = true;
-            }, 100);
+            }
           }
         }
       }
-    }
+    })();
   }, [
     activeLevel,
     downArrowActiveTex,

src/components/MainScene/MiddleRing.tsx

@@ -236,7 +236,6 @@ const MiddleRing = () => {
       await sleep(400);
       setPos({ posY: 1.39 });
 
-      // set ring rotation on x axis to craete motion effect
       await sleep(300);
       setRot({ rotX: 0.3 });
 
@@ -246,108 +245,85 @@ const MiddleRing = () => {
       await sleep(150);
       setPos({ posY: -0.11 });
 
-      // rotate it again, set ring noise to 0
       await sleep(350);
       setRot({ rotX: -0.1 });
       setNoiseAmp(0);
 
-      // rotate it back AGAIN (holy fuk psx game)
       await sleep(1000);
       setRot({ rotX: 0.05 });
 
-      // reset value, set noise to 0
       await sleep(300);
       setRot({ rotX: 0, rotZ: 0 });
       setRotating(true);
 
-      // enable noise again
       await sleep(6000);
       setNoiseAmp(0.03);
     };
 
     const moveUp = async () => {
-      // change noise to 0, make the ring bend downwards
-
       await sleep(300);
       setNoiseAmp(0);
       setWobbleAmp(0.2);
 
-      // disable rotation of the ring
       await sleep(400);
       setRotating(false);
 
-      // make the ring bend upwards
       await sleep(500);
       setWobbleAmp(-0.3);
-      // the middle ring stays in place, therefore we animate it
-      // in the same direction as the site, creating that illusion.
       setPos({ posY: -1.39 });
 
       await sleep(300);
-      // reset the ring bend, set the rotation to slightly curve
-      // to replicate a motion effect (since its moving upwards)
-      // and enable rotation again
+
       setWobbleAmp(0);
       setRot({ rotX: -0.2 });
       setRotating(true);
 
-      setTimeout(() => {
-        setPos({ posY: 0.09 });
-      }, 2900);
+      await sleep(1400);
+      setPos({ posY: 0.09 });
 
-      // reset the rotation value to 0
-      setTimeout(() => {
-        setRot({ rotX: 0, rotZ: 0 });
-        setPos({ posY: -0.11 });
-      }, 3150);
+      await sleep(250);
+      setRot({ rotX: 0, rotZ: 0 });
+      setPos({ posY: -0.11 });
 
-      // enable noise again in about 8~ secs
-      setTimeout(() => {
-        setNoiseAmp(0.03);
-      }, 7800);
+      await sleep(3000);
+      setNoiseAmp(0.03);
     };
 
-    const pause = () => {
+    const pause = async () => {
       setPos({ posY: 0.5 });
-      setTimeout(() => {
-        setFakeRingVisible(true);
-      }, 600);
-      setTimeout(() => {
-        // move the hidden (main) ring below, cuz when the pause exists it needs to jump back up
-        // instead of reappearing
-        setPos({ posY: -2.5 });
-      }, 1100);
 
-      setTimeout(() => {
-        setFakeRingVisible(false);
-      }, 3800);
+      await sleep(600);
+      setFakeRingVisible(true);
+
+      await sleep(500);
+      // move the hidden (main) ring below, cuz when the pause exists it needs to jump back up
+      // instead of reappearing
+      setPos({ posY: -2.5 });
+
+      await sleep(2700);
+      setFakeRingVisible(false);
     };
 
-    const unpause = () => {
-      setTimeout(() => {
-        setRot({ rotX: -0.4 });
-        setRotating(true);
-      }, 300);
+    const unpause = async () => {
+      await sleep(300);
+      setRot({ rotX: -0.4 });
+      setRotating(true);
 
-      setTimeout(() => {
-        setPos({ posY: -0.4 });
-      }, 700);
+      await sleep(400);
+      setPos({ posY: -0.4 });
 
-      // reset the rotation value to 0
-      setTimeout(() => {
-        setRot({ rotZ: 0, rotX: 0 });
-        setPos({ posY: -0.11 });
-      }, 950);
+      await sleep(250);
+      setRot({ rotZ: 0, rotX: 0 });
+      setPos({ posY: -0.11 });
     };
 
-    const afterWordSelection = () => {
+    const afterWordSelection = async () => {
       setRotating(true);
       setRot({ rotX: -0.4 });
 
       // reset the rotation value to 0
-      setTimeout(() => {
-        setRot({ rotZ: 0, rotX: 0 });
-      }, 3100);
+      await sleep(3100);
+      setRot({ rotZ: 0, rotX: 0 });
     };
 
     if (prevData?.siteRotY !== undefined && prevData?.siteRotY !== siteRotY) {

src/components/MainScene/MiddleRing/MiddleRingPart.tsx

@@ -4,6 +4,7 @@ import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import { a, useSpring } from "@react-spring/three";
 import { useStore } from "../../../store";
+import sleep from "../../../utils/sleep";
 
 type MiddleRingPartProps = {
   position: number[];
@@ -27,30 +28,28 @@ const MiddleRingPart = (props: MiddleRingPartProps) => {
   const subscene = useStore((state) => state.mainSubscene);
 
   useEffect(() => {
-    if (subscene === "pause") {
+    (async () => {
       const posX = props.position[0];
       const posZ = props.position[2];
-      setTimeout(() => {
-        setPos({ posX: posX / 0.9, posZ: posZ / 0.9 });
-      }, 300);
-      setTimeout(() => {
-        setPos({ posX: posX, posZ: posZ });
-      }, 700);
-      setTimeout(() => {
-        setPos({ posX: posX / 0.9, posZ: posZ / 0.9 });
-      }, 1100);
-      setTimeout(() => {
-        setPos({ posX: posX, posZ: posZ });
-      }, 1500);
 
-      setTimeout(() => {
-        setPos({ posX: posX / 0.2, posZ: posZ / 0.2 });
-      }, 2300);
+      await sleep(300);
+      setPos({ posX: posX / 0.9, posZ: posZ / 0.9 });
 
-      setTimeout(() => {
-        setPos({ posX: posX, posZ: posZ });
-      }, 3000);
-    }
+      await sleep(400);
+      setPos({ posX: posX, posZ: posZ });
+
+      await sleep(400);
+      setPos({ posX: posX / 0.9, posZ: posZ / 0.9 });
+
+      await sleep(400);
+      setPos({ posX: posX, posZ: posZ });
+
+      await sleep(800);
+      setPos({ posX: posX / 0.2, posZ: posZ / 0.2 });
+
+      await sleep(700);
+      setPos({ posX: posX, posZ: posZ });
+    })();
   }, [props.position, setPos, subscene]);
 
   return (

src/components/MainScene/Site/ActiveLevelNodes.tsx

@@ -4,6 +4,7 @@ import node_positions from "../../../resources/node_positions.json";
 import { useStore } from "../../../store";
 import { NodeDataType, SiteType } from "../Site";
 import usePrevious from "../../../hooks/usePrevious";
+import sleep from "../../../utils/sleep";
 
 type ActiveLevelNodesProps = {
   visibleNodes: SiteType;
@@ -19,24 +20,25 @@ const ActiveLevelNodes = memo((props: ActiveLevelNodesProps) => {
   );
 
   useEffect(() => {
-    if (
-      prevData?.activeLevel !== activeLevel &&
-      prevData?.activeLevel !== undefined
-    ) {
-      const prevLevel = parseInt(prevData?.activeLevel);
-      const newLevel = parseInt(activeLevel);
-      if (prevLevel - 1 === newLevel || prevLevel + 1 === newLevel) {
-        setVisibleNodes(
-          props.visibleNodes[activeLevel as keyof typeof props.visibleNodes]
-        );
-      } else {
-        setTimeout(() => {
+    (async () => {
+      if (
+        prevData?.activeLevel !== activeLevel &&
+        prevData?.activeLevel !== undefined
+      ) {
+        const prevLevel = parseInt(prevData?.activeLevel);
+        const newLevel = parseInt(activeLevel);
+        if (prevLevel - 1 === newLevel || prevLevel + 1 === newLevel) {
           setVisibleNodes(
             props.visibleNodes[activeLevel as keyof typeof props.visibleNodes]
           );
-        }, 1500);
+        } else {
+          await sleep(1500);
+          setVisibleNodes(
+            props.visibleNodes[activeLevel as keyof typeof props.visibleNodes]
+          );
+        }
       }
-    }
+    })();
   }, [activeLevel, prevData?.activeLevel, props, props.visibleNodes]);
 
   return (

src/components/MainScene/Site/InactiveLevelNodes.tsx

@@ -5,6 +5,7 @@ import { SiteType } from "../Site";
 import InactiveLevelNode from "./InactiveLevelNode";
 import usePrevious from "../../../hooks/usePrevious";
 import { generateInactiveNodes } from "../../../utils/node-utils";
+import sleep from "../../../utils/sleep";
 
 type ActiveLevelNodesProps = {
   visibleNodes: SiteType;
@@ -19,22 +20,25 @@ const InactiveLevelNodes = memo((props: ActiveLevelNodesProps) => {
   );
 
   useEffect(() => {
-    if (
-      prevData?.activeLevel !== activeLevel &&
-      prevData?.activeLevel !== undefined
-    ) {
-      const prevLevel = parseInt(prevData?.activeLevel);
-      const newLevel = parseInt(activeLevel);
-      if (prevLevel - 1 === newLevel || prevLevel + 1 === newLevel) {
-        setVisibleNodes(generateInactiveNodes(props.visibleNodes, activeLevel));
-      } else {
-        setTimeout(() => {
+    (async () => {
+      if (
+        prevData?.activeLevel !== activeLevel &&
+        prevData?.activeLevel !== undefined
+      ) {
+        const prevLevel = parseInt(prevData?.activeLevel);
+        const newLevel = parseInt(activeLevel);
+        if (prevLevel - 1 === newLevel || prevLevel + 1 === newLevel) {
           setVisibleNodes(
             generateInactiveNodes(props.visibleNodes, activeLevel)
           );
-        }, 1500);
+        } else {
+          await sleep(1500);
+          setVisibleNodes(
+            generateInactiveNodes(props.visibleNodes, activeLevel)
+          );
+        }
       }
-    }
+    })();
   }, [activeLevel, prevData?.activeLevel, props.visibleNodes]);
 
   return (

src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx

@@ -5,9 +5,12 @@ import node_explosion_line_positions from "../../../../resources/node_explosion_
 import { useFrame } from "react-three-fiber";
 import GoldNode from "./NodeExplosion/GoldNode";
 import { useStore } from "../../../../store";
+import sleep from "../../../../utils/sleep";
 
 const NodeExplosion = () => {
-  const explosionVisible = useStore((state) => state.activeNodeAttributes.exploding);
+  const explosionVisible = useStore(
+    (state) => state.activeNodeAttributes.exploding
+  );
 
   const [shouldAnimate, setShouldAnimate] = useState(false);
   const [shouldRotate, setShouldRotate] = useState(false);
@@ -36,16 +39,18 @@ const NodeExplosion = () => {
   });
 
   useEffect(() => {
-    if (explosionVisible) {
-      setShouldRotate(true);
-      setTimeout(() => {
+    (async () => {
+      if (explosionVisible) {
+        setShouldRotate(true);
+
+        await sleep(1100);
         setShouldAnimate(true);
-      }, 1100);
-    } else {
-      setShouldAnimate(false);
-      setShouldRotate(false);
-      setCurrentFrame(1);
-    }
+      } else {
+        setShouldAnimate(false);
+        setShouldRotate(false);
+        setCurrentFrame(1);
+      }
+    })();
   }, [explosionVisible]);
 
   return explosionVisible ? (

src/components/MainScene/Site/NodeAnimations/NodeRip.tsx

@@ -3,6 +3,7 @@ import TriangleNode from "./NodeRip/TriangleNode";
 import { useStore } from "../../../../store";
 import RipLine from "./NodeRip/RipLine";
 import { useFrame } from "react-three-fiber";
+import sleep from "../../../../utils/sleep";
 
 const NodeRip = () => {
   const nodeShrinking = useStore(
@@ -52,14 +53,15 @@ const NodeRip = () => {
   });
 
   useEffect(() => {
-    if (nodeShrinking) {
-      setTimeout(() => {
+    (async () => {
+      if (nodeShrinking) {
+        await sleep(1150);
         setShouldAnimate(true);
-      }, 1150);
-    } else {
-      setShouldAnimate(false);
-      setCurrentFrame(1);
-    }
+      } else {
+        setShouldAnimate(false);
+        setCurrentFrame(1);
+      }
+    })();
   }, [nodeShrinking]);
 
   return (

src/components/MainScene/Starfield.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, memo, useMemo } from "react";
 import Star from "./Starfield/Star";
+import sleep from "../../utils/sleep";
 
 type StarfieldProps = {
   shouldIntro: boolean;
@@ -42,9 +43,10 @@ const Starfield = memo((props: StarfieldProps) => {
   const [introVisible, setIntroVisible] = useState(true);
 
   useEffect(() => {
-    setTimeout(() => {
+    (async () => {
+      await sleep(3200);
       setIntroVisible(false);
-    }, 3200);
+    })();
   }, []);
 
   return (

src/components/TextRenderer/GreenTextRenderer.tsx

@@ -3,19 +3,15 @@ import * as THREE from "three";
 import greenFont from "../../static/sprite/white_and_green_texture.png";
 import medium_font_json from "../../resources/font_data/medium_font.json";
 import { a } from "@react-spring/three";
-import React, { memo, useCallback, useEffect, useMemo } from "react";
+import React, { memo, useMemo } from "react";
 import { useStore } from "../../store";
 
 const GreenTextRenderer = memo(() => {
-  const textToRender = useStore(
-    useCallback(
-      (state) =>
-        (state.currentScene === "main"
-          ? state.activeNode.title
-          : state.activeNode.node_name
-        ).split(""),
-      []
-    )
+  const textToRender = useStore((state) =>
+    (state.currentScene === "main"
+      ? state.activeNode.title
+      : state.activeNode.node_name
+    ).split("")
   );
 
   const colorTexture = useLoader(THREE.TextureLoader, greenFont);

src/components/TextRenderer/MainYellowTextAnimator.tsx

@@ -4,8 +4,9 @@ import { a, useTrail } from "@react-spring/three";
 import SiteBigLetter from "./SiteBigLetter";
 import usePrevious from "../../hooks/usePrevious";
 import { getNodeHud } from "../../utils/node-utils";
+import sleep from "../../utils/sleep";
 
-const YellowTextRenderer = (props: { visible?: boolean }) => {
+const MainYellowTextAnimator = (props: { visible?: boolean }) => {
   const activeNode = useStore((state) => state.activeNode);
   const subscene = useStore((state) => state.mainSubscene);
   const prevData = usePrevious({ subscene });
@@ -21,25 +22,23 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
   }));
 
   useEffect(() => {
-    const hud = getNodeHud(activeNode.matrixIndices!);
+    (async () => {
+      const hud = getNodeHud(activeNode.matrixIndices!);
 
-    if (subscene === "level_selection") {
-      setTimeout(() => {
+      if (subscene === "level_selection") {
+        await sleep(400);
         set({ posX: -0.02, posY: 0.005 });
-      }, 400);
 
-      setTimeout(() => {
+        await sleep(600);
         setText("JumpTo".split(""));
-      }, 1000);
-    } else {
-      setTimeout(() => {
+      } else {
+        await sleep(400);
         set({ posX: hud.big_text[0], posY: hud.big_text[1] });
-      }, 400);
 
-      setTimeout(() => {
+        await sleep(600);
         setText(activeNode.node_name.split(""));
-      }, 1000);
-    }
+      }
+    })();
   }, [activeNode, prevData?.subscene, set, subscene]);
 
   return (
@@ -59,4 +58,4 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
   );
 };
 
-export default YellowTextRenderer;
+export default MainYellowTextAnimator;

src/components/TextRenderer/MediaYellowTextAnimator.tsx

@@ -1,7 +1,8 @@
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, { memo, useEffect, useState } from "react";
 import { useStore } from "../../store";
 import { a, useTrail } from "@react-spring/three";
 import SiteBigLetter from "./SiteBigLetter";
+import sleep from "../../utils/sleep";
 
 const MediaYellowTextAnimator = memo(() => {
   const [lastLeftComponent, setLastLeftComponent] = useState("play");
@@ -14,40 +15,37 @@ const MediaYellowTextAnimator = memo(() => {
   });
 
   const activeMediaComponent = useStore(
-    useCallback(
-      (state) =>
-        state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
-          state.mediaComponentMatrixIndices.sideIdx === 0
-            ? state.mediaComponentMatrixIndices.leftSideIdx
-            : state.mediaComponentMatrixIndices.rightSideIdx
-        ],
-      []
-    )
+    (state) =>
+      state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
+        state.mediaComponentMatrixIndices.sideIdx === 0
+          ? state.mediaComponentMatrixIndices.leftSideIdx
+          : state.mediaComponentMatrixIndices.rightSideIdx
+      ]
   );
 
   useEffect(() => {
-    if (
-      (activeMediaComponent === "play" || activeMediaComponent === "exit") &&
-      activeMediaComponent !== lastLeftComponent
-    ) {
-      setLastLeftComponent(activeMediaComponent);
-      setTimeout(() => {
+    (async () => {
+      if (
+        (activeMediaComponent === "play" || activeMediaComponent === "exit") &&
+        activeMediaComponent !== lastLeftComponent
+      ) {
+        setLastLeftComponent(activeMediaComponent);
+        await sleep(400);
         if (activeMediaComponent === "play") {
           setPosY(0.05);
         } else {
           setPosY(-0.08);
         }
-      }, 400);
 
-      setTimeout(() => {
+        await sleep(600);
         setTextArr(
           (
             activeMediaComponent.charAt(0).toUpperCase() +
             activeMediaComponent.slice(1)
           ).split("")
         );
-      }, 1000);
-    }
+      }
+    })();
   }, [activeMediaComponent, lastLeftComponent]);
 
   useEffect(() => {

src/components/TextRenderer/SiteBigLetter.tsx

@@ -4,9 +4,10 @@ import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 import orange_font_json from "../../resources/font_data/big_font.json";
 import { a, useSpring } from "@react-spring/three";
-import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import React, { memo, useEffect, useMemo, useState } from "react";
 import { useStore } from "../../store";
 import usePrevious from "../../hooks/usePrevious";
+import sleep from "../../utils/sleep";
 
 const SiteBigLetter = memo((props: { letter: string; letterIdx: number }) => {
   const [color, setColor] = useState("yellow");
@@ -77,16 +78,14 @@ const SiteBigLetter = memo((props: { letter: string; letterIdx: number }) => {
 
   const activeNode = useStore((state) => state.activeNode);
   const activeMediaComponent = useStore(
-    useCallback(
-      (state) =>
-        state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
-          state.mediaComponentMatrixIndices.sideIdx === 0
-            ? state.mediaComponentMatrixIndices.leftSideIdx
-            : state.mediaComponentMatrixIndices.rightSideIdx
-        ],
-      []
-    )
+    (state) =>
+      state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
+        state.mediaComponentMatrixIndices.sideIdx === 0
+          ? state.mediaComponentMatrixIndices.leftSideIdx
+          : state.mediaComponentMatrixIndices.rightSideIdx
+      ]
   );
+
   const subscene = useStore((state) => state.mainSubscene);
   const scene = useStore((state) => state.currentScene);
   const prevData = usePrevious({ scene, subscene });
@@ -98,36 +97,39 @@ const SiteBigLetter = memo((props: { letter: string; letterIdx: number }) => {
   }));
 
   useEffect(() => {
-    if (
-      subscene === "pause" ||
-      (subscene === "site" && prevData?.subscene === "not_found") ||
-      (subscene === "site" && prevData?.subscene === "pause")
-    )
-      return;
-    if (scene === "main" && prevData?.scene === "main") {
-      set({ x: 0 });
-      if (subscene === "level_selection") {
-        setColor("orange");
-      } else {
-        if (color === "orange") {
-          setColor("yellow");
+    (async () => {
+      if (
+        subscene === "pause" ||
+        (subscene === "site" && prevData?.subscene === "not_found") ||
+        (subscene === "site" && prevData?.subscene === "pause")
+      )
+        return;
+      if (scene === "main" && prevData?.scene === "main") {
+        set({ x: 0 });
+        if (subscene === "level_selection") {
+          setColor("orange");
+        } else {
+          if (color === "orange") {
+            setColor("yellow");
+          }
+        }
+        await sleep(1200);
+
+        set({ x: props.letterIdx + 0.3 });
+      } else if (scene === "media") {
+        if (
+          (activeMediaComponent === "play" ||
+            activeMediaComponent === "exit") &&
+          activeMediaComponent !== lastMediaLeftComponent
+        ) {
+          setLastMediaLeftComponent(activeMediaComponent);
+          set({ x: 0 });
+
+          await sleep(1200);
+          set({ x: props.letterIdx + 0.3 });
         }
       }
-      setTimeout(() => {
-        set({ x: props.letterIdx + 0.3 });
-      }, 1200);
-    } else if (scene === "media") {
-      if (
-        (activeMediaComponent === "play" || activeMediaComponent === "exit") &&
-        activeMediaComponent !== lastMediaLeftComponent
-      ) {
-        setLastMediaLeftComponent(activeMediaComponent);
-        set({ x: 0 });
-        setTimeout(() => {
-          set({ x: props.letterIdx + 0.3 });
-        }, 1200);
-      }
-    }
+    })();
   }, [
     activeNode,
     props.letterIdx,

src/core/setters/gameLoader.ts

@@ -1,4 +1,5 @@
 import { useStore } from "../../store";
+import sleep from "../../utils/sleep";
 
 const gameLoader = (eventState: any) => {
   const loadSiteSaveState = useStore.getState().loadSiteSaveState;
@@ -13,14 +14,13 @@ const gameLoader = (eventState: any) => {
       case "pause_load_select":
       case "load_data_yes":
         return {
-          action: () => {
+          action: async () => {
             // todo check if data exists
             setLoadSuccessful(true);
 
-            setTimeout(() => {
-              //todo actually load
-              setLoadSuccessful(undefined);
-            }, 1200);
+            await sleep(1200);
+            //todo actually load
+            setLoadSuccessful(undefined);
           },
         };
     }
@@ -28,9 +28,7 @@ const gameLoader = (eventState: any) => {
 
   const { action } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    action();
-  }
+  action && action();
 };
 
 export default gameLoader;

src/core/setters/gameSaver.ts

@@ -1,4 +1,5 @@
 import { getSiteState, useStore } from "../../store";
+import sleep from "../../utils/sleep";
 
 const gameSaver = (eventState: any) => {
   const setSiteSaveState = useStore.getState().setSiteSaveState;
@@ -13,13 +14,12 @@ const gameSaver = (eventState: any) => {
         };
       case "pause_save_select":
         return {
-          action: () => {
+          action: async () => {
             setSaveSuccessful(true);
 
-            setTimeout(() => {
-              //todo actually save
-              setSaveSuccessful(undefined);
-            }, 1200);
+            await sleep(1200);
+            //todo actually save
+            setSaveSuccessful(undefined);
           },
         };
     }
@@ -27,9 +27,7 @@ const gameSaver = (eventState: any) => {
 
   const { action } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    action();
-  }
+  action && action();
 };
 
 export default gameSaver;

src/core/setters/main/idleManager.ts

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

src/core/setters/main/level_selection/levelSelectionManager.ts

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

src/core/setters/main/mainSubsceneManager.ts

@@ -1,6 +1,7 @@
 import { useStore } from "../../../store";
+import sleep from "../../../utils/sleep";
 
-const mainSubsceneManager = (eventState: any) => {
+const mainSubsceneManager = async (eventState: any) => {
   const setMainSubscene = useStore.getState().setMainSubscene;
 
   const dispatchAction = (eventState: { event: string }) => {
@@ -8,7 +9,6 @@ const mainSubsceneManager = (eventState: any) => {
       case "word_node_not_found":
         return {
           action: () => setMainSubscene("not_found"),
-          delay: 0,
         };
       case "level_selection_back":
       case "select_level_up":
@@ -16,23 +16,21 @@ const mainSubsceneManager = (eventState: any) => {
       case "exit_not_found":
         return {
           action: () => setMainSubscene("site"),
-          delay: 0,
         };
       case "toggle_level_selection":
         return {
           action: () => setMainSubscene("level_selection"),
-          delay: 0,
         };
       case "pause_game":
         return {
           action: () => setMainSubscene("pause"),
-          value: "pause",
-          delay: 0,
         };
       case "pause_exit_select":
       case "pause_change_select":
         return {
-          action: () => setMainSubscene("site"),
+          action: () => {
+            setMainSubscene("site");
+          },
           delay: 1800,
         };
     }
@@ -40,11 +38,8 @@ const mainSubsceneManager = (eventState: any) => {
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    setTimeout(() => {
-      action();
-    }, delay);
-  }
+  delay && (await sleep(delay));
+  action && action();
 };
 
 export default mainSubsceneManager;

src/core/setters/main/pause/pauseManager.ts

@@ -1,4 +1,5 @@
 import { useStore } from "../../../../store";
+import sleep from "../../../../utils/sleep";
 
 type PauseManagerProps = { event: string; pauseMatrixIdx: number };
 
@@ -24,11 +25,11 @@ const pauseManager = (eventState: any) => {
         };
       case "show_permission_denied":
         return {
-          action: () => {
+          action: async () => {
             setPermissionDenied(true);
-            setTimeout(() => {
-              setPermissionDenied(false);
-            }, 1200);
+
+            await sleep(1200);
+            setPermissionDenied(false);
           },
         };
       case "pause_about_select":
@@ -45,9 +46,7 @@ const pauseManager = (eventState: any) => {
   };
   const { action } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    action();
-  }
+  action && action();
 };
 
 export default pauseManager;

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

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

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

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

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

@@ -1,7 +1,8 @@
 import { useStore } from "../../../../store";
 import { NodeDataType } from "../../../../components/MainScene/Site";
+import sleep from "../../../../utils/sleep";
 
-const nodeManager = (eventState: any) => {
+const nodeManager = async (eventState: any) => {
   const setActiveNode = useStore.getState().setNode;
   const setActiveNodePos = useStore.getState().setNodePos;
   const setActiveNodeRot = useStore.getState().setNodeRot;
@@ -16,136 +17,117 @@ const nodeManager = (eventState: any) => {
     z: x * Math.sin(rotation) + z * Math.cos(rotation),
   });
 
-  const animateActiveNodeThrow = (siteRotY: number) => {
-    setActiveNodeAttributes(true, "interactedWith");
-
+  const animateActiveNodeThrow = async (siteRotY: number) => {
     const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
     const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
     const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
     const fourthCoordSet = calculateCoordsBasedOnRotation(0, 2, siteRotY);
 
+    setActiveNodeAttributes(true, "interactedWith");
+
     setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
 
-    setTimeout(() => {
-      setActiveNodePos([sndCoordSet.x, 0, sndCoordSet.z]);
-    }, 800);
-    setTimeout(() => {
-      setActiveNodePos([thirdCoordSet.x, 0, sndCoordSet.z]);
-      setActiveNodeRot([0, 0, -0.005]);
-    }, 2600);
-    setTimeout(() => {
-      setActiveNodePos([fourthCoordSet.x, 0, fourthCoordSet.z]);
-      setActiveNodeRot([0, 0, -0.5]);
-    }, 2700);
+    await sleep(800);
+    setActiveNodePos([sndCoordSet.x, 0, sndCoordSet.z]);
 
-    setTimeout(() => {
-      setActiveNodeRot([0, 0, 0]);
-      setActiveNodeAttributes(false, "interactedWith");
-    }, 3800);
+    await sleep(1800);
+    setActiveNodePos([thirdCoordSet.x, 0, sndCoordSet.z]);
+    setActiveNodeRot([0, 0, -0.005]);
+
+    await sleep(100);
+    setActiveNodePos([fourthCoordSet.x, 0, fourthCoordSet.z]);
+    setActiveNodeRot([0, 0, -0.5]);
+
+    await sleep(1100);
+    setActiveNodeRot([0, 0, 0]);
+    setActiveNodeAttributes(false, "interactedWith");
   };
 
-  const animateNodeKnock = (siteRotY: number) => {
-    setActiveNodeAttributes(true, "interactedWith");
-
+  const animateNodeKnock = async (siteRotY: number) => {
     const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
 
+    setActiveNodeAttributes(true, "interactedWith");
+
     setActiveNodePos([fstCoordSet.x, -0.6, fstCoordSet.z]);
 
-    setTimeout(() => {
-      setActiveNodeAttributes(false, "interactedWith");
-    }, 2500);
+    await sleep(2500);
+    setActiveNodeAttributes(false, "interactedWith");
   };
 
-  const animateNodeKnockAndFall = (siteRotY: number) => {
-    setActiveNodeAttributes(true, "interactedWith");
-
+  const animateNodeKnockAndFall = async (siteRotY: number) => {
     const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
 
+    setActiveNodeAttributes(true, "interactedWith");
+
     setActiveNodePos([fstCoordSet.x, -0.6, fstCoordSet.z]);
 
-    setTimeout(() => {
-      setActiveNodeAttributes(false, "visible");
-    }, 2300);
+    await sleep(2300);
+    setActiveNodeAttributes(false, "visible");
 
-    setTimeout(() => {
-      setActiveNodeAttributes(false, "interactedWith");
-    }, 2500);
+    await sleep(200);
+    setActiveNodeAttributes(false, "interactedWith");
 
-    setTimeout(() => {
-      setActiveNodeAttributes(true, "visible");
-    }, 3200);
+    await sleep(700);
+    setActiveNodeAttributes(true, "visible");
   };
 
-  const animateNodeTouchAndScare = (siteRotY: number) => {
-    setActiveNodeAttributes(true, "interactedWith");
-
+  const animateNodeTouchAndScare = async (siteRotY: number) => {
     const fstCoordSet = calculateCoordsBasedOnRotation(-0.6, 0.2, siteRotY);
 
-    setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
-
-    setTimeout(() => {
-      setActiveNodeAttributes(true, "exploding");
-      setActiveNodeAttributes(false, "visible");
-    }, 1200);
-
-    setTimeout(() => {
-      setActiveNodeAttributes(false, "interactedWith");
-      setActiveNodeRot([0, 0, 0]);
-    }, 1400);
-
-    setTimeout(() => {
-      setActiveNodeAttributes(false, "exploding");
-    }, 3150);
-
-    setTimeout(() => {
-      setActiveNodeAttributes(true, "visible");
-    }, 3500);
-  };
-
-  const animateShrinkAndRip = (siteRotY: number) => {
     setActiveNodeAttributes(true, "interactedWith");
 
+    setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
+
+    await sleep(1200);
+    setActiveNodeAttributes(true, "exploding");
+    setActiveNodeAttributes(false, "visible");
+
+    await sleep(200);
+    setActiveNodeAttributes(false, "interactedWith");
+    setActiveNodeRot([0, 0, 0]);
+
+    await sleep(1750);
+    setActiveNodeAttributes(false, "exploding");
+
+    await sleep(350);
+    setActiveNodeAttributes(true, "visible");
+  };
+
+  const animateShrinkAndRip = async (siteRotY: number) => {
     const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
     const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
     const thirdCoordSet = calculateCoordsBasedOnRotation(0, 0.2, siteRotY);
 
+    setActiveNodeAttributes(true, "interactedWith");
+
     setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
 
-    setTimeout(() => {
-      setActiveNodePos([sndCoordSet.x, 0, sndCoordSet.z]);
-    }, 800);
+    await sleep(800);
+    setActiveNodePos([sndCoordSet.x, 0, sndCoordSet.z]);
 
-    setTimeout(() => {
-      setActiveNodePos([thirdCoordSet.x, -0.4, thirdCoordSet.z]);
-    }, 2800);
+    await sleep(2000);
+    setActiveNodePos([thirdCoordSet.x, -0.4, thirdCoordSet.z]);
 
-    setTimeout(() => {
-      setActiveNodeAttributes(true, "shrinking");
-    }, 3000);
+    await sleep(200);
+    setActiveNodeAttributes(true, "shrinking");
 
-    setTimeout(() => {
-      setActiveNodePos([thirdCoordSet.x, -1.5, thirdCoordSet.z]);
-    }, 3200);
+    await sleep(200);
+    setActiveNodePos([thirdCoordSet.x, -1.5, thirdCoordSet.z]);
 
-    setTimeout(() => {
-      setActiveNodeAttributes(false, "visible");
-    }, 3500);
+    await sleep(300);
+    setActiveNodeAttributes(false, "visible");
 
-    setTimeout(() => {
-      setActiveNodeAttributes(false, "interactedWith");
-      setActiveNodeAttributes(false, "shrinking");
-      setActiveNodeRot([0, 0, 0]);
-    }, 6400);
+    await sleep(2900);
+    setActiveNodeAttributes(false, "interactedWith");
+    setActiveNodeAttributes(false, "shrinking");
+    setActiveNodeRot([0, 0, 0]);
 
-    setTimeout(() => {
-      setActiveNodeAttributes(true, "visible");
-    }, 7500);
+    await sleep(1100);
+    setActiveNodeAttributes(true, "visible");
   };
 
-  const updateActiveNode = (node: NodeDataType, delay?: number) => {
-    setTimeout(() => {
-      setActiveNode(node);
-    }, delay);
+  const updateActiveNode = async (node: NodeDataType) => {
+    setActiveNode(node);
   };
 
   const dispatchAction = (eventState: any) => {
@@ -169,7 +151,8 @@ const nodeManager = (eventState: any) => {
       case "select_level_up":
       case "select_level_down":
         return {
-          action: () => updateActiveNode(eventState.node, 3900),
+          action: () => updateActiveNode(eventState.node),
+          delay: 3900,
         };
       case "change_node":
       case "media_fstWord_select":
@@ -197,11 +180,10 @@ const nodeManager = (eventState: any) => {
     }
   };
 
-  const { action } = { ...dispatchAction(eventState) };
+  const { action, delay } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    action();
-  }
+  delay && (await sleep(delay));
+  action && action();
 };
 
 export default nodeManager;

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

@@ -1,6 +1,7 @@
 import { useStore } from "../../../../store";
+import sleep from "../../../../utils/sleep";
 
-const siteManager = (eventState: any) => {
+const siteManager = async (eventState: any) => {
   const setRotY = useStore.getState().setSiteRotY;
   const setRotX = useStore.getState().setSiteRotX;
   const setOldRot = useStore.getState().setOldSiteRot;
@@ -18,30 +19,30 @@ const siteManager = (eventState: any) => {
       case "media_sndWord_select":
       case "media_thirdWord_select":
         return {
-          action: () => setRotY(eventState.siteRotY),
+          action: async () => {
+            setRotY(eventState.siteRotY);
+          },
           delay: 1100,
         };
       case "pause_game":
         return {
-          action: () => setRotX(Math.PI / 2),
+          action: () => {
+            setRotX(Math.PI / 2);
+          },
           delay: 3600,
         };
       case "pause_exit_select":
       case "pause_change_select":
         return {
           action: () => setRotX(0),
-          delay: 0,
         };
     }
   };
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    setTimeout(() => {
-      action();
-    }, delay);
-  }
+  delay && (await sleep(delay));
+  action && action();
 };
 
 export default siteManager;

src/core/setters/media/mediaManager.ts

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

src/core/setters/progressManager.ts

@@ -1,7 +1,8 @@
 import { useStore } from "../../store";
 import { NodeDataType } from "../../components/MainScene/Site";
+import sleep from "../../utils/sleep";
 
-const progressManager = (eventState: any) => {
+const progressManager = async (eventState: any) => {
   const updateNodeViewed = useStore.getState().setNodeViewed;
   const setPolytanPartUnlocked = useStore.getState().setPolytanPartUnlocked;
   const incrementGateLvl = useStore.getState().incrementGateLvl;
@@ -43,7 +44,6 @@ const progressManager = (eventState: any) => {
             });
             incrementGateLvl();
           },
-          delay: 0,
         };
       case "throw_node_polytan":
       case "rip_node_polytan":
@@ -59,7 +59,6 @@ const progressManager = (eventState: any) => {
             });
             setPolytanPartUnlocked(eventState.bodyPart);
           },
-          delay: 0,
         };
       case "media_play_select":
         return {
@@ -72,7 +71,6 @@ const progressManager = (eventState: any) => {
                 )
               ),
             }),
-          delay: 0,
         };
       case "sskn_ok_select":
         return {
@@ -87,18 +85,14 @@ const progressManager = (eventState: any) => {
             });
             incrementSSknLvl();
           },
-          delay: 0,
         };
     }
   };
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    setTimeout(() => {
-      action();
-    }, delay);
-  }
+  delay && (await sleep(delay));
+  action && action();
 };
 
 export default progressManager;

src/core/setters/promptManager.ts

@@ -1,4 +1,5 @@
 import { useStore } from "../../store";
+import sleep from "../../utils/sleep";
 
 const promptManager = (eventState: any) => {
   const setComponentMatrixIdx = useStore.getState().setPromptComponentMatrixIdx;
@@ -27,10 +28,9 @@ const promptManager = (eventState: any) => {
         return { action: () => exitAndResetPrompt() };
       case "main_menu_load_data_select":
         return {
-          action: () => {
-            setTimeout(() => {
-              setPromptVisible(true);
-            }, 500);
+          action: async () => {
+            await sleep(500);
+            setPromptVisible(true);
           },
         };
     }
@@ -38,9 +38,7 @@ const promptManager = (eventState: any) => {
 
   const { action } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    action();
-  }
+  action && action()
 };
 
 export default promptManager;

src/core/setters/sceneManager.ts

@@ -1,24 +1,26 @@
 import { useStore } from "../../store";
+import sleep from "../../utils/sleep";
 
-const sceneManager = (eventState: any) => {
+const sceneManager = async (eventState: any) => {
   const dispatchAction = (eventState: { event: string; scene: string }) => {
     switch (eventState.event) {
       case "throw_node_sskn":
       case "rip_node_sskn":
         return {
-          action: () =>
+          action: () => {
             useStore.setState({
-              currentScene: eventState.scene,
+              currentScene: "sskn",
               intro: false,
               ssknComponentMatrixIdx: 0,
               ssknLoading: false,
-            }),
+            });
+          },
           delay: eventState.event === "throw_node_sskn" ? 3450 : 6000,
         };
       case "throw_node_media":
       case "rip_node_media":
         return {
-          action: () =>
+          action: () => {
             useStore.setState({
               currentScene: eventState.scene,
               intro: false,
@@ -28,23 +30,26 @@ const sceneManager = (eventState: any) => {
                 leftSideIdx: 0,
                 rightSideIdx: 0,
               },
-            }),
+            });
+          },
           delay: eventState.event === "throw_node_media" ? 3450 : 6000,
         };
       case "throw_node_gate":
       case "throw_node_tak":
       case "throw_node_polytan":
         return {
-          action: () =>
-            useStore.setState({ currentScene: eventState.scene, intro: false }),
+          action: () => {
+            useStore.setState({ currentScene: eventState.scene, intro: false });
+          },
           delay: 3450,
         };
       case "rip_node_gate":
       case "rip_node_tak":
       case "rip_node_polytan":
         return {
-          action: () =>
-            useStore.setState({ currentScene: eventState.scene, intro: false }),
+          action: () => {
+            useStore.setState({ currentScene: eventState.scene, intro: false });
+          },
           delay: 6000,
         };
       case "media_exit_select":
@@ -56,12 +61,12 @@ const sceneManager = (eventState: any) => {
         return {
           action: () =>
             useStore.setState({ currentScene: "main", intro: false }),
-          delay: 0,
         };
       case "sskn_ok_select":
         return {
-          action: () =>
-            useStore.setState({ currentScene: "main", intro: false }),
+          action: () => {
+            useStore.setState({ currentScene: "main", intro: false });
+          },
           delay: 6000,
         };
       case "pause_change_select":
@@ -69,34 +74,28 @@ const sceneManager = (eventState: any) => {
         return {
           action: () =>
             useStore.setState({ currentScene: "change_disc", intro: true }),
-          delay: 0,
         };
       case "play_idle_media":
         return {
           action: () =>
             useStore.setState({ currentScene: "idle_media", intro: false }),
-          delay: 0,
         };
       case "start_new_game":
         return {
           action: () => useStore.setState({ currentScene: "main" }),
-          delay: 0,
         };
       case "end_end_select":
         return {
           action: () => useStore.setState({ currentScene: "boot" }),
-          delay: 0,
         };
     }
   };
 
   const { action, delay } = { ...dispatchAction(eventState) };
 
-  if (action) {
-    setTimeout(() => {
-      action();
-    }, delay);
-  }
+  delay && (await sleep(delay));
+
+  action && action();
 };
 
 export default sceneManager;

src/core/setters/soundManager.ts

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

src/core/setters/sskn/ssknManager.ts

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

src/scenes/BootScene.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import BootAccela from "../components/BootScene/BootAccela";
 import BootAnimation from "../components/BootScene/BootAnimation";
 import BootMainMenuComponents from "../components/BootScene/BootMainMenuComponents";
 import { useStore } from "../store";
 import BootAuthorizeUser from "../components/BootScene/BootAuthorizeUser";
 import BootLoadData from "../components/BootScene/BootLoadData";
+import sleep from "../utils/sleep";
 
 const BootScene = () => {
   const activeSubscene = useStore((state) => state.bootSubscene);
@@ -13,14 +14,13 @@ const BootScene = () => {
   const [mainMenuVisible, setMainMenuVisible] = useState(false);
 
   useEffect(() => {
-    setTimeout(() => {
+    (async () => {
+      await sleep(2000);
       setAccelaVisible(false);
-      // 2000
-    }, 0);
-    setTimeout(() => {
+
+      await sleep(4200);
       setMainMenuVisible(true);
-      //6200
-    }, 0);
+    })();
   }, []);
 
   return (

src/scenes/ChangeDiscScene.tsx

@@ -1,27 +1,29 @@
 import React, { useEffect } from "react";
 import { useStore } from "../store";
+import sleep from "../utils/sleep";
 
 const ChangeDiscScene = () => {
   const setScene = useStore((state) => state.setScene);
   const currentSite = useStore((state) => state.activeSite);
 
   useEffect(() => {
-    if (currentSite === "a") {
-      document.getElementsByTagName("canvas")[0].className =
-        "change-disc-scene-a-background";
-    } else if (currentSite === "b") {
-      document.getElementsByTagName("canvas")[0].className =
-        "change-disc-scene-b-background";
-    }
+    (async () => {
+      if (currentSite === "a") {
+        document.getElementsByTagName("canvas")[0].className =
+          "change-disc-scene-a-background";
+      } else if (currentSite === "b") {
+        document.getElementsByTagName("canvas")[0].className =
+          "change-disc-scene-b-background";
+      }
 
-    setTimeout(() => {
+      await sleep(3500);
       setScene("main");
-    }, 3500);
 
-    return () => {
-      document.getElementsByTagName("canvas")[0].className =
-        "main-scene-background";
-    };
+      return () => {
+        document.getElementsByTagName("canvas")[0].className =
+          "main-scene-background";
+      };
+    })();
   }, [currentSite, setScene]);
 
   return <></>;

src/scenes/EndScene.tsx

@@ -16,6 +16,7 @@ import Xa0006 from "../static/audio/Xa0006.mp4";
 import LainSpeak from "../components/LainSpeak";
 import EndSphere from "../components/EndScene/EndSphere";
 import EndCylinder from "../components/EndScene/EndCylinder";
+import sleep from "../utils/sleep";
 
 const EndScene = () => {
   const mainCylinderRef = useRef<THREE.Object3D>();
@@ -52,20 +53,19 @@ const EndScene = () => {
   useEffect(() => {
     const mediaElement = document.getElementById("media") as HTMLMediaElement;
 
-    const playNextMedia = () => {
+    const playNextMedia = async () => {
       playedMediaCountRef.current++;
       mediaElement.currentTime = 0;
       if (playedMediaCountRef.current === 1) {
         setObjectsVisible(true);
         setIsIntro(true);
 
-        setTimeout(() => {
-          mediaElement.src = Xa0001;
+        await sleep(3800);
+        mediaElement.src = Xa0001;
 
-          mediaElement.load();
-          mediaElement.play();
-          setIsIntro(false);
-        }, 3800);
+        mediaElement.load();
+        mediaElement.play();
+        setIsIntro(false);
       }
 
       if (
@@ -88,16 +88,15 @@ const EndScene = () => {
 
         mediaElement.load();
         mediaElement.play();
-        setIsOutro(true);
-        setTimeout(() => {
-          setSceneOutro(true);
-        }, 4000);
 
-        setTimeout(() => {
-          setObjectsVisible(false);
-          setShowSelectionScreen(true);
-          setSelectionVisible(true);
-        }, 7000);
+        await sleep(4000);
+        setIsOutro(true);
+        setSceneOutro(true);
+
+        await sleep(3000);
+        setObjectsVisible(false);
+        setShowSelectionScreen(true);
+        setSelectionVisible(true);
       }
     };
 

src/scenes/GateScene.tsx

@@ -4,15 +4,18 @@ import { OrbitControls } from "@react-three/drei";
 import GateHUD from "../components/GateScene/GateHUD";
 import GateMiddleObject from "../components/GateScene/GateMiddleObject";
 import { useStore } from "../store";
+import sleep from "../utils/sleep";
 
 const GateScene = () => {
   const gateLvl = useStore((state) => state.gateLvl);
   const [introAnim, setIntroAnim] = useState(true);
 
   useEffect(() => {
-    setTimeout(() => {
+    (async () => {
+      await sleep(2500);
+
       setIntroAnim(false);
-    }, 2500);
+    })();
   }, []);
 
   return (

src/scenes/MainScene.tsx

@@ -4,7 +4,7 @@ import { useStore } from "../store";
 import Pause from "../components/MainScene/PauseSubscene/Pause";
 import LevelSelection from "../components/MainScene/LevelSelection";
 import HUD from "../components/MainScene/HUD";
-import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
+import MainYellowTextAnimator from "../components/TextRenderer/MainYellowTextAnimator";
 import YellowOrb from "../components/MainScene/YellowOrb";
 import MiddleRing from "../components/MainScene/MiddleRing";
 import GrayPlanes from "../components/MainScene/GrayPlanes";
@@ -103,7 +103,7 @@ const MainScene = () => {
           <group visible={!wordSelected && (intro ? introFinished : true)}>
             <group visible={subscene !== "not_found"}>
               <HUD />
-              <YellowTextRenderer />
+              <MainYellowTextAnimator />
             </group>
             <MiddleRing />
             <GrayPlanes />

src/scenes/TaKScene.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import LainSpeak from "../components/LainSpeak";
 import { createAudioAnalyser, useStore } from "../store";
+import sleep from "../utils/sleep";
 
 const TaKScene = () => {
   const setScene = useStore((state) => state.setScene);
@@ -15,16 +16,20 @@ const TaKScene = () => {
   const percentageElapsed = useStore((state) => state.mediaPercentageElapsed);
 
   useEffect(() => {
-    if (percentageElapsed === 100) {
-      setIsOutro(true);
-      setTimeout(() => {
+    (async () => {
+      if (percentageElapsed === 100) {
+        setIsOutro(true);
+
+        await sleep(4600);
         setScene("main");
-      }, 4600);
-    }
+      }
+    })();
   }, [percentageElapsed, setScene]);
 
   useEffect(() => {
-    setTimeout(() => {
+    (async () => {
+      await sleep(3800);
+
       const mediaElement = document.getElementById("media") as HTMLMediaElement;
       const trackElement = document.getElementById("track") as HTMLTrackElement;
 
@@ -53,7 +58,7 @@ const TaKScene = () => {
         }
         setIsIntro(false);
       }
-    }, 3800);
+    })();
   }, [nodeMedia, nodeName, setAudioAnalyser]);
 
   return <LainSpeak intro={isIntro} outro={isOutro} />;