audio visualizer done, reorganized stuff

src/App.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, Suspense } from "react";
-import MainScene from "./components/MainScene";
+import MainScene from "./scenes/MainScene";
 import "./static/css/hub.css";
 import "./static/css/main.css";
 import { Canvas } from "react-three-fiber";
 import Boot from "./components/Boot";
 import MediaPlayer from "./components/MediaScene/MediaPlayer";
-import MediaScene from "./components/MediaScene/MediaScene";
+import MediaScene from "./scenes/MediaScene";
 import EventStateManager from "./components/StateManagers/EventStateManager";
 
 const App = () => {
@@ -26,13 +26,13 @@ const App = () => {
       <span className="canvas">
         <EventStateManager />
         <Canvas concurrent>
-          <Suspense fallback={null}>
-            <MediaScene />
-          </Suspense>
-          {/*<MainScene />*/}
+          {/*<Suspense fallback={null}>*/}
+          {/*  <MediaScene />*/}
+          {/*</Suspense>*/}
+          <MainScene />
         </Canvas>
       </span>
-      <MediaPlayer />
+      {/*<MediaPlayer />*/}
     </div>
   );
 };

src/components/MainScene/BlueOrb.tsx

@@ -2,22 +2,22 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import { useSpring, a } from "@react-spring/three";
 import * as THREE from "three";
-import Cou from "../static/sprite/Cou.png";
-import CouActive from "../static/sprite/Cou_active.png";
-import Dc from "../static/sprite/Dc.png";
-import DcActive from "../static/sprite/Dc_active.png";
-import SSkn from "../static/sprite/SSkn.png";
-import SSKnActive from "../static/sprite/SSkn_active.png";
-import Tda from "../static/sprite/Tda.png";
-import TdaActive from "../static/sprite/Tda_active.png";
-import Dia from "../static/sprite/Dia.png";
-import DiaActive from "../static/sprite/Dia_active.png";
-import Lda from "../static/sprite/Lda.png";
-import LdaActive from "../static/sprite/Lda_active.png";
-import MULTI from "../static/sprite/MULTI.png";
-import MULTIActive from "../static/sprite/MULTI_active.png";
-import level_y_values from "../resources/level_y_values.json";
-import { useBlueOrbStore } from "../store";
+import Cou from "../../static/sprite/Cou.png";
+import CouActive from "../../static/sprite/Cou_active.png";
+import Dc from "../../static/sprite/Dc.png";
+import DcActive from "../../static/sprite/Dc_active.png";
+import SSkn from "../../static/sprite/SSkn.png";
+import SSKnActive from "../../static/sprite/SSkn_active.png";
+import Tda from "../../static/sprite/Tda.png";
+import TdaActive from "../../static/sprite/Tda_active.png";
+import Dia from "../../static/sprite/Dia.png";
+import DiaActive from "../../static/sprite/Dia_active.png";
+import Lda from "../../static/sprite/Lda.png";
+import LdaActive from "../../static/sprite/Lda_active.png";
+import MULTI from "../../static/sprite/MULTI.png";
+import MULTIActive from "../../static/sprite/MULTI_active.png";
+import level_y_values from "../../resources/level_y_values.json";
+import { useBlueOrbStore } from "../../store";
 
 type BlueOrbContructorProps = {
   sprite: string;

src/components/MainScene/GrayPlanes.tsx

@@ -1,7 +1,7 @@
 import React, { createRef, memo, RefObject, useRef } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
-import { useGrayPlanesStore } from "../store";
+import { useGrayPlanesStore } from "../../store";
 
 const GrayPlanes = memo(() => {
   const grayPlaneGroupRef = useRef<THREE.Object3D>();

src/components/MainScene/GrayRing.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from "react";
 import * as THREE from "three";
-import lofTexture from "../static/sprite/lof.png";
-import holeTexture from "../static/sprite/hole.png";
-import lifeTexture from "../static/sprite/life.png";
+import lofTexture from "../../static/sprite/gray_ring_lof.png";
+import holeTexture from "../../static/sprite/hole.png";
+import lifeTexture from "../../static/sprite/life.png";
 import { useLoader } from "react-three-fiber";
 
 type GrayRingProps = {

src/components/MainScene/HUD.tsx

@@ -1,15 +1,15 @@
 import React, { memo } from "react";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import bigHud from "../static/sprite/big_hud.png";
-import bigHudMirrored from "../static/sprite/big_hud_mirrored.png";
-import longHud from "../static/sprite/long_hud.png";
-import longHudMirrored from "../static/sprite/long_hud_mirrored.png";
-import boringHud from "../static/sprite/long_hud_boring.png";
-import boringHudMirrored from "../static/sprite/long_hud_boring_mirrored.png";
+import bigHud from "../../static/sprite/big_hud.png";
+import bigHudMirrored from "../../static/sprite/big_hud_mirrored.png";
+import longHud from "../../static/sprite/long_hud.png";
+import longHudMirrored from "../../static/sprite/long_hud_mirrored.png";
+import boringHud from "../../static/sprite/long_hud_boring.png";
+import boringHudMirrored from "../../static/sprite/long_hud_boring_mirrored.png";
 import { a, useSpring } from "@react-spring/three";
-import { useBlueOrbStore } from "../store";
-import blue_orb_huds from "../resources/blue_orb_huds.json";
+import { useBlueOrbStore } from "../../store";
+import blue_orb_huds from "../../resources/blue_orb_huds.json";
 
 export type HUDElementProps = {
   hudVisibility: boolean;

src/components/MainScene/Lain.tsx

@@ -2,14 +2,14 @@ import React, { Suspense, useState } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
-import moveDownSpriteSheet from "../static/sprite/jump_down.png";
-import moveUpSpriteSheet from "../static/sprite/jump_up.png";
-import moveLeftSpriteSheet from "../static/sprite/move_left.png";
-import moveRightSpriteSheet from "../static/sprite/move_right.png";
-import standingSpriteSheet from "../static/sprite/standing.png";
-import introSpriteSheet from "../static/sprite/intro.png";
-import throwBlueOrbSpriteSheet from "../static/sprite/throw_blue_orb.png";
-import { useLainStore } from "../store";
+import moveDownSpriteSheet from "../../static/sprite/jump_down.png";
+import moveUpSpriteSheet from "../../static/sprite/jump_up.png";
+import moveLeftSpriteSheet from "../../static/sprite/move_left.png";
+import moveRightSpriteSheet from "../../static/sprite/move_right.png";
+import standingSpriteSheet from "../../static/sprite/standing.png";
+import introSpriteSheet from "../../static/sprite/intro.png";
+import throwBlueOrbSpriteSheet from "../../static/sprite/throw_blue_orb.png";
+import { useLainStore } from "../../store";
 
 type LainConstructorProps = {
   sprite: string;

src/components/MainScene/MiddleRing.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
-import middleRingTexture from "../static/sprite/middle_ring_tex.png";
+import middleRingTexture from "../../static/sprite/middle_ring_tex.png";
 import * as THREE from "three";
 import { a, useSpring } from "@react-spring/three";
-import { useMiddleRingStore } from "../store";
+import { useMiddleRingStore } from "../../store";
 
 const MiddleRing = () => {
   const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);

src/components/MainScene/OrthoCamera.tsx

@@ -3,8 +3,8 @@ 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";
+import { useBlueOrbStore } from "../../store";
+import TextRenderer from "../TextRenderer/TextRenderer";
 
 const OrthoCamera = memo(() => {
   const { gl, scene, camera } = useThree();

src/components/MainScene/PurpleRing.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import siteATex from "../static/sprite/site_a.png";
-import siteBTex from "../static/sprite/site_b.png";
-import siteLevelTex from "../static/sprite/site_levels.png";
+import siteATex from "../../static/sprite/site_a.png";
+import siteBTex from "../../static/sprite/site_b.png";
+import siteLevelTex from "../../static/sprite/site_levels.png";
 
 type PurpleRingProps = {
   purpleRingPosY: number;

src/components/MainScene/Site.tsx

@@ -1,11 +1,11 @@
 import React, { memo, Suspense } from "react";
-import site_a from "../resources/site_a.json";
+import site_a from "../../resources/site_a.json";
 import Level from "./Level";
-import level_y_values from "../resources/level_y_values.json";
-import blue_orb_positions from "../resources/blue_orb_positions.json";
+import level_y_values from "../../resources/level_y_values.json";
+import blue_orb_positions from "../../resources/blue_orb_positions.json";
 import BlueOrb from "./BlueOrb";
 import { a, useSpring } from "@react-spring/three";
-import { useBlueOrbStore, useLevelStore, useSiteStore } from "../store";
+import { useBlueOrbStore, useLevelStore, useSiteStore } from "../../store";
 
 const Site = memo(() => {
   const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);

src/components/MainScene/Starfield.tsx

@@ -2,7 +2,7 @@ import { a, useSpring } from "@react-spring/three";
 import React, { createRef, memo, RefObject, useMemo, useRef } from "react";
 import { useFrame } from "react-three-fiber";
 import * as THREE from "three";
-import { useStarfieldStore } from "../store";
+import { useStarfieldStore } from "../../store";
 
 type StarRefsAndInitialPoses = [
   React.MutableRefObject<React.RefObject<THREE.Object3D>[]>,

src/components/MainScene/YellowOrb.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useRef, useState } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import orbSprite from "../static/sprite/orb.png";
-import { useYellowOrbStore } from "../store";
+import orbSprite from "../../static/sprite/orb.png";
+import { useYellowOrbStore } from "../../store";
 
 // initialize outside the component otherwise it gets overwritten when it rerenders
 let orbIdx = 0;

src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx

@@ -1,11 +1,9 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { createRef, MutableRefObject, useEffect, useMemo } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
 import AudioVisualizerColumn from "./AudioVisualizerColumn";
-import { useAudioVisualizerStore } from "../../../store";
 
 const AudioVisualizer = () => {
-  const setFrequency = useAudioVisualizerStore((state) => state.setFrequency);
   const analyser = useMemo(() => {
     const listener = new THREE.AudioListener();
 
@@ -17,28 +15,78 @@ const AudioVisualizer = () => {
     return new THREE.AudioAnalyser(audio, 2048);
   }, []);
 
+  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>()),
+    ]);
+  }, []);
+
   useFrame(() => {
-    if (!(document.getElementById("media") as HTMLMediaElement).paused)
-      setFrequency(analyser.getFrequencyData());
+    const frequencyData = analyser.getFrequencyData();
+
+    columnRefs.forEach((refArray, idx) => {
+      const ref1 = refArray[0];
+      const ref2 = refArray[1];
+      const ref3 = refArray[2];
+      const ref4 = refArray[3];
+
+      // we up it by 1.2 just so it becomes a bit more noticable, otherwise
+      // the visualizer is a bit too "calm"
+      const currentFrequency = frequencyData[32 * idx] * 1.2;
+
+      switch (true) {
+        case currentFrequency >= 255:
+          ref1.current!.visible = true;
+          ref2.current!.visible = true;
+          ref3.current!.visible = true;
+          ref4.current!.visible = true;
+          break;
+        case currentFrequency >= 192:
+          ref1.current!.visible = true;
+          ref2.current!.visible = true;
+          ref3.current!.visible = true;
+          ref4.current!.visible = false;
+          break;
+        case currentFrequency >= 128:
+          ref1.current!.visible = true;
+          ref2.current!.visible = true;
+          ref3.current!.visible = false;
+          ref4.current!.visible = false;
+          break;
+        case currentFrequency >= 64:
+          ref1.current!.visible = true;
+          ref2.current!.visible = false;
+          ref3.current!.visible = false;
+          ref4.current!.visible = false;
+          break;
+        default:
+          ref1.current!.visible = false;
+          ref2.current!.visible = false;
+          ref3.current!.visible = false;
+          ref4.current!.visible = false;
+          break;
+      }
+    });
   });
 
   return (
     <>
-      <AudioVisualizerColumn position={[0, 0, 0]} idx={0} />
-      <AudioVisualizerColumn position={[0, -0.5, 0]} idx={1} />
-      <AudioVisualizerColumn position={[0, -1, 0]} idx={2} />
-      <AudioVisualizerColumn position={[0, -1.5, 0]} idx={3} />
-      <AudioVisualizerColumn position={[0, -2, 0]} idx={4} />
-      <AudioVisualizerColumn position={[0, -2.5, 0]} idx={5} />
-      <AudioVisualizerColumn position={[0, -3, 0]} idx={6} />
-      <AudioVisualizerColumn position={[0, -3.5, 0]} idx={7} />
-      <AudioVisualizerColumn position={[0, -4, 0]} idx={8} />
-      <AudioVisualizerColumn position={[0, -4.5, 0]} idx={9} />
-      <AudioVisualizerColumn position={[0, -5, 0]} idx={10} />
-      <AudioVisualizerColumn position={[0, -5.5, 0]} idx={11} />
-      <AudioVisualizerColumn position={[0, -6, 0]} idx={12} />
-      <AudioVisualizerColumn position={[0, -6.5, 0]} idx={13} />
-      <AudioVisualizerColumn position={[0, -7, 0]} idx={14} />
+      {columnRefs.map((refArray, idx: number) => (
+        <AudioVisualizerColumn
+          position={[0, -idx / 2, 0]}
+          refs={{
+            ref1: refArray[0] as MutableRefObject<THREE.Object3D>,
+            ref2: refArray[1] as MutableRefObject<THREE.Object3D>,
+            ref3: refArray[2] as MutableRefObject<THREE.Object3D>,
+            ref4: refArray[3] as MutableRefObject<THREE.Object3D>,
+          }}
+          key={idx}
+        />
+      ))}
     </>
   );
 };

src/components/MediaScene/AudioVisualizer/AudioVisualizerColumn.tsx

@@ -1,15 +1,17 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { MutableRefObject } from "react";
 import audioVisualizerOrangeOrb from "../../../static/sprite/audio_visual_orb_orange.png";
 import audioVisualizerYellowOrb from "../../../static/sprite/audio_visual_orb_yellow.png";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { useAudioVisualizerStore, useBlueOrbStore } from "../../../store";
-import { useSpring, a } from "@react-spring/three";
-import level_y_values from "../../../resources/level_y_values.json";
 
 type AudioVisualizerColumnProps = {
   position: number[];
-  idx: number;
+  refs: {
+    ref1: MutableRefObject<THREE.Object3D>;
+    ref2: MutableRefObject<THREE.Object3D>;
+    ref3: MutableRefObject<THREE.Object3D>;
+    ref4: MutableRefObject<THREE.Object3D>;
+  };
 };
 
 const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
@@ -22,33 +24,15 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
     audioVisualizerYellowOrb
   );
 
-  const [
-    { fstOrbVisible, sndOrbVisible, thirdOrbVisible, fourthOrbVisible },
-    set,
-  ] = useSpring(() => ({
-    fstOrbVisible: false,
-    sndOrbVisible: false,
-    thirdOrbVisible: false,
-    fourthOrbVisible: false,
-    config: { duration: 800 },
-  }));
-
-  useEffect(() => {
-    useAudioVisualizerStore.subscribe(set, (state) => ({
-      fstOrbVisible: state.frequency[props.idx * 32] >= 64,
-      sndOrbVisible: state.frequency[props.idx * 32] >= 128,
-      thirdOrbVisible: state.frequency[props.idx * 32] >= 192,
-      fourthOrbVisible: state.frequency[props.idx * 32] >= 255,
-    }));
-  }, [props.position, set]);
+  const { ref1, ref2, ref3, ref4 } = props.refs;
 
   return (
     <group position={props.position as [number, number, number]}>
-      <a.mesh
+      <mesh
         scale={[0.4, 0.4, 0.4]}
         position={[-5.2, 3.8, 0]}
-        visible={fstOrbVisible}
         renderOrder={10}
+        ref={ref1}
       >
         <meshBasicMaterial
           attach="material"
@@ -58,11 +42,11 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
           depthTest={false}
         />
         <planeBufferGeometry attach="geometry" />
-      </a.mesh>
-      <a.mesh
+      </mesh>
+      <mesh
         scale={[0.4, 0.4, 0.4]}
         position={[-4.65, 3.8, 0]}
-        visible={sndOrbVisible}
+        ref={ref2}
         renderOrder={5}
       >
         <meshBasicMaterial
@@ -73,12 +57,12 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
           depthTest={false}
         />
         <planeBufferGeometry attach="geometry" />
-      </a.mesh>
+      </mesh>
 
-      <a.mesh
+      <mesh
         scale={[0.4, 0.4, 0.4]}
         position={[-4.1, 3.8, 0]}
-        visible={thirdOrbVisible}
+        ref={ref3}
         renderOrder={5}
       >
         <meshBasicMaterial
@@ -89,12 +73,12 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
           depthTest={false}
         />
         <planeBufferGeometry attach="geometry" />
-      </a.mesh>
-      <a.mesh
+      </mesh>
+      <mesh
         scale={[0.4, 0.4, 0.4]}
         position={[-3.55, 3.8, 0]}
-        visible={fourthOrbVisible}
         renderOrder={10}
+        ref={ref4}
       >
         <meshBasicMaterial
           attach="material"
@@ -104,7 +88,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
           depthTest={false}
         />
         <planeBufferGeometry attach="geometry" />
-      </a.mesh>
+      </mesh>
     </group>
   );
 };

src/components/MediaScene/Lof.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo, 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 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 lofSpriteSheet from "../../static/sprite/lof_spritesheet.png";
 import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
 
 const Lof = () => {

src/components/MediaScene/MediaLoadingBar.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo, useRef } from "react";
-import { useMediaStore } from "../../../../store";
-import mediaLoadingBarContainer from "../../../../static/sprite/media_loading_bar_container.png";
-import mediaLoadingBar from "../../../../static/sprite/media_loading_bar.png";
-import mediaLoadingBar10Perc from "../../../../static/sprite/media_loading_bar_10perc.png";
-import mediaLoadingBar20Perc from "../../../../static/sprite/media_loading_bar_20perc.png";
-import mediaLoadingBar30Perc from "../../../../static/sprite/media_loading_bar_30perc.png";
-import mediaLoadingBar40Perc from "../../../../static/sprite/media_loading_bar_40perc.png";
-import mediaLoadingBar50Perc from "../../../../static/sprite/media_loading_bar_50perc.png";
+import { useMediaStore } from "../../store";
+import mediaLoadingBarContainer from "../../static/sprite/media_loading_bar_container.png";
+import mediaLoadingBar from "../../static/sprite/media_loading_bar.png";
+import mediaLoadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png";
+import mediaLoadingBar20Perc from "../../static/sprite/media_loading_bar_20perc.png";
+import mediaLoadingBar30Perc from "../../static/sprite/media_loading_bar_30perc.png";
+import mediaLoadingBar40Perc from "../../static/sprite/media_loading_bar_40perc.png";
+import mediaLoadingBar50Perc from "../../static/sprite/media_loading_bar_50perc.png";
 
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
@@ -126,12 +126,12 @@ const MediaLoadingBar = () => {
       90: {
         scaleX: 1.5,
         texture: mediaLoadingBarTex,
-        offsetX: 3.8,
+        offsetX: 3.65,
       },
       95: {
         scaleX: 1.5,
         texture: mediaLoadingBarTex,
-        offsetX: 3.95,
+        offsetX: 3.85,
       },
       100: {
         scaleX: 1.5,

src/components/MediaScene/MediaPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from "react";
+import React, { createRef, useCallback, useRef } from "react";
 import test from "../../static/movie/LAIN01.XA[18].ogg";
 import { useMediaStore } from "../../store";
 
@@ -8,12 +8,13 @@ const MediaPlayer = () => {
   );
 
   const requestRef = useRef();
+  const videoRef = createRef<HTMLVideoElement>();
 
   const updateTime = useCallback(() => {
     (requestRef.current as any) = requestAnimationFrame(updateTime);
-    if (t.current) {
-      const timeElapsed = t.current.getCurrentTime();
-      const duration = t.current.getDuration();
+    if (videoRef.current) {
+      const timeElapsed = videoRef.current.currentTime;
+      const duration = videoRef.current.duration;
       const percentageElapsed = Math.floor((timeElapsed / duration) * 100);
 
       if (percentageElapsed % 5 === 0) {
@@ -27,10 +28,8 @@ const MediaPlayer = () => {
     return () => cancelAnimationFrame(requestRef.current as any);
   }, [updateTime]);
 
-  const t = useRef<any>();
-
   return (
-    <video width="800" height="600" controls autoPlay id="media">
+    <video width="800" height="600" controls autoPlay id="media" ref={videoRef}>
       <source src={test} />
     </video>
   );

src/components/MediaScene/MediaScene.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { OrbitControls } from "drei";
-import { useMediaStore } from "../../store";
-import TextRenderer from "../TextRenderer/TextRenderer";
-import LeftSide from "./LeftSide/LeftSide";
-import RightSide from "./RightSide/RightSide";
-import AudioVisualizer from "./AudioVisualizer/AudioVisualizer";
-
-const MediaScene = () => {
-  const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
-
-  return (
-    <>
-      <OrbitControls />
-      <group position={[0.4, -0.3, 0]}>
-        <group position={[0, 0, 13]} scale={[1, 1, 1]}>
-          <TextRenderer />
-        </group>
-
-        <pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 3]} />
-        <LeftSide activeMediaElement={activeMediaElement} />
-        <RightSide activeMediaElement={activeMediaElement} />
-        <AudioVisualizer />
-      </group>
-    </>
-  );
-};
-
-export default MediaScene;

src/components/MediaScene/NodeNameContainer.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import * as THREE from "three";
+import { useLoader } from "react-three-fiber";
+import mediaNodeNameContainer from "../../static/sprite/media_node_name_container.png";
+
+const NodeNameContainer = () => {
+  const mediaNodeNameContainerTex = useLoader(
+    THREE.TextureLoader,
+    mediaNodeNameContainer
+  );
+
+  return (
+    <sprite scale={[2.6, 0.5, 1]} position={[3.425, 2.5, 0]}>
+      <spriteMaterial attach="material" map={mediaNodeNameContainerTex} />
+    </sprite>
+  );
+};
+
+export default NodeNameContainer;

src/components/MediaScene/RightSide/TopRightHUD/TopRightHUD.tsx

@@ -1,23 +0,0 @@
-import React, { useMemo } from "react";
-import * as THREE from "three";
-import { useLoader } from "react-three-fiber";
-import mediaNodeNameContainer from "../../../../static/sprite/media_node_name_container.png";
-import MediaLoadingBar from "./MediaLoadingBar";
-
-const TopRightHUD = () => {
-  const mediaNodeNameContainerTex = useLoader(
-    THREE.TextureLoader,
-    mediaNodeNameContainer
-  );
-
-  return (
-    <group position={[0, 0.5, 0]}>
-      <MediaLoadingBar />
-      <sprite scale={[2.6, 0.5, 1]} position={[3.425, 2.5, 0]}>
-        <spriteMaterial attach="material" map={mediaNodeNameContainerTex} />
-      </sprite>
-    </group>
-  );
-};
-
-export default TopRightHUD;

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

@@ -1,7 +1,7 @@
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import grayTextureFile from "../../../static/sprite/gray_box.png";
-import darkGrayTextureFile from "../../../static/sprite/dark_gray_box.png";
+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";
 

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

@@ -1,7 +1,7 @@
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import grayTextureFile from "../../../static/sprite/gray_box.png";
-import darkGrayTextureFile from "../../../static/sprite/dark_gray_box.png";
+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";
 

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

@@ -1,10 +1,8 @@
 import React, { useCallback, useMemo } from "react";
-import { useMediaWordStore } from "../../../store";
+import { useMediaWordStore } from "../../../../store";
 import Word from "./Word";
 import { useSpring, a } from "@react-spring/three";
 import * as THREE from "three";
-import Lof from "./Lof";
-import TopRightHUD from "./TopRightHUD/TopRightHUD";
 
 type RightSideProps = {
   activeMediaElement: string;
@@ -94,8 +92,6 @@ const RightSide = (props: RightSideProps) => {
         posY={wordPositionStateSpring.thirdWordPosY}
         active={props.activeMediaElement === "thirdWord"}
       />
-      <Lof />
-      <TopRightHUD />
     </>
   );
 };

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

@@ -1,7 +1,7 @@
 import React, { useMemo } 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 wordInactiveTexture from "../../../../static/sprite/word_background.png";
+import wordActiveTexture from "../../../../static/sprite/word_background_active.png";
 import { useLoader } from "react-three-fiber";
 import { a, SpringValue } from "@react-spring/three";
 

src/components/StateManagers/EventStateManager.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useEffect, useState } from "react";
-import SiteStateManager from "./SiteStateManager";
-import MiddleRingStateManager from "./MiddleRingStateManager";
-import LainStateManager from "./LainStateManager";
-import BlueOrbStateManager from "./BlueOrbStateManager";
-import BlueOrbHUDStateManager from "./BlueOrbHUDStateManager";
-import YellowTextStateManager from "./YellowTextStateManager";
+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 GreenTextStateManager from "./GreenTextStateManager";
-import ActiveMediaElementStateManager from "./MediaScene/ActiveMediaElementStateManager";
-import MediaWordStateManager from "./MediaScene/MediaWordStateManager";
-import MediaYellowTextStateManager from "./MediaScene/MediaYellowTextStateManager";
+import GreenTextManager from "./MainScene/GreenTextManager";
+import ActiveMediaElementManager from "./MediaScene/ActiveMediaElementManager";
+import WordManager from "./MediaScene/WordManager";
+import MediaYellowTextManager from "./MediaScene/MediaYellowTextManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -46,7 +46,7 @@ const EventStateManager = () => {
         // from blue_orb_directions.json file.
         // const eventId = `${activeBlueOrb}_${keyPress}`;
         //
-        const eventId = `${activeMediaElement}_${keyPress}`;
+        const eventId = `${activeBlueOrb}_${keyPress}`;
         setEventState(eventId);
       }
     },
@@ -63,16 +63,16 @@ const EventStateManager = () => {
 
   return (
     <>
-      <BlueOrbStateManager eventState={eventState!} />
-      <BlueOrbHUDStateManager eventState={eventState!} />
-      <YellowTextStateManager eventState={eventState!} />
-      <GreenTextStateManager eventState={eventState!} />
-      <SiteStateManager eventState={eventState!} />
-      <LainStateManager eventState={eventState!} />
-      <MiddleRingStateManager eventState={eventState!} />
-      <ActiveMediaElementStateManager eventState={eventState!} />
-      <MediaWordStateManager eventState={eventState!} />
-      <MediaYellowTextStateManager eventState={eventState!} />
+      <BlueOrbManager eventState={eventState!} />
+      <BlueOrbHUDManager eventState={eventState!} />
+      <MainYellowTextManager eventState={eventState!} />
+      <GreenTextManager eventState={eventState!} />
+      <SiteManager eventState={eventState!} />
+      <LainManager eventState={eventState!} />
+      <MiddleRingManager eventState={eventState!} />
+      <ActiveMediaElementManager eventState={eventState!} />
+      <WordManager eventState={eventState!} />
+      <MediaYellowTextManager eventState={eventState!} />
     </>
   );
 };

src/components/StateManagers/MainScene/BlueOrbHUDManager.tsx

@@ -1,9 +1,9 @@
 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 { useBlueOrbStore } from "../../../store";
+import blue_orb_directions from "../../../resources/blue_orb_directions.json";
+import { StateManagerProps } from "../EventStateManager";
 
-const BlueOrbHUDStateManager = (props: StateManagerProps) => {
+const BlueOrbHUDManager = (props: StateManagerProps) => {
   const setActiveBlueOrbHudId = useBlueOrbStore(
     (state) => state.setActiveBlueOrbHudId
   );
@@ -74,4 +74,4 @@ const BlueOrbHUDStateManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default BlueOrbHUDStateManager;
+export default BlueOrbHUDManager;

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 { useBlueOrbStore } from "../../../store";
+import blue_orb_directions from "../../../resources/blue_orb_directions.json";
+import { StateManagerProps } from "../EventStateManager";
 
 type SetActiveBlueOrb = (value: string) => void;
 type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void;
@@ -21,7 +21,7 @@ type BlueOrbDispatcher = {
   pickActiveBlueOrb: BlueOrbDispatchData;
 };
 
-const BlueOrbStateManager = (props: StateManagerProps) => {
+const BlueOrbManager = (props: StateManagerProps) => {
   const setActiveBlueOrb: SetActiveBlueOrb = useBlueOrbStore(
     (state) => state.setActiveBlueOrbId
   );
@@ -133,4 +133,4 @@ const BlueOrbStateManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default BlueOrbStateManager;
+export default BlueOrbManager;

src/components/StateManagers/MainScene/GreenTextManager.tsx

@@ -1,10 +1,10 @@
 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 { 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";
 
-const GreenTextStateManager = (props: StateManagerProps) => {
+const GreenTextManager = (props: StateManagerProps) => {
   const setGreenText = useTextRendererStore((state) => state.setGreenText);
   const toggleGreenText = useTextRendererStore(
     (state) => state.toggleGreenText
@@ -77,4 +77,4 @@ const GreenTextStateManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default GreenTextStateManager;
+export default GreenTextManager;

src/components/StateManagers/MainScene/LainManager.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo } from "react";
-import { useLainStore } from "../../store";
-import blue_orb_directions from "../../resources/blue_orb_directions.json";
-import { StateManagerProps } from "./EventStateManager";
+import { useLainStore } from "../../../store";
+import blue_orb_directions from "../../../resources/blue_orb_directions.json";
+import { StateManagerProps } from "../EventStateManager";
 
-const LainStateManager = (props: StateManagerProps) => {
+const LainManager = (props: StateManagerProps) => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);
 
   const dispatchObject = useCallback(
@@ -66,4 +66,4 @@ const LainStateManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default LainStateManager;
+export default LainManager;

src/components/StateManagers/MainScene/MainYellowTextManager.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 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";
 
 type AnimateYellowTextWithMove = (
   yellowLetterPosYOffset: number,
@@ -28,7 +28,7 @@ type YellowTextDispatcher = {
   changeBlueOrbFocus: YellowTextDispatchData;
 };
 
-const YellowTextStateManager = (props: any) => {
+const MainYellowTextManager = (props: any) => {
   const setYellowText = useTextRendererStore((state) => state.setYellowText);
 
   const setYellowTextOffsetXCoeff = useTextRendererStore(
@@ -196,4 +196,4 @@ const YellowTextStateManager = (props: any) => {
   return null;
 };
 
-export default YellowTextStateManager;
+export default MainYellowTextManager;

src/components/StateManagers/MainScene/MiddleRingManager.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo } from "react";
-import { useMiddleRingStore } from "../../store";
-import blue_orb_directions from "../../resources/blue_orb_directions.json";
+import { useMiddleRingStore } from "../../../store";
+import blue_orb_directions from "../../../resources/blue_orb_directions.json";
 
-const MiddleRingStateManager = (props: any) => {
+const MiddleRingManager = (props: any) => {
   const setMiddleRingWobbleStrength = useMiddleRingStore(
     (state) => state.setMiddleRingWobbleStrength
   );
@@ -225,4 +225,4 @@ const MiddleRingStateManager = (props: any) => {
   return null;
 };
 
-export default MiddleRingStateManager;
+export default MiddleRingManager;

src/components/StateManagers/MainScene/SiteManager.tsx

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

src/components/StateManagers/MediaScene/ActiveMediaElementManager.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventStateManager";
 import { useMediaStore } from "../../../store";
 
-const ActiveMediaElementStateManager = (props: StateManagerProps) => {
+const ActiveMediaElementManager = (props: StateManagerProps) => {
   const setActiveMediaElement = useMediaStore(
     (state) => state.setActiveMediaElement
   );
@@ -115,4 +115,4 @@ const ActiveMediaElementStateManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default ActiveMediaElementStateManager;
+export default ActiveMediaElementManager;

src/components/StateManagers/MediaScene/MediaYellowTextManager.tsx

@@ -16,16 +16,13 @@ type YellowTextDispatcher = {
   exit_up: YellowTextDispatchData;
 };
 
-const MediaYellowTextStateManager = (props: any) => {
+const MediaYellowTextManager = (props: any) => {
   const setYellowText = useTextRendererStore((state) => state.setYellowText);
 
   const setYellowTextOffsetXCoeff = useTextRendererStore(
     (state) => state.setYellowTextOffsetXCoeff
   );
 
-  const incrementYellowTextPosY = useTextRendererStore(
-    (state) => state.incrementYellowTextPosY
-  );
   const setYellowTextPosY = useTextRendererStore(
     (state) => state.setYellowTextPosY
   );
@@ -90,4 +87,4 @@ const MediaYellowTextStateManager = (props: any) => {
   return null;
 };
 
-export default MediaYellowTextStateManager;
+export default MediaYellowTextManager;

src/components/StateManagers/MediaScene/WordManager.tsx

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

src/scenes/MainScene.tsx

@@ -1,18 +1,18 @@
 import { a, useSpring } from "@react-spring/three";
 import { OrbitControls } from "drei";
 import React, { Suspense, useEffect } from "react";
-import Site from "./Site";
-import Lain from "./Lain";
-import Lights from "./Lights";
-import OrthoCamera from "./OrthoCamera";
-import Preloader from "./Preloader";
-import EventStateManager from "./StateManagers/EventStateManager";
-import MainSceneIntro from "./MainSceneIntro";
-import GrayPlanes from "./GrayPlanes";
-import MiddleRing from "./MiddleRing";
-import Starfield from "./Starfield";
+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 "./TextRenderer/TextRenderer";
+import TextRenderer from "../components/TextRenderer/TextRenderer";
 
 const MainScene = () => {
   const setLainMoveState = useLainStore((state) => state.setLainMoveState);

src/scenes/MediaScene.tsx

@@ -0,0 +1,30 @@
+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 AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
+import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
+import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
+
+const MediaScene = () => {
+  const activeMediaElement = useMediaStore((state) => state.activeMediaElement);
+
+  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 />
+      </group>
+      <group position={[0, 0, 13]} scale={[1, 1, 1]}>
+        <TextRenderer />
+      </group>
+    </group>
+  );
+};
+
+export default MediaScene;

src/store.ts

@@ -124,11 +124,6 @@ type TextRendererState = {
   toggleGreenText: () => void;
 };
 
-type AudioVisualizerState = {
-  frequency: Uint8Array;
-  setFrequency: (to: Uint8Array) => void;
-};
-
 export const useTextRendererStore = create<TextRendererState>((set) => ({
   // yellow text
   yellowText: "Play",
@@ -331,7 +326,3 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
     })),
 }));
 
-export const useAudioVisualizerStore = create<AudioVisualizerState>((set) => ({
-  frequency: new Uint8Array(),
-  setFrequency: (to) => set(() => ({ frequency: to })),
-}));