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 = () => { - {/**/} + {dispatchScene[currentScene as keyof typeof dispatchScene]} 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 ;