From 556a758e24ea171f6758b3df5360a0dda3d9004d Mon Sep 17 00:00:00 2001 From: ad044 Date: Mon, 9 Nov 2020 20:28:33 +0400 Subject: [PATCH] adding authorization scene --- public/sprite/gate_object_texture.png | Bin 3745 -> 0 bytes src/components/Boot/BootAnimation.tsx | 33 +++-- src/components/Boot/BootAuthorizeUser.tsx | 121 ++++++++++++++++++ src/components/Boot/BootMainMenu.tsx | 71 ---------- .../Boot/BootMainMenuComponents.tsx | 106 +++++++++++++++ src/core/StateManagers/EventManager.tsx | 12 +- src/core/StateManagers/MainMenuManager.tsx | 15 ++- src/core/StateManagers/SubSceneManager.tsx | 41 ++++++ src/core/bootMainMenuEventHandler.ts | 4 + src/scenes/BootScene.tsx | 23 +++- src/store.ts | 29 ++++- 11 files changed, 354 insertions(+), 101 deletions(-) delete mode 100644 public/sprite/gate_object_texture.png create mode 100644 src/components/Boot/BootAuthorizeUser.tsx delete mode 100644 src/components/Boot/BootMainMenu.tsx create mode 100644 src/components/Boot/BootMainMenuComponents.tsx create mode 100644 src/core/StateManagers/SubSceneManager.tsx diff --git a/public/sprite/gate_object_texture.png b/public/sprite/gate_object_texture.png deleted file mode 100644 index 16cb7f57e35ff4fc76c468ed3e9294bc6cfb649d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3745 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 LNkvXXu0mjf?y5z? diff --git a/src/components/Boot/BootAnimation.tsx b/src/components/Boot/BootAnimation.tsx index 0fe5d68..5c222d8 100644 --- a/src/components/Boot/BootAnimation.tsx +++ b/src/components/Boot/BootAnimation.tsx @@ -14,10 +14,10 @@ import bootBackgroundDistortedTex from "../../static/sprite/distorted_text.png"; import { useFrame, useLoader } from "react-three-fiber"; import { a, useSpring } from "@react-spring/three"; import * as THREE from "three"; -import { OrbitControls } from "@react-three/drei"; type BootAnimationProps = { visible: boolean; + activeSubScene: string; }; const BootAnimation = (props: BootAnimationProps) => { @@ -149,7 +149,8 @@ const BootAnimation = (props: BootAnimationProps) => { setLofPosY(1); setBackgroundFloatingTextShown(true); - }, 4200); + //4200 + }, 0); } }, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]); @@ -163,11 +164,12 @@ const BootAnimation = (props: BootAnimationProps) => { config: { duration: 300 }, }); - const positionState = useSpring({ + const animationState = useSpring({ graySquarePosY: graySquarePosY, lofPosX: lofPosX, lofPosY: lofPosY, - config: { duration: 600 }, + lofOpacity: props.activeSubScene === "main_menu" ? 1 : 0, + config: { duration: 500 }, }); const firstBackgroundTextRef = useRef(); @@ -177,7 +179,18 @@ const BootAnimation = (props: BootAnimationProps) => { return ( <> - {props.visible ? ( + + + + {props.visible && props.activeSubScene === "main_menu" ? ( <> {/*we have two of each to create looping effect*/} { /> - - - - { { + const authorizeHeaderUnderlineTex = useLoader( + THREE.TextureLoader, + authorizeHeaderUnderline + ); + const authorizeGlassTex = useLoader(THREE.TextureLoader, authorizeGlass); + const authorizeGlassUnderlineTex = useLoader( + THREE.TextureLoader, + authorizeGlassUnderline + ); + const authorizeOrangeSquareTex = useLoader( + THREE.TextureLoader, + authorizeOrangeSquare + ); + const authorizeStartToFinishTex = useLoader( + THREE.TextureLoader, + authorizeStartToFinish + ); + const authorizeInactiveLettersTex = useLoader( + THREE.TextureLoader, + authorizeInactiveLetters + ); + + return ( + <> + {props.visible ? ( + <> + + + + + + + + + + + + + + + + + + + + + + + + ) : ( + <> + )} + + ); +}; + +export default BootAuthorizeUser; diff --git a/src/components/Boot/BootMainMenu.tsx b/src/components/Boot/BootMainMenu.tsx deleted file mode 100644 index 086445b..0000000 --- a/src/components/Boot/BootMainMenu.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from "react"; -import { a } from "@react-spring/three"; -import authorizeActive from "../../static/sprite/authorize_user_active.png"; -import authorizeInactive from "../../static/sprite/authorize_user_inactive.png"; -import loadDataActive from "../../static/sprite/load_data_active.png"; -import loadDataInactive from "../../static/sprite/load_data_inactive.png"; -import { useLoader } from "react-three-fiber"; -import * as THREE from "three"; -import { useMainMenuStore } from "../../store"; - -type BootMainMenuProps = { - visible: boolean; -}; - -const BootMainMenu = (props: BootMainMenuProps) => { - const activeMainMenuElement = useMainMenuStore( - (state) => state.activeMainMenuElement - ); - - const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive); - const authorizeInactiveTex = useLoader( - THREE.TextureLoader, - authorizeInactive - ); - const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive); - const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive); - - return ( - <> - {props.visible ? ( - <> - - - - - - - - - ) : ( - <> - )} - - ); -}; - -export default BootMainMenu; diff --git a/src/components/Boot/BootMainMenuComponents.tsx b/src/components/Boot/BootMainMenuComponents.tsx new file mode 100644 index 0000000..1d91989 --- /dev/null +++ b/src/components/Boot/BootMainMenuComponents.tsx @@ -0,0 +1,106 @@ +import React, { useMemo } from "react"; +import { a, useSpring } from "@react-spring/three"; +import authorizeActive from "../../static/sprite/authorize_user_active.png"; +import authorizeInactive from "../../static/sprite/authorize_user_inactive.png"; +import loadDataActive from "../../static/sprite/load_data_active.png"; +import loadDataInactive from "../../static/sprite/load_data_inactive.png"; +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import { useBootMainMenuStore } from "../../store"; +import authorizeUserHeader from "../../static/sprite/authorize_user_scene_header.png"; + +type BootMainMenuProps = { + visible: boolean; + activeSubScene: string; +}; + +const BootMainMenuComponents = (props: BootMainMenuProps) => { + const activeMainMenuElement = useBootMainMenuStore( + (state) => state.activeMainMenuElement + ); + const authorizeUserPos = useBootMainMenuStore( + (state) => state.authorizeUserPos + ); + + const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive); + const authorizeInactiveTex = useLoader( + THREE.TextureLoader, + authorizeInactive + ); + const authorizeUserHeaderTex = useLoader( + THREE.TextureLoader, + authorizeUserHeader + ); + + const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive); + const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive); + + const mainMenuAnimationState = useSpring({ + authorizeUserPosX: authorizeUserPos.x, + authorizeUserPosY: authorizeUserPos.y, + loadDataOpacity: props.activeSubScene === "main_menu" ? 1 : 0, + config: { duration: 500 }, + }); + + const authorizeUserTextState = useMemo(() => { + if (props.activeSubScene === "authorize_user") { + return { scale: [1.8, 0.16, 0], texture: authorizeUserHeaderTex }; + } else { + return { + scale: [1.8, 0.3, 0], + texture: + activeMainMenuElement === "authorize_user" + ? authorizeActiveTex + : authorizeInactiveTex, + }; + } + }, [ + activeMainMenuElement, + authorizeActiveTex, + authorizeInactiveTex, + authorizeUserHeaderTex, + props.activeSubScene, + ]); + + return ( + <> + {props.visible ? ( + <> + + + + + + + + + ) : ( + <> + )} + + ); +}; + +export default BootMainMenuComponents; diff --git a/src/core/StateManagers/EventManager.tsx b/src/core/StateManagers/EventManager.tsx index 069ca8a..4b50cf7 100644 --- a/src/core/StateManagers/EventManager.tsx +++ b/src/core/StateManagers/EventManager.tsx @@ -6,6 +6,7 @@ import BlueOrbManager from "./BlueOrbManager"; import BlueOrbHUDManager from "./BlueOrbHUDManager"; import { useBlueOrbStore, + useBootMainMenuStore, useLevelStore, useMediaStore, useSceneStore, @@ -19,9 +20,9 @@ import SceneManager from "./SceneManager"; import YellowTextManager from "./YellowTextManager"; import MediaImageManager from "./MediaImageManager"; import computeAction from "../computeAction"; -import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json"; import LevelManager from "./LevelManager"; import MainMenuManager from "./MainMenuManager"; +import SubSceneManager from "./SubSceneManager"; const getKeyCodeAssociation = (keyCode: number): string => { const keyCodeAssocs = { @@ -53,6 +54,7 @@ export type GameContext = { currentLevel: string; siteRotIdx: string; activeMediaComponent: string; + activeMainMenuElement: string; }; const EventManager = () => { @@ -70,6 +72,11 @@ const EventManager = () => { (state) => state.activeMediaComponent ); + // boot scene + const activeMainMenuElement = useBootMainMenuStore( + (state) => state.activeMainMenuElement + ); + const [eventState, setEventState] = useState(); const [inputCooldown, setInputCooldown] = useState(false); @@ -81,8 +88,10 @@ const EventManager = () => { blueOrbMatrixIndices: blueOrbMatrixIndices, currentLevel: currentLevel, activeMediaComponent: activeMediaComponent, + activeMainMenuElement: activeMainMenuElement, }), [ + activeMainMenuElement, activeMediaComponent, blueOrbMatrixIndices, currentLevel, @@ -130,6 +139,7 @@ const EventManager = () => { + ); }; diff --git a/src/core/StateManagers/MainMenuManager.tsx b/src/core/StateManagers/MainMenuManager.tsx index d68511a..2ed13df 100644 --- a/src/core/StateManagers/MainMenuManager.tsx +++ b/src/core/StateManagers/MainMenuManager.tsx @@ -1,11 +1,14 @@ import { useCallback, useEffect } from "react"; import { StateManagerProps } from "./EventManager"; -import { useMainMenuStore } from "../../store"; +import { useBootMainMenuStore } from "../../store"; const MainMenuManager = (props: StateManagerProps) => { - const setActiveMainMenuElement = useMainMenuStore( + const setActiveMainMenuElement = useBootMainMenuStore( (state) => state.setActiveMainMenuElement ); + const setAuthorizeUserPos = useBootMainMenuStore( + (state) => state.setAuthorizeUserPos + ); const dispatchObject = useCallback( (event: string) => { @@ -18,11 +21,15 @@ const MainMenuManager = (props: StateManagerProps) => { action: setActiveMainMenuElement, value: "authorize_user", }, + select_authorize_user: { + action: setAuthorizeUserPos, + value: { x: 1.13, y: 1.2 }, + }, }; return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [setActiveMainMenuElement] + [setActiveMainMenuElement, setAuthorizeUserPos] ); useEffect(() => { @@ -31,7 +38,7 @@ const MainMenuManager = (props: StateManagerProps) => { const dispatchedObject = dispatchObject(eventAction); if (dispatchedObject) { - dispatchedObject.action(dispatchedObject.value); + dispatchedObject.action(dispatchedObject.value as any); } } }, [dispatchObject, props.eventState]); diff --git a/src/core/StateManagers/SubSceneManager.tsx b/src/core/StateManagers/SubSceneManager.tsx new file mode 100644 index 0000000..596cf5b --- /dev/null +++ b/src/core/StateManagers/SubSceneManager.tsx @@ -0,0 +1,41 @@ +import { useCallback, useEffect } from "react"; +import { StateManagerProps } from "./EventManager"; +import { useBootStore } from "../../store"; + +const SubSceneManager = (props: StateManagerProps) => { + const setActiveBootSubScene = useBootStore( + (state) => state.setActiveBootSubScene + ); + + const dispatchObject = useCallback( + (event: string) => { + const dispatcherObjects = { + select_authorize_user: { + action: setActiveBootSubScene, + value: "authorize_user", + delay: 0, + }, + }; + return dispatcherObjects[event as keyof typeof dispatcherObjects]; + }, + [setActiveBootSubScene] + ); + + useEffect(() => { + if (props.eventState) { + const eventAction = props.eventState.event; + + const dispatchedObject = dispatchObject(eventAction); + + if (dispatchedObject) { + setTimeout(() => { + dispatchedObject.action(dispatchedObject.value); + }, dispatchedObject.delay); + } + } + }, [props.eventState, dispatchObject]); + + return null; +}; + +export default SubSceneManager; diff --git a/src/core/bootMainMenuEventHandler.ts b/src/core/bootMainMenuEventHandler.ts index 49f1de9..3c4c4da 100644 --- a/src/core/bootMainMenuEventHandler.ts +++ b/src/core/bootMainMenuEventHandler.ts @@ -3,11 +3,15 @@ import { GameContext } from "./StateManagers/EventManager"; const handleBootMainMenuEvent = (gameContext: GameContext) => { const keyPress = gameContext.keyPress; + const activeMainMenuElement = gameContext.activeMainMenuElement; + switch (keyPress) { case "down": return { event: "switch_to_load_data" }; case "up": return { event: "switch_to_authorize_user" }; + case "select": + return { event: `select_${activeMainMenuElement}` }; } }; diff --git a/src/scenes/BootScene.tsx b/src/scenes/BootScene.tsx index 5379269..7c5de0a 100644 --- a/src/scenes/BootScene.tsx +++ b/src/scenes/BootScene.tsx @@ -1,26 +1,39 @@ import React, { useEffect, useState } from "react"; import BootAccela from "../components/Boot/BootAccela"; import BootAnimation from "../components/Boot/BootAnimation"; -import BootMainMenu from "../components/Boot/BootMainMenu"; +import BootMainMenuComponents from "../components/Boot/BootMainMenuComponents"; +import { useBootStore } from "../store"; +import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser"; const BootScene = () => { + const activeBootSubScene = useBootStore((state) => state.activeBootSubScene); + const [accelaVisible, setAccelaVisible] = useState(true); const [mainMenuVisible, setMainMenuVisible] = useState(false); useEffect(() => { setTimeout(() => { setAccelaVisible(false); - }, 2000); + // 2000 + }, 0); setTimeout(() => { setMainMenuVisible(true); - }, 6200); + //6200 + }, 0); }, []); return ( - - + + + ); }; diff --git a/src/store.ts b/src/store.ts index 65c42ef..a757cc3 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,6 +1,5 @@ import create from "zustand"; import { combine } from "zustand/middleware"; -import available_blue_orbs_on_projection from "./resources/available_blue_orbs_on_projection.json"; type SceneState = { currentScene: string; @@ -159,10 +158,17 @@ type ImageState = { }; }; -type MainMenuState ={ +type BootState = { + activeBootSubScene: string; + setActiveBootSubScene: (to: string) => void; +}; + +type MainMenuState = { activeMainMenuElement: string; + authorizeUserPos: { x: number; y: number }; + setAuthorizeUserPos: (to: { x: number; y: number }) => void; setActiveMainMenuElement: (to: string) => void; -} +}; export const useTextRendererStore = create((set) => ({ // yellow text @@ -389,10 +395,21 @@ export const useSceneStore = create((set) => ({ setScene: (to) => set(() => ({ currentScene: to })), })); -export const useMainMenuStore = create(set=> ({ +export const useBootStore = create((set) => ({ + activeBootSubScene: "authorize_user", + setActiveBootSubScene: (to) => set(() => ({ activeBootSubScene: to })), +})); + +export const useBootMainMenuStore = create((set) => ({ activeMainMenuElement: "authorize_user", - setActiveMainMenuElement: (to) => set(() => ({activeMainMenuElement: to})) -})) + authorizeUserPos: { x: 0, y: 0.5 }, + setActiveMainMenuElement: (to: string) => + set(() => ({ activeMainMenuElement: to })), + setAuthorizeUserPos: (to: { x: number; y: number }) => + set(() => ({ + authorizeUserPos: to, + })), +})); export const useImageStore = create( combine(