added basic throw animation, cleaned some stuff up

src/components/BlueOrb.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useRef } from "react";
+import React, {memo, useEffect, useMemo, useRef} from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import { useSpring, a } from "@react-spring/three";
 import * as THREE from "three";
@@ -17,6 +17,7 @@ import LdaActive from "../static/sprites/Lda_active.png";
 import MULTI from "../static/sprites/MULTI.png";
 import MULTIActive from "../static/sprites/MULTI_active.png";
 import level_y_values from "../resources/level_y_values.json";
+import { useBlueOrbStore } from "../store";
 
 type BlueOrbContructorProps = {
   sprite: string;
@@ -26,15 +27,14 @@ type BlueOrbContructorProps = {
   level: string;
 };
 
-type LevelYValues = {
-  [level: string]: number;
-};
-
-type SpriteToPath = {
-  [key: string]: [string, string];
-};
-
 const BlueOrb = memo((props: BlueOrbContructorProps) => {
+  const isActiveBlueOrbInteractedWith = useBlueOrbStore(
+    (state) => state.isActiveBlueOrbInteractedWith
+  );
+  const activeBlueOrbPosX = useBlueOrbStore((state) => state.activeBlueOrbPosX);
+  const activeBlueOrbPosZ = useBlueOrbStore((state) => state.activeBlueOrbPosZ);
+  const activeBlueOrbRotZ = useBlueOrbStore((state) => state.activeBlueOrbRotZ);
+
   // the game only has a couple of sprites that it displays in the hub
   // dynamically importnig them would be worse for performance,
   // so we import all of them here and then use this function to
@@ -52,7 +52,7 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
     } else if (sprite.includes("Dc")) {
       return [Dc, DcActive];
     } else {
-      return ({
+      const spriteAssocs = {
         Tda: [Tda, TdaActive],
         Cou: [Cou, CouActive],
         Dia: [Dia, DiaActive],
@@ -62,7 +62,9 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
         Eda: [MULTI, MULTIActive],
         TaK: [MULTI, MULTIActive],
         Env: [MULTI, MULTIActive],
-      } as SpriteToPath)[sprite.substr(0, 3)];
+      };
+
+      return spriteAssocs[sprite.substr(0, 3) as keyof typeof spriteAssocs];
     }
   };
 
@@ -110,7 +112,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
     }
   `;
 
-  const activeBlueOrbRef = useRef<THREE.Object3D>();
   useFrame(() => {
     if (materialRef.current) {
       materialRef.current.uniforms.timeMSeconds.value =
@@ -118,19 +119,41 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
     }
   });
 
+  const activeBlueOrbState = useSpring({
+    activeBlueOrbPosX: isActiveBlueOrbInteractedWith
+      ? activeBlueOrbPosX
+      : props.position[0],
+    activeBlueOrbPosY: isActiveBlueOrbInteractedWith
+      ? level_y_values[props.level as keyof typeof level_y_values]
+      : props.position[1],
+    activeBlueOrbPosZ: isActiveBlueOrbInteractedWith
+      ? activeBlueOrbPosZ
+      : props.position[2],
+    activeBlueOrbRotZ: isActiveBlueOrbInteractedWith
+      ? activeBlueOrbRotZ
+      : 0.001,
+    config: { duration: 800 },
+  });
+
   return (
-    <group position={[0, (level_y_values as LevelYValues)[props.level], 0]}>
+    <group
-      <a.mesh
+      position={[
-        position-x={props.position[0]}
+        0,
-        position-y={props.position[1]}
+        level_y_values[props.level as keyof typeof level_y_values],
-        position-z={props.position[2]}
+        0,
-        rotation-y={props.rotation[1]}
+      ]}
-        ref={props.active ? activeBlueOrbRef : undefined}
+    >
-        scale={[0.36, 0.18, 0.36]}
+      {props.active ? (
-        renderOrder={1}
+        <a.mesh
-      >
+          position-x={activeBlueOrbState.activeBlueOrbPosX}
-        <planeBufferGeometry attach="geometry" />
+          position-y={activeBlueOrbState.activeBlueOrbPosY}
-        {props.active ? (
+          position-z={activeBlueOrbState.activeBlueOrbPosZ}
+          rotation-z={activeBlueOrbState.activeBlueOrbRotZ}
+          rotation-y={props.rotation[1]}
+          scale={[0.36, 0.18, 0.36]}
+          renderOrder={1}
+        >
+          <planeBufferGeometry attach="geometry" />
           <shaderMaterial
             ref={materialRef}
             attach="material"
@@ -140,15 +163,26 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
             side={THREE.DoubleSide}
             transparent={true}
           />
-        ) : (
+        </a.mesh>
+      ) : (
+        <a.mesh
+          position-x={props.position[0]}
+          position-y={props.position[1]}
+          position-z={props.position[2]}
+          rotation-y={props.rotation[1]}
+          rotation-z={0}
+          scale={[0.36, 0.18, 0.36]}
+          renderOrder={1}
+        >
+          <planeBufferGeometry attach="geometry" />
           <meshStandardMaterial
             attach="material"
             map={nonActiveTexture}
             side={THREE.DoubleSide}
             transparent={true}
           />
-        )}
+        </a.mesh>
-      </a.mesh>
+      )}
     </group>
   );
 });

src/components/HUD.tsx

@@ -20,7 +20,7 @@ export type HUDElementProps = {
 const HUD = memo((props: HUDElementProps) => {
   const hudActive = useBlueOrbStore((state) => state.hudActive);
 
-  const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
+  const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
   const currentHudId = useBlueOrbStore((state) => state.hudId);
 
   const yellowHudTextPosY = useBlueOrbStore((state) => state.yellowHudTextPosY);
@@ -30,7 +30,7 @@ const HUD = memo((props: HUDElementProps) => {
 
   const currentYellowHudText = useBlueOrbStore((state) => state.yellowHudText);
   const currentGreenHudText =
-    site_a[currentBlueOrbId as keyof typeof site_a].green_text;
+    site_a[activeBlueOrbId as keyof typeof site_a].green_text;
 
   const yellowTextArr = currentYellowHudText.split("");
   const greenTextArr = currentGreenHudText.split("");

src/components/Lain.tsx

@@ -38,10 +38,6 @@ const LainConstructor = (props: LainConstructorProps) => {
     animator.animate();
   });
 
-  useFrame(() => {
-    animator.animate();
-  });
-
   return (
     <spriteMaterial
       attach="material"

src/components/MainScene.tsx

@@ -15,11 +15,11 @@ import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
 
 const MainScene = () => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
-  const setCurrentBlueOrb = useBlueOrbStore(
+  const setActiveBlueOrb = useBlueOrbStore(
-    (state) => state.setCurrentBlueOrbId
+    (state) => state.setActiveBlueOrbId
   );
-  const setCurrentBlueOrbHudId = useBlueOrbStore(
+  const setActiveBlueOrbHudId = useBlueOrbStore(
-    (state) => state.setCurrentBlueOrbHudId
+    (state) => state.setActiveBlueOrbHudId
   );
 
   const mainGroupPosY = useMainGroupStore((state) => state.mainGroupPosY);
@@ -39,9 +39,9 @@ const MainScene = () => {
 
   useEffect(() => {
     setLainMoveState("standing");
-    setCurrentBlueOrb("0422");
+    setActiveBlueOrb("0422");
-    setCurrentBlueOrbHudId("fg_hud_1");
+    setActiveBlueOrbHudId("fg_hud_1");
-  }, [setCurrentBlueOrb, setCurrentBlueOrbHudId, setLainMoveState]);
+  }, [setActiveBlueOrb, setActiveBlueOrbHudId, setLainMoveState]);
   // set lain intro spritesheet before the page loads fully
   useEffect(() => {
     // setLainMoving(true);

src/components/PurpleRing.tsx

@@ -10,10 +10,6 @@ type PurpleRingProps = {
   level: string;
 };
 
-type SiteTextureDispatcher = {
-  [key: string]: number;
-};
-
 const PurpleRing = memo((props: PurpleRingProps) => {
   const siteA = useLoader(THREE.TextureLoader, siteATex);
   const siteB = useLoader(THREE.TextureLoader, siteBTex);
@@ -22,7 +18,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
   const purpleRingRef = useRef<THREE.Object3D>();
 
   const dispatchSiteLevelTextureOffset = (level: string) => {
-    return ({
+    const siteTextures = {
       "9": 0.035,
       "8": 0.039,
       "7": 0.001,
@@ -33,7 +29,8 @@ const PurpleRing = memo((props: PurpleRingProps) => {
       "2": 0.0218,
       "1": 0.026,
       "0": 0.031,
-    } as SiteTextureDispatcher)[level];
+    };
+    return siteTextures[level as keyof typeof siteTextures];
   };
 
   const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);

src/components/Site.tsx

@@ -8,7 +8,7 @@ import { a, useSpring } from "@react-spring/three";
 import { useBlueOrbStore, useSiteStore } from "../store";
 
 const Site = memo(() => {
-  const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
+  const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
 
   const siteRotY = useSiteStore((state) => state.siteRotY);
   const sitePosY = useSiteStore((state) => state.sitePosY);
@@ -49,7 +49,7 @@ const Site = memo(() => {
                   ]
                 }
                 key={(blueOrb as any)[1]["node_name"]}
-                active={(blueOrb as any)[0] === currentBlueOrbId}
+                active={(blueOrb as any)[0] === activeBlueOrbId}
                 level={(blueOrb as any)[0].substr(0, 2)}
               />
             );

src/components/StateManagers/BlueOrbHUDStateManager.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect } from "react";
 import { useBlueOrbStore } from "../../store";
 import blue_orb_directions from "../../resources/blue_orb_directions.json";
+import { StateManagerProps } from "./EventStateManager";
 
-const BlueOrbHUDStateManager = (props: any) => {
+const BlueOrbHUDStateManager = (props: StateManagerProps) => {
-  const setCurrentBlueOrbHudId = useBlueOrbStore(
+  const setActiveBlueOrbHudId = useBlueOrbStore(
-    (state) => state.setCurrentBlueOrbHudId
+    (state) => state.setActiveBlueOrbHudId
   );
   const toggleHud = useBlueOrbStore((state) => state.toggleHud);
 
@@ -12,27 +13,27 @@ const BlueOrbHUDStateManager = (props: any) => {
     (event: string, targetBlueOrbHudId: string) => {
       const dispatcherObjects = {
         moveUp: {
-          action: setCurrentBlueOrbHudId,
+          action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 3903.704,
         },
         moveDown: {
-          action: setCurrentBlueOrbHudId,
+          action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 3903.704,
         },
         moveLeft: {
-          action: setCurrentBlueOrbHudId,
+          action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 3903.704,
         },
         moveRight: {
-          action: setCurrentBlueOrbHudId,
+          action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 3903.704,
         },
         changeBlueOrbFocus: {
-          action: setCurrentBlueOrbHudId,
+          action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 500,
         },
@@ -40,7 +41,7 @@ const BlueOrbHUDStateManager = (props: any) => {
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    []
+    [setActiveBlueOrbHudId]
   );
 
   useEffect(() => {
@@ -64,13 +65,7 @@ const BlueOrbHUDStateManager = (props: any) => {
         }, dispatchedObject.actionDelay);
       }
     }
-  }, [
+  }, [props.eventState, setActiveBlueOrbHudId, toggleHud, dispatchObject]);
-    props.eventState,
-    props.targetBlueOrbGreenText,
-    props.targetBlueOrbHudId,
-    setCurrentBlueOrbHudId,
-    toggleHud,
-  ]);
   return null;
 };
 

src/components/StateManagers/BlueOrbHUDTextStateManager.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect } from "react";
 import blue_orb_huds from "../../resources/blue_orb_huds.json";
 import site_a from "../../resources/site_a.json";
 import { useBlueOrbStore } from "../../store";
@@ -30,6 +30,7 @@ type BlueOrbHUDTextDispatcher = {
 
 const BlueOrbHUDTextStateManager = (props: any) => {
   const setYellowHudText = useBlueOrbStore((state) => state.setYellowHudText);
+
   const setYellowHudTextOffsetXCoeff = useBlueOrbStore(
     (state) => state.setYellowHudTextOffsetXCoeff
   );
@@ -155,7 +156,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    []
+    [animateYellowTextWithMove, animateYellowTextWithoutMove]
   );
 
   useEffect(() => {
@@ -185,6 +186,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
     props.eventState,
     props.targetBlueOrbHudId,
     props.targetBlueOrbId,
+    dispatchObject,
   ]);
 
   return null;

src/components/StateManagers/BlueOrbStateManager.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useEffect } from "react";
 import { useBlueOrbStore } from "../../store";
 import blue_orb_directions from "../../resources/blue_orb_directions.json";
+import { StateManagerProps } from "./EventStateManager";
 
-type SetCurrentBlueOrb = (value: string) => void;
+type SetActiveBlueOrb = (value: string) => void;
-type SetIsCurrentBlueOrbInteractedWith = (value: boolean) => void;
+type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
 
 type BlueOrbDispatchData = {
-  action: SetCurrentBlueOrb | SetIsCurrentBlueOrbInteractedWith;
+  action: SetActiveBlueOrb | SetIsActiveBlueOrbInteractedWith;
   value: string | boolean;
   actionDelay: number;
 };
@@ -17,47 +18,87 @@ type BlueOrbDispatcher = {
   moveLeft: BlueOrbDispatchData;
   moveRight: BlueOrbDispatchData;
   changeBlueOrbFocus: BlueOrbDispatchData;
-  pickCurrentBlueOrb: BlueOrbDispatchData;
+  pickActiveBlueOrb: BlueOrbDispatchData;
 };
 
-const BlueOrbStateManager = (props: any) => {
+const BlueOrbStateManager = (props: StateManagerProps) => {
-  const setCurrentBlueOrb: SetCurrentBlueOrb = useBlueOrbStore(
+  const setActiveBlueOrb: SetActiveBlueOrb = useBlueOrbStore(
-    (state) => state.setCurrentBlueOrbId
+    (state) => state.setActiveBlueOrbId
   );
-  const setIsCurrentBlueOrbInteractedWith: SetIsCurrentBlueOrbInteractedWith = useBlueOrbStore(
+  const setIsActiveBlueOrbInteractedWith: SetIsActiveBlueOrbInteractedWith = useBlueOrbStore(
-    (state) => state.setIsCurrentBlueOrbInteractedWith
+    (state) => state.setIsActiveBlueOrbInteractedWith
   );
+  const setActiveBlueOrbPosX = useBlueOrbStore(
+    (state) => state.setActiveBlueOrbPosX
+  );
+  const setActiveBlueOrbPosZ = useBlueOrbStore(
+    (state) => state.setActiveBlueOrbPosZ
+  );
+  const setActiveBlueOrbRotZ = useBlueOrbStore(
+    (state) => state.setActiveBlueOrbRotZ
+  );
+
+  const animateActiveBlueOrbThrow = useCallback(() => {
+    setIsActiveBlueOrbInteractedWith(true);
+
+    setActiveBlueOrbPosZ(0.3);
+    setActiveBlueOrbPosX(0.9);
+
+    setTimeout(() => {
+      setActiveBlueOrbPosZ(0.2);
+      setActiveBlueOrbPosX(0.5);
+    }, 800);
+    setTimeout(() => {
+      setActiveBlueOrbPosX(0.55);
+      setActiveBlueOrbRotZ(-0.005);
+    }, 2000);
+    setTimeout(() => {
+      setActiveBlueOrbPosZ(2);
+      setActiveBlueOrbPosX(0);
+      setActiveBlueOrbRotZ(-0.5);
+    }, 2450);
+
+    setTimeout(() => {
+      setActiveBlueOrbRotZ(0);
+      setIsActiveBlueOrbInteractedWith(false);
+    }, 3800);
+  }, [
+    setActiveBlueOrbPosX,
+    setActiveBlueOrbPosZ,
+    setActiveBlueOrbRotZ,
+    setIsActiveBlueOrbInteractedWith,
+  ]);
 
   const dispatchObject = useCallback(
     (event: string, targetBlueOrbId: string) => {
       const dispatcherObjects: BlueOrbDispatcher = {
         moveUp: {
-          action: setCurrentBlueOrb,
+          action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 3903.704,
         },
         moveDown: {
-          action: setCurrentBlueOrb,
+          action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 3903.704,
         },
         moveLeft: {
-          action: setCurrentBlueOrb,
+          action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 3903.704,
         },
         moveRight: {
-          action: setCurrentBlueOrb,
+          action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 3903.704,
         },
         changeBlueOrbFocus: {
-          action: setCurrentBlueOrb,
+          action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 0,
         },
-        pickCurrentBlueOrb: {
+        pickActiveBlueOrb: {
-          action: setIsCurrentBlueOrbInteractedWith,
+          action: animateActiveBlueOrbThrow,
           value: true,
           actionDelay: 0,
         },
@@ -65,7 +106,7 @@ const BlueOrbStateManager = (props: any) => {
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    []
+    [animateActiveBlueOrbThrow, setActiveBlueOrb]
   );
 
   useEffect(() => {
@@ -81,15 +122,12 @@ const BlueOrbStateManager = (props: any) => {
       const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId);
 
       if (dispatchedObject) {
-        // set current to dummy blue orb for disabling the glowing effect for the current sprite.
-        setCurrentBlueOrb("dummy");
-
         setTimeout(() => {
           dispatchedObject.action(dispatchedObject.value as never);
         }, dispatchedObject.actionDelay);
       }
     }
-  }, [props.eventState, props.targetBlueOrbId, setCurrentBlueOrb]);
+  }, [props.eventState, setActiveBlueOrb, dispatchObject]);
   return null;
 };
 

src/components/StateManagers/EventStateManager.tsx

@@ -7,28 +7,24 @@ import BlueOrbHUDStateManager from "./BlueOrbHUDStateManager";
 import BlueOrbHUDTextStateManager from "./BlueOrbHUDTextStateManager";
 import { useBlueOrbStore } from "../../store";
 
-type KeyCodeAssociations = {
-  [keyCode: number]: string;
-};
-
 const getKeyCodeAssociation = (keyCode: number): string => {
-  return ({
+  const keyCodeAssocs = {
-    40: "down",
+    40: "down", // down arrow
-    37: "left",
+    37: "left", // left arrow
-    38: "up",
+    38: "up", // up arrow
-    39: "right",
+    39: "right", // right arrow
-    88: "x",
+    88: "pick", // x key
-  } as KeyCodeAssociations)[keyCode];
+  };
+  return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
 };
 
-type BlueOrbStateData = {
+export type StateManagerProps = {
-  targetBlueOrbId: string;
+  eventState: string;
-  targetBlueOrbHudId: string;
 };
 
 const EventStateManager = () => {
   const [eventState, setEventState] = useState<string>();
-  const currentBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
+  const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
 
   const [inputCooldown, setInputCooldown] = useState(false);
 
@@ -38,23 +34,17 @@ const EventStateManager = () => {
 
       const keyPress = getKeyCodeAssociation(keyCode);
 
-      // changing blue orb focus/moving around the map
+      if (keyPress && !inputCooldown) {
-      const arrowKeys = ["up", "down", "left", "right"];
-
-      // interacting with blue orbs
-      const blueOrbPressKeys = ["x"];
-
-      if (arrowKeys.includes(keyPress) && !inputCooldown) {
         // event id consists of the CURRENT blue orb id (to calculate where we're at currently)
         // and the keypress.
         // this id is later on used to get the needed corresponding data for each component
         // from blue_orb_directions.json file.
-        const eventId = `${currentBlueOrb}_${keyPress}`;
+        const eventId = `${activeBlueOrb}_${keyPress}`;
 
         setEventState(eventId);
       }
     },
-    [inputCooldown, currentBlueOrb]
+    [inputCooldown, activeBlueOrb]
   );
 
   useEffect(() => {

src/components/StateManagers/LainStateManager.tsx

@@ -1,41 +1,45 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 import { useLainStore } from "../../store";
 import blue_orb_directions from "../../resources/blue_orb_directions.json";
+import { StateManagerProps } from "./EventStateManager";
 
-const LainStateManager = (props: any) => {
+const LainStateManager = (props: StateManagerProps) => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
 
-  const dispatchObject = useCallback((event: string) => {
+  const dispatchObject = useCallback(
-    const dispatcherObjects = {
+    (event: string) => {
-      moveUp: {
+      const dispatcherObjects = {
-        action: setLainMoveState,
+        moveUp: {
-        value: "moveUp",
+          action: setLainMoveState,
-        duration: 3903.704,
+          value: "moveUp",
-      },
+          duration: 3903.704,
-      moveDown: {
+        },
-        action: setLainMoveState,
+        moveDown: {
-        value: "moveDown",
+          action: setLainMoveState,
-        duration: 3903.704,
+          value: "moveDown",
-      },
+          duration: 3903.704,
-      moveLeft: {
+        },
-        action: setLainMoveState,
+        moveLeft: {
-        value: "moveLeft",
+          action: setLainMoveState,
-        duration: 3903.704,
+          value: "moveLeft",
-      },
+          duration: 3903.704,
-      moveRight: {
+        },
-        action: setLainMoveState,
+        moveRight: {
-        value: "moveRight",
+          action: setLainMoveState,
-        duration: 3903.704,
+          value: "moveRight",
-      },
+          duration: 3903.704,
-      pickCurrentBlueOrb: {
+        },
-        action: setLainMoveState,
+        pickActiveBlueOrb: {
-        value: "pickCurrentBlueOrb",
+          action: setLainMoveState,
-        duration: 3903.704,
+          value: "throwBlueOrb",
-      },
+          duration: 3903.704,
-    };
+        },
+      };
 
-    return dispatcherObjects[event as keyof typeof dispatcherObjects];
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
-  }, []);
+    },
+    [setLainMoveState]
+  );
 
   useEffect(() => {
     if (props.eventState) {
@@ -55,7 +59,7 @@ const LainStateManager = (props: any) => {
         }, dispatchedObject.duration);
       }
     }
-  }, [props.eventState, setLainMoveState]);
+  }, [props.eventState, setLainMoveState, dispatchObject]);
 
   return null;
 };

src/components/StateManagers/SiteStateManager.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo } from "react";
 import { useSiteStore } from "../../store";
 import blue_orb_directions from "../../resources/blue_orb_directions.json";
+import { StateManagerProps } from "./EventStateManager";
 
-const SiteStateManager = (props: any) => {
+const SiteStateManager = (props: StateManagerProps) => {
   const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
   const incrementSitePosY = useSiteStore((state) => state.incrementSitePosY);
   const setIsSiteYChanging = useSiteStore((state) => state.setIsSiteChanging);

src/resources/blue_orb_directions.json

@@ -14,6 +14,11 @@
     "target_blue_orb_id": "0506",
     "target_hud_id": "fg_hud_3"
   },
+  "0422_pick": {
+    "action": "pickActiveBlueOrb",
+    "target_blue_orb_id": "0422",
+    "target_hud_id": "fg_hud_1"
+  },
 
   "0414_up": {
     "action": "changeBlueOrbFocus",

src/store.ts

@@ -5,15 +5,21 @@ type BlueOrbState = {
   hudId: string;
   hudActive: number;
   hudVisible: boolean;
-  isCurrentBlueOrbInteractedWith: boolean;
+  isActiveBlueOrbInteractedWith: boolean;
   yellowHudText: string;
   yellowHudTextPosY: number;
   yellowHudTextPosX: number;
   yellowHudTextOffsetXCoeff: number;
-  setCurrentBlueOrbId: (to: string) => void;
+  activeBlueOrbPosX: number;
-  setCurrentBlueOrbHudId: (to: string) => void;
+  activeBlueOrbPosZ: number;
+  activeBlueOrbRotZ: number;
+  setActiveBlueOrbPosX: (to: number) => void;
+  setActiveBlueOrbPosZ: (to: number) => void;
+  setActiveBlueOrbRotZ: (to: number) => void;
+  setActiveBlueOrbId: (to: string) => void;
+  setActiveBlueOrbHudId: (to: string) => void;
   toggleHud: () => void;
-  setIsCurrentBlueOrbInteractedWith: (to: boolean) => void;
+  setIsActiveBlueOrbInteractedWith: (to: boolean) => void;
   setYellowHudText: (to: string) => void;
   incrementYellowHudTextPosY: (by: number) => void;
   setYellowHudTextPosY: (to: number) => void;
@@ -87,17 +93,24 @@ export const useBlueOrbStore = create<BlueOrbState>((set) => ({
   blueOrbId: "0422",
   hudId: "fg_hud_1",
   hudActive: 1,
-  isCurrentBlueOrbInteractedWith: false,
+  isActiveBlueOrbInteractedWith: false,
   hudVisible: true,
   yellowHudText: "Tda028",
-  yellowHudTextPosY: 0,
+  yellowHudTextPosY: 0.23,
-  yellowHudTextPosX: 0,
+  yellowHudTextPosX: -0.35,
   yellowHudTextOffsetXCoeff: 0,
-  setCurrentBlueOrbId: (to) => set(() => ({ blueOrbId: to })),
+  activeBlueOrbPosX: 0,
-  setCurrentBlueOrbHudId: (to) => set(() => ({ hudId: to })),
+  activeBlueOrbPosZ: 0,
+  activeBlueOrbRotZ: 0,
+  setActiveBlueOrbPosX: (to) => set(() => ({ activeBlueOrbPosX: to })),
+  setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })),
+  setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })),
+  setActiveBlueOrbId: (to) => set(() => ({ blueOrbId: to })),
+  setActiveBlueOrbHudId: (to) => set(() => ({ hudId: to })),
   toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
   setYellowHudText: (to) => set(() => ({ yellowHudText: to })),
-  setIsCurrentBlueOrbInteractedWith: (to) => set(() => ({isCurrentBlueOrbInteractedWith: to})),
+  setIsActiveBlueOrbInteractedWith: (to) =>
+    set(() => ({ isActiveBlueOrbInteractedWith: to })),
   incrementYellowHudTextPosY: (by) =>
     set((state) => ({ yellowHudTextPosY: state.yellowHudTextPosY + by })),
   setYellowHudTextPosY: (to) => set(() => ({ yellowHudTextPosY: to })),