From ca24f91ae131a1e2692292866f313ae1ccd72f5b Mon Sep 17 00:00:00 2001 From: ad044 Date: Wed, 11 Nov 2020 22:40:50 +0400 Subject: [PATCH] not much today, cleaned a bit of stuff and added "back" button --- src/components/Boot/BootAuthorizeUser.tsx | 4 +- src/components/Boot/BootLoadData.tsx | 8 +- .../Boot/BootMainMenuComponents.tsx | 81 ++++++++++--------- src/core/StateManagers/BootManager.tsx | 48 +++++------ src/core/StateManagers/EventManager.tsx | 12 +-- src/core/StateManagers/SubSceneManager.tsx | 14 ++-- src/core/bootEventHandler.ts | 5 +- src/store.ts | 25 +----- 8 files changed, 92 insertions(+), 105 deletions(-) diff --git a/src/components/Boot/BootAuthorizeUser.tsx b/src/components/Boot/BootAuthorizeUser.tsx index 548f77f..0ad7e1a 100644 --- a/src/components/Boot/BootAuthorizeUser.tsx +++ b/src/components/Boot/BootAuthorizeUser.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useMemo, useState } 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"; @@ -98,7 +98,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => { { const yesTex = useLoader(THREE.TextureLoader, yes); const noTex = useLoader(THREE.TextureLoader, no); - const activeLoadDataElement = useBootStore( - (state) => state.activeLoadDataElement - ); + const activeBootElement = useBootStore((state) => state.activeBootElement); return ( <> @@ -67,7 +65,9 @@ const BootLoadData = (props: BootLoadDataProps) => { scale={[0.7, 0.3, 0]} renderOrder={2} position={ - activeLoadDataElement === "yes" ? [-1.2, -0.2, 0] : [1.2, -0.2, 0] + activeBootElement === "load_data_yes" + ? [-1.2, -0.2, 0] + : [1.2, -0.2, 0] } > { - const activeMainMenuElement = useBootStore( - (state) => state.activeMainMenuElement - ); - const authorizeUserPos = useBootStore( - (state) => state.authorizeUserPos - ); + const activeBootElement = useBootStore((state) => state.activeBootElement); const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive); const authorizeInactiveTex = useLoader( @@ -37,57 +32,65 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => { const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive); const loadDataHeaderTex = useLoader(THREE.TextureLoader, loadDataHeader); - const loadDataPos = useBootStore((state) => state.loadDataPos); - - const mainMenuAnimationState = useSpring({ - authorizeUserPosX: authorizeUserPos.x, - authorizeUserPosY: authorizeUserPos.y, - authorizeUserOpacity: props.activeSubScene !== "load_data" ? 1 : 0, - loadDataOpacity: props.activeSubScene !== "authorize_user" ? 1 : 0, - loadDataPosX: loadDataPos.x, - loadDataPosY: loadDataPos.y, - config: { duration: 500 }, - }); + const loadDataTextState = useMemo(() => { + if (props.activeSubScene === "load_data") { + return { + scale: [1.4, 0.16, 0], + texture: loadDataHeaderTex, + position: { x: -1.13, y: -1 }, + }; + } else { + return { + scale: [1.4, 0.3, 0], + texture: + activeBootElement === "load_data" + ? loadDataActiveTex + : loadDataInactiveTex, + position: { x: 0, y: -0.5 }, + }; + } + }, [ + activeBootElement, + loadDataActiveTex, + loadDataHeaderTex, + loadDataInactiveTex, + props.activeSubScene, + ]); const authorizeUserTextState = useMemo(() => { if (props.activeSubScene === "authorize_user") { - return { scale: [1.8, 0.16, 0], texture: authorizeUserHeaderTex }; + return { + scale: [1.8, 0.16, 0], + texture: authorizeUserHeaderTex, + position: { x: 1.13, y: 1.2 }, + }; } else { return { scale: [1.8, 0.3, 0], texture: - activeMainMenuElement === "authorize_user" + activeBootElement === "authorize_user" ? authorizeActiveTex : authorizeInactiveTex, + position: { x: 0, y: 0.5 }, }; } }, [ - activeMainMenuElement, + activeBootElement, authorizeActiveTex, authorizeInactiveTex, authorizeUserHeaderTex, props.activeSubScene, ]); - const loadDataTextState = useMemo(() => { - if (props.activeSubScene === "load_data") { - return { scale: [1.4, 0.16, 0], texture: loadDataHeaderTex }; - } else { - return { - scale: [1.4, 0.3, 0], - texture: - activeMainMenuElement === "load_data" - ? loadDataActiveTex - : loadDataInactiveTex, - }; - } - }, [ - activeMainMenuElement, - loadDataActiveTex, - loadDataHeaderTex, - loadDataInactiveTex, - props.activeSubScene, - ]); + const mainMenuAnimationState = useSpring({ + authorizeUserOpacity: props.activeSubScene !== "load_data" ? 1 : 0, + authorizeUserPosX: authorizeUserTextState.position.x, + authorizeUserPosY: authorizeUserTextState.position.y, + loadDataOpacity: props.activeSubScene !== "authorize_user" ? 1 : 0, + loadDataPosX: loadDataTextState.position.x, + loadDataPosY: loadDataTextState.position.y, + config: { duration: 500 }, + }); return ( <> diff --git a/src/core/StateManagers/BootManager.tsx b/src/core/StateManagers/BootManager.tsx index 824879c..6556dc1 100644 --- a/src/core/StateManagers/BootManager.tsx +++ b/src/core/StateManagers/BootManager.tsx @@ -3,54 +3,50 @@ import { StateManagerProps } from "./EventManager"; import { useBootStore } from "../../store"; const BootManager = (props: StateManagerProps) => { - const setActiveMainMenuElement = useBootStore( - (state) => state.setActiveMainMenuElement + const setActiveBootElement = useBootStore( + (state) => state.setActiveBootElement ); - const setActiveLoadDataElement = useBootStore( - (state) => state.setActiveLoadDataElement - ); - const setAuthorizeUserPos = useBootStore( - (state) => state.setAuthorizeUserPos - ); - const setLoadDataPos = useBootStore((state) => state.setLoadDataPos); const dispatchObject = useCallback( (event: string) => { const dispatcherObjects = { main_menu_down: { - action: setActiveMainMenuElement, + action: setActiveBootElement, value: "load_data", }, main_menu_up: { - action: setActiveMainMenuElement, + action: setActiveBootElement, value: "authorize_user", }, load_data_left: { - action: setActiveLoadDataElement, - value: "yes", + action: setActiveBootElement, + value: "load_data_yes", }, load_data_right: { - action: setActiveLoadDataElement, - value: "no", + action: setActiveBootElement, + value: "load_data_no", + }, + authorize_user_back: { + action: setActiveBootElement, + value: "authorize_user", }, select_authorize_user: { - action: setAuthorizeUserPos, - value: { x: 1.13, y: 1.2 }, + action: setActiveBootElement, + value: "authorize_user", + }, + select_load_data_no: { + action: setActiveBootElement, + value: "load_data", }, select_load_data: { - action: setLoadDataPos, - value: { x: -1.13, y: -1 }, - }, + action: setActiveBootElement, + value: "load_data_yes" + } }; return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [ - setActiveLoadDataElement, - setActiveMainMenuElement, - setAuthorizeUserPos, - setLoadDataPos, - ] + [setActiveBootElement] ); useEffect(() => { diff --git a/src/core/StateManagers/EventManager.tsx b/src/core/StateManagers/EventManager.tsx index 71a73db..ecc7caf 100644 --- a/src/core/StateManagers/EventManager.tsx +++ b/src/core/StateManagers/EventManager.tsx @@ -32,6 +32,7 @@ const getKeyCodeAssociation = (keyCode: number): string => { 38: "up", // up arrow 39: "right", // right arrow 88: "select", // x key + 90: "back", // z key }; return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs]; }; @@ -44,6 +45,7 @@ type EventState = { newActiveBlueOrbId: string; newSiteRotIdx: string; }; + export type StateManagerProps = { eventState: any; }; @@ -56,7 +58,7 @@ export type GameContext = { currentLevel: string; siteRotIdx: string; activeMediaComponent: string; - activeMainMenuElement: string; + activeBootElement: string; }; const EventManager = () => { @@ -76,9 +78,7 @@ const EventManager = () => { ); // boot scene - const activeMainMenuElement = useBootStore( - (state) => state.activeMainMenuElement - ); + const activeBootElement = useBootStore((state) => state.activeBootElement); const [eventState, setEventState] = useState(); @@ -92,10 +92,10 @@ const EventManager = () => { blueOrbMatrixIndices: blueOrbMatrixIndices, currentLevel: currentLevel, activeMediaComponent: activeMediaComponent, - activeMainMenuElement: activeMainMenuElement, + activeBootElement: activeBootElement, }), [ - activeMainMenuElement, + activeBootElement, activeMediaComponent, blueOrbMatrixIndices, currentLevel, diff --git a/src/core/StateManagers/SubSceneManager.tsx b/src/core/StateManagers/SubSceneManager.tsx index 415df21..06bde04 100644 --- a/src/core/StateManagers/SubSceneManager.tsx +++ b/src/core/StateManagers/SubSceneManager.tsx @@ -10,15 +10,21 @@ const SubSceneManager = (props: StateManagerProps) => { const dispatchObject = useCallback( (event: string) => { const dispatcherObjects = { + authorize_user_back: { + action: setActiveSubscene, + value: "main_menu", + }, select_authorize_user: { action: setActiveSubscene, value: "authorize_user", - delay: 0, }, select_load_data: { action: setActiveSubscene, value: "load_data", - delay: 0, + }, + select_load_data_no: { + action: setActiveSubscene, + value: "main_menu", }, }; return dispatcherObjects[event as keyof typeof dispatcherObjects]; @@ -33,9 +39,7 @@ const SubSceneManager = (props: StateManagerProps) => { const dispatchedObject = dispatchObject(eventAction); if (dispatchedObject) { - setTimeout(() => { - dispatchedObject.action(dispatchedObject.value); - }, dispatchedObject.delay); + dispatchedObject.action(dispatchedObject.value); } } }, [props.eventState, dispatchObject]); diff --git a/src/core/bootEventHandler.ts b/src/core/bootEventHandler.ts index 3da4b9e..55d3833 100644 --- a/src/core/bootEventHandler.ts +++ b/src/core/bootEventHandler.ts @@ -3,7 +3,7 @@ import { GameContext } from "./StateManagers/EventManager"; const handleBootEvent = (gameContext: GameContext) => { const keyPress = gameContext.keyPress; - const activeMainMenuElement = gameContext.activeMainMenuElement; + const activeBootElement = gameContext.activeBootElement; const currentSubscene = gameContext.subscene; switch (keyPress) { @@ -11,9 +11,10 @@ const handleBootEvent = (gameContext: GameContext) => { case "up": case "left": case "right": + case "back": return { event: `${currentSubscene}_${keyPress}` }; case "select": - return { event: `select_${activeMainMenuElement}` }; + return { event: `select_${activeBootElement}` }; } }; diff --git a/src/store.ts b/src/store.ts index 2d1be60..4eff20b 100644 --- a/src/store.ts +++ b/src/store.ts @@ -164,14 +164,8 @@ type SubsceneState = { }; type MainMenuState = { - activeMainMenuElement: string; - authorizeUserPos: { x: number; y: number }; - loadDataPos: { x: number; y: number }; - setAuthorizeUserPos: (to: { x: number; y: number }) => void; - setActiveMainMenuElement: (to: string) => void; - setLoadDataPos: (to: { x: number; y: number }) => void; - activeLoadDataElement: string; - setActiveLoadDataElement: (to: string) => void; + activeBootElement: string; + setActiveBootElement: (to: string) => void; }; export const useTextRendererStore = create((set) => ({ @@ -405,19 +399,8 @@ export const useSubsceneStore = create((set) => ({ })); export const useBootStore = create((set) => ({ - activeMainMenuElement: "authorize_user", - authorizeUserPos: { x: 0, y: 0.5 }, - loadDataPos: { x: 0, y: -0.5 }, - setActiveMainMenuElement: (to: string) => - set(() => ({ activeMainMenuElement: to })), - setAuthorizeUserPos: (to) => - set(() => ({ - authorizeUserPos: to, - })), - setLoadDataPos: (to) => set(() => ({ loadDataPos: to })), - activeLoadDataElement: "yes", - setActiveLoadDataElement: (to: string) => - set(() => ({ activeLoadDataElement: to })), + activeBootElement: "load_data_yes", + setActiveBootElement: (to: string) => set(() => ({ activeBootElement: to })), })); export const useImageStore = create(