From 3333bdcfca976be90bb67d4f813ae285a468907d Mon Sep 17 00:00:00 2001 From: ad044 Date: Mon, 15 Feb 2021 22:41:20 +0400 Subject: [PATCH] added loading screen, optimized ring generation code, fixed some eslint errors --- src/App.tsx | 2 +- .../BootScene/BootMainMenuComponents.tsx | 8 +- src/components/GateScene/GateMiddleObject.tsx | 36 ++++----- .../GateScene/GateMiddleObject/BlueOne.tsx | 1 - .../GateScene/GateMiddleObject/BlueZero.tsx | 1 - .../GateScene/GateMiddleObject/Mirror.tsx | 2 +- src/components/Images.tsx | 1 - src/components/KeyPressHandler.tsx | 1 - src/components/Loading.tsx | 34 ++++++++ src/components/MainScene/Lain.tsx | 9 +-- src/components/MainScene/LevelSelection.tsx | 1 - .../MainScene/PauseSubscene/About.tsx | 5 +- .../MainScene/PauseSubscene/Pause.tsx | 12 +-- src/components/MainScene/Site.tsx | 4 +- .../MainScene/Site/ActiveLevelNodes.tsx | 1 - .../MainScene/Site/InactiveLevelNodes.tsx | 37 +++++---- src/components/MainScene/Site/Rings.tsx | 80 ++++++++++--------- .../MediaScene/Selectables/LeftSide.tsx | 19 ++--- .../MediaScene/Selectables/RightSide.tsx | 11 +-- src/components/Prompt.tsx | 7 +- src/components/SSknScene/SSknHUD.tsx | 7 +- src/components/Status.tsx | 2 +- .../TextRenderer/MainYellowTextAnimator.tsx | 1 - .../TextRenderer/MediaYellowTextAnimator.tsx | 1 - src/core/setters/main/site/lainManager.ts | 1 - src/scenes/EndScene.tsx | 10 +-- src/scenes/MainScene.tsx | 7 +- src/scenes/MediaScene.tsx | 45 +++++++---- src/scenes/TaKScene.tsx | 1 - src/store.ts | 4 +- 30 files changed, 178 insertions(+), 173 deletions(-) create mode 100644 src/components/Loading.tsx diff --git a/src/App.tsx b/src/App.tsx index 51501fd..e6c6f37 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/BootMainMenuComponents.tsx b/src/components/BootScene/BootMainMenuComponents.tsx index f614534..d38c93e 100644 --- a/src/components/BootScene/BootMainMenuComponents.tsx +++ b/src/components/BootScene/BootMainMenuComponents.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo } from "react"; +import React, { useMemo } from "react"; import { a, useSpring } from "@react-spring/three"; import authorizeActive from "../../static/sprite/authorize_user_active.png"; import authorizeInactive from "../../static/sprite/authorize_user_inactive.png"; @@ -27,11 +27,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => { ); const activeMainMenuElement = useStore( - useCallback( - (state) => - state.mainMenuComponentMatrix[state.mainMenuComponentMatrixIdx], - [] - ) + (state) => state.mainMenuComponentMatrix[state.mainMenuComponentMatrixIdx] ); const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive); diff --git a/src/components/GateScene/GateMiddleObject.tsx b/src/components/GateScene/GateMiddleObject.tsx index 60c5576..79b365a 100644 --- a/src/components/GateScene/GateMiddleObject.tsx +++ b/src/components/GateScene/GateMiddleObject.tsx @@ -62,25 +62,23 @@ const GateMiddleObject = (props: GateMiddleObjectProps) => { position-z={middleObjectGroupState.posZ} visible={props.intro} > - {springs.map((item, idx) => { - if (item.type) { - return item.type.get() === 1 ? ( - - ) : ( - - ); - } - })} + {springs.map((item, idx) => + item.type.get() === 1 ? ( + + ) : ( + + ) + )} 0} diff --git a/src/components/GateScene/GateMiddleObject/BlueOne.tsx b/src/components/GateScene/GateMiddleObject/BlueOne.tsx index 73b02a7..88769f9 100644 --- a/src/components/GateScene/GateMiddleObject/BlueOne.tsx +++ b/src/components/GateScene/GateMiddleObject/BlueOne.tsx @@ -3,7 +3,6 @@ import { useLoader } from "react-three-fiber"; import * as THREE from "three"; import gateBlueBinarySingularOne from "../../../static/sprite/blue_binary_singular_one.png"; import { a, SpringValue } from "@react-spring/three"; -import sleep from "../../../utils/sleep"; type BlueOneProps = { posX: SpringValue; diff --git a/src/components/GateScene/GateMiddleObject/BlueZero.tsx b/src/components/GateScene/GateMiddleObject/BlueZero.tsx index 389ff19..61b6cf9 100644 --- a/src/components/GateScene/GateMiddleObject/BlueZero.tsx +++ b/src/components/GateScene/GateMiddleObject/BlueZero.tsx @@ -3,7 +3,6 @@ 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; diff --git a/src/components/GateScene/GateMiddleObject/Mirror.tsx b/src/components/GateScene/GateMiddleObject/Mirror.tsx index ec4940e..8fe5295 100644 --- a/src/components/GateScene/GateMiddleObject/Mirror.tsx +++ b/src/components/GateScene/GateMiddleObject/Mirror.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef } from "react"; +import React, { useMemo, useRef } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; import mirrorTexture from "../../../static/sprite/gate_object_texture.png"; diff --git a/src/components/Images.tsx b/src/components/Images.tsx index 6cb4227..91337ee 100644 --- a/src/components/Images.tsx +++ b/src/components/Images.tsx @@ -4,7 +4,6 @@ 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); diff --git a/src/components/KeyPressHandler.tsx b/src/components/KeyPressHandler.tsx index ed0e29b..781e565 100644 --- a/src/components/KeyPressHandler.tsx +++ b/src/components/KeyPressHandler.tsx @@ -36,7 +36,6 @@ import idleManager from "../core/setters/main/idleManager"; import * as audio from "../static/sfx"; import handleEndSceneKeyPress from "../core/scene-keypress-handlers/handleEndSceneKeyPress"; import endManager from "../core/setters/end/endManager"; -import sleep from "../utils/sleep"; const KeyPressHandler = () => { const mediaSceneSetters = useMemo( diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx new file mode 100644 index 0000000..1feeb64 --- /dev/null +++ b/src/components/Loading.tsx @@ -0,0 +1,34 @@ +import React, { useState } from "react"; +import loadingSpritesheet from "../static/sprite/loading_spritesheet.png"; +import lifeInstinct from "../static/sprite/life_instinct_function_os.png"; +import { useFrame, useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import { PlainAnimator } from "three-plain-animator/lib/plain-animator"; + +const Loading = () => { + const loadingTex: any = useLoader(THREE.TextureLoader, loadingSpritesheet); + const lifeInstinctTex = useLoader(THREE.TextureLoader, lifeInstinct); + + const [animator] = useState(() => { + const anim = new PlainAnimator(loadingTex, 10, 3, 29, 60); + anim.init(0); + return anim; + }); + + useFrame(() => { + animator.animate(); + }); + + return ( + <> + + + + + + + + ); +}; + +export default Loading; diff --git a/src/components/MainScene/Lain.tsx b/src/components/MainScene/Lain.tsx index 8211acd..407aeb0 100644 --- a/src/components/MainScene/Lain.tsx +++ b/src/components/MainScene/Lain.tsx @@ -1,7 +1,7 @@ -import React, { Suspense, useEffect, useMemo, useRef, useState } from "react"; -import { useFrame, useLoader } from "react-three-fiber"; +import React, {Suspense, useEffect, useMemo, useRef, useState} from "react"; +import {useFrame, useLoader} from "react-three-fiber"; import * as THREE from "three"; -import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator"; +import {PlainSingularAnimator} from "three-plain-animator/lib/plain-singular-animator"; import moveDownSpriteSheet from "../../static/sprite/jump_down.png"; import moveUpSpriteSheet from "../../static/sprite/jump_up.png"; import moveLeftSpriteSheet from "../../static/sprite/move_left.png"; @@ -32,8 +32,7 @@ import leanRightSpriteSheet from "../../static/sprite/lean_right.png"; import lookAroundSpriteSheet from "../../static/sprite/look_around.png"; import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png"; -import { useStore } from "../../store"; -import sleep from "../../utils/sleep"; +import {useStore} from "../../store"; type LainConstructorProps = { sprite: string; diff --git a/src/components/MainScene/LevelSelection.tsx b/src/components/MainScene/LevelSelection.tsx index d1f67cd..08be15d 100644 --- a/src/components/MainScene/LevelSelection.tsx +++ b/src/components/MainScene/LevelSelection.tsx @@ -12,7 +12,6 @@ import { useLoader } from "react-three-fiber"; import * as THREE from "three"; import { a, useSpring } from "@react-spring/three"; import usePrevious from "../../hooks/usePrevious"; -import sleep from "../../utils/sleep"; const LevelSelection = () => { const levelSelectionFontTex = useLoader( diff --git a/src/components/MainScene/PauseSubscene/About.tsx b/src/components/MainScene/PauseSubscene/About.tsx index 23f9142..b247ea2 100644 --- a/src/components/MainScene/PauseSubscene/About.tsx +++ b/src/components/MainScene/PauseSubscene/About.tsx @@ -1,9 +1,8 @@ -import React, { useEffect, useRef } from "react"; +import React, { useRef } from "react"; import aboutBg from "../../../static/sprite/about_background.png"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; -import { playAudio, useStore } from "../../../store"; -import { sound27, sound6, sound7 } from "../../../static/sfx"; +import { useStore } from "../../../store"; const About = () => { const setShowingAbout = useStore((state) => state.setShowingAbout); diff --git a/src/components/MainScene/PauseSubscene/Pause.tsx b/src/components/MainScene/PauseSubscene/Pause.tsx index f1021d9..5d61f5d 100644 --- a/src/components/MainScene/PauseSubscene/Pause.tsx +++ b/src/components/MainScene/PauseSubscene/Pause.tsx @@ -21,14 +21,10 @@ const Pause = () => { [wordFont] ); - const activeComponent = useStore( - useCallback( - (state) => - showActiveComponent - ? state.pauseComponentMatrix[state.pauseComponentMatrixIdx] - : "", - [showActiveComponent] - ) + const activeComponent = useStore((state) => + showActiveComponent + ? state.pauseComponentMatrix[state.pauseComponentMatrixIdx] + : "" ); const generateSqaureGeom = useCallback((row: number, square: number) => { diff --git a/src/components/MainScene/Site.tsx b/src/components/MainScene/Site.tsx index d560072..602ab44 100644 --- a/src/components/MainScene/Site.tsx +++ b/src/components/MainScene/Site.tsx @@ -9,7 +9,7 @@ import site_a from "../../resources/site_a.json"; import site_b from "../../resources/site_b.json"; import level_y_values from "../../resources/level_y_values.json"; import { filterInvisibleNodes } from "../../utils/node-utils"; -import NodeNameContainer from "../MediaScene/NodeNameContainer"; +import Loading from "../Loading"; export type NodeDataType = { id: string; @@ -88,7 +88,7 @@ const Site = (props: SiteProps) => { ); return ( - + }> diff --git a/src/components/MainScene/Site/ActiveLevelNodes.tsx b/src/components/MainScene/Site/ActiveLevelNodes.tsx index 1aa8994..6cc52f1 100644 --- a/src/components/MainScene/Site/ActiveLevelNodes.tsx +++ b/src/components/MainScene/Site/ActiveLevelNodes.tsx @@ -4,7 +4,6 @@ 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; diff --git a/src/components/MainScene/Site/InactiveLevelNodes.tsx b/src/components/MainScene/Site/InactiveLevelNodes.tsx index d44f564..a4d57b6 100644 --- a/src/components/MainScene/Site/InactiveLevelNodes.tsx +++ b/src/components/MainScene/Site/InactiveLevelNodes.tsx @@ -5,7 +5,6 @@ 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; @@ -26,9 +25,11 @@ const InactiveLevelNodes = memo((props: ActiveLevelNodesProps) => { ) { const prevLevel = parseInt(prevData?.activeLevel); const newLevel = parseInt(activeLevel); + // if singular jump if (prevLevel - 1 === newLevel || prevLevel + 1 === newLevel) { setVisibleNodes(generateInactiveNodes(props.visibleNodes, activeLevel)); } else { + // if changed from level selection setTimeout( () => setVisibleNodes( @@ -42,24 +43,22 @@ const InactiveLevelNodes = memo((props: ActiveLevelNodesProps) => { return ( <> - {Object.entries(visibleNodes).map((node: [string, any]) => { - return ( - - ); - })} + {Object.entries(visibleNodes).map((node: [string, any]) => ( + + ))} ); }); diff --git a/src/components/MainScene/Site/Rings.tsx b/src/components/MainScene/Site/Rings.tsx index 72b8ca2..cc89022 100644 --- a/src/components/MainScene/Site/Rings.tsx +++ b/src/components/MainScene/Site/Rings.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, memo } from "react"; +import React, { memo, useMemo } from "react"; import level_y_values from "../../../resources/level_y_values.json"; import PurpleRing from "./PurpleRing"; import GrayRing from "./GrayRing"; @@ -11,54 +11,56 @@ type RingsProps = { const Rings = memo((props: RingsProps) => { const activeLevel = useStore((state) => state.activeLevel); + const currentSite = useStore((state) => state.activeSite); - const visibleRings = useMemo(() => { - const rings: [string, number][] = []; - if (props.activateAllRings) { - Object.entries(level_y_values).forEach((levelDataPair) => { - rings.push([levelDataPair[0], levelDataPair[1]]); - }); - } else { - const activeLevelNr = parseInt(activeLevel); - const visibleLevels = [ - (activeLevelNr - 2).toString().padStart(2, "0"), - (activeLevelNr - 1).toString().padStart(2, "0"), - activeLevelNr.toString().padStart(2, "0"), - (activeLevelNr + 1).toString().padStart(2, "0"), - (activeLevelNr + 2).toString().padStart(2, "0"), - ]; + const levelUpperLimit = useMemo(() => (currentSite === "a" ? 22 : 13), [ + currentSite, + ]); - visibleLevels.forEach((level) => { - rings.push([ + const possibleLevels = useMemo( + () => + Array.from({ length: levelUpperLimit }, (_, i) => + (i + 1).toString().padStart(2, "0") + ), + [levelUpperLimit] + ); + + const visibleRings: [string, number][] = useMemo(() => { + if (props.activateAllRings) { + return Object.entries(level_y_values) + .sort((a, b) => a[0].localeCompare(b[0])) + .slice(0, levelUpperLimit); + } else { + const activeLevelIdx = parseInt(activeLevel) - 1; + + return possibleLevels + .slice( + activeLevelIdx < 3 ? 0 : activeLevelIdx - 3, + activeLevelIdx > levelUpperLimit - 3 + ? levelUpperLimit + : activeLevelIdx + 3 + ) + .map((level) => [ level, level_y_values[level as keyof typeof level_y_values], ]); - }); } - return rings; - }, [props.activateAllRings, activeLevel]); + }, [props.activateAllRings, activeLevel, possibleLevels, levelUpperLimit]); return ( <> - {visibleRings.map((level: [string, number]) => { - if ( - (currentSite === "b" && parseInt(level[0]) <= 13) || - currentSite === "a" - ) { - return ( - - - - - - ); - } - })} + {visibleRings.map((level: [string, number]) => ( + + + + + + ))} ); }); diff --git a/src/components/MediaScene/Selectables/LeftSide.tsx b/src/components/MediaScene/Selectables/LeftSide.tsx index a53570f..7106c82 100644 --- a/src/components/MediaScene/Selectables/LeftSide.tsx +++ b/src/components/MediaScene/Selectables/LeftSide.tsx @@ -1,7 +1,7 @@ -import React, { useCallback, useMemo, memo } from "react"; +import React, { memo, useMemo } from "react"; import TriangularPrism from "./LeftSide/TriangularPrism"; import Cube from "./LeftSide/Cube"; -import { useSpring, a } from "@react-spring/three"; +import { a, useSpring } from "@react-spring/three"; import { useStore } from "../../../store"; export type ShapeProps = { @@ -12,15 +12,12 @@ export type ShapeProps = { const LeftSide = 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 + ] ); const cubesActive = useMemo(() => activeMediaComponent === "exit", [ diff --git a/src/components/MediaScene/Selectables/RightSide.tsx b/src/components/MediaScene/Selectables/RightSide.tsx index aa97e65..669710b 100644 --- a/src/components/MediaScene/Selectables/RightSide.tsx +++ b/src/components/MediaScene/Selectables/RightSide.tsx @@ -10,13 +10,10 @@ const RightSide = memo(() => { const words = useStore((state) => state.activeNode.words); const wordPositionState = useStore( - useCallback( - (state) => - word_position_states[ - state.mediaWordPosStateIdx.toString() as keyof typeof word_position_states - ], - [] - ) + (state) => + word_position_states[ + state.mediaWordPosStateIdx.toString() as keyof typeof word_position_states + ] ); const wordPositionStateSpring = useSpring({ diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 9b04843..505d712 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from "react"; +import React from "react"; import answerContainer from "../static/sprite/prompt_answer_container.png"; import questionContainer from "../static/sprite/prompt_question_container.png"; import yes from "../static/sprite/prompt_yes.png"; @@ -19,10 +19,7 @@ const Prompt = () => { const noTex = useLoader(THREE.TextureLoader, no); const activeComponent = useStore( - useCallback( - (state) => state.promptComponentMatrix[state.promptComponentMatrixIdx], - [] - ) + (state) => state.promptComponentMatrix[state.promptComponentMatrixIdx] ); return ( diff --git a/src/components/SSknScene/SSknHUD.tsx b/src/components/SSknScene/SSknHUD.tsx index 54c0747..c576cdc 100644 --- a/src/components/SSknScene/SSknHUD.tsx +++ b/src/components/SSknScene/SSknHUD.tsx @@ -1,4 +1,4 @@ -import React, { memo, useCallback } from "react"; +import React, { memo } from "react"; import ssknOk from "../../static/sprite/sskn_ok.png"; import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png"; import ssknCancel from "../../static/sprite/sskn_cancel.png"; @@ -31,10 +31,7 @@ const SSknHUD = memo(() => { const ssknLineTex = useLoader(THREE.TextureLoader, ssknLine); const activeSSknComponent = useStore( - useCallback( - (state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx], - [] - ) + (state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx] ); const loading = useStore((state) => state.ssknLoading); diff --git a/src/components/Status.tsx b/src/components/Status.tsx index 2bc2513..172fa35 100644 --- a/src/components/Status.tsx +++ b/src/components/Status.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React from "react"; import statusContainer from "../static/sprite/status_container.png"; import loadSuccessfulImg from "../static/sprite/load_successful.png"; import loadFailImg from "../static/sprite/load_fail.png"; diff --git a/src/components/TextRenderer/MainYellowTextAnimator.tsx b/src/components/TextRenderer/MainYellowTextAnimator.tsx index b2fdf50..ba8e477 100644 --- a/src/components/TextRenderer/MainYellowTextAnimator.tsx +++ b/src/components/TextRenderer/MainYellowTextAnimator.tsx @@ -4,7 +4,6 @@ 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 MainYellowTextAnimator = (props: { visible?: boolean }) => { const activeNode = useStore((state) => state.activeNode); diff --git a/src/components/TextRenderer/MediaYellowTextAnimator.tsx b/src/components/TextRenderer/MediaYellowTextAnimator.tsx index 0a16a61..8502fe7 100644 --- a/src/components/TextRenderer/MediaYellowTextAnimator.tsx +++ b/src/components/TextRenderer/MediaYellowTextAnimator.tsx @@ -2,7 +2,6 @@ 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"); diff --git a/src/core/setters/main/site/lainManager.ts b/src/core/setters/main/site/lainManager.ts index c08a0a6..4ed3fde 100644 --- a/src/core/setters/main/site/lainManager.ts +++ b/src/core/setters/main/site/lainManager.ts @@ -1,5 +1,4 @@ import { useStore } from "../../../../store"; -import sleep from "../../../../utils/sleep"; const lainManager = (eventState: any) => { const setLainMoveState = useStore.getState().setLainMoveState; diff --git a/src/scenes/EndScene.tsx b/src/scenes/EndScene.tsx index 1f1238e..fae1f95 100644 --- a/src/scenes/EndScene.tsx +++ b/src/scenes/EndScene.tsx @@ -1,13 +1,7 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import * as THREE from "three"; import { useFrame } from "react-three-fiber"; -import { createAudioAnalyser, useStore } from "../store"; +import { useStore } from "../store"; import EndSelectionScreen from "../components/EndScene/EndSelectionScreen"; import endroll from "../static/movie/ENDROLL1.STR[0].webm"; import endrollVtt from "../static/webvtt/Endroll.vtt"; diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 5ea2bdb..a28d41d 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -1,6 +1,6 @@ import { OrbitControls } from "@react-three/drei"; import React, { Suspense, useEffect, useRef, useState } from "react"; -import { useStore } from "../store"; +import { playAudio, useStore } from "../store"; import Pause from "../components/MainScene/PauseSubscene/Pause"; import LevelSelection from "../components/MainScene/LevelSelection"; import HUD from "../components/MainScene/HUD"; @@ -15,9 +15,8 @@ import * as THREE from "three"; import { useFrame } from "react-three-fiber"; import NotFound from "../components/MainScene/NotFound"; import PausePopUps from "../components/MainScene/PauseSubscene/PausePopUps"; -import { playAudio } from "../store"; import * as audio from "../static/sfx"; -import sleep from "../utils/sleep"; +import Loading from "../components/Loading"; const MainScene = () => { const intro = useStore((state) => state.intro); @@ -91,7 +90,7 @@ const MainScene = () => { return ( - + }> diff --git a/src/scenes/MediaScene.tsx b/src/scenes/MediaScene.tsx index 8115ff5..ad83d5f 100644 --- a/src/scenes/MediaScene.tsx +++ b/src/scenes/MediaScene.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { createAudioAnalyser, useStore } from "../store"; import LeftSide from "../components/MediaScene/Selectables/LeftSide"; import RightSide from "../components/MediaScene/Selectables/RightSide"; @@ -8,6 +8,7 @@ import NodeNameContainer from "../components/MediaScene/NodeNameContainer"; import Images from "../components/Images"; import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer"; import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator"; +import Loading from "../components/Loading"; const MediaScene = () => { const percentageElapsed = useStore((state) => state.mediaPercentageElapsed); @@ -65,26 +66,36 @@ const MediaScene = () => { } }, [activeNode.media_file, activeNode.node_name, setAudioAnalyser]); + const [loaded, setLoaded] = useState(false); + + useEffect(() => { + setLoaded(true); + }, []); + return ( - - - - - - - - - - - + {loaded ? ( + + + + + + + + + + + - - - - + + + + + - + ) : ( + + )} ); }; diff --git a/src/scenes/TaKScene.tsx b/src/scenes/TaKScene.tsx index b4ea8ce..25f7f14 100644 --- a/src/scenes/TaKScene.tsx +++ b/src/scenes/TaKScene.tsx @@ -1,7 +1,6 @@ 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); diff --git a/src/store.ts b/src/store.ts index 1c0468e..ae7f4ca 100644 --- a/src/store.ts +++ b/src/store.ts @@ -157,12 +157,12 @@ export const useStore = create( // site activeSite: "a", siteRot: [0, 0, 0], - // this one is used for word selection animation to start from the correct point + // this is used for word selection animation to start from the correct point oldSiteRot: [0, 0, 0], // level activeLevel: "04", - // this one is used for word selection animation to start from the correct point + // this is used for word selection animation to start from the correct point oldLevel: "04", // level selection