From db396e62eed8c7f1f8ac4679aaca4561192eeee2 Mon Sep 17 00:00:00 2001 From: ad044 Date: Mon, 30 Nov 2020 20:44:57 +0400 Subject: [PATCH] changed keybinding system, adding pause --- src/components/MainScene/ActiveLevelNodes.tsx | 7 ++++- src/components/MainScene/GrayPlanes.tsx | 11 +++----- src/components/MainScene/HUD.tsx | 5 ++-- src/components/MainScene/Site.tsx | 7 ++++- src/components/MainScene/YellowOrb.tsx | 9 +++---- src/components/MainSceneIntro.tsx | 20 +++----------- .../TextRenderer/GreenTextRenderer.tsx | 4 +-- .../TextRenderer/YellowTextRenderer.tsx | 6 ++--- src/core/StateManagers/EventManager.tsx | 15 ++++++----- src/core/StateManagers/GreenTextManager.tsx | 1 + src/core/StateManagers/NodeHUDManager.tsx | 1 + src/core/StateManagers/SiteManager.tsx | 6 +++++ src/core/StateManagers/SubsceneManager.tsx | 5 ++++ src/core/authorizeUserEventHandler.ts | 19 +++++++------- src/core/bootEventHandler.ts | 20 ++++++++------ src/core/mainSceneEventHandler.ts | 26 ++++++++++--------- src/core/mediaSceneEventHandler.ts | 4 +-- src/scenes/MainScene.tsx | 20 ++++++++------ src/store.ts | 24 ++--------------- 19 files changed, 102 insertions(+), 108 deletions(-) diff --git a/src/components/MainScene/ActiveLevelNodes.tsx b/src/components/MainScene/ActiveLevelNodes.tsx index 016883f..85a4d04 100644 --- a/src/components/MainScene/ActiveLevelNodes.tsx +++ b/src/components/MainScene/ActiveLevelNodes.tsx @@ -19,11 +19,16 @@ const ActiveLevelNodes = () => { const siteState = useSpring({ siteRotY: siteTransformState.rotY, sitePosY: siteTransformState.posY, + siteRotX: siteTransformState.rotX, config: { duration: 1200 }, }); return ( - + {Object.entries(activeLevelNodes).map((node: [string, any]) => { return ( { +const GrayPlanes = memo((props: { visible: boolean }) => { const grayPlaneGroupRef = useRef(); - const grayPlanesVisible = useGrayPlanesStore( - (state) => state.grayPlanesVisible - ); - const grayPlanePoses = [ [1.2, 0, -1.2], [1.2, 0, 1.2], @@ -21,7 +16,7 @@ const GrayPlanes = memo(() => { ]; const grayPlaneRefs = grayPlanePoses.map((poses: number[]) => - // eslint-disable-next-line react-hooks/rules-of-hooks + // eslint-disable-next-line react-hooks/rules-of-hooks useRef[]>( poses.map(() => createRef()) ) @@ -37,7 +32,7 @@ const GrayPlanes = memo(() => { {grayPlaneRefs.map((ref, idx: number) => { return ( diff --git a/src/components/MainScene/HUD.tsx b/src/components/MainScene/HUD.tsx index 0f29ee2..a05d260 100644 --- a/src/components/MainScene/HUD.tsx +++ b/src/components/MainScene/HUD.tsx @@ -11,10 +11,9 @@ import { a, useSpring } from "@react-spring/three"; import { useHudStore } from "../../store"; import node_huds from "../../resources/node_huds.json"; -const HUD = memo(() => { +const HUD = memo((props: { visible: boolean }) => { const active = useHudStore((state) => state.active); const id = useHudStore((state) => state.id); - const visible = useHudStore((state) => state.visible); const currentHud = node_huds[id as keyof typeof node_huds]; @@ -83,7 +82,7 @@ const HUD = memo(() => { ); return ( - + { const siteState = useSpring({ siteRotY: siteTransformState.rotY, sitePosY: siteTransformState.posY, + siteRotX: siteTransformState.rotX, config: { duration: 1200 }, }); return ( - + {Object.entries(level_y_values).map((level: [string, number]) => ( diff --git a/src/components/MainScene/YellowOrb.tsx b/src/components/MainScene/YellowOrb.tsx index ee6f823..d48d4d4 100644 --- a/src/components/MainScene/YellowOrb.tsx +++ b/src/components/MainScene/YellowOrb.tsx @@ -2,15 +2,14 @@ import React, { memo, useRef, useState } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; import orbSprite from "../../static/sprite/orb.png"; -import { useYellowOrbStore } from "../../store"; +import { useMainSceneStore } from "../../store"; // initialize outside the component otherwise it gets overwritten when it rerenders let orbIdx = 0; let orbDirectionChangeCount = 0; let renderOrder = -1; -const YellowOrb = memo(() => { - const yellowOrbVisible = useYellowOrbStore((state) => state.yellowOrbVisible); +const YellowOrb = memo((props: { visible: boolean }) => { const orbRef = useRef(); const [orbDirection, setOrbDirection] = useState("left"); const [currentCurve, setCurrentCurve] = useState("first"); @@ -32,7 +31,7 @@ const YellowOrb = memo(() => { ); useFrame(() => { - if (yellowOrbVisible) { + if (props.visible) { let orbPosFirst = firstCurve.getPoint(orbIdx / 250); let orbPosSecond = secondCurve.getPoint(orbIdx / 250); @@ -108,7 +107,7 @@ const YellowOrb = memo(() => { }); return ( - + { const toggleHud = useHudStore((state) => state.toggleActive); //const setHudVisible = useSetRecoilState(hudVisibilityAtom); - const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible); + // const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible); const setLainMoveState = useLainStore((state) => state.setLainMoveState); @@ -36,13 +30,9 @@ const MainSceneIntro = memo(() => { (state) => state.setMainStarfieldBoostVal ); - const setGrayPlanesVisible = useGrayPlanesStore( - (state) => state.setGrayPlanesVisible - ); - useEffect(() => { setTimeout(() => { - setGrayPlanesVisible(true); + // setGrayPlanesVisible(true); }, 2500); setTimeout(() => { @@ -55,7 +45,7 @@ const MainSceneIntro = memo(() => { setTimeout(() => { setLainMoveState("standing"); - setOrbVisible(true); + // setOrbVisible(true); //setHudVisible(true); setIntroStarfieldVisible(false); @@ -67,10 +57,8 @@ const MainSceneIntro = memo(() => { }, 300); }, 3860); }, [ - setGrayPlanesVisible, setMainStarfieldBoostVal, setMainStarfieldVisible, - setOrbVisible, setIntroStarfieldVisible, setLainMoveState, toggleHud, diff --git a/src/components/TextRenderer/GreenTextRenderer.tsx b/src/components/TextRenderer/GreenTextRenderer.tsx index 493ce61..536cc3e 100644 --- a/src/components/TextRenderer/GreenTextRenderer.tsx +++ b/src/components/TextRenderer/GreenTextRenderer.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useRef } from "react"; import { GreenTextState, useGreenTextStore } from "../../store"; import MediumLetter from "./MediumLetter"; -const GreenTextRenderer = () => { +const GreenTextRenderer = (props: { visible?: boolean }) => { const greenTextActive = useGreenTextStore((state) => state.active); const transformRef = useRef(useGreenTextStore.getState().transformState); @@ -34,7 +34,7 @@ const GreenTextRenderer = () => { ); return ( - + { +const YellowTextRenderer = (props: { visible?: boolean }) => { const disableTrail = useBigTextStore((state) => state.disableTrail); const transformState = useBigTextStore((state) => state.transformState); @@ -40,7 +40,7 @@ const YellowTextRenderer = () => { ); return ( - + {disableTrail ? textArrRef.current.map((letter, idx) => ( { const keyCodeAssocs = { - 40: "down", // down arrow - 37: "left", // left arrow - 38: "up", // up arrow - 39: "right", // right arrow - 88: "select", // x key - 90: "back", // z key - 69: "toggle_level_selection", // e key + 40: "DOWN", // down arrow + 37: "LEFT", // left arrow + 38: "UP", // up arrow + 39: "RIGHT", // right arrow + 88: "CIRCLE", // x key + 90: "X", // z key + 68: "TRIANGLE", // d key + 69: "L2", // e key }; return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs]; }; diff --git a/src/core/StateManagers/GreenTextManager.tsx b/src/core/StateManagers/GreenTextManager.tsx index 7350768..4e0f9ab 100644 --- a/src/core/StateManagers/GreenTextManager.tsx +++ b/src/core/StateManagers/GreenTextManager.tsx @@ -87,6 +87,7 @@ const GreenTextManager = (props: StateManagerProps) => { value: [newActiveNodeId, newLevel], }; case "toggle_level_selection": + case "toggle_pause": return { action: toggleActive, }; diff --git a/src/core/StateManagers/NodeHUDManager.tsx b/src/core/StateManagers/NodeHUDManager.tsx index fb612b0..abee1e2 100644 --- a/src/core/StateManagers/NodeHUDManager.tsx +++ b/src/core/StateManagers/NodeHUDManager.tsx @@ -57,6 +57,7 @@ const NodeHUDManager = (props: StateManagerProps) => { value: [targetNodeHudId], }; case "toggle_level_selection": + case "toggle_pause": return { action: toggleActive, }; diff --git a/src/core/StateManagers/SiteManager.tsx b/src/core/StateManagers/SiteManager.tsx index 275a3e6..0e6ddc3 100644 --- a/src/core/StateManagers/SiteManager.tsx +++ b/src/core/StateManagers/SiteManager.tsx @@ -24,6 +24,12 @@ const SiteManager = (props: StateManagerProps) => { value: [newSiteRotY, "rotY"], actionDelay: 1100, }; + case "toggle_pause": + return { + action: setTransformState, + value: [Math.PI / 2, "rotX"], + actionDelay: 0, + }; } }, [setTransformState] diff --git a/src/core/StateManagers/SubsceneManager.tsx b/src/core/StateManagers/SubsceneManager.tsx index 2c3b0d9..e86f6a2 100644 --- a/src/core/StateManagers/SubsceneManager.tsx +++ b/src/core/StateManagers/SubsceneManager.tsx @@ -21,6 +21,11 @@ const SubsceneManager = (props: StateManagerProps) => { action: setMainSubscene, value: "level_selection", }; + case "toggle_pause": + return { + action: setMainSubscene, + value: "pause", + }; case "authorize_user_back": case "load_data_no_select": return { diff --git a/src/core/authorizeUserEventHandler.ts b/src/core/authorizeUserEventHandler.ts index 152661b..91c6660 100644 --- a/src/core/authorizeUserEventHandler.ts +++ b/src/core/authorizeUserEventHandler.ts @@ -8,13 +8,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => { const currentSubscene = "authorize_user"; switch (keyPress) { - case "left": + case "LEFT": const utmostLeftIndices = [0, 13, 26, 39, 52]; if (utmostLeftIndices.includes(matrixIdx)) { break; } else { return { - event: `${currentSubscene}_${keyPress}`, + event: `${currentSubscene}_left`, newBgLettersPos: { x: bgLettersPos.x + 0.3, y: bgLettersPos.y }, newActiveLetterTexOffset: { x: activeLetterTexOffset.x - 0.0775, @@ -23,13 +23,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => { newAuthorizeUserMatrixIdx: matrixIdx - 1, }; } - case "right": + case "RIGHT": const utmostRightIndices = [12, 25, 38, 51, 64]; if (utmostRightIndices.includes(matrixIdx)) { break; } else { return { - event: `${currentSubscene}_${keyPress}`, + event: `${currentSubscene}_right`, newBgLettersPos: { x: bgLettersPos.x - 0.3, y: bgLettersPos.y }, newActiveLetterTexOffset: { x: activeLetterTexOffset.x + 0.0775, @@ -38,13 +38,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => { newAuthorizeUserMatrixIdx: matrixIdx + 1, }; } - case "down": + case "DOWN": const utmostLowIndices = Array.from(new Array(13), (x, i) => i + 52); if (utmostLowIndices.includes(matrixIdx)) { break; } else { return { - event: `${currentSubscene}_${keyPress}`, + event: `${currentSubscene}_down`, newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y + 0.25 }, newActiveLetterTexOffset: { x: activeLetterTexOffset.x, @@ -53,13 +53,13 @@ const handleAuthorizeUserEvent = (gameContext: any) => { newAuthorizeUserMatrixIdx: matrixIdx + 13, }; } - case "up": + case "UP": const utmostHighIndices = Array.from(new Array(13), (x, i) => i); if (utmostHighIndices.includes(matrixIdx)) { break; } else { return { - event: `${currentSubscene}_${keyPress}`, + event: `${currentSubscene}_up`, newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y - 0.25 }, newActiveLetterTexOffset: { x: activeLetterTexOffset.x, @@ -68,8 +68,7 @@ const handleAuthorizeUserEvent = (gameContext: any) => { newAuthorizeUserMatrixIdx: matrixIdx - 13, }; } - - case "back": { + case "X": { return { event: "authorize_user_back" }; } } diff --git a/src/core/bootEventHandler.ts b/src/core/bootEventHandler.ts index dc6668f..105f745 100644 --- a/src/core/bootEventHandler.ts +++ b/src/core/bootEventHandler.ts @@ -19,18 +19,22 @@ const handleBootEvent = (gameContext: any) => { }); } else { switch (keyPress) { - case "down": - case "up": - case "left": - case "right": - case "back": + case "DOWN": + case "UP": + case "LEFT": + case "RIGHT": return { - event: `${currentSubscene}_${keyPress}`, + event: `${currentSubscene}_${keyPress.toLowerCase()}`, subscene: currentSubscene, }; - case "select": + case "X": return { - event: `${activeBootElement}_${keyPress}`, + event: `${currentSubscene}_back`, + subscene: currentSubscene, + }; + case "CIRCLE": + return { + event: `${activeBootElement}_select`, subscene: currentSubscene, }; } diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 41efeb3..0f69ab7 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/src/core/mainSceneEventHandler.ts @@ -37,7 +37,7 @@ const handleMainSceneEvent = (gameContext: any) => { if (subscene === "site") { switch (keyPress) { - case "left": + case "LEFT": newNodeColIdx = nodeColIdx - 1; if (newNodeColIdx < 0) { event = "move_left"; @@ -48,7 +48,7 @@ const handleMainSceneEvent = (gameContext: any) => { event = "change_node"; } break; - case "down": + case "DOWN": newNodeRowIdx = nodeRowIdx + 1; if (newNodeRowIdx > 2) { event = "move_down"; @@ -62,7 +62,7 @@ const handleMainSceneEvent = (gameContext: any) => { event = "change_node"; } break; - case "up": + case "UP": newNodeRowIdx = nodeRowIdx - 1; if (newNodeRowIdx < 0) { event = "move_up"; @@ -77,7 +77,7 @@ const handleMainSceneEvent = (gameContext: any) => { event = "change_node"; } break; - case "right": + case "RIGHT": newNodeColIdx = nodeColIdx + 1; if (newNodeColIdx > 3) { event = "move_right"; @@ -88,7 +88,7 @@ const handleMainSceneEvent = (gameContext: any) => { event = "change_node"; } break; - case "select": + case "CIRCLE": // 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. @@ -118,8 +118,10 @@ const handleMainSceneEvent = (gameContext: any) => { break; } break; - case "toggle_level_selection": + case "L2": return { event: "toggle_level_selection" }; + case "TRIANGLE": + return { event: "toggle_pause" }; } const newActiveNodeId = @@ -145,21 +147,21 @@ const handleMainSceneEvent = (gameContext: any) => { }; } else if (subscene === "level_selection") { switch (keyPress) { - case "up": + case "UP": if (levelSelectionIdx + 1 <= 23) return { - event: `level_selection_${keyPress}`, + event: `level_selection_up`, newSelectedLevelIdx: levelSelectionIdx + 1, }; break; - case "down": + case "DOWN": if (levelSelectionIdx - 1 >= 0) return { - event: `level_selection_${keyPress}`, + event: `level_selection_down`, newSelectedLevelIdx: levelSelectionIdx - 1, }; break; - case "back": + case "X": return { event: "level_selection_back", newActiveNodeId: @@ -173,7 +175,7 @@ const handleMainSceneEvent = (gameContext: any) => { ], newLevel: newLevel, }; - case "select": + case "CIRCLE": const oldLevel = newLevel; newLevel = (levelSelectionIdx + 1).toString().padStart(2, "0"); if (oldLevel === newLevel) break; diff --git a/src/core/mediaSceneEventHandler.ts b/src/core/mediaSceneEventHandler.ts index 7f50d96..96b9e59 100644 --- a/src/core/mediaSceneEventHandler.ts +++ b/src/core/mediaSceneEventHandler.ts @@ -7,7 +7,7 @@ const handleMediaSceneEvent = (gameContext: any) => { const rightSideComponents = ["fstWord", "sndWord", "thirdWord"]; if (rightSideComponents.includes(activeMediaComponent)) { switch (keyPress) { - case "down": + case "DOWN": newWordPosStateIdx++; if (newWordPosStateIdx > 6) { newWordPosStateIdx = 1; @@ -17,7 +17,7 @@ const handleMediaSceneEvent = (gameContext: any) => { newRightSideComponentIdx = 0; } break; - case "up": + case "UP": newWordPosStateIdx--; if (newWordPosStateIdx < 1) { newWordPosStateIdx = 6; diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index 1e30992..108bdd4 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -8,7 +8,7 @@ import MainSceneIntro from "../components/MainSceneIntro"; import GrayPlanes from "../components/MainScene/GrayPlanes"; import MiddleRing from "../components/MainScene/MiddleRing"; import Starfield from "../components/MainScene/Starfield"; -import { useHudStore, useLainStore } from "../store"; +import { useHudStore, useLainStore, useMainSceneStore } from "../store"; import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer"; import HUD from "../components/MainScene/HUD"; import YellowOrb from "../components/MainScene/YellowOrb"; @@ -17,6 +17,10 @@ import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer"; import LevelSelection from "../components/MainScene/LevelSelection"; const MainScene = () => { + const currentSubscene = useMainSceneStore((state) => state.subscene); + + const isPaused = currentSubscene === "pause"; + const setLainMoveState = useLainStore((state) => state.setLainMoveState); const setActiveNodeHudId = useHudStore((state) => state.setId); @@ -32,13 +36,13 @@ const MainScene = () => { - - - - - - - + {/**/} + + + + + {/**/} + {/**/} diff --git a/src/store.ts b/src/store.ts index 2e12cf0..3cfc659 100644 --- a/src/store.ts +++ b/src/store.ts @@ -19,7 +19,6 @@ type SceneState = { type HUDState = { id: string; active: number; - visible: boolean; setId: (to: string) => void; toggleActive: () => void; }; @@ -40,11 +39,6 @@ type LainState = { setLainMoveState: (to: string) => void; }; -type GrayPlanesState = { - grayPlanesVisible: boolean; - setGrayPlanesVisible: (to: boolean) => void; -}; - type StarfieldState = { introStarfieldVisible: boolean; mainStarfieldVisible: boolean; @@ -54,15 +48,11 @@ type StarfieldState = { setMainStarfieldBoostVal: (to: number) => void; }; -type YellowOrbState = { - yellowOrbVisible: boolean; - setYellowOrbVisible: (to: boolean) => void; -}; - type SiteState = { transformState: { posY: number; rotY: number; + rotX: number; }; }; @@ -221,7 +211,6 @@ export const useGreenTextStore = create( export const useHudStore = create((set) => ({ id: "fg_hud_1", active: 1, - visible: true, setId: (to) => set(() => ({ id: to })), toggleActive: () => set((state) => ({ active: Number(!state.active) })), })); @@ -257,11 +246,6 @@ export const useLainStore = create((set) => ({ setLainMoveState: (to) => set(() => ({ lainMoveState: to })), })); -export const useGrayPlanesStore = create((set) => ({ - grayPlanesVisible: true, - setGrayPlanesVisible: (to) => set(() => ({ grayPlanesVisible: to })), -})); - export const useStarfieldStore = create((set) => ({ introStarfieldVisible: false, mainStarfieldVisible: true, @@ -271,17 +255,13 @@ export const useStarfieldStore = create((set) => ({ setMainStarfieldBoostVal: (to) => set(() => ({ mainStarfieldBoostVal: to })), })); -export const useYellowOrbStore = create((set) => ({ - yellowOrbVisible: false, - setYellowOrbVisible: (to) => set(() => ({ yellowOrbVisible: to })), -})); - export const useSiteStore = create( combine( { transformState: { posY: 0, rotY: 0, + rotX: 0, }, } as SiteState, (set) => ({