performance tweaks

src/components/MainScene/BlueOrb.tsx

@@ -23,7 +23,7 @@ type BlueOrbContructorProps = {
   sprite: string;
   position: number[];
   rotation: number[];
-  active: boolean;
+  active?: boolean;
   level: string;
 };
 

src/components/MainScene/CurrentLevelNodes.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import BlueOrb from "./BlueOrb";
+import blue_orb_positions from "../../resources/blue_orb_positions.json";
+import site_a from "../../resources/site_a.json";
+import { useBlueOrbStore, useLevelStore, useSiteStore } from "../../store";
+import { a, useSpring } from "@react-spring/three";
+
+const CurrentLevelNodes = () => {
+  const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId);
+  const currentLevel = useLevelStore((state) => state.currentLevel);
+
+  const currentLevelNodes = useMemo(
+    () => site_a[currentLevel as keyof typeof site_a],
+    [currentLevel]
+  );
+
+  const siteRotY = useSiteStore((state) => state.siteRotY);
+  const sitePosY = useSiteStore((state) => state.sitePosY);
+
+  const siteState = useSpring({
+    siteRotY: siteRotY,
+    sitePosY: sitePosY,
+    config: { duration: 1200 },
+  });
+
+  return (
+    <a.group rotation-y={siteState.siteRotY} position-y={siteState.sitePosY}>
+      {Object.entries(currentLevelNodes).map((blueOrb: [string, any]) => {
+        return (
+          <BlueOrb
+            sprite={blueOrb[1].node_name}
+            position={
+              blue_orb_positions[
+                blueOrb[0].substr(2) as keyof typeof blue_orb_positions
+              ].position
+            }
+            rotation={
+              blue_orb_positions[
+                blueOrb[0].substr(2) as keyof typeof blue_orb_positions
+              ].rotation
+            }
+            key={blueOrb[1].node_name}
+            active={blueOrb[0] === activeBlueOrbId}
+            level={blueOrb[0].substr(0, 2)}
+          />
+        );
+      })}
+    </a.group>
+  );
+};
+
+export default CurrentLevelNodes;

src/components/MainScene/Level.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import PurpleRing from "./PurpleRing";
-import GrayRing from "./GrayRing";
-import CyanCrystal from "./CyanCrystal";
-
-//constructor for levels
-type LevelProps = {
-  levelPosY: number;
-  level: string;
-};
-
-const Level = (props: LevelProps) => {
-  return (
-    <group position={[0, props.levelPosY, 0]}>
-      <PurpleRing purpleRingPosY={0.44} level={props.level} />
-      <GrayRing grayRingPosY={-0.29} />
-      <CyanCrystal crystalRingPosY={-0.45} />
-    </group>
-  );
-};
-
-export default Level;

src/components/MainScene/Site.tsx

@@ -1,16 +1,51 @@
-import React, { memo, Suspense } from "react";
+import React, { memo, Suspense, useMemo } from "react";
 import site_a from "../../resources/site_a.json";
-import Level from "./Level";
 import level_y_values from "../../resources/level_y_values.json";
 import blue_orb_positions from "../../resources/blue_orb_positions.json";
 import BlueOrb from "./BlueOrb";
 import { a, useSpring } from "@react-spring/three";
-import { useBlueOrbStore, useLevelStore, useSiteStore } from "../../store";
+import { useLevelStore, useSiteStore } from "../../store";
+import PurpleRing from "./PurpleRing";
+import GrayRing from "./GrayRing";
+import CyanCrystal from "./CyanCrystal";
+
+export type NodeDataType = {
+  SLPS_016_0x_offset: string;
+  image_table_indices: { 1: string; 2: string; 3: string };
+  is_hidden: string;
+  media_file: string;
+  node_name: string;
+  protocol_lines: {
+    1: string;
+    2: string;
+    3: string;
+  };
+  site: string;
+  type: string;
+  title: string;
+  unlocked_by: string;
+  upgrade_requirement: string;
+  words: { 1: string; 2: string; 3: string };
+};
+
+export type LevelType = {
+  [key: string]: NodeDataType;
+};
+
+export type SiteType = {
+  [key: string]: LevelType;
+};
 
 const Site = memo(() => {
-  const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId);
-
   const activeLevels = useLevelStore((state) => state.activeLevels);
+  const visibleNodes = useMemo(() => {
+    const obj = {};
+    activeLevels.forEach((level) => {
+      Object.assign(obj, site_a[level as keyof typeof site_a]);
+    });
+
+    return obj;
+  }, [activeLevels]);
 
   const siteRotY = useSiteStore((state) => state.siteRotY);
   const sitePosY = useSiteStore((state) => state.sitePosY);
@@ -23,25 +58,15 @@ const Site = memo(() => {
 
   return (
     <Suspense fallback={null}>
-      {/*distance between LEVELS is 1.5*/}
       <a.group rotation-y={siteState.siteRotY} position-y={siteState.sitePosY}>
-        {Object.entries(level_y_values).map((level: [string, number]) => {
+        {Object.entries(level_y_values).map((level: [string, number]) => (
-          if (activeLevels.includes(level[0].toString()))
+          <group position={[0, level[1], 0]} key={level[0]}>
-            return (
+            <PurpleRing purpleRingPosY={0.44} level={level[0]} />
-              <Level
+            <GrayRing grayRingPosY={-0.29} />
-                levelPosY={level[1]}
+            <CyanCrystal crystalRingPosY={-0.45} />
-                key={level[1]}
+          </group>
-                level={level[0].toString()}
+        ))}
-              />
+        {Object.entries(visibleNodes).map((blueOrb: [string, any]) => (
-            );
-        })}
-
-        {Object.entries(site_a).map((blueOrb) => {
-          if (
-            // (blueOrb as any)[1]["unlocked_by"] === "-1" &&
-            activeLevels.includes(blueOrb[0].substr(0, 2))
-          )
-            return (
           <BlueOrb
             sprite={blueOrb[1].node_name}
             position={
@@ -55,11 +80,10 @@ const Site = memo(() => {
               ].rotation
             }
             key={blueOrb[1].node_name}
-                active={blueOrb[0] === activeBlueOrbId}
             level={blueOrb[0].substr(0, 2)}
           />
-            );
+        ))}
-        })}
+        )
       </a.group>
     </Suspense>
   );

src/core/StateManagers/BlueOrbHUDManager.tsx

@@ -10,35 +10,23 @@ const BlueOrbHUDManager = (props: StateManagerProps) => {
 
   const dispatchObject = useCallback(
     (event: string, targetBlueOrbHudId: string) => {
-      const dispatcherObjects = {
+      switch (event) {
-        move_up: {
+        case "move_up":
+        case "move_down":
+        case "move_left":
+        case "move_right":
+          return {
             action: setActiveBlueOrbHudId,
             value: targetBlueOrbHudId,
             actionDelay: 3903.704,
-        },
+          };
-        move_down: {
+        case "change_blue_orb":
-          action: setActiveBlueOrbHudId,
+          return {
-          value: targetBlueOrbHudId,
-          actionDelay: 3903.704,
-        },
-        move_left: {
-          action: setActiveBlueOrbHudId,
-          value: targetBlueOrbHudId,
-          actionDelay: 3903.704,
-        },
-        move_right: {
-          action: setActiveBlueOrbHudId,
-          value: targetBlueOrbHudId,
-          actionDelay: 3903.704,
-        },
-        change_blue_orb: {
             action: setActiveBlueOrbHudId,
             value: targetBlueOrbHudId,
             actionDelay: 500,
-        },
           };
-
+      }
-      return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
     [setActiveBlueOrbHudId]
   );

src/core/StateManagers/BlueOrbManager.tsx

@@ -83,7 +83,6 @@ const BlueOrbManager = (props: StateManagerProps) => {
       newBlueOrbColIdx: number,
       newBlueOrbRowIdx: number
     ) => {
-      if (isMoving) setActiveBlueOrb("");
       setTimeout(() => {
         setActiveBlueOrb(newActiveBlueOrbId);
         setBlueOrbMatrixIndices({
@@ -102,8 +101,12 @@ const BlueOrbManager = (props: StateManagerProps) => {
       newBlueOrbColIdx: number,
       newBlueOrbRowIdx: number
     ) => {
-      const dispatcherObjects: BlueOrbDispatcher = {
+      switch (event) {
-        move_up: {
+        case "move_up":
+        case "move_down":
+        case "move_left":
+        case "move_right":
+          return {
             action: updateActiveBlueOrb,
             value: [
               3903.704,
@@ -112,38 +115,9 @@ const BlueOrbManager = (props: StateManagerProps) => {
               newBlueOrbColIdx,
               newBlueOrbRowIdx,
             ],
-        },
+          };
-        move_down: {
+        case "change_blue_orb":
-          action: updateActiveBlueOrb,
+          return {
-          value: [
-            3903.704,
-            true,
-            newActiveBlueOrbId,
-            newBlueOrbColIdx,
-            newBlueOrbRowIdx,
-          ],
-        },
-        move_left: {
-          action: updateActiveBlueOrb,
-          value: [
-            3903.704,
-            true,
-            newActiveBlueOrbId,
-            newBlueOrbColIdx,
-            newBlueOrbRowIdx,
-          ],
-        },
-        move_right: {
-          action: updateActiveBlueOrb,
-          value: [
-            3903.704,
-            true,
-            newActiveBlueOrbId,
-            newBlueOrbColIdx,
-            newBlueOrbRowIdx,
-          ],
-        },
-        change_blue_orb: {
             action: updateActiveBlueOrb,
             value: [
               0,
@@ -152,18 +126,14 @@ const BlueOrbManager = (props: StateManagerProps) => {
               newBlueOrbColIdx,
               newBlueOrbRowIdx,
             ],
-        },
-        throw_blue_orb_media: {
-          action: animateActiveBlueOrbThrow,
-          value: [0, true],
-        },
-        throw_blue_orb_gate: {
-          action: animateActiveBlueOrbThrow,
-          value: [0, true],
-        },
           };
-
+        case "throw_blue_orb_media":
-      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+        case "throw_blue_orb_gate":
+          return {
+            action: animateActiveBlueOrbThrow,
+            value: [0, true],
+          };
+      }
     },
     [animateActiveBlueOrbThrow, updateActiveBlueOrb]
   );
@@ -183,7 +153,7 @@ const BlueOrbManager = (props: StateManagerProps) => {
       );
 
       if (dispatchedObject) {
-        dispatchedObject.action.apply(null, dispatchedObject.value);
+        dispatchedObject.action.apply(null, dispatchedObject.value as never);
       }
     }
   }, [props.eventState, setActiveBlueOrb, dispatchObject]);

src/core/StateManagers/BootManager.tsx

@@ -9,42 +9,41 @@ const BootManager = (props: StateManagerProps) => {
 
   const dispatchObject = useCallback(
     (event: string) => {
-      const dispatcherObjects = {
+      switch (event) {
-        main_menu_down: {
+        case "main_menu_down":
+          return {
             action: setActiveBootElement,
             value: "load_data",
-        },
+          };
-        main_menu_up: {
+        case "main_menu_up":
+          return {
             action: setActiveBootElement,
             value: "authorize_user",
-        },
+          };
-        load_data_left: {
+        case "load_data_left":
+          return {
             action: setActiveBootElement,
             value: "load_data_yes",
-        },
+          };
-        load_data_right: {
+        case "load_data_right":
+          return {
             action: setActiveBootElement,
             value: "load_data_no",
-        },
+          };
-        authorize_user_back: {
+        case "authorize_user_back":
+        case "select_authorize_user":
+          return {
             action: setActiveBootElement,
             value: "authorize_user",
-        },
+          };
-        select_authorize_user: {
+        case "load_data_no":
-          action: setActiveBootElement,
+          return {
-          value: "authorize_user",
-        },
-        select_load_data_no: {
             action: setActiveBootElement,
             value: "load_data",
-        },
-        select_load_data: {
-          action: setActiveBootElement,
-          value: "load_data_yes"
-        }
           };
-
+        case "select_load_data":
-      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+          return { action: setActiveBootElement, value: "load_data_yes" };
+      }
     },
     [setActiveBootElement]
   );

src/core/StateManagers/GreenTextManager.tsx

@@ -1,8 +1,9 @@
-import { MutableRefObject, useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
-import { useBlueOrbStore, useTextRendererStore } from "../../store";
+import { 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";
+import site_a from "../../resources/site_a.json";
+import { SiteType } from "../../components/MainScene/Site";
 
 const GreenTextManager = (props: StateManagerProps) => {
   const setGreenText = useTextRendererStore((state) => state.setGreenText);
@@ -16,20 +17,15 @@ 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) => {
+    (
-      const targetGreenText =
+      newActiveBlueOrbId: string,
-        site_a[newActiveBlueOrbId as keyof typeof site_a].title;
+      newActiveHudId: string,
+      newLevel: string,
+      delay: number
+    ) => {
+      const targetGreenText = (site_a as SiteType)[newLevel][newActiveBlueOrbId]
+        .title;
 
       const targetGreenTextPosData =
         blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds].medium_text;
@@ -49,47 +45,44 @@ const GreenTextManager = (props: StateManagerProps) => {
     [setGreenText, setGreenTextPosX, setGreenTextPosY, toggleGreenText]
   );
 
-  const initializeGreenTextForMediaScene = useCallback(() => {
+  const initializeGreenTextForMediaScene = useCallback(
+    (activeBlueOrbId: string, level: string) => {
       setTimeout(() => {
-      setGreenText(
+        setGreenText((site_a as SiteType)[level][activeBlueOrbId].node_name);
-        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]);
+    },
+    [setGreenText, setGreenTextPosX, setGreenTextPosY]
+  );
 
   const dispatchObject = useCallback(
-    (event: string, newActiveBlueOrbId: string, newActiveHudId: string) => {
+    (
-      const dispatcherObjects = {
+      event: string,
-        move_up: {
+      newActiveBlueOrbId: string,
+      newActiveHudId: string,
+      newLevel: string
+    ) => {
+      switch (event) {
+        case "move_up":
+        case "move_down":
+        case "move_left":
+        case "move_right":
+          return {
             action: toggleAndSetGreenText,
-          value: [newActiveBlueOrbId, newActiveHudId, 3903.704],
+            value: [newActiveBlueOrbId, newActiveHudId, newLevel, 3903.704],
-        },
-        move_down: {
-          action: toggleAndSetGreenText,
-          value: [newActiveBlueOrbId, newActiveHudId, 3903.704],
-        },
-        move_left: {
-          action: toggleAndSetGreenText,
-          value: [newActiveBlueOrbId, newActiveHudId, 3903.704],
-        },
-        move_right: {
-          action: toggleAndSetGreenText,
-          value: [newActiveBlueOrbId, newActiveHudId, 3903.704],
-        },
-        change_blue_orb: {
-          action: toggleAndSetGreenText,
-          value: [newActiveBlueOrbId, newActiveHudId, 500],
-        },
-        throw_blue_orb_media: {
-          action: initializeGreenTextForMediaScene,
-          value: [],
-        },
           };
-
+        case "change_blue_orb":
-      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+          return {
+            action: toggleAndSetGreenText,
+            value: [newActiveBlueOrbId, newActiveHudId, newLevel, 500],
+          };
+        case "throw_blue_orb_media":
+          return {
+            action: initializeGreenTextForMediaScene,
+            value: [newActiveBlueOrbId, newLevel],
+          };
+      }
     },
     [initializeGreenTextForMediaScene, toggleAndSetGreenText]
   );
@@ -99,11 +92,13 @@ const GreenTextManager = (props: StateManagerProps) => {
       const eventAction = props.eventState.event;
       const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId;
       const newActiveHudId = props.eventState.newActiveHudId;
+      const newLevel = props.eventState.newLevel;
 
       const dispatchedObject = dispatchObject(
         eventAction,
         newActiveBlueOrbId,
-        newActiveHudId
+        newActiveHudId,
+        newLevel
       );
 
       if (dispatchedObject) {

src/core/StateManagers/LevelManager.tsx

@@ -8,12 +8,11 @@ const LevelManager = (props: StateManagerProps) => {
 
   const updateLevel = useCallback(
     (newLevel: string) => {
-      setCurrentLevel(newLevel);
       setTimeout(() => {
+        setCurrentLevel(newLevel);
         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"),
         ]);

src/core/StateManagers/MediaImageManager.tsx

@@ -1,18 +1,24 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 
 import { StateManagerProps } from "./EventManager";
 import site_a from "../../resources/site_a.json";
 import image_table from "../../resources/image_table.json";
-import { ImageSrc, useImageStore } from "../../store";
+import { ImageSrc, useImageStore, useLevelStore } from "../../store";
+import { LevelType } from "../../components/MainScene/Site";
 
 const MediaImageManager = (props: StateManagerProps) => {
   const setImages = useImageStore((state) => state.setImages);
 
+  const currentLevel = useLevelStore((state) => state.currentLevel);
+  const currentLevelData: LevelType = useMemo(
+    () => site_a[currentLevel as keyof typeof site_a],
+    [currentLevel]
+  );
+
   const updateSceneImages = useCallback(
     (newActiveBlueOrbId: string) => {
-      const node_name =
+      const nodeName = currentLevelData[newActiveBlueOrbId].node_name;
-        site_a[newActiveBlueOrbId as keyof typeof site_a].node_name;
+      const images = image_table[nodeName as keyof typeof image_table];
-      const images = image_table[node_name as keyof typeof image_table];
 
       Object.values(images).forEach((img) => {
         switch (img.substr(img.length - 1)) {
@@ -42,7 +48,7 @@ const MediaImageManager = (props: StateManagerProps) => {
         }
       });
     },
-    [setImages]
+    [currentLevelData, setImages]
   );
 
   const dispatchObject = useCallback(

src/core/StateManagers/YellowTextManager.tsx

@@ -1,23 +1,22 @@
-import { MutableRefObject, useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import blue_orb_huds from "../../resources/blue_orb_huds.json";
 import site_a from "../../resources/site_a.json";
-import {
+import { useTextRendererStore } from "../../store";
-  useBlueOrbStore,
+import { SiteType } from "../../components/MainScene/Site";
-  useHudStore,
-  useTextRendererStore,
-} from "../../store";
 
 type AnimateYellowTextWithMove = (
   yellowLetterPosYOffset: number,
   yellowLetterPosXOffset: number,
   newActiveHudId: string,
   newActiveBlueOrbId: string,
+  newLevel: string,
   delay: number
 ) => void;
 
 type AnimateYellowTextWithoutMove = (
   newActiveHudId: string,
-  newActiveBlueOrbId: string
+  newActiveBlueOrbId: string,
+  newLevel: string
 ) => void;
 
 type AnimateMediaYellowText = (
@@ -25,39 +24,7 @@ type AnimateMediaYellowText = (
   targetMediaTextPos: number[]
 ) => void;
 
-type YellowTextDispatchData = {
-  action:
-    | AnimateYellowTextWithMove
-    | AnimateYellowTextWithoutMove
-    | AnimateMediaYellowText;
-  value?: any;
-};
-
-type YellowTextDispatcher = {
-  move_up: YellowTextDispatchData;
-  move_down: YellowTextDispatchData;
-  move_left: YellowTextDispatchData;
-  move_right: YellowTextDispatchData;
-  change_blue_orb: YellowTextDispatchData;
-  play_down: YellowTextDispatchData;
-  exit_up: YellowTextDispatchData;
-  throw_blue_orb_media: YellowTextDispatchData;
-  exit_media_scene: YellowTextDispatchData;
-};
-
 const YellowTextManager = (props: any) => {
-  const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId);
-  const activeHudId = useHudStore((state) => state.activeHudId);
-
-  const blueOrbDataRef: MutableRefObject<
-    { activeBlueOrbId: string; activeHudId: string } | undefined
-  > = useRef();
-
-  blueOrbDataRef.current = {
-    activeBlueOrbId: activeBlueOrbId,
-    activeHudId: activeHudId,
-  };
-
   const setYellowText = useTextRendererStore((state) => state.setYellowText);
 
   const setYellowTextOffsetXCoeff = useTextRendererStore(
@@ -83,6 +50,7 @@ const YellowTextManager = (props: any) => {
       yellowLetterPosYOffset: number,
       newActiveHudId: string,
       newActiveBlueOrbId: string,
+      newLevel: string,
       delay: number
     ) => {
       // animate the letters to match that of site's
@@ -109,7 +77,7 @@ const YellowTextManager = (props: any) => {
         );
         // set new text according to the node name
         setYellowText(
-          site_a[newActiveBlueOrbId as keyof typeof site_a].node_name
+          (site_a as SiteType)[newLevel][newActiveBlueOrbId].node_name
         );
       }, 3000);
 
@@ -129,7 +97,7 @@ const YellowTextManager = (props: any) => {
   );
 
   const animateYellowTextWithoutMove: AnimateYellowTextWithoutMove = useCallback(
-    (newActiveHudId: string, newActiveBlueOrbId: string) => {
+    (newActiveHudId: string, newActiveBlueOrbId: string, level: string) => {
       // make current hud big text shrink
       setYellowTextOffsetXCoeff(-1);
 
@@ -148,7 +116,7 @@ const YellowTextManager = (props: any) => {
       setTimeout(() => {
         // set new text according to the node name
         setYellowText(
-          site_a[newActiveBlueOrbId as keyof typeof site_a].node_name
+          (site_a as SiteType)[level][newActiveBlueOrbId].node_name
         );
       }, 1000);
 
@@ -203,69 +171,93 @@ const YellowTextManager = (props: any) => {
     }, 3950);
   }, [setYellowText, setYellowTextPosX, setYellowTextPosY]);
 
-  const initializeYellowTextForMainScene = useCallback(() => {
+  const initializeYellowTextForMainScene = useCallback(
-    if (blueOrbDataRef.current) {
+    (activeBlueOrbId: string, level: string) => {
-      setYellowText(
+      setYellowText((site_a as SiteType)[level][activeBlueOrbId].node_name);
-        site_a[blueOrbDataRef.current!.activeBlueOrbId as keyof typeof site_a]
-          .node_name
-      );
       setYellowTextPosX(
-        blue_orb_huds[
+        blue_orb_huds[activeBlueOrbId as keyof typeof blue_orb_huds].big_text[0]
-          blueOrbDataRef.current!.activeHudId as keyof typeof blue_orb_huds
-        ].big_text[0]
       );
       setYellowTextPosY(
-        blue_orb_huds[
+        blue_orb_huds[activeBlueOrbId as keyof typeof blue_orb_huds].big_text[1]
-          blueOrbDataRef.current!.activeHudId as keyof typeof blue_orb_huds
+      );
-        ].big_text[1]
+    },
+    [setYellowText, setYellowTextPosX, setYellowTextPosY]
   );
-    }
-  }, [setYellowText, setYellowTextPosX, setYellowTextPosY]);
 
   const dispatchObject = useCallback(
     (
       event: string,
       newActiveHudId: string | undefined,
-      newActiveBlueOrbId: string | undefined
+      newActiveBlueOrbId: string | undefined,
+      newLevel: string
     ) => {
-      const dispatcherObjects: YellowTextDispatcher = {
+      switch (event) {
-        move_up: {
+        case "move_up":
+          return {
             action: animateYellowTextWithMove,
-          value: [0, -1.5, newActiveHudId, newActiveBlueOrbId, 1300],
+            value: [
-        },
+              0,
-        move_down: {
+              -1.5,
+              newActiveHudId,
+              newActiveBlueOrbId,
+              newLevel,
+              1300,
+            ],
+          };
+        case "move_down":
+          return {
             action: animateYellowTextWithMove,
-          value: [0, 1.5, newActiveHudId, newActiveBlueOrbId, 1300],
+            value: [0, 1.5, newActiveHudId, newActiveBlueOrbId, newLevel, 1300],
-        },
+          };
-        move_left: {
+        case "move_left":
+          return {
             action: animateYellowTextWithMove,
-          value: [Math.PI / 4, 0, newActiveHudId, newActiveBlueOrbId, 1100],
+            value: [
-        },
+              Math.PI / 4,
-        move_right: {
+              0,
+              newActiveHudId,
+              newActiveBlueOrbId,
+              newLevel,
+              1100,
+            ],
+          };
+        case "move_right":
+          return {
             action: animateYellowTextWithMove,
-          value: [-Math.PI / 4, 0, newActiveHudId, newActiveBlueOrbId, 1100],
+            value: [
-        },
+              -Math.PI / 4,
-        change_blue_orb: {
+              0,
-          action: animateYellowTextWithoutMove,
+              newActiveHudId,
-          value: [newActiveHudId, newActiveBlueOrbId],
+              newActiveBlueOrbId,
-        },
+              newLevel,
-        exit_up: {
+              1100,
+            ],
+          };
+        case "exit_up":
+          return {
             action: animateMediaYellowText,
             value: ["Play", [-0.8, 0.05, 0.6]],
-        },
+          };
-        play_down: {
+        case "change_blue_orb":
+          return {
+            action: animateYellowTextWithoutMove,
+            value: [newActiveHudId, newActiveBlueOrbId, newLevel],
+          };
+        case "play_down":
+          return {
             action: animateMediaYellowText,
             value: ["Exit", [-0.8, -0.08, 0.6]],
-        },
-        throw_blue_orb_media: {
-          action: initializeYellowTextForMediaScene,
-        },
-        exit_media_scene: {
-          action: initializeYellowTextForMainScene,
-        },
           };
-
+        case "throw_blue_orb_media":
-      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+          return {
+            action: initializeYellowTextForMediaScene,
+          };
+        case "exit_media_scene":
+          return {
+            action: initializeYellowTextForMainScene,
+            value: [newActiveBlueOrbId, newLevel],
+          };
+      }
     },
     [
       animateMediaYellowText,
@@ -282,11 +274,13 @@ const YellowTextManager = (props: any) => {
 
       const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId;
       const newActiveHudId = props.eventState.newActiveHudId;
+      const newLevel = props.eventState.newLevel;
 
       const dispatchedObject = dispatchObject(
         eventAction,
         newActiveHudId,
-        newActiveBlueOrbId
+        newActiveBlueOrbId,
+        newLevel
       );
 
       if (dispatchedObject) {

src/core/mainSceneEventHandler.ts

@@ -96,8 +96,8 @@ const handleMainSceneEvent = (gameContext: GameContext) => {
           newSiteRotIdx as keyof typeof available_blue_orbs_on_projection
         ][newBlueOrbRowIdx as number][newBlueOrbColIdx as number];
 
-      const blueOrbType =
+      const blueOrbType = (site_a as any)[newLevel][newActiveBlueOrbId]
-        site_a[newActiveBlueOrbId as keyof typeof site_a].type;
+        .type;
 
       const eventAnimation = "throw_blue_orb_";
 

src/scenes/MainScene.tsx

@@ -9,10 +9,16 @@ import MainSceneIntro from "../components/MainSceneIntro";
 import GrayPlanes from "../components/MainScene/GrayPlanes";
 import MiddleRing from "../components/MainScene/MiddleRing";
 import Starfield from "../components/MainScene/Starfield";
-import {useBlueOrbStore, useHudStore, useLainStore, useMainGroupStore} from "../store";
+import {
+  useBlueOrbStore,
+  useHudStore,
+  useLainStore,
+  useMainGroupStore,
+} from "../store";
 import TextRenderer from "../components/TextRenderer/TextRenderer";
 import HUD from "../components/MainScene/HUD";
 import YellowOrb from "../components/MainScene/YellowOrb";
+import CurrentLevelNodes from "../components/MainScene/CurrentLevelNodes";
 
 const MainScene = () => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
@@ -54,6 +60,7 @@ const MainScene = () => {
         >
           <Preloader />
           <Site />
+          <CurrentLevelNodes />
           <HUD />
           <TextRenderer />
           <YellowOrb />

src/store.ts

@@ -298,7 +298,7 @@ export const useMiddleRingStore = create<MiddleRingState>((set) => ({
 
 export const useLevelStore = create<LevelState>((set) => ({
   currentLevel: "04",
-  activeLevels: ["02", "03", "04", "05", "06"],
+  activeLevels: ["02", "03", "05", "06"],
   setActiveLevels: (to) => set(() => ({ activeLevels: to })),
   setCurrentLevel: (to) => set(() => ({ currentLevel: to })),
 }));
@@ -394,7 +394,7 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "gate",
+  currentScene: "main",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));