diff --git a/src/components/MainScene/PurpleRing.tsx b/src/components/MainScene/PurpleRing.tsx index 7e57d07..e464b33 100644 --- a/src/components/MainScene/PurpleRing.tsx +++ b/src/components/MainScene/PurpleRing.tsx @@ -35,8 +35,7 @@ const PurpleRing = memo((props: PurpleRingProps) => { const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]); - const formattedLevel = - props.level.length < 2 ? "0" + props.level : props.level; + const formattedLevel = props.level.padStart(2, "0"); uniforms.siteA = { type: "t", value: siteA }; uniforms.siteB = { type: "t", value: siteB }; diff --git a/src/components/MainScene/Site.tsx b/src/components/MainScene/Site.tsx index 8d1ab55..8a28500 100644 --- a/src/components/MainScene/Site.tsx +++ b/src/components/MainScene/Site.tsx @@ -40,7 +40,7 @@ const Site = memo(() => { {Object.entries(site_a).map((blueOrb) => { if ( - (blueOrb as any)[1]["unlocked_by"] === "-1" && + // (blueOrb as any)[1]["unlocked_by"] === "-1" && activeLevels.includes((blueOrb as any)[0].substr(0, 2)) ) return ( diff --git a/src/components/StateManagers/EventManager.tsx b/src/components/StateManagers/EventManager.tsx index 0f79dcc..94b2a1b 100644 --- a/src/components/StateManagers/EventManager.tsx +++ b/src/components/StateManagers/EventManager.tsx @@ -6,6 +6,7 @@ import BlueOrbManager from "./BlueOrbManager"; import BlueOrbHUDManager from "./BlueOrbHUDManager"; import { useBlueOrbStore, + useLevelStore, useMediaStore, useSceneStore, useSiteStore, @@ -17,6 +18,8 @@ import MediaElementManager from "./MediaElementManager"; import SceneManager from "./SceneManager"; 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"; const getKeyCodeAssociation = (keyCode: number): string => { const keyCodeAssocs = { @@ -33,12 +36,29 @@ export type StateManagerProps = { eventState: string; }; +export type GameContext = { + keyPress?: string; + scene: string; + blueOrbRowIdx: number; + blueOrbColIdx: number; + currentLevel: string; + siteRotIdx: string; +}; + 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( @@ -56,39 +76,32 @@ const EventManager = () => { return keys[currentScene as keyof typeof keys]; }, [activeBlueOrb, activeMediaComponent, currentScene]); + const gameContext: GameContext = useMemo( + () => ({ + scene: currentScene, + siteRotIdx: siteRotIdx, + blueOrbRowIdx: blueOrbRowIdx, + blueOrbColIdx: blueOrbColIdx, + currentLevel: currentLevel, + }), + [blueOrbColIdx, blueOrbRowIdx, currentLevel, currentScene, siteRotIdx] + ); + const handleKeyPress = useCallback( (event) => { const { keyCode } = event; const keyPress = getKeyCodeAssociation(keyCode); - const gameContext = { - scene: currentScene, - keyPress: keyPress, - siteRotIdx: siteRotIdx, - blueOrbRowIdx: blueOrbRowIdx, - blueOrbColIdx: blueOrbColIdx, - }; - if (keyPress && !inputCooldown) { - // event id consists of the CURRENT blue orb id (to calculate where we're at currently) - // and the keypress. - // this id is later on used to get the needed corresponding data for each component - // from blue_orb_directions.json file. - // const eventId = `${activeBlueOrb}_${keyPress}`; - // + gameContext.keyPress = keyPress; + const event = computeAction(gameContext); + console.log(event); const eventId = `${sceneEventKey}_${keyPress}`; setEventState(eventId); } }, - [ - blueOrbColIdx, - blueOrbRowIdx, - currentScene, - inputCooldown, - sceneEventKey, - siteRotIdx, - ] + [gameContext, inputCooldown, sceneEventKey] ); useEffect(() => { diff --git a/src/core/computeAction.ts b/src/core/computeAction.ts index 98a906a..c7206ff 100644 --- a/src/core/computeAction.ts +++ b/src/core/computeAction.ts @@ -1,31 +1,57 @@ -import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json"; - -type GameContext = { - scene: string; - keyPress: string; - siteRotIdx: number; - blueOrbRowIdx: number; - blueOrbColIdx: number; -}; +import { GameContext } from "../components/StateManagers/EventManager"; const computeAction = (gameContext: GameContext) => { - const availableBlueOrbs = [ - available_blue_orbs_on_projection.topRowProjection[gameContext.siteRotIdx], - available_blue_orbs_on_projection.middleRowProjection[ - gameContext.siteRotIdx - ], - available_blue_orbs_on_projection.bottomRowProjection[ - gameContext.siteRotIdx - ], - ]; + let event; + let newBlueOrbColIdx; + let newBlueOrbRowIdx; + let newLevel; + let newSiteRotIdx; switch (gameContext.keyPress) { case "left": - let newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1; - if(newBlueOrbRowIdx < 0) { + newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1; + if (newBlueOrbRowIdx < 0) { + return { event: "move_left" }; + } else { + return { event: "change_blue_orb_left" }; + } + case "down": + newBlueOrbColIdx = gameContext.blueOrbColIdx + 1; + if (newBlueOrbColIdx > 2) { + event = "move_down"; + newLevel = (parseInt(gameContext.currentLevel) - 1) + .toString() + .padStart(2, "0"); + } else { + event = "change_blue_orb"; + } + break; + case "up": + newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1; + if (newBlueOrbRowIdx < 0) { + event = "move_up"; + + newLevel = (parseInt(gameContext.currentLevel) + 1) + .toString() + .padStart(2, "0"); + + newBlueOrbColIdx = gameContext.blueOrbColIdx; + newBlueOrbRowIdx = 2; + + newSiteRotIdx = gameContext.siteRotIdx; + } else { + event = "change_blue_orb"; } } + + return { + event: event, + newBlueOrbColIdx: newBlueOrbColIdx, + newBlueOrbRowIdx: newBlueOrbRowIdx, + newSiteRotIdx: newSiteRotIdx, + newLevel: newLevel, + }; }; export default computeAction; diff --git a/src/resources/available_blue_orbs_on_projection.json b/src/resources/available_blue_orbs_on_projection.json index fddb5cc..a20b492 100644 --- a/src/resources/available_blue_orbs_on_projection.json +++ b/src/resources/available_blue_orbs_on_projection.json @@ -1,32 +1,42 @@ { - "topRowProjection": [ + "1": [ ["16", "19", "20", "23"], - ["17", "20", "21", "16"], - ["18", "21", "22", "17"], - ["19", "22", "23", "18"], - ["20", "23", "16", "19"], - ["21", "16", "17", "20"], - ["22", "17", "18", "21"], - ["23", "18", "19", "22"] - ], - "middleRowProjection": [ ["08", "11", "12", "15"], - ["09", "12", "13", "08"], - ["10", "13", "14", "09"], - ["11", "14", "15", "10"], - ["12", "15", "09", "11"], - ["13", "08", "09", "12"], - ["14", "09", "10", "13"], - ["15", "10", "11", "14"] + ["00", "03", "04", "07"] ], - "bottomRowProjection": [ - ["00", "03", "04", "07"], - ["01", "04", "05", "00"], - ["02", "05", "06", "01"], - ["03", "06", "07", "02"], - ["04", "07", "00", "03"], - ["05", "00", "01", "04"], - ["06", "01", "02", "05"], + "2": [ + ["17", "20", "21", "16"], + ["09", "12", "13", "08"], + ["01", "04", "05", "00"] + ], + "3": [ + ["18", "21", "22", "17"], + ["10", "13", "14", "09"], + ["02", "05", "06", "01"] + ], + "4": [ + ["19", "22", "23", "18"], + ["11", "14", "15", "10"], + ["03", "06", "07", "02"] + ], + "5": [ + ["20", "23", "16", "19"], + ["12", "15", "09", "11"], + ["04", "07", "00", "03"] + ], + "6": [ + ["21", "16", "17", "20"], + ["13", "08", "09", "12"], + ["05", "00", "01", "04"] + ], + "7": [ + ["22", "17", "18", "21"], + ["14", "09", "10", "13"], + ["06", "01", "02", "05"] + ], + "8": [ + ["23", "18", "19", "22"], + ["15", "10", "11", "14"], ["07", "02", "03", "06"] ] } diff --git a/src/store.ts b/src/store.ts index 2254b92..37e3bc6 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,5 +1,6 @@ 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; @@ -73,13 +74,15 @@ type SiteState = { setSiteRotY: (to: number) => void; setSitePosY: (to: number) => void; setIsSiteChanging: (to: boolean) => void; - siteRotIdx: number; - setSiteRotIdx: (to: number) => void; + siteRotIdx: string; + setSiteRotIdx: (to: string) => void; }; type LevelState = { + currentLevel: string; activeLevels: string[]; setActiveLevels: (to: string[]) => void; + setCurrentLevel: (to: string) => void; }; type MiddleRingState = { @@ -190,23 +193,25 @@ export const useHudStore = create((set) => ({ toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })), })); -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 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 useLainStore = create((set) => ({ lainMoveState: "standing", @@ -255,7 +260,7 @@ export const useSiteStore = create((set) => ({ setSitePosY: (to) => set(() => ({ sitePosY: to })), setSiteRotY: (to) => set(() => ({ siteRotY: to })), setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })), - siteRotIdx: 6, + siteRotIdx: "7", setSiteRotIdx: (to) => set(() => ({ siteRotIdx: to })), })); @@ -281,8 +286,10 @@ export const useMiddleRingStore = create((set) => ({ })); export const useLevelStore = create((set) => ({ + currentLevel: "04", activeLevels: ["03", "04", "05"], setActiveLevels: (to) => set(() => ({ activeLevels: to })), + setCurrentLevel: (to) => set(() => ({ currentLevel: to })), })); export const useMediaStore = create((set) => ({