level selection somewhat interactive, still buggy

src/components/MainScene/Lain.tsx

@@ -121,6 +121,8 @@ const Lain = () => {
     move_right: <LainMoveRight />,
     move_up: <LainMoveUp />,
     move_down: <LainMoveDown />,
+    select_level_down: <LainMoveDown />,
+    select_level_up: <LainMoveUp />,
     throw_node: <LainThrowNode />,
   };
 

src/core/StateManagers/GreenTextManager.tsx

@@ -86,9 +86,13 @@ const GreenTextManager = (props: StateManagerProps) => {
             action: initializeGreenTextForMediaScene,
             value: [newActiveNodeId, newLevel],
           };
+        case "toggle_level_selection":
+          return {
+            action: toggleActive,
+          };
       }
     },
-    [initializeGreenTextForMediaScene, toggleAndSetGreenText]
+    [initializeGreenTextForMediaScene, toggleActive, toggleAndSetGreenText]
   );
 
   useEffect(() => {
@@ -106,7 +110,10 @@ const GreenTextManager = (props: StateManagerProps) => {
       );
 
       if (dispatchedObject) {
-        dispatchedObject.action.apply(null, dispatchedObject.value as any);
+        (dispatchedObject.action as any).apply(
+          null,
+          dispatchedObject.value as any
+        );
       }
     }
   }, [props.eventState, dispatchObject]);

src/core/StateManagers/LainManager.tsx

@@ -12,7 +12,8 @@ const LainManager = (props: StateManagerProps) => {
         case "move_down":
         case "move_left":
         case "move_right":
-        case "select_level":
+        case "select_level_up":
+        case "select_level_down":
           return {
             action: setLainMoveState,
             value: event,

src/core/StateManagers/LevelManager.tsx

@@ -10,10 +10,17 @@ const LevelManager = (props: StateManagerProps) => {
       switch (event) {
         case "move_up":
         case "move_down":
-        case "select_level":
           return {
             action: setActiveLevel,
             value: newLevel,
+            delay: 0,
+          };
+        case "select_level_down":
+        case "select_level_up":
+          return {
+            action: setActiveLevel,
+            value: newLevel,
+            delay: 1500,
           };
       }
     },
@@ -27,7 +34,9 @@ const LevelManager = (props: StateManagerProps) => {
       const dispatchedObject = dispatchObject(eventAction, newLevel);
 
       if (dispatchedObject) {
+        setTimeout(() => {
           dispatchedObject.action(dispatchedObject.value);
+        }, dispatchedObject.delay);
       }
     }
   }, [props.eventState, dispatchObject]);

src/core/StateManagers/LevelSelectionManager.tsx

@@ -24,6 +24,11 @@ const LevelSelectionManager = (props: StateManagerProps) => {
             action: setSelectedLevelIdx,
             value: newSelectedLevelIdx,
           };
+        case "select_level_up":
+        case "select_level_down":
+          return {
+            action: toggleLevelSelection,
+          };
       }
     },
     [setSelectedLevelIdx, toggleLevelSelection]

src/core/StateManagers/MiddleRingManager.tsx

@@ -143,7 +143,9 @@ const MiddleRingManager = (props: any) => {
     (event: string) => {
       switch (event) {
         case "move_up":
+        case "select_level_up":
           return { action: moveUp };
+        case "select_level_down":
         case "move_down":
           return { action: moveDown };
         case "move_left":

src/core/StateManagers/NodeHUDManager.tsx

@@ -6,6 +6,40 @@ const NodeHUDManager = (props: StateManagerProps) => {
   const setId = useHudStore((state) => state.setId);
   const toggleActive = useHudStore((state) => state.toggleActive);
 
+  const moveAndChangeNode = useCallback(
+    (targetNodeHudId: string) => {
+      toggleActive();
+
+      setTimeout(() => {
+        setId(targetNodeHudId);
+        toggleActive();
+      }, 3900);
+    },
+    [setId, toggleActive]
+  );
+
+  const changeNode = useCallback(
+    (targetNodeHudId: string) => {
+      toggleActive();
+
+      setTimeout(() => {
+        setId(targetNodeHudId);
+        toggleActive();
+      }, 500);
+    },
+    [setId, toggleActive]
+  );
+
+  const selectLevelAnimation = useCallback(
+    (targetNodeHudId: string) => {
+      setTimeout(() => {
+        setId(targetNodeHudId);
+        toggleActive();
+      }, 3900);
+    },
+    [setId, toggleActive]
+  );
+
   const dispatchObject = useCallback(
     (event: string, targetNodeHudId: string) => {
       switch (event) {
@@ -14,19 +48,27 @@ const NodeHUDManager = (props: StateManagerProps) => {
         case "move_left":
         case "move_right":
           return {
-            action: setId,
+            action: moveAndChangeNode,
-            value: targetNodeHudId,
+            value: [targetNodeHudId],
-            actionDelay: 3903.704,
           };
         case "change_node":
           return {
-            action: setId,
+            action: changeNode,
-            value: targetNodeHudId,
+            value: [targetNodeHudId],
-            actionDelay: 500,
+          };
+        case "toggle_level_selection":
+          return {
+            action: toggleActive,
+          };
+        case "select_level_up":
+        case "select_level_down":
+          return {
+            action: selectLevelAnimation,
+            value: [targetNodeHudId],
           };
       }
     },
-    [setId]
+    [changeNode, moveAndChangeNode, selectLevelAnimation, toggleActive]
   );
 
   useEffect(() => {
@@ -37,12 +79,7 @@ const NodeHUDManager = (props: StateManagerProps) => {
       const dispatchedObject = dispatchObject(eventAction, newActiveHudId);
 
       if (dispatchedObject) {
-        toggleActive();
+        (dispatchedObject.action as any).apply(null, dispatchedObject.value);
-
-        setTimeout(() => {
-          dispatchedObject.action(dispatchedObject.value);
-          toggleActive();
-        }, dispatchedObject.actionDelay);
       }
     }
   }, [props.eventState, toggleActive, dispatchObject]);

src/core/StateManagers/NodeManager.tsx

@@ -8,31 +8,31 @@ const NodeManager = (props: StateManagerProps) => {
     (state) => state.setNodeMatrixIndices
   );
 
-  // const animateActiveNodeThrow = useCallback(() => {
+  const animateActiveNodeThrow = useCallback(() => {
-  //   setIsActiveNodeInteractedWith(true);
+    setActiveNodeState(true, "interactedWith");
-  //
+
-  //   setActiveNodePosZ(0.3);
+    setActiveNodeState(0.3, "posZ");
-  //   setActiveNodePosX(0.9);
+    setActiveNodeState(0.9, "posX");
-  //
+
-  //   setTimeout(() => {
+    setTimeout(() => {
-  //     setActiveNodePosZ(0.2);
+      setActiveNodeState(0.2, "posZ");
-  //     setActiveNodePosX(0.5);
+      setActiveNodeState(0.5, "posX");
-  //   }, 800);
+    }, 800);
-  //   setTimeout(() => {
+    setTimeout(() => {
-  //     setActiveNodePosX(1.55);
+      setActiveNodeState(1.55, "posX");
-  //     setActiveNodeRotZ(-0.005);
+      setActiveNodeState(-0.005, "rotZ");
-  //   }, 2600);
+    }, 2600);
-  //   setTimeout(() => {
+    setTimeout(() => {
-  //     setActiveNodePosZ(2);
+      setActiveNodeState(2, "posZ");
-  //     setActiveNodePosX(0);
+      setActiveNodeState(0, "posX");
-  //     setActiveNodeRotZ(-0.5);
+      setActiveNodeState(-0.5, "rotZ");
-  //   }, 2700);
+    }, 2700);
-  //
+
-  //   setTimeout(() => {
+    setTimeout(() => {
-  //     setActiveNodeRotZ(0);
+      setActiveNodeState(0, "rotZ");
-  //     setIsActiveNodeInteractedWith(false);
+      setActiveNodeState(false, "interactedWith");
-  //   }, 3800);
+    }, 3800);
-  // }, []);
+  }, [setActiveNodeState]);
 
   const updateActiveNode = useCallback(
     (
@@ -71,7 +71,7 @@ const NodeManager = (props: StateManagerProps) => {
           return {
             action: updateActiveNode,
             value: [
-              3903.704,
+              3900,
               true,
               newActiveNodeId,
               newNodeColIdx,
@@ -91,16 +91,16 @@ const NodeManager = (props: StateManagerProps) => {
               newNodeMatIdx,
             ],
           };
-        // case "throw_node_media":
+        case "throw_node_media":
-        // case "throw_node_gate":
+        case "throw_node_gate":
-        // case "throw_node_sskn":
+        case "throw_node_sskn":
-        //   return {
+          return {
-        //     action: animateActiveNodeThrow,
+            action: animateActiveNodeThrow,
-        //     value: [0, true],
+            value: [0, true],
-        //   };
+          };
       }
     },
-    [updateActiveNode]
+    [animateActiveNodeThrow, updateActiveNode]
   );
 
   useEffect(() => {

src/core/StateManagers/SiteManager.tsx

@@ -10,7 +10,8 @@ const SiteManager = (props: StateManagerProps) => {
       switch (event) {
         case "move_up":
         case "move_down":
-        case "select_level":
+        case "select_level_up":
+        case "select_level_down":
           return {
             action: setTransformState,
             value: [newSitePosY, "posY"],

src/core/StateManagers/SubsceneManager.tsx

@@ -10,6 +10,8 @@ const SubsceneManager = (props: StateManagerProps) => {
     (event: string) => {
       switch (event) {
         case "level_selection_back":
+        case "select_level_up":
+        case "select_level_down":
           return {
             action: setMainSubscene,
             value: "site",

src/core/StateManagers/YellowTextManager.tsx

@@ -145,7 +145,7 @@ const YellowTextManager = (props: StateManagerProps) => {
 
     setTimeout(() => {
       setTransformState(-0.02, "posX");
-      setTransformState(0, "posY");
+      setTransformState(0.005, "posY");
     }, 400);
 
     setTimeout(() => {
@@ -252,6 +252,8 @@ const YellowTextManager = (props: StateManagerProps) => {
             value: [newActiveNodeId, newActiveHudId, newLevel],
           };
         case "level_selection_back":
+        case "select_level_up":
+        case "select_level_down":
           return {
             action: levelSelectionBack,
             value: [newActiveNodeId, newActiveHudId, newLevel],
@@ -269,6 +271,7 @@ const YellowTextManager = (props: StateManagerProps) => {
       initializeLevelSelection,
       initializeYellowTextForMainScene,
       initializeYellowTextForMediaScene,
+      levelSelectionBack,
     ]
   );
 

src/core/mainSceneEventHandler.ts

@@ -174,12 +174,27 @@ const handleMainSceneEvent = (gameContext: any) => {
           newLevel: newLevel,
         };
       case "select":
+        const oldLevel = newLevel;
         newLevel = (levelSelectionIdx + 1).toString().padStart(2, "0");
+        if (oldLevel === newLevel) break;
+        else if (newLevel < oldLevel) {
           return {
-          event: "select_level",
+            event: "select_level_down",
             newLevel: newLevel,
-          newSitePosY: level_y_values[newLevel as keyof typeof level_y_values],
+            newSitePosY:
+              level_y_values[newLevel as keyof typeof level_y_values],
           };
+        } else {
+          return {
+            event: "select_level_up",
+            newLevel: newLevel,
+            newSitePosY: -level_y_values[
+              newLevel as keyof typeof level_y_values
+            ],
+            newActiveNodeId: "2022",
+            newActiveHudId: "fg_hud_1",
+          };
+        }
     }
   }
 };