basic orb changing works

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;
+  action: any;
-  value: string | boolean;
+  value: any;
   actionDelay: number;
 };
 
@@ -22,9 +26,10 @@ type BlueOrbDispatcher = {
 };
 
 const BlueOrbManager = (props: StateManagerProps) => {
-  const setActiveBlueOrb: SetActiveBlueOrb = useBlueOrbStore(
+  const setActiveBlueOrb = useBlueOrbStore((state) => state.setActiveBlueOrbId);
-    (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,
+          action: updateActiveBlueOrb,
-          value: targetBlueOrbId,
+          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
           actionDelay: 3903.704,
         },
         move_down: {
-          action: setActiveBlueOrb,
+          action: updateActiveBlueOrb,
-          value: targetBlueOrbId,
+          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
           actionDelay: 3903.704,
         },
         move_left: {
-          action: setActiveBlueOrb,
+          action: updateActiveBlueOrb,
-          value: targetBlueOrbId,
+          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
           actionDelay: 3903.704,
         },
         move_right: {
-          action: setActiveBlueOrb,
+          action: updateActiveBlueOrb,
-          value: targetBlueOrbId,
+          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
           actionDelay: 3903.704,
         },
         change_blue_orb: {
-          action: setActiveBlueOrb,
+          action: updateActiveBlueOrb,
-          value: targetBlueOrbId,
+          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
           actionDelay: 0,
         },
         select_blue_orb: {
@@ -106,29 +129,31 @@ const BlueOrbManager = (props: StateManagerProps) => {
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [animateActiveBlueOrbThrow, setActiveBlueOrb]
+    [animateActiveBlueOrbThrow, updateActiveBlueOrb]
   );
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject: any =
+      const eventAction = props.eventState.event;
-        game_action_mappings[
+      const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId;
-          props.eventState as keyof typeof game_action_mappings
+      const newBlueOrbRowIdx = props.eventState.newBlueOrbRowIdx;
-        ];
+      const newBlueOrbColIdx = props.eventState.newBlueOrbColIdx;
 
-      if (eventObject) {
+      const dispatchedObject = dispatchObject(
-        const eventAction = eventObject.action;
+        eventAction,
-        const targetBlueOrbId = eventObject.target_blue_orb_id;
+        newActiveBlueOrbId,
+        newBlueOrbColIdx,
+        newBlueOrbRowIdx
+      );
 
-        const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId);
+      console.log(dispatchedObject)
 
       if (dispatchedObject) {
         setTimeout(() => {
-            dispatchedObject.action(dispatchedObject.value as never);
+          dispatchedObject.action.apply(null, dispatchedObject.value);
         }, dispatchedObject.actionDelay);
       }
     }
-    }
   }, [props.eventState, setActiveBlueOrb, dispatchObject]);
   return null;
 };

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[
+  const [eventState, setEventState] = useState<any>();
-    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<string>();
-  const activeMediaComponent = useMediaStore(
-    (state) => state.activeMediaComponent
-  );
   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);
+        console.log(event)
-        const eventId = `${sceneEventKey}_${keyPress}`;
+        setEventState(event);
-        setEventState(eventId);
       }
     },
-    [gameContext, inputCooldown, sceneEventKey]
+    [gameContext, inputCooldown]
   );
 
   useEffect(() => {
@@ -120,12 +109,13 @@ const EventManager = () => {
       <SiteManager eventState={eventState!} />
       <LainManager eventState={eventState!} />
       <MiddleRingManager eventState={eventState!} />
-      <MediaComponentManager eventState={eventState!} />
+      {/*<MediaComponentManager eventState={eventState!} />*/}
-      <MediaWordManager eventState={eventState!} />
+      {/*<MediaWordManager eventState={eventState!} />*/}
-      <MediaElementManager eventState={eventState!} />
+      {/*<MediaElementManager eventState={eventState!} />*/}
       <SceneManager eventState={eventState!} />
       <YellowTextManager eventState={eventState!} />
-      <MediaImageManager eventState={eventState!} />
+      {/*<MediaImageManager eventState={eventState!} />*/}
+      <LevelManager eventState={eventState!} />
     </>
   );
 };

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,13 +42,7 @@ const LainManager = (props: StateManagerProps) => {
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject =
+      const eventAction = props.eventState.event;
-        game_action_mappings[
-          props.eventState as keyof typeof game_action_mappings
-        ];
-
-      if (eventObject) {
-        const eventAction = eventObject.action;
       const dispatchedObject = dispatchObject(eventAction);
 
       if (dispatchedObject) {
@@ -60,7 +53,6 @@ const LainManager = (props: StateManagerProps) => {
         }, dispatchedObject.duration);
       }
     }
-    }
   }, [props.eventState, setLainMoveState, dispatchObject]);
 
   return null;

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;

src/components/StateManagers/MiddleRingManager.tsx

@@ -195,13 +195,7 @@ const MiddleRingManager = (props: any) => {
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject =
+      const eventAction = props.eventState.event;
-        game_action_mappings[
-          props.eventState as keyof typeof game_action_mappings
-        ];
-
-      if (eventObject) {
-        const eventAction = eventObject.action;
 
       const dispatchedObject =
         dispatcherObjects[eventAction as keyof typeof dispatcherObjects];
@@ -210,7 +204,6 @@ const MiddleRingManager = (props: any) => {
         dispatchedObject.action();
       }
     }
-    }
   }, [
     dispatcherObjects,
     props.eventState,

src/components/StateManagers/SiteManager.tsx

@@ -1,49 +1,54 @@
-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 addToSiteRotY = useSiteStore((state) => state.addToSiteRotY);
-  const incrementSitePosY = useSiteStore((state) => state.incrementSitePosY);
+  const addToSitePosY = useSiteStore((state) => state.addToSitePosY);
+  const setSiteRotIdx = useSiteStore((state) => state.setSiteRotIdx);
   const setIsSiteYChanging = useSiteStore((state) => state.setIsSiteChanging);
 
-  const dispatcherObjects = useMemo(
+  const rotateSite = useCallback(
-    () => ({
+    (value: number, newSiteRotIdx: string) => {
-      move_up: { action: incrementSitePosY, value: -1.5, actionDelay: 1300 },
+      addToSiteRotY(value);
-      move_down: { action: incrementSitePosY, value: 1.5, actionDelay: 1300 },
+      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: incrementSiteRotY,
+          action: rotateSite,
-        value: Math.PI / 4,
+          value: [Math.PI / 4, newSiteRotIdx],
           actionDelay: 1100,
         },
         move_right: {
-        action: incrementSiteRotY,
+          action: rotateSite,
-        value: -Math.PI / 4,
+          value: [-Math.PI / 4, newSiteRotIdx],
           actionDelay: 1100,
         },
-    }),
+      };
-    [incrementSitePosY, incrementSiteRotY]
+
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [addToSitePosY, rotateSite]
   );
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject =
+      const eventAction = props.eventState.event;
-        game_action_mappings[
+      const newSiteRotIdx = props.eventState.newSiteRotIdx;
-          props.eventState as keyof typeof game_action_mappings
-        ];
-
-      if (eventObject) {
-        const eventAction = eventObject.action;
-
-        const dispatchedObject =
-          dispatcherObjects[eventAction as keyof typeof dispatcherObjects];
 
+      const dispatchedObject = dispatchObject(eventAction, newSiteRotIdx);
       if (dispatchedObject) {
         setIsSiteYChanging(true);
 
         setTimeout(() => {
-            dispatchedObject.action(dispatchedObject.value);
+          (dispatchedObject.action as any).apply(null, dispatchedObject.value);
         }, dispatchedObject.actionDelay);
 
         setTimeout(() => {
@@ -51,8 +56,7 @@ const SiteManager = (props: StateManagerProps) => {
         }, 3000);
       }
     }
-    }
+  }, [dispatchObject, props.eventState, setIsSiteYChanging]);
-  }, [dispatcherObjects, props.eventState, setIsSiteYChanging]);
   return null;
 };
 

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;
+      newBlueOrbColIdx = gameContext.blueOrbColIdx - 1;
-      if (newBlueOrbRowIdx < 0) {
+      if (newBlueOrbColIdx < 0) {
-        return { event: "move_left" };
+        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;
+      newBlueOrbRowIdx = gameContext.blueOrbRowIdx + 1;
-      if (newBlueOrbColIdx > 2) {
+      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,
   };
 };
 

src/store.ts

@@ -69,8 +69,8 @@ type SiteState = {
   siteRotY: number;
   sitePosY: number;
   isSiteChangingY: boolean;
-  incrementSiteRotY: (by: number) => void;
+  addToSiteRotY: (by: number) => void;
-  incrementSitePosY: (by: number) => void;
+  addToSitePosY: (by: number) => void;
   setSiteRotY: (to: number) => void;
   setSitePosY: (to: number) => void;
   setIsSiteChanging: (to: boolean) => void;
@@ -193,8 +193,7 @@ export const useHudStore = create<HUDState>((set) => ({
   toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
 }));
 
-export const useBlueOrbStore = create<BlueOrbState>((set) => {
+export const useBlueOrbStore = create<BlueOrbState>((set) => ({
-  return {
   activeBlueOrbId: "0422",
   isActiveBlueOrbInteractedWith: false,
   activeBlueOrbPosX: 0,
@@ -210,8 +209,7 @@ export const useBlueOrbStore = create<BlueOrbState>((set) => {
   setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })),
   blueOrbColIdx: 0,
   setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })),
-  };
+}));
-});
 
 export const useLainStore = create<LainState>((set) => ({
   lainMoveState: "standing",
@@ -253,10 +251,8 @@ export const useSiteStore = create<SiteState>((set) => ({
   sitePosY: 0,
   siteRotY: 0,
   isSiteChangingY: false,
-  incrementSitePosY: (by) =>
+  addToSitePosY: (by) => set((state) => ({ sitePosY: state.sitePosY + by })),
-    set((state) => ({ sitePosY: state.sitePosY + by })),
+  addToSiteRotY: (by) => set((state) => ({ siteRotY: state.siteRotY + by })),
-  incrementSiteRotY: (by) =>
-    set((state) => ({ siteRotY: state.siteRotY + by })),
   setSitePosY: (to) => set(() => ({ sitePosY: to })),
   setSiteRotY: (to) => set(() => ({ siteRotY: to })),
   setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),