starting work on way of calculating actions

src/components/MainScene/HUD.tsx

@@ -8,14 +8,14 @@ import longHudMirrored from "../../static/sprite/long_hud_mirrored.png";
 import boringHud from "../../static/sprite/long_hud_boring.png";
 import boringHudMirrored from "../../static/sprite/long_hud_boring_mirrored.png";
 import { a, useSpring } from "@react-spring/three";
-import { useBlueOrbStore } from "../../store";
+import {useBlueOrbStore, useHudStore} from "../../store";
 import blue_orb_huds from "../../resources/blue_orb_huds.json";
 
 const HUD = memo(() => {
-  const hudActive = useBlueOrbStore((state) => state.hudActive);
-  const currentHudId = useBlueOrbStore((state) => state.activeHudId);
+  const hudActive = useHudStore((state) => state.hudActive);
+  const currentHudId = useHudStore((state) => state.activeHudId);
 
-  const hudVisible = useBlueOrbStore((state) => state.hudVisible);
+  const hudVisible = useHudStore((state) => state.hudVisible);
 
   const currentHud = blue_orb_huds[currentHudId as keyof typeof blue_orb_huds];
 

src/components/MainScene/Site.tsx

@@ -1,4 +1,4 @@
-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";
@@ -6,6 +6,8 @@ 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 { useLoader } from "react-three-fiber";
+import * as THREE from "three";
 
 const Site = memo(() => {
   const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId);

src/components/MainSceneIntro.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useEffect } from "react";
 import {
-  useBlueOrbStore,
   useGrayPlanesStore,
+  useHudStore,
   useLainStore,
   useMainGroupStore,
   useStarfieldStore,
@@ -14,7 +14,7 @@ import {
 // inside <Suspense> tags makes it behave in a more stable manner
 // by waiting for the components to load and synchronously calling the functions.
 const MainSceneIntro = memo(() => {
-  const toggleHud = useBlueOrbStore((state) => state.toggleHud);
+  const toggleHud = useHudStore((state) => state.toggleHud);
 
   //const setHudVisible = useSetRecoilState(hudVisibilityAtom);
   const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible);
@@ -67,7 +67,8 @@ const MainSceneIntro = memo(() => {
 
       toggleHud();
       setTimeout(() => {
-        document.getElementsByTagName("canvas")[0].className = "main-scene-background";
+        document.getElementsByTagName("canvas")[0].className =
+          "main-scene-background";
       }, 300);
     }, 3860);
   }, [

src/components/MediaScene/Selectables/RightSide/Word.tsx

@@ -28,7 +28,6 @@ const Word = (props: WordProps) => {
   return (
     <a.group position-x={props.posX} position-y={props.posY}>
       <mesh scale={[0.4, 0.4, 0]} position={[-3.9, 1.915, 0]} renderOrder={3}>
-        <planeBufferGeometry attach="geometry" />
         <textGeometry attach="geometry" args={[props.word, config]} />
         <meshBasicMaterial
           attach="material"

src/components/StateManagers/BlueOrbHUDManager.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useEffect } from "react";
-import { useBlueOrbStore } from "../../store";
+import { useHudStore } from "../../store";
 import game_action_mappings from "../../resources/game_action_mappings.json";
 import { StateManagerProps } from "./EventManager";
 
 const BlueOrbHUDManager = (props: StateManagerProps) => {
-  const setActiveBlueOrbHudId = useBlueOrbStore(
+  const setActiveBlueOrbHudId = useHudStore(
     (state) => state.setActiveBlueOrbHudId
   );
-  const toggleHud = useBlueOrbStore((state) => state.toggleHud);
+  const toggleHud = useHudStore((state) => state.toggleHud);
 
   const dispatchObject = useCallback(
     (event: string, targetBlueOrbHudId: string) => {

src/components/StateManagers/EventManager.tsx

@@ -4,7 +4,12 @@ import MiddleRingManager from "./MiddleRingManager";
 import LainManager from "./LainManager";
 import BlueOrbManager from "./BlueOrbManager";
 import BlueOrbHUDManager from "./BlueOrbHUDManager";
-import { useBlueOrbStore, useMediaStore, useSceneStore } from "../../store";
+import {
+  useBlueOrbStore,
+  useMediaStore,
+  useSceneStore,
+  useSiteStore,
+} from "../../store";
 import GreenTextManager from "./GreenTextManager";
 import MediaComponentManager from "./MediaComponentManager";
 import MediaWordManager from "./MediaWordManager";
@@ -29,8 +34,13 @@ export type StateManagerProps = {
 };
 
 const EventManager = () => {
-  const [eventState, setEventState] = useState<string>();
   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 [eventState, setEventState] = useState<string>();
   const activeMediaComponent = useMediaStore(
     (state) => state.activeMediaComponent
   );
@@ -52,6 +62,14 @@ const EventManager = () => {
 
       const keyPress = getKeyCodeAssociation(keyCode);
 
+      const gameContext = {
+        scene: currentScene,
+        keyPress: keyPress,
+        siteRotIdx: siteRotIdx,
+        blueOrbRowIdx: blueOrbRowIdx,
+        blueOrbColIdx: blueOrbColIdx,
+      };
+
       if (keyPress && !inputCooldown) {
         // event id consists of the CURRENT blue orb id (to calculate where we're at currently)
         // and the keypress.
@@ -63,7 +81,14 @@ const EventManager = () => {
         setEventState(eventId);
       }
     },
-    [inputCooldown, sceneEventKey]
+    [
+      blueOrbColIdx,
+      blueOrbRowIdx,
+      currentScene,
+      inputCooldown,
+      sceneEventKey,
+      siteRotIdx,
+    ]
   );
 
   useEffect(() => {

src/components/StateManagers/MediaComponentManager.tsx

@@ -103,6 +103,10 @@ const MediaComponentManager = (props: StateManagerProps) => {
           action: switchToLeftSide,
           value: "thirdWord",
         },
+        select_blue_orb: {
+          action: setActiveMediaComponent,
+          value: "play",
+        },
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];

src/components/StateManagers/MediaImageManager.tsx

@@ -14,7 +14,6 @@ const MediaImageManager = (props: StateManagerProps) => {
     const images = image_table[node_name as keyof typeof image_table];
 
     Object.values(images).forEach((img) => {
-      console.log(images);
       switch (img.substr(img.length - 1)) {
         case "0":
           import("../../static/media_images/site_a/" + img + ".png").then(

src/components/StateManagers/MediaWordManager.tsx

@@ -1,14 +1,35 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
 import { useMediaWordStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import blue_orb_directions from "../../resources/blue_orb_directions.json";
+
+type MediaWordDispatcher = {
+  action: any;
+  value?: number;
+};
+
+type MediaWordDispatchData = {
+  fstWord_down: MediaWordDispatcher;
+  fstWord_up: MediaWordDispatcher;
+  sndWord_down: MediaWordDispatcher;
+  sndWord_up: MediaWordDispatcher;
+  thirdWord_down: MediaWordDispatcher;
+  thirdWord_up: MediaWordDispatcher;
+  select_blue_orb: MediaWordDispatcher;
+};
 
 const MediaWordManager = (props: StateManagerProps) => {
   const addToWordPositionDataStructIdx = useMediaWordStore(
     (state) => state.addToWordPositionDataStructIdx
   );
+  const resetWordPositionDataStructIdx = useMediaWordStore(
+    (state) => state.resetWordPositionDataStructIdx
+  );
+
   const dispatchObject = useCallback(
     (event: string) => {
-      const dispatcherObjects = {
+      const dispatcherObjects: MediaWordDispatchData = {
         fstWord_down: {
           action: addToWordPositionDataStructIdx,
           value: 1,
@@ -33,19 +54,31 @@ const MediaWordManager = (props: StateManagerProps) => {
           action: addToWordPositionDataStructIdx,
           value: -1,
         },
+        select_blue_orb: {
+          action: resetWordPositionDataStructIdx,
+        },
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [addToWordPositionDataStructIdx]
+    [addToWordPositionDataStructIdx, resetWordPositionDataStructIdx]
   );
 
   useEffect(() => {
     if (props.eventState) {
-      const dispatchedObject = dispatchObject(props.eventState);
+      const eventObject: any =
+        game_action_mappings[
+          props.eventState as keyof typeof blue_orb_directions
+        ];
 
-      if (dispatchedObject) {
-        dispatchedObject.action(dispatchedObject.value as never);
+      if (eventObject) {
+        const eventAction = eventObject.action;
+
+        const dispatchedObject = dispatchObject(eventAction);
+
+        if (dispatchedObject) {
+          dispatchedObject.action(dispatchedObject.value);
+        }
       }
     }
   }, [props.eventState, dispatchObject]);

src/components/StateManagers/YellowTextManager.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect } from "react";
+import { MutableRefObject, useCallback, useEffect, useRef } from "react";
 import blue_orb_huds from "../../resources/blue_orb_huds.json";
 import site_a from "../../resources/site_a.json";
-import { useTextRendererStore } from "../../store";
+import {useBlueOrbStore, useHudStore, useTextRendererStore} from "../../store";
 import game_action_mappings from "../../resources/game_action_mappings.json";
 
 type AnimateYellowTextWithMove = (
@@ -25,7 +25,7 @@ type YellowTextDispatchData = {
     | AnimateYellowTextWithMove
     | AnimateYellowTextWithoutMove
     | AnimateMediaYellowText;
-  value: any;
+  value?: any;
 };
 
 type YellowTextDispatcher = {
@@ -36,9 +36,23 @@ type YellowTextDispatcher = {
   change_blue_orb: YellowTextDispatchData;
   play_down: YellowTextDispatchData;
   exit_up: YellowTextDispatchData;
+  select_blue_orb: 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(
@@ -165,6 +179,33 @@ const YellowTextManager = (props: any) => {
     ]
   );
 
+  const initializeYellowTextForMediaScene = useCallback(() => {
+    setTimeout(() => {
+      setYellowText("Play");
+      setYellowTextPosX(-0.8);
+      setYellowTextPosY(0.05);
+    }, 3950);
+  }, [setYellowText, setYellowTextPosX, setYellowTextPosY]);
+
+  const initializeYellowTextForMainScene = useCallback(() => {
+    if (blueOrbDataRef.current) {
+      setYellowText(
+        site_a[blueOrbDataRef.current!.activeBlueOrbId as keyof typeof site_a]
+          .node_name
+      );
+      setYellowTextPosX(
+        blue_orb_huds[
+          blueOrbDataRef.current!.activeHudId as keyof typeof blue_orb_huds
+        ].big_text[0]
+      );
+      setYellowTextPosY(
+        blue_orb_huds[
+          blueOrbDataRef.current!.activeHudId as keyof typeof blue_orb_huds
+        ].big_text[1]
+      );
+    }
+  }, [setYellowText, setYellowTextPosX, setYellowTextPosY]);
+
   const dispatchObject = useCallback(
     (
       event: string,
@@ -200,6 +241,12 @@ const YellowTextManager = (props: any) => {
           action: animateMediaYellowText,
           value: ["Exit", [-0.8, -0.08, 0.6]],
         },
+        select_blue_orb: {
+          action: initializeYellowTextForMediaScene,
+        },
+        exit_media_scene: {
+          action: initializeYellowTextForMainScene,
+        },
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
@@ -208,6 +255,8 @@ const YellowTextManager = (props: any) => {
       animateMediaYellowText,
       animateYellowTextWithMove,
       animateYellowTextWithoutMove,
+      initializeYellowTextForMainScene,
+      initializeYellowTextForMediaScene,
     ]
   );
 

src/core/computeAction.ts

@@ -0,0 +1,31 @@
+import available_blue_orbs_on_projection from "../resources/available_blue_orbs_on_projection.json";
+
+type GameContext = {
+  scene: string;
+  keyPress: string;
+  siteRotIdx: number;
+  blueOrbRowIdx: number;
+  blueOrbColIdx: number;
+};
+
+const computeAction = (gameContext: GameContext) => {
+  const availableBlueOrbs = [
+    available_blue_orbs_on_projection.topRowProjection[gameContext.siteRotIdx],
+    available_blue_orbs_on_projection.middleRowProjection[
+      gameContext.siteRotIdx
+    ],
+    available_blue_orbs_on_projection.bottomRowProjection[
+      gameContext.siteRotIdx
+    ],
+  ];
+
+  switch (gameContext.keyPress) {
+    case "left":
+      let newBlueOrbRowIdx = gameContext.blueOrbRowIdx - 1;
+      if(newBlueOrbRowIdx < 0) {
+
+      }
+  }
+};
+
+export default computeAction;

src/resources/available_blue_orbs_on_projection.json

@@ -0,0 +1,32 @@
+{
+  "topRowProjection": [
+    ["16", "19", "20", "23"],
+    ["17", "20", "21", "16"],
+    ["18", "21", "22", "17"],
+    ["19", "22", "23", "18"],
+    ["20", "23", "16", "19"],
+    ["21", "16", "17", "20"],
+    ["22", "17", "18", "21"],
+    ["23", "18", "19", "22"]
+  ],
+  "middleRowProjection": [
+    ["08", "11", "12", "15"],
+    ["09", "12", "13", "08"],
+    ["10", "13", "14", "09"],
+    ["11", "14", "15", "10"],
+    ["12", "15", "09", "11"],
+    ["13", "08", "09", "12"],
+    ["14", "09", "10", "13"],
+    ["15", "10", "11", "14"]
+  ],
+  "bottomRowProjection": [
+    ["00", "03", "04", "07"],
+    ["01", "04", "05", "00"],
+    ["02", "05", "06", "01"],
+    ["03", "06", "07", "02"],
+    ["04", "07", "00", "03"],
+    ["05", "00", "01", "04"],
+    ["06", "01", "02", "05"],
+    ["07", "02", "03", "06"]
+  ]
+}

src/scenes/Initializers/MainSceneInitializer.tsx

@@ -1,66 +0,0 @@
-import { memo, useEffect, useMemo } from "react";
-import { useBlueOrbStore, useTextRendererStore } from "../../store";
-import site_a from "../../resources/site_a.json";
-import blue_orb_huds from "../../resources/blue_orb_huds.json";
-
-const MainSceneInitializer = memo(() => {
-  const setYellowText = useTextRendererStore((state) => state.setYellowText);
-  const setYellowTextPosX = useTextRendererStore(
-    (state) => state.setYellowTextPosX
-  );
-  const setYellowTextPosY = useTextRendererStore(
-    (state) => state.setYellowTextPosY
-  );
-  const setGreenText = useTextRendererStore((state) => state.setGreenText);
-  const setGreenTextPosY = useTextRendererStore(
-    (state) => state.setGreenTextPosY
-  );
-  const setGreenTextPosX = useTextRendererStore(
-    (state) => state.setGreenTextPosX
-  );
-
-  const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
-  const activeBlueOrbHudId = useBlueOrbStore((state) => state.activeHudId);
-
-  const toggleGreenText = useTextRendererStore(
-    (state) => state.toggleGreenText
-  );
-
-  const activeBlueOrbHud =
-    blue_orb_huds[activeBlueOrbHudId as keyof typeof blue_orb_huds];
-
-  const blueOrbData = useMemo(
-    () => site_a[activeBlueOrb as keyof typeof site_a],
-    [activeBlueOrb]
-  );
-
-  useEffect(() => {
-    const node_name = site_a[activeBlueOrb as keyof typeof site_a].node_name;
-    setGreenText(blueOrbData.title);
-    setYellowText(node_name);
-    setYellowTextPosX(activeBlueOrbHud.big_text[0]);
-    setYellowTextPosY(activeBlueOrbHud.big_text[1]);
-
-    setGreenTextPosX({
-      initial: activeBlueOrbHud.medium_text.initial_position[0],
-      final: activeBlueOrbHud.medium_text.position[0],
-    });
-    setGreenTextPosY(activeBlueOrbHud.medium_text.position[1]);
-  }, [
-    activeBlueOrb,
-    activeBlueOrbHud.big_text,
-    activeBlueOrbHud.medium_text.initial_position,
-    activeBlueOrbHud.medium_text.position,
-    blueOrbData,
-    setGreenText,
-    setGreenTextPosX,
-    setGreenTextPosY,
-    setYellowText,
-    setYellowTextPosX,
-    setYellowTextPosY,
-    toggleGreenText,
-  ]);
-  return null;
-});
-
-export default MainSceneInitializer;

src/scenes/Initializers/MediaSceneInitializer.tsx

@@ -1,83 +0,0 @@
-import { memo, useEffect, useMemo } from "react";
-import {
-  ImageSrc,
-  useBlueOrbStore,
-  useImageStore,
-  useMediaStore,
-  useMediaWordStore,
-  useTextRendererStore,
-} from "../../store";
-import site_a from "../../resources/site_a.json";
-import string_table from "../../resources/string_table.json";
-import image_table from "../../resources/image_table.json";
-
-const MediaSceneInitializer = memo(() => {
-  const lastActiveLeftSideComponent = useMediaStore(
-    (state) => state.lastActiveLeftSideElement
-  );
-  const setActiveMediaComponent = useMediaStore(
-    (state) => state.setActiveMediaComponent
-  );
-  const setYellowText = useTextRendererStore((state) => state.setYellowText);
-  const setYellowTextPosX = useTextRendererStore(
-    (state) => state.setYellowTextPosX
-  );
-  const setYellowTextPosY = useTextRendererStore(
-    (state) => state.setYellowTextPosY
-  );
-  const setGreenText = useTextRendererStore((state) => state.setGreenText);
-  const setGreenTextPosY = useTextRendererStore(
-    (state) => state.setGreenTextPosY
-  );
-  const setGreenTextPosX = useTextRendererStore(
-    (state) => state.setGreenTextPosX
-  );
-  const setWords = useMediaWordStore((state) => state.setWords);
-
-  const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
-
-  const blueOrbData = useMemo(
-    () => site_a[activeBlueOrb as keyof typeof site_a],
-    [activeBlueOrb]
-  );
-
-  const resetWordPositionDataStructIdx = useMediaWordStore(
-    (state) => state.resetWordPositionDataStructIdx
-  );
-  const setImages = useImageStore((state) => state.setImages);
-
-  useEffect(() => {
-    setActiveMediaComponent(lastActiveLeftSideComponent);
-    setGreenText(blueOrbData.node_name);
-    setYellowText("Play");
-    setYellowTextPosX(-0.8);
-    setYellowTextPosY(0.05);
-    setGreenTextPosX({ initial: 0.02, final: 0.02 });
-    setGreenTextPosY(0.675);
-    resetWordPositionDataStructIdx();
-    setWords([
-      string_table[blueOrbData.words[1] as keyof typeof string_table],
-      string_table[blueOrbData.words[2] as keyof typeof string_table],
-      string_table[blueOrbData.words[3] as keyof typeof string_table],
-    ]);
-
-
-  }, [
-    activeBlueOrb,
-    blueOrbData,
-    lastActiveLeftSideComponent,
-    resetWordPositionDataStructIdx,
-    setActiveMediaComponent,
-    setGreenText,
-    setGreenTextPosX,
-    setGreenTextPosY,
-    setImages,
-    setWords,
-    setYellowText,
-    setYellowTextPosX,
-    setYellowTextPosY,
-  ]);
-  return null;
-});
-
-export default MediaSceneInitializer;

src/scenes/MainScene.tsx

@@ -9,16 +9,15 @@ 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, 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 MainSceneInitializer from "./Initializers/MainSceneInitializer";
 
 const MainScene = () => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
   const setActiveBlueOrb = useBlueOrbStore((state) => state.setActiveBlueOrbId);
-  const setActiveBlueOrbHudId = useBlueOrbStore(
+  const setActiveBlueOrbHudId = useHudStore(
     (state) => state.setActiveBlueOrbHudId
   );
 
@@ -47,8 +46,7 @@ const MainScene = () => {
   return (
     <perspectiveCamera position-z={3}>
       <Suspense fallback={null}>
-        {/*<MainSceneIntro />*/}
-        {/*<MainSceneInitializer />*/}
+        <MainSceneIntro />
         <a.group
           rotation-x={mainGroupStateRot.mainGroupRotX}
           position-y={mainGroupStatePos.mainGroupPosY}
@@ -59,7 +57,7 @@ const MainScene = () => {
           <HUD />
           <TextRenderer />
           <YellowOrb />
-          <Starfield />
+          {/*<Starfield />*/}
           <GrayPlanes />
           <Lights />
           <MiddleRing />

src/scenes/MediaScene.tsx

@@ -7,7 +7,6 @@ import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisua
 import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
 import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
 import Lof from "../components/MediaScene/Lof";
-import MediaSceneInitializer from "./Initializers/MediaSceneInitializer";
 import { OrbitControls } from "drei";
 import Images from "../components/MediaScene/Images";
 
@@ -25,7 +24,6 @@ const MediaScene = () => {
     <perspectiveCamera position-z={3}>
       <group position={[0.4, -0.3, 0]}>
         <OrbitControls />
-        {/*<MediaSceneInitializer />*/}
         <pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
         <LeftSide activeMediaComponent={activeMediaComponent} />
         <RightSide activeMediaComponent={activeMediaComponent} />

src/store.ts

@@ -6,11 +6,16 @@ type SceneState = {
   setScene: (to: string) => void;
 };
 
-type BlueOrbState = {
-  activeBlueOrbId: string;
+type HUDState = {
   activeHudId: string;
   hudActive: number;
   hudVisible: boolean;
+  setActiveBlueOrbHudId: (to: string) => void;
+  toggleHud: () => void;
+};
+
+type BlueOrbState = {
+  activeBlueOrbId: string;
   isActiveBlueOrbInteractedWith: boolean;
   activeBlueOrbPosX: number;
   activeBlueOrbPosZ: number;
@@ -19,9 +24,11 @@ type BlueOrbState = {
   setActiveBlueOrbPosZ: (to: number) => void;
   setActiveBlueOrbRotZ: (to: number) => void;
   setActiveBlueOrbId: (to: string) => void;
-  setActiveBlueOrbHudId: (to: string) => void;
-  toggleHud: () => void;
   setIsActiveBlueOrbInteractedWith: (to: boolean) => void;
+  blueOrbRowIdx: number;
+  blueOrbColIdx: number;
+  setBlueOrbRowIdx: (to: number) => void;
+  setBlueOrbColIdx: (to: number) => void;
 };
 
 type LainState = {
@@ -66,6 +73,8 @@ type SiteState = {
   setSiteRotY: (to: number) => void;
   setSitePosY: (to: number) => void;
   setIsSiteChanging: (to: boolean) => void;
+  siteRotIdx: number;
+  setSiteRotIdx: (to: number) => void;
 };
 
 type LevelState = {
@@ -148,15 +157,6 @@ type ImageState = {
   };
 };
 
-// type ImageState = {
-//   fstImg: ImageSrc | undefined;
-//   sndImg: ImageSrc | undefined;
-//   thirdImg: ImageSrc | undefined;
-//   setFstImg: (to: ImageSrc) => void;
-//   setSndImg: (to: ImageSrc) => void;
-//   setThirdImg: (to: ImageSrc) => void;
-// };
-//
 export const useTextRendererStore = create<TextRendererState>((set) => ({
   // yellow text
   yellowText: "Play",
@@ -182,12 +182,17 @@ export const useTextRendererStore = create<TextRendererState>((set) => ({
     set((state) => ({ greenTextActive: Number(!state.greenTextActive) })),
 }));
 
-export const useBlueOrbStore = create<BlueOrbState>((set) => ({
-  activeBlueOrbId: "0422",
+export const useHudStore = create<HUDState>((set) => ({
   activeHudId: "fg_hud_1",
   hudActive: 1,
-  isActiveBlueOrbInteractedWith: false,
   hudVisible: true,
+  setActiveBlueOrbHudId: (to) => set(() => ({ activeHudId: to })),
+  toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
+}));
+
+export const useBlueOrbStore = create<BlueOrbState>((set) => ({
+  activeBlueOrbId: "0422",
+  isActiveBlueOrbInteractedWith: false,
   activeBlueOrbPosX: 0,
   activeBlueOrbPosZ: 0,
   activeBlueOrbRotZ: 0,
@@ -195,10 +200,12 @@ export const useBlueOrbStore = create<BlueOrbState>((set) => ({
   setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })),
   setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })),
   setActiveBlueOrbId: (to) => set(() => ({ activeBlueOrbId: to })),
-  setActiveBlueOrbHudId: (to) => set(() => ({ activeHudId: to })),
-  toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
   setIsActiveBlueOrbInteractedWith: (to) =>
     set(() => ({ isActiveBlueOrbInteractedWith: to })),
+  blueOrbRowIdx: 0,
+  setBlueOrbRowIdx: (to) => set(() => ({ blueOrbRowIdx: to })),
+  blueOrbColIdx: 0,
+  setBlueOrbColIdx: (to) => set(() => ({ blueOrbColIdx: to })),
 }));
 
 export const useLainStore = create<LainState>((set) => ({
@@ -248,6 +255,8 @@ export const useSiteStore = create<SiteState>((set) => ({
   setSitePosY: (to) => set(() => ({ sitePosY: to })),
   setSiteRotY: (to) => set(() => ({ siteRotY: to })),
   setIsSiteChanging: (to) => set(() => ({ isSiteChangingY: to })),
+  siteRotIdx: 6,
+  setSiteRotIdx: (to) => set(() => ({ siteRotIdx: to })),
 }));
 
 export const useMiddleRingStore = create<MiddleRingState>((set) => ({