From b2ce4b74bf081c0cf151dd044262972f56aa631c Mon Sep 17 00:00:00 2001 From: ad044 Date: Mon, 28 Dec 2020 21:30:01 +0400 Subject: [PATCH] refactored some state manager stuff, fixed more stuff --- .../MainScene/SyncedComponentLoader.tsx | 2 +- .../MainScene/SyncedComponents/Starfield.tsx | 21 ++- .../SyncedComponents/Starfield/Star.tsx | 9 +- src/core/StateManagers/EventManager.tsx | 28 ++-- src/core/StateManagers/GameLoader.tsx | 157 ++++++++++++++++++ src/core/StateManagers/GameSaver.tsx | 59 +++++++ src/core/StateManagers/LevelManager.tsx | 58 ------- .../GreenTextManager.tsx | 62 ++++--- .../{ => MainSceneManagers}/LainManager.tsx | 13 +- .../MainSceneManagers/LevelManager.tsx | 45 +++++ .../LevelSelectionManager.tsx | 15 +- .../MiddleRingManager.tsx | 10 +- .../NodeHUDManager.tsx | 19 +-- .../{ => MainSceneManagers}/NodeManager.tsx | 65 +++----- .../PauseComponentManager.tsx | 18 +- .../MainSceneManagers/SiteManager.tsx | 65 ++++++++ .../YellowTextManager.tsx | 94 ++++++----- .../MediaComponentManager.tsx | 38 ++--- .../StateManagers/MediaYellowTextManager.tsx | 8 +- .../StateManagers/SSknComponentManager.tsx | 8 +- src/core/StateManagers/SceneManager.tsx | 11 +- src/core/StateManagers/SiteManager.tsx | 103 ------------ src/core/StateManagers/SiteSaveManager.tsx | 78 --------- src/core/StateManagers/SubsceneManager.tsx | 8 +- src/core/mainSceneEventHandler.ts | 99 ++++++----- src/core/mediaSceneEventHandler.ts | 14 +- src/store.ts | 15 +- 27 files changed, 595 insertions(+), 527 deletions(-) create mode 100644 src/core/StateManagers/GameLoader.tsx create mode 100644 src/core/StateManagers/GameSaver.tsx delete mode 100644 src/core/StateManagers/LevelManager.tsx rename src/core/StateManagers/{ => MainSceneManagers}/GreenTextManager.tsx (67%) rename src/core/StateManagers/{ => MainSceneManagers}/LainManager.tsx (80%) create mode 100644 src/core/StateManagers/MainSceneManagers/LevelManager.tsx rename src/core/StateManagers/{ => MainSceneManagers}/LevelSelectionManager.tsx (72%) rename src/core/StateManagers/{ => MainSceneManagers}/MiddleRingManager.tsx (95%) rename src/core/StateManagers/{ => MainSceneManagers}/NodeHUDManager.tsx (79%) rename src/core/StateManagers/{ => MainSceneManagers}/NodeManager.tsx (66%) rename src/core/StateManagers/{ => MainSceneManagers}/PauseComponentManager.tsx (69%) create mode 100644 src/core/StateManagers/MainSceneManagers/SiteManager.tsx rename src/core/StateManagers/{ => MainSceneManagers}/YellowTextManager.tsx (78%) rename src/core/StateManagers/{ => MediaSceneManagers}/MediaComponentManager.tsx (77%) delete mode 100644 src/core/StateManagers/SiteManager.tsx delete mode 100644 src/core/StateManagers/SiteSaveManager.tsx diff --git a/src/components/MainScene/SyncedComponentLoader.tsx b/src/components/MainScene/SyncedComponentLoader.tsx index b9e6bf3..900f70b 100644 --- a/src/components/MainScene/SyncedComponentLoader.tsx +++ b/src/components/MainScene/SyncedComponentLoader.tsx @@ -40,7 +40,7 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => { - + ); diff --git a/src/components/MainScene/SyncedComponents/Starfield.tsx b/src/components/MainScene/SyncedComponents/Starfield.tsx index 7296591..c95e5aa 100644 --- a/src/components/MainScene/SyncedComponents/Starfield.tsx +++ b/src/components/MainScene/SyncedComponents/Starfield.tsx @@ -1,11 +1,7 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import Star from "./Starfield/Star"; -type StarfieldProps = { - visible: boolean; -}; - -const Starfield = (props: StarfieldProps) => { +const Starfield = () => { const LCG = (a: number, c: number, m: number, s: number) => () => (s = (s * a + c) % m); @@ -38,9 +34,17 @@ const Starfield = (props: StarfieldProps) => { ]) ); + const [mainVisible, setMainVisible] = useState(false); + + useEffect(() => { + setTimeout(() => { + setMainVisible(true); + }, 3700); + }, []); + return ( <> - + {posesBlueFromLeft.map((poses, idx) => ( @@ -65,9 +69,8 @@ const Starfield = (props: StarfieldProps) => { {posesBlueFromBottom.map((poses, idx) => ( diff --git a/src/components/MainScene/SyncedComponents/Starfield/Star.tsx b/src/components/MainScene/SyncedComponents/Starfield/Star.tsx index e9c2342..10ff22b 100644 --- a/src/components/MainScene/SyncedComponents/Starfield/Star.tsx +++ b/src/components/MainScene/SyncedComponents/Starfield/Star.tsx @@ -49,15 +49,20 @@ const Star = (props: StarProps) => { const amp = useRef(Math.random() / 10); + const introAmpRef = useRef(1); + useFrame(() => { if (starRef.current) { if (props.introStar) { - starRef.current.position.y += 0.2 + amp.current; + starRef.current.position.y += 0.25 + amp.current; } else { if (starRef.current.position.y > 4) { starRef.current.position.y = props.position[1]; } - starRef.current.position.y += 0.01 + amp.current; + starRef.current.position.y += 0.01 + amp.current + introAmpRef.current; + if (introAmpRef.current > 0) { + introAmpRef.current -= 0.003; + } } } }); diff --git a/src/core/StateManagers/EventManager.tsx b/src/core/StateManagers/EventManager.tsx index 0bd01fa..85ae8dc 100644 --- a/src/core/StateManagers/EventManager.tsx +++ b/src/core/StateManagers/EventManager.tsx @@ -1,9 +1,9 @@ import React, { useCallback, useEffect, useState } from "react"; -import SiteManager from "./SiteManager"; -import MiddleRingManager from "./MiddleRingManager"; -import LainManager from "./LainManager"; -import NodeManager from "./NodeManager"; -import NodeHUDManager from "./NodeHUDManager"; +import SiteManager from "./MainSceneManagers/SiteManager"; +import MiddleRingManager from "./MainSceneManagers/MiddleRingManager"; +import LainManager from "./MainSceneManagers/LainManager"; +import NodeManager from "./MainSceneManagers/NodeManager"; +import NodeHUDManager from "./MainSceneManagers/NodeHUDManager"; import { useAuthorizeUserStore, useBootStore, @@ -18,11 +18,11 @@ import { useSiteStore, useSSknStore, } from "../../store"; -import GreenTextManager from "./GreenTextManager"; -import MediaComponentManager from "./MediaComponentManager"; +import GreenTextManager from "./MainSceneManagers/GreenTextManager"; +import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager"; import SceneManager from "./SceneManager"; -import YellowTextManager from "./YellowTextManager"; -import LevelManager from "./LevelManager"; +import YellowTextManager from "./MainSceneManagers/YellowTextManager"; +import LevelManager from "./MainSceneManagers/LevelManager"; import BootComponentManager from "./BootComponentManager"; import SSknComponentManager from "./SSknComponentManager"; import handleMainSceneEvent from "../mainSceneEventHandler"; @@ -30,11 +30,12 @@ import handleMediaSceneEvent from "../mediaSceneEventHandler"; import handleBootEvent from "../bootEventHandler"; import handleSSknSceneEvent from "../ssknSceneEventHandler"; import BootAuthorizeUserManager from "./BootAuthorizeUserManager"; -import LevelSelectionManager from "./LevelSelectionManager"; +import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager"; import SubsceneManager from "./SubsceneManager"; -import PauseComponentManager from "./PauseComponentManager"; +import PauseComponentManager from "./MainSceneManagers/PauseComponentManager"; import MediaYellowTextManager from "./MediaYellowTextManager"; -import SiteSaveManager from "./SiteSaveManager"; +import GameSaver from "./GameSaver"; +import GameLoader from "./GameLoader"; const getKeyCodeAssociation = (keyCode: number): string => { const keyCodeAssocs = { @@ -242,7 +243,8 @@ const EventManager = () => { - + + ); }; diff --git a/src/core/StateManagers/GameLoader.tsx b/src/core/StateManagers/GameLoader.tsx new file mode 100644 index 0000000..132170f --- /dev/null +++ b/src/core/StateManagers/GameLoader.tsx @@ -0,0 +1,157 @@ +import { useCallback, useEffect } from "react"; +import { + useBigTextStore, + useGreenTextStore, + useHudStore, + useLevelStore, + useNodeStore, + useSiteSaveStore, + useSiteStore, +} from "../../store"; +import { StateManagerProps } from "./EventManager"; +import node_huds from "./../../resources/node_huds.json"; +import site_a from "./../../resources/site_a.json"; +import site_b from "./../../resources/site_b.json"; +import { SiteType } from "../../components/MainScene/SyncedComponents/Site"; + +const GameLoader = (props: StateManagerProps) => { + const siteASaveState = useSiteSaveStore((state) => state.a); + const siteBSaveState = useSiteSaveStore((state) => state.b); + + // setters for components, setting them all like this instead of their respective ones + // makes more sense since they all needed extra bit of context just for this certain event, + // which imo didn't make much sense + + // level setter + const setActiveLevel = useLevelStore((state) => state.setActiveLevel); + + // yellow text setter + const setYellowTextTransformState = useBigTextStore( + (state) => state.setTransformState + ); + const setYellowText = useBigTextStore((state) => state.setText); + + // green text setter + const setGreenText = useGreenTextStore((state) => state.setText); + const setGreenTextTransformState = useGreenTextStore( + (state) => state.setTransformState + ); + + // site setter + const setSiteTransformState = useSiteStore( + (state) => state.setTransformState + ); + const setCurrentSite = useSiteStore((state) => state.setCurrentSite); + + // node setter + const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState); + const setNodeMatrixIndices = useNodeStore( + (state) => state.setNodeMatrixIndices + ); + + // node hud setter + const setHudId = useHudStore((state) => state.setId); + + const changeSite = useCallback( + (site: string) => { + // load new site + const siteToLoad = site === "a" ? siteASaveState : siteBSaveState; + const siteData = site === "a" ? site_a : site_b; + + // load new site (the object itself) + setSiteTransformState(0, "rotX"); + + setCurrentSite(site); + setSiteTransformState(siteToLoad.siteRotY, "rotY"); + setSiteTransformState(siteToLoad.sitePosY, "posY"); + + // load new site level + setActiveLevel(siteToLoad.level); + + // load new site yellow text + setYellowTextTransformState( + node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].big_text[0], + "posX" + ); + setYellowTextTransformState( + node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].big_text[1], + "posY" + ); + + const targetYellowText = (siteData as SiteType)[siteToLoad.level][ + siteToLoad.activeNodeId + ].node_name; + + setYellowText(targetYellowText); + + // load new site green text + + const targetGreenText = (siteData as SiteType)[siteToLoad.level][ + siteToLoad.activeNodeId + ].title; + + const targetGreenTextPosData = + node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].medium_text; + + setGreenTextTransformState( + { + initial: targetGreenTextPosData.initial_position[0], + final: targetGreenTextPosData.position[0], + }, + "posX" + ); + setGreenTextTransformState(targetGreenTextPosData.position[1], "posY"); + setGreenText(targetGreenText); + + // load new site node + setActiveNodeState(siteToLoad.activeNodeId, "id"); + setNodeMatrixIndices(siteToLoad.nodeMatrixIndices); + + // load new site node hud + setHudId(siteToLoad.nodeHudId); + }, + [ + setActiveLevel, + setActiveNodeState, + setCurrentSite, + setGreenText, + setGreenTextTransformState, + setHudId, + setNodeMatrixIndices, + setSiteTransformState, + setYellowText, + setYellowTextTransformState, + siteASaveState, + siteBSaveState, + ] + ); + + const dispatchObject = useCallback( + (eventState: { event: string; site: string }) => { + switch (eventState.event) { + case "pause_change_select": + return { + action: changeSite, + value: [eventState.site], + actionDelay: 0, + }; + } + }, + [changeSite] + ); + + useEffect(() => { + if (props.eventState) { + const dispatchedObject = dispatchObject(props.eventState); + + if (dispatchedObject) { + setTimeout(() => { + dispatchedObject.action.apply(null, dispatchedObject.value as any); + }, dispatchedObject.actionDelay); + } + } + }, [dispatchObject, props.eventState]); + return null; +}; + +export default GameLoader; diff --git a/src/core/StateManagers/GameSaver.tsx b/src/core/StateManagers/GameSaver.tsx new file mode 100644 index 0000000..2d46ae0 --- /dev/null +++ b/src/core/StateManagers/GameSaver.tsx @@ -0,0 +1,59 @@ +import { useCallback, useEffect } from "react"; +import { useSiteSaveStore } from "../../store"; +import { StateManagerProps } from "./EventManager"; + +const GameSaver = (props: StateManagerProps) => { + const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState); + + const dispatchObject = useCallback( + (eventState: { + event: string; + currentSitePosY: number; + currentSiteRotY: number; + currentNodeId: string; + currentNodeMatrixIndices: { + matrixIdx: number; + rowIdx: number; + colIdx: number; + }; + currentHudId: string; + currentLevel: string; + site: string; + }) => { + switch (eventState.event) { + case "pause_change_select": + return { + action: setSiteSaveState, + value: [ + eventState.site === "a" ? "b" : "a", + { + activeNodeId: eventState.currentNodeId, + nodeMatrixIndices: eventState.currentNodeMatrixIndices, + nodeHudId: eventState.currentHudId, + siteRotY: eventState.currentSiteRotY, + sitePosY: eventState.currentSitePosY, + level: eventState.currentLevel, + }, + ], + actionDelay: 0, + }; + } + }, + [setSiteSaveState] + ); + + useEffect(() => { + if (props.eventState) { + const dispatchedObject = dispatchObject(props.eventState); + + if (dispatchedObject) { + setTimeout(() => { + dispatchedObject.action.apply(null, dispatchedObject.value as any); + }, dispatchedObject.actionDelay); + } + } + }, [dispatchObject, props.eventState]); + return null; +}; + +export default GameSaver; diff --git a/src/core/StateManagers/LevelManager.tsx b/src/core/StateManagers/LevelManager.tsx deleted file mode 100644 index 7ded3a7..0000000 --- a/src/core/StateManagers/LevelManager.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useCallback, useEffect } from "react"; -import { StateManagerProps } from "./EventManager"; -import { useLevelStore, useSiteSaveStore } from "../../store"; - -const LevelManager = (props: StateManagerProps) => { - const setActiveLevel = useLevelStore((state) => state.setActiveLevel); - const siteASaveState = useSiteSaveStore((state) => state.a); - const siteBSaveState = useSiteSaveStore((state) => state.b); - - const dispatchObject = useCallback( - (event: string, newLevel: string, newSite: string) => { - switch (event) { - case "site_up": - case "site_down": - return { - action: setActiveLevel, - value: newLevel, - delay: 0, - }; - case "select_level_down": - case "select_level_up": - return { - action: setActiveLevel, - value: newLevel, - delay: 1500, - }; - case "pause_change_select": - return { - action: setActiveLevel, - value: - newSite === "a" ? siteASaveState.level : siteBSaveState.level, - delay: 0, - }; - } - }, - [setActiveLevel, siteASaveState.level, siteBSaveState.level] - ); - - useEffect(() => { - if (props.eventState) { - const eventAction = props.eventState.event; - const newLevel = props.eventState.newLevel; - const newSite = props.eventState.newSite; - - const dispatchedObject = dispatchObject(eventAction, newLevel, newSite); - - if (dispatchedObject) { - setTimeout(() => { - dispatchedObject.action(dispatchedObject.value as any); - }, dispatchedObject.delay); - } - } - }, [props.eventState, dispatchObject]); - - return null; -}; - -export default LevelManager; diff --git a/src/core/StateManagers/GreenTextManager.tsx b/src/core/StateManagers/MainSceneManagers/GreenTextManager.tsx similarity index 67% rename from src/core/StateManagers/GreenTextManager.tsx rename to src/core/StateManagers/MainSceneManagers/GreenTextManager.tsx index 720a47d..00b7282 100644 --- a/src/core/StateManagers/GreenTextManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/GreenTextManager.tsx @@ -1,10 +1,10 @@ import { useCallback, useEffect } from "react"; -import { StateManagerProps } from "./EventManager"; -import node_huds from "../../resources/node_huds.json"; -import site_a from "../../resources/site_a.json"; -import { SiteType } from "../../components/MainScene/SyncedComponents/Site"; -import { useGreenTextStore, useSiteStore } from "../../store"; -import site_b from "../../resources/site_b.json"; +import { StateManagerProps } from "../EventManager"; +import node_huds from "../../../resources/node_huds.json"; +import site_a from "../../../resources/site_a.json"; +import { SiteType } from "../../../components/MainScene/SyncedComponents/Site"; +import { useGreenTextStore, useSiteStore } from "../../../store"; +import site_b from "../../../resources/site_b.json"; const GreenTextManager = (props: StateManagerProps) => { const setGreenText = useGreenTextStore((state) => state.setText); @@ -52,25 +52,37 @@ const GreenTextManager = (props: StateManagerProps) => { ); const dispatchObject = useCallback( - ( - event: string, - newActiveNodeId: string, - newActiveHudId: string, - newLevel: string - ) => { - switch (event) { + (eventState: { + event: string; + activeNodeId: string; + activeHudId: string; + level: string; + }) => { + switch (eventState.event) { case "site_up": case "site_down": case "site_left": case "site_right": return { action: toggleAndSetGreenText, - value: [newActiveNodeId, newActiveHudId, newLevel, 3900, true], + value: [ + eventState.activeNodeId, + eventState.activeHudId, + eventState.level, + 3900, + true, + ], }; case "change_node": return { action: toggleAndSetGreenText, - value: [newActiveNodeId, newActiveHudId, newLevel, 500, true], + value: [ + eventState.activeNodeId, + eventState.activeHudId, + eventState.level, + 500, + true, + ], }; case "toggle_level_selection": case "level_selection_back": @@ -81,7 +93,13 @@ const GreenTextManager = (props: StateManagerProps) => { case "select_level_down": return { action: toggleAndSetGreenText, - value: [newActiveNodeId, newActiveHudId, newLevel, 3900, false], + value: [ + eventState.activeNodeId, + eventState.activeHudId, + eventState.level, + 3900, + false, + ], }; } }, @@ -90,17 +108,7 @@ const GreenTextManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - const newActiveNodeId = props.eventState.newActiveNodeId; - const newActiveHudId = props.eventState.newActiveHudId; - const newLevel = props.eventState.newLevel; - - const dispatchedObject = dispatchObject( - eventAction, - newActiveNodeId, - newActiveHudId, - newLevel - ); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { (dispatchedObject.action as any).apply( diff --git a/src/core/StateManagers/LainManager.tsx b/src/core/StateManagers/MainSceneManagers/LainManager.tsx similarity index 80% rename from src/core/StateManagers/LainManager.tsx rename to src/core/StateManagers/MainSceneManagers/LainManager.tsx index 0fe23bd..23dae5e 100644 --- a/src/core/StateManagers/LainManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/LainManager.tsx @@ -1,13 +1,13 @@ import { useCallback, useEffect } from "react"; -import { useLainStore } from "../../store"; -import { StateManagerProps } from "./EventManager"; +import { useLainStore } from "../../../store"; +import { StateManagerProps } from "../EventManager"; const LainManager = (props: StateManagerProps) => { const setLainMoveState = useLainStore((state) => state.setLainMoveState); const dispatchObject = useCallback( - (event: string) => { - switch (event) { + (eventState: { event: string }) => { + switch (eventState.event) { case "site_up": case "site_down": case "site_left": @@ -16,7 +16,7 @@ const LainManager = (props: StateManagerProps) => { case "select_level_down": return { action: setLainMoveState, - value: event, + value: eventState.event, duration: 3900, }; case "throw_node_media": @@ -35,8 +35,7 @@ const LainManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - const dispatchedObject = dispatchObject(eventAction); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { dispatchedObject.action(dispatchedObject.value); diff --git a/src/core/StateManagers/MainSceneManagers/LevelManager.tsx b/src/core/StateManagers/MainSceneManagers/LevelManager.tsx new file mode 100644 index 0000000..dbe2e27 --- /dev/null +++ b/src/core/StateManagers/MainSceneManagers/LevelManager.tsx @@ -0,0 +1,45 @@ +import { useCallback, useEffect } from "react"; +import { StateManagerProps } from "../EventManager"; +import { useLevelStore } from "../../../store"; + +const LevelManager = (props: StateManagerProps) => { + const setActiveLevel = useLevelStore((state) => state.setActiveLevel); + + const dispatchObject = useCallback( + (eventState: { event: string; level: string }) => { + switch (eventState.event) { + case "site_up": + case "site_down": + return { + action: setActiveLevel, + value: eventState.level, + delay: 0, + }; + case "select_level_down": + case "select_level_up": + return { + action: setActiveLevel, + value: eventState.level, + delay: 1500, + }; + } + }, + [setActiveLevel] + ); + + useEffect(() => { + if (props.eventState) { + const dispatchedObject = dispatchObject(props.eventState); + + if (dispatchedObject) { + setTimeout(() => { + dispatchedObject.action(dispatchedObject.value as any); + }, dispatchedObject.delay); + } + } + }, [props.eventState, dispatchObject]); + + return null; +}; + +export default LevelManager; diff --git a/src/core/StateManagers/LevelSelectionManager.tsx b/src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx similarity index 72% rename from src/core/StateManagers/LevelSelectionManager.tsx rename to src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx index 995caf1..ac4488b 100644 --- a/src/core/StateManagers/LevelSelectionManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect } from "react"; -import { StateManagerProps } from "./EventManager"; -import { useLevelSelectionStore } from "../../store"; +import { StateManagerProps } from "../EventManager"; +import { useLevelSelectionStore } from "../../../store"; const LevelSelectionManager = (props: StateManagerProps) => { const toggleLevelSelection = useLevelSelectionStore( @@ -11,8 +11,8 @@ const LevelSelectionManager = (props: StateManagerProps) => { ); const dispatchObject = useCallback( - (event: string, newSelectedLevelIdx: number) => { - switch (event) { + (eventState: { event: string; selectedLevelIdx: number }) => { + switch (eventState.event) { case "toggle_level_selection": case "level_selection_back": return { @@ -22,7 +22,7 @@ const LevelSelectionManager = (props: StateManagerProps) => { case "level_selection_down": return { action: setSelectedLevel, - value: newSelectedLevelIdx, + value: eventState.selectedLevelIdx, }; case "select_level_up": case "select_level_down": @@ -36,10 +36,7 @@ const LevelSelectionManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - const newSelectedLevelIdx = props.eventState.newSelectedLevelIdx; - - const dispatchedObject = dispatchObject(eventAction, newSelectedLevelIdx); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { dispatchedObject.action(dispatchedObject.value as any); diff --git a/src/core/StateManagers/MiddleRingManager.tsx b/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx similarity index 95% rename from src/core/StateManagers/MiddleRingManager.tsx rename to src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx index 72f7305..cb45421 100644 --- a/src/core/StateManagers/MiddleRingManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useMemo } from "react"; -import { useMiddleRingStore } from "../../store"; +import { useMiddleRingStore } from "../../../store"; const MiddleRingManager = (props: any) => { const setTransformState = useMiddleRingStore( @@ -140,8 +140,8 @@ const MiddleRingManager = (props: any) => { }, [setAnimDuration, setRotating, setTransformState]); const dispatchObject = useCallback( - (event: string) => { - switch (event) { + (eventState: { event: string }) => { + switch (eventState.event) { case "site_up": case "select_level_up": return { action: moveUp }; @@ -158,9 +158,7 @@ const MiddleRingManager = (props: any) => { ); useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - - const dispatchedObject = dispatchObject(eventAction); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { dispatchedObject.action.apply(null, dispatchedObject.value as any); diff --git a/src/core/StateManagers/NodeHUDManager.tsx b/src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx similarity index 79% rename from src/core/StateManagers/NodeHUDManager.tsx rename to src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx index f0c940b..c04b94d 100644 --- a/src/core/StateManagers/NodeHUDManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect } from "react"; -import { useHudStore } from "../../store"; -import { StateManagerProps } from "./EventManager"; +import { useHudStore } from "../../../store"; +import { StateManagerProps } from "../EventManager"; const NodeHUDManager = (props: StateManagerProps) => { const setId = useHudStore((state) => state.setId); @@ -41,20 +41,20 @@ const NodeHUDManager = (props: StateManagerProps) => { ); const dispatchObject = useCallback( - (event: string, targetNodeHudId: string) => { - switch (event) { + (eventState: { event: string; activeHudId: string }) => { + switch (eventState.event) { case "site_up": case "site_down": case "site_left": case "site_right": return { action: moveAndChangeNode, - value: [targetNodeHudId], + value: [eventState.activeHudId], }; case "change_node": return { action: changeNode, - value: [targetNodeHudId], + value: [eventState.activeHudId], }; case "toggle_level_selection": case "level_selection_back": @@ -65,7 +65,7 @@ const NodeHUDManager = (props: StateManagerProps) => { case "select_level_down": return { action: selectLevelAnimation, - value: [targetNodeHudId], + value: [eventState.activeHudId], }; } }, @@ -74,10 +74,7 @@ const NodeHUDManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - const newActiveHudId = props.eventState.newActiveHudId; - - const dispatchedObject = dispatchObject(eventAction, newActiveHudId); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { (dispatchedObject.action as any).apply(null, dispatchedObject.value); diff --git a/src/core/StateManagers/NodeManager.tsx b/src/core/StateManagers/MainSceneManagers/NodeManager.tsx similarity index 66% rename from src/core/StateManagers/NodeManager.tsx rename to src/core/StateManagers/MainSceneManagers/NodeManager.tsx index 520cb63..51d0dec 100644 --- a/src/core/StateManagers/NodeManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/NodeManager.tsx @@ -1,14 +1,12 @@ import { useCallback, useEffect } from "react"; -import { useNodeStore, useSiteSaveStore } from "../../store"; -import { StateManagerProps } from "./EventManager"; +import { useNodeStore } from "../../../store"; +import { StateManagerProps } from "../EventManager"; const NodeManager = (props: StateManagerProps) => { const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState); const setNodeMatrixIndices = useNodeStore( (state) => state.setNodeMatrixIndices ); - const siteASaveState = useSiteSaveStore((state) => state.a); - const siteBSaveState = useSiteSaveStore((state) => state.b); const animateActiveNodeThrow = useCallback( (siteRotY: number) => { @@ -72,28 +70,18 @@ const NodeManager = (props: StateManagerProps) => { [setActiveNodeState, setNodeMatrixIndices] ); - const setAfterChangeSite = useCallback( - (newSite: string) => { - const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState; - setActiveNodeState(siteToLoad.activeNodeId, "id"); - setNodeMatrixIndices(siteToLoad.nodeMatrixIndices); - }, - [setActiveNodeState, setNodeMatrixIndices, siteASaveState, siteBSaveState] - ); - const dispatchObject = useCallback( - ( - event: string, - newActiveNodeId: string, - newNodeMatrixIndices: { + (eventState: { + event: string; + activeNodeId: string; + nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number; - }, - newSiteRotY: number, - newSite: string - ) => { - switch (event) { + }; + siteRotY: number; + }) => { + switch (eventState.event) { case "site_up": case "site_down": case "site_left": @@ -102,17 +90,17 @@ const NodeManager = (props: StateManagerProps) => { case "select_level_down": return { action: updateActiveNode, - value: [newActiveNodeId, newNodeMatrixIndices, true, 3900], + value: [ + eventState.activeNodeId, + eventState.nodeMatrixIndices, + true, + 3900, + ], }; case "change_node": return { action: updateActiveNode, - value: [newActiveNodeId, newNodeMatrixIndices], - }; - case "pause_change_select": - return { - action: setAfterChangeSite, - value: [newSite], + value: [eventState.activeNodeId, eventState.nodeMatrixIndices], }; case "throw_node_media": case "throw_node_gate": @@ -120,29 +108,16 @@ const NodeManager = (props: StateManagerProps) => { case "throw_node_tak": return { action: animateActiveNodeThrow, - value: [newSiteRotY], + value: [eventState.siteRotY], }; } }, - [animateActiveNodeThrow, setAfterChangeSite, updateActiveNode] + [animateActiveNodeThrow, updateActiveNode] ); useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - const newActiveNodeId = props.eventState.newActiveNodeId; - const newNodeMatrixIndices = props.eventState.newNodeMatrixIndices; - - const newSiteRotY = props.eventState.newSiteRotY; - const newSite = props.eventState.newSite; - - const dispatchedObject = dispatchObject( - eventAction, - newActiveNodeId, - newNodeMatrixIndices, - newSiteRotY, - newSite - ); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { (dispatchedObject.action as any).apply( diff --git a/src/core/StateManagers/PauseComponentManager.tsx b/src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx similarity index 69% rename from src/core/StateManagers/PauseComponentManager.tsx rename to src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx index f937542..0b0ee02 100644 --- a/src/core/StateManagers/PauseComponentManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect } from "react"; -import { StateManagerProps } from "./EventManager"; -import { usePauseStore } from "../../store"; +import { StateManagerProps } from "../EventManager"; +import { usePauseStore } from "../../../store"; const PauseComponentManager = (props: StateManagerProps) => { const setComponentMatrixIdx = usePauseStore( @@ -9,13 +9,13 @@ const PauseComponentManager = (props: StateManagerProps) => { const setExitAnimation = usePauseStore((state) => state.setExitAnimation); const dispatchObject = useCallback( - (event: string, newComponentMatrixIdx: number) => { - switch (event) { + (eventState: { event: string; pauseMatrixIdx: number }) => { + switch (eventState.event) { case "pause_up": case "pause_down": return { action: setComponentMatrixIdx, - value: newComponentMatrixIdx, + value: eventState.pauseMatrixIdx, }; case "pause_exit_select": return { @@ -34,13 +34,7 @@ const PauseComponentManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - const newComponentMatrixIdx = props.eventState.newPauseMatrixIdx; - - const dispatchedObject = dispatchObject( - eventAction, - newComponentMatrixIdx - ); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { dispatchedObject.action(dispatchedObject.value as never); diff --git a/src/core/StateManagers/MainSceneManagers/SiteManager.tsx b/src/core/StateManagers/MainSceneManagers/SiteManager.tsx new file mode 100644 index 0000000..abbe0d2 --- /dev/null +++ b/src/core/StateManagers/MainSceneManagers/SiteManager.tsx @@ -0,0 +1,65 @@ +import { useCallback, useEffect } from "react"; +import { useSiteStore } from "../../../store"; +import { StateManagerProps } from "../EventManager"; + +const SiteManager = (props: StateManagerProps) => { + const setTransformState = useSiteStore((state) => state.setTransformState); + + const dispatchObject = useCallback( + (eventState: { + event: string; + sitePosY: number; + siteRotY: number; + }) => { + switch (eventState.event) { + case "site_up": + case "site_down": + case "select_level_up": + case "select_level_down": + return { + action: setTransformState, + value: [eventState.sitePosY, "posY"], + actionDelay: 1300, + }; + case "site_left": + case "site_right": + return { + action: setTransformState, + value: [eventState.siteRotY, "rotY"], + actionDelay: 1100, + }; + case "pause_game": + return { + action: setTransformState, + value: [Math.PI / 2, "rotX"], + actionDelay: 0, + }; + case "pause_exit_select": + return { + action: setTransformState, + value: [0, "rotX"], + actionDelay: 0, + }; + } + }, + [setTransformState] + ); + + useEffect(() => { + if (props.eventState) { + const dispatchedObject = dispatchObject(props.eventState); + + if (dispatchedObject) { + setTimeout(() => { + (dispatchedObject.action as any).apply( + null, + dispatchedObject.value as any + ); + }, dispatchedObject.actionDelay); + } + } + }, [dispatchObject, props.eventState]); + return null; +}; + +export default SiteManager; diff --git a/src/core/StateManagers/YellowTextManager.tsx b/src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx similarity index 78% rename from src/core/StateManagers/YellowTextManager.tsx rename to src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx index 796dd94..cc8d419 100644 --- a/src/core/StateManagers/YellowTextManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx @@ -1,10 +1,10 @@ -import { useCallback, useEffect } from "react"; -import node_huds from "../../resources/node_huds.json"; -import site_a from "../../resources/site_a.json"; -import site_b from "../../resources/site_b.json"; -import { useBigTextStore, useSiteStore } from "../../store"; -import { SiteType } from "../../components/MainScene/SyncedComponents/Site"; -import { StateManagerProps } from "./EventManager"; +import { useCallback, useEffect, useMemo } from "react"; +import node_huds from "../../../resources/node_huds.json"; +import site_a from "../../../resources/site_a.json"; +import site_b from "../../../resources/site_b.json"; +import { useBigTextStore, useSiteStore } from "../../../store"; +import { SiteType } from "../../../components/MainScene/SyncedComponents/Site"; +import { StateManagerProps } from "../EventManager"; const YellowTextManager = (props: StateManagerProps) => { const setTransformState = useBigTextStore((state) => state.setTransformState); @@ -20,7 +20,10 @@ const YellowTextManager = (props: StateManagerProps) => { const setVisible = useBigTextStore((state) => state.setVisible); const currentSite = useSiteStore((state) => state.currentSite); - const siteData = currentSite === "a" ? site_a : site_b; + + const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [ + currentSite, + ]); const animateYellowTextWithMove = useCallback( ( @@ -178,22 +181,36 @@ const YellowTextManager = (props: StateManagerProps) => { ); const dispatchObject = useCallback( - ( - event: string, - newActiveHudId: string | undefined, - newActiveNodeId: string | undefined, - newLevel: string - ) => { - switch (event) { + (eventState: { + event: string; + activeHudId: string; + activeNodeId: string; + level: string; + }) => { + switch (eventState.event) { case "site_up": return { action: animateYellowTextWithMove, - value: [0, -1.5, newActiveHudId, newActiveNodeId, newLevel, 1300], + value: [ + 0, + -1.5, + eventState.activeHudId, + eventState.activeNodeId, + eventState.level, + 1300, + ], }; case "site_down": return { action: animateYellowTextWithMove, - value: [0, 1.5, newActiveHudId, newActiveNodeId, newLevel, 1300], + value: [ + 0, + 1.5, + eventState.activeHudId, + eventState.activeNodeId, + eventState.level, + 1300, + ], }; case "site_left": return { @@ -201,9 +218,9 @@ const YellowTextManager = (props: StateManagerProps) => { value: [ Math.PI / 4, 0, - newActiveHudId, - newActiveNodeId, - newLevel, + eventState.activeHudId, + eventState.activeNodeId, + eventState.level, 1100, ], }; @@ -213,21 +230,29 @@ const YellowTextManager = (props: StateManagerProps) => { value: [ -Math.PI / 4, 0, - newActiveHudId, - newActiveNodeId, - newLevel, + eventState.activeHudId, + eventState.activeNodeId, + eventState.level, 1100, ], }; case "change_node": return { action: animateYellowTextWithoutMove, - value: [newActiveHudId, newActiveNodeId, newLevel], + value: [ + eventState.activeHudId, + eventState.activeNodeId, + eventState.level, + ], }; case "level_selection_back": return { action: levelSelectionBack, - value: [newActiveNodeId, newActiveHudId, newLevel], + value: [ + eventState.activeNodeId, + eventState.activeHudId, + eventState.level, + ], }; case "toggle_level_selection": return { @@ -237,7 +262,11 @@ const YellowTextManager = (props: StateManagerProps) => { case "select_level_down": return { action: toggleVisibleAfterLevelSelect, - value: [newActiveNodeId, newActiveHudId, newLevel], + value: [ + eventState.activeNodeId, + eventState.activeHudId, + eventState.level, + ], }; } }, @@ -252,18 +281,7 @@ const YellowTextManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - - const newActiveNodeId = props.eventState.newActiveNodeId; - const newActiveHudId = props.eventState.newActiveHudId; - const newLevel = props.eventState.newLevel; - - const dispatchedObject = dispatchObject( - eventAction, - newActiveHudId, - newActiveNodeId, - newLevel - ); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { (dispatchedObject.action as any).apply(null, dispatchedObject.value); diff --git a/src/core/StateManagers/MediaComponentManager.tsx b/src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx similarity index 77% rename from src/core/StateManagers/MediaComponentManager.tsx rename to src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx index 1dca515..b34750a 100644 --- a/src/core/StateManagers/MediaComponentManager.tsx +++ b/src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect } from "react"; -import { StateManagerProps } from "./EventManager"; -import { useMediaStore, useMediaWordStore } from "../../store"; +import { StateManagerProps } from "../EventManager"; +import { useMediaStore, useMediaWordStore } from "../../../store"; import * as THREE from "three"; const MediaComponentManager = (props: StateManagerProps) => { @@ -59,24 +59,27 @@ const MediaComponentManager = (props: StateManagerProps) => { }, [resetComponentMatrixIndices, resetWordPosStateIdx]); const dispatchObject = useCallback( - ( - event: string, - newLeftSideComponentIdx: number, - newRightSideComponentIdx: number, - newWordPosStateIdx: number - ) => { - switch (event) { + (eventState: { + event: string; + leftSideComponentIdx: number; + rightSideComponentIdx: number; + wordPosStateIdx: number; + }) => { + switch (eventState.event) { case "media_rightside_down": case "media_rightside_up": return { action: updateRightSide, - value: [newRightSideComponentIdx, newWordPosStateIdx], + value: [ + eventState.rightSideComponentIdx, + eventState.wordPosStateIdx, + ], }; case "media_leftside_down": case "media_leftside_up": return { action: setLeftComponentMatrixIdx, - value: [newLeftSideComponentIdx], + value: [eventState.leftSideComponentIdx], }; case "media_leftside_right": case "media_rightside_left": @@ -105,18 +108,7 @@ const MediaComponentManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - const newLeftSideComponentIdx = props.eventState.newLeftSideComponentIdx; - const newRightSideComponentIdx = - props.eventState.newRightSideComponentIdx; - const newWordPosStateIdx = props.eventState.newWordPosStateIdx; - - const dispatchedObject = dispatchObject( - eventAction, - newLeftSideComponentIdx, - newRightSideComponentIdx, - newWordPosStateIdx - ); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { dispatchedObject.action.apply(null, dispatchedObject.value); diff --git a/src/core/StateManagers/MediaYellowTextManager.tsx b/src/core/StateManagers/MediaYellowTextManager.tsx index 25cd89b..9da6b19 100644 --- a/src/core/StateManagers/MediaYellowTextManager.tsx +++ b/src/core/StateManagers/MediaYellowTextManager.tsx @@ -35,8 +35,8 @@ const MediaYellowTextManager = (props: StateManagerProps) => { ); const dispatchObject = useCallback( - (event: string) => { - switch (event) { + (eventState: { event: string }) => { + switch (eventState.event) { case "media_leftside_up": case "throw_node_media": return { @@ -55,9 +55,7 @@ const MediaYellowTextManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - - const dispatchedObject = dispatchObject(eventAction); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { (dispatchedObject.action as any).apply(null, dispatchedObject.value); diff --git a/src/core/StateManagers/SSknComponentManager.tsx b/src/core/StateManagers/SSknComponentManager.tsx index b65641a..b0ec694 100644 --- a/src/core/StateManagers/SSknComponentManager.tsx +++ b/src/core/StateManagers/SSknComponentManager.tsx @@ -12,8 +12,8 @@ const SSknComponentManager = (props: StateManagerProps) => { const toggleLoading = useSSknStore((state) => state.toggleLoading); const dispatchObject = useCallback( - (event: string) => { - switch (event) { + (eventState: { event: string }) => { + switch (eventState.event) { case "sskn_ok_down": case "sskn_cancel_up": return { @@ -30,9 +30,7 @@ const SSknComponentManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - - const dispatchedObject = dispatchObject(eventAction); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { dispatchedObject.action(); diff --git a/src/core/StateManagers/SceneManager.tsx b/src/core/StateManagers/SceneManager.tsx index 15cf4e4..2664df9 100644 --- a/src/core/StateManagers/SceneManager.tsx +++ b/src/core/StateManagers/SceneManager.tsx @@ -7,15 +7,15 @@ const SceneManager = (props: StateManagerProps) => { const setMainSceneIntro = useMainSceneStore((state) => state.setIntro); const dispatchObject = useCallback( - (event: string, newScene: string) => { - switch (event) { + (eventState: { event: string; scene: string }) => { + switch (eventState.event) { case "throw_node_media": case "throw_node_gate": case "throw_node_sskn": case "throw_node_tak": return { action: setScene, - value: newScene, + value: eventState.scene, delay: 3450, setMainSceneIntro: false, }; @@ -47,10 +47,7 @@ const SceneManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - const newScene = props.eventState.newScene; - - const dispatchedObject = dispatchObject(eventAction, newScene); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { setTimeout(() => { diff --git a/src/core/StateManagers/SiteManager.tsx b/src/core/StateManagers/SiteManager.tsx deleted file mode 100644 index 6658274..0000000 --- a/src/core/StateManagers/SiteManager.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { useCallback, useEffect } from "react"; -import { useSiteSaveStore, useSiteStore } from "../../store"; -import { StateManagerProps } from "./EventManager"; - -const SiteManager = (props: StateManagerProps) => { - const setTransformState = useSiteStore((state) => state.setTransformState); - const setCurrentSite = useSiteStore((state) => state.setCurrentSite); - - const siteASaveState = useSiteSaveStore((state) => state.a); - const siteBSaveState = useSiteSaveStore((state) => state.b); - - const changeSite = useCallback( - (newSite: string) => { - setTransformState(0, "rotX"); - - const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState; - - setCurrentSite(newSite); - setTransformState(siteToLoad.siteRotY, "rotY"); - setTransformState(siteToLoad.sitePosY, "posY"); - }, - [setCurrentSite, setTransformState, siteASaveState, siteBSaveState] - ); - - const dispatchObject = useCallback( - ( - event: string, - newSitePosY: number, - newSiteRotY: number, - currentSite: string, - newSite: string - ) => { - switch (event) { - case "site_up": - case "site_down": - case "select_level_up": - case "select_level_down": - return { - action: setTransformState, - value: [newSitePosY, "posY"], - actionDelay: 1300, - }; - case "site_left": - case "site_right": - return { - action: setTransformState, - value: [newSiteRotY, "rotY"], - actionDelay: 1100, - }; - case "pause_game": - return { - action: setTransformState, - value: [Math.PI / 2, "rotX"], - actionDelay: 0, - }; - case "pause_exit_select": - return { - action: setTransformState, - value: [0, "rotX"], - actionDelay: 0, - }; - case "pause_change_select": - return { - action: changeSite, - value: [newSite], - actionDelay: 0, - }; - } - }, - [changeSite, setTransformState] - ); - - useEffect(() => { - if (props.eventState) { - const eventAction = props.eventState.event; - const newSiteRotY = props.eventState.newSiteRotY; - const newSitePosY = props.eventState.newSitePosY; - - const currentSite = props.eventState.currentSite; - const newSite = props.eventState.newSite; - - const dispatchedObject = dispatchObject( - eventAction, - newSitePosY, - newSiteRotY, - currentSite, - newSite - ); - - if (dispatchedObject) { - setTimeout(() => { - (dispatchedObject.action as any).apply( - null, - dispatchedObject.value as any - ); - }, dispatchedObject.actionDelay); - } - } - }, [dispatchObject, props.eventState]); - return null; -}; - -export default SiteManager; diff --git a/src/core/StateManagers/SiteSaveManager.tsx b/src/core/StateManagers/SiteSaveManager.tsx deleted file mode 100644 index be9ba82..0000000 --- a/src/core/StateManagers/SiteSaveManager.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { useCallback, useEffect } from "react"; -import { useSiteSaveStore } from "../../store"; -import { StateManagerProps } from "./EventManager"; - -const SiteSaveManager = (props: StateManagerProps) => { - const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState); - - const dispatchObject = useCallback( - ( - event: string, - sitePosY: number, - siteRotY: number, - currentSite: string, - newSite: string, - activeNodeId: string, - activeNodeMatrixIndices: { - matrixIdx: number; - rowIdx: number; - colIdx: number; - }, - level: string - ) => { - switch (event) { - case "pause_change_select": - return { - action: setSiteSaveState, - value: [ - currentSite, - { - activeNodeId: activeNodeId, - nodeMatrixIndices: activeNodeMatrixIndices, - siteRotY: siteRotY, - sitePosY: sitePosY, - level: level.toString().padStart(2, "0"), - }, - ], - actionDelay: 0, - }; - } - }, - [setSiteSaveState] - ); - - useEffect(() => { - if (props.eventState) { - const eventAction = props.eventState.event; - const siteRotY = props.eventState.currentSiteRotY; - const sitePosY = props.eventState.currentSitePosY; - const activeNodeId = props.eventState.currentActiveNodeId; - const activeNodeMatrixIndices = - props.eventState.currentActiveNodeMatrixIndices; - const newLevel = props.eventState.currentLevel; - - const currentSite = props.eventState.currentSite; - const newSite = props.eventState.newSite; - - const dispatchedObject = dispatchObject( - eventAction, - sitePosY, - siteRotY, - currentSite, - newSite, - activeNodeId, - activeNodeMatrixIndices, - newLevel - ); - - if (dispatchedObject) { - setTimeout(() => { - dispatchedObject.action.apply(null, dispatchedObject.value as any); - }, dispatchedObject.actionDelay); - } - } - }, [dispatchObject, props.eventState]); - return null; -}; - -export default SiteSaveManager; diff --git a/src/core/StateManagers/SubsceneManager.tsx b/src/core/StateManagers/SubsceneManager.tsx index f02aad2..c3c1932 100644 --- a/src/core/StateManagers/SubsceneManager.tsx +++ b/src/core/StateManagers/SubsceneManager.tsx @@ -7,8 +7,8 @@ const SubsceneManager = (props: StateManagerProps) => { const setBootSubscene = useBootStore((state) => state.setSubscene); const dispatchObject = useCallback( - (event: string) => { - switch (event) { + (eventState: { event: string }) => { + switch (eventState.event) { case "level_selection_back": case "select_level_up": case "select_level_down": @@ -58,9 +58,7 @@ const SubsceneManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.event; - - const dispatchedObject = dispatchObject(eventAction); + const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { setTimeout(() => { diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index d7e58f2..a651af8 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/src/core/mainSceneEventHandler.ts @@ -12,21 +12,18 @@ const handleMainSceneEvent = (gameContext: any) => { const pauseMatrixIdx = gameContext.pauseMatrixIdx; const activePauseComponent = gameContext.activePauseComponent; const gameProgress = gameContext.gameProgress; - const activeNodeId = gameContext.activeNodeId; const currentSite = gameContext.currentSite; + const siteASaveState = gameContext.siteASaveState; + const siteBSaveState = gameContext.siteBSaveState; + + let activeNodeId = gameContext.activeNodeId; + let activeHudId; let nodeMatrixIndices = gameContext.nodeMatrixIndices; - - const level = parseInt(gameContext.activeLevel); - const siteRotY = gameContext.siteTransformState.rotY; - const sitePosY = gameContext.siteTransformState.posY; - - let newActiveNodeId = gameContext.activeNodeId; - let newActiveHudId; - let newLevel = parseInt(gameContext.activeLevel); - let newSiteRotY = gameContext.siteTransformState.rotY; - let newSitePosY = gameContext.siteTransformState.posY; - let newScene = gameContext.scene; + let level = parseInt(gameContext.activeLevel); + let siteRotY = gameContext.siteTransformState.rotY; + let sitePosY = gameContext.siteTransformState.posY; + let scene = gameContext.scene; if (subscene === "site") { let selectedNodeData; @@ -48,12 +45,12 @@ const handleMainSceneEvent = (gameContext: any) => { if (selectedNodeData) { event = selectedNodeData.event; - newActiveNodeId = selectedNodeData.newActiveNodeId; + activeNodeId = selectedNodeData.newActiveNodeId; nodeMatrixIndices = selectedNodeData.newNodeMatrixIndices; - newSiteRotY = selectedNodeData.newSiteRotY; - newSitePosY = selectedNodeData.newSitePosY; - newLevel = selectedNodeData.newLevel; - newActiveHudId = selectedNodeData.newActiveHudId; + siteRotY = selectedNodeData.newSiteRotY; + sitePosY = selectedNodeData.newSitePosY; + level = selectedNodeData.newLevel; + activeHudId = selectedNodeData.newActiveHudId; } break; @@ -61,12 +58,12 @@ const handleMainSceneEvent = (gameContext: any) => { // in this case we have to check the type of the blue orb // and dispatch an action depending on that, so we have to precalculate the // new active blue orb here. - newActiveNodeId = getNodeId(level, nodeMatrixIndices); + activeNodeId = getNodeId(level, nodeMatrixIndices); const siteData = currentSite === "a" ? site_a : site_b; const nodeData = (siteData as SiteType)[gameContext.activeLevel][ - newActiveNodeId + activeNodeId ]; const nodeType = nodeData.type; @@ -79,24 +76,24 @@ const handleMainSceneEvent = (gameContext: any) => { case 3: case 5: event = eventAnimation + "media"; - newScene = "media"; + scene = "media"; break; case 6: if (nodeData.node_name.substr(0, 3) === "TaK") { event = eventAnimation + "tak"; - newScene = "tak"; + scene = "tak"; } else { event = eventAnimation + "media"; - newScene = "media"; + scene = "media"; } break; case 8: event = eventAnimation + "gate"; - newScene = "gate"; + scene = "gate"; break; case 7: event = eventAnimation + "sskn"; - newScene = "sskn"; + scene = "sskn"; break; } break; @@ -108,13 +105,13 @@ const handleMainSceneEvent = (gameContext: any) => { return { event: event, - newNodeMatrixIndices: nodeMatrixIndices, - newSitePosY: newSitePosY, - newSiteRotY: newSiteRotY, - newLevel: newLevel.toString().padStart(2, "0"), - newScene: newScene, - newActiveNodeId: newActiveNodeId, - newActiveHudId: newActiveHudId, + nodeMatrixIndices: nodeMatrixIndices, + sitePosY: sitePosY, + siteRotY: siteRotY, + level: level.toString().padStart(2, "0"), + scene: scene, + activeNodeId: activeNodeId, + activeHudId: activeHudId, }; } else if (subscene === "level_selection") { switch (keyPress) { @@ -123,13 +120,13 @@ const handleMainSceneEvent = (gameContext: any) => { if (selectedLevel + 1 <= 22) return { event: `level_selection_up`, - newSelectedLevelIdx: selectedLevel + 1, + selectedLevelIdx: selectedLevel + 1, }; } else if (currentSite === "b") { if (selectedLevel + 1 <= 13) return { event: `level_selection_up`, - newSelectedLevelIdx: selectedLevel + 1, + selectedLevelIdx: selectedLevel + 1, }; } break; @@ -137,15 +134,15 @@ const handleMainSceneEvent = (gameContext: any) => { if (selectedLevel - 1 >= 1) return { event: `level_selection_down`, - newSelectedLevelIdx: selectedLevel - 1, + selectedLevelIdx: selectedLevel - 1, }; break; case "X": return { event: "level_selection_back", - newActiveNodeId: getNodeId(newLevel, nodeMatrixIndices), - newActiveHudId: getNodeHudId(nodeMatrixIndices), - newLevel: newLevel.toString().padStart(2, "0"), + activeNodeId: getNodeId(level, nodeMatrixIndices), + activeHudId: getNodeHudId(nodeMatrixIndices), + level: level.toString().padStart(2, "0"), }; case "CIRCLE": const selectedNodeData = nodeSelector({ @@ -165,11 +162,11 @@ const handleMainSceneEvent = (gameContext: any) => { selectedLevel < level ? "select_level_down" : "select_level_up"; return { event: event, - newLevel: selectedLevel.toString().padStart(2, "0"), - newActiveNodeId: selectedNodeData.newActiveNodeId, - newActiveHudId: selectedNodeData.newActiveHudId, - newNodeMatrixIndices: selectedNodeData.newNodeMatrixIndices, - newSitePosY: -selectedNodeData.newSitePosY, + level: selectedLevel.toString().padStart(2, "0"), + activeNodeId: selectedNodeData.newActiveNodeId, + activeHudId: selectedNodeData.newActiveHudId, + nodeMatrixIndices: selectedNodeData.newNodeMatrixIndices, + sitePosY: -selectedNodeData.newSitePosY, }; } } @@ -179,24 +176,24 @@ const handleMainSceneEvent = (gameContext: any) => { if (pauseMatrixIdx - 1 < 0) break; return { event: "pause_up", - newPauseMatrixIdx: pauseMatrixIdx - 1, + pauseMatrixIdx: pauseMatrixIdx - 1, }; case "DOWN": if (pauseMatrixIdx + 1 > 4) break; return { event: "pause_down", - newPauseMatrixIdx: pauseMatrixIdx + 1, + pauseMatrixIdx: pauseMatrixIdx + 1, }; case "CIRCLE": return { event: `pause_${activePauseComponent}_select`, - currentSite: currentSite, - currentSitePosY: newSitePosY, - currentSiteRotY: newSiteRotY, - currentActiveNodeId: newActiveNodeId, - currentActiveNodeMatrixIndices: nodeMatrixIndices, - currentLevel: newLevel, - newSite: currentSite === "a" ? "b" : "a", + currentSitePosY: sitePosY, + currentSiteRotY: siteRotY, + currentNodeId: activeNodeId, + currentNodeMatrixIndices: nodeMatrixIndices, + currentHudId: getNodeHudId(nodeMatrixIndices), + currentLevel: level.toString().padStart(2, "0"), + site: currentSite === "a" ? "b" : "a", }; } } diff --git a/src/core/mediaSceneEventHandler.ts b/src/core/mediaSceneEventHandler.ts index a4de56d..b1e0be3 100644 --- a/src/core/mediaSceneEventHandler.ts +++ b/src/core/mediaSceneEventHandler.ts @@ -33,8 +33,8 @@ const handleMediaSceneEvent = (gameContext: any) => { } return { - newWordPosStateIdx: wordPosStateIdx, - newRightSideComponentIdx: rightSideComponentIdx, + wordPosStateIdx: wordPosStateIdx, + rightSideComponentIdx: rightSideComponentIdx, }; }; @@ -44,21 +44,21 @@ const handleMediaSceneEvent = (gameContext: any) => { case "RIGHT": case "LEFT": if (rightSideComponents.includes(activeMediaComponent)) { - const newRightSide = calculateNewRightSide( + const rightSide = calculateNewRightSide( keyPress, wordPosStateIdx, rightSideComponentIdx ); return { event: `media_rightside_${keyPress.toLowerCase()}`, - newRightSideComponentIdx: newRightSide.newRightSideComponentIdx, - newWordPosStateIdx: newRightSide.newWordPosStateIdx, + rightSideComponentIdx: rightSide.rightSideComponentIdx, + wordPosStateIdx: rightSide.wordPosStateIdx, }; } else { - const newLeftSideComponentIdx = keyPress === "UP" ? 0 : 1; + const leftSideComponentIdx = keyPress === "UP" ? 0 : 1; return { event: `media_leftside_${keyPress.toLowerCase()}`, - newLeftSideComponentIdx: newLeftSideComponentIdx, + leftSideComponentIdx: leftSideComponentIdx, }; } case "CIRCLE": diff --git a/src/store.ts b/src/store.ts index aa3a202..1ea381f 100644 --- a/src/store.ts +++ b/src/store.ts @@ -8,6 +8,7 @@ type SiteSaveState = { a: { activeNodeId: string; nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number }; + nodeHudId: string; siteRotY: number; sitePosY: number; level: string; @@ -15,6 +16,7 @@ type SiteSaveState = { b: { activeNodeId: string; nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number }; + nodeHudId: string; siteRotY: number; sitePosY: number; level: string; @@ -213,10 +215,10 @@ export const useBigTextStore = create( visible: true, color: "yellow", disableTrail: false, - text: "", + text: "Tda028", transformState: { - posX: 0, - posY: 0, + posX: -0.35, + posY: 0.23, xOffset: 0, }, } as BigTextState, @@ -247,8 +249,8 @@ export const useGreenTextStore = create( { text: "TOUKO's DIARY", transformState: { - posX: { initial: 0, final: 0 }, - posY: 0, + posX: { initial: 1.18, final: 0.18 }, + posY: 0.16, xOffset: 0, }, active: 1, @@ -550,6 +552,7 @@ export const useSiteSaveStore = create( a: { activeNodeId: "0422", nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 }, + nodeHudId: "fg_hud_1", siteRotY: 0, sitePosY: 0, level: "04", @@ -557,6 +560,7 @@ export const useSiteSaveStore = create( b: { activeNodeId: "0414", nodeMatrixIndices: { matrixIdx: 7, rowIdx: 1, colIdx: 0 }, + nodeHudId: "fg_hud_2", siteRotY: 0, sitePosY: 0, level: "04", @@ -572,6 +576,7 @@ export const useSiteSaveStore = create( rowIdx: number; colIdx: number; }; + nodeHudId: string; siteRotY: number; sitePosY: number; level: string;