From 02587388671e01f3beae64af8e8e8f34c6796315 Mon Sep 17 00:00:00 2001 From: ad044 Date: Wed, 27 Jan 2021 22:09:09 +0400 Subject: [PATCH] got rid of yellow text manager, gota fix some bugs still --- .../MainScene/SyncedComponents/HUD.tsx | 10 +- src/components/TextRenderer/BigLetter.tsx | 24 ++- .../TextRenderer/YellowTextRenderer.tsx | 53 +++--- .../StateManagers/GameManagers/GameLoader.tsx | 4 - .../StateManagers/MainSceneEventManager.tsx | 2 - .../MainSceneManagers/BigTextManager.tsx | 173 ------------------ src/core/mainSceneEventHandler.ts | 10 +- src/core/nodeSelector.ts | 10 +- src/core/utils/bigTextUtils.ts | 36 ++++ src/store.ts | 21 --- 10 files changed, 101 insertions(+), 242 deletions(-) delete mode 100644 src/core/StateManagers/MainSceneManagers/BigTextManager.tsx create mode 100644 src/core/utils/bigTextUtils.ts diff --git a/src/components/MainScene/SyncedComponents/HUD.tsx b/src/components/MainScene/SyncedComponents/HUD.tsx index abc3121..b170752 100644 --- a/src/components/MainScene/SyncedComponents/HUD.tsx +++ b/src/components/MainScene/SyncedComponents/HUD.tsx @@ -41,7 +41,8 @@ const HUD = memo(() => { ); const siteRotY = useStore((state) => state.siteRot[1]); const sitePosY = useStore((state) => state.sitePos[1]); - const prevData = usePrevious({ siteRotY, sitePosY }); + const subscene = useStore((state) => state.mainSubscene); + const prevData = usePrevious({ siteRotY, sitePosY, subscene }); // this part is imperative because it performs a lot better than having a toggleable spring. useFrame(() => { @@ -87,7 +88,11 @@ const HUD = memo(() => { useEffect(() => { if (activeRef.current !== undefined) { - if (prevData?.siteRotY !== siteRotY || prevData?.sitePosY !== sitePosY) { + if ( + prevData?.siteRotY !== siteRotY || + prevData?.sitePosY !== sitePosY || + subscene === "level_selection" + ) { activeRef.current = false; } else { const wasHidden = !activeRef.current; @@ -145,6 +150,7 @@ const HUD = memo(() => { prevData?.siteRotY, sitePosY, siteRotY, + subscene, ]); const longHudRef = useRef(); diff --git a/src/components/TextRenderer/BigLetter.tsx b/src/components/TextRenderer/BigLetter.tsx index 125fa4e..c7cd7c6 100644 --- a/src/components/TextRenderer/BigLetter.tsx +++ b/src/components/TextRenderer/BigLetter.tsx @@ -4,22 +4,23 @@ import * as THREE from "three"; import { useLoader } from "react-three-fiber"; import orange_font_json from "../../resources/font_data/big_font.json"; import { a, useSpring } from "@react-spring/three"; -import React, { memo, useEffect, useMemo } from "react"; +import React, { memo, useEffect, useMemo, useState } from "react"; import { useStore } from "../../store"; +import usePrevious from "../../hooks/usePrevious"; const BigLetter = memo( (props: { - color: string; + color?: string; letter: string; letterIdx: number; xOffset?: number; }) => { + const [color, setColor] = useState("yellow"); + const tex = useMemo( () => - props.color === "orange" || props.letterIdx === 0 - ? orangeFont - : yellowFont, - [props.color, props.letterIdx] + color === "orange" || props.letterIdx === 0 ? orangeFont : yellowFont, + [color, props.letterIdx] ); const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, tex); @@ -81,6 +82,7 @@ const BigLetter = memo( }, [letterData, lineYOffset]); const activeNode = useStore((state) => state.activeNode); + const subscene = useStore((state) => state.mainSubscene); const [shrinkState, set] = useSpring(() => ({ x: props.letterIdx + 0.3, @@ -89,11 +91,17 @@ const BigLetter = memo( useEffect(() => { set({ x: 0 }); - + if (subscene === "level_selection") { + setColor("orange"); + } else { + if (color === "orange") { + setColor("yellow"); + } + } setTimeout(() => { set({ x: props.letterIdx + 0.3 }); }, 1200); - }, [activeNode, props.letterIdx, set]); + }, [activeNode, props.letterIdx, subscene, set, color]); return ( { - const visible = useStore((state) => state.bigTextVisible); - const color = useStore((state) => state.bigTextColor); - const activeNode = useStore((state) => state.activeNode); + const subscene = useStore((state) => state.mainSubscene); + const prevData = usePrevious({ subscene }); - const [text, setText] = useState(useStore.getState().bigText.split("")); + const [text, setText] = useState( + useStore.getState().activeNode.node_name.split("") + ); const [trail, set] = useTrail(text.length, () => ({ - posX: useStore.getState().bigTextPos[0], - posY: useStore.getState().bigTextPos[1], + posX: getNodeHud(useStore.getState().activeNode.matrixIndices!).big_text[0], + posY: getNodeHud(useStore.getState().activeNode.matrixIndices!).big_text[1], config: { duration: 280 }, })); useEffect(() => { - const hud = getNodeHud(activeNode.matrixIndices!); - setTimeout(() => { - set({ posX: hud.big_text[0], posY: hud.big_text[1] }); - }, 400); + if (prevData?.subscene !== "pause") { + const hud = getNodeHud(activeNode.matrixIndices!); + if (subscene === "level_selection") { + setTimeout(() => { + set({ posX: -0.02, posY: 0.005 }); + }, 400); - setTimeout(() => { - setText(activeNode.node_name.split("")); - }, 1000); - }, [activeNode, set]); + setTimeout(() => { + setText("JumpTo".split("")); + }, 1000); + } else { + setTimeout(() => { + set({ posX: hud.big_text[0], posY: hud.big_text[1] }); + }, 400); + + setTimeout(() => { + setText(activeNode.node_name.split("")); + }, 1000); + } + } + }, [activeNode, prevData?.subscene, set, subscene]); return ( - + {trail.map(({ posX, posY }, idx) => ( { position-z={-8.7} scale={[0.04, 0.06, 0.04]} > - + ))} - + ); }; diff --git a/src/core/StateManagers/GameManagers/GameLoader.tsx b/src/core/StateManagers/GameManagers/GameLoader.tsx index 191fcf3..81aef2f 100644 --- a/src/core/StateManagers/GameManagers/GameLoader.tsx +++ b/src/core/StateManagers/GameManagers/GameLoader.tsx @@ -17,10 +17,6 @@ const GameLoader = (props: StateManagerProps) => { // level setter // const setActiveLevel = useLevelStore((state) => state.setActiveLevel); - // big text setter - const setBigTexPos = useStore((state) => state.setBigTextPos); - const setBigText = useStore((state) => state.setBigText); - // site setter const setSiteRot = useStore((state) => state.setSiteRot); const setCurrentSite = useStore((state) => state.setActiveSite); diff --git a/src/core/StateManagers/MainSceneEventManager.tsx b/src/core/StateManagers/MainSceneEventManager.tsx index 755cf70..e8d4664 100644 --- a/src/core/StateManagers/MainSceneEventManager.tsx +++ b/src/core/StateManagers/MainSceneEventManager.tsx @@ -7,7 +7,6 @@ import SiteManager from "./MainSceneManagers/SiteManager"; import LainManager from "./MainSceneManagers/LainManager"; import MiddleRingManager from "./MainSceneManagers/MiddleRingManager"; import SceneManager from "./GameManagers/SceneManager"; -import BigTextManager from "./MainSceneManagers/BigTextManager"; import LevelManager from "./MainSceneManagers/LevelManager"; import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager"; import SubsceneManager from "./GameManagers/SubsceneManager"; @@ -142,7 +141,6 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => { - diff --git a/src/core/StateManagers/MainSceneManagers/BigTextManager.tsx b/src/core/StateManagers/MainSceneManagers/BigTextManager.tsx deleted file mode 100644 index f57874f..0000000 --- a/src/core/StateManagers/MainSceneManagers/BigTextManager.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import { useCallback, useEffect } from "react"; -import { useStore } from "../../../store"; -import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site"; -import { StateManagerProps } from "../EventManager"; -import { HUDType } from "../../../components/MainScene/SyncedComponents/HUD"; - -const BigTextManager = (props: StateManagerProps) => { - const setText = useStore((state) => state.setBigText); - const setColor = useStore((state) => state.setBigTextColor); - const setVisible = useStore((state) => state.setBigTextVisible); - const setXOffset = useStore((state) => state.setBigTextXOffset); - const setPos = useStore((state) => state.setBigTextPos); - - const animateYellowTextWithMove = useCallback( - ( - posXOffset: number, - posYOffset: number, - hud: HUDType, - node: NodeDataType | "UNKNOWN", - delay: number - ) => { - // animate the letters to match that of site's - // to create an illusion of not moving - // setTimeout(() => { - // addToTransformState(posXOffset, "posX"); - // addToTransformState(posYOffset, "posY"); - // }, delay); - - setTimeout(() => { - // make current hud big text shrink - setXOffset(-1); - }, 2500); - - setTimeout(() => { - // animate it to new pos x/y - setPos(hud.big_text); - // set new text according to the node name - const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name; - - setText(targetText); - }, 3000); - - // unshrink text - setTimeout(() => { - setXOffset(0); - }, 3900); - }, - [setPos, setText, setXOffset] - ); - - const initializeLevelSelection = useCallback(() => { - setXOffset(-1); - - setTimeout(() => { - setPos([-0.02, 0.005, -8.7]); - }, 400); - - setTimeout(() => { - setText("Jump To"); - setColor("orange"); - }, 1000); - - setTimeout(() => { - setXOffset(0); - }, 1200); - }, [setColor, setPos, setText, setXOffset]); - - const levelSelectionBack = useCallback( - (node: NodeDataType, hud: HUDType) => { - setXOffset(-1); - - setTimeout(() => { - setPos(hud.big_text); - }, 400); - - setTimeout(() => { - setColor("yellow"); - setText(node.node_name); - }, 1000); - - setTimeout(() => { - setXOffset(0); - }, 1200); - }, - [setColor, setPos, setText, setXOffset] - ); - - const toggleVisibleAfterLevelSelect = useCallback( - (node: NodeDataType | "UNKNOWN", hud: HUDType) => { - setVisible(false); - - setTimeout(() => { - setPos(hud.big_text); - setColor("yellow"); - const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name; - - setText(targetText); - }, 400); - - setTimeout(() => { - setVisible(true); - }, 3900); - }, - [setColor, setPos, setText, setVisible] - ); - - const dispatchObject = useCallback( - (eventState: { - event: string; - hud: HUDType; - node: NodeDataType; - level: string; - }) => { - switch (eventState.event) { - case "site_up": - return { - action: animateYellowTextWithMove, - value: [0, -1.5, eventState.hud, eventState.node, 1300], - }; - case "site_down": - return { - action: animateYellowTextWithMove, - value: [0, 1.5, eventState.hud, eventState.node, 1300], - }; - case "site_left": - return { - action: animateYellowTextWithMove, - value: [Math.PI / 4, 0, eventState.hud, eventState.node, 1100], - }; - case "site_right": - return { - action: animateYellowTextWithMove, - value: [-Math.PI / 4, 0, eventState.hud, eventState.node, 1100], - }; - case "level_selection_back": - return { - action: levelSelectionBack, - value: [eventState.node, eventState.hud], - }; - case "toggle_level_selection": - return { - action: initializeLevelSelection, - }; - case "select_level_up": - case "select_level_down": - return { - action: toggleVisibleAfterLevelSelect, - value: [eventState.node, eventState.hud], - }; - } - }, - [ - animateYellowTextWithMove, - initializeLevelSelection, - levelSelectionBack, - toggleVisibleAfterLevelSelect, - ] - ); - - useEffect(() => { - if (props.eventState) { - const dispatchedObject = dispatchObject(props.eventState); - - if (dispatchedObject) { - (dispatchedObject.action as any).apply(null, dispatchedObject.value); - } - } - }, [animateYellowTextWithMove, props.eventState, dispatchObject]); - - return null; -}; - -export default BigTextManager; diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 93f6e3a..6a46271 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/src/core/mainSceneEventHandler.ts @@ -46,7 +46,7 @@ const handleMainSceneEvent = (gameContext: any) => { nodeMatrixIndices = selectedNodeData.newNodeMatrixIndices; siteRotY = selectedNodeData.newSiteRotY; sitePosY = selectedNodeData.newSitePosY; - level = selectedNodeData.newLevel; + level = selectedNodeData.newLevel!; activeHud = selectedNodeData.newActiveHud; } @@ -155,11 +155,11 @@ const handleMainSceneEvent = (gameContext: any) => { selectedLevel < level ? "select_level_down" : "select_level_up"; return { event: event, + nodeMatrixIndices: selectedNodeData.nodeMatrixIndices, + sitePosY: -selectedNodeData.sitePosY!, level: selectedLevel.toString().padStart(2, "0"), - activeNodeId: selectedNodeData.node, - activeHud: selectedNodeData.newActiveHud, - nodeMatrixIndices: selectedNodeData.newNodeMatrixIndices, - sitePosY: -selectedNodeData.newSitePosY, + node: selectedNodeData.node, + hud: selectedNodeData.activeHud, }; } } diff --git a/src/core/nodeSelector.ts b/src/core/nodeSelector.ts index 1696753..1ea14b2 100644 --- a/src/core/nodeSelector.ts +++ b/src/core/nodeSelector.ts @@ -442,11 +442,11 @@ const nodeSelector = (context: NodeSelectorContext) => { if (newNodeData) { return { node: newNodeData.node, - newNodeMatrixIndices: newNodeData.newNodeMatrixIndices, - newActiveHud: newNodeData.newNodeHud, - newSiteRotY: context.siteRotY, - newLevel: newNodeData.newLevel, - newSitePosY: newNodeData.newSitePosY, + nodeMatrixIndices: newNodeData.newNodeMatrixIndices, + activeHud: newNodeData.newNodeHud, + siteRotY: context.siteRotY, + level: newNodeData.newLevel, + sitePosY: newNodeData.newSitePosY, }; } } diff --git a/src/core/utils/bigTextUtils.ts b/src/core/utils/bigTextUtils.ts new file mode 100644 index 0000000..1a44dec --- /dev/null +++ b/src/core/utils/bigTextUtils.ts @@ -0,0 +1,36 @@ +export const calculatePosAfterMove = ( + currentData: { + siteRotY: number; + sitePosY: number; + matrixIndices: { rowIdx: number; colIdx: number; matrixIdx: number }; + }, + prevData: { siteRotY: number; sitePosY: number } +) => { + if (currentData.sitePosY > prevData.sitePosY) { + // todo + // instead of 1 i need to calculate the amplifier value + return { posX: 0, posY: 1 * 1 }; + } else if (currentData.sitePosY < prevData.sitePosY) { + return { posX: 0, posY: -1 * 1 }; + } else { + if ( + currentData.matrixIndices.colIdx === 0 || + currentData.matrixIndices.colIdx === 3 + ) { + if (currentData.siteRotY > prevData.siteRotY) { + return { posX: 1.5, posY: 0 }; + } else if (currentData.siteRotY < prevData.siteRotY) { + return { posX: -1.5, posY: 0 }; + } + } else if ( + currentData.matrixIndices.colIdx === 1 || + currentData.matrixIndices.colIdx === 2 + ) { + if (currentData.siteRotY > prevData.siteRotY) { + return { posX: 0.5, posY: 0 }; + } else if (currentData.siteRotY < prevData.siteRotY) { + return { posX: -0.5, posY: 0 }; + } + } + } +}; diff --git a/src/store.ts b/src/store.ts index fc8c35b..6936633 100644 --- a/src/store.ts +++ b/src/store.ts @@ -34,12 +34,6 @@ type State = { intro: boolean; - bigText: string; - bigTextVisible: boolean; - bigTextColor: "yellow" | "orange"; - bigTextPos: number[]; - bigTextXOffset: 0 | -1; - hud: HUDType; hudActive: boolean; @@ -148,13 +142,6 @@ export const useStore = create( // whether or not to play the intro anim intro: true, - // big text (the one that displays node names) - bigText: "Tda028", - bigTextVisible: true, - bigTextColor: "yellow", - bigTextPos: [-0.35, 0.23, -8.7], - bigTextXOffset: 0, - // hud hud: { mirrored: 0, @@ -313,14 +300,6 @@ export const useStore = create( // intro setters setIntro: (to: boolean) => set(() => ({ intro: to })), - // big text setters - setBigText: (to: string) => set(() => ({ bigText: to })), - setBigTextVisible: (to: boolean) => set(() => ({ bigTextVisible: to })), - setBigTextColor: (to: "yellow" | "orange") => - set(() => ({ bigTextColor: to })), - setBigTextPos: (to: number[]) => set(() => ({ bigTextPos: to })), - setBigTextXOffset: (to: 0 | -1) => set(() => ({ bigTextXOffset: to })), - // hud setters setHud: (to: HUDType) => set(() => ({ hud: to })), toggleHudActive: () => set((state) => ({ hudActive: !state.hudActive })),