added string table, image table, working on scene initialization and a lot more stuff

package.json

@@ -13,10 +13,11 @@
     "@types/react": "^16.9.47",
     "@types/react-dom": "^16.9.8",
     "drei": "^1.3.0",
+    "eslint-plugin-react": "^7.19.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-player": "^2.6.2",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^4.0.0",
     "react-three-fiber": "^4.2.20",
     "three": "^0.119.1",
     "three-plain-animator": "^1.0.2",
@@ -48,5 +49,7 @@
     ]
   },
   "homepage": ".",
-  "devDependencies": {}
+  "devDependencies": {
+    "eslint-loader": "^4.0.2"
+  }
 }

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, Suspense } from "react";
+import React, { useEffect, useState, Suspense, useMemo } from "react";
 import MainScene from "./scenes/MainScene";
 import "./static/css/hub.css";
 import "./static/css/main.css";
@@ -6,11 +6,12 @@ import { Canvas } from "react-three-fiber";
 import Boot from "./components/Boot";
 import MediaPlayer from "./components/MediaScene/MediaPlayer";
 import MediaScene from "./scenes/MediaScene";
-import EventStateManager from "./components/StateManagers/EventStateManager";
+import EventManager from "./components/StateManagers/EventManager";
+import { useSceneStore } from "./store";
 
 const App = () => {
   const [moveToGame, setMoveToGame] = useState(false);
-
+  const currentScene = useSceneStore((state) => state.currentScene);
   useEffect(() => {
     document.title = "< index >";
     document.getElementsByTagName("body")[0].className = "main-body";
@@ -19,20 +20,26 @@ const App = () => {
     };
   }, []);
 
+  const dispatchScene = useMemo(() => {
+    return {
+      main: <MainScene />,
+      media: <MediaScene />,
+    };
+  }, []);
+
   return (
     <div id="game-root" className="game">
       {/*<Boot setMoveToGame={setMoveToGame} />*/}
       {/* {moveToGame ? <MainScene /> : <Boot setMoveToGame={setMoveToGame} />} */}
       <span className="canvas">
-        <EventStateManager />
+        <EventManager />
         <Canvas concurrent>
-          {/*<Suspense fallback={null}>*/}
-          {/*  <MediaScene />*/}
-          {/*</Suspense>*/}
-          <MainScene />
+          <Suspense fallback={null}>
+            {dispatchScene[currentScene as keyof typeof dispatchScene]}
+          </Suspense>
         </Canvas>
       </span>
-      {/*<MediaPlayer />*/}
+      <MediaPlayer />
     </div>
   );
 };

src/components/MainScene/BlueOrb.tsx

@@ -158,6 +158,7 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
         : 0,
     }));
   }, [
+    props.level,
     activeBlueOrbPosX,
     activeBlueOrbPosZ,
     activeBlueOrbRotZ,

src/components/MainScene/HUD.tsx

@@ -11,13 +11,11 @@ import { a, useSpring } from "@react-spring/three";
 import { useBlueOrbStore } from "../../store";
 import blue_orb_huds from "../../resources/blue_orb_huds.json";
 
-export type HUDElementProps = {
-  hudVisibility: boolean;
-};
-
-const HUD = memo((props: HUDElementProps) => {
+const HUD = memo(() => {
   const hudActive = useBlueOrbStore((state) => state.hudActive);
-  const currentHudId = useBlueOrbStore((state) => state.hudId);
+  const currentHudId = useBlueOrbStore((state) => state.activeHudId);
+
+  const hudVisible = useBlueOrbStore((state) => state.hudVisible);
 
   const currentHud = blue_orb_huds[currentHudId as keyof typeof blue_orb_huds];
 
@@ -86,7 +84,7 @@ const HUD = memo((props: HUDElementProps) => {
   );
 
   return (
-    <group visible={props.hudVisibility}>
+    <group visible={hudVisible} position={[0, 0, 10]}>
       <a.sprite
         position-x={longHUDPosX}
         position-y={currentHud!.long.position[1]}

src/components/MainScene/Lain.tsx

@@ -24,11 +24,11 @@ const LainConstructor = (props: LainConstructorProps) => {
 
   const [animator] = useState(() => {
     const anim = new PlainSingularAnimator(
-        lainSpriteTexture,
-        props.framesHorizontal,
-        props.framesVertical,
-        props.frameCount,
-        props.frameCount * 0.27
+      lainSpriteTexture,
+      props.framesHorizontal,
+      props.framesVertical,
+      props.frameCount,
+      props.frameCount * 0.27
     );
     anim.init(0);
     return anim;
@@ -117,15 +117,15 @@ const Lain = () => {
 
   const lainAnimationDispatch = {
     standing: <LainStanding />,
-    moveLeft: <LainMoveLeft />,
-    moveRight: <LainMoveRight />,
-    moveUp: <LainMoveUp />,
-    moveDown: <LainMoveDown />,
+    move_left: <LainMoveLeft />,
+    move_right: <LainMoveRight />,
+    move_up: <LainMoveUp />,
+    move_down: <LainMoveDown />,
     throwBlueOrb: <LainThrowBlueOrb />,
   };
 
   return (
-    <Suspense fallback={<>loading...</>}>
+    <Suspense fallback={null}>
       <sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]}>
         {
           lainAnimationDispatch[

src/components/MainScene/OrthoCamera.tsx

@@ -1,38 +0,0 @@
-import React, { memo, useMemo, useRef } from "react";
-import { useFrame, useThree } from "react-three-fiber";
-import { Scene } from "three";
-import HUD from "./HUD";
-import YellowOrb from "./YellowOrb";
-import { useBlueOrbStore } from "../../store";
-import TextRenderer from "../TextRenderer/TextRenderer";
-
-const OrthoCamera = memo(() => {
-  const { gl, scene, camera } = useThree();
-  const virtualScene = useMemo(() => new Scene(), []);
-  const virtualCam = useRef();
-
-  const hudVisible = useBlueOrbStore((state) => state.hudVisible);
-
-  useFrame(() => {
-    gl.autoClear = false;
-    gl.clear();
-    gl.render(scene, camera);
-    gl.clearDepth();
-    gl.render(virtualScene, virtualCam.current!);
-  }, 1);
-
-  //-0.6
-  return (
-    <orthographicCamera
-      ref={virtualCam}
-      position={[0, 0, 10]}
-      rotation={[0, 0, 0]}
-    >
-      <HUD key={1} hudVisibility={hudVisible} />
-      <TextRenderer />
-      <YellowOrb />
-    </orthographicCamera>
-  );
-});
-
-export default OrthoCamera;

src/components/MainScene/Site.tsx

@@ -8,7 +8,7 @@ import { a, useSpring } from "@react-spring/three";
 import { useBlueOrbStore, useLevelStore, useSiteStore } from "../../store";
 
 const Site = memo(() => {
-  const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
+  const activeBlueOrbId = useBlueOrbStore((state) => state.activeBlueOrbId);
 
   const activeLevels = useLevelStore((state) => state.activeLevels);
 
@@ -22,7 +22,7 @@ const Site = memo(() => {
   });
 
   return (
-    <Suspense fallback={<>loading...</>}>
+    <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]) => {

src/components/MainScene/YellowOrb.tsx

@@ -108,7 +108,7 @@ const YellowOrb = memo(() => {
   });
 
   return (
-    <group position={[0, -0.1, -9]} visible={yellowOrbVisible}>
+    <group position={[0, -0.1, 1]} visible={yellowOrbVisible}>
       <sprite scale={[0.5, 0.5, 0.5]} ref={orbRef} renderOrder={renderOrder}>
         <spriteMaterial
           attach="material"

src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx

@@ -1,4 +1,4 @@
-import React, { createRef, MutableRefObject, useEffect, useMemo } from "react";
+import React, { createRef, MutableRefObject, useMemo } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
 import AudioVisualizerColumn from "./AudioVisualizerColumn";
@@ -16,12 +16,11 @@ const AudioVisualizer = () => {
   }, []);
 
   const columnRefs = useMemo(() => {
-    let ref1, ref2, ref3, ref4;
     return Array.from({ length: 15 }, () => [
-      (ref1 = createRef<THREE.Object3D>()),
-      (ref2 = createRef<THREE.Object3D>()),
-      (ref3 = createRef<THREE.Object3D>()),
-      (ref4 = createRef<THREE.Object3D>()),
+      createRef<THREE.Object3D>(),
+      createRef<THREE.Object3D>(),
+      createRef<THREE.Object3D>(),
+      createRef<THREE.Object3D>(),
     ]);
   }, []);
 
@@ -74,7 +73,7 @@ const AudioVisualizer = () => {
   });
 
   return (
-    <>
+    <group position={[0, 0, -3]}>
       {columnRefs.map((refArray, idx: number) => (
         <AudioVisualizerColumn
           position={[0, -idx / 2, 0]}
@@ -87,7 +86,7 @@ const AudioVisualizer = () => {
           key={idx}
         />
       ))}
-    </>
+    </group>
   );
 };
 

src/components/MediaScene/Images.tsx

@@ -0,0 +1,12 @@
+import React, { useEffect, useState } from "react";
+
+const Images = () => {
+
+  return (
+    <sprite position={[-0.2, 0.6, -4]} scale={[5, 3.75, 0]}>
+      <spriteMaterial />
+    </sprite>
+  );
+};
+
+export default Images;

src/components/MediaScene/Lof.tsx

@@ -1,7 +1,5 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import * as THREE from "three";
-import wordInactiveTexture from "../../static/sprite/word_background.png";
-import wordActiveTexture from "../../static/sprite/word_background_active.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import lofSpriteSheet from "../../static/sprite/lof_spritesheet.png";
 import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
@@ -20,7 +18,7 @@ const Lof = () => {
   });
 
   return (
-    <sprite position={[-2, 1.8, 0]} scale={[0.8, 0.8, 0.8]}>
+    <sprite position={[-2, 1.8, -3]} scale={[0.8, 0.8, 0.8]}>
       <spriteMaterial attach="material" map={lofTex} />
     </sprite>
   );

src/components/MediaScene/MediaLoadingBar.tsx

@@ -145,6 +145,10 @@ const MediaLoadingBar = () => {
   }, [
     mediaLoadingBar10PercTex,
     mediaLoadingBar20PercTex,
+    mediaLoadingBar30PercTex,
+    mediaLoadingBar40PercTex,
+    mediaLoadingBar50PercTex,
+    mediaLoadingBarTex,
     mediaPercentageElapsed,
   ]);
 

src/components/MediaScene/MediaPlayer.tsx

@@ -1,8 +1,9 @@
 import React, { createRef, useCallback, useRef } from "react";
 import test from "../../static/movie/LAIN01.XA[18].ogg";
-import { useMediaStore } from "../../store";
+import { useMediaStore, useSceneStore } from "../../store";
 
 const MediaPlayer = () => {
+  const currentScene = useSceneStore((state) => state.currentScene);
   const setMediaPercentageElapsed = useMediaStore(
     (state) => state.setMediaPercentageElapsed
   );
@@ -21,15 +22,24 @@ const MediaPlayer = () => {
         setMediaPercentageElapsed(percentageElapsed);
       }
     }
-  }, [setMediaPercentageElapsed]);
+  }, [setMediaPercentageElapsed, videoRef]);
 
   React.useEffect(() => {
     (requestRef.current as any) = requestAnimationFrame(updateTime);
-    return () => cancelAnimationFrame(requestRef.current as any);
+    const curr = requestRef.current;
+    return () => cancelAnimationFrame(curr as any);
   }, [updateTime]);
 
   return (
-    <video width="800" height="600" controls autoPlay id="media" ref={videoRef}>
+    <video
+      width="800"
+      height="600"
+      controls
+      autoPlay
+      id="media"
+      ref={videoRef}
+      style={{ display: currentScene === "media" ? "block" : "none" }}
+    >
       <source src={test} />
     </video>
   );

src/components/MediaScene/Selectables/LeftSide.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from "react";
-import TriangularPrism from "./TriangularPrism";
-import Cube from "./Cube";
+import React from "react";
+import TriangularPrism from "./LeftSide/TriangularPrism";
+import Cube from "./LeftSide/Cube";
 
 type LeftSideProps = {
-  activeMediaElement: string;
+  activeMediaComponent: string;
 };
 
 export type ShapeProps = {
@@ -13,11 +13,11 @@ export type ShapeProps = {
 };
 
 const LeftSide = (props: LeftSideProps) => {
-  const cubesActive = props.activeMediaElement === "exit";
-  const trianglesActive = props.activeMediaElement === "play";
+  const cubesActive = props.activeMediaComponent === "exit";
+  const trianglesActive = props.activeMediaComponent === "play";
 
   return (
-    <>
+    <group position={[0, 0, -3]}>
       <Cube position={[-2.7, -1.6, 0.6]} active={cubesActive} />
       <TriangularPrism position={[-3.5, -1.6, 0.6]} active={!trianglesActive} />
       <Cube position={[-3.5, -0.9, 0.6]} active={cubesActive} />
@@ -36,7 +36,7 @@ const LeftSide = (props: LeftSideProps) => {
         active={trianglesActive}
         selectable={true}
       />
-    </>
+    </group>
   );
 };
 

src/components/MediaScene/Selectables/LeftSide/Cube.tsx

@@ -3,7 +3,7 @@ import * as THREE from "three";
 import grayTextureFile from "../../../../static/sprite/gray_box.png";
 import darkGrayTextureFile from "../../../../static/sprite/dark_gray_box.png";
 import React, { useRef } from "react";
-import { ShapeProps } from "./LeftSide";
+import { ShapeProps } from "../LeftSide";
 
 const Cube = (props: ShapeProps) => {
   const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);

src/components/MediaScene/Selectables/LeftSide/TriangularPrism.tsx

@@ -3,7 +3,7 @@ import * as THREE from "three";
 import grayTextureFile from "../../../../static/sprite/gray_box.png";
 import darkGrayTextureFile from "../../../../static/sprite/dark_gray_box.png";
 import React, { useRef } from "react";
-import { ShapeProps } from "./LeftSide";
+import { ShapeProps } from "../LeftSide";
 
 const TriangularPrism = (props: ShapeProps) => {
   const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);

src/components/MediaScene/Selectables/RightSide.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useMemo } from "react";
-import { useMediaWordStore } from "../../../../store";
-import Word from "./Word";
+import { useMediaWordStore } from "../../../store";
+import Word from "./RightSide/Word";
 import { useSpring, a } from "@react-spring/three";
 import * as THREE from "three";
 
 type RightSideProps = {
-  activeMediaElement: string;
+  activeMediaComponent: string;
 };
 
 const RightSide = (props: RightSideProps) => {
@@ -50,7 +50,7 @@ const RightSide = (props: RightSideProps) => {
   );
 
   return (
-    <>
+    <group position={[0, 0, -3]}>
       <a.group
         position-x={wordPositionStateSpring.crossPosX}
         position-y={wordPositionStateSpring.crossPosY}
@@ -78,21 +78,21 @@ const RightSide = (props: RightSideProps) => {
         word={words[0]}
         posX={wordPositionStateSpring.fstWordPosX}
         posY={wordPositionStateSpring.fstWordPosY}
-        active={props.activeMediaElement === "fstWord"}
+        active={props.activeMediaComponent === "fstWord"}
       />
       <Word
         word={words[1]}
         posX={wordPositionStateSpring.sndWordPosX}
         posY={wordPositionStateSpring.sndWordPosY}
-        active={props.activeMediaElement === "sndWord"}
+        active={props.activeMediaComponent === "sndWord"}
       />
       <Word
         word={words[2]}
         posX={wordPositionStateSpring.thirdWordPosX}
         posY={wordPositionStateSpring.thirdWordPosY}
-        active={props.activeMediaElement === "thirdWord"}
+        active={props.activeMediaComponent === "thirdWord"}
       />
-    </>
+    </group>
   );
 };
 

src/components/StateManagers/EventManager.tsx

@@ -1,15 +1,18 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import SiteManager from "./MainScene/SiteManager";
 import MiddleRingManager from "./MainScene/MiddleRingManager";
 import LainManager from "./MainScene/LainManager";
 import BlueOrbManager from "./MainScene/BlueOrbManager";
 import BlueOrbHUDManager from "./MainScene/BlueOrbHUDManager";
 import MainYellowTextManager from "./MainScene/MainYellowTextManager";
-import { useBlueOrbStore, useMediaStore } from "../../store";
+import { useBlueOrbStore, useMediaStore, useSceneStore } from "../../store";
 import GreenTextManager from "./MainScene/GreenTextManager";
-import ActiveMediaElementManager from "./MediaScene/ActiveMediaElementManager";
+import MediaComponentManager from "./MediaScene/MediaComponentManager";
 import WordManager from "./MediaScene/WordManager";
 import MediaYellowTextManager from "./MediaScene/MediaYellowTextManager";
+import MediaElementManager from "./MediaScene/MediaElementManager";
+import SceneManager from "./SceneManager";
+import ImageManager from "./MediaScene/ImageManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -17,7 +20,7 @@ const getKeyCodeAssociation = (keyCode: number): string => {
     37: "left", // left arrow
     38: "up", // up arrow
     39: "right", // right arrow
-    88: "pick", // x key
+    88: "select", // x key
   };
   return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
 };
@@ -26,13 +29,24 @@ export type StateManagerProps = {
   eventState: string;
 };
 
-const EventStateManager = () => {
+const EventManager = () => {
   const [eventState, setEventState] = useState<string>();
-  const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
-  const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
+  const activeBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
+  const activeMediaComponent = useMediaStore(
+    (state) => state.activeMediaComponent
+  );
+  const currentScene = useSceneStore((state) => state.currentScene);
 
   const [inputCooldown, setInputCooldown] = useState(false);
 
+  const sceneEventKey = useMemo(() => {
+    const keys = {
+      main: activeBlueOrb,
+      media: activeMediaComponent,
+    };
+    return keys[currentScene as keyof typeof keys];
+  }, [activeBlueOrb, activeMediaComponent, currentScene]);
+
   const handleKeyPress = useCallback(
     (event) => {
       const { keyCode } = event;
@@ -46,11 +60,11 @@ const EventStateManager = () => {
         // from blue_orb_directions.json file.
         // const eventId = `${activeBlueOrb}_${keyPress}`;
         //
-        const eventId = `${activeBlueOrb}_${keyPress}`;
+        const eventId = `${sceneEventKey}_${keyPress}`;
         setEventState(eventId);
       }
     },
-    [inputCooldown, activeBlueOrb, activeMediaElement]
+    [inputCooldown, sceneEventKey]
   );
 
   useEffect(() => {
@@ -70,11 +84,14 @@ const EventStateManager = () => {
       <SiteManager eventState={eventState!} />
       <LainManager eventState={eventState!} />
       <MiddleRingManager eventState={eventState!} />
-      <ActiveMediaElementManager eventState={eventState!} />
+      <MediaComponentManager eventState={eventState!} />
       <WordManager eventState={eventState!} />
       <MediaYellowTextManager eventState={eventState!} />
+      <MediaElementManager eventState={eventState!} />
+      <SceneManager eventState={eventState!} />
+      <ImageManager eventState={eventState!} />
     </>
   );
 };
 
-export default EventStateManager;
+export default EventManager;

src/components/StateManagers/MainScene/BlueOrbHUDManager.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from "react";
 import { useBlueOrbStore } from "../../../store";
 import blue_orb_directions from "../../../resources/blue_orb_directions.json";
-import { StateManagerProps } from "../EventStateManager";
+import { StateManagerProps } from "../EventManager";
 
 const BlueOrbHUDManager = (props: StateManagerProps) => {
   const setActiveBlueOrbHudId = useBlueOrbStore(
@@ -12,27 +12,27 @@ const BlueOrbHUDManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string, targetBlueOrbHudId: string) => {
       const dispatcherObjects = {
-        moveUp: {
+        move_up: {
           action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 3903.704,
         },
-        moveDown: {
+        move_down: {
           action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 3903.704,
         },
-        moveLeft: {
+        move_left: {
           action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 3903.704,
         },
-        moveRight: {
+        move_right: {
           action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 3903.704,
         },
-        changeBlueOrbFocus: {
+        change_blue_orb: {
           action: setActiveBlueOrbHudId,
           value: targetBlueOrbHudId,
           actionDelay: 500,

src/components/StateManagers/MainScene/BlueOrbManager.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from "react";
 import { useBlueOrbStore } from "../../../store";
 import blue_orb_directions from "../../../resources/blue_orb_directions.json";
-import { StateManagerProps } from "../EventStateManager";
+import { StateManagerProps } from "../EventManager";
 
 type SetActiveBlueOrb = (value: string) => void;
 type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
@@ -13,12 +13,12 @@ type BlueOrbDispatchData = {
 };
 
 type BlueOrbDispatcher = {
-  moveUp: BlueOrbDispatchData;
-  moveDown: BlueOrbDispatchData;
-  moveLeft: BlueOrbDispatchData;
-  moveRight: BlueOrbDispatchData;
-  changeBlueOrbFocus: BlueOrbDispatchData;
-  pickActiveBlueOrb: BlueOrbDispatchData;
+  move_up: BlueOrbDispatchData;
+  move_down: BlueOrbDispatchData;
+  move_left: BlueOrbDispatchData;
+  move_right: BlueOrbDispatchData;
+  change_blue_orb: BlueOrbDispatchData;
+  select_blue_orb: BlueOrbDispatchData;
 };
 
 const BlueOrbManager = (props: StateManagerProps) => {
@@ -72,32 +72,32 @@ const BlueOrbManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string, targetBlueOrbId: string) => {
       const dispatcherObjects: BlueOrbDispatcher = {
-        moveUp: {
+        move_up: {
           action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 3903.704,
         },
-        moveDown: {
+        move_down: {
           action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 3903.704,
         },
-        moveLeft: {
+        move_left: {
           action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 3903.704,
         },
-        moveRight: {
+        move_right: {
           action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 3903.704,
         },
-        changeBlueOrbFocus: {
+        change_blue_orb: {
           action: setActiveBlueOrb,
           value: targetBlueOrbId,
           actionDelay: 0,
         },
-        pickActiveBlueOrb: {
+        select_blue_orb: {
           action: animateActiveBlueOrbThrow,
           value: true,
           actionDelay: 0,

src/components/StateManagers/MainScene/GreenTextManager.tsx

@@ -2,51 +2,67 @@ import React, { useCallback, useEffect } from "react";
 import { useTextRendererStore } from "../../../store";
 import blue_orb_directions from "../../../resources/blue_orb_directions.json";
 import site_a from "../../../resources/site_a.json";
-import { StateManagerProps } from "../EventStateManager";
+import { StateManagerProps } from "../EventManager";
+import blue_orb_huds from "../../../resources/blue_orb_huds.json";
 
 const GreenTextManager = (props: StateManagerProps) => {
   const setGreenText = useTextRendererStore((state) => state.setGreenText);
+  const setGreenTextPosY = useTextRendererStore(
+    (state) => state.setGreenTextPosY
+  );
+  const setGreenTextPosX = useTextRendererStore(
+    (state) => state.setGreenTextPosX
+  );
   const toggleGreenText = useTextRendererStore(
     (state) => state.toggleGreenText
   );
 
   const toggleAndSetGreenText = useCallback(
-    (targetBlueOrbId: string, delay: number) => {
+    (targetBlueOrbId: string, targetBlueOrbHudId: string, delay: number) => {
       const targetGreenText =
         site_a[targetBlueOrbId as keyof typeof site_a].green_text;
 
+      const targetGreenTextPosData =
+        blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds]
+          .medium_text;
+
       toggleGreenText();
 
       setTimeout(() => {
+        setGreenTextPosX({
+          initial: targetGreenTextPosData.initial_position[0],
+          final: targetGreenTextPosData.position[0],
+        });
+        setGreenTextPosY(targetGreenTextPosData.position[1]);
         setGreenText(targetGreenText);
         toggleGreenText();
       }, delay);
     },
-    [setGreenText, toggleGreenText]
+    [setGreenText, setGreenTextPosX, setGreenTextPosY, toggleGreenText]
   );
 
   const dispatchObject = useCallback(
-    (event: string, targetBlueOrbId: string) => {
+    (event: string, targetBlueOrbId: string, targetBlueOrbHudId: string) => {
       const dispatcherObjects = {
-        moveUp: {
+        move_up: {
           action: toggleAndSetGreenText,
-          value: [targetBlueOrbId, 3903.704],
+          value: [targetBlueOrbId, targetBlueOrbHudId, 3903.704],
         },
-        moveDown: {
+        move_down: {
           action: toggleAndSetGreenText,
-          value: [targetBlueOrbId, 3903.704],
+          value: [targetBlueOrbId, targetBlueOrbHudId, 3903.704],
         },
-        moveLeft: {
+        move_left: {
           action: toggleAndSetGreenText,
-          value: [targetBlueOrbId, 3903.704],
+          value: [targetBlueOrbId, targetBlueOrbHudId, 3903.704],
         },
-        moveRight: {
+        move_right: {
           action: toggleAndSetGreenText,
-          value: [targetBlueOrbId, 3903.704],
+          value: [targetBlueOrbId, targetBlueOrbHudId, 3903.704],
         },
-        changeBlueOrbFocus: {
+        change_blue_orb: {
           action: toggleAndSetGreenText,
-          value: [targetBlueOrbId, 500],
+          value: [targetBlueOrbId, targetBlueOrbHudId, 500],
         },
       };
 
@@ -65,8 +81,13 @@ const GreenTextManager = (props: StateManagerProps) => {
       if (eventObject) {
         const eventAction = eventObject.action;
         const targetBlueOrbId = eventObject.target_blue_orb_id;
+        const targetBlueOrbHudId = eventObject.target_hud_id;
 
-        const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId);
+        const dispatchedObject = dispatchObject(
+          eventAction,
+          targetBlueOrbId,
+          targetBlueOrbHudId
+        );
 
         if (dispatchedObject) {
           dispatchedObject.action.apply(null, dispatchedObject.value as any);

src/components/StateManagers/MainScene/LainManager.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect } from "react";
 import { useLainStore } from "../../../store";
 import blue_orb_directions from "../../../resources/blue_orb_directions.json";
-import { StateManagerProps } from "../EventStateManager";
+import { StateManagerProps } from "../EventManager";
 
 const LainManager = (props: StateManagerProps) => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
@@ -9,27 +9,27 @@ const LainManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string) => {
       const dispatcherObjects = {
-        moveUp: {
+        move_up: {
           action: setLainMoveState,
-          value: "moveUp",
+          value: "move_up",
           duration: 3904.704,
         },
-        moveDown: {
+        move_down: {
           action: setLainMoveState,
-          value: "moveDown",
+          value: "move_down",
           duration: 3904.704,
         },
-        moveLeft: {
+        move_left: {
           action: setLainMoveState,
-          value: "moveLeft",
+          value: "move_left",
           duration: 3904.704,
         },
-        moveRight: {
+        move_right: {
           action: setLainMoveState,
-          value: "moveRight",
+          value: "move_right",
           duration: 3904.704,
         },
-        pickActiveBlueOrb: {
+        select_blue_orb: {
           action: setLainMoveState,
           value: "throwBlueOrb",
           duration: 3904.704,

src/components/StateManagers/MainScene/MainYellowTextManager.tsx

@@ -21,11 +21,11 @@ type YellowTextDispatchData = {
 };
 
 type YellowTextDispatcher = {
-  moveUp: YellowTextDispatchData;
-  moveDown: YellowTextDispatchData;
-  moveLeft: YellowTextDispatchData;
-  moveRight: YellowTextDispatchData;
-  changeBlueOrbFocus: YellowTextDispatchData;
+  move_up: YellowTextDispatchData;
+  move_down: YellowTextDispatchData;
+  move_left: YellowTextDispatchData;
+  move_right: YellowTextDispatchData;
+  change_blue_orb: YellowTextDispatchData;
 };
 
 const MainYellowTextManager = (props: any) => {
@@ -132,23 +132,23 @@ const MainYellowTextManager = (props: any) => {
       targetBlueOrbId: string | undefined
     ) => {
       const dispatcherObjects: YellowTextDispatcher = {
-        moveUp: {
+        move_up: {
           action: animateYellowTextWithMove,
           value: [-1.5, targetBlueOrbHudId, targetBlueOrbId],
         },
-        moveDown: {
+        move_down: {
           action: animateYellowTextWithMove,
           value: [1.5, targetBlueOrbHudId, targetBlueOrbId],
         },
-        moveLeft: {
+        move_left: {
           action: animateYellowTextWithMove,
           value: [targetBlueOrbHudId, targetBlueOrbId],
         },
-        moveRight: {
+        move_right: {
           action: animateYellowTextWithMove,
           value: [targetBlueOrbHudId, targetBlueOrbId],
         },
-        changeBlueOrbFocus: {
+        change_blue_orb: {
           action: animateYellowTextWithoutMove,
           value: [targetBlueOrbHudId, targetBlueOrbId],
         },

src/components/StateManagers/MainScene/MiddleRingManager.tsx

@@ -180,10 +180,10 @@ const MiddleRingManager = (props: any) => {
 
   const dispatcherObjects = useMemo(
     () => ({
-      moveUp: { action: moveMiddleRingUp },
-      moveDown: { action: moveMiddleRingDown },
-      moveLeft: { action: rotateMiddleRingLeft },
-      moveRight: { action: rotateMiddleRingRight },
+      move_up: { action: moveMiddleRingUp },
+      move_down: { action: moveMiddleRingDown },
+      move_left: { action: rotateMiddleRingLeft },
+      move_right: { action: rotateMiddleRingRight },
     }),
     [
       moveMiddleRingDown,

src/components/StateManagers/MainScene/SiteManager.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from "react";
 import { useSiteStore } from "../../../store";
 import blue_orb_directions from "../../../resources/blue_orb_directions.json";
-import { StateManagerProps } from "../EventStateManager";
+import { StateManagerProps } from "../EventManager";
 
 const SiteManager = (props: StateManagerProps) => {
   const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
@@ -10,14 +10,14 @@ const SiteManager = (props: StateManagerProps) => {
 
   const dispatcherObjects = useMemo(
     () => ({
-      moveUp: { action: incrementSitePosY, value: -1.5, actionDelay: 1300 },
-      moveDown: { action: incrementSitePosY, value: 1.5, actionDelay: 1300 },
-      moveLeft: {
+      move_up: { action: incrementSitePosY, value: -1.5, actionDelay: 1300 },
+      move_down: { action: incrementSitePosY, value: 1.5, actionDelay: 1300 },
+      move_left: {
         action: incrementSiteRotY,
         value: Math.PI / 4,
         actionDelay: 1100,
       },
-      moveRight: {
+      move_right: {
         action: incrementSiteRotY,
         value: -Math.PI / 4,
         actionDelay: 1100,

src/components/StateManagers/MediaScene/ImageManager.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback, useEffect } from "react";
+import image_table from "../../../resources/image_table.json";
+import site_a from "../../../resources/site_a.json";
+import { StateManagerProps } from "../EventManager";
+import blue_orb_directions from "../../../resources/blue_orb_directions.json";
+import sex from "../../../static/media_images/site_a/[9]Lda024-0.png";
+import { useImageStore } from "../../../store";
+
+const ImageManager = (props: StateManagerProps) => {
+  const setImg = useImageStore((state) => state.img);
+  const setImages = useCallback(
+    (targetBlueOrbId: string) => {
+      //const node_name = site_a[targetBlueOrbId as keyof typeof site_a].node_name;
+      const images = image_table["Lda024" as keyof typeof image_table];
+
+      const p = require("../../../static/media_images/site_a/[9]Lda024-0.png");
+      import(p).then((image) => {
+        setImg(image);
+      });
+      console.log(sex)
+    },
+    [setImg]
+  );
+  const dispatchObject = useCallback(
+    (event: string, targetBlueOrbId: string) => {
+      const dispatcherObjects = {
+        play_select: { action: setImages, value: targetBlueOrbId },
+      };
+
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [setImages]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventObject =
+        blue_orb_directions[
+          props.eventState as keyof typeof blue_orb_directions
+        ];
+
+      console.log(eventObject);
+      const targetBlueOrbId = "";
+
+      const dispatchedObject = dispatchObject(
+        props.eventState,
+        targetBlueOrbId
+      );
+
+      if (dispatchedObject) {
+        dispatchedObject.action(dispatchedObject.value);
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default ImageManager;

src/components/StateManagers/MediaScene/MediaComponentManager.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect } from "react";
-import { StateManagerProps } from "../EventStateManager";
+import { StateManagerProps } from "../EventManager";
 import { useMediaStore } from "../../../store";
 
-const ActiveMediaElementManager = (props: StateManagerProps) => {
-  const setActiveMediaElement = useMediaStore(
-    (state) => state.setActiveMediaElement
+const MediaComponentManager = (props: StateManagerProps) => {
+  const setActiveMediaComponent = useMediaStore(
+    (state) => state.setActiveMediaComponent
   );
 
   const setLastActiveLeftSideElement = useMediaStore(
@@ -22,26 +22,26 @@ const ActiveMediaElementManager = (props: StateManagerProps) => {
 
   const switchToLeftSide = useCallback(
     (from: string) => {
-      setActiveMediaElement(lastActiveLeftSideElement);
+      setActiveMediaComponent(lastActiveLeftSideElement);
       // store last active right side elem
       setLastActiveRightSideElement(from);
     },
     [
       lastActiveLeftSideElement,
-      setActiveMediaElement,
+      setActiveMediaComponent,
       setLastActiveRightSideElement,
     ]
   );
 
   const switchToRightSide = useCallback(
     (from: string) => {
-      setActiveMediaElement(lastActiveRightSideElement);
+      setActiveMediaComponent(lastActiveRightSideElement);
       // store last active left side elem
       setLastActiveLeftSideElement(from);
     },
     [
       lastActiveRightSideElement,
-      setActiveMediaElement,
+      setActiveMediaComponent,
       setLastActiveLeftSideElement,
     ]
   );
@@ -49,8 +49,8 @@ const ActiveMediaElementManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string) => {
       const dispatcherObjects = {
-        play_down: { action: setActiveMediaElement, value: "exit" },
-        exit_up: { action: setActiveMediaElement, value: "play" },
+        play_down: { action: setActiveMediaComponent, value: "exit" },
+        exit_up: { action: setActiveMediaComponent, value: "play" },
         play_right: {
           action: switchToRightSide,
           value: "play",
@@ -64,19 +64,19 @@ const ActiveMediaElementManager = (props: StateManagerProps) => {
           value: "fstWord",
         },
         fstWord_up: {
-          action: setActiveMediaElement,
+          action: setActiveMediaComponent,
           value: "thirdWord"
         },
         fstWord_down: {
-          action: setActiveMediaElement,
+          action: setActiveMediaComponent,
           value: "sndWord",
         },
         sndWord_up: {
-          action: setActiveMediaElement,
+          action: setActiveMediaComponent,
           value: "fstWord",
         },
         sndWord_down: {
-          action: setActiveMediaElement,
+          action: setActiveMediaComponent,
           value: "thirdWord",
         },
         sndWord_left: {
@@ -84,11 +84,11 @@ const ActiveMediaElementManager = (props: StateManagerProps) => {
           value: "sndWord"
         },
         thirdWord_down: {
-          action: setActiveMediaElement,
+          action: setActiveMediaComponent,
           value: "fstWord",
         },
         thirdWord_up: {
-          action: setActiveMediaElement,
+          action: setActiveMediaComponent,
           value: "sndWord",
         },
         thirdWord_left: {
@@ -99,7 +99,7 @@ const ActiveMediaElementManager = (props: StateManagerProps) => {
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [setActiveMediaElement, switchToLeftSide, switchToRightSide]
+    [setActiveMediaComponent, switchToLeftSide, switchToRightSide]
   );
 
   useEffect(() => {
@@ -115,4 +115,4 @@ const ActiveMediaElementManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default ActiveMediaElementManager;
+export default MediaComponentManager;

src/components/StateManagers/MediaScene/MediaElementManager.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback, useEffect } from "react";
+
+import { StateManagerProps } from "../EventManager";
+
+const MediaComponentManager = (props: StateManagerProps) => {
+  const playMedia = useCallback(() => {
+    const mediaElement = document.getElementById("media") as HTMLMediaElement;
+    // if (mediaElement) mediaElement.play().then((r) => console.log(r));
+  }, []);
+
+  const dispatchObject = useCallback(
+    (event: string) => {
+      const dispatcherObjects = {
+        play_select: { action: playMedia },
+      };
+
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [playMedia]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const dispatchedObject = dispatchObject(props.eventState);
+
+      if (dispatchedObject) {
+        dispatchedObject.action();
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default MediaComponentManager;

src/components/StateManagers/MediaScene/MediaYellowTextManager.tsx

@@ -31,17 +31,17 @@ const MediaYellowTextManager = (props: any) => {
   );
 
   const animateMediaYellowText: AnimateMediaYellowText = useCallback(
-    (targetMediaElementText: string, targetMediaElementTextPos: number[]) => {
+    (targetMediaComponentText: string, targetMediaComponentTextPos: number[]) => {
       // make current text shrink
       setYellowTextOffsetXCoeff(-1);
 
       setTimeout(() => {
-        setYellowTextPosX(targetMediaElementTextPos[0]);
-        setYellowTextPosY(targetMediaElementTextPos[1]);
+        setYellowTextPosX(targetMediaComponentTextPos[0]);
+        setYellowTextPosY(targetMediaComponentTextPos[1]);
       }, 400);
 
       setTimeout(() => {
-        setYellowText(targetMediaElementText);
+        setYellowText(targetMediaComponentText);
       }, 1000);
 
       setTimeout(() => {

src/components/StateManagers/MediaScene/WordManager.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from "react";
-import { StateManagerProps } from "../EventStateManager";
+import { StateManagerProps } from "../EventManager";
 import { useMediaWordStore } from "../../../store";
 
 const WordManager = (props: StateManagerProps) => {

src/components/StateManagers/SceneManager.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback, useEffect } from "react";
+import { StateManagerProps } from "./EventManager";
+import blue_orb_directions from "../../resources/blue_orb_directions.json";
+import { useSceneStore } from "../../store";
+
+const SceneManager = (props: StateManagerProps) => {
+  const setScene = useSceneStore((state) => state.setScene);
+
+  const dispatchObject = useCallback((event: string) => {
+    const dispatcherObjects = {
+      select_blue_orb: {
+        action: setScene,
+        value: "media",
+        delay: 3904.704,
+      },
+    };
+    return dispatcherObjects[event as keyof typeof dispatcherObjects];
+  }, [setScene]);
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventObject =
+        blue_orb_directions[
+          props.eventState as keyof typeof blue_orb_directions
+        ];
+
+      if (eventObject) {
+        const eventAction = eventObject.action;
+        const dispatchedObject = dispatchObject(eventAction);
+
+        if (dispatchedObject) {
+          setTimeout(() => {
+            dispatchedObject.action(dispatchedObject.value);
+          }, dispatchedObject.delay);
+        }
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default SceneManager;

src/components/TextRenderer/BigLetter.tsx

@@ -2,7 +2,7 @@ import orangeFont from "../../static/sprite/orange_font_texture.png";
 import yellowFont from "../../static/sprite/yellow_font_texture.png";
 import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
-import orange_font_json from "../../resources/big_font.json";
+import orange_font_json from "../../resources/font_data/big_font.json";
 import { a, useSpring } from "@react-spring/three";
 import React, { useMemo } from "react";
 import { LetterProps } from "./TextRenderer";

src/components/TextRenderer/MediumLetter.tsx

@@ -3,7 +3,7 @@ import yellowFont from "../../static/sprite/yellow_font_texture.png";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import greenFont from "../../static/sprite/white_and_green_texture.png";
-import medium_font_json from "../../resources/medium_font.json";
+import medium_font_json from "../../resources/font_data/medium_font.json";
 import { a } from "@react-spring/three";
 import React, { useMemo } from "react";
 import { LetterProps } from "./TextRenderer";

src/components/TextRenderer/TextRenderer.tsx

@@ -1,13 +1,8 @@
 import { a, useSpring, useTrail } from "@react-spring/three";
 import React, { useMemo } from "react";
-import {
-  useBlueOrbStore,
-  useSiteStore,
-  useTextRendererStore,
-} from "../../store";
+import { useSiteStore, useTextRendererStore } from "../../store";
 import BigLetter from "./BigLetter";
 import MediumLetter from "./MediumLetter";
-import blue_orb_huds from "../../resources/blue_orb_huds.json";
 
 export type LetterProps = {
   color: string;
@@ -44,15 +39,13 @@ const TextRenderer = () => {
   // ==================================== GREEN TEXT ============================================
 
   const greenText = useTextRendererStore((state) => state.greenText);
+  const greenTextPosY = useTextRendererStore((state) => state.greenTextPosY);
+  const greenTextPosXObj = useTextRendererStore((state) => state.greenTextPosX);
   const greenTextArr = useMemo(() => greenText.split(""), [greenText]);
   const greenTextActive = useTextRendererStore(
     (state) => state.greenTextActive
   );
 
-  // instead of setting this part of state directly, green text reads off of the json file.
-  const currentHudId = useBlueOrbStore((state) => state.hudId);
-  const currentHud = blue_orb_huds[currentHudId as keyof typeof blue_orb_huds];
-
   const { greenTextPosXToggle } = useSpring({
     greenTextPosXToggle: greenTextActive,
     config: { duration: 500 },
@@ -60,14 +53,11 @@ const TextRenderer = () => {
 
   const greenTextPosX = greenTextPosXToggle.to(
     [0, 1],
-    [
-      currentHud.medium_text.initial_position[0],
-      currentHud.medium_text.position[0],
-    ]
+    [greenTextPosXObj.initial, greenTextPosXObj.final]
   );
 
   return (
-    <>
+    <group position={[0, 0, 10]}>
       {isSiteChangingY
         ? yellowTextArr.map((letter, idx) => (
             <a.group
@@ -108,7 +98,7 @@ const TextRenderer = () => {
 
       <a.group
         position-x={greenTextPosX}
-        position-y={currentHud["medium_text"]["position"][1]}
+        position-y={greenTextPosY}
         position-z={-8.7}
         scale={[0.02, 0.035, 0.02]}
       >
@@ -121,7 +111,7 @@ const TextRenderer = () => {
           />
         ))}
       </a.group>
-    </>
+    </group>
   );
 };
 

src/resources/blue_orb_directions.json

@@ -1,76 +1,76 @@
 {
   "0422_down": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0414",
     "target_hud_id": "fg_hud_2"
   },
   "0422_right": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0417",
     "target_hud_id": "bg_hud_1"
   },
   "0422_up": {
-    "action": "moveUp",
+    "action": "move_up",
     "target_blue_orb_id": "0506",
     "target_hud_id": "fg_hud_3"
   },
-  "0422_pick": {
-    "action": "pickActiveBlueOrb",
+  "0422_select": {
+    "action": "select_blue_orb",
     "target_blue_orb_id": "0422",
     "target_hud_id": "fg_hud_1"
   },
 
   "0414_up": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0422",
     "target_hud_id": "fg_hud_1"
   },
   "0414_right": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0417",
     "target_hud_id": "bg_hud_1"
   },
 
   "0413_down": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0405",
     "target_hud_id": "fg_hud_6"
   },
   "0413_left": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0417",
     "target_hud_id": "bg_hud_1"
   },
 
   "0405_left": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0417",
     "target_hud_id": "bg_hud_1"
   },
   "0405_up": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0413",
     "target_hud_id": "fg_hud_5"
   },
 
   "0417_left": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0422",
     "target_hud_id": "fg_hud_1"
   },
   "0417_down": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0414",
     "target_hud_id": "fg_hud_2"
   },
   "0417_right": {
-    "action": "changeBlueOrbFocus",
+    "action": "change_blue_orb",
     "target_blue_orb_id": "0413",
     "target_hud_id": "fg_hud_5"
   },
 
   "0506_down": {
-    "action": "moveDown",
+    "action": "move_down",
     "target_blue_orb_id": "0422",
     "target_hud_id": "fg_hud_1"
   }

src/resources/string_table.json

@@ -0,0 +1,470 @@
+{
+  "0": "electric wire",
+  "1": "sky",
+  "10": "chaos",
+  "100": "aggression",
+  "101": "decision ",
+  "102": "mind",
+  "103": "murder intent",
+  "104": "suicide",
+  "105": "necessity",
+  "107": "utilization",
+  "107": "obstacle",
+  "108": "be frightened",
+  "109": "birth",
+  "11": "prompt",
+  "110": "room",
+  "111": "never realize",
+  "112": "absent",
+  "113": "self-confidence",
+  "114": "absorption",
+  "115": "trance",
+  "116": "soothing",
+  "117": "primacy",
+  "118": "vain person",
+  "119": "impulse",
+  "12": "indifference",
+  "120": "useless",
+  "121": "will&existence",
+  "122": "lower half",
+  "123": "wish",
+  "124": "transfer",
+  "125": "open the nExt.",
+  "126": "black tea",
+  "127": "milk",
+  "128": "dislike",
+  "129": "consultation",
+  "13": "human being",
+  "130": "boast",
+  "131": "advice",
+  "132": "desire",
+  "133": "investigation",
+  "134": "relax",
+  "135": "friend",
+  "136": "secret",
+  "137": "doll",
+  "138": "be tired",
+  "139": "study",
+  "14": "noise",
+  "140": "worry",
+  "141": "melancholy",
+  "142": "sLf-persecution",
+  "143": "imagination",
+  "144": "understanding",
+  "145": "impossible",
+  "146": "laboratory",
+  "147": "danger",
+  "148": "A.hallucination",
+  "149": "sensitivity",
+  "15": "duty",
+  "150": "needless",
+  "151": "diary",
+  "152": "complaint",
+  "153": "ego",
+  "154": "special",
+  "155": "elusion",
+  "156": "deny",
+  "157": "fiction",
+  "158": "intrapsychic",
+  "159": "apology",
+  "16": "school",
+  "160": "glad",
+  "161": "birthday",
+  "162": "present",
+  "163": "eye",
+  "164": "delusion",
+  "165": "illness",
+  "166": "counselor",
+  "167": "hallucination",
+  "168": "stress",
+  "169": "normal",
+  "17": "silence",
+  "170": "favorable turn",
+  "171": "deterioration",
+  "172": "engagement",
+  "173": "drunk",
+  "174": "hairstyle",
+  "175": "charm",
+  "176": "seem ",
+  "177": "image",
+  "178": "explanation",
+  "179": "research",
+  "18": "smile",
+  "180": "remembrance",
+  "181": "retrieval",
+  "182": "resignation",
+  "183": "happiness",
+  "184": "identification",
+  "185": "experience",
+  "186": "misato",
+  "187": "idolize",
+  "188": "alienation",
+  "189": "missing self",
+  "19": "character",
+  "190": "immature",
+  "191": "sleepless",
+  "192": "function",
+  "193": "odd jobs",
+  "194": "treatise",
+  "195": "father",
+  "196": "existence",
+  "197": "proof",
+  "198": "fact",
+  "199": "private tutor",
+  "2": "recognition",
+  "20": "sanity",
+  "200": "kaori",
+  "201": "love",
+  "202": "area",
+  "203": "God",
+  "204": "rumor",
+  "205": "doubt",
+  "206": "lonely",
+  "207": "client",
+  "208": "family",
+  "209": "no problem",
+  "21": "home page",
+  "210": "negative",
+  "211": "impression",
+  "212": "symptom",
+  "213": "game",
+  "214": "complex",
+  "215": "pupil",
+  "216": "conflict",
+  "217": "hatred                 ",
+  "218": "purpose",
+  "219": "mother",
+  "22": "computer",
+  "220": "distrust",
+  "221": "faith",
+  "222": "interest",
+  "223": "object",
+  "224": "longing",
+  "225": "cheerful",
+  "226": "Dr.takashima",
+  "227": "harassment",
+  "228": "chief of bureau",
+  "229": "classmate",
+  "23": "psychomotor",
+  "230": "problem",
+  "231": "neutrality",
+  "232": "charge",
+  "233": "restoration",
+  "234": "ethics",
+  "235": "lead",
+  "236": "hysterics",
+  "237": "condition",
+  "238": "amnesia",
+  "239": "self-rating",
+  "24": "exercise",
+  "240": "look good on",
+  "241": "hunch",
+  "242": "tachibana",
+  "243": "answer",
+  "244": "scold",
+  "245": "habit",
+  "246": "glasses",
+  "247": "lover",
+  "248": "confession",
+  "249": "boredom",
+  "25": "be active",
+  "250": "makeup",
+  "251": "common",
+  "252": "wretched",
+  "253": "kyoko",
+  "254": "whereabouts",
+  "255": "distortion",
+  "256": "conversion",
+  "257": "touko",
+  "258": "library",
+  "259": "talk with",
+  "26": "memories",
+  "260": "come in sight",
+  "261": "tomokun",
+  "262": "alright",
+  "263": "boy",
+  "264": "natural",
+  "265": "abnormal",
+  "266": "dream",
+  "267": "anger",
+  "268": "sadness",
+  "269": "cold",
+  "27": "amusing",
+  "270": "cake",
+  "271": "reward",
+  "272": "breast",
+  "273": "sexuality",
+  "274": "note",
+  "275": "think",
+  "276": "prohibition",
+  "277": "souvenir",
+  "278": "unpleasant",
+  "279": "meanness",
+  "28": "recurrence",
+  "280": "solitude",
+  "281": "graduation",
+  "282": "expectation",
+  "283": "middle school",
+  "284": "neglect",
+  "285": "meaning",
+  "286": "NAVI",
+  "287": "network",
+  "288": "telephone",
+  "289": "trouble",
+  "29": "memory",
+  "290": "business trip",
+  "291": "seeing off",
+  "292": "business",
+  "293": "Mr.rabbit",
+  "294": "footprint",
+  "295": "mail",
+  "296": "open",
+  "297": "revenge",
+  "298": "regrettable",
+  "299": "peace of mind",
+  "3": "pretend",
+  "30": "bad atmosphere",
+  "300": "transfiguration",
+  "301": "agree",
+  "302": "extra. lesson",
+  "303": "violin",
+  "304": "together",
+  "305": "monopoly",
+  "306": "painting",
+  "307": "cause",
+  "308": "seek",
+  "309": "mystery",
+  "31": "accept",
+  "310": "delete",
+  "311": "pleasant",
+  "312": "constancy",
+  "313": "cUl.attraction",
+  "314": "motive",
+  "315": "money",
+  "316": "corporation",
+  "317": "awareness",
+  "318": "fall ill",
+  "319": "despair",
+  "32": "admiration",
+  "320": "cO.unconsious",
+  "321": "hesitation",
+  "322": "jealousy",
+  "323": "exchange",
+  "324": "disturbance",
+  "325": "harmful effects",
+  "326": "selfish",
+  "327": "news-group",
+  "328": "man",
+  "329": "woman",
+  "33": "abuse",
+  "330": "anonymous",
+  "331": "naturally",
+  "332": "plagiarism",
+  "333": "agreement",
+  "334": "wait for",
+  "335": "believe",
+  "336": "sorrow",
+  "337": "side",
+  "338": "magazine",
+  "339": "idea",
+  "34": "decision",
+  "340": "regret",
+  "341": "existence cause",
+  "342": "bed",
+  "343": "smell",
+  "344": "wired",
+  "345": "companion",
+  "346": "data",
+  "347": "observation",
+  "348": "address",
+  "349": "illusion",
+  "35": "excuse",
+  "350": "divorce",
+  "351": "hug",
+  "352": "cry",
+  "353": "parting",
+  "354": "weed",
+  "355": "swing",
+  "356": "grudge",
+  "357": "ant",
+  "358": "cracking",
+  "359": "renewal",
+  "36": "knowledge",
+  "360": "contact",
+  "361": "feature",
+  "362": "robot",
+  "363": "limitation",
+  "364": "evolution",
+  "365": "interspersed",
+  "366": "lie",
+  "367": "proto",
+  "368": "misunderstand",
+  "369": "parts",
+  "37": "life",
+  "370": "excitement",
+  "371": "home",
+  "372": "Oh my God.",
+  "373": "bug",
+  "374": "access",
+  "375": "mischief",
+  "376": "permission",
+  "377": "help",
+  "378": "nonsense",
+  "379": "notice",
+  "38": "pursuit",
+  "380": "police",
+  "381": "lain",
+  "382": "painful",
+  "383": "takeshi",
+  "384": "cool",
+  "385": "suppression",
+  "386": "diet",
+  "387": "as it is",
+  "388": "in the future",
+  "389": "care",
+  "39": "anxiety",
+  "390": "farewell",
+  "391": "congratulations",
+  "392": "treasure",
+  "393": "uneasiness",
+  "394": "leave alone",
+  "395": "harumi",
+  "396": "marriage",
+  "397": "kanako",
+  "398": "not satisfied",
+  "399": "sexual",
+  "4": "phenomenon",
+  "40": "intellectual",
+  "400": "unstable",
+  "401": "despise",
+  "402": "flower",
+  "403": "obscenity",
+  "404": "quiet",
+  "405": "lunch",
+  "406": "blessing",
+  "407": "envy",
+  "408": "yoshida",
+  "409": "health imple.",
+  "41": "sCh.avoidance",
+  "410": "point out",
+  "411": "RML",
+  "412": "ring",
+  "413": "control",
+  "414": "prayer",
+  "415": "betrayal",
+  "416": "persuasion",
+  "417": "DATA of CLN01",
+  "418": "authorized_il",
+  "419": "active_file:lv",
+  "42": "apprehension",
+  "420": "ftp/tl.S_server",
+  "421": "DATA of CLN-1",
+  "422": "DATA of CLN00",
+  "423": "101",
+  "424": "COUNSELING_REC.",
+  "425": "downloaded file",
+  "426": "DIAGNOSIS_CLN01",
+  "427": "DIAGNOSIS_CLN00",
+  "428": "RESEARCH_\"Ma\"",
+  "429": "ftp/poa_server",
+  "43": "environment",
+  "430": "NEWS_SHOW",
+  "431": "talking_F#00021",
+  "432": "talking_F#00381",
+  "433": "talking_F#01980",
+  "434": "talking_F#04522",
+  "435": "talking_F#10294",
+  "436": "talking_F#15413",
+  "437": "network_voices?",
+  "438": "anonymous_user",
+  "439": "***unknown",
+  "44": "individuation",
+  "440": "ftp/**%#\"673\"",
+  "441": "ftp/**76%373\"",
+  "442": "ftp/52\"**3\"",
+  "443": "ftp/%2\"53\"",
+  "444": "ftp/006%3",
+  "445": "ftp/*4451%\"",
+  "446": "ftp/789.235\"",
+  "447": "ftp/121.%%0",
+  "448": "ftp/078.123%\"",
+  "449": "ftp/\"\"%#808",
+  "45": "body",
+  "450": "RESEARCH_\"Ky\"",
+  "451": "decoded file:",
+  "452": "ftp/tl.L_server",
+  "453": "RESEARCH_\"Ka\"",
+  "454": "lain's_DIARY",
+  "455": "active_file:",
+  "456": "TOUKO's_DIARY",
+  "457": "decoded file:t",
+  "458": "",
+  "459": "nT APPLICATION",
+  "46": "look back on",
+  "460": "network tool",
+  "461": "changing site",
+  "462": " quarter of GP",
+  "463": "POLY-TAN PARTS",
+  "464": "mT up-date App.",
+  "465": "movie tool",
+  "466": "playing movie",
+  "467": "freeware",
+  "47": "instrument",
+  "48": "feeling",
+  "49": "oral",
+  "5": "state",
+  "50": "world",
+  "51": "psychiatrist",
+  "52": "psychotherapy",
+  "53": "prejudice",
+  "54": "favorite",
+  "55": "Posi_feelings",
+  "56": "difference",
+  "57": "try hard",
+  "58": "program",
+  "59": "counter",
+  "6": "be settled",
+  "60": "trap",
+  "61": "software",
+  "62": "technology",
+  "63": "variety",
+  "64": "record",
+  "65": "expression",
+  "66": "close",
+  "67": "will",
+  "68": "simplicity",
+  "69": "communication",
+  "7": "comparison",
+  "70": "therapy",
+  "71": "psychosis",
+  "72": "trial",
+  "73": "action",
+  "74": "conceal",
+  "75": "copy",
+  "76": "migration",
+  "77": "agent",
+  "78": "factory",
+  "79": "immortality",
+  "8": "position",
+  "80": "possible",
+  "81": "result",
+  "82": "tool",
+  "83": "Nega feelings",
+  "84": "EEG",
+  "85": "manufacture",
+  "86": "joint",
+  "87": "reaction",
+  "88": "compensation",
+  "89": "thought",
+  "9": "moving",
+  "90": "walk through",
+  "91": "patient",
+  "92": "time",
+  "93": "individuality",
+  "94": "greeting",
+  "95": "kind",
+  "96": "elegance",
+  "97": "personality",
+  "98": "regimen",
+  "99": "kill"
+}

src/scenes/Initializers/MediaSceneInitializer.tsx

@@ -0,0 +1,58 @@
+import React, { memo, useEffect, useMemo } from "react";
+import {
+  useBlueOrbStore,
+  useMediaWordStore,
+  useTextRendererStore,
+} from "../../store";
+import site_a from "../../resources/site_a.json";
+import string_table from "../../resources/string_table.json";
+
+const MediaSceneInitializer = memo(() => {
+  const setYellowText = useTextRendererStore((state) => state.setYellowText);
+  const setYellowTextPosX = useTextRendererStore(
+    (state) => state.setYellowTextPosX
+  );
+  const setYellowTextPosY = useTextRendererStore(
+    (state) => state.setYellowTextPosY
+  );
+  const currentBlueOrb = useBlueOrbStore((state) => state.activeBlueOrbId);
+  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 blueOrbData = useMemo(
+    () => site_a[currentBlueOrb as keyof typeof site_a],
+    [currentBlueOrb]
+  );
+
+  useEffect(() => {
+    setGreenText(blueOrbData.node_name);
+    setYellowText("Play");
+    setYellowTextPosX(-0.8);
+    setYellowTextPosY(0.05);
+    setGreenTextPosX({ initial: 0.02, final: 0.02 });
+    setGreenTextPosY(0.675);
+    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],
+    ]);
+  }, [
+    blueOrbData,
+    setGreenText,
+    setGreenTextPosX,
+    setGreenTextPosY,
+    setWords,
+    setYellowText,
+    setYellowTextPosX,
+    setYellowTextPosY,
+  ]);
+  return null;
+});
+
+export default MediaSceneInitializer;

src/scenes/MainScene.tsx

@@ -4,15 +4,15 @@ import React, { Suspense, useEffect } from "react";
 import Site from "../components/MainScene/Site";
 import Lain from "../components/MainScene/Lain";
 import Lights from "../components/MainScene/Lights";
-import OrthoCamera from "../components/MainScene/OrthoCamera";
 import Preloader from "../components/Preloader";
-import EventStateManager from "../components/StateManagers/EventStateManager";
 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 TextRenderer from "../components/TextRenderer/TextRenderer";
+import HUD from "../components/MainScene/HUD";
+import YellowOrb from "../components/MainScene/YellowOrb";
 
 const MainScene = () => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
@@ -54,7 +54,9 @@ const MainScene = () => {
         >
           <Preloader />
           <Site />
-          <OrthoCamera />
+          <HUD />
+          <TextRenderer />
+          <YellowOrb />
           <Starfield />
           <GrayPlanes />
           <Lights />

src/scenes/MediaScene.tsx

@@ -1,29 +1,41 @@
 import React from "react";
 import { useMediaStore } from "../store";
 import TextRenderer from "../components/TextRenderer/TextRenderer";
-import LeftSide from "../components/MediaScene/Selectables/LeftSide/LeftSide";
-import RightSide from "../components/MediaScene/Selectables/RightSide/RightSide";
+import LeftSide from "../components/MediaScene/Selectables/LeftSide";
+import RightSide from "../components/MediaScene/Selectables/RightSide";
 import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
 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";
 
 const MediaScene = () => {
-  const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
+  const activeMediaComponent = useMediaStore(
+    (state) => state.activeMediaComponent
+  );
 
   return (
-    <group position={[0.4, -0.3, 0]}>
-      <pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 3]} />
-      <LeftSide activeMediaElement={activeMediaElement} />
-      <RightSide activeMediaElement={activeMediaElement} />
-      <AudioVisualizer />
-      <group position={[0, 0.5, 0]}>
-        <MediaLoadingBar />
-        <NodeNameContainer />
+    <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} />
+        <AudioVisualizer />
+        <group position={[0, 0.5, -3]}>
+          <MediaLoadingBar />
+          <NodeNameContainer />
+        </group>
+        <group position={[0, 0, 0]}>
+          <TextRenderer />
+        </group>
+        <Lof />
+        <Images />
       </group>
-      <group position={[0, 0, 13]} scale={[1, 1, 1]}>
-        <TextRenderer />
-      </group>
-    </group>
+    </perspectiveCamera>
   );
 };
 

src/store.ts

@@ -1,8 +1,14 @@
 import create from "zustand";
+import { SpriteMaterial } from "three";
+
+type SceneState = {
+  currentScene: string;
+  setScene: (to: string) => void;
+};
 
 type BlueOrbState = {
-  blueOrbId: string;
-  hudId: string;
+  activeBlueOrbId: string;
+  activeHudId: string;
   hudActive: number;
   hudVisible: boolean;
   isActiveBlueOrbInteractedWith: boolean;
@@ -94,13 +100,14 @@ type MediaWordState = {
   }[];
   wordPositionDataStructIdx: number;
   words: string[];
+  setWords: (to: string[]) => void;
   addToWordPositionDataStructIdx: (val: number) => void;
 };
 
 type MediaState = {
   mediaPercentageElapsed: number;
-  activeMediaElement: string;
-  setActiveMediaElement: (to: string) => void;
+  activeMediaComponent: string;
+  setActiveMediaComponent: (to: string) => void;
   lastActiveLeftSideElement: string;
   setLastActiveLeftSideElement: (to: string) => void;
   lastActiveRightSideElement: string;
@@ -118,12 +125,21 @@ type TextRendererState = {
   setYellowTextPosY: (to: number) => void;
   setYellowTextPosX: (to: number) => void;
   setYellowTextOffsetXCoeff: (to: number) => void;
+  greenTextPosY: number;
+  greenTextPosX: { initial: number; final: number };
   greenText: string;
   greenTextActive: number;
+  setGreenTextPosY: (to: number) => void;
+  setGreenTextPosX: (to: { initial: number; final: number }) => void;
   setGreenText: (to: string) => void;
   toggleGreenText: () => void;
 };
 
+type ImageState = {
+  img: any;
+  setImg: (to: any) => void;
+};
+
 export const useTextRendererStore = create<TextRendererState>((set) => ({
   // yellow text
   yellowText: "Play",
@@ -139,15 +155,19 @@ export const useTextRendererStore = create<TextRendererState>((set) => ({
     set(() => ({ yellowTextOffsetXCoeff: to })),
   // green text
   greenText: "TOUKO's DIARY",
+  greenTextPosY: 0,
+  greenTextPosX: { initial: 0, final: 0 },
   greenTextActive: 1,
+  setGreenTextPosY: (to) => set(() => ({ greenTextPosY: to })),
+  setGreenTextPosX: (to) => set({ greenTextPosX: to }),
   setGreenText: (to) => set(() => ({ greenText: to })),
   toggleGreenText: () =>
     set((state) => ({ greenTextActive: Number(!state.greenTextActive) })),
 }));
 
 export const useBlueOrbStore = create<BlueOrbState>((set) => ({
-  blueOrbId: "0422",
-  hudId: "fg_hud_1",
+  activeBlueOrbId: "0422",
+  activeHudId: "fg_hud_1",
   hudActive: 1,
   isActiveBlueOrbInteractedWith: false,
   hudVisible: true,
@@ -157,8 +177,8 @@ export const useBlueOrbStore = create<BlueOrbState>((set) => ({
   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 })),
+  setActiveBlueOrbId: (to) => set(() => ({ activeBlueOrbId: to })),
+  setActiveBlueOrbHudId: (to) => set(() => ({ activeHudId: to })),
   toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
   setIsActiveBlueOrbInteractedWith: (to) =>
     set(() => ({ isActiveBlueOrbInteractedWith: to })),
@@ -240,13 +260,13 @@ export const useLevelStore = create<LevelState>((set) => ({
 }));
 
 export const useMediaStore = create<MediaState>((set) => ({
-  // we can't have one global activeMediaElement because both right and left col
+  // we can't have one global activeMediaComponent because both right and left col
   // elements need to be stored (when you switch back and forth between the columns,
   // you end up on the last active element FROM THAT COLUMN).
-  // so we store leftColActiveMediaElement as well as rightCol.
+  // so we store leftColActiveMediaComponent as well as rightCol.
   mediaPercentageElapsed: 0,
-  activeMediaElement: "play",
-  setActiveMediaElement: (to) => set(() => ({ activeMediaElement: to })),
+  activeMediaComponent: "play",
+  setActiveMediaComponent: (to) => set(() => ({ activeMediaComponent: to })),
   lastActiveLeftSideElement: "play",
   lastActiveRightSideElement: "fstWord",
   setLastActiveLeftSideElement: (to) =>
@@ -324,5 +344,15 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
           ? 0
           : state.wordPositionDataStructIdx + val,
     })),
+  setWords: (to) => set(() => ({ words: to })),
 }));
 
+export const useSceneStore = create<SceneState>((set) => ({
+  currentScene: "media",
+  setScene: (to) => set(() => ({ currentScene: to })),
+}));
+
+export const useImageStore = create<ImageState>((set) => ({
+  img: 0,
+  setImg: (to) => set(() => ({ img: to })),
+}));