almost done refactoring the store

src/App.tsx

@@ -4,8 +4,7 @@ import "./static/css/page.css";
 import { Canvas } from "react-three-fiber";
 import MediaPlayer from "./components/MediaScene/MediaPlayer";
 import MediaScene from "./scenes/MediaScene";
-import EventManager from "./core/StateManagers/EventManager";
+import { useStore } from "./store";
-import { useSceneStore } from "./store";
 import GateScene from "./scenes/GateScene";
 import BootScene from "./scenes/BootScene";
 import SSknScene from "./scenes/SSknScene";
@@ -16,7 +15,7 @@ import EndScene from "./scenes/EndScene";
 import IdleMediaScene from "./scenes/IdleMediaScene";
 
 const App = () => {
-  const currentScene = useSceneStore((state) => state.currentScene);
+  const currentScene = useStore((state) => state.currentScene);
 
   useEffect(() => {
     document.title = "< index >";

src/components/Boot/BootAuthorizeUser.tsx

@@ -8,7 +8,7 @@ import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_let
 import authorizeActiveLetters from "../../static/sprite/authorize_active_letters.png";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { useAuthorizeUserStore, useBootStore } from "../../store";
+import { useAuthorizeUserStore } from "../../store";
 import { OrbitControls } from "@react-three/drei";
 
 type BootAuthorizeUserProps = {

src/components/LainSpeak.tsx

@@ -7,7 +7,7 @@ import mouth1 from "../static/sprite/mouth_1.png";
 import mouth2 from "../static/sprite/mouth_2.png";
 import mouth3 from "../static/sprite/mouth_3.png";
 import mouth4 from "../static/sprite/mouth_4.png";
-import { useMainSceneStore } from "../store";
+import { useStore } from "../store";
 import { LainConstructor } from "./MainScene/Lain";
 
 type LainTaKProps = {
@@ -39,7 +39,7 @@ const LainSpeak = (props: LainTaKProps) => {
     />
   );
 
-  const analyser = useMainSceneStore((state) => state.audioAnalyser);
+  const analyser = useStore((state) => state.audioAnalyser);
 
   const mouthRef = useRef<THREE.SpriteMaterial>();
   useFrame(() => {

src/components/MainScene/Lain.tsx

@@ -32,7 +32,7 @@ import leanRightSpriteSheet from "../../static/sprite/lean_right.png";
 import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
 import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
 
-import { useMainSceneStore } from "../../store";
+import { useStore } from "../../store";
 
 type LainConstructorProps = {
   sprite: string;
@@ -353,7 +353,7 @@ type LainProps = {
 };
 
 const Lain = (props: LainProps) => {
-  const lainMoveState = useMainSceneStore((state) => state.lainMoveState);
+  const lainMoveState = useStore((state) => state.lainMoveState);
 
   const lainAnimationDispatch = useMemo(() => {
     const anims = {

src/components/MainScene/PauseSubscene/Pause.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import * as THREE from "three";
 import PauseSquare from "./PauseSquare";
 import StaticBigLetter from "../../TextRenderer/StaticBigLetter";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import { useLoader } from "react-three-fiber";
 
 type PauseProps = {
@@ -10,7 +10,7 @@ type PauseProps = {
 };
 
 const Pause = (props: PauseProps) => {
-  const exit = useMainSceneStore((state) => state.pauseExitAnimation);
+  const exit = useStore((state) => state.pauseExitAnimation);
   const [showActiveComponent, setShowActiveComponent] = useState(false);
   const [animation, setAnimation] = useState(false);
   const [intro, setIntro] = useState(true);
@@ -25,7 +25,7 @@ const Pause = (props: PauseProps) => {
     [wordFont]
   );
 
-  const activeComponent = useMainSceneStore(
+  const activeComponent = useStore(
     useCallback(
       (state) =>
         showActiveComponent

src/components/MainScene/PauseSubscene/PauseSquare.tsx

@@ -3,7 +3,7 @@ import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 import pauseGrayBoxes from "../../../static/sprite/pause_gray_boxes.png";
 import { a, useSpring } from "@react-spring/three";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 
 type PauseSquareProps = {
   colIdx: number;
@@ -15,7 +15,7 @@ type PauseSquareProps = {
 };
 
 const PauseSquare = memo((props: PauseSquareProps) => {
-  const exitAnimation = useMainSceneStore((state) => state.pauseExitAnimation);
+  const exitAnimation = useStore((state) => state.pauseExitAnimation);
 
   const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
 

src/components/MainScene/SyncedComponents/HUD.tsx

@@ -8,7 +8,7 @@ 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 { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import MediumLetter from "../../TextRenderer/MediumLetter";
 
 export type HUDType = {
@@ -33,11 +33,11 @@ export type HUDType = {
 };
 
 const HUD = memo(() => {
-  const greenText = useMainSceneStore((state) =>
+  const greenText = useStore((state) =>
     state.activeNode.title.split("")
   );
-  const active = useMainSceneStore((state) => Number(state.hudActive));
+  const active = useStore((state) => Number(state.hudActive));
-  const currentHud = useMainSceneStore((state) => state.hud);
+  const currentHud = useStore((state) => state.hud);
 
   const hudElementState = useSpring({
     bigHUDPositionX: active,

src/components/MainScene/SyncedComponents/LevelSelection.tsx

@@ -5,7 +5,7 @@ import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.pn
 import levelSelectionText from "../../../static/sprite/select_level_text.png";
 import upArrow from "../../../static/sprite/select_level_up_arrow.png";
 import downArrow from "../../../static/sprite/select_level_down_arrow.png";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import { a, useSpring } from "@react-spring/three";
@@ -24,11 +24,11 @@ const LevelSelection = () => {
   const upArrowTex = useLoader(THREE.TextureLoader, upArrow);
   const downArrowTex = useLoader(THREE.TextureLoader, downArrow);
 
-  const toggled = useMainSceneStore(
+  const toggled = useStore(
-    useCallback((state) => Number(state.subscene === "level_selection"), [])
+    useCallback((state) => Number(state.mainSubscene === "level_selection"), [])
   );
 
-  const selectedLevel = useMainSceneStore((state) => state.selectedLevel)
+  const selectedLevel = useStore((state) => state.selectedLevel)
     .toString()
     .padStart(2, "0");
 

src/components/MainScene/SyncedComponents/MiddleRing.tsx

@@ -3,19 +3,19 @@ import { useFrame, useLoader } from "react-three-fiber";
 import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
 import * as THREE from "three";
 import { a, useSpring } from "@react-spring/three";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import MiddleRingPart from "./MiddleRing/MiddleRingPart";
 
 const MiddleRing = () => {
   const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
 
-  const pos = useMainSceneStore((state) => state.middleRingPos);
+  const pos = useStore((state) => state.middleRingPos);
-  const rot = useMainSceneStore((state) => state.middleRingRot);
+  const rot = useStore((state) => state.middleRingRot);
-  const wobbleAmp = useMainSceneStore((state) => state.middleRingWobbleAmp);
+  const wobbleAmp = useStore((state) => state.middleRingWobbleAmp);
-  const noiseAmp = useMainSceneStore((state) => state.middleRingNoiseAmp);
+  const noiseAmp = useStore((state) => state.middleRingNoiseAmp);
 
-  const rotating = useMainSceneStore((state) => state.middleRingRotating);
+  const rotating = useStore((state) => state.middleRingRotating);
-  const mainRingVisible = useMainSceneStore(
+  const mainRingVisible = useStore(
     (state) => !state.fakeMiddleRingVisible
   );
 

src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx

@@ -3,7 +3,7 @@ import middleRingTexture from "../../../../static/sprite/middle_ring_tex.png";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import { a, useSpring } from "@react-spring/three";
-import { useMainSceneStore } from "../../../../store";
+import { useStore } from "../../../../store";
 
 type MiddleRingPartProps = {
   position: number[];
@@ -21,16 +21,16 @@ const MiddleRingPart = (props: MiddleRingPartProps) => {
   const [{ posX, posZ }, set] = useSpring(() => ({
     posX:
       props.position[0] /
-      useMainSceneStore.getState().middleRingPartSeparatorVal,
+      useStore.getState().middleRingPartSeparatorVal,
     posZ:
       props.position[2] /
-      useMainSceneStore.getState().middleRingPartSeparatorVal,
+      useStore.getState().middleRingPartSeparatorVal,
 
     config: { duration: 600 },
   }));
 
   useEffect(() => {
-    useMainSceneStore.subscribe(set, (state) => ({
+    useStore.subscribe(set, (state) => ({
       posX: props.position[0] / state.middleRingPartSeparatorVal,
       posZ: props.position[2] / state.middleRingPartSeparatorVal,
     }));

src/components/MainScene/SyncedComponents/Site.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense, useEffect, useMemo } from "react";
 import { a, useSpring } from "@react-spring/three";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import ActiveLevelNodes from "./Site/ActiveLevelNodes";
 import Rings from "./Site/Rings";
 import site_a from "../../../resources/site_a.json";
@@ -39,8 +39,8 @@ type SiteProps = {
 };
 
 const Site = (props: SiteProps) => {
-  const siteRot = useMainSceneStore((state) => state.siteRot);
+  const siteRot = useStore((state) => state.siteRot);
-  const sitePos = useMainSceneStore((state) => state.sitePos);
+  const sitePos = useStore((state) => state.sitePos);
   const siteState = useSpring({
     siteRotX: siteRot[0],
     siteRotY: siteRot[1],

src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx

@@ -1,24 +1,24 @@
 import React, { useMemo, memo } from "react";
 import Node from "./Node";
 import node_positions from "../../../../resources/node_positions.json";
-import { useMainSceneStore } from "../../../../store";
+import { useStore } from "../../../../store";
 import { isNodeVisible } from "../../../../core/nodeSelector";
 import site_a from "../../../../resources/site_a.json";
 import site_b from "../../../../resources/site_b.json";
 import { NodeDataType } from "../Site";
 
 const ActiveLevelNodes = memo(() => {
-  const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
+  const activeNodeId = useStore((state) => state.activeNode.id);
 
-  const gameProgress = useMainSceneStore((state) => state.gameProgress);
+  const gameProgress = useStore((state) => state.gameProgress);
 
-  const currentSite = useMainSceneStore((state) => state.activeSite);
+  const currentSite = useStore((state) => state.activeSite);
 
   const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
     currentSite,
   ]);
 
-  const activeLevel = useMainSceneStore((state) => state.activeLevel);
+  const activeLevel = useStore((state) => state.activeLevel);
 
   const visibleNodes = useMemo(
     () => siteData[activeLevel as keyof typeof siteData],

src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx

@@ -1,21 +1,21 @@
 import React, { useMemo, memo } from "react";
 import Node from "./Node";
 import node_positions from "../../../../resources/node_positions.json";
-import { useMainSceneStore } from "../../../../store";
+import { useStore } from "../../../../store";
 import { isNodeVisible } from "../../../../core/nodeSelector";
 import site_a from "../../../../resources/site_a.json";
 import site_b from "../../../../resources/site_b.json";
 
 const InactiveLevelNodes = memo(() => {
-  const gameProgress = useMainSceneStore((state) => state.gameProgress);
+  const gameProgress = useStore((state) => state.gameProgress);
 
-  const currentSite = useMainSceneStore((state) => state.activeSite);
+  const currentSite = useStore((state) => state.activeSite);
 
   const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
     currentSite,
   ]);
 
-  const activeLevel = useMainSceneStore((state) => state.activeLevel);
+  const activeLevel = useStore((state) => state.activeLevel);
 
   const visibleNodes = useMemo(() => {
     const obj = {};

src/components/MainScene/SyncedComponents/Site/Node.tsx

@@ -17,7 +17,7 @@ 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 { useMainSceneStore } from "../../../../store";
+import { useStore } from "../../../../store";
 
 type NodeContructorProps = {
   nodeName: string;
@@ -122,7 +122,7 @@ const Node = memo((props: NodeContructorProps) => {
   }));
 
   useEffect(() => {
-    useMainSceneStore.subscribe(set, (state) => ({
+    useStore.subscribe(set, (state) => ({
       activeNodePosX: state.activeNodeState.interactedWith
         ? state.activeNodePos[0]
         : props.position[0],

src/components/MainScene/SyncedComponents/Site/NodeAnimations.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { useMainSceneStore } from "../../../../store";
+import { useStore } from "../../../../store";
 import NodeExplosion from "./NodeAnimations/NodeExplosion";
 import NodeRip from "./NodeAnimations/NodeRip";
 
 const NodeAnimations = () => {
-  const nodeShrinking = useMainSceneStore(
+  const nodeShrinking = useStore(
     (state) => state.activeNodeState.shrinking
   );
 
-  const nodeExploding = useMainSceneStore(
+  const nodeExploding = useStore(
     (state) => state.activeNodeState.exploding
   );
 

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion.tsx

@@ -4,10 +4,10 @@ import node_explosion_line_positions from "../../../../../resources/node_explosi
 
 import { useFrame } from "react-three-fiber";
 import GoldNode from "./NodeExplosion/GoldNode";
-import { useMainSceneStore } from "../../../../../store";
+import { useStore } from "../../../../../store";
 
 const NodeExplosion = () => {
-  const explosionVisible = useMainSceneStore(
+  const explosionVisible = useStore(
     (state) => state.activeNodeState.exploding
   );
 

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx

@@ -16,7 +16,7 @@ import Lda from "../../../../../../static/sprite/Lda.png";
 import LdaGold from "../../../../../../static/sprite/Lda_gold.png";
 import MULTI from "../../../../../../static/sprite/MULTI.png";
 import MULTIGold from "../../../../../../static/sprite/MULTI_gold.png";
-import { useMainSceneStore } from "../../../../../../store";
+import { useStore } from "../../../../../../store";
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -35,7 +35,7 @@ type GoldNodeProps = {
 const GoldNode = (props: GoldNodeProps) => {
   const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/goldNode.glb");
 
-  const activeNodeName = useMainSceneStore(
+  const activeNodeName = useStore(
     (state) => state.activeNode.node_name
   );
 

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import TriangleNode from "./NodeRip/TriangleNode";
-import { useMainSceneStore } from "../../../../../store";
+import { useStore } from "../../../../../store";
 import RipLine from "./NodeRip/RipLine";
 import { useFrame } from "react-three-fiber";
 
 const NodeRip = () => {
-  const nodeShrinking = useMainSceneStore(
+  const nodeShrinking = useStore(
     (state) => state.activeNodeState.shrinking
   );
   const [shouldAnimate, setShouldAnimate] = useState(false);

src/components/MainScene/SyncedComponents/Site/Rings.tsx

@@ -3,15 +3,15 @@ import level_y_values from "../../../../resources/level_y_values.json";
 import PurpleRing from "./PurpleRing";
 import GrayRing from "./GrayRing";
 import CyanCrystal from "./CyanCrystal";
-import { useMainSceneStore } from "../../../../store";
+import { useStore } from "../../../../store";
 
 type RingsProps = {
   activateAllRings: boolean;
 };
 
 const Rings = memo((props: RingsProps) => {
-  const activeLevel = useMainSceneStore((state) => state.activeLevel);
+  const activeLevel = useStore((state) => state.activeLevel);
-  const currentSite = useMainSceneStore((state) => state.activeSite);
+  const currentSite = useStore((state) => state.activeSite);
 
   const visibleRings = useMemo(() => {
     const rings: [string, number][] = [];

src/components/MainScene/SyncedComponents/YellowOrb.tsx

@@ -2,7 +2,7 @@ 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 { useMainSceneStore } from "../../../store";
+import { useStore } 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,11 @@
-import React, { createRef, MutableRefObject, useMemo } from "react";
+import React, { createRef, MutableRefObject, useMemo, memo } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
 import AudioVisualizerColumn from "./AudioVisualizerColumn";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 
-const AudioVisualizer = () => {
+const AudioVisualizer = memo(() => {
-  const analyser = useMainSceneStore((state) => state.audioAnalyser);
+  const analyser = useStore((state) => state.audioAnalyser);
 
   const columnRefs = useMemo(
     () =>
@@ -84,6 +84,6 @@ const AudioVisualizer = () => {
       ))}
     </group>
   );
-};
+});
 
 export default AudioVisualizer;

src/components/MediaScene/Images.tsx

@@ -1,27 +1,27 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {useIdleStore, useMainSceneStore, useSceneStore,} from "../../store";
+import { useStore } from "../../store";
-import {a, useSpring} from "@react-spring/three";
+import { a, useSpring } from "@react-spring/three";
 import dummy from "../../static/sprite/dummy.png";
 import * as THREE from "three";
-import {useLoader} from "react-three-fiber";
+import { useLoader } from "react-three-fiber";
 
 const Images = () => {
-  const idleNodeImages = useIdleStore((state) => state.images);
+  const idleNodeImages = useStore((state) => state.idleImages);
-  const nodeImages = useMainSceneStore(
+  const nodeImages = useStore(
     (state) => state.activeNode.image_table_indices
   );
 
-  const currentScene = useSceneStore((state) => state.currentScene);
+  const currentScene = useStore((state) => state.currentScene);
 
   const [imageScaleY, setImageScaleY] = useState(3.75);
   const [sceneImages, setSceneImages] = useState([] as any);
   const [activeImage, setActiveImage] = useState<THREE.Texture>();
 
-  const currentSite = useMainSceneStore((state) => state.activeSite);
+  const currentSite = useStore((state) => state.activeSite);
 
   const dummyTex = useLoader(THREE.TextureLoader, dummy);
 
-  const mediaPercentageElapsed = useMainSceneStore(
+  const mediaPercentageElapsed = useStore(
     (state) => state.mediaPercentageElapsed
   );
 

src/components/MediaScene/Lof.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React, { memo, useState } from "react";
 import * as THREE from "three";
 import { useFrame, useLoader } from "react-three-fiber";
 import lofSpriteSheet from "../../static/sprite/lof_spritesheet.png";
 import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
 
-const Lof = () => {
+const Lof = memo(() => {
   const lofTex: any = useLoader(THREE.TextureLoader, lofSpriteSheet);
 
   const [animator] = useState(() => {
@@ -18,10 +18,10 @@ const Lof = () => {
   });
 
   return (
-    <sprite position={[-2, 1.8, -3]} scale={[0.8, 0.8, 0.8]}>
+    <sprite position={[-2, 1.8, 0]} scale={[0.8, 0.8, 0.8]}>
       <spriteMaterial attach="material" map={lofTex} />
     </sprite>
   );
-};
+});
 
 export default Lof;

src/components/MediaScene/MediaLoadingBar.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef } from "react";
-import { useMainSceneStore } from "../../store";
+import { useStore } from "../../store";
 import loadingBarContainer from "../../static/sprite/media_loading_bar_container.png";
 import loadingBar from "../../static/sprite/media_loading_bar.png";
 import loadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png";
@@ -12,7 +12,7 @@ import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 
 const MediaLoadingBar = () => {
-  const mediaPercentageElapsed = useMainSceneStore(
+  const mediaPercentageElapsed = useStore(
     (state) => state.mediaPercentageElapsed
   );
   const loadingBarContainerTex = useLoader(

src/components/MediaScene/MediaPlayer.tsx

@@ -6,12 +6,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import {
+import { useStore } from "../../store";
-  useEndSceneStore,
-  useIdleStore,
-  useMainSceneStore,
-  useSceneStore,
-} from "../../store";
 import t from "../../static/webvtt/test.vtt";
 import endroll from "../../static/movie/ENDROLL1.STR[0].webm";
 import xa0001 from "../../static/audio/a/Xa0001.mp4";
@@ -20,34 +15,34 @@ import xa0006 from "../../static/audio/a/Xa0006.mp4";
 const MediaPlayer = () => {
   const [mediaSource, setMediaSource] = useState<any>();
 
-  const currentScene = useSceneStore((state) => state.currentScene);
+  const currentScene = useStore((state) => state.currentScene);
-  const setScene = useSceneStore((state) => state.setScene);
+  const setScene = useStore((state) => state.setScene);
 
-  const setPercentageElapsed = useMainSceneStore(
+  const setPercentageElapsed = useStore(
     (state) => state.setPercentageElapsed
   );
 
-  const idleMedia = useIdleStore((state) => state.media);
+  const idleMedia = useStore((state) => state.idleMedia);
-  const nodeMedia = useMainSceneStore((state) => state.activeNode.media_file);
+  const nodeMedia = useStore((state) => state.activeNode.media_file);
 
-  const triggersFinalVideo = useMainSceneStore(
+  const triggersFinalVideo = useStore(
     (state) => state.activeNode.triggers_final_video
   );
 
   const requestRef = useRef();
   const videoRef = createRef<HTMLVideoElement>();
 
-  const currentSite = useMainSceneStore((state) => state.activeSite);
+  const currentSite = useStore((state) => state.activeSite);
 
   // end scene specific stuff
-  const endMediaPlayedCount = useEndSceneStore(
+  const endMediaPlayedCount = useStore(
-    (state) => state.mediaPlayedCount
+    (state) => state.endMediaPlayedCount
   );
-  const incrementEndMediaPlayedCount = useEndSceneStore(
+  const incrementEndMediaPlayedCount = useStore(
-    (state) => state.incrementMediaPlayedCount
+    (state) => state.incrementEndMediaPlayedCount
   );
-  const resetEndMediaPlayedCount = useEndSceneStore(
+  const resetEndMediaPlayedCount = useStore(
-    (state) => state.resetMediaPlayedCount
+    (state) => state.resetEndMediaPlayedCount
   );
 
   const updateTime = useCallback(() => {
@@ -60,7 +55,7 @@ const MediaPlayer = () => {
       const duration = videoRef.current.duration;
       const percentageElapsed = Math.floor((timeElapsed / duration) * 100);
 
-      if (percentageElapsed % 5 === 0) {
+      if (percentageElapsed % 5 === 0 && percentageElapsed !== 0) {
         setPercentageElapsed(percentageElapsed);
         if (percentageElapsed === 100) {
           videoRef.current.currentTime = 0;

src/components/MediaScene/Selectables/LeftSide.tsx

@@ -1,11 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo, memo } from "react";
 import TriangularPrism from "./LeftSide/TriangularPrism";
 import Cube from "./LeftSide/Cube";
 import { useSpring, a } from "@react-spring/three";
-
+import { useStore } from "../../../store";
-type LeftSideProps = {
-  activeMediaComponent: string;
-};
 
 export type ShapeProps = {
   position: number[];
@@ -13,9 +10,25 @@ export type ShapeProps = {
   active?: boolean;
 };
 
-const LeftSide = (props: LeftSideProps) => {
+const LeftSide = memo(() => {
-  const cubesActive = props.activeMediaComponent === "exit";
+  const activeMediaComponent = useStore(
-  const trianglesActive = props.activeMediaComponent === "play";
+    useCallback(
+      (state) =>
+        state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
+          state.mediaComponentMatrixIndices.sideIdx === 0
+            ? state.mediaComponentMatrixIndices.leftSideIdx
+            : state.mediaComponentMatrixIndices.rightSideIdx
+        ],
+      []
+    )
+  );
+
+  const cubesActive = useMemo(() => activeMediaComponent === "exit", [
+    activeMediaComponent,
+  ]);
+  const trianglesActive = useMemo(() => activeMediaComponent === "play", [
+    activeMediaComponent,
+  ]);
 
   const groupSpringConfig = useMemo(() => ({ duration: 500 }), []);
   const groupSpringFinalDest = useMemo(
@@ -100,6 +113,6 @@ const LeftSide = (props: LeftSideProps) => {
       </a.group>
     </group>
   );
-};
+});
 
 export default LeftSide;

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

@@ -2,10 +2,10 @@ 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 React, { useRef } from "react";
+import React, {memo, useRef} from "react";
 import { ShapeProps } from "../LeftSide";
 
-const Cube = (props: ShapeProps) => {
+const Cube = memo((props: ShapeProps) => {
   const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);
   const darkGrayTex = useLoader(THREE.TextureLoader, darkGrayTextureFile);
 
@@ -34,6 +34,6 @@ const Cube = (props: ShapeProps) => {
       />
     </mesh>
   );
-};
+});
 
 export default Cube;

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

@@ -2,7 +2,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 React, { useRef } from "react";
+import React, { memo, useRef } from "react";
 import { ShapeProps } from "../LeftSide";
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
@@ -15,7 +15,7 @@ type GLTFResult = GLTF & {
   };
 };
 
-const TriangularPrism = (props: ShapeProps) => {
+const TriangularPrism = memo((props: ShapeProps) => {
   const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);
   const darkGrayTex = useLoader(THREE.TextureLoader, darkGrayTextureFile);
 
@@ -33,7 +33,7 @@ const TriangularPrism = (props: ShapeProps) => {
 
   return (
     <mesh
-      scale={[0.45/2, 0.5/2, 0.45/2]}
+      scale={[0.45 / 2, 0.5 / 2, 0.45 / 2]}
       position={props.position as [number, number, number]}
       rotation-y={0.15}
       rotation-z={-0.02}
@@ -46,6 +46,6 @@ const TriangularPrism = (props: ShapeProps) => {
       />
     </mesh>
   );
-};
+});
 
 export default TriangularPrism;

src/components/MediaScene/Selectables/RightSide.tsx

@@ -1,26 +1,21 @@
-import React, { useCallback, useMemo } from "react";
+import React, { memo, useCallback, useMemo } from "react";
-import { useMainSceneStore, useMediaWordStore } from "../../../store";
+import { useStore } from "../../../store";
 import Word from "./RightSide/Word";
 import { a, useSpring } from "@react-spring/three";
 import word_position_states from "../../../resources/word_position_states.json";
 import * as THREE from "three";
+import Lof from "../Lof";
 
-type RightSideProps = {
+const RightSide = memo(() => {
-  activeMediaComponent: string;
+  const words = useStore((state) => state.activeNode.words);
-};
 
-const RightSide = (props: RightSideProps) => {
+  const wordPositionState = useStore(
-  const words = useMainSceneStore((state) => state.activeNode.words);
-
-  const posStateIdx = useMediaWordStore(
-    (state) => state.posStateIdx
-  ).toString();
-
-  const wordPositionState = useMediaWordStore(
     useCallback(
-      () =>
+      (state) =>
-        word_position_states[posStateIdx as keyof typeof word_position_states],
+        word_position_states[
-      [posStateIdx]
+          state.mediaWordPosStateIdx.toString() as keyof typeof word_position_states
+        ],
+      []
     )
   );
 
@@ -45,8 +40,21 @@ const RightSide = (props: RightSideProps) => {
     []
   );
 
+  const activeMediaComponent = useStore(
+    useCallback(
+      (state) =>
+        state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
+          state.mediaComponentMatrixIndices.sideIdx === 0
+            ? state.mediaComponentMatrixIndices.leftSideIdx
+            : state.mediaComponentMatrixIndices.rightSideIdx
+        ],
+      []
+    )
+  );
+
   return (
     <group position={[0, 0, -3]}>
+      <Lof />
       <a.group
         position-x={wordPositionStateSpring.crossPosX}
         position-y={wordPositionStateSpring.crossPosY}
@@ -74,22 +82,22 @@ const RightSide = (props: RightSideProps) => {
         word={words[1]}
         posX={wordPositionStateSpring.fstWordPosX}
         posY={wordPositionStateSpring.fstWordPosY}
-        active={props.activeMediaComponent === "fstWord"}
+        active={activeMediaComponent === "fstWord"}
       />
       <Word
         word={words[2]}
         posX={wordPositionStateSpring.sndWordPosX}
         posY={wordPositionStateSpring.sndWordPosY}
-        active={props.activeMediaComponent === "sndWord"}
+        active={activeMediaComponent === "sndWord"}
       />
       <Word
         word={words[3]}
         posX={wordPositionStateSpring.thirdWordPosX}
         posY={wordPositionStateSpring.thirdWordPosY}
-        active={props.activeMediaComponent === "thirdWord"}
+        active={activeMediaComponent === "thirdWord"}
       />
     </group>
   );
-};
+});
 
 export default RightSide;

src/components/SSknScene/SSknBackground.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import ssknBackground from "../../static/sprite/sskn_background.png";
 import ssknBackgroundText from "../../static/sprite/sskn_background_text.png";
 import { useLoader } from "react-three-fiber";
@@ -6,7 +6,7 @@ import * as THREE from "three";
 import ssknTopLabel from "../../static/sprite/sskn_top_label.png";
 import ssknDango from "../../static/sprite/sskn_dango.png";
 
-const SSknBackground = () => {
+const SSknBackground = memo(() => {
   const ssknBackgroundTex = useLoader(THREE.TextureLoader, ssknBackground);
   const ssknBackgroundTextTex = useLoader(
     THREE.TextureLoader,
@@ -41,6 +41,6 @@ const SSknBackground = () => {
       </sprite>
     </>
   );
-};
+});
 
 export default SSknBackground;

src/components/SSknScene/SSknHUD.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import ssknOk from "../../static/sprite/sskn_ok.png";
 import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png";
 import ssknCancel from "../../static/sprite/sskn_cancel.png";
@@ -8,7 +8,6 @@ import ssknArrow from "../../static/sprite/sskn_arrow.png";
 import ssknTextWrapper from "../../static/sprite/sskn_text_wrapper.png";
 import ssknTextWrapperInactive from "../../static/sprite/sskn_text_wrapper_inactive.png";
 import ssknLine from "../../static/sprite/sskn_line.png";
-import ssknLoadingBar from "../../static/sprite/SSkn_loading_bar.png";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import SSknLoadingBar from "./SSknLoadingBar";
@@ -18,7 +17,7 @@ type SSknHUDProps = {
   loading: boolean;
 };
 
-const SSknHUD = (props: SSknHUDProps) => {
+const SSknHUD = memo((props: SSknHUDProps) => {
   const ssknOkTex = useLoader(THREE.TextureLoader, ssknOk);
   const ssknOkInactiveTex = useLoader(THREE.TextureLoader, ssknOkInactive);
   const ssknCancelTex = useLoader(THREE.TextureLoader, ssknCancel);
@@ -102,6 +101,6 @@ const SSknHUD = (props: SSknHUDProps) => {
       </sprite>
     </>
   );
-};
+});
 
 export default SSknHUD;

src/components/SSknScene/SSknIcon.tsx

@@ -1,9 +1,9 @@
-import React, { useRef } from "react";
+import React, { memo, useRef } from "react";
 import ssknIcon from "../../static/sprite/SSkn_icon.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
 
-const SSknIcon = () => {
+const SSknIcon = memo(() => {
   const ssknIconTex = useLoader(THREE.TextureLoader, ssknIcon);
   const ssknIconRef = useRef<THREE.Object3D>();
   const ssknIconShadowRef = useRef<THREE.Object3D>();
@@ -49,6 +49,6 @@ const SSknIcon = () => {
       </mesh>
     </>
   );
-};
+});
 
 export default SSknIcon;

src/components/TextRenderer/MediaYellowTextAnimator.tsx

@@ -1,31 +1,81 @@
-import React from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
-import { useMediaBigTextStore } from "../../store";
+import { useStore } from "../../store";
 import { a, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 
-const MediaYellowTextAnimator = () => {
+const MediaYellowTextAnimator = memo(() => {
-  const transformState = useMediaBigTextStore((state) => state.transformState);
+  const [lastLeftComponent, setLastLeftComponent] = useState("play");
-  const textArr = useMediaBigTextStore((state) => state.text).split("");
+  const [textArr, setTextArr] = useState("Play".split(""));
+  const [posY, setPosY] = useState(0.05);
+  const [xOffset, setXOffset] = useState(0);
 
   const trail = useTrail(textArr.length, {
-    posX: transformState.posX,
+    posY: posY,
-    posY: transformState.posY,
     config: { duration: 280 },
   });
 
+  const activeMediaComponent = useStore(
+    useCallback(
+      (state) =>
+        state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
+          state.mediaComponentMatrixIndices.sideIdx === 0
+            ? state.mediaComponentMatrixIndices.leftSideIdx
+            : state.mediaComponentMatrixIndices.rightSideIdx
+        ],
+      []
+    )
+  );
+
+  useEffect(() => {
+    if (
+      (activeMediaComponent === "play" || activeMediaComponent === "exit") &&
+      activeMediaComponent !== lastLeftComponent
+    ) {
+      setLastLeftComponent(activeMediaComponent);
+      setXOffset(-1);
+
+      setTimeout(() => {
+        if (activeMediaComponent === "play") {
+          setPosY(0.05);
+        } else {
+          setPosY(-0.08);
+        }
+      }, 400);
+
+      setTimeout(() => {
+        setTextArr(
+          (
+            activeMediaComponent.charAt(0).toUpperCase() +
+            activeMediaComponent.slice(1)
+          ).split("")
+        );
+      }, 1000);
+
+      setTimeout(() => {
+        setXOffset(0);
+      }, 1200);
+    }
+  }, [activeMediaComponent, lastLeftComponent]);
+
+  useEffect(() => {
+    return () => {
+      setLastLeftComponent("play");
+    };
+  }, []);
+
   return (
     <group position={[0, 0, 10]}>
-      {trail.map(({ posX, posY }, idx) => (
+      {trail.map(({ posY }, idx) => (
         <a.group
           key={idx}
-          position-x={posX}
           position-y={posY}
+          position-x={-0.8}
           position-z={-8.7}
           scale={[0.04, 0.06, 0.04]}
         >
           <BigLetter
             color={"yellow"}
-            xOffset={transformState.xOffset}
+            xOffset={xOffset}
             letter={textArr[idx]}
             letterIdx={idx}
             key={idx}
@@ -34,6 +84,6 @@ const MediaYellowTextAnimator = () => {
       ))}
     </group>
   );
-};
+});
 
 export default MediaYellowTextAnimator;

src/components/TextRenderer/StaticBigLetter.tsx

@@ -6,7 +6,7 @@ import { useLoader } from "react-three-fiber";
 import orange_font_json from "../../resources/font_data/big_font.json";
 import { a, useSpring } from "@react-spring/three";
 import React, { useMemo, memo } from "react";
-import { useMainSceneStore } from "../../store";
+import { useStore } from "../../store";
 
 const StaticBigLetter = memo(
   (props: {
@@ -20,7 +20,7 @@ const StaticBigLetter = memo(
     colIdx?: number;
     intro?: boolean;
   }) => {
-    const exitAnimation = useMainSceneStore(
+    const exitAnimation = useStore(
       (state) => state.pauseExitAnimation
     );
 

src/components/TextRenderer/YellowTextRenderer.tsx

@@ -1,24 +1,24 @@
 import React, { useEffect, useRef } from "react";
-import { useMainSceneStore } from "../../store";
+import { useStore } from "../../store";
 import { a, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 
 const YellowTextRenderer = (props: { visible?: boolean }) => {
-  const xOffset = useMainSceneStore((state) => state.bigTextXOffset);
+  const xOffset = useStore((state) => state.bigTextXOffset);
-  const visible = useMainSceneStore((state) => state.bigTextVisible);
+  const visible = useStore((state) => state.bigTextVisible);
-  const color = useMainSceneStore((state) => state.bigTextColor);
+  const color = useStore((state) => state.bigTextColor);
 
-  const textRef = useRef(useMainSceneStore.getState().bigText.split(""));
+  const textRef = useRef(useStore.getState().bigText.split(""));
 
   const [trail, set] = useTrail(textRef.current.length, () => ({
-    posX: useMainSceneStore.getState().bigTextPos[0],
+    posX: useStore.getState().bigTextPos[0],
-    posY: useMainSceneStore.getState().bigTextPos[1],
+    posY: useStore.getState().bigTextPos[1],
     config: { duration: 280 },
   }));
 
   useEffect(
     () =>
-      useMainSceneStore.subscribe(
+      useStore.subscribe(
         (state) => {
           textRef.current = (state as any).bigText.split("");
         },
@@ -28,7 +28,7 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
   );
 
   useEffect(() => {
-    useMainSceneStore.subscribe(set, (state) => ({
+    useStore.subscribe(set, (state) => ({
       posX: state.bigTextPos[0],
       posY: state.bigTextPos[1],
     }));

src/core/StateManagers/BootSceneManagers/BootAuthorizeUserManager.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useAuthorizeUserStore, useBootStore } from "../../../store";
+import { useAuthorizeUserStore } from "../../../store";
 
 const BootAuthorizeUserManager = (props: StateManagerProps) => {
   const setActiveLetterTextureOffset = useAuthorizeUserStore(

src/core/StateManagers/BootSceneManagers/BootComponentManager.tsx

@@ -1,13 +1,10 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useBootStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const BootComponentManager = (props: StateManagerProps) => {
-  const toggleComponentMatrixIdx = useBootStore(
+  const toggleComponentMatrixIdx = useStore(
-    (state) => state.toggleComponentMatrixIdx
+    (state) => state.toggleBootComponentMatrixIdx
-  );
-  const setAuthorizeUserMatrixIdx = useBootStore(
-    (state) => state.setAuthorizeUserMatrixIdx
   );
 
   const dispatchObject = useCallback(
@@ -29,13 +26,9 @@ const BootComponentManager = (props: StateManagerProps) => {
         case "authorize_user_up":
         case "authorize_user_left":
         case "authorize_user_down":
-          return {
-            action: setAuthorizeUserMatrixIdx,
-            value: newAuthorizeUserMatrixIdx,
-          };
       }
     },
-    [setAuthorizeUserMatrixIdx, toggleComponentMatrixIdx]
+    [toggleComponentMatrixIdx]
   );
 
   useEffect(() => {

src/core/StateManagers/GameManagers/GameLoader.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { useMainSceneStore, useSiteSaveStore } from "../../../store";
+import { useStore, useSiteSaveStore } from "../../../store";
 import { StateManagerProps } from "../EventManager";
 import node_huds from "../../../resources/node_huds.json";
 import site_a from "../../../resources/site_a.json";
@@ -18,21 +18,21 @@ const GameLoader = (props: StateManagerProps) => {
   // const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
 
   // big text setter
-  const setBigTexPos = useMainSceneStore((state) => state.setBigTextPos);
+  const setBigTexPos = useStore((state) => state.setBigTextPos);
-  const setBigText = useMainSceneStore((state) => state.setBigText);
+  const setBigText = useStore((state) => state.setBigText);
 
   // site setter
-  const setSiteRot = useMainSceneStore((state) => state.setSiteRot);
+  const setSiteRot = useStore((state) => state.setSiteRot);
-  const setCurrentSite = useMainSceneStore((state) => state.setActiveSite);
+  const setCurrentSite = useStore((state) => state.setActiveSite);
 
   // node setter
-  const setActiveNode = useMainSceneStore((state) => state.setNode);
+  const setActiveNode = useStore((state) => state.setNode);
-  const setNodeMatrixIndices = useMainSceneStore(
+  const setNodeMatrixIndices = useStore(
     (state) => state.setNodeMatrixIndices
   );
 
   // node hud setter
-  const setHud = useMainSceneStore((state) => state.setHud);
+  const setHud = useStore((state) => state.setHud);
 
   const changeSite = useCallback((site: string) => {
     // load new site

src/core/StateManagers/GameManagers/SceneManager.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useMainSceneStore, useSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const SceneManager = (props: StateManagerProps) => {
-  const setScene = useSceneStore((state) => state.setScene);
+  const setScene = useStore((state) => state.setScene);
-  const setMainSceneIntro = useMainSceneStore((state) => state.setIntro);
+  const setMainSceneIntro = useStore((state) => state.setIntro);
 
   const dispatchObject = useCallback(
     (eventState: { event: string; scene: string }) => {

src/core/StateManagers/GameManagers/SubsceneManager.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useBootStore, useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const SubsceneManager = (props: StateManagerProps) => {
-  const setMainSubscene = useMainSceneStore((state) => state.setSubscene);
+  const setMainSubscene = useStore((state) => state.setMainSubscene);
-  const setBootSubscene = useBootStore((state) => state.setSubscene);
+  const setBootSubscene = useStore((state) => state.setBootSubscene);
 
   const dispatchObject = useCallback(
     (eventState: { event: string }) => {
@@ -62,7 +62,7 @@ const SubsceneManager = (props: StateManagerProps) => {
 
       if (dispatchedObject) {
         setTimeout(() => {
-          dispatchedObject.action(dispatchedObject.value);
+          dispatchedObject.action(dispatchedObject.value as any);
         }, dispatchedObject.delay);
       }
     }

src/core/StateManagers/MainSceneEventManager.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useMainSceneStore } from "../../store";
+import { useStore } from "../../store";
 import handleMainSceneEvent from "../mainSceneEventHandler";
 import { getKeyCodeAssociation } from "../utils/keyPressUtils";
 import NodeManager from "./MainSceneManagers/NodeManager";
@@ -24,25 +24,25 @@ type MainSceneEventManagerProps = {
 
 const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
   // all the possible context needed to calculate new state
-  const currentSite = useMainSceneStore((state) => state.activeSite);
+  const currentSite = useStore((state) => state.activeSite);
-  const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
+  const activeNodeId = useStore((state) => state.activeNode.id);
-  const nodeMatrixIndices = useMainSceneStore(
+  const nodeMatrixIndices = useStore(
     (state) => state.activeNodeMatrixIndices
   );
-  const siteRotY = useMainSceneStore((state) => state.siteRot[1]);
+  const siteRotY = useStore((state) => state.siteRot[1]);
-  const sitePosY = useMainSceneStore((state) => state.sitePos[1]);
+  const sitePosY = useStore((state) => state.sitePos[1]);
-  const activeLevel = useMainSceneStore((state) => state.activeLevel);
+  const activeLevel = useStore((state) => state.activeLevel);
-  const mainSubscene = useMainSceneStore((state) => state.subscene);
+  const mainSubscene = useStore((state) => state.mainSubscene);
-  const selectedLevel = useMainSceneStore((state) => state.selectedLevel);
+  const selectedLevel = useStore((state) => state.selectedLevel);
-  const pauseMatrixIdx = useMainSceneStore(
+  const pauseMatrixIdx = useStore(
     (state) => state.pauseComponentMatrixIdx
   );
-  const activePauseComponent = useMainSceneStore(
+  const activePauseComponent = useStore(
     useCallback((state) => state.pauseComponentMatrix[pauseMatrixIdx], [
       pauseMatrixIdx,
     ])
   );
-  const gameProgress = useMainSceneStore((state) => state.gameProgress);
+  const gameProgress = useStore((state) => state.gameProgress);
 
   const timePassedSinceLastKeyPress = useRef(-1);
 

src/core/StateManagers/MainSceneManagers/BigTextManager.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useEffect } from "react";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
 import { StateManagerProps } from "../EventManager";
 import { HUDType } from "../../../components/MainScene/SyncedComponents/HUD";
 
 const BigTextManager = (props: StateManagerProps) => {
-  const setText = useMainSceneStore((state) => state.setBigText);
+  const setText = useStore((state) => state.setBigText);
-  const setColor = useMainSceneStore((state) => state.setBigTextColor);
+  const setColor = useStore((state) => state.setBigTextColor);
-  const setVisible = useMainSceneStore((state) => state.setBigTextVisible);
+  const setVisible = useStore((state) => state.setBigTextVisible);
-  const setXOffset = useMainSceneStore((state) => state.setBigTextXOffset);
+  const setXOffset = useStore((state) => state.setBigTextXOffset);
-  const setPos = useMainSceneStore((state) => state.setBigTextPos);
+  const setPos = useStore((state) => state.setBigTextPos);
 
   const animateYellowTextWithMove = useCallback(
     (

src/core/StateManagers/MainSceneManagers/IdleManager.tsx

@@ -3,11 +3,11 @@ import { StateManagerProps } from "../EventManager";
 import { SiteType } from "../../../components/MainScene/SyncedComponents/Site";
 import site_a from "../../../resources/site_a.json";
 import site_b from "../../../resources/site_b.json";
-import { useIdleStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const IdleManager = (props: StateManagerProps) => {
-  const setImages = useIdleStore((state) => state.setImages);
+  const setImages = useStore((state) => state.setIdleImages);
-  const setMedia = useIdleStore((state) => state.setMedia);
+  const setMedia = useStore((state) => state.setIdleMedia);
 
   const playIdleMedia = useCallback(
     (site: string) => {

src/core/StateManagers/MainSceneManagers/LainManager.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from "react";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import { StateManagerProps } from "../EventManager";
 
 const LainManager = (props: StateManagerProps) => {
-  const setLainMoveState = useMainSceneStore((state) => state.setLainMoveState);
+  const setLainMoveState = useStore((state) => state.setLainMoveState);
 
   const dispatchObject = useCallback(
     (eventState: { event: string }) => {

src/core/StateManagers/MainSceneManagers/LevelManager.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const LevelManager = (props: StateManagerProps) => {
-  const setActiveLevel = useMainSceneStore((state) => state.setActiveLevel);
+  const setActiveLevel = useStore((state) => state.setActiveLevel);
 
   const dispatchObject = useCallback(
     (eventState: { event: string; level: string }) => {

src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const LevelSelectionManager = (props: StateManagerProps) => {
-  const setSelectedLevel = useMainSceneStore((state) => state.setSelectedLevel);
+  const setSelectedLevel = useStore((state) => state.setSelectedLevel);
 
   const dispatchObject = useCallback(
     (eventState: { event: string; selectedLevelIdx: number }) => {

src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx

@@ -1,18 +1,18 @@
 import { useCallback, useEffect } from "react";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const MiddleRingManager = (props: any) => {
-  const setRot = useMainSceneStore((state) => state.setMiddleRingRot);
+  const setRot = useStore((state) => state.setMiddleRingRot);
-  const setPos = useMainSceneStore((state) => state.setMiddleRingPos);
+  const setPos = useStore((state) => state.setMiddleRingPos);
-  const setRotating = useMainSceneStore((state) => state.setMiddleRingRotating);
+  const setRotating = useStore((state) => state.setMiddleRingRotating);
-  const setNoiseAmp = useMainSceneStore((state) => state.setMiddleRingNoiseAmp);
+  const setNoiseAmp = useStore((state) => state.setMiddleRingNoiseAmp);
-  const setWobbleAmp = useMainSceneStore(
+  const setWobbleAmp = useStore(
     (state) => state.setMiddleRingWobbleAmp
   );
-  const setFakeRingVisible = useMainSceneStore(
+  const setFakeRingVisible = useStore(
     (state) => state.setFakeMiddleRingVisible
   );
-  const setPartSeparatorVal = useMainSceneStore(
+  const setPartSeparatorVal = useStore(
     (state) => state.setMiddleRingPartSeparatorVal
   );
 

src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect } from "react";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import { StateManagerProps } from "../EventManager";
 import {HUDType} from "../../../components/MainScene/SyncedComponents/HUD";
 
 const NodeHUDManager = (props: StateManagerProps) => {
-  const set = useMainSceneStore((state) => state.setHud);
+  const set = useStore((state) => state.setHud);
-  const toggleActive = useMainSceneStore((state) => state.toggleHudActive);
+  const toggleActive = useStore((state) => state.toggleHudActive);
 
   const moveAndChangeNode = useCallback(
     (hud: HUDType) => {

src/core/StateManagers/MainSceneManagers/NodeManager.tsx

@@ -1,14 +1,14 @@
 import { useCallback, useEffect } from "react";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import { StateManagerProps } from "../EventManager";
 import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
 
 const NodeManager = (props: StateManagerProps) => {
-  const setActiveNode = useMainSceneStore((state) => state.setNode);
+  const setActiveNode = useStore((state) => state.setNode);
-  const setActiveNodePos = useMainSceneStore((state) => state.setNodePos);
+  const setActiveNodePos = useStore((state) => state.setNodePos);
-  const setActiveNodeRot = useMainSceneStore((state) => state.setNodeRot);
+  const setActiveNodeRot = useStore((state) => state.setNodeRot);
-  const setActiveNodeState = useMainSceneStore((state) => state.setNodeState);
+  const setActiveNodeState = useStore((state) => state.setNodeState);
-  const setNodeMatrixIndices = useMainSceneStore(
+  const setNodeMatrixIndices = useStore(
     (state) => state.setNodeMatrixIndices
   );
 

src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const PauseComponentManager = (props: StateManagerProps) => {
-  const setComponentMatrixIdx = useMainSceneStore(
+  const setComponentMatrixIdx = useStore(
     (state) => state.setPauseComponentMatrixIdx
   );
-  const setExitAnimation = useMainSceneStore(
+  const setExitAnimation = useStore(
     (state) => state.setPauseExitAnimation
   );
 

src/core/StateManagers/MainSceneManagers/SiteManager.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect } from "react";
-import { useMainSceneStore } from "../../../store";
+import { useStore } from "../../../store";
 import { StateManagerProps } from "../EventManager";
 
 const SiteManager = (props: StateManagerProps) => {
-  const setPos = useMainSceneStore((state) => state.setSitePos);
+  const setPos = useStore((state) => state.setSitePos);
-  const setRot = useMainSceneStore((state) => state.setSiteRot);
+  const setRot = useStore((state) => state.setSiteRot);
-  const setRotX = useMainSceneStore((state) => state.setSiteRotX);
+  const setRotX = useStore((state) => state.setSiteRotX);
 
   const dispatchObject = useCallback(
     (eventState: { event: string; sitePosY: number; siteRotY: number }) => {

src/core/StateManagers/MediaSceneEventManager.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { useMainSceneStore, useMediaWordStore } from "../../store";
+import { useStore } from "../../store";
 import { getKeyCodeAssociation } from "../utils/keyPressUtils";
 import SceneManager from "./GameManagers/SceneManager";
 import handleMediaSceneEvent from "../mediaSceneEventHandler";
 import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
-import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager";
 
 const MediaSceneEventManager = () => {
   // all the possible context needed to calculate new state
-  const activeMediaComponent = useMainSceneStore(
+  const activeMediaComponent = useStore(
     useCallback(
       (state) =>
         state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
@@ -20,11 +19,13 @@ const MediaSceneEventManager = () => {
     )
   );
 
-  const rightSideComponentIdx = useMainSceneStore(
+  const rightSideComponentIdx = useStore(
     (state) => state.mediaComponentMatrixIndices.rightSideIdx
   );
 
-  const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
+  const wordPosStateIdx = useStore(
+    (state) => state.mediaWordPosStateIdx
+  );
 
   const [eventState, setEventState] = useState<any>();
 
@@ -60,7 +61,6 @@ const MediaSceneEventManager = () => {
     <>
       <MediaComponentManager eventState={eventState!} />
       <SceneManager eventState={eventState!} />
-      <MediaYellowTextManager eventState={eventState!} />
     </>
   );
 };

src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx

@@ -1,26 +1,28 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useMainSceneStore, useMediaWordStore } from "../../../store";
+import { useStore } from "../../../store";
 import * as THREE from "three";
 
 const MediaComponentManager = (props: StateManagerProps) => {
-  const toggleSide = useMainSceneStore((state) => state.toggleMediaSide);
+  const toggleSide = useStore((state) => state.toggleMediaSide);
-  const setLeftComponentMatrixIdx = useMainSceneStore(
+  const setLeftComponentMatrixIdx = useStore(
     (state) => state.setMediaLeftComponentMatrixIdx
   );
-  const setRightComponentMatrixIdx = useMainSceneStore(
+  const setRightComponentMatrixIdx = useStore(
     (state) => state.setMediaRightComponentMatrixIdx
   );
-  const setWordPosStateIdx = useMediaWordStore((state) => state.setPosStateIdx);
+  const setWordPosStateIdx = useStore(
+    (state) => state.setMediaWordPosStateIdx
+  );
 
-  const resetComponentMatrixIndices = useMainSceneStore(
+  const resetComponentMatrixIndices = useStore(
     (state) => state.resetMediaComponentMatrixIndices
   );
-  const resetWordPosStateIdx = useMediaWordStore(
+  const resetWordPosStateIdx = useStore(
-    (state) => state.resetPosStateIdx
+    (state) => state.resetMediaWordPosStateIdx
   );
 
-  const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
+  const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
 
   const playMedia = useCallback(() => {
     const mediaElement = document.getElementById("media") as HTMLMediaElement;

src/core/StateManagers/MediaSceneManagers/MediaYellowTextManager.tsx

@@ -1,69 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { useMediaBigTextStore } from "../../../store";
-import { StateManagerProps } from "../EventManager";
-
-const MediaYellowTextManager = (props: StateManagerProps) => {
-  const setTransformState = useMediaBigTextStore(
-    (state) => state.setTransformState
-  );
-
-  const setText = useMediaBigTextStore((state) => state.setText);
-
-  const animateMediaYellowText = useCallback(
-    (
-      targetMediaComponentText: string,
-      targetMediaComponentTextPos: number[]
-    ) => {
-      // make current text shrink
-      setTransformState(-1, "xOffset");
-
-      setTimeout(() => {
-        setTransformState(targetMediaComponentTextPos[0], "posX");
-        setTransformState(targetMediaComponentTextPos[1], "posY");
-      }, 400);
-
-      setTimeout(() => {
-        setText(targetMediaComponentText);
-      }, 1000);
-
-      setTimeout(() => {
-        // unshrink text
-        setTransformState(0, "xOffset");
-      }, 1200);
-    },
-    [setText, setTransformState]
-  );
-
-  const dispatchObject = useCallback(
-    (eventState: { event: string }) => {
-      switch (eventState.event) {
-        case "media_leftside_up":
-        case "throw_node_media":
-          return {
-            action: animateMediaYellowText,
-            value: ["Play", [-0.8, 0.05, 0.6]],
-          };
-        case "media_leftside_down":
-          return {
-            action: animateMediaYellowText,
-            value: ["Exit", [-0.8, -0.08, 0.6]],
-          };
-      }
-    },
-    [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/core/StateManagers/SSknSceneManager.tsx

@@ -2,18 +2,16 @@ import React, { useCallback, useEffect, useState } from "react";
 import { getKeyCodeAssociation } from "../utils/keyPressUtils";
 import SceneManager from "./GameManagers/SceneManager";
 import handleSSknSceneEvent from "../ssknSceneEventHandler";
-import { useSSknStore } from "../../store";
+import { useStore } from "../../store";
 import SSknComponentManager from "./SSknSceneManagers/SSknComponentManager";
 
 const SSknSceneManager = () => {
   // all the possible context needed to calculate new state
-  const ssknComponentMatrixIdx = useSSknStore(
+  const activeSSknComponent = useStore(
-    (state) => state.componentMatrixIdx
+    useCallback(
-  );
+      (state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx],
-  const activeSSknComponent = useSSknStore(
+      []
-    useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
+    )
-      ssknComponentMatrixIdx,
-    ])
   );
 
   const [eventState, setEventState] = useState<any>();

src/core/StateManagers/SSknSceneManagers/SSknComponentManager.tsx

@@ -1,19 +1,24 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useSSknStore } from "../../../store";
+import { useStore } from "../../../store";
 
 const SSknComponentManager = (props: StateManagerProps) => {
-  const toggleComponentMatrixIdx = useSSknStore(
+  const toggleComponentMatrixIdx = useStore(
-    (state) => state.toggleComponentMatrixIdx
+    (state) => state.toggleSSknComponentMatrixIdx
   );
-  const resetComponentMatrixIdx = useSSknStore(
+  const resetComponentMatrixIdx = useStore(
-    (state) => state.resetComponentMatrixIdx
+    (state) => state.resetSSknComponentMatrixIdx
   );
-  const toggleLoading = useSSknStore((state) => state.toggleLoading);
+  const setSSknLoading = useStore((state) => state.setSSknLoading);
 
   const dispatchObject = useCallback(
     (eventState: { event: string }) => {
       switch (eventState.event) {
+        case "throw_node_sskn":
+        case "rip_node_sskn":
+          return {
+            action: resetComponentMatrixIdx,
+          };
         case "sskn_ok_down":
         case "sskn_cancel_up":
           return {
@@ -21,11 +26,17 @@ const SSknComponentManager = (props: StateManagerProps) => {
           };
         case "sskn_ok_select":
           return {
-            action: toggleLoading,
+            action: setSSknLoading,
+            value: true,
+          };
+        case "sskn_cancel_select":
+          return {
+            action: setSSknLoading,
+            value: false,
           };
       }
     },
-    [toggleComponentMatrixIdx, toggleLoading]
+    [resetComponentMatrixIdx, setSSknLoading, toggleComponentMatrixIdx]
   );
 
   useEffect(() => {
@@ -33,7 +44,7 @@ const SSknComponentManager = (props: StateManagerProps) => {
       const dispatchedObject = dispatchObject(props.eventState);
 
       if (dispatchedObject) {
-        dispatchedObject.action();
+        dispatchedObject.action(dispatchedObject.value as any);
       }
     }
   }, [props.eventState, dispatchObject]);

src/scenes/BootScene.tsx

@@ -2,20 +2,21 @@ import React, { useCallback, useEffect, useState } from "react";
 import BootAccela from "../components/Boot/BootAccela";
 import BootAnimation from "../components/Boot/BootAnimation";
 import BootMainMenuComponents from "../components/Boot/BootMainMenuComponents";
-import { useBootStore } from "../store";
+import { useStore } from "../store";
 import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
 import BootLoadData from "../components/Boot/BootLoadData";
 
 const BootScene = () => {
-  const activeSubscene = useBootStore((state) => state.subscene);
+  const activeSubscene = useStore((state) => state.bootSubscene);
-  const activeBootElement = useBootStore(
+
+  const activeBootElement = useStore(
     useCallback(
       (state) =>
-        state.componentMatrix[
+        state.bootComponentMatrix[
-          activeSubscene as keyof typeof state.componentMatrix
+          activeSubscene as keyof typeof state.bootComponentMatrix
         ][
-          state.componentMatrixIndices[
+          state.bootComponentMatrixIndices[
-            activeSubscene as keyof typeof state.componentMatrixIndices
+            activeSubscene as keyof typeof state.bootComponentMatrixIndices
           ]
         ],
       [activeSubscene]

src/scenes/ChangeDiscScene.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
-import { useMainSceneStore, useSceneStore } from "../store";
+import { useStore } from "../store";
 
 const ChangeDiscScene = () => {
-  const setScene = useSceneStore((state) => state.setScene);
+  const setScene = useStore((state) => state.setScene);
-  const currentSite = useMainSceneStore((state) => state.activeSite);
+  const currentSite = useStore((state) => state.activeSite);
 
   useEffect(() => {
     if (currentSite === "a") {

src/scenes/EndScene.tsx

@@ -1,13 +1,15 @@
 import React, { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
-import { useEndSceneStore, useMainSceneStore } from "../store";
+import { useStore } from "../store";
 import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
 
 const EndScene = () => {
-  const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
+  const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
 
-  const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount);
+  const mediaPlayedCount = useStore(
+    (state) => state.endMediaPlayedCount
+  );
 
   const mainCylinderRef = useRef<THREE.Object3D>();
 

src/scenes/GateScene.tsx

@@ -3,11 +3,11 @@ import GateSide from "../components/GateScene/GateSide";
 import { OrbitControls } from "@react-three/drei";
 import GateHUD from "../components/GateScene/GateHUD";
 import GateMiddleObject from "../components/GateScene/GateMiddleObject";
-import { useGateStore } from "../store";
+import { useStore } from "../store";
 import GateSceneManager from "../core/StateManagers/GateSceneManager";
 
 const GateScene = () => {
-  const gateLvl = useGateStore((state) => state.gateLvl);
+  const gateLvl = useStore((state) => state.gateLvl);
   const [introAnim, setIntroAnim] = useState(true);
 
   useEffect(() => {

src/scenes/IdleMediaScene.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
-import { useIdleStore } from "../store";
+import { useStore } from "../store";
 import Images from "../components/MediaScene/Images";
 
 const IdleMediaScene = () => {
-  const idleMedia = useIdleStore((state) => state.media);
+  const idleMedia = useStore((state) => state.idleMedia);
 
   useEffect(() => {
     document.getElementsByTagName("canvas")[0].className =

src/scenes/MainScene.tsx

@@ -3,14 +3,14 @@ import { OrbitControls } from "@react-three/drei";
 import React, { Suspense, useEffect, useMemo } from "react";
 import Lain from "../components/MainScene/Lain";
 import Preloader from "../components/Preloader";
-import { useMainSceneStore } from "../store";
+import { useStore } from "../store";
 import Pause from "../components/MainScene/PauseSubscene/Pause";
 import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
 import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection";
 
 const MainScene = () => {
-  const currentSubscene = useMainSceneStore((state) => state.subscene);
+  const currentSubscene = useStore((state) => state.mainSubscene);
-  const shouldIntro = useMainSceneStore((state) => state.intro);
+  const shouldIntro = useStore((state) => state.intro);
 
   const isPaused = useMemo(() => currentSubscene === "pause", [
     currentSubscene,

src/scenes/MediaScene.tsx

@@ -1,36 +1,32 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
-import { useMainSceneStore } from "../store";
+import { useStore } from "../store";
 import LeftSide from "../components/MediaScene/Selectables/LeftSide";
 import RightSide from "../components/MediaScene/Selectables/RightSide";
 import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
 import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
 import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
-import Lof from "../components/MediaScene/Lof";
 import Images from "../components/MediaScene/Images";
 import MediumLetter from "../components/TextRenderer/MediumLetter";
 import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
 import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
 
 const MediaScene = () => {
-  const activeNodeName = useMainSceneStore((state) =>
+  const nodeNameText = useStore(
-    state.activeNode.node_name.split("")
-  );
-  const activeNodeMedia = useMainSceneStore(
-    (state) => state.activeNode.media_file
-  );
-
-  const activeMediaComponent = useMainSceneStore(
     useCallback(
       (state) =>
-        state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
+        state.activeNode.node_name
-          state.mediaComponentMatrixIndices.sideIdx === 0
+          .split("")
-            ? state.mediaComponentMatrixIndices.leftSideIdx
+          .map((letter: string, idx: number) => (
-            : state.mediaComponentMatrixIndices.rightSideIdx
+            <MediumLetter letter={letter} letterIdx={idx} key={idx} />
-        ],
+          )),
       []
     )
   );
 
+  const activeNodeMedia = useStore(
+    (state) => state.activeNode.media_file
+  );
+
   useEffect(() => {
     document.getElementsByTagName("canvas")[0].className =
       "media-scene-background";
@@ -44,21 +40,18 @@ const MediaScene = () => {
     <perspectiveCamera position-z={3}>
       <group position={[0.4, -0.3, 0]}>
         <pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
-        <LeftSide activeMediaComponent={activeMediaComponent!} />
+        <LeftSide />
         <group position={[0, 0.5, -3]}>
           <MediaLoadingBar />
           <NodeNameContainer />
         </group>
         <group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
-          {activeNodeName.map((letter: string, idx: number) => (
+          {nodeNameText}
-            <MediumLetter letter={letter} letterIdx={idx} key={idx} />
-          ))}
         </group>
         <MediaYellowTextAnimator />
 
         <group visible={activeNodeMedia.includes("XA")}>
-          <RightSide activeMediaComponent={activeMediaComponent!} />
+          <RightSide />
-          <Lof />
           <AudioVisualizer />
           <Images />
         </group>

src/scenes/PolytanScene.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import PolytanBear from "../components/PolytanScene/PolytanBear";
 import PolytanBackground from "../components/PolytanScene/PolytanBackground";
-import { usePolytanStore } from "../store";
+import { useStore } from "../store";
 
 const PolytanScene = () => {
-  const unlockedParts = usePolytanStore((state) => state.unlockedParts);
+  const unlockedParts = useStore(
+    (state) => state.polytanUnlockedParts
+  );
 
   return (
     <perspectiveCamera>

src/scenes/SSknScene.tsx

@@ -2,20 +2,18 @@ import React, { useCallback } from "react";
 import SSknIcon from "../components/SSknScene/SSknIcon";
 import SSknBackground from "../components/SSknScene/SSknBackground";
 import SSknHUD from "../components/SSknScene/SSknHUD";
-import { useSSknStore } from "../store";
+import { useStore } from "../store";
 import SSknSceneManager from "../core/StateManagers/SSknSceneManager";
 
 const SSknScene = () => {
-  const ssknComponentMatrixIdx = useSSknStore(
+  const activeSSknComponent = useStore(
-    (state) => state.componentMatrixIdx
+    useCallback(
-  );
+      (state) => state.ssknComponentMatrix[state.ssknComponentMatrixIdx],
-  const activeSSknComponent = useSSknStore(
+      []
-    useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
+    )
-      ssknComponentMatrixIdx,
-    ])
   );
 
-  const loading = useSSknStore((state) => state.loading);
+  const loading = useStore((state) => state.ssknLoading);
 
   return (
     <>

src/scenes/TaKScene.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from "react";
 import LainSpeak from "../components/LainSpeak";
 import * as THREE from "three";
-import { useMainSceneStore, useSceneStore } from "../store";
+import { useStore } from "../store";
 
 const TaKScene = () => {
-  const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
+  const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
-  const setScene = useSceneStore((state) => state.setScene);
+  const setScene = useStore((state) => state.setScene);
 
   const [isIntro, setIsIntro] = useState(true);
   const [isOutro, setIsOutro] = useState(false);
 
-  const percentageElapsed = useMainSceneStore(
+  const percentageElapsed = useStore(
     (state) => state.mediaPercentageElapsed
   );
 

src/store.ts

@@ -6,19 +6,6 @@ import game_progress from "./resources/initial_progress.json";
 import { HUDType } from "./components/MainScene/SyncedComponents/HUD";
 import { NodeDataType } from "./components/MainScene/SyncedComponents/Site";
 
-type EndState = {
-  mediaPlayedCount: number;
-  incrementMediaPlayedCount: () => void;
-  resetMediaPlayedCount: () => void;
-};
-
-type IdleState = {
-  media: any;
-  images: any;
-  setMedia: (to: any) => void;
-  setImages: (to: any) => void;
-};
-
 type SiteSaveState = {
   a: {
     activeNodeId: string;
@@ -38,152 +25,7 @@ type SiteSaveState = {
   };
 };
 
-type SceneState = {
+export const useAuthorizeUserStore = create<any>((set) => ({
-  currentScene: string;
-  setScene: (to: string) => void;
-};
-
-type MediaWordState = {
-  posStateIdx: number;
-  setPosStateIdx: (to: number) => void;
-  resetPosStateIdx: () => void;
-};
-
-export type BigTextState = {
-  visible: boolean;
-  disableTrail: boolean;
-  text: string;
-  color: string;
-  transformState: {
-    posX: number;
-    posY: number;
-    xOffset: number;
-  };
-};
-
-export type MediaState = {
-  audioAnalyser: any;
-  mediaPercentageElapsed: number;
-  componentMatrix: [[string, string], [string, string, string]];
-  componentMatrixIndices: {
-    sideIdx: number;
-    leftSideIdx: number;
-    rightSideIdx: number;
-  };
-};
-
-export type BootState = {
-  componentMatrix: {
-    main_menu: [string, string];
-    load_data: [string, string];
-    authorize_user: number[];
-  };
-  componentMatrixIndices: {
-    // 0 or 1
-    main_menu: number;
-    // 0 or 1
-    load_data: number;
-    authorize_user: number;
-  };
-  subscene: string;
-};
-
-export type AuthorizeUserState = {
-  bgLettersPos: {
-    x: number;
-    y: number;
-  };
-  activeLetterTextureOffset: {
-    x: number;
-    y: number;
-  };
-  setBgLettersPos: (to: { x: number; y: number }) => void;
-  setActiveLetterTexOffset: (to: { x: number; y: number }) => void;
-};
-
-export type GreenTextState = {
-  text: string;
-  transformState: {
-    posX: { initial: number; final: number };
-    posY: number;
-    xOffset: number;
-  };
-  active: number;
-};
-
-type GateState = {
-  gateLvl: number;
-  incrementGateLvl: () => void;
-};
-
-type SSknState = {
-  componentMatrix: string[];
-  componentMatrixIdx: number;
-  toggleComponentMatrixIdx: () => void;
-  resetComponentMatrixIdx: () => void;
-  loading: boolean;
-  toggleLoading: () => void;
-};
-
-export type MediaBigTextState = {
-  text: string;
-  transformState: {
-    posX: number;
-    posY: number;
-    xOffset: number;
-  };
-};
-
-export const useMediaBigTextStore = create(
-  combine(
-    {
-      transformState: {
-        posX: -0.8,
-        posY: 0.05,
-        xOffset: 0,
-      },
-      text: "Play",
-    } as MediaBigTextState,
-    (set) => ({
-      setText: (to: string) => set(() => ({ text: to })),
-      setTransformState: (to: number, at: string) =>
-        set((state) => ({
-          transformState: { ...state.transformState, [at]: to },
-        })),
-    })
-  )
-);
-
-export const useIdleStore = create<IdleState>((set) => ({
-  media: "INS01.STR",
-  // this may be undefined depending on whether or not the media is audio or not
-  images: undefined,
-  setMedia: (to) => set(() => ({ media: to })),
-  setImages: (to) => set(() => ({ images: to })),
-}));
-
-export const useMediaWordStore = create<MediaWordState>((set) => ({
-  posStateIdx: 1,
-  setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
-  resetPosStateIdx: () => set(() => ({ posStateIdx: 1 })),
-}));
-
-export const useSSknStore = create<SSknState>((set) => ({
-  componentMatrix: ["sskn_ok", "sskn_cancel"],
-  componentMatrixIdx: 0,
-  loading: false,
-  toggleComponentMatrixIdx: () =>
-    set((state) => ({ componentMatrixIdx: Number(!state.componentMatrixIdx) })),
-  resetComponentMatrixIdx: () => set(() => ({ componentMatrixIdx: 0 })),
-  toggleLoading: () => set(() => ({ loading: true })),
-}));
-
-export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "media",
-  setScene: (to) => set(() => ({ currentScene: to })),
-}));
-
-export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
   bgLettersPos: {
     x: 3.35,
     y: -0.7,
@@ -198,10 +40,12 @@ export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
     set(() => ({ activeLetterTextureOffset: to })),
 }));
 
-type MainSceneState = {
+type State = {
+  currentScene: string;
+
   gameProgress: typeof game_progress;
 
-  subscene: string;
+  mainSubscene: string;
 
   intro: boolean;
 
@@ -252,32 +96,75 @@ type MainSceneState = {
 
   // level selection
   selectedLevel: number;
-  levelSelectionToggled: boolean;
 
   // pause
-  pauseComponentMatrix: [string, string, string, string, string];
+  pauseComponentMatrix: ["load", "about", "change", "save", "exit"];
   pauseComponentMatrixIdx: number;
   pauseExitAnimation: boolean;
 
   // media/media scene
   audioAnalyser: undefined | THREE.AudioAnalyser;
   mediaPercentageElapsed: number;
-  mediaComponentMatrix: [[string, string], [string, string, string]];
+  mediaComponentMatrix: [["play", "exit"], ["fstWord", "sndWord", "thirdWord"]];
   mediaComponentMatrixIndices: {
     sideIdx: 0 | 1;
     leftSideIdx: 0 | 1;
     rightSideIdx: 0 | 1 | 2;
   };
+  mediaWordPosStateIdx: number;
+
+  // idle scene
+  idleMedia: string;
+  idleImages: any;
+
+  // sskn scene
+  ssknComponentMatrix: ["sskn_ok", "sskn_cancel"];
+  ssknComponentMatrixIdx: 0 | 1;
+  ssknLoading: boolean;
+
+  // polytan scene
+  polytanUnlockedParts: {
+    body: boolean;
+    head: boolean;
+    leftArm: boolean;
+    rightArm: boolean;
+    leftLeg: boolean;
+    rightLeg: boolean;
+  };
+
+  // gate scene
+  gateLvl: number;
+
+  // boot scene
+  bootComponentMatrix: {
+    main_menu: ["authorize_user", "load_data"];
+    load_data: ["load_data_yes", "load_data_no"];
+    authorize_user: typeof authorize_user_letters.letters;
+  };
+  bootComponentMatrixIndices: {
+    // 0 or 1
+    main_menu: 0 | 1;
+    // 0 or 1
+    load_data: 0 | 1;
+    authorize_user: 0;
+  };
+  bootSubscene: "main_menu" | "load_data" | "authorize_user";
+
+  // end scene
+  endMediaPlayedCount: number;
 };
 
-export const useMainSceneStore = create(
+export const useStore = create(
   combine(
     {
+      // scene data
+      currentScene: "main",
+
       // game progress
       gameProgress: game_progress,
 
-      // subscene
+      // main subscene
-      subscene: "site",
+      mainSubscene: "site",
 
       // whether or not to play the intro anim
       intro: true,
@@ -394,10 +281,55 @@ export const useMainSceneStore = create(
         // 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord")
         rightSideIdx: 0,
       },
-    } as MainSceneState,
+      mediaWordPosStateIdx: 1,
+
+      // idle scene
+      idleMedia: "INS01.STR",
+      // this may be undefined depending on whether or not the media is audio or not
+      idleImages: undefined,
+
+      // sskn scene
+      ssknComponentMatrix: ["sskn_ok", "sskn_cancel"],
+      ssknComponentMatrixIdx: 0,
+      ssknLoading: false,
+
+      // polytan scene
+      polytanUnlockedParts: {
+        body: true,
+        head: false,
+        leftArm: false,
+        rightArm: false,
+        leftLeg: false,
+        rightLeg: false,
+      },
+
+      // gate scene
+      gateLvl: 4,
+
+      // boot scene
+      bootComponentMatrix: {
+        main_menu: ["authorize_user", "load_data"],
+        load_data: ["load_data_yes", "load_data_no"],
+        authorize_user: authorize_user_letters.letters,
+      },
+      bootComponentMatrixIndices: {
+        // 0 or 1
+        main_menu: 0,
+        // 0 or 1
+        load_data: 0,
+        authorize_user: 0,
+      },
+      bootSubscene: "main_menu",
+
+      // end scene
+      endMediaPlayedCount: 0,
+    } as State,
     (set) => ({
-      // subscene setters
+      // scene data setters
-      setSubscene: (to: string) => set(() => ({ subscene: to })),
+      setScene: (to: string) => set(() => ({ currentScene: to })),
+
+      // main subscene setter
+      setMainSubscene: (to: string) => set(() => ({ mainSubscene: to })),
 
       // intro setters
       setIntro: (to: boolean) => set(() => ({ intro: to })),
@@ -507,68 +439,53 @@ export const useMainSceneStore = create(
         set(() => ({ mediaPercentageElapsed: to })),
       setAudioAnalyser: (to: THREE.AudioAnalyser) =>
         set(() => ({ audioAnalyser: to })),
-    })
+      setMediaWordPosStateIdx: (to: number) =>
-  )
+        set(() => ({ mediaWordPosStateIdx: to })),
-);
+      resetMediaWordPosStateIdx: () => set(() => ({ mediaWordPosStateIdx: 1 })),
 
-export const useBootStore = create(
+      // idle media setters
-  combine(
+      setIdleMedia: (to: any) => set(() => ({ idleMedia: to })),
-    {
+      setIdleImages: (to: any) => set(() => ({ idleImages: to })),
-      componentMatrix: {
+
-        main_menu: ["authorize_user", "load_data"],
+      // sskn scene setters
-        load_data: ["load_data_yes", "load_data_no"],
+      toggleSSknComponentMatrixIdx: () =>
-        authorize_user: authorize_user_letters.letters,
-      },
-      componentMatrixIndices: {
-        // 0 or 1
-        main_menu: 0,
-        // 0 or 1
-        load_data: 0,
-        authorize_user: 0,
-      },
-      // main_menu, load_data or authorize_user
-      subscene: "main_menu",
-    } as BootState,
-    (set) => ({
-      setSubscene: (to: string) => set(() => ({ subscene: to })),
-      toggleComponentMatrixIdx: (subscene: string) =>
         set((state) => ({
-          componentMatrixIndices: {
+          ssknComponentMatrixIdx: Number(!state.ssknComponentMatrixIdx) as
-            ...state.componentMatrixIndices,
+            | 0
+            | 1,
+        })),
+      resetSSknComponentMatrixIdx: () =>
+        set(() => ({ ssknComponentMatrixIdx: 0 })),
+      setSSknLoading: (to: boolean) => set(() => ({ ssknLoading: to })),
+
+      // gate scene setters
+      incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
+
+      // boot scene setters
+      setBootSubscene: (to: "load_data" | "authorize_user" | "main_menu") =>
+        set(() => ({ bootSubscene: to })),
+      toggleBootComponentMatrixIdx: (subscene: "load_data" | "main_menu") =>
+        set((state) => ({
+          bootComponentMatrixIndices: {
+            ...state.bootComponentMatrixIndices,
             [subscene]: Number(
-              !state.componentMatrixIndices[
+              !state.bootComponentMatrixIndices[
-                subscene as keyof typeof state.componentMatrixIndices
+                subscene as keyof typeof state.bootComponentMatrixIndices
               ]
             ),
           },
         })),
-      setAuthorizeUserMatrixIdx: (to: number) =>
+
+      // end scene setters
+      incrementEndMediaPlayedCount: () =>
         set((state) => ({
-          componentMatrixIndices: {
+          endMediaPlayedCount: state.endMediaPlayedCount + 1,
-            ...state.componentMatrixIndices,
-            authorize_user: to,
-          },
         })),
+      resetEndMediaPlayedCount: () => set(() => ({ endMediaPlayedCount: 0 })),
     })
   )
 );
 
-export const usePolytanStore = create<any>((set) => ({
-  unlockedParts: {
-    body: true,
-    head: false,
-    leftArm: false,
-    rightArm: false,
-    leftLeg: false,
-    rightLeg: false,
-  },
-}));
-
-export const useGateStore = create<GateState>((set) => ({
-  gateLvl: 4,
-  incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
-}));
-
 export const useSiteSaveStore = create(
   combine(
     {
@@ -609,12 +526,5 @@ export const useSiteSaveStore = create(
   )
 );
 
-export const useEndSceneStore = create<EndState>((set) => ({
-  mediaPlayedCount: 0,
-  incrementMediaPlayedCount: () =>
-    set((state) => ({ mediaPlayedCount: state.mediaPlayedCount + 1 })),
-  resetMediaPlayedCount: () => set(() => ({ mediaPlayedCount: 0 })),
-}));
-
 export const getMainSceneContext = () =>
-  useMainSceneStore.getState().activeNode;
+  useStore.getState().activeNode;