From cb5cf6a1c191becae574f0642cd079b9aa44b2c6 Mon Sep 17 00:00:00 2001 From: ad044 Date: Thu, 24 Dec 2020 21:24:27 +0400 Subject: [PATCH] site change bug fix and some additions to it --- .../MainScene/PauseSubscene/Pause.tsx | 15 ++----- src/components/MainScene/Site.tsx | 7 ++-- src/core/StateManagers/NodeManager.tsx | 41 +++++++++++++++---- src/core/StateManagers/SceneManager.tsx | 6 +++ src/core/StateManagers/SiteManager.tsx | 18 +++++--- src/core/StateManagers/SubsceneManager.tsx | 1 + src/core/mainSceneEventHandler.ts | 3 +- src/scenes/ChangeDiscScene.tsx | 32 ++++++--------- src/store.ts | 9 ++-- 9 files changed, 80 insertions(+), 52 deletions(-) diff --git a/src/components/MainScene/PauseSubscene/Pause.tsx b/src/components/MainScene/PauseSubscene/Pause.tsx index 50c02e2..a8f1de3 100644 --- a/src/components/MainScene/PauseSubscene/Pause.tsx +++ b/src/components/MainScene/PauseSubscene/Pause.tsx @@ -54,6 +54,9 @@ const Pause = (props: { visible: boolean }) => { ); useEffect(() => { + setAnimation(false); + setIntro(true); + setShowActiveComponent(false); if (props.visible) { setTimeout(() => { setAnimation(true); @@ -63,20 +66,10 @@ const Pause = (props: { visible: boolean }) => { setIntro(false); }, 3500); } - return () => { - setTimeout(() => { - setAnimation(false); - setIntro(true); - setShowActiveComponent(false); - }, 700); - }; }, [props.visible]); 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) { diff --git a/src/components/MainScene/Site.tsx b/src/components/MainScene/Site.tsx index a396076..476c5a9 100644 --- a/src/components/MainScene/Site.tsx +++ b/src/components/MainScene/Site.tsx @@ -30,6 +30,7 @@ export type SiteType = { const Site = () => { const siteTransformState = useSiteStore((state) => state.transformState); + const introAnim = useSiteStore((state) => state.introAnim); const siteState = useSpring({ siteRotY: siteTransformState.rotY, @@ -41,7 +42,7 @@ const Site = () => { const introSiteState = useSpring({ posZ: 0, rotX: 0, - from: { posZ: -7, rotX: Math.PI / 2 }, + from: { posZ: introAnim ? -7 : 0, rotX: introAnim ? Math.PI / 2 : 0 }, config: { duration: 3900 }, }); @@ -56,8 +57,8 @@ const Site = () => { rotation-y={siteState.siteRotY} position-y={siteState.sitePosY} > - {/**/} - {/**/} + + diff --git a/src/core/StateManagers/NodeManager.tsx b/src/core/StateManagers/NodeManager.tsx index 0e755f3..062603f 100644 --- a/src/core/StateManagers/NodeManager.tsx +++ b/src/core/StateManagers/NodeManager.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect } from "react"; -import { useNodeStore } from "../../store"; +import { useNodeStore, useSiteSaveStore } from "../../store"; import { StateManagerProps } from "./EventManager"; const NodeManager = (props: StateManagerProps) => { @@ -7,6 +7,8 @@ const NodeManager = (props: StateManagerProps) => { const setNodeMatrixIndices = useNodeStore( (state) => state.setNodeMatrixIndices ); + const siteASaveState = useSiteSaveStore((state) => state.a); + const siteBSaveState = useSiteSaveStore((state) => state.b); const animateActiveNodeThrow = useCallback( (siteRotY: number) => { @@ -53,14 +55,14 @@ const NodeManager = (props: StateManagerProps) => { const updateActiveNode = useCallback( ( - delay: number, - isMoving: boolean, newActiveNodeId: string, newNodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number; - } + }, + isMoving?: boolean, + delay?: number ) => { setTimeout(() => { setActiveNodeState(newActiveNodeId, "id"); @@ -70,6 +72,15 @@ 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, @@ -79,7 +90,8 @@ const NodeManager = (props: StateManagerProps) => { rowIdx: number; colIdx: number; }, - newSiteRotY: number + newSiteRotY: number, + newSite: string ) => { switch (event) { case "site_up": @@ -90,12 +102,17 @@ const NodeManager = (props: StateManagerProps) => { case "select_level_down": return { action: updateActiveNode, - value: [3900, true, newActiveNodeId, newNodeMatrixIndices], + value: [newActiveNodeId, newNodeMatrixIndices, true, 3900], }; case "change_node": return { action: updateActiveNode, - value: [0, false, newActiveNodeId, newNodeMatrixIndices], + value: [newActiveNodeId, newNodeMatrixIndices], + }; + case "pause_change_select": + return { + action: setAfterChangeSite, + value: [newSite], }; case "throw_node_media": case "throw_node_gate": @@ -115,17 +132,23 @@ const NodeManager = (props: StateManagerProps) => { 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 + newSiteRotY, + newSite ); if (dispatchedObject) { - dispatchedObject.action.apply(null, dispatchedObject.value as never); + (dispatchedObject.action as any).apply( + null, + dispatchedObject.value as never + ); } } }, [props.eventState, setActiveNodeState, dispatchObject]); diff --git a/src/core/StateManagers/SceneManager.tsx b/src/core/StateManagers/SceneManager.tsx index 65a1625..6ac2c69 100644 --- a/src/core/StateManagers/SceneManager.tsx +++ b/src/core/StateManagers/SceneManager.tsx @@ -31,6 +31,12 @@ const SceneManager = (props: StateManagerProps) => { value: "main", delay: 6000, }; + case "pause_change_select": + return { + action: setScene, + value: "change_disc", + delay: 0, + }; } }, [setScene] diff --git a/src/core/StateManagers/SiteManager.tsx b/src/core/StateManagers/SiteManager.tsx index 8f25714..c91b9ba 100644 --- a/src/core/StateManagers/SiteManager.tsx +++ b/src/core/StateManagers/SiteManager.tsx @@ -5,6 +5,7 @@ import { StateManagerProps } from "./EventManager"; const SiteManager = (props: StateManagerProps) => { const setTransformState = useSiteStore((state) => state.setTransformState); const setCurrentSite = useSiteStore((state) => state.setCurrentSite); + const setIntroAnim = useSiteStore((state) => state.setIntroAnim); const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState); const siteASaveState = useSiteSaveStore((state) => state.a); @@ -23,6 +24,9 @@ const SiteManager = (props: StateManagerProps) => { sitePosY: number, newSite: string ) => { + setTransformState(0, "rotX"); + setIntroAnim(true); + setSiteSaveState(currentSite, { activeNodeId: activeNodeId, nodeMatrixIndices: activeNodeMatrixIndices, @@ -33,13 +37,12 @@ const SiteManager = (props: StateManagerProps) => { const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState; setCurrentSite(newSite); - setTransformState(siteToLoad.rotY, "rotY"); - setTransformState(siteToLoad.posY, "posY"); - - console.log(newSite) + setTransformState(siteToLoad.siteRotY, "rotY"); + setTransformState(siteToLoad.sitePosY, "posY"); }, [ setCurrentSite, + setIntroAnim, setSiteSaveState, setTransformState, siteASaveState, @@ -103,9 +106,14 @@ const SiteManager = (props: StateManagerProps) => { ], actionDelay: 0, }; + case "throw_node_media": + case "throw_node_gate": + case "throw_node_sskn": + case "throw_node_tak": + return { action: setIntroAnim, value: [false], actionDelay: 0 }; } }, - [changeSite, setTransformState] + [changeSite, setIntroAnim, setTransformState] ); useEffect(() => { diff --git a/src/core/StateManagers/SubsceneManager.tsx b/src/core/StateManagers/SubsceneManager.tsx index 18cf393..f02aad2 100644 --- a/src/core/StateManagers/SubsceneManager.tsx +++ b/src/core/StateManagers/SubsceneManager.tsx @@ -30,6 +30,7 @@ const SubsceneManager = (props: StateManagerProps) => { delay: 0, }; case "pause_exit_select": + case "pause_change_select": return { action: setMainSubscene, value: "site", diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 36298ff..6243529 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/src/core/mainSceneEventHandler.ts @@ -1,4 +1,3 @@ -import node_matrices from "../resources/node_matrices.json"; import site_a from "../resources/site_a.json"; import site_b from "../resources/site_b.json"; import nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector"; @@ -193,7 +192,7 @@ const handleMainSceneEvent = (gameContext: any) => { event: `pause_${activePauseComponent}_select`, currentSite: currentSite, newSitePosY: newSitePosY, - newtSiteRotY: newSiteRotY, + newSiteRotY: newSiteRotY, activeNodeId: newActiveNodeId, activeNodeMatrixIndices: nodeMatrixIndices, newSite: currentSite === "a" ? "b" : "a", diff --git a/src/scenes/ChangeDiscScene.tsx b/src/scenes/ChangeDiscScene.tsx index 811702c..70ed74c 100644 --- a/src/scenes/ChangeDiscScene.tsx +++ b/src/scenes/ChangeDiscScene.tsx @@ -1,29 +1,23 @@ import React, { useEffect } from "react"; - -import lof from "../../src/static/sprite/disc_lof.png"; -import changeSiteText from "../../src/static/sprite/disc_change_site.png"; -import { useLoader } from "react-three-fiber"; -import * as THREE from "three"; +import { useSceneStore } from "../store"; const ChangeDiscScene = () => { - const lofTex = useLoader(THREE.TextureLoader, lof); - const changeSiteTextTex = useLoader(THREE.TextureLoader, changeSiteText); - + const setScene = useSceneStore((state) => state.setScene); useEffect(() => { document.getElementsByTagName("canvas")[0].className = "change-disc-scene-background"; - }, []); - return ( - <> - - - - - - - - ); + setTimeout(() => { + setScene("main"); + }, 3500); + + return () => { + document.getElementsByTagName("canvas")[0].className = + "main-scene-background"; + }; + }, [setScene]); + + return <>; }; export default ChangeDiscScene; diff --git a/src/store.ts b/src/store.ts index db49b47..0a7ffca 100644 --- a/src/store.ts +++ b/src/store.ts @@ -58,6 +58,7 @@ type StarfieldState = { }; type SiteState = { + introAnim: boolean; currentSite: "a" | "b"; transformState: { posY: number; @@ -303,6 +304,7 @@ export const useStarfieldStore = create((set) => ({ export const useSiteStore = create( combine( { + introAnim: true, currentSite: "a", transformState: { posY: 0, @@ -317,6 +319,7 @@ export const useSiteStore = create( })), setCurrentSite: (to: string) => set(() => ({ currentSite: to as "a" | "b" })), + setIntroAnim: (to: boolean) => set(() => ({ introAnim: to })), }) ) ); @@ -423,7 +426,7 @@ export const useSSknStore = create((set) => ({ })); export const useSceneStore = create((set) => ({ - currentScene: "change_disc", + currentScene: "main", setScene: (to) => set(() => ({ currentScene: to })), })); @@ -533,8 +536,8 @@ export const useSiteSaveStore = create( sitePosY: 0, }, b: { - activeNodeId: "0422", - nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 }, + activeNodeId: "0414", + nodeMatrixIndices: { matrixIdx: 7, rowIdx: 1, colIdx: 0 }, siteRotY: 0, sitePosY: 0, },