too much, cant write a commit message for this

package.json

@@ -7,22 +7,17 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "@tweenjs/tween.js": "^18.6.0",
     "@types/jest": "^24.9.1",
     "@types/node": "^12.12.54",
     "@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": "^4.0.0",
     "react-three-fiber": "^4.2.20",
     "three": "^0.119.1",
     "three-plain-animator": "^1.0.2",
-    "threejs-slice-geometry": "^0.2.2",
-    "ts-node": "^9.0.0",
     "typescript": "^3.7.5",
     "zustand": "^3.1.3"
   },

src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, Suspense, useMemo } from "react";
 import MainScene from "./scenes/MainScene";
-import "./static/css/hub.css";
-import "./static/css/main.css";
+import "./static/css/main_scene.css";
+import "./static/css/page.css";
 import { Canvas } from "react-three-fiber";
 import Boot from "./components/Boot";
 import MediaPlayer from "./components/MediaScene/MediaPlayer";

src/components/Boot.tsx

@@ -143,7 +143,7 @@ const Boot = (props: IntroProps) => {
 
   const handleUserKeyPress = useCallback(
     (event) => {
-      const { _, keyCode } = event;
+      const { keyCode } = event;
 
       if (keyCode === 40 || keyCode === 38) {
         setAuthorizeActive(!authorizeActive);

src/components/MainScene/GrayPlanes.tsx

@@ -21,6 +21,7 @@ const GrayPlanes = memo(() => {
   ];
 
   const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
+      // eslint-disable-next-line react-hooks/rules-of-hooks
     useRef<RefObject<THREE.Object3D>[]>(
       poses.map(() => createRef<THREE.Object3D>())
     )

src/components/MainScene/Starfield.tsx

@@ -90,6 +90,7 @@ const Starfield = memo(() => {
     "blue",
     "cyan",
     "gray",
+    // eslint-disable-next-line react-hooks/rules-of-hooks
   ].map((color: string) => useMemo(() => uniformConstructor(color), [color]));
 
   const [
@@ -122,6 +123,7 @@ const Starfield = memo(() => {
     posesWhiteFromRight,
     posesWhiteFromLeft,
   ].map((poses) =>
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useRef<RefObject<THREE.Object3D>[]>(
       poses.map(() => createRef<THREE.Object3D>())
     )
@@ -144,6 +146,7 @@ const Starfield = memo(() => {
     introPosesCyan,
     introPosesWhite,
   ].map((poses) =>
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useRef<RefObject<THREE.Object3D>[]>(
       poses.map(() => createRef<THREE.Object3D>())
     )

src/components/MainSceneIntro.tsx

@@ -67,7 +67,7 @@ const MainSceneIntro = memo(() => {
 
       toggleHud();
       setTimeout(() => {
-        document.getElementsByTagName("canvas")[0].className = "hub-background";
+        document.getElementsByTagName("canvas")[0].className = "main-scene-background";
       }, 300);
     }, 3860);
   }, [

src/components/MediaScene/Images.tsx

@@ -1,11 +1,57 @@
 import React, { useEffect, useState } from "react";
+import { useLoader } from "react-three-fiber";
+import { useImageStore, useMediaStore } from "../../store";
+import * as THREE from "three";
+import sex from "../../static/sprite/gray_ring_lof.png";
+import { a, useSpring } from "@react-spring/three";
 
 const Images = () => {
+  const [imageScaleY, setImageScaleY] = useState(3.75);
+  const images = useImageStore((state) => state.images);
+  const [activeImage, setActiveImage] = useState<any>(sex);
+
+  const activeImageTex = useLoader(THREE.TextureLoader, activeImage);
+
+  const mediaPercentageElapsed = useMediaStore(
+    (state) => state.mediaPercentageElapsed
+  );
+
+  const imageScaleState = useSpring({
+    imageScaleY: imageScaleY,
+    config: { duration: 300 },
+  });
+
+  useEffect(() => {
+    if (images[1]) {
+      setActiveImage(images[1].default);
+    }
+  }, [images]);
+
+  useEffect(() => {
+    if (mediaPercentageElapsed === 35 && images[2]) {
+      setImageScaleY(0);
+      setTimeout(() => {
+        setActiveImage(images[2]!.default);
+        setImageScaleY(3.75);
+      }, 300);
+    }
+    if (mediaPercentageElapsed === 70 && images[3]) {
+      setImageScaleY(0);
+      setTimeout(() => {
+        setActiveImage(images[3]!.default);
+        setImageScaleY(3.75);
+      }, 300);
+    }
+  }, [images, mediaPercentageElapsed]);
 
   return (
-    <sprite position={[-0.2, 0.6, -4]} scale={[5, 3.75, 0]}>
-      <spriteMaterial />
-    </sprite>
+    <a.sprite
+      position={[-0.2, 0.6, -4]}
+      scale={[5, 3.75, 0]}
+      scale-y={imageScaleState.imageScaleY}
+    >
+      <spriteMaterial attach="material" map={activeImageTex} />
+    </a.sprite>
   );
 };
 

src/components/MediaScene/MediaPlayer.tsx

@@ -1,6 +1,7 @@
 import React, { createRef, useCallback, useRef } from "react";
 import test from "../../static/movie/LAIN01.XA[18].ogg";
 import { useMediaStore, useSceneStore } from "../../store";
+import t from "../../static/webvtt/test.vtt";
 
 const MediaPlayer = () => {
   const currentScene = useSceneStore((state) => state.currentScene);
@@ -41,6 +42,7 @@ const MediaPlayer = () => {
       style={{ display: currentScene === "media" ? "block" : "none" }}
     >
       <source src={test} />
+      <track src={t} kind="captions" default />
     </video>
   );
 };

src/components/StateManagers/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 "../EventManager";
+import { useCallback, useEffect } from "react";
+import { useBlueOrbStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import { StateManagerProps } from "./EventManager";
 
 const BlueOrbHUDManager = (props: StateManagerProps) => {
   const setActiveBlueOrbHudId = useBlueOrbStore(
@@ -46,9 +46,9 @@ const BlueOrbHUDManager = (props: StateManagerProps) => {
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject =
-        blue_orb_directions[
-          props.eventState as keyof typeof blue_orb_directions
+      const eventObject: any =
+        game_action_mappings[
+          props.eventState as keyof typeof game_action_mappings
         ];
 
       if (eventObject) {

src/components/StateManagers/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 "../EventManager";
+import { useCallback, useEffect } from "react";
+import { useBlueOrbStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import { StateManagerProps } from "./EventManager";
 
 type SetActiveBlueOrb = (value: string) => void;
 type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
@@ -111,9 +111,9 @@ const BlueOrbManager = (props: StateManagerProps) => {
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject =
-        blue_orb_directions[
-          props.eventState as keyof typeof blue_orb_directions
+      const eventObject: any =
+        game_action_mappings[
+          props.eventState as keyof typeof game_action_mappings
         ];
 
       if (eventObject) {

src/components/StateManagers/EventManager.tsx

@@ -1,18 +1,17 @@
 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 SiteManager from "./SiteManager";
+import MiddleRingManager from "./MiddleRingManager";
+import LainManager from "./LainManager";
+import BlueOrbManager from "./BlueOrbManager";
+import BlueOrbHUDManager from "./BlueOrbHUDManager";
 import { useBlueOrbStore, useMediaStore, useSceneStore } from "../../store";
-import GreenTextManager from "./MainScene/GreenTextManager";
-import MediaComponentManager from "./MediaScene/MediaComponentManager";
-import WordManager from "./MediaScene/WordManager";
-import MediaYellowTextManager from "./MediaScene/MediaYellowTextManager";
-import MediaElementManager from "./MediaScene/MediaElementManager";
+import GreenTextManager from "./GreenTextManager";
+import MediaComponentManager from "./MediaComponentManager";
+import MediaWordManager from "./MediaWordManager";
+import MediaElementManager from "./MediaElementManager";
 import SceneManager from "./SceneManager";
-import ImageManager from "./MediaScene/ImageManager";
+import YellowTextManager from "./YellowTextManager";
+import MediaImageManager from "./MediaImageManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -79,17 +78,16 @@ const EventManager = () => {
     <>
       <BlueOrbManager eventState={eventState!} />
       <BlueOrbHUDManager eventState={eventState!} />
-      <MainYellowTextManager eventState={eventState!} />
       <GreenTextManager eventState={eventState!} />
       <SiteManager eventState={eventState!} />
       <LainManager eventState={eventState!} />
       <MiddleRingManager eventState={eventState!} />
       <MediaComponentManager eventState={eventState!} />
-      <WordManager eventState={eventState!} />
-      <MediaYellowTextManager eventState={eventState!} />
+      <MediaWordManager eventState={eventState!} />
       <MediaElementManager eventState={eventState!} />
       <SceneManager eventState={eventState!} />
-      <ImageManager eventState={eventState!} />
+      <YellowTextManager eventState={eventState!} />
+      <MediaImageManager eventState={eventState!} />
     </>
   );
 };

src/components/StateManagers/GreenTextManager.tsx

@@ -1,9 +1,9 @@
-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 "../EventManager";
-import blue_orb_huds from "../../../resources/blue_orb_huds.json";
+import { useCallback, useEffect } from "react";
+import { useTextRendererStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import site_a from "../../resources/site_a.json";
+import { StateManagerProps } from "./EventManager";
+import blue_orb_huds from "../../resources/blue_orb_huds.json";
 
 const GreenTextManager = (props: StateManagerProps) => {
   const setGreenText = useTextRendererStore((state) => state.setGreenText);
@@ -20,7 +20,7 @@ const GreenTextManager = (props: StateManagerProps) => {
   const toggleAndSetGreenText = useCallback(
     (targetBlueOrbId: string, targetBlueOrbHudId: string, delay: number) => {
       const targetGreenText =
-        site_a[targetBlueOrbId as keyof typeof site_a].green_text;
+        site_a[targetBlueOrbId as keyof typeof site_a].title;
 
       const targetGreenTextPosData =
         blue_orb_huds[targetBlueOrbHudId as keyof typeof blue_orb_huds]
@@ -73,9 +73,9 @@ const GreenTextManager = (props: StateManagerProps) => {
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject =
-        blue_orb_directions[
-          props.eventState as keyof typeof blue_orb_directions
+      const eventObject: any =
+        game_action_mappings[
+          props.eventState as keyof typeof game_action_mappings
         ];
 
       if (eventObject) {

src/components/StateManagers/LainManager.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect } from "react";
-import { useLainStore } from "../../../store";
-import blue_orb_directions from "../../../resources/blue_orb_directions.json";
-import { StateManagerProps } from "../EventManager";
+import { useCallback, useEffect } from "react";
+import { useLainStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import { StateManagerProps } from "./EventManager";
 
 const LainManager = (props: StateManagerProps) => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
@@ -44,8 +44,8 @@ const LainManager = (props: StateManagerProps) => {
   useEffect(() => {
     if (props.eventState) {
       const eventObject =
-        blue_orb_directions[
-          props.eventState as keyof typeof blue_orb_directions
+        game_action_mappings[
+          props.eventState as keyof typeof game_action_mappings
         ];
 
       if (eventObject) {

src/components/StateManagers/MediaComponentManager.tsx

@@ -1,6 +1,8 @@
-import React, { useCallback, useEffect } from "react";
-import { StateManagerProps } from "../EventManager";
-import { useMediaStore } from "../../../store";
+import { useCallback, useEffect } from "react";
+import { StateManagerProps } from "./EventManager";
+import { useMediaStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import blue_orb_directions from "../../resources/blue_orb_directions.json";
 
 const MediaComponentManager = (props: StateManagerProps) => {
   const setActiveMediaComponent = useMediaStore(
@@ -47,54 +49,60 @@ const MediaComponentManager = (props: StateManagerProps) => {
   );
 
   const dispatchObject = useCallback(
-    (event: string) => {
+    (event: string, targetMediaComponent: string) => {
       const dispatcherObjects = {
-        play_down: { action: setActiveMediaComponent, value: "exit" },
-        exit_up: { action: setActiveMediaComponent, value: "play" },
-        play_right: {
-          action: switchToRightSide,
-          value: "play",
-        },
-        exit_right: {
-          action: switchToRightSide,
-          value: "exit",
-        },
-        fstWord_left: {
-          action: switchToLeftSide,
-          value: "fstWord",
-        },
         fstWord_up: {
           action: setActiveMediaComponent,
-          value: "thirdWord"
+          value: targetMediaComponent,
         },
         fstWord_down: {
           action: setActiveMediaComponent,
-          value: "sndWord",
+          value: targetMediaComponent,
         },
         sndWord_up: {
           action: setActiveMediaComponent,
-          value: "fstWord",
+          value: targetMediaComponent,
         },
         sndWord_down: {
           action: setActiveMediaComponent,
-          value: "thirdWord",
-        },
-        sndWord_left: {
-          action: switchToLeftSide,
-          value: "sndWord"
+          value: targetMediaComponent,
         },
         thirdWord_down: {
           action: setActiveMediaComponent,
-          value: "fstWord",
+          value: targetMediaComponent,
         },
         thirdWord_up: {
           action: setActiveMediaComponent,
+          value: targetMediaComponent,
+        },
+        play_down: {
+          action: setActiveMediaComponent,
+          value: targetMediaComponent,
+        },
+        exit_up: {
+          action: setActiveMediaComponent,
+          value: targetMediaComponent,
+        },
+        switch_to_right_side_from_play: {
+          action: switchToRightSide,
+          value: "play",
+        },
+        switch_to_right_side_from_exit: {
+          action: switchToRightSide,
+          value: "exit",
+        },
+        switch_to_left_side_from_fstWord: {
+          action: switchToLeftSide,
+          value: "fstWord",
+        },
+        switch_to_left_side_from_sndWord: {
+          action: switchToLeftSide,
           value: "sndWord",
         },
-        thirdWord_left: {
+        switch_to_left_side_from_thirdWord: {
           action: switchToLeftSide,
-          value: "thirdWord"
-        }
+          value: "thirdWord",
+        },
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
@@ -104,10 +112,23 @@ const MediaComponentManager = (props: StateManagerProps) => {
 
   useEffect(() => {
     if (props.eventState) {
-      const dispatchedObject = dispatchObject(props.eventState);
+      const eventObject: any =
+        game_action_mappings[
+          props.eventState as keyof typeof blue_orb_directions
+        ];
 
-      if (dispatchedObject) {
-        dispatchedObject.action(dispatchedObject.value);
+      if (eventObject) {
+        const eventAction = eventObject.action;
+        const targetMediaComponent = eventObject.target_media_component;
+
+        const dispatchedObject = dispatchObject(
+          eventAction,
+          targetMediaComponent
+        );
+
+        if (dispatchedObject) {
+          dispatchedObject.action(dispatchedObject.value);
+        }
       }
     }
   }, [props.eventState, dispatchObject]);

src/components/StateManagers/MediaElementManager.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useEffect } from "react";
+
+import { StateManagerProps } from "./EventManager";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import blue_orb_directions from "../../resources/blue_orb_directions.json";
+
+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_media_element: { action: playMedia },
+      };
+
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [playMedia]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventObject: any =
+        game_action_mappings[
+          props.eventState as keyof typeof blue_orb_directions
+        ];
+
+      if (eventObject) {
+        const eventAction = eventObject.action;
+
+        const dispatchedObject = dispatchObject(eventAction);
+
+        if (dispatchedObject) {
+          dispatchedObject.action();
+        }
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default MediaComponentManager;

src/components/StateManagers/MediaImageManager.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useEffect } from "react";
+
+import { StateManagerProps } from "./EventManager";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import site_a from "../../resources/site_a.json";
+import image_table from "../../resources/image_table.json";
+import { ImageSrc, useImageStore } from "../../store";
+
+const MediaImageManager = (props: StateManagerProps) => {
+  const setImages = useImageStore((state) => state.setImages);
+
+  const updateSceneImages = useCallback((targetBlueOrbId: string) => {
+    const node_name = site_a[targetBlueOrbId as keyof typeof site_a].node_name;
+    const images = image_table[node_name as keyof typeof image_table];
+
+    Object.values(images).forEach((img) => {
+      console.log(images);
+      switch (img.substr(img.length - 1)) {
+        case "0":
+          import("../../static/media_images/site_a/" + img + ".png").then(
+            (imageSrc: ImageSrc) => {
+              setImages(imageSrc, 1);
+            }
+          );
+          break;
+        case "1":
+          import("../../static/media_images/site_a/" + img + ".png").then(
+            (imageSrc: ImageSrc) => {
+              setImages(imageSrc, 2);
+            }
+          );
+          break;
+        case "2":
+          import("../../static/media_images/site_a/" + img + ".png").then(
+            (imageSrc: ImageSrc) => {
+              setImages(imageSrc, 3);
+            }
+          );
+          break;
+        default:
+          break;
+      }
+    });
+  }, []);
+
+  const dispatchObject = useCallback(
+    (event: string, targetBlueOrbId: string) => {
+      const dispatcherObjects = {
+        select_blue_orb: { action: updateSceneImages, value: targetBlueOrbId },
+      };
+
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [updateSceneImages]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventObject: any =
+        game_action_mappings[
+          props.eventState as keyof typeof game_action_mappings
+        ];
+
+      if (eventObject) {
+        const eventAction = eventObject.action;
+        const targetBlueOrbId = eventObject.target_blue_orb_id;
+
+        const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId);
+
+        if (dispatchedObject) {
+          dispatchedObject.action(dispatchedObject.value);
+        }
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default MediaImageManager;

src/components/StateManagers/MediaScene/ImageManager.tsx

@@ -1,59 +0,0 @@
-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/MediaElementManager.tsx

@@ -1,35 +0,0 @@
-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

@@ -1,90 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import { useTextRendererStore } from "../../../store";
-
-type AnimateMediaYellowText = (
-  targetMediaText: string,
-  targetMediaTextPos: number[]
-) => void;
-
-type YellowTextDispatchData = {
-  action: AnimateMediaYellowText;
-  value: any;
-};
-
-type YellowTextDispatcher = {
-  play_down: YellowTextDispatchData;
-  exit_up: YellowTextDispatchData;
-};
-
-const MediaYellowTextManager = (props: any) => {
-  const setYellowText = useTextRendererStore((state) => state.setYellowText);
-
-  const setYellowTextOffsetXCoeff = useTextRendererStore(
-    (state) => state.setYellowTextOffsetXCoeff
-  );
-
-  const setYellowTextPosY = useTextRendererStore(
-    (state) => state.setYellowTextPosY
-  );
-  const setYellowTextPosX = useTextRendererStore(
-    (state) => state.setYellowTextPosX
-  );
-
-  const animateMediaYellowText: AnimateMediaYellowText = useCallback(
-    (targetMediaComponentText: string, targetMediaComponentTextPos: number[]) => {
-      // make current text shrink
-      setYellowTextOffsetXCoeff(-1);
-
-      setTimeout(() => {
-        setYellowTextPosX(targetMediaComponentTextPos[0]);
-        setYellowTextPosY(targetMediaComponentTextPos[1]);
-      }, 400);
-
-      setTimeout(() => {
-        setYellowText(targetMediaComponentText);
-      }, 1000);
-
-      setTimeout(() => {
-        // unshrink text
-        setYellowTextOffsetXCoeff(0);
-      }, 1200);
-    },
-    [
-      setYellowText,
-      setYellowTextOffsetXCoeff,
-      setYellowTextPosX,
-      setYellowTextPosY,
-    ]
-  );
-
-  const dispatchObject = useCallback(
-    (event: string) => {
-      const dispatcherObjects: YellowTextDispatcher = {
-        exit_up: {
-          action: animateMediaYellowText,
-          value: ["Play", [-0.8, 0.05, 0.6]],
-        },
-        play_down: {
-          action: animateMediaYellowText,
-          value: ["Exit", [-0.8, -0.08, 0.6]],
-        },
-      };
-
-      return dispatcherObjects[event as keyof typeof dispatcherObjects];
-    },
-    [animateMediaYellowText]
-  );
-
-  useEffect(() => {
-    if (props.eventState) {
-      const dispatchedObject = dispatchObject(props.eventState);
-      if (dispatchedObject) {
-        (dispatchedObject.action as any).apply(null, dispatchedObject.value);
-      }
-    }
-  }, [props.eventState, dispatchObject]);
-
-  return null;
-};
-
-export default MediaYellowTextManager;

src/components/StateManagers/MediaWordManager.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect } from "react";
-import { StateManagerProps } from "../EventManager";
-import { useMediaWordStore } from "../../../store";
+import { useCallback, useEffect } from "react";
+import { StateManagerProps } from "./EventManager";
+import { useMediaWordStore } from "../../store";
 
-const WordManager = (props: StateManagerProps) => {
+const MediaWordManager = (props: StateManagerProps) => {
   const addToWordPositionDataStructIdx = useMediaWordStore(
     (state) => state.addToWordPositionDataStructIdx
   );
@@ -53,4 +53,4 @@ const WordManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default WordManager;
+export default MediaWordManager;

src/components/StateManagers/MiddleRingManager.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useMemo } from "react";
-import { useMiddleRingStore } from "../../../store";
-import blue_orb_directions from "../../../resources/blue_orb_directions.json";
+import { useCallback, useEffect, useMemo } from "react";
+import { useMiddleRingStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
 
 const MiddleRingManager = (props: any) => {
   const setMiddleRingWobbleStrength = useMiddleRingStore(
@@ -196,8 +196,8 @@ const MiddleRingManager = (props: any) => {
   useEffect(() => {
     if (props.eventState) {
       const eventObject =
-        blue_orb_directions[
-          props.eventState as keyof typeof blue_orb_directions
+        game_action_mappings[
+          props.eventState as keyof typeof game_action_mappings
         ];
 
       if (eventObject) {

src/components/StateManagers/SceneManager.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
 import blue_orb_directions from "../../resources/blue_orb_directions.json";
 import { useSceneStore } from "../../store";
@@ -6,16 +6,24 @@ 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]);
+  const dispatchObject = useCallback(
+    (event: string) => {
+      const dispatcherObjects = {
+        select_blue_orb: {
+          action: setScene,
+          value: "media",
+          delay: 3904.704,
+        },
+        exit_select: {
+          action: setScene,
+          value: "main",
+          delay: 0,
+        },
+      };
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [setScene]
+  );
 
   useEffect(() => {
     if (props.eventState) {
@@ -24,15 +32,24 @@ const SceneManager = (props: StateManagerProps) => {
           props.eventState as keyof typeof blue_orb_directions
         ];
 
+      let dispatchedObject: {
+        action: (to: string) => void;
+        value: string;
+        delay: number;
+      };
+
       if (eventObject) {
         const eventAction = eventObject.action;
-        const dispatchedObject = dispatchObject(eventAction);
+        dispatchedObject = dispatchObject(eventAction);
+      } else {
+        const eventAction = props.eventState;
+        dispatchedObject = dispatchObject(eventAction);
+      }
 
-        if (dispatchedObject) {
-          setTimeout(() => {
-            dispatchedObject.action(dispatchedObject.value);
-          }, dispatchedObject.delay);
-        }
+      if (dispatchedObject) {
+        setTimeout(() => {
+          dispatchedObject.action(dispatchedObject.value);
+        }, dispatchedObject.delay);
       }
     }
   }, [props.eventState, dispatchObject]);

src/components/StateManagers/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 "../EventManager";
+import { useEffect, useMemo } from "react";
+import { useSiteStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
+import { StateManagerProps } from "./EventManager";
 
 const SiteManager = (props: StateManagerProps) => {
   const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY);
@@ -29,8 +29,8 @@ const SiteManager = (props: StateManagerProps) => {
   useEffect(() => {
     if (props.eventState) {
       const eventObject =
-        blue_orb_directions[
-          props.eventState as keyof typeof blue_orb_directions
+        game_action_mappings[
+          props.eventState as keyof typeof game_action_mappings
         ];
 
       if (eventObject) {

src/components/StateManagers/YellowTextManager.tsx

@@ -1,8 +1,8 @@
-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 { useTextRendererStore } from "../../../store";
-import blue_orb_directions from "../../../resources/blue_orb_directions.json";
+import { useCallback, useEffect } from "react";
+import blue_orb_huds from "../../resources/blue_orb_huds.json";
+import site_a from "../../resources/site_a.json";
+import { useTextRendererStore } from "../../store";
+import game_action_mappings from "../../resources/game_action_mappings.json";
 
 type AnimateYellowTextWithMove = (
   yellowLetterPosYOffset: number,
@@ -15,8 +15,16 @@ type AnimateYellowTextWithoutMove = (
   targetBlueOrbId: string
 ) => void;
 
+type AnimateMediaYellowText = (
+  targetMediaText: string,
+  targetMediaTextPos: number[]
+) => void;
+
 type YellowTextDispatchData = {
-  action: AnimateYellowTextWithMove | AnimateYellowTextWithoutMove;
+  action:
+    | AnimateYellowTextWithMove
+    | AnimateYellowTextWithoutMove
+    | AnimateMediaYellowText;
   value: any;
 };
 
@@ -26,9 +34,11 @@ type YellowTextDispatcher = {
   move_left: YellowTextDispatchData;
   move_right: YellowTextDispatchData;
   change_blue_orb: YellowTextDispatchData;
+  play_down: YellowTextDispatchData;
+  exit_up: YellowTextDispatchData;
 };
 
-const MainYellowTextManager = (props: any) => {
+const YellowTextManager = (props: any) => {
   const setYellowText = useTextRendererStore((state) => state.setYellowText);
 
   const setYellowTextOffsetXCoeff = useTextRendererStore(
@@ -125,6 +135,36 @@ const MainYellowTextManager = (props: any) => {
     ]
   );
 
+  const animateMediaYellowText: AnimateMediaYellowText = useCallback(
+    (
+      targetMediaComponentText: string,
+      targetMediaComponentTextPos: number[]
+    ) => {
+      // make current text shrink
+      setYellowTextOffsetXCoeff(-1);
+
+      setTimeout(() => {
+        setYellowTextPosX(targetMediaComponentTextPos[0]);
+        setYellowTextPosY(targetMediaComponentTextPos[1]);
+      }, 400);
+
+      setTimeout(() => {
+        setYellowText(targetMediaComponentText);
+      }, 1000);
+
+      setTimeout(() => {
+        // unshrink text
+        setYellowTextOffsetXCoeff(0);
+      }, 1200);
+    },
+    [
+      setYellowText,
+      setYellowTextOffsetXCoeff,
+      setYellowTextPosX,
+      setYellowTextPosY,
+    ]
+  );
+
   const dispatchObject = useCallback(
     (
       event: string,
@@ -152,18 +192,30 @@ const MainYellowTextManager = (props: any) => {
           action: animateYellowTextWithoutMove,
           value: [targetBlueOrbHudId, targetBlueOrbId],
         },
+        exit_up: {
+          action: animateMediaYellowText,
+          value: ["Play", [-0.8, 0.05, 0.6]],
+        },
+        play_down: {
+          action: animateMediaYellowText,
+          value: ["Exit", [-0.8, -0.08, 0.6]],
+        },
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [animateYellowTextWithMove, animateYellowTextWithoutMove]
+    [
+      animateMediaYellowText,
+      animateYellowTextWithMove,
+      animateYellowTextWithoutMove,
+    ]
   );
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject =
-        blue_orb_directions[
-          props.eventState as keyof typeof blue_orb_directions
+      const eventObject: any =
+        game_action_mappings[
+          props.eventState as keyof typeof game_action_mappings
         ];
 
       if (eventObject) {
@@ -181,7 +233,6 @@ const MainYellowTextManager = (props: any) => {
         if (dispatchedObject) {
           (dispatchedObject.action as any).apply(null, dispatchedObject.value);
         }
-      } else {
       }
     }
   }, [
@@ -196,4 +247,4 @@ const MainYellowTextManager = (props: any) => {
   return null;
 };
 
-export default MainYellowTextManager;
+export default YellowTextManager;

src/components/TextRenderer/BigLetter.tsx

@@ -45,12 +45,15 @@ const BigLetter = (props: BigLetterProps) => {
     }
   };
 
-  const lineYOffsets = {
-    1: 0.884,
-    2: 0.765,
-    3: 0.648,
-    4: 0.47,
-  };
+  const lineYOffsets = useMemo(
+    () => ({
+      1: 0.884,
+      2: 0.765,
+      3: 0.648,
+      4: 0.47,
+    }),
+    []
+  );
 
   const letterData =
     orange_font_json.glyphs[

src/components/TextRenderer/MediumLetter.tsx

@@ -1,5 +1,3 @@
-import orangeFont from "../../static/sprite/orange_font_texture.png";
-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";
@@ -34,13 +32,16 @@ const MediumLetter = (props: LetterProps) => {
   };
 
   // 5th one is just a space, this is my hacky way of doing it.
-  const lineYOffsets = {
-    1: 0.355,
-    2: 0.297,
-    3: 0.238,
-    4: 0.18,
-    5: 1,
-  };
+  const lineYOffsets = useMemo(
+    () => ({
+      1: 0.355,
+      2: 0.297,
+      3: 0.238,
+      4: 0.18,
+      5: 1,
+    }),
+    []
+  );
 
   const letterData =
     medium_font_json.glyphs[

src/components/TextRenderer/TextRenderer.tsx

@@ -1,5 +1,5 @@
 import { a, useSpring, useTrail } from "@react-spring/three";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useSiteStore, useTextRendererStore } from "../../store";
 import BigLetter from "./BigLetter";
 import MediumLetter from "./MediumLetter";

src/react-app-env.d.ts

@@ -1,9 +1,85 @@
-/// <reference types="react-scripts" />
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
 declare module "*.webm" {
   const src: string;
   export default src;
 }
 
+declare module "*.vtt" {
+  const src: string;
+  export default src;
+}
+
 declare module "*.mp3" {
   const src: string;
   export default src;

src/resources/game_action_mappings.json

@@ -0,0 +1,138 @@
+{
+  "play_select": {
+    "action": "play_media_element"
+  },
+  "exit_select": {
+    "action": "exit_media_scene"
+  },
+
+  "play_down": {
+    "action": "play_down",
+    "target_media_component": "exit"
+  },
+  "exit_up": {
+    "action": "exit_up",
+    "target_media_component": "play"
+  },
+  "play_right": {
+    "action": "switch_to_right_side_from_play",
+    "target_media_component": "last_active_right_media_component"
+  },
+  "exit_right": {
+    "action": "switch_to_right_side_from_exit",
+    "target_media_component": "last_active_right_media_component"
+  },
+
+  "fstWord_left": {
+    "action": "switch_to_left_side_from_fstWord",
+    "target_media_component": "last_active_left_media_component"
+  },
+  "fstWord_up": {
+    "action": "fstWord_up",
+    "target_media_component": "thirdWord"
+  },
+  "fstWord_down": {
+    "action": "fstWord_down",
+    "target_media_component": "sndWord"
+  },
+  "sndWord_up": {
+    "action": "sndWord_up",
+    "target_media_component": "fstWord"
+  },
+  "sndWord_down": {
+    "action": "sndWord_down",
+    "target_media_component": "thirdWord"
+  },
+  "sndWord_left": {
+    "action": "switch_to_left_side_from_sndWord",
+    "target_media_component": "last_active_left_media_component"
+  },
+  "thirdWord_down": {
+    "action": "thirdWord_down",
+    "target_media_component": "fstWord"
+  },
+  "thirdWord_up": {
+    "action": "thirdWord_up",
+    "target_media_component": "sndWord"
+  },
+  "thirdWord_left": {
+    "action": "switch_to_left_side_from_thirdWord",
+    "target_media_component": "last_active_left_media_component"
+  },
+
+  "0422_down": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0414",
+    "target_hud_id": "fg_hud_2"
+  },
+  "0422_right": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0417",
+    "target_hud_id": "bg_hud_1"
+  },
+  "0422_up": {
+    "action": "move_up",
+    "target_blue_orb_id": "0506",
+    "target_hud_id": "fg_hud_3"
+  },
+  "0422_select": {
+    "action": "select_blue_orb",
+    "target_blue_orb_id": "0422",
+    "target_hud_id": "fg_hud_1"
+  },
+
+  "0414_up": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0422",
+    "target_hud_id": "fg_hud_1"
+  },
+  "0414_right": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0417",
+    "target_hud_id": "bg_hud_1"
+  },
+
+  "0413_down": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0405",
+    "target_hud_id": "fg_hud_6"
+  },
+  "0413_left": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0417",
+    "target_hud_id": "bg_hud_1"
+  },
+
+  "0405_left": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0417",
+    "target_hud_id": "bg_hud_1"
+  },
+  "0405_up": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0413",
+    "target_hud_id": "fg_hud_5"
+  },
+
+  "0417_left": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0422",
+    "target_hud_id": "fg_hud_1"
+  },
+  "0417_down": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0414",
+    "target_hud_id": "fg_hud_2"
+  },
+  "0417_right": {
+    "action": "change_blue_orb",
+    "target_blue_orb_id": "0413",
+    "target_hud_id": "fg_hud_5"
+  },
+
+  "0506_down": {
+    "action": "move_down",
+    "target_blue_orb_id": "0422",
+    "target_hud_id": "fg_hud_1"
+  }
+}

src/scenes/Initializers/MainSceneInitializer.tsx

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

src/scenes/Initializers/MediaSceneInitializer.tsx

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

src/scenes/MainScene.tsx

@@ -13,6 +13,7 @@ import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
 import TextRenderer from "../components/TextRenderer/TextRenderer";
 import HUD from "../components/MainScene/HUD";
 import YellowOrb from "../components/MainScene/YellowOrb";
+import MainSceneInitializer from "./Initializers/MainSceneInitializer";
 
 const MainScene = () => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
@@ -46,7 +47,8 @@ const MainScene = () => {
   return (
     <perspectiveCamera position-z={3}>
       <Suspense fallback={null}>
-        <MainSceneIntro />
+        {/*<MainSceneIntro />*/}
+        {/*<MainSceneInitializer />*/}
         <a.group
           rotation-x={mainGroupStateRot.mainGroupRotX}
           position-y={mainGroupStatePos.mainGroupPosY}

src/scenes/MediaScene.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useMediaStore } from "../store";
 import TextRenderer from "../components/TextRenderer/TextRenderer";
 import LeftSide from "../components/MediaScene/Selectables/LeftSide";
@@ -16,11 +16,16 @@ const MediaScene = () => {
     (state) => state.activeMediaComponent
   );
 
+  useEffect(() => {
+    document.getElementsByTagName("canvas")[0].className =
+      "media-scene-background";
+  }, []);
+
   return (
     <perspectiveCamera position-z={3}>
       <group position={[0.4, -0.3, 0]}>
         <OrbitControls />
-        <MediaSceneInitializer />
+        {/*<MediaSceneInitializer />*/}
         <pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
         <LeftSide activeMediaComponent={activeMediaComponent} />
         <RightSide activeMediaComponent={activeMediaComponent} />

src/store.ts

@@ -1,5 +1,5 @@
 import create from "zustand";
-import { SpriteMaterial } from "three";
+import { combine } from "zustand/middleware";
 
 type SceneState = {
   currentScene: string;
@@ -102,6 +102,7 @@ type MediaWordState = {
   words: string[];
   setWords: (to: string[]) => void;
   addToWordPositionDataStructIdx: (val: number) => void;
+  resetWordPositionDataStructIdx: () => void;
 };
 
 type MediaState = {
@@ -135,11 +136,27 @@ type TextRendererState = {
   toggleGreenText: () => void;
 };
 
-type ImageState = {
-  img: any;
-  setImg: (to: any) => void;
+export type ImageSrc = {
+  default: string;
 };
 
+type ImageState = {
+  images: {
+    1: ImageSrc | undefined;
+    2: ImageSrc | undefined;
+    3: ImageSrc | undefined;
+  };
+};
+
+// type ImageState = {
+//   fstImg: ImageSrc | undefined;
+//   sndImg: ImageSrc | undefined;
+//   thirdImg: ImageSrc | undefined;
+//   setFstImg: (to: ImageSrc) => void;
+//   setSndImg: (to: ImageSrc) => void;
+//   setThirdImg: (to: ImageSrc) => void;
+// };
+//
 export const useTextRendererStore = create<TextRendererState>((set) => ({
   // yellow text
   yellowText: "Play",
@@ -345,14 +362,23 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
           : state.wordPositionDataStructIdx + val,
     })),
   setWords: (to) => set(() => ({ words: to })),
+  resetWordPositionDataStructIdx: () =>
+    set(() => ({ wordPositionDataStructIdx: 0 })),
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "media",
+  currentScene: "main",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));
 
-export const useImageStore = create<ImageState>((set) => ({
-  img: 0,
-  setImg: (to) => set(() => ({ img: to })),
-}));
+export const useImageStore = create(
+  combine(
+    {
+      images: { 1: undefined, 2: undefined, 3: undefined },
+    } as ImageState,
+    (set) => ({
+      setImages: (to: ImageSrc, idx: number) =>
+        set((state) => ({ images: { ...state.images, [idx]: to } })),
+    })
+  )
+);

tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"