From cddbc7ce623b80091b9deb26b11a49576957c8c1 Mon Sep 17 00:00:00 2001 From: ad044 Date: Sat, 31 Oct 2020 22:11:27 +0400 Subject: [PATCH] basic orb changing works --- .../StateManagers/BlueOrbManager.tsx | 89 ++++++++++++------- src/components/StateManagers/EventManager.tsx | 48 ++++------ src/components/StateManagers/LainManager.tsx | 22 ++--- src/components/StateManagers/LevelManager.tsx | 41 +++++++++ .../StateManagers/MiddleRingManager.tsx | 17 ++-- src/components/StateManagers/SiteManager.tsx | 84 ++++++++--------- src/core/computeAction.ts | 57 ++++++++++-- src/store.ts | 46 +++++----- 8 files changed, 245 insertions(+), 159 deletions(-) create mode 100644 src/components/StateManagers/LevelManager.tsx diff --git a/src/components/StateManagers/BlueOrbManager.tsx b/src/components/StateManagers/BlueOrbManager.tsx index 5d4f364..79ac558 100644 --- a/src/components/StateManagers/BlueOrbManager.tsx +++ b/src/components/StateManagers/BlueOrbManager.tsx @@ -1,14 +1,18 @@ import { useCallback, useEffect } from "react"; import { useBlueOrbStore } from "../../store"; -import game_action_mappings from "../../resources/game_action_mappings.json"; import { StateManagerProps } from "./EventManager"; -type SetActiveBlueOrb = (value: string) => void; +type UpdateActiveBlueOrb = ( + newActiveBlueOrbId: string, + newBlueOrbColIdx: number, + newBlueOrbRowIdx: number +) => void; + type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void; type BlueOrbDispatchData = { - action: SetActiveBlueOrb | SetIsActiveBlueOrbInteractedWith; - value: string | boolean; + action: any; + value: any; actionDelay: number; }; @@ -22,9 +26,10 @@ type BlueOrbDispatcher = { }; const BlueOrbManager = (props: StateManagerProps) => { - const setActiveBlueOrb: SetActiveBlueOrb = useBlueOrbStore( - (state) => state.setActiveBlueOrbId - ); + const setActiveBlueOrb = useBlueOrbStore((state) => state.setActiveBlueOrbId); + const setBlueOrbRowIdx = useBlueOrbStore((state) => state.setBlueOrbRowIdx); + const setBlueOrbColIdx = useBlueOrbStore((state) => state.setBlueOrbColIdx); + const setIsActiveBlueOrbInteractedWith: SetIsActiveBlueOrbInteractedWith = useBlueOrbStore( (state) => state.setIsActiveBlueOrbInteractedWith ); @@ -69,32 +74,50 @@ const BlueOrbManager = (props: StateManagerProps) => { setIsActiveBlueOrbInteractedWith, ]); + const updateActiveBlueOrb = useCallback( + ( + newActiveBlueOrbId: string, + newBlueOrbColIdx: number, + newBlueOrbRowIdx: number + ) => { + setActiveBlueOrb(newActiveBlueOrbId); + setBlueOrbColIdx(newBlueOrbColIdx); + setBlueOrbRowIdx(newBlueOrbRowIdx); + }, + [setActiveBlueOrb, setBlueOrbColIdx, setBlueOrbRowIdx] + ); + const dispatchObject = useCallback( - (event: string, targetBlueOrbId: string) => { + ( + event: string, + newActiveBlueOrbId: string, + newBlueOrbColIdx: number, + newBlueOrbRowIdx: number + ) => { const dispatcherObjects: BlueOrbDispatcher = { move_up: { - action: setActiveBlueOrb, - value: targetBlueOrbId, + action: updateActiveBlueOrb, + value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], actionDelay: 3903.704, }, move_down: { - action: setActiveBlueOrb, - value: targetBlueOrbId, + action: updateActiveBlueOrb, + value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], actionDelay: 3903.704, }, move_left: { - action: setActiveBlueOrb, - value: targetBlueOrbId, + action: updateActiveBlueOrb, + value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], actionDelay: 3903.704, }, move_right: { - action: setActiveBlueOrb, - value: targetBlueOrbId, + action: updateActiveBlueOrb, + value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], actionDelay: 3903.704, }, change_blue_orb: { - action: setActiveBlueOrb, - value: targetBlueOrbId, + action: updateActiveBlueOrb, + value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx], actionDelay: 0, }, select_blue_orb: { @@ -106,27 +129,29 @@ const BlueOrbManager = (props: StateManagerProps) => { return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [animateActiveBlueOrbThrow, setActiveBlueOrb] + [animateActiveBlueOrbThrow, updateActiveBlueOrb] ); useEffect(() => { if (props.eventState) { - const eventObject: any = - game_action_mappings[ - props.eventState as keyof typeof game_action_mappings - ]; + const eventAction = props.eventState.event; + const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId; + const newBlueOrbRowIdx = props.eventState.newBlueOrbRowIdx; + const newBlueOrbColIdx = props.eventState.newBlueOrbColIdx; - if (eventObject) { - const eventAction = eventObject.action; - const targetBlueOrbId = eventObject.target_blue_orb_id; + const dispatchedObject = dispatchObject( + eventAction, + newActiveBlueOrbId, + newBlueOrbColIdx, + newBlueOrbRowIdx + ); - const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId); + console.log(dispatchedObject) - if (dispatchedObject) { - setTimeout(() => { - dispatchedObject.action(dispatchedObject.value as never); - }, dispatchedObject.actionDelay); - } + if (dispatchedObject) { + setTimeout(() => { + dispatchedObject.action.apply(null, dispatchedObject.value); + }, dispatchedObject.actionDelay); } } }, [props.eventState, setActiveBlueOrb, dispatchObject]); diff --git a/src/components/StateManagers/EventManager.tsx b/src/components/StateManagers/EventManager.tsx index 94b2a1b..302b2c5 100644 --- a/src/components/StateManagers/EventManager.tsx +++ b/src/components/StateManagers/EventManager.tsx @@ -20,6 +20,7 @@ import YellowTextManager from "./YellowTextManager"; import MediaImageManager from "./MediaImageManager"; import computeAction from "../../core/computeAction"; import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json"; +import LevelManager from "./LevelManager"; const getKeyCodeAssociation = (keyCode: number): string => { const keyCodeAssocs = { @@ -32,8 +33,16 @@ const getKeyCodeAssociation = (keyCode: number): string => { return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs]; }; +type EventState = { + event: string; + newBlueOrbColIdx: number; + newBlueOrbRowIdx: number; + newLevel: string; + newActiveBlueOrbId: string; + newSiteRotIdx: string; +}; export type StateManagerProps = { - eventState: string; + eventState: any; }; export type GameContext = { @@ -46,36 +55,17 @@ export type GameContext = { }; const EventManager = () => { - const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId); const blueOrbRowIdx = useBlueOrbStore((state) => state.blueOrbRowIdx); const blueOrbColIdx = useBlueOrbStore((state) => state.blueOrbColIdx); const siteRotIdx = useSiteStore((state) => state.siteRotIdx); const currentLevel = useLevelStore((state) => state.currentLevel); - const availableBlueOrbsForSelection = available_blue_orbs_on_projection[ - siteRotIdx as keyof typeof available_blue_orbs_on_projection - ].map((posIdxArr) => posIdxArr.map((posIdx) => currentLevel + posIdx)); - - const selectedBlueOrb = - availableBlueOrbsForSelection[blueOrbRowIdx][blueOrbColIdx]; - - const [eventState, setEventState] = useState(); - const activeMediaComponent = useMediaStore( - (state) => state.activeMediaComponent - ); + const [eventState, setEventState] = useState(); const currentScene = useSceneStore((state) => state.currentScene); const [inputCooldown, setInputCooldown] = useState(false); - const sceneEventKey = useMemo(() => { - const keys = { - main: activeBlueOrb, - media: activeMediaComponent, - }; - return keys[currentScene as keyof typeof keys]; - }, [activeBlueOrb, activeMediaComponent, currentScene]); - const gameContext: GameContext = useMemo( () => ({ scene: currentScene, @@ -96,12 +86,11 @@ const EventManager = () => { if (keyPress && !inputCooldown) { gameContext.keyPress = keyPress; const event = computeAction(gameContext); - console.log(event); - const eventId = `${sceneEventKey}_${keyPress}`; - setEventState(eventId); + console.log(event) + setEventState(event); } }, - [gameContext, inputCooldown, sceneEventKey] + [gameContext, inputCooldown] ); useEffect(() => { @@ -120,12 +109,13 @@ const EventManager = () => { - - - + {/**/} + {/**/} + {/**/} - + {/**/} + ); }; diff --git a/src/components/StateManagers/LainManager.tsx b/src/components/StateManagers/LainManager.tsx index 4369605..37e331e 100644 --- a/src/components/StateManagers/LainManager.tsx +++ b/src/components/StateManagers/LainManager.tsx @@ -1,6 +1,5 @@ import { useCallback, useEffect } from "react"; import { useLainStore } from "../../store"; -import game_action_mappings from "../../resources/game_action_mappings.json"; import { StateManagerProps } from "./EventManager"; const LainManager = (props: StateManagerProps) => { @@ -43,22 +42,15 @@ const LainManager = (props: StateManagerProps) => { useEffect(() => { if (props.eventState) { - const eventObject = - game_action_mappings[ - props.eventState as keyof typeof game_action_mappings - ]; + const eventAction = props.eventState.event; + const dispatchedObject = dispatchObject(eventAction); - if (eventObject) { - const eventAction = eventObject.action; - const dispatchedObject = dispatchObject(eventAction); + if (dispatchedObject) { + dispatchedObject.action(dispatchedObject.value); - if (dispatchedObject) { - dispatchedObject.action(dispatchedObject.value); - - setTimeout(() => { - setLainMoveState("standing"); - }, dispatchedObject.duration); - } + setTimeout(() => { + setLainMoveState("standing"); + }, dispatchedObject.duration); } } }, [props.eventState, setLainMoveState, dispatchObject]); diff --git a/src/components/StateManagers/LevelManager.tsx b/src/components/StateManagers/LevelManager.tsx new file mode 100644 index 0000000..90c0012 --- /dev/null +++ b/src/components/StateManagers/LevelManager.tsx @@ -0,0 +1,41 @@ +import { useCallback, useEffect } from "react"; +import { StateManagerProps } from "./EventManager"; +import { useLevelStore } from "../../store"; + +const LevelManager = (props: StateManagerProps) => { + const setCurrentLevel = useLevelStore((state) => state.setCurrentLevel); + + const dispatchObject = useCallback( + (event: string, newLevel: string) => { + const dispatcherObjects = { + move_up: { + action: setCurrentLevel, + value: newLevel, + }, + move_down: { + action: setCurrentLevel, + value: newLevel, + }, + }; + + return dispatcherObjects[event as keyof typeof dispatcherObjects]; + }, + [setCurrentLevel] + ); + + useEffect(() => { + if (props.eventState) { + const eventAction = props.eventState.event; + const newLevel = props.eventState.newLevel; + const dispatchedObject = dispatchObject(eventAction, newLevel); + + if (dispatchedObject) { + dispatchedObject.action(dispatchedObject.value); + } + } + }, [props.eventState, dispatchObject]); + + return null; +}; + +export default LevelManager; diff --git a/src/components/StateManagers/MiddleRingManager.tsx b/src/components/StateManagers/MiddleRingManager.tsx index b603ca5..08baaf3 100644 --- a/src/components/StateManagers/MiddleRingManager.tsx +++ b/src/components/StateManagers/MiddleRingManager.tsx @@ -195,20 +195,13 @@ const MiddleRingManager = (props: any) => { useEffect(() => { if (props.eventState) { - const eventObject = - game_action_mappings[ - props.eventState as keyof typeof game_action_mappings - ]; + const eventAction = props.eventState.event; - if (eventObject) { - const eventAction = eventObject.action; + const dispatchedObject = + dispatcherObjects[eventAction as keyof typeof dispatcherObjects]; - const dispatchedObject = - dispatcherObjects[eventAction as keyof typeof dispatcherObjects]; - - if (dispatchedObject) { - dispatchedObject.action(); - } + if (dispatchedObject) { + dispatchedObject.action(); } } }, [ diff --git a/src/components/StateManagers/SiteManager.tsx b/src/components/StateManagers/SiteManager.tsx index 0b5a161..63abc1c 100644 --- a/src/components/StateManagers/SiteManager.tsx +++ b/src/components/StateManagers/SiteManager.tsx @@ -1,58 +1,62 @@ -import { useEffect, useMemo } from "react"; +import { useCallback, useEffect, useMemo } from "react"; import { useSiteStore } from "../../store"; -import game_action_mappings from "../../resources/game_action_mappings.json"; import { StateManagerProps } from "./EventManager"; const SiteManager = (props: StateManagerProps) => { - const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY); - const incrementSitePosY = useSiteStore((state) => state.incrementSitePosY); + const addToSiteRotY = useSiteStore((state) => state.addToSiteRotY); + const addToSitePosY = useSiteStore((state) => state.addToSitePosY); + const setSiteRotIdx = useSiteStore((state) => state.setSiteRotIdx); const setIsSiteYChanging = useSiteStore((state) => state.setIsSiteChanging); - const dispatcherObjects = useMemo( - () => ({ - move_up: { action: incrementSitePosY, value: -1.5, actionDelay: 1300 }, - move_down: { action: incrementSitePosY, value: 1.5, actionDelay: 1300 }, - move_left: { - action: incrementSiteRotY, - value: Math.PI / 4, - actionDelay: 1100, - }, - move_right: { - action: incrementSiteRotY, - value: -Math.PI / 4, - actionDelay: 1100, - }, - }), - [incrementSitePosY, incrementSiteRotY] + const rotateSite = useCallback( + (value: number, newSiteRotIdx: string) => { + addToSiteRotY(value); + setSiteRotIdx(newSiteRotIdx); + }, + [addToSiteRotY, setSiteRotIdx] + ); + + const dispatchObject = useCallback( + (event: string, newSiteRotIdx: string) => { + const dispatcherObjects = { + move_up: { action: addToSitePosY, value: [-1.5], actionDelay: 1300 }, + move_down: { action: addToSitePosY, value: [1.5], actionDelay: 1300 }, + move_left: { + action: rotateSite, + value: [Math.PI / 4, newSiteRotIdx], + actionDelay: 1100, + }, + move_right: { + action: rotateSite, + value: [-Math.PI / 4, newSiteRotIdx], + actionDelay: 1100, + }, + }; + + return dispatcherObjects[event as keyof typeof dispatcherObjects]; + }, + [addToSitePosY, rotateSite] ); useEffect(() => { if (props.eventState) { - const eventObject = - game_action_mappings[ - props.eventState as keyof typeof game_action_mappings - ]; + const eventAction = props.eventState.event; + const newSiteRotIdx = props.eventState.newSiteRotIdx; - if (eventObject) { - const eventAction = eventObject.action; + const dispatchedObject = dispatchObject(eventAction, newSiteRotIdx); + if (dispatchedObject) { + setIsSiteYChanging(true); - const dispatchedObject = - dispatcherObjects[eventAction as keyof typeof dispatcherObjects]; + setTimeout(() => { + (dispatchedObject.action as any).apply(null, dispatchedObject.value); + }, dispatchedObject.actionDelay); - if (dispatchedObject) { - setIsSiteYChanging(true); - - setTimeout(() => { - dispatchedObject.action(dispatchedObject.value); - }, dispatchedObject.actionDelay); - - setTimeout(() => { - setIsSiteYChanging(false); - }, 3000); - } + setTimeout(() => { + setIsSiteYChanging(false); + }, 3000); } } - }, [dispatcherObjects, props.eventState, setIsSiteYChanging]); + }, [dispatchObject, props.eventState, setIsSiteYChanging]); return null; }; diff --git a/src/core/computeAction.ts b/src/core/computeAction.ts index c7206ff..1497a8b 100644 --- a/src/core/computeAction.ts +++ b/src/core/computeAction.ts @@ -1,4 +1,5 @@ import { GameContext } from "../components/StateManagers/EventManager"; +import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json"; const computeAction = (gameContext: GameContext) => { let event; @@ -6,25 +7,44 @@ const computeAction = (gameContext: GameContext) => { let newBlueOrbRowIdx; let newLevel; let newSiteRotIdx; + let newActiveBlueOrbId; switch (gameContext.keyPress) { case "left": - newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1; - if (newBlueOrbRowIdx < 0) { - return { event: "move_left" }; + newBlueOrbColIdx = gameContext.blueOrbColIdx - 1; + if (newBlueOrbColIdx < 0) { + event = "move_left"; + newSiteRotIdx = parseInt(gameContext.siteRotIdx) + 1; + if (newSiteRotIdx > 8) newSiteRotIdx = "1"; + console.log(newSiteRotIdx) + newBlueOrbColIdx = 0; + newBlueOrbRowIdx = gameContext.blueOrbRowIdx; + newLevel = gameContext.currentLevel; } else { - return { event: "change_blue_orb_left" }; + event = "change_blue_orb"; + newBlueOrbRowIdx = gameContext.blueOrbRowIdx; + newLevel = gameContext.currentLevel; + newSiteRotIdx = gameContext.siteRotIdx; } + break; case "down": - newBlueOrbColIdx = gameContext.blueOrbColIdx + 1; - if (newBlueOrbColIdx > 2) { + newBlueOrbRowIdx = gameContext.blueOrbRowIdx + 1; + if (newBlueOrbRowIdx > 2) { event = "move_down"; newLevel = (parseInt(gameContext.currentLevel) - 1) .toString() .padStart(2, "0"); + + newBlueOrbColIdx = gameContext.blueOrbColIdx; + newBlueOrbRowIdx = 0; + + newSiteRotIdx = gameContext.siteRotIdx; } else { event = "change_blue_orb"; + newBlueOrbColIdx = gameContext.blueOrbColIdx; + newLevel = gameContext.currentLevel; + newSiteRotIdx = gameContext.siteRotIdx; } break; case "up": @@ -42,15 +62,40 @@ const computeAction = (gameContext: GameContext) => { newSiteRotIdx = gameContext.siteRotIdx; } else { event = "change_blue_orb"; + newBlueOrbColIdx = gameContext.blueOrbColIdx; + newLevel = gameContext.currentLevel; + newSiteRotIdx = gameContext.siteRotIdx; + } + break; + case "right": + newBlueOrbColIdx = gameContext.blueOrbColIdx + 1; + if (newBlueOrbColIdx > 3) { + event = "move_right"; + newSiteRotIdx = (parseInt(gameContext.siteRotIdx) - 1).toString(); + newBlueOrbColIdx = 0; + newBlueOrbRowIdx = gameContext.blueOrbRowIdx; + newLevel = gameContext.currentLevel; + } else { + event = "change_blue_orb"; + newBlueOrbRowIdx = gameContext.blueOrbRowIdx; + newLevel = gameContext.currentLevel; + newSiteRotIdx = gameContext.siteRotIdx; } } + newActiveBlueOrbId = + newLevel + + available_blue_orbs_on_projection[ + newSiteRotIdx as keyof typeof available_blue_orbs_on_projection + ][newBlueOrbRowIdx as number][newBlueOrbColIdx as number]; + return { event: event, newBlueOrbColIdx: newBlueOrbColIdx, newBlueOrbRowIdx: newBlueOrbRowIdx, newSiteRotIdx: newSiteRotIdx, newLevel: newLevel, + newActiveBlueOrbId: newActiveBlueOrbId, }; }; diff --git a/src/store.ts b/src/store.ts index 37e3bc6..07f65bc 100644 --- a/src/store.ts +++ b/src/store.ts @@ -69,8 +69,8 @@ type SiteState = { siteRotY: number; sitePosY: number; isSiteChangingY: boolean; - incrementSiteRotY: (by: number) => void; - incrementSitePosY: (by: number) => void; + addToSiteRotY: (by: number) => void; + addToSitePosY: (by: number) => void; setSiteRotY: (to: number) => void; setSitePosY: (to: number) => void; setIsSiteChanging: (to: boolean) => void; @@ -193,25 +193,23 @@ export const useHudStore = create((set) => ({ toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })), })); -export const useBlueOrbStore = create((set) => { - return { - activeBlueOrbId: "0422", - isActiveBlueOrbInteractedWith: false, - activeBlueOrbPosX: 0, - activeBlueOrbPosZ: 0, - activeBlueOrbRotZ: 0, - setActiveBlueOrbPosX: (to) => set(() => ({ activeBlueOrbPosX: to })), - setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })), - setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })), - setActiveBlueOrbId: (to) => set(() => ({ activeBlueOrbId: to })), - setIsActiveBlueOrbInteractedWith: (to) => - set(() => ({ isActiveBlueOrbInteractedWith: to })), - blueOrbRowIdx: 0, - setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })), - blueOrbColIdx: 0, - setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })), - }; -}); +export const useBlueOrbStore = create((set) => ({ + activeBlueOrbId: "0422", + isActiveBlueOrbInteractedWith: false, + activeBlueOrbPosX: 0, + activeBlueOrbPosZ: 0, + activeBlueOrbRotZ: 0, + setActiveBlueOrbPosX: (to) => set(() => ({ activeBlueOrbPosX: to })), + setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })), + setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })), + setActiveBlueOrbId: (to) => set(() => ({ activeBlueOrbId: to })), + setIsActiveBlueOrbInteractedWith: (to) => + set(() => ({ isActiveBlueOrbInteractedWith: to })), + blueOrbRowIdx: 0, + setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })), + blueOrbColIdx: 0, + setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })), +})); export const useLainStore = create((set) => ({ lainMoveState: "standing", @@ -253,10 +251,8 @@ export const useSiteStore = create((set) => ({ sitePosY: 0, siteRotY: 0, isSiteChangingY: false, - incrementSitePosY: (by) => - set((state) => ({ sitePosY: state.sitePosY + by })), - incrementSiteRotY: (by) => - set((state) => ({ siteRotY: state.siteRotY + by })), + addToSitePosY: (by) => set((state) => ({ sitePosY: state.sitePosY + by })), + addToSiteRotY: (by) => set((state) => ({ siteRotY: state.siteRotY + by })), setSitePosY: (to) => set(() => ({ sitePosY: to })), setSiteRotY: (to) => set(() => ({ siteRotY: to })), setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),