diff --git a/src/components/BootScene/BootAuthorizeUser.tsx b/src/components/BootScene/BootAuthorizeUser.tsx index 93957b1..aa292df 100644 --- a/src/components/BootScene/BootAuthorizeUser.tsx +++ b/src/components/BootScene/BootAuthorizeUser.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React, { Suspense, useEffect, useMemo, useRef } from "react"; import authorizeHeaderUnderline from "../../static/sprite/authorize_header_underline.png"; import authorizeGlass from "../../static/sprite/authorize_glass.png"; import authorizeGlassUnderline from "../../static/sprite/authorize_glass_underline.png"; @@ -9,6 +9,8 @@ import authorizeActiveLetters from "../../static/sprite/authorize_active_letters import { useLoader } from "react-three-fiber"; import * as THREE from "three"; import { OrbitControls } from "@react-three/drei"; +import { useStore } from "../../store"; +import usePrevious from "../../hooks/usePrevious"; type BootAuthorizeUserProps = { visible: boolean; @@ -36,28 +38,65 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => { THREE.TextureLoader, authorizeInactiveLetters ); - const authorizeActiveLettersTex = useLoader( + const activeLettersTex = useLoader( THREE.TextureLoader, authorizeActiveLetters ); - const backgroundLettersPos = 1; - const activeLetterTextureOffset = 2; + const letterIdx = useStore((state) => state.authorizeUserLetterIdx); + const subscene = useStore((state) => state.bootSubscene); + const prevData = usePrevious({ letterIdx, subscene }); - const authorizeActiveLettersMap = useMemo(() => { - authorizeActiveLettersTex.wrapT = authorizeActiveLettersTex.wrapS = - THREE.RepeatWrapping; - authorizeActiveLettersTex.repeat.set(0.06, 0.2); - authorizeActiveLettersTex.offset.x = 1; - authorizeActiveLettersTex.offset.y = 2; + const bgLettersRef = useRef(); + const activeLetterRef = useRef(); - return authorizeActiveLettersTex; - }, [activeLetterTextureOffset, authorizeActiveLettersTex]); + const activeLetterMap = useMemo(() => { + activeLettersTex.wrapT = activeLettersTex.wrapS = THREE.RepeatWrapping; + activeLettersTex.repeat.set(0.06, 0.2); + activeLettersTex.offset.x = 0; + activeLettersTex.offset.y = -0.2; + return activeLettersTex; + }, [activeLettersTex]); + + useEffect(() => { + if ( + prevData?.subscene === "main_menu" && + subscene === "authorize_user" && + activeLetterRef + ) { + activeLetterMap.offset.x = 0; + activeLetterMap.offset.y = -0.2; + } + }, [subscene, prevData?.subscene, activeLetterMap.offset]); + + useEffect(() => { + if (bgLettersRef.current) { + //down + if (letterIdx === prevData!.letterIdx + 13) { + bgLettersRef.current.position.y += 0.25; + activeLetterMap.offset.y -= 0.2; + } + // up + else if (letterIdx === prevData!.letterIdx - 13) { + bgLettersRef.current.position.y -= 0.25; + activeLetterMap.offset.y += 0.2; + } + // left + else if (letterIdx === prevData!.letterIdx - 1) { + bgLettersRef.current.position.x += 0.3; + activeLetterMap.offset.x -= 0.0775; + } + // right + else if (letterIdx === prevData!.letterIdx + 1) { + bgLettersRef.current.position.x -= 0.3; + activeLetterMap.offset.x += 0.0775; + } + } + }, [activeLetterMap.offset, letterIdx, prevData]); return ( <> - - {props.visible ? ( + {props.visible && ( <> { /> + { > { - ) : ( - <> )} ); diff --git a/src/components/BootScene/BootLoadData.tsx b/src/components/BootScene/BootLoadData.tsx index fdf458e..d9781c9 100644 --- a/src/components/BootScene/BootLoadData.tsx +++ b/src/components/BootScene/BootLoadData.tsx @@ -1,106 +1,48 @@ import React from "react"; import loadDataUnderline from "../../static/sprite/load_data_header_underline.png"; -import loadDataQuestionContainer from "../../static/sprite/load_data_question_container.png"; -import loadDataAnswerContainer from "../../static/sprite/load_data_answer_container.png"; -import areYouSure from "../../static/sprite/are_you_sure.png"; -import yes from "../../static/sprite/Yes.png"; -import no from "../../static/sprite/No.png"; import * as THREE from "three"; import { useLoader } from "react-three-fiber"; +import Prompt from "../Prompt"; +import { useStore } from "../../store"; +import Status from "../Status"; type BootLoadDataProps = { visible: boolean; - activeBootElement: any; }; const BootLoadData = (props: BootLoadDataProps) => { - // const loadDataUnderlineTex = useLoader( - // THREE.TextureLoader, - // loadDataUnderline - // ); - // const loadDataQuestionContainerTex = useLoader( - // THREE.TextureLoader, - // loadDataQuestionContainer - // ); - // const loadDataAnswerContainerTex = useLoader( - // THREE.TextureLoader, - // loadDataAnswerContainer - // ); - // const areYouSureTex = useLoader(THREE.TextureLoader, areYouSure); - // const yesTex = useLoader(THREE.TextureLoader, yes); - // const noTex = useLoader(THREE.TextureLoader, no); - // - // return ( - // <> - // {props.visible ? ( - // <> - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // ) : ( - // <> - // )} - // - // ); - return <>; + const promptVisible = useStore((state) => state.promptVisible); + + const loadDataUnderlineTex = useLoader( + THREE.TextureLoader, + loadDataUnderline + ); + + return ( + <> + {props.visible && ( + <> + + + + + + + + + + + )} + + ); }; export default BootLoadData; diff --git a/src/components/BootScene/BootMainMenuComponents.tsx b/src/components/BootScene/BootMainMenuComponents.tsx index 2db23da..f614534 100644 --- a/src/components/BootScene/BootMainMenuComponents.tsx +++ b/src/components/BootScene/BootMainMenuComponents.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo } from "react"; +import React, { useCallback, 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"; @@ -8,11 +8,11 @@ import { useLoader } from "react-three-fiber"; import * as THREE from "three"; import authorizeUserHeader from "../../static/sprite/authorize_user_scene_header.png"; import loadDataHeader from "../../static/sprite/load_data_header.png"; +import { useStore } from "../../store"; type BootMainMenuProps = { visible: boolean; activeSubScene: string; - activeBootElement: any; }; const BootMainMenuComponents = (props: BootMainMenuProps) => { @@ -26,6 +26,14 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => { authorizeUserHeader ); + const activeMainMenuElement = useStore( + useCallback( + (state) => + state.mainMenuComponentMatrix[state.mainMenuComponentMatrixIdx], + [] + ) + ); + const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive); const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive); const loadDataHeaderTex = useLoader(THREE.TextureLoader, loadDataHeader); @@ -39,7 +47,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => { } else { return { texture: - props.activeBootElement === "load_data" + activeMainMenuElement === "load_data" ? loadDataActiveTex : loadDataInactiveTex, position: { x: 0, y: -0.5 }, @@ -49,7 +57,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => { loadDataActiveTex, loadDataHeaderTex, loadDataInactiveTex, - props.activeBootElement, + activeMainMenuElement, props.activeSubScene, ]); @@ -64,7 +72,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => { return { scale: [1.8, 0.3, 0], texture: - props.activeBootElement === "authorize_user" + activeMainMenuElement === "authorize_user" ? authorizeActiveTex : authorizeInactiveTex, position: { x: 0, y: 0.5 }, @@ -74,7 +82,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => { authorizeActiveTex, authorizeInactiveTex, authorizeUserHeaderTex, - props.activeBootElement, + activeMainMenuElement, props.activeSubScene, ]); @@ -90,7 +98,7 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => { return ( <> - {props.visible ? ( + {props.visible && ( <> { /> - ) : ( - <> )} ); diff --git a/src/components/KeyPressHandler.tsx b/src/components/KeyPressHandler.tsx index 0c72267..e658775 100644 --- a/src/components/KeyPressHandler.tsx +++ b/src/components/KeyPressHandler.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useMemo, useRef } from "react"; import { + getBootSceneContext, getMainSceneContext, getMediaSceneContext, getSSknSceneContext, @@ -7,7 +8,7 @@ import { } from "../store"; import { getKeyCodeAssociation } from "../utils/keyPressUtils"; import mediaManager from "../core/setters/media/mediaManager"; -import handleMediaSceneEvent from "../core/scene-keypress-handlers/handleMediaKeyPress"; +import handleMediaSceneKeyPress from "../core/scene-keypress-handlers/handleMediaSceneKeyPress"; import sceneManager from "../core/setters/sceneManager"; import levelSelectionManager from "../core/setters/main/level_selection/levelSelectionManager"; import nodeManager from "../core/setters/main/site/nodeManager"; @@ -17,12 +18,15 @@ import siteManager from "../core/setters/main/site/siteManager"; import pauseManager from "../core/setters/main/pause/pauseManager"; import mainSubsceneManager from "../core/setters/main/mainSubsceneManager"; import ssknManager from "../core/setters/sskn/ssknManager"; -import handleSSknSceneEvent from "../core/scene-keypress-handlers/handleSSknKeyPress"; -import handleMainSceneEvent from "../core/scene-keypress-handlers/handleMainKeyPress"; +import handleSSknSceneKeyPress from "../core/scene-keypress-handlers/handleSSknSceneKeyPress"; +import handleMainSceneKeyPress from "../core/scene-keypress-handlers/handleMainSceneKeyPress"; import gameLoader from "../core/setters/gameLoader"; import gameSaver from "../core/setters/gameSaver"; import progressManager from "../core/setters/progressManager"; import promptManager from "../core/setters/promptManager"; +import bootSubsceneManager from "../core/setters/boot/bootSubsceneManager"; +import bootManager from "../core/setters/boot/bootManager"; +import handleBootSceneKeyPress from "../core/scene-keypress-handlers/handleBootSceneKeyPress"; const KeyPressHandler = () => { const mediaSceneSetters = useMemo( @@ -59,6 +63,11 @@ const KeyPressHandler = () => { [] ); + const bootSceneSetters = useMemo( + () => [bootSubsceneManager, bootManager, promptManager, gameLoader], + [] + ); + const scene = useStore((state) => state.currentScene); const timePassedSinceLastKeyPress = useRef(-1); @@ -78,21 +87,27 @@ const KeyPressHandler = () => { case "main": return { contextProvider: getMainSceneContext, - handler: handleMainSceneEvent, + handler: handleMainSceneKeyPress, setters: mainSceneSetters, }; case "media": return { contextProvider: getMediaSceneContext, - handler: handleMediaSceneEvent, + handler: handleMediaSceneKeyPress, setters: mediaSceneSetters, }; case "sskn": return { contextProvider: getSSknSceneContext, - handler: handleSSknSceneEvent, + handler: handleSSknSceneKeyPress, setters: ssknSceneSetters, }; + case "boot": + return { + contextProvider: getBootSceneContext, + handler: handleBootSceneKeyPress, + setters: bootSceneSetters, + }; case "gate": case "polytan": case "about": @@ -118,7 +133,13 @@ const KeyPressHandler = () => { } } }, - [mainSceneSetters, mediaSceneSetters, scene, ssknSceneSetters] + [ + bootSceneSetters, + mainSceneSetters, + mediaSceneSetters, + scene, + ssknSceneSetters, + ] ); useEffect(() => { diff --git a/src/components/MainScene/PauseSubscene/About.tsx b/src/components/MainScene/PauseSubscene/About.tsx index bf36931..b247ea2 100644 --- a/src/components/MainScene/PauseSubscene/About.tsx +++ b/src/components/MainScene/PauseSubscene/About.tsx @@ -29,7 +29,7 @@ const About = () => { diff --git a/src/components/MainScene/PauseSubscene/Pause.tsx b/src/components/MainScene/PauseSubscene/Pause.tsx index 4624751..f1021d9 100644 --- a/src/components/MainScene/PauseSubscene/Pause.tsx +++ b/src/components/MainScene/PauseSubscene/Pause.tsx @@ -4,15 +4,9 @@ import PauseSquare from "./PauseSquare"; import PauseBigLetter from "../../TextRenderer/PauseBigLetter"; import { useStore } from "../../../store"; import { useLoader } from "react-three-fiber"; -import About from "./About"; -import Prompt from "../../Prompt"; -import PermissionDenied from "./PermissionDenied"; const Pause = () => { const exit = useStore((state) => state.pauseExitAnimation); - const showingAbout = useStore((state) => state.showingAbout); - const promptVisible = useStore((state) => state.promptVisible); - const permissionDenied = useStore((state) => state.permissionDenied); const [showActiveComponent, setShowActiveComponent] = useState(false); const [animation, setAnimation] = useState(false); const [intro, setIntro] = useState(true); @@ -82,290 +76,281 @@ const Pause = () => { return ( <> {animation && ( - - {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) => - [0, 1, 2, 3, 4, 5, 6].map((col: number) => { - if (rowIdx === 5 && col > 0 && col < 5) { - return col === 1 ? ( - - + + {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) => + [0, 1, 2, 3, 4, 5, 6].map((col: number) => { + if (rowIdx === 5 && col > 0 && col < 5) { + return col === 1 ? ( + + + + + ) : ( + + ); + } else if (rowIdx === 4 && col > 4 && col < 7) { + return col === 5 ? ( + + + + + ) : ( - - ) : ( - - ); - } else if (rowIdx === 4 && col > 4 && col < 7) { - return col === 5 ? ( - - + ); + } else if (rowIdx === 3 && col > 2 && col < 7) { + return col === 3 ? ( + + + + + ) : ( - - ) : ( - - ); - } else if (rowIdx === 3 && col > 2 && col < 7) { - return col === 3 ? ( - - + ); + } else if (rowIdx === 1 && col > 0 && col < 5) { + return col === 1 ? ( + + + + + ) : ( - - ) : ( - - ); - } else if (rowIdx === 1 && col > 0 && col < 5) { - return col === 1 ? ( - - + ); + } else if (rowIdx === 0 && col > 4 && col < 7) { + return col === 5 ? ( + + + + + ) : ( - - ) : ( - - ); - } else if (rowIdx === 0 && col > 4 && col < 7) { - return col === 5 ? ( - - + ); + } else { + return ( - - ) : ( - - ); - } else { - return ( - - ); - } - }) - )} - {"Load".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - key={idx} - position={[0.35 + idx / 2.8, 1.8, 0]} - scale={[0.25, 0.25, 0.25]} - active={activeComponent === "load"} - /> - ))} - {"About".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - position={[1.78 + idx / 2.8, 1.43, 0]} - scale={[0.25, 0.25, 0]} - active={activeComponent === "about"} - key={idx} - /> - ))} - {"Change".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - position={[1.05 + idx / 2.8, 1.07, 0]} - scale={[0.25, 0.25, 0]} - active={activeComponent === "change"} - key={idx} - /> - ))} - {"Save".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - position={[0.35 + idx / 2.8, 0.35, 0]} - scale={[0.25, 0.25, 0]} - active={activeComponent === "save"} - key={idx} - /> - ))} - {"Exit".split("").map((letter, idx) => ( - 0 ? "yellow" : "orange"} - letter={letter} - letterIdx={idx} - position={[1.78 + idx / 2.8, 0, 0]} - scale={[0.25, 0.25, 0]} - key={idx} - active={activeComponent === "exit"} - /> - ))} - - - ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + key={idx} + position={[0.35 + idx / 2.8, 1.8, 0]} + scale={[0.25, 0.25, 0.25]} + active={activeComponent === "load"} /> - - - ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + position={[1.78 + idx / 2.8, 1.43, 0]} + scale={[0.25, 0.25, 0]} + active={activeComponent === "about"} + key={idx} /> - ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + position={[1.05 + idx / 2.8, 1.07, 0]} + scale={[0.25, 0.25, 0]} + active={activeComponent === "change"} + key={idx} /> - + ))} + {"Save".split("").map((letter, idx) => ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + position={[0.35 + idx / 2.8, 0.35, 0]} + scale={[0.25, 0.25, 0]} + active={activeComponent === "save"} + key={idx} + /> + ))} + {"Exit".split("").map((letter, idx) => ( + 0 ? "yellow" : "orange"} + letter={letter} + letterIdx={idx} + position={[1.78 + idx / 2.8, 0, 0]} + scale={[0.25, 0.25, 0]} + key={idx} + active={activeComponent === "exit"} + /> + ))} + + + + + + + + + - {showingAbout && } - {promptVisible && ( - - - - )} - {permissionDenied && ( - - - - )} - + )} ); diff --git a/src/components/MainScene/PauseSubscene/PausePopUps.tsx b/src/components/MainScene/PauseSubscene/PausePopUps.tsx new file mode 100644 index 0000000..be3fedf --- /dev/null +++ b/src/components/MainScene/PauseSubscene/PausePopUps.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import About from "./About"; +import Prompt from "../../Prompt"; +import PermissionDenied from "./PermissionDenied"; +import { useStore } from "../../../store"; +import Status from "../../Status"; + +const PausePopUps = () => { + const subscene = useStore((state) => state.mainSubscene); + + const showingAbout = useStore((state) => state.showingAbout); + const promptVisible = useStore((state) => state.promptVisible); + const permissionDenied = useStore((state) => state.permissionDenied); + + return ( + + {showingAbout && } + + + + + + + + + + ); +}; + +export default PausePopUps; diff --git a/src/components/Status.tsx b/src/components/Status.tsx new file mode 100644 index 0000000..2bc2513 --- /dev/null +++ b/src/components/Status.tsx @@ -0,0 +1,67 @@ +import React, { useEffect } 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"; +import saveSuccessfulImg from "../static/sprite/save_successful.png"; + +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import { useStore } from "../store"; + +const Status = () => { + const loadSuccessful = useStore((state) => state.loadSuccessful); + const saveSuccessful = useStore((state) => state.saveSuccessful); + + const statusContainerTex = useLoader(THREE.TextureLoader, statusContainer); + const loadSuccessfulTex = useLoader(THREE.TextureLoader, loadSuccessfulImg); + const loadFailTex = useLoader(THREE.TextureLoader, loadFailImg); + const saveSuccessfulTex = useLoader(THREE.TextureLoader, saveSuccessfulImg); + + return ( + + + + + + + + + + + + + + + ); +}; + +export default Status; diff --git a/src/core/scene-keypress-handlers/handleBootKeyPress.ts b/src/core/scene-keypress-handlers/handleBootKeyPress.ts deleted file mode 100644 index fbbd81e..0000000 --- a/src/core/scene-keypress-handlers/handleBootKeyPress.ts +++ /dev/null @@ -1,33 +0,0 @@ -const handleBootKeyPress = (gameContext: any) => { - const keyPress = gameContext.keyPress; - - const activeBootElement = gameContext.activeBootElement; - const currentSubscene = gameContext.bootSubscene; - const authorizeUserBgLettersPos = gameContext.authorizeUserBgLettersPos; - const authorizeUserActiveLetterTexOffset = - gameContext.authorizeUserActiveLetterTexOffset; - const authorizeUserMatrixIdx = gameContext.authorizeUserMatrixIdx; - - switch (keyPress) { - case "DOWN": - case "UP": - case "LEFT": - case "RIGHT": - return { - event: `${currentSubscene}_${keyPress.toLowerCase()}`, - subscene: currentSubscene, - }; - case "X": - return { - event: `${currentSubscene}_back`, - subscene: currentSubscene, - }; - case "CIRCLE": - return { - event: `${activeBootElement}_select`, - subscene: currentSubscene, - }; - } -}; - -export default handleBootKeyPress; diff --git a/src/core/scene-keypress-handlers/handleBootSceneKeyPress.ts b/src/core/scene-keypress-handlers/handleBootSceneKeyPress.ts new file mode 100644 index 0000000..69ea4b2 --- /dev/null +++ b/src/core/scene-keypress-handlers/handleBootSceneKeyPress.ts @@ -0,0 +1,93 @@ +const handleBootSceneKeyPress = (bootSceneContext: any) => { + const { + keyPress, + subscene, + activeMainMenuComponent, + activePromptComponent, + promptVisible, + authorizeUserLetterIdx, + } = bootSceneContext; + + if (promptVisible) { + switch (keyPress) { + case "LEFT": + return { event: "prompt_left" }; + case "RIGHT": + return { event: "prompt_right" }; + case "CIRCLE": + switch (activePromptComponent) { + case "no": + return { event: "load_data_no" }; + case "yes": + return { + event: "load_data_yes", + }; + } + } + } else { + switch (subscene) { + case "main_menu": + switch (keyPress) { + case "UP": + case "DOWN": + return { event: `main_menu_${keyPress.toLowerCase()}` }; + case "CIRCLE": + return { event: `main_menu_${activeMainMenuComponent}_select` }; + } + break; + case "authorize_user": + switch (keyPress) { + case "X": + return { event: "authorize_user_back" }; + case "LEFT": + // if utmost left, break + if ([0, 13, 26, 39, 52].includes(authorizeUserLetterIdx)) break; + else { + return { + event: "authorize_user_left", + authorizeUserLetterIdx: authorizeUserLetterIdx - 1, + }; + } + case "RIGHT": + // if utmost right, break + if ([12, 25, 38, 51, 64].includes(authorizeUserLetterIdx)) break; + else { + return { + event: "authorize_user_right", + authorizeUserLetterIdx: authorizeUserLetterIdx + 1, + }; + } + case "DOWN": + // if utmost down, break + if ( + Array.from(new Array(13), (x, i) => i + 52).includes( + authorizeUserLetterIdx + ) + ) + break; + else { + return { + event: "authorize_user_down", + authorizeUserLetterIdx: authorizeUserLetterIdx + 13, + }; + } + case "UP": + // if utmost up, break + if ( + Array.from(new Array(13), (x, i) => i).includes( + authorizeUserLetterIdx + ) + ) + break; + else { + return { + event: "authorize_user_up", + authorizeUserLetterIdx: authorizeUserLetterIdx - 13, + }; + } + } + } + } +}; + +export default handleBootSceneKeyPress; diff --git a/src/core/scene-keypress-handlers/handleMainKeyPress.ts b/src/core/scene-keypress-handlers/handleMainSceneKeyPress.ts similarity index 99% rename from src/core/scene-keypress-handlers/handleMainKeyPress.ts rename to src/core/scene-keypress-handlers/handleMainSceneKeyPress.ts index 3f39fc3..791a9ce 100644 --- a/src/core/scene-keypress-handlers/handleMainKeyPress.ts +++ b/src/core/scene-keypress-handlers/handleMainSceneKeyPress.ts @@ -5,7 +5,7 @@ import { unknownNodeTemplate, } from "../../utils/node-utils"; -const handleMainSceneEvent = (mainSceneContext: any) => { +const handleMainSceneKeyPress = (mainSceneContext: any) => { const { subscene, selectedLevel, @@ -339,4 +339,4 @@ const handleMainSceneEvent = (mainSceneContext: any) => { } }; -export default handleMainSceneEvent; +export default handleMainSceneKeyPress; diff --git a/src/core/scene-keypress-handlers/handleMediaKeyPress.ts b/src/core/scene-keypress-handlers/handleMediaSceneKeyPress.ts similarity index 96% rename from src/core/scene-keypress-handlers/handleMediaKeyPress.ts rename to src/core/scene-keypress-handlers/handleMediaSceneKeyPress.ts index aa4d53f..dba18a0 100644 --- a/src/core/scene-keypress-handlers/handleMediaKeyPress.ts +++ b/src/core/scene-keypress-handlers/handleMediaSceneKeyPress.ts @@ -1,6 +1,6 @@ import { findNodeFromWord } from "../../utils/media-utils"; -const handleMediaKeyPress = (mediaSceneContext: any) => { +const handleMediaSceneKeyPress = (mediaSceneContext: any) => { const { keyPress, activeMediaComponent, @@ -97,4 +97,4 @@ const handleMediaKeyPress = (mediaSceneContext: any) => { } }; -export default handleMediaKeyPress; +export default handleMediaSceneKeyPress; diff --git a/src/core/scene-keypress-handlers/handleSSknKeyPress.ts b/src/core/scene-keypress-handlers/handleSSknSceneKeyPress.ts similarity index 82% rename from src/core/scene-keypress-handlers/handleSSknKeyPress.ts rename to src/core/scene-keypress-handlers/handleSSknSceneKeyPress.ts index 85063ff..2e72889 100644 --- a/src/core/scene-keypress-handlers/handleSSknKeyPress.ts +++ b/src/core/scene-keypress-handlers/handleSSknSceneKeyPress.ts @@ -1,4 +1,4 @@ -const handleSSknSceneEvent = (ssknSceneContext: any) => { +const handleSSknSceneKeyPress = (ssknSceneContext: any) => { const { keyPress, activeSSknComponent, activeNode } = ssknSceneContext; switch (keyPress) { @@ -21,4 +21,4 @@ const handleSSknSceneEvent = (ssknSceneContext: any) => { } }; -export default handleSSknSceneEvent; +export default handleSSknSceneKeyPress; diff --git a/src/core/setters/boot/bootManager.ts b/src/core/setters/boot/bootManager.ts new file mode 100644 index 0000000..5967441 --- /dev/null +++ b/src/core/setters/boot/bootManager.ts @@ -0,0 +1,43 @@ +import { useStore } from "../../../store"; + +const bootManager = (eventState: any) => { + const setMainMenuComponentMatrixIdx = useStore.getState() + .setMainMenuComponentMatrixIdx; + + const setAuthorizeUserLetterIdx = useStore.getState() + .setAuthorizeUserLetterIdx; + + const dispatchAction = (eventState: { + event: string; + authorizeUserLetterIdx: number; + }) => { + switch (eventState.event) { + case "main_menu_up": + return { + action: () => setMainMenuComponentMatrixIdx(0), + }; + case "main_menu_down": + return { + action: () => setMainMenuComponentMatrixIdx(1), + }; + case "main_menu_authorize_user_select": + return { action: () => setAuthorizeUserLetterIdx(0) }; + case "authorize_user_up": + case "authorize_user_down": + case "authorize_user_left": + case "authorize_user_right": + return { + action: () => + setAuthorizeUserLetterIdx(eventState.authorizeUserLetterIdx), + }; + } + }; + + const { action } = { ...dispatchAction(eventState) }; + + if (action) { + action(); + } +}; + +export default bootManager; diff --git a/src/core/setters/boot/bootSubsceneManager.ts b/src/core/setters/boot/bootSubsceneManager.ts index 6be54d3..d7e2e19 100644 --- a/src/core/setters/boot/bootSubsceneManager.ts +++ b/src/core/setters/boot/bootSubsceneManager.ts @@ -6,15 +6,15 @@ const bootSubsceneManager = (eventState: any) => { const dispatchAction = (eventState: { event: string }) => { switch (eventState.event) { case "authorize_user_back": - case "load_data_no_select": + case "load_data_no": return { action: () => setBootSubscene("main_menu"), }; - case "authorize_user_select": + case "main_menu_authorize_user_select": return { action: () => setBootSubscene("authorize_user"), }; - case "load_data_select": + case "main_menu_load_data_select": return { action: () => setBootSubscene("load_data") }; } }; diff --git a/src/core/setters/gameLoader.ts b/src/core/setters/gameLoader.ts index 96a07dd..ddcd980 100644 --- a/src/core/setters/gameLoader.ts +++ b/src/core/setters/gameLoader.ts @@ -2,6 +2,7 @@ import { useStore } from "../../store"; const gameLoader = (eventState: any) => { const loadSiteSaveState = useStore.getState().loadSiteSaveState; + const setLoadSuccessful = useStore.getState().setLoadSuccessful; const dispatchAction = (eventState: { event: string; site: "a" | "b" }) => { switch (eventState.event) { @@ -9,6 +10,19 @@ const gameLoader = (eventState: any) => { return { action: () => loadSiteSaveState(eventState.site === "a" ? "b" : "a"), }; + case "pause_load_select": + case "load_data_yes": + return { + action: () => { + // todo check if data exists + setLoadSuccessful(true); + + setTimeout(() => { + //todo actually load + setLoadSuccessful(undefined); + }, 1200); + }, + }; } }; diff --git a/src/core/setters/gameSaver.ts b/src/core/setters/gameSaver.ts index 85fde49..4853f36 100644 --- a/src/core/setters/gameSaver.ts +++ b/src/core/setters/gameSaver.ts @@ -2,6 +2,7 @@ import { getSiteState, useStore } from "../../store"; const gameSaver = (eventState: any) => { const setSiteSaveState = useStore.getState().setSiteSaveState; + const setSaveSuccessful = useStore.getState().setSaveSuccessful; const dispatchAction = (eventState: { event: string; site: "a" | "b" }) => { switch (eventState.event) { @@ -10,6 +11,17 @@ const gameSaver = (eventState: any) => { action: () => setSiteSaveState(eventState.site, getSiteState(eventState.site)), }; + case "pause_save_select": + return { + action: () => { + setSaveSuccessful(true); + + setTimeout(() => { + //todo actually save + setSaveSuccessful(undefined); + }, 1200); + }, + }; } }; diff --git a/src/core/setters/promptManager.ts b/src/core/setters/promptManager.ts index a23d4fb..437c9e1 100644 --- a/src/core/setters/promptManager.ts +++ b/src/core/setters/promptManager.ts @@ -23,7 +23,16 @@ const promptManager = (eventState: any) => { case "pause_change_select": return { action: () => exitAndResetPrompt() }; case "exit_prompt": + case "load_data_no": return { action: () => exitAndResetPrompt() }; + case "main_menu_load_data_select": + return { + action: () => { + setTimeout(() => { + setPromptVisible(true); + }, 500); + }, + }; } }; diff --git a/src/scenes/BootScene.tsx b/src/scenes/BootScene.tsx index 5dd8535..f04ba14 100644 --- a/src/scenes/BootScene.tsx +++ b/src/scenes/BootScene.tsx @@ -9,20 +9,6 @@ import BootLoadData from "../components/BootScene/BootLoadData"; const BootScene = () => { const activeSubscene = useStore((state) => state.bootSubscene); - const activeBootElement = useStore( - useCallback( - (state) => - state.bootComponentMatrix[ - activeSubscene as keyof typeof state.bootComponentMatrix - ][ - state.bootComponentMatrixIndices[ - activeSubscene as keyof typeof state.bootComponentMatrixIndices - ] - ], - [activeSubscene] - ) - ); - const [accelaVisible, setAccelaVisible] = useState(true); const [mainMenuVisible, setMainMenuVisible] = useState(false); @@ -44,13 +30,9 @@ const BootScene = () => { - + ); }; diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 4b7e89c..acb9788 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -14,6 +14,7 @@ import Lain from "../components/MainScene/Lain"; import * as THREE from "three"; import { useFrame } from "react-three-fiber"; import NotFound from "../components/MainScene/NotFound"; +import PausePopUps from "../components/MainScene/PauseSubscene/PausePopUps"; const MainScene = () => { const intro = useStore((state) => state.intro); @@ -94,6 +95,7 @@ const MainScene = () => { + diff --git a/src/store.ts b/src/store.ts index d8ee41c..c4feaa5 100644 --- a/src/store.ts +++ b/src/store.ts @@ -83,18 +83,9 @@ type State = { gateLvl: number; // boot scene - bootComponentMatrix: { - main_menu: ["authorize_user", "load_data"]; - load_data: ["load_data_yes", "load_data_no"]; - authorize_user: typeof authorize_user_letters.letters; - }; - bootComponentMatrixIndices: { - // 0 or 1 - main_menu: 0 | 1; - // 0 or 1 - load_data: 0 | 1; - authorize_user: 0; - }; + mainMenuComponentMatrix: ["authorize_user", "load_data"]; + mainMenuComponentMatrixIdx: 0 | 1; + authorizeUserLetterIdx: number; bootSubscene: "main_menu" | "load_data" | "authorize_user"; // end scene @@ -105,6 +96,10 @@ type State = { promptComponentMatrix: ["yes", "no"]; promptComponentMatrixIdx: 1 | 0; + // status notifiers + loadSuccessful: boolean | undefined; + saveSuccessful: boolean | undefined; + // save state siteSaveState: { a: { @@ -124,7 +119,7 @@ export const useStore = create( combine( { // scene data - currentScene: "main", + currentScene: "boot", // game progress gameProgress: game_progress, @@ -241,18 +236,9 @@ export const useStore = create( gateLvl: 0, // boot scene - bootComponentMatrix: { - main_menu: ["authorize_user", "load_data"], - load_data: ["load_data_yes", "load_data_no"], - authorize_user: authorize_user_letters.letters, - }, - bootComponentMatrixIndices: { - // 0 or 1 - main_menu: 0, - // 0 or 1 - load_data: 0, - authorize_user: 0, - }, + mainMenuComponentMatrix: ["authorize_user", "load_data"], + mainMenuComponentMatrixIdx: 0, + authorizeUserLetterIdx: 0, bootSubscene: "main_menu", // end scene @@ -263,6 +249,10 @@ export const useStore = create( promptComponentMatrix: ["yes", "no"], promptComponentMatrixIdx: 1, + // status notifiers + loadSuccessful: undefined, + saveSuccessful: undefined, + // save states for loading the game/changing sites siteSaveState: { a: { @@ -402,17 +392,12 @@ export const useStore = create( // boot scene setters setBootSubscene: (to: "load_data" | "authorize_user" | "main_menu") => set(() => ({ bootSubscene: to })), - toggleBootComponentMatrixIdx: (subscene: "load_data" | "main_menu") => - set((state) => ({ - bootComponentMatrixIndices: { - ...state.bootComponentMatrixIndices, - [subscene]: Number( - !state.bootComponentMatrixIndices[ - subscene as keyof typeof state.bootComponentMatrixIndices - ] - ), - }, + setMainMenuComponentMatrixIdx: (to: 0 | 1) => + set(() => ({ + mainMenuComponentMatrixIdx: to, })), + setAuthorizeUserLetterIdx: (to: number) => + set(() => ({ authorizeUserLetterIdx: to })), // end scene setters incrementEndMediaPlayedCount: () => @@ -449,6 +434,12 @@ export const useStore = create( }; }), + // status notifier setters + setSaveSuccessful: (to: boolean | undefined) => + set(() => ({ saveSuccessful: to })), + setLoadSuccessful: (to: boolean | undefined) => + set(() => ({ loadSuccessful: to })), + // progress setters setNodeViewed: ( nodeName: string, @@ -474,10 +465,21 @@ export const getSiteState = (site: "a" | "b") => { }; }; +const getPromptContext = () => { + const state = useStore.getState(); + + return { + promptVisible: state.promptVisible, + activePromptComponent: + state.promptComponentMatrix[state.promptComponentMatrixIdx], + }; +}; + export const getMainSceneContext = () => { const state = useStore.getState(); return { + ...getPromptContext(), subscene: state.mainSubscene, selectedLevel: state.selectedLevel, pauseMatrixIdx: state.pauseComponentMatrixIdx, @@ -490,9 +492,6 @@ export const getMainSceneContext = () => { level: parseInt(state.activeLevel), ssknLvl: state.ssknLvl, showingAbout: state.showingAbout, - promptVisible: state.promptVisible, - activePromptComponent: - state.promptComponentMatrix[state.promptComponentMatrixIdx], gateLvl: state.gateLvl, }; }; @@ -523,3 +522,15 @@ export const getMediaSceneContext = () => { gameProgress: state.gameProgress, }; }; + +export const getBootSceneContext = () => { + const state = useStore.getState(); + + return { + ...getPromptContext(), + subscene: state.bootSubscene, + activeMainMenuComponent: + state.mainMenuComponentMatrix[state.mainMenuComponentMatrixIdx], + authorizeUserLetterIdx: state.authorizeUserLetterIdx, + }; +};