diff --git a/src/components/StateManagers/BlueOrbManager.tsx b/src/components/StateManagers/BlueOrbManager.tsx index 82f04ac..8beae74 100644 --- a/src/components/StateManagers/BlueOrbManager.tsx +++ b/src/components/StateManagers/BlueOrbManager.tsx @@ -13,7 +13,6 @@ type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void; type BlueOrbDispatchData = { action: any; value: any; - actionDelay: number; }; type BlueOrbDispatcher = { @@ -76,13 +75,17 @@ const BlueOrbManager = (props: StateManagerProps) => { const updateActiveBlueOrb = useCallback( ( + delay: number, newActiveBlueOrbId: string, newBlueOrbColIdx: number, newBlueOrbRowIdx: number ) => { - setActiveBlueOrb(newActiveBlueOrbId); - setBlueOrbColIdx(newBlueOrbColIdx); - setBlueOrbRowIdx(newBlueOrbRowIdx); + setActiveBlueOrb(""); + setTimeout(() => { + setActiveBlueOrb(newActiveBlueOrbId); + setBlueOrbColIdx(newBlueOrbColIdx); + setBlueOrbRowIdx(newBlueOrbRowIdx); + }, delay); }, [setActiveBlueOrb, setBlueOrbColIdx, setBlueOrbRowIdx] ); @@ -97,33 +100,47 @@ const BlueOrbManager = (props: StateManagerProps) => { const dispatcherObjects: BlueOrbDispatcher = { move_up: { action: updateActiveBlueOrb, - value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], - actionDelay: 3903.704, + value: [ + 3903.704, + newActiveBlueOrbId, + newBlueOrbColIdx, + newBlueOrbRowIdx, + ], }, move_down: { action: updateActiveBlueOrb, - value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], - actionDelay: 3903.704, + value: [ + 3903.704, + newActiveBlueOrbId, + newBlueOrbColIdx, + newBlueOrbRowIdx, + ], }, move_left: { action: updateActiveBlueOrb, - value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], - actionDelay: 3903.704, + value: [ + 3903.704, + newActiveBlueOrbId, + newBlueOrbColIdx, + newBlueOrbRowIdx, + ], }, move_right: { action: updateActiveBlueOrb, - value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], - actionDelay: 3903.704, + value: [ + 3903.704, + newActiveBlueOrbId, + newBlueOrbColIdx, + newBlueOrbRowIdx, + ], }, change_blue_orb: { action: updateActiveBlueOrb, - value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], - actionDelay: 0, + value: [0, newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], }, throw_blue_orb: { action: animateActiveBlueOrbThrow, - value: [true], - actionDelay: 0, + value: [0, true], }, }; @@ -146,12 +163,8 @@ const BlueOrbManager = (props: StateManagerProps) => { newBlueOrbRowIdx ); - console.log(dispatchedObject) - if (dispatchedObject) { - setTimeout(() => { - dispatchedObject.action.apply(null, dispatchedObject.value); - }, dispatchedObject.actionDelay); + dispatchedObject.action.apply(null, dispatchedObject.value); } } }, [props.eventState, setActiveBlueOrb, dispatchObject]); diff --git a/src/components/StateManagers/EventManager.tsx b/src/components/StateManagers/EventManager.tsx index 89404eb..640729c 100644 --- a/src/components/StateManagers/EventManager.tsx +++ b/src/components/StateManagers/EventManager.tsx @@ -101,7 +101,6 @@ const EventManager = () => { if (keyPress && !inputCooldown) { gameContext.keyPress = keyPress; const event = computeAction(gameContext); - console.log(event); setEventState(event); } }, diff --git a/src/components/StateManagers/GreenTextManager.tsx b/src/components/StateManagers/GreenTextManager.tsx index c8ab9e5..d496ec8 100644 --- a/src/components/StateManagers/GreenTextManager.tsx +++ b/src/components/StateManagers/GreenTextManager.tsx @@ -1,5 +1,5 @@ -import { useCallback, useEffect } from "react"; -import { useTextRendererStore } from "../../store"; +import { MutableRefObject, useCallback, useEffect, useRef } from "react"; +import { useBlueOrbStore, useTextRendererStore } from "../../store"; import site_a from "../../resources/site_a.json"; import { StateManagerProps } from "./EventManager"; import blue_orb_huds from "../../resources/blue_orb_huds.json"; @@ -16,8 +16,19 @@ const GreenTextManager = (props: StateManagerProps) => { (state) => state.toggleGreenText ); + const blueOrbDataRef: MutableRefObject< + { activeBlueOrbId: string } | undefined + > = useRef(); + + const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId); + + blueOrbDataRef.current = { + activeBlueOrbId: activeBlueOrbId, + }; + const toggleAndSetGreenText = useCallback( (newActiveBlueOrbId: string, newActiveHudId: string, delay: number) => { + console.log('s') const targetGreenText = site_a[newActiveBlueOrbId as keyof typeof site_a].title; @@ -39,6 +50,17 @@ const GreenTextManager = (props: StateManagerProps) => { [setGreenText, setGreenTextPosX, setGreenTextPosY, toggleGreenText] ); + const initializeGreenTextForMediaScene = useCallback(() => { + setTimeout(() => { + setGreenText( + site_a[blueOrbDataRef.current!.activeBlueOrbId as keyof typeof site_a] + .node_name + ); + setGreenTextPosX({ initial: 0.0, final: 0.009 }); + setGreenTextPosY(0.675); + }, 3950); + }, [setGreenText, setGreenTextPosX, setGreenTextPosY]); + const dispatchObject = useCallback( (event: string, newActiveBlueOrbId: string, newActiveHudId: string) => { const dispatcherObjects = { @@ -62,11 +84,15 @@ const GreenTextManager = (props: StateManagerProps) => { action: toggleAndSetGreenText, value: [newActiveBlueOrbId, newActiveHudId, 500], }, + throw_blue_orb: { + action: initializeGreenTextForMediaScene, + value: [], + }, }; return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [toggleAndSetGreenText] + [initializeGreenTextForMediaScene, toggleAndSetGreenText] ); useEffect(() => { diff --git a/src/components/StateManagers/LevelManager.tsx b/src/components/StateManagers/LevelManager.tsx index 90c0012..8911b69 100644 --- a/src/components/StateManagers/LevelManager.tsx +++ b/src/components/StateManagers/LevelManager.tsx @@ -4,23 +4,39 @@ import { useLevelStore } from "../../store"; const LevelManager = (props: StateManagerProps) => { const setCurrentLevel = useLevelStore((state) => state.setCurrentLevel); + const setActiveLevels = useLevelStore((state) => state.setActiveLevels); + const updateLevel = useCallback( + (newLevel: string) => { + setCurrentLevel(newLevel); + setTimeout(() => { + setActiveLevels([ + (parseInt(newLevel) - 2).toString().padStart(2, "0"), + (parseInt(newLevel) - 1).toString().padStart(2, "0"), + parseInt(newLevel).toString().padStart(2, "0"), + (parseInt(newLevel) + 1).toString().padStart(2, "0"), + (parseInt(newLevel) + 2).toString().padStart(2, "0"), + ]); + }, 1500); + }, + [setActiveLevels, setCurrentLevel] + ); const dispatchObject = useCallback( (event: string, newLevel: string) => { const dispatcherObjects = { move_up: { - action: setCurrentLevel, + action: updateLevel, value: newLevel, }, move_down: { - action: setCurrentLevel, + action: updateLevel, value: newLevel, }, }; return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [setCurrentLevel] + [updateLevel] ); useEffect(() => { diff --git a/src/components/StateManagers/MediaImageManager.tsx b/src/components/StateManagers/MediaImageManager.tsx index 218192a..a09de34 100644 --- a/src/components/StateManagers/MediaImageManager.tsx +++ b/src/components/StateManagers/MediaImageManager.tsx @@ -14,6 +14,7 @@ const MediaImageManager = (props: StateManagerProps) => { site_a[newActiveBlueOrbId as keyof typeof site_a].node_name; const images = image_table[node_name as keyof typeof image_table]; + console.log(newActiveBlueOrbId); Object.values(images).forEach((img) => { switch (img.substr(img.length - 1)) { case "0": @@ -61,9 +62,11 @@ const MediaImageManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventAction = props.eventState.action; + const eventAction = props.eventState.event; const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId; + console.log(eventAction); + console.log(newActiveBlueOrbId); const dispatchedObject = dispatchObject(eventAction, newActiveBlueOrbId); if (dispatchedObject) { diff --git a/src/components/StateManagers/YellowTextManager.tsx b/src/components/StateManagers/YellowTextManager.tsx index 2b445f2..3748c7c 100644 --- a/src/components/StateManagers/YellowTextManager.tsx +++ b/src/components/StateManagers/YellowTextManager.tsx @@ -9,8 +9,10 @@ import { type AnimateYellowTextWithMove = ( yellowLetterPosYOffset: number, + yellowLetterPosXOffset: number, newActiveHudId: string, - newActiveBlueOrbId: string + newActiveBlueOrbId: string, + delay: number ) => void; type AnimateYellowTextWithoutMove = ( @@ -62,8 +64,11 @@ const YellowTextManager = (props: any) => { (state) => state.setYellowTextOffsetXCoeff ); - const incrementYellowTextPosY = useTextRendererStore( - (state) => state.incrementYellowTextPosY + const addToYellowTextPosY = useTextRendererStore( + (state) => state.addToYellowTextPosY + ); + const addToYellowTextPosX = useTextRendererStore( + (state) => state.addToYellowTextPosX ); const setYellowTextPosY = useTextRendererStore( (state) => state.setYellowTextPosY @@ -74,15 +79,18 @@ const YellowTextManager = (props: any) => { const animateYellowTextWithMove: AnimateYellowTextWithMove = useCallback( ( + yellowLetterPosXOffset: number, yellowLetterPosYOffset: number, newActiveHudId: string, - newActiveBlueOrbId: string + newActiveBlueOrbId: string, + delay: number ) => { // animate the letters to match that of site's // to create an illusion of not moving setTimeout(() => { - incrementYellowTextPosY(yellowLetterPosYOffset); - }, 1300); + addToYellowTextPosY(yellowLetterPosYOffset); + addToYellowTextPosX(yellowLetterPosXOffset); + }, delay); setTimeout(() => { // make current hud big text shrink @@ -91,6 +99,7 @@ const YellowTextManager = (props: any) => { setTimeout(() => { // animate it to new pos x/y + console.log(newActiveHudId); setYellowTextPosX( blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds] .big_text[0] @@ -111,7 +120,8 @@ const YellowTextManager = (props: any) => { }, 3900); }, [ - incrementYellowTextPosY, + addToYellowTextPosX, + addToYellowTextPosY, setYellowText, setYellowTextOffsetXCoeff, setYellowTextPosX, @@ -222,19 +232,19 @@ const YellowTextManager = (props: any) => { const dispatcherObjects: YellowTextDispatcher = { move_up: { action: animateYellowTextWithMove, - value: [-1.5, newActiveHudId, newActiveBlueOrbId], + value: [0, -1.5, newActiveHudId, newActiveBlueOrbId, 1300], }, move_down: { action: animateYellowTextWithMove, - value: [1.5, newActiveHudId, newActiveBlueOrbId], + value: [0, 1.5, newActiveHudId, newActiveBlueOrbId, 1300], }, move_left: { action: animateYellowTextWithMove, - value: [newActiveHudId, newActiveBlueOrbId], + value: [Math.PI / 4, 0, newActiveHudId, newActiveBlueOrbId, 1100], }, move_right: { action: animateYellowTextWithMove, - value: [newActiveHudId, newActiveBlueOrbId], + value: [-Math.PI / 4, 0, newActiveHudId, newActiveBlueOrbId, 1100], }, change_blue_orb: { action: animateYellowTextWithoutMove, diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 7cf8a51..5f551a4 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/src/core/mainSceneEventHandler.ts @@ -71,7 +71,7 @@ const handleMainSceneEvent = (gameContext: GameContext) => { if (newBlueOrbColIdx > 3) { event = "move_right"; newSiteRotIdx = (parseInt(gameContext.siteRotIdx) - 1).toString(); - newBlueOrbColIdx = 0; + newBlueOrbColIdx = 3; } else { event = "change_blue_orb"; } diff --git a/src/store.ts b/src/store.ts index 36a4059..15800a9 100644 --- a/src/store.ts +++ b/src/store.ts @@ -134,7 +134,8 @@ type TextRendererState = { yellowTextPosX: number; yellowTextOffsetXCoeff: number; setYellowText: (to: string) => void; - incrementYellowTextPosY: (by: number) => void; + addToYellowTextPosY: (val: number) => void; + addToYellowTextPosX: (val: number) => void; setYellowTextPosY: (to: number) => void; setYellowTextPosX: (to: number) => void; setYellowTextOffsetXCoeff: (to: number) => void; @@ -167,8 +168,10 @@ export const useTextRendererStore = create((set) => ({ yellowTextPosX: -0.35, yellowTextOffsetXCoeff: 0, setYellowText: (to) => set(() => ({ yellowText: to })), - incrementYellowTextPosY: (by) => - set((state) => ({ yellowTextPosY: state.yellowTextPosY + by })), + addToYellowTextPosY: (val) => + set((state) => ({ yellowTextPosY: state.yellowTextPosY + val })), + addToYellowTextPosX: (val) => + set((state) => ({ yellowTextPosX: state.yellowTextPosX + val })), setYellowTextPosY: (to) => set(() => ({ yellowTextPosY: to })), setYellowTextPosX: (to) => set(() => ({ yellowTextPosX: to })), setYellowTextOffsetXCoeff: (to) => @@ -283,7 +286,7 @@ export const useMiddleRingStore = create((set) => ({ export const useLevelStore = create((set) => ({ currentLevel: "04", - activeLevels: ["03", "04", "05"], + activeLevels: ["02", "03", "04", "05", "06"], setActiveLevels: (to) => set(() => ({ activeLevels: to })), setCurrentLevel: (to) => set(() => ({ currentLevel: to })), })); @@ -379,7 +382,7 @@ export const useMediaWordStore = create((set) => ({ })); export const useSceneStore = create((set) => ({ - currentScene: "media", + currentScene: "main", setScene: (to) => set(() => ({ currentScene: to })), }));