bug fixes and tweaks

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("");
+      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],
+          value: [
-          actionDelay: 3903.704,
+            3903.704,
+            newActiveBlueOrbId,
+            newBlueOrbColIdx,
+            newBlueOrbRowIdx,
+          ],
         },
         move_down: {
           action: updateActiveBlueOrb,
-          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
+          value: [
-          actionDelay: 3903.704,
+            3903.704,
+            newActiveBlueOrbId,
+            newBlueOrbColIdx,
+            newBlueOrbRowIdx,
+          ],
         },
         move_left: {
           action: updateActiveBlueOrb,
-          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
+          value: [
-          actionDelay: 3903.704,
+            3903.704,
+            newActiveBlueOrbId,
+            newBlueOrbColIdx,
+            newBlueOrbRowIdx,
+          ],
         },
         move_right: {
           action: updateActiveBlueOrb,
-          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
+          value: [
-          actionDelay: 3903.704,
+            3903.704,
+            newActiveBlueOrbId,
+            newBlueOrbColIdx,
+            newBlueOrbRowIdx,
+          ],
         },
         change_blue_orb: {
           action: updateActiveBlueOrb,
-          value: [newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
+          value: [0, newActiveBlueOrbId, newBlueOrbColIdx, newBlueOrbRowIdx],
-          actionDelay: 0,
         },
         throw_blue_orb: {
           action: animateActiveBlueOrbThrow,
-          value: [true],
+          value: [0, true],
-          actionDelay: 0,
         },
       };
 
@@ -146,12 +163,8 @@ const BlueOrbManager = (props: StateManagerProps) => {
         newBlueOrbRowIdx
       );
 
-      console.log(dispatchedObject)
-
       if (dispatchedObject) {
-        setTimeout(() => {
         dispatchedObject.action.apply(null, dispatchedObject.value);
-        }, dispatchedObject.actionDelay);
       }
     }
   }, [props.eventState, setActiveBlueOrb, dispatchObject]);

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);
       }
     },

src/components/StateManagers/GreenTextManager.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect } from "react";
+import { MutableRefObject, useCallback, useEffect, useRef } from "react";
-import { useTextRendererStore } from "../../store";
+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(() => {

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(() => {

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) {

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(
+  const addToYellowTextPosY = useTextRendererStore(
-    (state) => state.incrementYellowTextPosY
+    (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);
+        addToYellowTextPosY(yellowLetterPosYOffset);
-      }, 1300);
+        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,

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";
       }

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<TextRendererState>((set) => ({
   yellowTextPosX: -0.35,
   yellowTextOffsetXCoeff: 0,
   setYellowText: (to) => set(() => ({ yellowText: to })),
-  incrementYellowTextPosY: (by) =>
+  addToYellowTextPosY: (val) =>
-    set((state) => ({ yellowTextPosY: state.yellowTextPosY + by })),
+    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<MiddleRingState>((set) => ({
 
 export const useLevelStore = create<LevelState>((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<MediaWordState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "media",
+  currentScene: "main",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));