diff --git a/src/App.tsx b/src/App.tsx
index e6c6f37..51501fd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,7 +45,7 @@ const App = () => {
diff --git a/src/components/BootScene/BootAnimation.tsx b/src/components/BootScene/BootAnimation.tsx
index 217098c..3c5a5d7 100644
--- a/src/components/BootScene/BootAnimation.tsx
+++ b/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}
/>
-
+
;
@@ -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 (
diff --git a/src/components/GateScene/GateMiddleObject/BlueZero.tsx b/src/components/GateScene/GateMiddleObject/BlueZero.tsx
index 61b6cf9..3e471dc 100644
--- a/src/components/GateScene/GateMiddleObject/BlueZero.tsx
+++ b/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;
@@ -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 (
diff --git a/src/components/Images.tsx b/src/components/Images.tsx
index 8a2f179..7d23716 100644
--- a/src/components/Images.tsx
+++ b/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 (
{
const levelSelectionFontTex = useLoader(
@@ -48,66 +49,72 @@ const LevelSelection = () => {
const downArrowRef = useRef();
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,
diff --git a/src/components/MainScene/MiddleRing.tsx b/src/components/MainScene/MiddleRing.tsx
index 36db5f6..2be0485 100644
--- a/src/components/MainScene/MiddleRing.tsx
+++ b/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) {
diff --git a/src/components/MainScene/MiddleRing/MiddleRingPart.tsx b/src/components/MainScene/MiddleRing/MiddleRingPart.tsx
index 96bc291..513147a 100644
--- a/src/components/MainScene/MiddleRing/MiddleRingPart.tsx
+++ b/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 (
diff --git a/src/components/MainScene/Site/ActiveLevelNodes.tsx b/src/components/MainScene/Site/ActiveLevelNodes.tsx
index 633ef5d..bf4eb5a 100644
--- a/src/components/MainScene/Site/ActiveLevelNodes.tsx
+++ b/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 (
diff --git a/src/components/MainScene/Site/InactiveLevelNodes.tsx b/src/components/MainScene/Site/InactiveLevelNodes.tsx
index c027a13..d4e709e 100644
--- a/src/components/MainScene/Site/InactiveLevelNodes.tsx
+++ b/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 (
diff --git a/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx b/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx
index 8694b78..7038145 100644
--- a/src/components/MainScene/Site/NodeAnimations/NodeExplosion.tsx
+++ b/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 ? (
diff --git a/src/components/MainScene/Site/NodeAnimations/NodeRip.tsx b/src/components/MainScene/Site/NodeAnimations/NodeRip.tsx
index 2b35e34..8f45662 100644
--- a/src/components/MainScene/Site/NodeAnimations/NodeRip.tsx
+++ b/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 (
diff --git a/src/components/MainScene/Starfield.tsx b/src/components/MainScene/Starfield.tsx
index a516a4d..38bd1fe 100644
--- a/src/components/MainScene/Starfield.tsx
+++ b/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 (
diff --git a/src/components/TextRenderer/GreenTextRenderer.tsx b/src/components/TextRenderer/GreenTextRenderer.tsx
index d455bcc..4e05563 100644
--- a/src/components/TextRenderer/GreenTextRenderer.tsx
+++ b/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);
diff --git a/src/components/TextRenderer/YellowTextRenderer.tsx b/src/components/TextRenderer/MainYellowTextAnimator.tsx
similarity index 78%
rename from src/components/TextRenderer/YellowTextRenderer.tsx
rename to src/components/TextRenderer/MainYellowTextAnimator.tsx
index f638812..f6c6120 100644
--- a/src/components/TextRenderer/YellowTextRenderer.tsx
+++ b/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;
diff --git a/src/components/TextRenderer/MediaYellowTextAnimator.tsx b/src/components/TextRenderer/MediaYellowTextAnimator.tsx
index dc9db00..a177b26 100644
--- a/src/components/TextRenderer/MediaYellowTextAnimator.tsx
+++ b/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(() => {
diff --git a/src/components/TextRenderer/SiteBigLetter.tsx b/src/components/TextRenderer/SiteBigLetter.tsx
index 847392c..d6f4fcc 100644
--- a/src/components/TextRenderer/SiteBigLetter.tsx
+++ b/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,
diff --git a/src/core/setters/gameLoader.ts b/src/core/setters/gameLoader.ts
index ddcd980..04a2a1f 100644
--- a/src/core/setters/gameLoader.ts
+++ b/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;
diff --git a/src/core/setters/gameSaver.ts b/src/core/setters/gameSaver.ts
index 4853f36..22f3a1d 100644
--- a/src/core/setters/gameSaver.ts
+++ b/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;
diff --git a/src/core/setters/main/idleManager.ts b/src/core/setters/main/idleManager.ts
index f9ccbba..3f9bab6 100644
--- a/src/core/setters/main/idleManager.ts
+++ b/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;
diff --git a/src/core/setters/main/level_selection/levelSelectionManager.ts b/src/core/setters/main/level_selection/levelSelectionManager.ts
index 8d9feb2..5a1ee29 100644
--- a/src/core/setters/main/level_selection/levelSelectionManager.ts
+++ b/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;
diff --git a/src/core/setters/main/mainSubsceneManager.ts b/src/core/setters/main/mainSubsceneManager.ts
index b77b7c8..3493a20 100644
--- a/src/core/setters/main/mainSubsceneManager.ts
+++ b/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;
diff --git a/src/core/setters/main/pause/pauseManager.ts b/src/core/setters/main/pause/pauseManager.ts
index d131d41..385246c 100644
--- a/src/core/setters/main/pause/pauseManager.ts
+++ b/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;
diff --git a/src/core/setters/main/site/lainManager.ts b/src/core/setters/main/site/lainManager.ts
index cb4cce4..6f5193d 100644
--- a/src/core/setters/main/site/lainManager.ts
+++ b/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;
diff --git a/src/core/setters/main/site/levelManager.ts b/src/core/setters/main/site/levelManager.ts
index 883770f..c478e48 100644
--- a/src/core/setters/main/site/levelManager.ts
+++ b/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;
diff --git a/src/core/setters/main/site/nodeManager.ts b/src/core/setters/main/site/nodeManager.ts
index 2c613d8..7a23e3e 100644
--- a/src/core/setters/main/site/nodeManager.ts
+++ b/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;
diff --git a/src/core/setters/main/site/siteManager.ts b/src/core/setters/main/site/siteManager.ts
index ba3b0f0..1707f0c 100644
--- a/src/core/setters/main/site/siteManager.ts
+++ b/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;
diff --git a/src/core/setters/media/mediaManager.ts b/src/core/setters/media/mediaManager.ts
index e774434..3ab6523 100644
--- a/src/core/setters/media/mediaManager.ts
+++ b/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;
diff --git a/src/core/setters/progressManager.ts b/src/core/setters/progressManager.ts
index 6de569e..6742a8d 100644
--- a/src/core/setters/progressManager.ts
+++ b/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;
diff --git a/src/core/setters/promptManager.ts b/src/core/setters/promptManager.ts
index 437c9e1..4b0c476 100644
--- a/src/core/setters/promptManager.ts
+++ b/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;
diff --git a/src/core/setters/sceneManager.ts b/src/core/setters/sceneManager.ts
index 5731d00..21ede48 100644
--- a/src/core/setters/sceneManager.ts
+++ b/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;
diff --git a/src/core/setters/soundManager.ts b/src/core/setters/soundManager.ts
index 9e1ef59..5fef7a3 100644
--- a/src/core/setters/soundManager.ts
+++ b/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;
diff --git a/src/core/setters/sskn/ssknManager.ts b/src/core/setters/sskn/ssknManager.ts
index fc10527..1571b6d 100644
--- a/src/core/setters/sskn/ssknManager.ts
+++ b/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;
diff --git a/src/scenes/BootScene.tsx b/src/scenes/BootScene.tsx
index fe28d1a..76a7df8 100644
--- a/src/scenes/BootScene.tsx
+++ b/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 (
diff --git a/src/scenes/ChangeDiscScene.tsx b/src/scenes/ChangeDiscScene.tsx
index dd6368d..2f2ede4 100644
--- a/src/scenes/ChangeDiscScene.tsx
+++ b/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 <>>;
diff --git a/src/scenes/EndScene.tsx b/src/scenes/EndScene.tsx
index 2e33ee0..e080b94 100644
--- a/src/scenes/EndScene.tsx
+++ b/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();
@@ -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);
}
};
diff --git a/src/scenes/GateScene.tsx b/src/scenes/GateScene.tsx
index a2a63c7..ffd3754 100644
--- a/src/scenes/GateScene.tsx
+++ b/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 (
diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx
index 2f693b5..8e50471 100644
--- a/src/scenes/MainScene.tsx
+++ b/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 = () => {
-
+
diff --git a/src/scenes/TaKScene.tsx b/src/scenes/TaKScene.tsx
index f991e0b..7943151 100644
--- a/src/scenes/TaKScene.tsx
+++ b/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 ;