refactoring

src/components/MainScene/Lain.tsx

@@ -117,10 +117,10 @@ const Lain = () => {
 
   const lainAnimationDispatch = {
     standing: <LainStanding />,
-    move_left: <LainMoveLeft />,
+    site_left: <LainMoveLeft />,
-    move_right: <LainMoveRight />,
+    site_right: <LainMoveRight />,
-    move_up: <LainMoveUp />,
+    site_up: <LainMoveUp />,
-    move_down: <LainMoveDown />,
+    site_down: <LainMoveDown />,
     select_level_down: <LainMoveDown />,
     select_level_up: <LainMoveUp />,
     throw_node: <LainThrowNode />,

src/components/MainScene/LevelSelection.tsx

@@ -24,15 +24,7 @@ const LevelSelection = () => {
   const upArrowTex = useLoader(THREE.TextureLoader, upArrow);
   const downArrowTex = useLoader(THREE.TextureLoader, downArrow);
 
-  const selectedLevelIdx = useLevelSelectionStore(
+  const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel)
-    (state) => state.selectedLevelIdx
-  );
-
-  const selectedLevel = useLevelSelectionStore(
-    useCallback((state) => state.availableLevels[selectedLevelIdx], [
-      selectedLevelIdx,
-    ])
-  )
     .toString()
     .padStart(2, "0");
 

src/core/StateManagers/EventManager.tsx

@@ -61,9 +61,7 @@ const EventManager = () => {
   const siteTransformState = useSiteStore((state) => state.transformState);
   const activeLevel = useLevelStore((state) => state.activeLevel);
   const mainSubscene = useMainSceneStore((state) => state.subscene);
-  const levelSelectionIdx = useLevelSelectionStore(
+  const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
-    (state) => state.selectedLevelIdx
-  );
   const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
   const activePauseComponent = usePauseStore(
     useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
@@ -150,7 +148,7 @@ const EventManager = () => {
               siteTransformState: siteTransformState,
               nodeMatrixIndices: nodeMatrixIndices,
               activeLevel: activeLevel,
-              levelSelectionIdx: levelSelectionIdx,
+              selectedLevel: selectedLevel,
               pauseMatrixIdx: pauseMatrixIdx,
               activePauseComponent: activePauseComponent,
               unlockedNodes: unlockedNodes,
@@ -191,6 +189,7 @@ const EventManager = () => {
       activeBootElement,
       activeLevel,
       activeMediaComponent,
+      activePauseComponent,
       activeSSknComponent,
       authorizeUserActiveLetterTexOffset,
       authorizeUserBgLettersPos,
@@ -198,12 +197,13 @@ const EventManager = () => {
       currentBootSubscene,
       currentScene,
       inputCooldown,
-      levelSelectionIdx,
       mainSubscene,
       nodeMatrixIndices,
       pauseMatrixIdx,
       rightSideComponentIdx,
+      selectedLevel,
       siteTransformState,
+      unlockedNodes,
       wordPosStateIdx,
     ]
   );

src/core/StateManagers/GreenTextManager.tsx

@@ -68,10 +68,10 @@ const GreenTextManager = (props: StateManagerProps) => {
       newLevel: string
     ) => {
       switch (event) {
-        case "move_up":
+        case "site_up":
-        case "move_down":
+        case "site_down":
-        case "move_left":
+        case "site_left":
-        case "move_right":
+        case "site_right":
           return {
             action: toggleAndSetGreenText,
             value: [newActiveNodeId, newActiveHudId, newLevel, 3903.704],

src/core/StateManagers/LainManager.tsx

@@ -8,10 +8,10 @@ const LainManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string) => {
       switch (event) {
-        case "move_up":
+        case "site_up":
-        case "move_down":
+        case "site_down":
-        case "move_left":
+        case "site_left":
-        case "move_right":
+        case "site_right":
         case "select_level_up":
         case "select_level_down":
           return {

src/core/StateManagers/LevelManager.tsx

@@ -8,8 +8,8 @@ const LevelManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string, newLevel: string) => {
       switch (event) {
-        case "move_up":
+        case "site_up":
-        case "move_down":
+        case "site_down":
           return {
             action: setActiveLevel,
             value: newLevel,
@@ -31,6 +31,7 @@ const LevelManager = (props: StateManagerProps) => {
     if (props.eventState) {
       const eventAction = props.eventState.event;
       const newLevel = props.eventState.newLevel;
+
       const dispatchedObject = dispatchObject(eventAction, newLevel);
 
       if (dispatchedObject) {

src/core/StateManagers/LevelSelectionManager.tsx

@@ -6,8 +6,8 @@ const LevelSelectionManager = (props: StateManagerProps) => {
   const toggleLevelSelection = useLevelSelectionStore(
     (state) => state.toggleLevelSelection
   );
-  const setSelectedLevelIdx = useLevelSelectionStore(
+  const setSelectedLevel = useLevelSelectionStore(
-    (state) => state.setSelectedLevelIdx
+    (state) => state.setSelectedLevel
   );
 
   const dispatchObject = useCallback(
@@ -21,7 +21,7 @@ const LevelSelectionManager = (props: StateManagerProps) => {
         case "level_selection_up":
         case "level_selection_down":
           return {
-            action: setSelectedLevelIdx,
+            action: setSelectedLevel,
             value: newSelectedLevelIdx,
           };
         case "select_level_up":
@@ -31,7 +31,7 @@ const LevelSelectionManager = (props: StateManagerProps) => {
           };
       }
     },
-    [setSelectedLevelIdx, toggleLevelSelection]
+    [setSelectedLevel, toggleLevelSelection]
   );
 
   useEffect(() => {

src/core/StateManagers/MiddleRingManager.tsx

@@ -142,15 +142,15 @@ const MiddleRingManager = (props: any) => {
   const dispatchObject = useCallback(
     (event: string) => {
       switch (event) {
-        case "move_up":
+        case "site_up":
         case "select_level_up":
           return { action: moveUp };
         case "select_level_down":
-        case "move_down":
+        case "site_down":
           return { action: moveDown };
-        case "move_left":
+        case "site_left":
           return { action: rotate, value: ["left"] };
-        case "move_right":
+        case "site_right":
           return { action: rotate, value: ["right"] };
       }
     },

src/core/StateManagers/NodeHUDManager.tsx

@@ -43,10 +43,10 @@ const NodeHUDManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string, targetNodeHudId: string) => {
       switch (event) {
-        case "move_up":
+        case "site_up":
-        case "move_down":
+        case "site_down":
-        case "move_left":
+        case "site_left":
-        case "move_right":
+        case "site_right":
           return {
             action: moveAndChangeNode,
             value: [targetNodeHudId],

src/core/StateManagers/NodeManager.tsx

@@ -64,10 +64,12 @@ const NodeManager = (props: StateManagerProps) => {
       newNodeMatIdx: number
     ) => {
       switch (event) {
-        case "move_up":
+        case "site_up":
-        case "move_down":
+        case "site_down":
-        case "move_left":
+        case "site_left":
-        case "move_right":
+        case "site_right":
+        case "select_level_up":
+        case "select_level_down":
           return {
             action: updateActiveNode,
             value: [

src/core/StateManagers/SiteManager.tsx

@@ -8,8 +8,8 @@ const SiteManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string, newSitePosY: number, newSiteRotY: number) => {
       switch (event) {
-        case "move_up":
+        case "site_up":
-        case "move_down":
+        case "site_down":
         case "select_level_up":
         case "select_level_down":
           return {
@@ -17,8 +17,8 @@ const SiteManager = (props: StateManagerProps) => {
             value: [newSitePosY, "posY"],
             actionDelay: 1300,
           };
-        case "move_left":
+        case "site_left":
-        case "move_right":
+        case "site_right":
           return {
             action: setTransformState,
             value: [newSiteRotY, "rotY"],

src/core/StateManagers/YellowTextManager.tsx

@@ -193,17 +193,17 @@ const YellowTextManager = (props: StateManagerProps) => {
       newLevel: string
     ) => {
       switch (event) {
-        case "move_up":
+        case "site_up":
           return {
             action: animateYellowTextWithMove,
             value: [0, -1.5, newActiveHudId, newActiveNodeId, newLevel, 1300],
           };
-        case "move_down":
+        case "site_down":
           return {
             action: animateYellowTextWithMove,
             value: [0, 1.5, newActiveHudId, newActiveNodeId, newLevel, 1300],
           };
-        case "move_left":
+        case "site_left":
           return {
             action: animateYellowTextWithMove,
             value: [
@@ -215,7 +215,7 @@ const YellowTextManager = (props: StateManagerProps) => {
               1100,
             ],
           };
-        case "move_right":
+        case "site_right":
           return {
             action: animateYellowTextWithMove,
             value: [

src/core/mainSceneEventHandler.ts

@@ -1,8 +1,6 @@
 import node_matrices from "../resources/node_matrices.json";
 import site_a from "../resources/site_a.json";
-import level_y_values from "../resources/level_y_values.json";
 import nodeSelector from "./nodeSelector";
-import unlocked_nodes from "../resources/unlocked_nodes.json";
 
 const hudAssocs = {
   "00": "fg_hud_1",
@@ -24,7 +22,7 @@ const handleMainSceneEvent = (gameContext: any) => {
 
   const keyPress = gameContext.keyPress;
   const subscene = gameContext.mainSubscene;
-  const levelSelectionIdx = gameContext.levelSelectionIdx;
+  const selectedLevel = gameContext.selectedLevel;
   const pauseMatrixIdx = gameContext.pauseMatrixIdx;
   const activePauseComponent = gameContext.activePauseComponent;
   const unlockedNodes = gameContext.unlockedNodes;
@@ -32,14 +30,15 @@ const handleMainSceneEvent = (gameContext: any) => {
   const nodeColIdx = gameContext.nodeMatrixIndices.colIdx;
   const nodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
   const nodeMatIdx = gameContext.nodeMatrixIndices.matrixIdx;
-  const level = gameContext.activeLevel;
+  const level = parseInt(gameContext.activeLevel);
   const siteRotY = gameContext.siteTransformState.rotY;
   const sitePosY = gameContext.siteTransformState.posY;
 
+  let newActiveNodeId;
   let newNodeMatIdx = gameContext.nodeMatrixIndices.matrixIdx;
   let newNodeColIdx = gameContext.nodeMatrixIndices.colIdx;
   let newNodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
-  let newLevel = gameContext.activeLevel;
+  let newLevel = parseInt(gameContext.activeLevel);
   let newSiteRotY = gameContext.siteTransformState.rotY;
   let newSitePosY = gameContext.siteTransformState.posY;
   let newScene = gameContext.scene;
@@ -52,7 +51,7 @@ const handleMainSceneEvent = (gameContext: any) => {
       case "DOWN":
       case "UP":
         selectedNodeData = nodeSelector({
-          keyPress: keyPress,
+          action: `site_${keyPress.toLowerCase()}`,
           nodeMatIdx: nodeMatIdx,
           nodeColIdx: nodeColIdx,
           nodeRowIdx: nodeRowIdx,
@@ -64,6 +63,7 @@ const handleMainSceneEvent = (gameContext: any) => {
 
         if (selectedNodeData) {
           event = selectedNodeData.event;
+          newActiveNodeId = selectedNodeData.newActiveNodeId;
           newNodeMatIdx = selectedNodeData.newNodeMatIdx;
           newNodeColIdx = selectedNodeData.newNodeColIdx;
           newNodeRowIdx = selectedNodeData.newNodeRowIdx;
@@ -77,8 +77,8 @@ const handleMainSceneEvent = (gameContext: any) => {
         // in this case we have to check the type of the blue orb
         // and dispatch an action depending on that, so we have to precalculate the
         // new active blue orb here.
-        const newActiveNodeId =
+        newActiveNodeId =
-          newLevel +
+          gameContext.activeLevel +
           node_matrices[newNodeMatIdx.toString() as keyof typeof node_matrices][
             newNodeRowIdx as number
           ][newNodeColIdx as number];
@@ -109,12 +109,6 @@ const handleMainSceneEvent = (gameContext: any) => {
         return { event: "toggle_pause" };
     }
 
-    const newActiveNodeId =
-      newLevel +
-      node_matrices[newNodeMatIdx.toString() as keyof typeof node_matrices][
-        newNodeRowIdx as number
-      ][newNodeColIdx as number];
-
     const newActiveHudId =
       hudAssocs[`${newNodeRowIdx}${newNodeColIdx}` as keyof typeof hudAssocs];
 
@@ -125,7 +119,7 @@ const handleMainSceneEvent = (gameContext: any) => {
       newNodeMatIdx: newNodeMatIdx,
       newSitePosY: newSitePosY,
       newSiteRotY: newSiteRotY,
-      newLevel: newLevel,
+      newLevel: newLevel.toString().padStart(2, "0"),
       newScene: newScene,
       newActiveNodeId: newActiveNodeId,
       newActiveHudId: newActiveHudId,
@@ -133,17 +127,17 @@ const handleMainSceneEvent = (gameContext: any) => {
   } else if (subscene === "level_selection") {
     switch (keyPress) {
       case "UP":
-        if (levelSelectionIdx + 1 <= 23)
+        if (selectedLevel + 1 <= 21)
           return {
             event: `level_selection_up`,
-            newSelectedLevelIdx: levelSelectionIdx + 1,
+            newSelectedLevelIdx: selectedLevel + 1,
           };
         break;
       case "DOWN":
-        if (levelSelectionIdx - 1 >= 0)
+        if (selectedLevel - 1 >= 0)
           return {
             event: `level_selection_down`,
-            newSelectedLevelIdx: levelSelectionIdx - 1,
+            newSelectedLevelIdx: selectedLevel - 1,
           };
         break;
       case "X":
@@ -161,27 +155,67 @@ const handleMainSceneEvent = (gameContext: any) => {
           newLevel: newLevel,
         };
       case "CIRCLE":
-        const oldLevel = newLevel;
+        const selectedNodeData = nodeSelector({
-        newLevel = (levelSelectionIdx + 1).toString().padStart(2, "0");
+          action: "select_level",
-        if (oldLevel === newLevel) break;
+          nodeMatIdx: nodeMatIdx,
-        else if (newLevel < oldLevel) {
+          nodeColIdx: nodeColIdx,
+          nodeRowIdx: nodeRowIdx,
+          level: selectedLevel,
+          siteRotY: siteRotY,
+          sitePosY: sitePosY,
+          unlockedNodes: unlockedNodes,
+        });
+
+        if (level === selectedLevel) break;
+        else if (selectedLevel < level && selectedNodeData) {
           return {
             event: "select_level_down",
-            newLevel: newLevel,
+            newLevel: selectedLevel.toString().padStart(0, "2"),
-            newSitePosY:
+            newSitePosY: -selectedNodeData.newSitePosY,
-              level_y_values[newLevel as keyof typeof level_y_values],
+            newActiveNodeId: selectedNodeData.newActiveNodeId,
+            newNodeMatIdx: selectedNodeData.newNodeMatIdx,
+            newNodeColIdx: selectedNodeData.newNodeColIdx,
+            newNodeRowIdx: selectedNodeData.newNodeRowIdx,
+            newActiveHudId:
+              hudAssocs[
+                `${selectedNodeData.newNodeRowIdx}${selectedNodeData.newNodeColIdx}` as keyof typeof hudAssocs
+              ],
           };
-        } else {
+        } else if (selectedLevel > level && selectedNodeData) {
           return {
             event: "select_level_up",
-            newLevel: newLevel,
+            newLevel: selectedLevel.toString().padStart(0, "2"),
-            newSitePosY: -level_y_values[
+            newSitePosY: -selectedNodeData.newSitePosY,
-              newLevel as keyof typeof level_y_values
+            newActiveNodeId: selectedNodeData.newActiveNodeId,
-            ],
+            newNodeMatIdx: selectedNodeData.newNodeMatIdx,
-            newActiveNodeId: "2022",
+            newNodeColIdx: selectedNodeData.newNodeColIdx,
-            newActiveHudId: "fg_hud_1",
+            newNodeRowIdx: selectedNodeData.newNodeRowIdx,
+            newActiveHudId:
+              hudAssocs[
+                `${selectedNodeData.newNodeRowIdx}${selectedNodeData.newNodeColIdx}` as keyof typeof hudAssocs
+              ],
           };
         }
+
+      // if (oldLevel === newLevel) break;
+      // else if (newLevel < oldLevel) {
+      //   return {
+      //     event: "select_level_down",
+      //     newLevel: newLevel,
+      //     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",
+      //   };
+      // }
     }
   } else if (subscene === "pause") {
     switch (keyPress) {

src/core/nodeSelector.ts

@@ -2,25 +2,26 @@ import node_matrices from "../resources/node_matrices.json";
 import site_a from "../resources/site_a.json";
 import { SiteType } from "../components/MainScene/Site";
 import unlocked_nodes from "../resources/unlocked_nodes.json";
+import level_y_values from "../resources/level_y_values.json";
 
 type NodeSelectorContext = {
-  keyPress: string;
+  action: string;
   nodeMatIdx: number;
   nodeColIdx: number;
   nodeRowIdx: number;
-  level: string;
+  level: number;
   siteRotY: number;
   sitePosY: number;
   unlockedNodes: typeof unlocked_nodes;
 };
 
 const getNodeId = (
-  level: string,
+  level: number,
   nodeMatIdx: number,
   nodeRowIdx: number,
   nodeColIdx: number
 ) =>
-  level +
+  level.toString().padStart(2, "0") +
   node_matrices[nodeMatIdx.toString() as keyof typeof node_matrices][
     nodeRowIdx
   ][nodeColIdx];
@@ -59,10 +60,62 @@ const tryRow = (row: number, triedRows: number[]) => {
   return possibleRows.find((elem) => !triedRows.includes(elem));
 };
 
+const findNodeAfterLevelSelection = (
+  unlockedNodes: typeof unlocked_nodes,
+  targetLevel: number,
+  nodeMatIdx: number,
+  nodeRowIdx: number,
+  nodeColIdx: number
+) => {
+  let newNodeRowIdx = nodeRowIdx;
+  let newNodeMatIdx = nodeMatIdx;
+  let newNodeColIdx = nodeColIdx;
+
+  let triedCols: number[] = [];
+
+  let newNodeId = getNodeId(
+    targetLevel,
+    newNodeMatIdx,
+    newNodeRowIdx,
+    newNodeColIdx
+  );
+
+  while (!isNodeVisible(newNodeId, unlockedNodes)) {
+    if (triedCols.length < 4) {
+      triedCols.push(newNodeColIdx);
+      const colToTry = tryCol(newNodeColIdx, triedCols);
+      if (colToTry !== undefined) {
+        newNodeColIdx = colToTry;
+      }
+    } else {
+      newNodeRowIdx++;
+      triedCols = [];
+      newNodeColIdx = 0;
+    }
+    newNodeId = getNodeId(
+      targetLevel,
+      newNodeMatIdx,
+      newNodeRowIdx,
+      newNodeColIdx
+    );
+  }
+
+  return {
+    newLevel: targetLevel,
+    newNodeId: newNodeId,
+    newNodeRowIdx: newNodeRowIdx,
+    newNodeColIdx: newNodeColIdx,
+    newSitePosY:
+      level_y_values[
+        targetLevel.toString().padStart(0, "2") as keyof typeof level_y_values
+      ],
+  };
+};
+
 const findNodeVertical = (
   direction: string,
   unlockedNodes: typeof unlocked_nodes,
-  level: string,
+  level: number,
   nodeMatIdx: number,
   nodeRowIdx: number,
   nodeColIdx: number
@@ -80,10 +133,10 @@ const findNodeVertical = (
 
     if (newNodeRowIdx > 2) {
       newNodeRowIdx = 0;
-      newLevel = (parseInt(level) - 1).toString().padStart(2, "0");
+      newLevel = level - 1;
     }
 
-    let newNodeId = getNodeId(
+    newNodeId = getNodeId(
       newLevel,
       newNodeMatIdx,
       newNodeRowIdx,
@@ -100,7 +153,7 @@ const findNodeVertical = (
       } else {
         if (newNodeRowIdx === 2) {
           newNodeRowIdx = 0;
-          newLevel = (parseInt(level) - 1).toString().padStart(2, "0");
+          newLevel = level - 1;
         } else {
           newNodeRowIdx++;
           triedCols = [];
@@ -121,10 +174,10 @@ const findNodeVertical = (
 
     if (newNodeRowIdx < 0) {
       newNodeRowIdx = 2;
-      newLevel = (parseInt(level) + 1).toString().padStart(2, "0");
+      newLevel = level + 1;
     }
 
-    let newNodeId = getNodeId(
+    newNodeId = getNodeId(
       newLevel,
       newNodeMatIdx,
       newNodeRowIdx,
@@ -141,7 +194,7 @@ const findNodeVertical = (
       } else {
         if (newNodeRowIdx === 0) {
           newNodeRowIdx = 2;
-          newLevel = (parseInt(level) + 1).toString().padStart(2, "0");
+          newLevel = level + 1;
         } else {
           newNodeRowIdx--;
           triedCols = [];
@@ -164,10 +217,10 @@ const findNodeVertical = (
   };
 };
 
-const findNode = (
+const findNodeHorizontal = (
   direction: string,
   unlockedNodes: typeof unlocked_nodes,
-  level: string,
+  level: number,
   nodeMatIdx: number,
   nodeRowIdx: number,
   nodeColIdx: number
@@ -188,12 +241,7 @@ const findNode = (
       newNodeMatIdx = nodeMatIdx + 1 > 8 ? 1 : nodeMatIdx + 1;
     }
 
-    let newNodeId = getNodeId(
+    newNodeId = getNodeId(level, newNodeMatIdx, newNodeRowIdx, newNodeColIdx);
-      level,
-      newNodeMatIdx,
-      newNodeRowIdx,
-      newNodeColIdx
-    );
 
     while (!isNodeVisible(newNodeId, unlockedNodes)) {
       if (triedRows.length < 3) {
@@ -227,12 +275,7 @@ const findNode = (
       newNodeMatIdx = nodeMatIdx - 1 < 1 ? 8 : nodeMatIdx - 1;
     }
 
-    let newNodeId = getNodeId(
+    newNodeId = getNodeId(level, newNodeMatIdx, newNodeRowIdx, newNodeColIdx);
-      level,
-      newNodeMatIdx,
-      newNodeRowIdx,
-      newNodeColIdx
-    );
 
     while (!isNodeVisible(newNodeId, unlockedNodes)) {
       if (triedRows.length < 3) {
@@ -266,12 +309,13 @@ const findNode = (
 
 const nodeSelector = (context: NodeSelectorContext) => {
   let newNodeData;
-  const move = context.keyPress.toLowerCase();
+  let move;
 
-  switch (context.keyPress) {
+  switch (context.action) {
-    case "LEFT":
+    case "site_left":
-    case "RIGHT":
+    case "site_right":
-      newNodeData = findNode(
+      move = context.action === "site_left" ? "left" : "right";
+      newNodeData = findNodeHorizontal(
         move,
         context.unlockedNodes,
         context.level,
@@ -285,7 +329,8 @@ const nodeSelector = (context: NodeSelectorContext) => {
         const siteRotYModifier = move === "left" ? Math.PI / 4 : -Math.PI / 4;
 
         return {
-          event: didMove ? `move_${move}` : "change_node",
+          event: didMove ? context.action : "change_node",
+          newActiveNodeId: newNodeData.newNodeId,
           newNodeMatIdx: newNodeData.newNodeMatIdx,
           newNodeRowIdx: newNodeData.newNodeRowIdx,
           newNodeColIdx: newNodeData.newNodeColIdx,
@@ -297,8 +342,10 @@ const nodeSelector = (context: NodeSelectorContext) => {
         };
       }
       break;
-    case "DOWN":
+    case "site_up":
-    case "UP":
+    case "site_down":
+      move = context.action === "site_up" ? "up" : "down";
+
       newNodeData = findNodeVertical(
         move,
         context.unlockedNodes,
@@ -312,7 +359,8 @@ const nodeSelector = (context: NodeSelectorContext) => {
         const didMove = context.level !== newNodeData.newLevel;
         const sitePosYModifier = move === "up" ? -1.5 : 1.5;
         return {
-          event: didMove ? `move_${move}` : "change_node",
+          event: didMove ? context.action : "change_node",
+          newActiveNodeId: newNodeData.newNodeId,
           newNodeMatIdx: context.nodeMatIdx,
           newNodeRowIdx: newNodeData.newNodeRowIdx,
           newNodeColIdx: newNodeData.newNodeColIdx,
@@ -324,6 +372,25 @@ const nodeSelector = (context: NodeSelectorContext) => {
         };
       }
       break;
+    case "select_level":
+      newNodeData = findNodeAfterLevelSelection(
+        context.unlockedNodes,
+        context.level,
+        context.nodeMatIdx,
+        context.nodeRowIdx,
+        context.nodeColIdx
+      );
+
+      if (newNodeData) {
+        return {
+          newActiveNodeId: newNodeData.newNodeId,
+          newNodeMatIdx: context.nodeMatIdx,
+          newNodeRowIdx: newNodeData.newNodeRowIdx,
+          newNodeColIdx: newNodeData.newNodeColIdx,
+          newSitePosY: newNodeData.newSitePosY,
+          newLevel: newNodeData.newLevel,
+        };
+      }
   }
 };
 

src/store.ts

@@ -13,10 +13,9 @@ type PauseState = {
 };
 
 type LevelSelectionState = {
-  availableLevels: number[];
+  selectedLevel: number;
-  selectedLevelIdx: number;
   levelSelectionToggled: number;
-  setSelectedLevelIdx: (to: number) => void;
+  setSelectedLevel: (to: number) => void;
   toggleLevelSelection: () => void;
 };
 
@@ -471,10 +470,9 @@ export const useGateStore = create<GateState>((set) => ({
 }));
 
 export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
-  availableLevels: Array.from({ length: 24 }, (x, i) => i + 1),
+  selectedLevel: 4,
-  selectedLevelIdx: 3,
   levelSelectionToggled: 0,
-  setSelectedLevelIdx: (to) => set(() => ({ selectedLevelIdx: to })),
+  setSelectedLevel: (to) => set(() => ({ selectedLevel: to })),
   toggleLevelSelection: () =>
     set((state) => ({
       levelSelectionToggled: Number(!state.levelSelectionToggled),