merging media and main stores, optimized pause a bit

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 { useMediaStore } from "../store";
+import { useMainSceneStore } from "../store";
 import { LainConstructor } from "./MainScene/Lain";
 
 type LainTaKProps = {
@@ -39,12 +39,12 @@ const LainSpeak = (props: LainTaKProps) => {
     />
   );
 
-  const analyser = useMediaStore((state) => state.audioAnalyser);
+  const analyser = useMainSceneStore((state) => state.audioAnalyser);
 
   const mouthRef = useRef<THREE.SpriteMaterial>();
   useFrame(() => {
     if (analyser) {
-      const freq = parseInt(analyser.getAverageFrequency());
+      const freq = parseInt(String(analyser.getAverageFrequency()));
 
       if (mouthRef.current) {
         if (freq >= 50) {

src/components/MainScene/PauseSubscene/Pause.tsx

@@ -2,12 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import * as THREE from "three";
 import PauseSquare from "./PauseSquare";
 import StaticBigLetter from "../../TextRenderer/StaticBigLetter";
-import { usePauseStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 import { useLoader } from "react-three-fiber";
-import MainSceneEventManager from "../../../core/StateManagers/MainSceneEventManager";
 
-const Pause = (props: { visible: boolean }) => {
+type PauseProps = {
-  const exit = usePauseStore((state) => state.exitAnimation);
+  paused: boolean;
+};
+
+const Pause = (props: PauseProps) => {
+  const exit = useMainSceneStore((state) => state.pauseExitAnimation);
   const [showActiveComponent, setShowActiveComponent] = useState(false);
   const [animation, setAnimation] = useState(false);
   const [intro, setIntro] = useState(true);
@@ -22,12 +25,13 @@ const Pause = (props: { visible: boolean }) => {
     [wordFont]
   );
 
-  const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
+  const activeComponent = useMainSceneStore(
-  const activeComponent = usePauseStore(
     useCallback(
       (state) =>
-        showActiveComponent ? state.componentMatrix[componentMatrixIdx] : "",
+        showActiveComponent
-      [componentMatrixIdx, showActiveComponent]
+          ? state.pauseComponentMatrix[state.pauseComponentMatrixIdx]
+          : "",
+      [showActiveComponent]
     )
   );
 
@@ -58,7 +62,7 @@ const Pause = (props: { visible: boolean }) => {
     setAnimation(false);
     setIntro(true);
     setShowActiveComponent(false);
-    if (props.visible) {
+    if (props.paused) {
       setTimeout(() => {
         setAnimation(true);
       }, 1000);
@@ -67,285 +71,291 @@ const Pause = (props: { visible: boolean }) => {
         setIntro(false);
       }, 3500);
     }
-  }, [props.visible]);
+  }, [props.paused]);
 
-  return animation ? (
+  return (
-    <group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
+    <>
-      {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
+      {animation && (
-        [0, 1, 2, 3, 4, 5, 6].map((col: number) => {
+        <group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
-          if (rowIdx === 5 && col > 0 && col < 5) {
+          {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
-            return col === 1 ? (
+            [0, 1, 2, 3, 4, 5, 6].map((col: number) => {
-              <React.Fragment key={`Lfragment`}>
+              if (rowIdx === 5 && col > 0 && col < 5) {
-                <StaticBigLetter
+                return col === 1 ? (
-                  color={"white"}
+                  <React.Fragment key={`Lfragment`}>
-                  letter={"L"}
+                    <StaticBigLetter
-                  letterIdx={col}
+                      color={"white"}
-                  position={[0.35, 1.8, 0]}
+                      letter={"L"}
-                  scale={[0.25, 0.25, 0.25]}
+                      letterIdx={col}
-                  active={!(activeComponent === "load")}
+                      position={[0.35, 1.8, 0]}
-                  key={"whiteL"}
+                      scale={[0.25, 0.25, 0.25]}
-                  rowIdx={rowIdx}
+                      active={!(activeComponent === "load")}
-                  colIdx={col}
+                      key={"whiteL"}
-                  intro={intro}
+                      rowIdx={rowIdx}
-                />
+                      colIdx={col}
-                <PauseSquare
+                      intro={intro}
-                  geometry={squareGeoms[row][col]}
+                    />
-                  rowIdx={rowIdx}
+                    <PauseSquare
-                  colIdx={col}
+                      geometry={squareGeoms[row][col]}
-                  key={"whiteLsquare"}
+                      rowIdx={rowIdx}
-                  shouldDisappear={true}
+                      colIdx={col}
-                  intro={intro}
+                      key={"whiteLsquare"}
-                />
+                      shouldDisappear={true}
-              </React.Fragment>
+                      intro={intro}
-            ) : (
+                    />
-              <PauseSquare
+                  </React.Fragment>
-                geometry={squareGeoms[row][col]}
+                ) : (
-                rowIdx={rowIdx}
+                  <PauseSquare
-                colIdx={col}
+                    geometry={squareGeoms[row][col]}
-                active={!(activeComponent === "load")}
+                    rowIdx={rowIdx}
-                key={`${rowIdx}${col}L`}
+                    colIdx={col}
-                intro={intro}
+                    active={!(activeComponent === "load")}
+                    key={`${rowIdx}${col}L`}
+                    intro={intro}
+                  />
+                );
+              } else if (rowIdx === 4 && col > 4 && col < 7) {
+                return col === 5 ? (
+                  <React.Fragment key={"AFragment"}>
+                    <StaticBigLetter
+                      color={"white"}
+                      letter={"A"}
+                      letterIdx={col}
+                      position={[1.78, 1.43, 0]}
+                      scale={[0.25, 0.25, 0]}
+                      active={!(activeComponent === "about")}
+                      key={"whiteA"}
+                      rowIdx={rowIdx}
+                      colIdx={col}
+                      intro={intro}
+                    />
+                    <PauseSquare
+                      geometry={squareGeoms[row][col]}
+                      rowIdx={rowIdx}
+                      colIdx={col}
+                      key={"whiteAsquare"}
+                      shouldDisappear={true}
+                      intro={intro}
+                    />
+                  </React.Fragment>
+                ) : (
+                  <PauseSquare
+                    geometry={squareGeoms[row][col]}
+                    rowIdx={rowIdx}
+                    colIdx={col}
+                    active={!(activeComponent === "about")}
+                    key={`${rowIdx}${col}A`}
+                    intro={intro}
+                  />
+                );
+              } else if (rowIdx === 3 && col > 2 && col < 7) {
+                return col === 3 ? (
+                  <React.Fragment key={"CFragment"}>
+                    <StaticBigLetter
+                      color={"white"}
+                      letter={"C"}
+                      letterIdx={col}
+                      position={[1.05, 1.07, 0]}
+                      scale={[0.25, 0.25, 0]}
+                      active={!(activeComponent === "change")}
+                      key={"whiteC"}
+                      rowIdx={rowIdx}
+                      colIdx={col}
+                      intro={intro}
+                    />
+                    <PauseSquare
+                      geometry={squareGeoms[row][col]}
+                      rowIdx={rowIdx}
+                      colIdx={col}
+                      key={"whiteCsquare"}
+                      shouldDisappear={true}
+                      intro={intro}
+                    />
+                  </React.Fragment>
+                ) : (
+                  <PauseSquare
+                    geometry={squareGeoms[row][col]}
+                    rowIdx={rowIdx}
+                    colIdx={col}
+                    active={!(activeComponent === "change")}
+                    key={`${rowIdx}${col}C`}
+                    intro={intro}
+                  />
+                );
+              } else if (rowIdx === 1 && col > 0 && col < 5) {
+                return col === 1 ? (
+                  <React.Fragment key={"Sfragment"}>
+                    <StaticBigLetter
+                      color={"white"}
+                      letter={"S"}
+                      letterIdx={col}
+                      position={[0.35, 0.35, 0]}
+                      scale={[0.25, 0.25, 0]}
+                      active={!(activeComponent === "save")}
+                      key={"whiteS"}
+                      rowIdx={rowIdx}
+                      colIdx={col}
+                      intro={intro}
+                    />
+                    <PauseSquare
+                      geometry={squareGeoms[row][col]}
+                      rowIdx={rowIdx}
+                      colIdx={col}
+                      key={"whiteSsquare"}
+                      shouldDisappear={true}
+                      intro={intro}
+                    />
+                  </React.Fragment>
+                ) : (
+                  <PauseSquare
+                    geometry={squareGeoms[row][col]}
+                    rowIdx={rowIdx}
+                    colIdx={col}
+                    active={!(activeComponent === "save")}
+                    key={`${rowIdx}${col}S`}
+                    intro={intro}
+                  />
+                );
+              } else if (rowIdx === 0 && col > 4 && col < 7) {
+                return col === 5 ? (
+                  <React.Fragment key={"Efragment"}>
+                    <StaticBigLetter
+                      color={"white"}
+                      letter={"E"}
+                      letterIdx={col}
+                      position={[1.78, 0, 0]}
+                      scale={[0.25, 0.25, 0]}
+                      active={!(activeComponent === "exit")}
+                      key={"whiteE"}
+                      rowIdx={1}
+                      colIdx={col}
+                      intro={intro}
+                    />
+                    <PauseSquare
+                      geometry={squareGeoms[row][col]}
+                      rowIdx={rowIdx}
+                      colIdx={col}
+                      key={"whiteEsquare"}
+                      shouldDisappear={true}
+                      intro={intro}
+                    />
+                  </React.Fragment>
+                ) : (
+                  <PauseSquare
+                    geometry={squareGeoms[row][col]}
+                    rowIdx={rowIdx}
+                    colIdx={col}
+                    active={!(activeComponent === "exit")}
+                    key={`${rowIdx}${col}E`}
+                    intro={intro}
+                  />
+                );
+              } else {
+                return (
+                  <PauseSquare
+                    geometry={squareGeoms[row][col]}
+                    rowIdx={rowIdx}
+                    colIdx={col}
+                    key={`${rowIdx}${col}r`}
+                    active={true}
+                    intro={intro}
+                  />
+                );
+              }
+            })
+          )}
+          {"Load".split("").map((letter, idx) => (
+            <StaticBigLetter
+              color={idx > 0 ? "yellow" : "orange"}
+              letter={letter}
+              letterIdx={idx}
+              key={idx}
+              position={[0.35 + idx / 2.8, 1.8, 0]}
+              scale={[0.25, 0.25, 0.25]}
+              active={activeComponent === "load"}
+            />
+          ))}
+
+          {"About".split("").map((letter, idx) => (
+            <StaticBigLetter
+              color={idx > 0 ? "yellow" : "orange"}
+              letter={letter}
+              letterIdx={idx}
+              position={[1.78 + idx / 2.8, 1.43, 0]}
+              scale={[0.25, 0.25, 0]}
+              active={activeComponent === "about"}
+              key={idx}
+            />
+          ))}
+
+          {"Change".split("").map((letter, idx) => (
+            <StaticBigLetter
+              color={idx > 0 ? "yellow" : "orange"}
+              letter={letter}
+              letterIdx={idx}
+              position={[1.05 + idx / 2.8, 1.07, 0]}
+              scale={[0.25, 0.25, 0]}
+              active={activeComponent === "change"}
+              key={idx}
+            />
+          ))}
+
+          {"Save".split("").map((letter, idx) => (
+            <StaticBigLetter
+              color={idx > 0 ? "yellow" : "orange"}
+              letter={letter}
+              letterIdx={idx}
+              position={[0.35 + idx / 2.8, 0.35, 0]}
+              scale={[0.25, 0.25, 0]}
+              active={activeComponent === "save"}
+              key={idx}
+            />
+          ))}
+
+          {"Exit".split("").map((letter, idx) => (
+            <StaticBigLetter
+              color={idx > 0 ? "yellow" : "orange"}
+              letter={letter}
+              letterIdx={idx}
+              position={[1.78 + idx / 2.8, 0, 0]}
+              scale={[0.25, 0.25, 0]}
+              key={idx}
+              active={activeComponent === "exit"}
+            />
+          ))}
+
+          <group visible={!exit}>
+            <sprite
+              position={[0.5, -0.8, 0]}
+              scale={[3, 1, 0]}
+              renderOrder={100}
+            >
+              <spriteMaterial
+                attach="material"
+                color={0x000000}
+                opacity={0.8}
+                depthTest={false}
               />
-            );
+            </sprite>
-          } else if (rowIdx === 4 && col > 4 && col < 7) {
+            <mesh
-            return col === 5 ? (
+              scale={[0.08, 0.07, 0]}
-              <React.Fragment key={"AFragment"}>
+              position={[-0.2, -0.6, 0]}
-                <StaticBigLetter
+              renderOrder={101}
-                  color={"white"}
+            >
-                  letter={"A"}
+              <textGeometry
-                  letterIdx={col}
+                attach="geometry"
-                  position={[1.78, 1.43, 0]}
+                args={["Application Version 1.0", config]}
-                  scale={[0.25, 0.25, 0]}
-                  active={!(activeComponent === "about")}
-                  key={"whiteA"}
-                  rowIdx={rowIdx}
-                  colIdx={col}
-                  intro={intro}
-                />
-                <PauseSquare
-                  geometry={squareGeoms[row][col]}
-                  rowIdx={rowIdx}
-                  colIdx={col}
-                  key={"whiteAsquare"}
-                  shouldDisappear={true}
-                  intro={intro}
-                />
-              </React.Fragment>
-            ) : (
-              <PauseSquare
-                geometry={squareGeoms[row][col]}
-                rowIdx={rowIdx}
-                colIdx={col}
-                active={!(activeComponent === "about")}
-                key={`${rowIdx}${col}A`}
-                intro={intro}
               />
-            );
+              <meshBasicMaterial
-          } else if (rowIdx === 3 && col > 2 && col < 7) {
+                attach="material"
-            return col === 3 ? (
+                color={0x00ba7c}
-              <React.Fragment key={"CFragment"}>
+                transparent={true}
-                <StaticBigLetter
+                depthTest={false}
-                  color={"white"}
-                  letter={"C"}
-                  letterIdx={col}
-                  position={[1.05, 1.07, 0]}
-                  scale={[0.25, 0.25, 0]}
-                  active={!(activeComponent === "change")}
-                  key={"whiteC"}
-                  rowIdx={rowIdx}
-                  colIdx={col}
-                  intro={intro}
-                />
-                <PauseSquare
-                  geometry={squareGeoms[row][col]}
-                  rowIdx={rowIdx}
-                  colIdx={col}
-                  key={"whiteCsquare"}
-                  shouldDisappear={true}
-                  intro={intro}
-                />
-              </React.Fragment>
-            ) : (
-              <PauseSquare
-                geometry={squareGeoms[row][col]}
-                rowIdx={rowIdx}
-                colIdx={col}
-                active={!(activeComponent === "change")}
-                key={`${rowIdx}${col}C`}
-                intro={intro}
               />
-            );
+            </mesh>
-          } else if (rowIdx === 1 && col > 0 && col < 5) {
+          </group>
-            return col === 1 ? (
+        </group>
-              <React.Fragment key={"Sfragment"}>
-                <StaticBigLetter
-                  color={"white"}
-                  letter={"S"}
-                  letterIdx={col}
-                  position={[0.35, 0.35, 0]}
-                  scale={[0.25, 0.25, 0]}
-                  active={!(activeComponent === "save")}
-                  key={"whiteS"}
-                  rowIdx={rowIdx}
-                  colIdx={col}
-                  intro={intro}
-                />
-                <PauseSquare
-                  geometry={squareGeoms[row][col]}
-                  rowIdx={rowIdx}
-                  colIdx={col}
-                  key={"whiteSsquare"}
-                  shouldDisappear={true}
-                  intro={intro}
-                />
-              </React.Fragment>
-            ) : (
-              <PauseSquare
-                geometry={squareGeoms[row][col]}
-                rowIdx={rowIdx}
-                colIdx={col}
-                active={!(activeComponent === "save")}
-                key={`${rowIdx}${col}S`}
-                intro={intro}
-              />
-            );
-          } else if (rowIdx === 0 && col > 4 && col < 7) {
-            return col === 5 ? (
-              <React.Fragment key={"Efragment"}>
-                <StaticBigLetter
-                  color={"white"}
-                  letter={"E"}
-                  letterIdx={col}
-                  position={[1.78, 0, 0]}
-                  scale={[0.25, 0.25, 0]}
-                  active={!(activeComponent === "exit")}
-                  key={"whiteE"}
-                  rowIdx={1}
-                  colIdx={col}
-                  intro={intro}
-                />
-                <PauseSquare
-                  geometry={squareGeoms[row][col]}
-                  rowIdx={rowIdx}
-                  colIdx={col}
-                  key={"whiteEsquare"}
-                  shouldDisappear={true}
-                  intro={intro}
-                />
-              </React.Fragment>
-            ) : (
-              <PauseSquare
-                geometry={squareGeoms[row][col]}
-                rowIdx={rowIdx}
-                colIdx={col}
-                active={!(activeComponent === "exit")}
-                key={`${rowIdx}${col}E`}
-                intro={intro}
-              />
-            );
-          } else {
-            return (
-              <PauseSquare
-                geometry={squareGeoms[row][col]}
-                rowIdx={rowIdx}
-                colIdx={col}
-                key={`${rowIdx}${col}r`}
-                active={true}
-                intro={intro}
-              />
-            );
-          }
-        })
       )}
-      {"Load".split("").map((letter, idx) => (
+    </>
-        <StaticBigLetter
-          color={idx > 0 ? "yellow" : "orange"}
-          letter={letter}
-          letterIdx={idx}
-          key={idx}
-          position={[0.35 + idx / 2.8, 1.8, 0]}
-          scale={[0.25, 0.25, 0.25]}
-          active={activeComponent === "load"}
-        />
-      ))}
-
-      {"About".split("").map((letter, idx) => (
-        <StaticBigLetter
-          color={idx > 0 ? "yellow" : "orange"}
-          letter={letter}
-          letterIdx={idx}
-          position={[1.78 + idx / 2.8, 1.43, 0]}
-          scale={[0.25, 0.25, 0]}
-          active={activeComponent === "about"}
-          key={idx}
-        />
-      ))}
-
-      {"Change".split("").map((letter, idx) => (
-        <StaticBigLetter
-          color={idx > 0 ? "yellow" : "orange"}
-          letter={letter}
-          letterIdx={idx}
-          position={[1.05 + idx / 2.8, 1.07, 0]}
-          scale={[0.25, 0.25, 0]}
-          active={activeComponent === "change"}
-          key={idx}
-        />
-      ))}
-
-      {"Save".split("").map((letter, idx) => (
-        <StaticBigLetter
-          color={idx > 0 ? "yellow" : "orange"}
-          letter={letter}
-          letterIdx={idx}
-          position={[0.35 + idx / 2.8, 0.35, 0]}
-          scale={[0.25, 0.25, 0]}
-          active={activeComponent === "save"}
-          key={idx}
-        />
-      ))}
-
-      {"Exit".split("").map((letter, idx) => (
-        <StaticBigLetter
-          color={idx > 0 ? "yellow" : "orange"}
-          letter={letter}
-          letterIdx={idx}
-          position={[1.78 + idx / 2.8, 0, 0]}
-          scale={[0.25, 0.25, 0]}
-          key={idx}
-          active={activeComponent === "exit"}
-        />
-      ))}
-
-      <group visible={!exit}>
-        <sprite position={[0.5, -0.8, 0]} scale={[3, 1, 0]} renderOrder={100}>
-          <spriteMaterial
-            attach="material"
-            color={0x000000}
-            opacity={0.8}
-            depthTest={false}
-          />
-        </sprite>
-        <mesh
-          scale={[0.08, 0.07, 0]}
-          position={[-0.2, -0.6, 0]}
-          renderOrder={101}
-        >
-          <textGeometry
-            attach="geometry"
-            args={["Application Version 1.0", config]}
-          />
-          <meshBasicMaterial
-            attach="material"
-            color={0x00ba7c}
-            transparent={true}
-            depthTest={false}
-          />
-        </mesh>
-      </group>
-    </group>
-  ) : (
-    <></>
   );
 };
 

src/components/MainScene/PauseSubscene/PauseSquare.tsx

@@ -1,9 +1,9 @@
-import React, { useMemo } from "react";
+import React, { useMemo, memo } from "react";
 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 { usePauseStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 
 type PauseSquareProps = {
   colIdx: number;
@@ -14,8 +14,8 @@ type PauseSquareProps = {
   intro?: boolean;
 };
 
-const PauseSquare = (props: PauseSquareProps) => {
+const PauseSquare = memo((props: PauseSquareProps) => {
-  const exitAnimation = usePauseStore((state) => state.exitAnimation);
+  const exitAnimation = useMainSceneStore((state) => state.pauseExitAnimation);
 
   const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
 
@@ -109,6 +109,6 @@ const PauseSquare = (props: PauseSquareProps) => {
       </group>
     </>
   );
-};
+});
 
 export default PauseSquare;

src/components/MainScene/SyncedComponentLoader.tsx

@@ -52,7 +52,6 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => {
         shouldIntro={props.shouldIntro}
         introFinished={introFinished}
       />
-      <Pause visible={props.paused} />
       <Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
       <MainSceneEventManager
         loaded={props.shouldIntro ? introFinished : true}

src/components/MainScene/SyncedComponents/HUD.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, memo } from "react";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import bigHud from "../../../static/sprite/big_hud.png";
@@ -10,7 +10,6 @@ import boringHudMirrored from "../../../static/sprite/long_hud_boring_mirrored.p
 import { a, useSpring } from "@react-spring/three";
 import { useMainSceneStore } from "../../../store";
 import MediumLetter from "../../TextRenderer/MediumLetter";
-import { NodeDataType } from "./Site";
 
 export type HUDType = {
   mirrored: number;
@@ -33,7 +32,7 @@ export type HUDType = {
   };
 };
 
-const HUD = () => {
+const HUD = memo(() => {
   const greenText = useMainSceneStore((state) =>
     state.activeNode.title.split("")
   );
@@ -155,6 +154,6 @@ const HUD = () => {
       </a.group>
     </group>
   );
-};
+});
 
 export default HUD;

src/components/MainScene/SyncedComponents/LevelSelection.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback } from "react";
 import level_selection_font from "../../../static/sprite/select_level_font.png";
 import verticalHud from "../../../static/sprite/select_level_hud_vertical.png";
 import horizontalHud from "../../../static/sprite/select_level_hud_horizontal.png";
 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 { useLevelSelectionStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import { a, useSpring } from "@react-spring/three";
@@ -24,16 +24,16 @@ const LevelSelection = () => {
   const upArrowTex = useLoader(THREE.TextureLoader, upArrow);
   const downArrowTex = useLoader(THREE.TextureLoader, downArrow);
 
-  const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel)
+  const toggled = useMainSceneStore(
+    useCallback((state) => Number(state.subscene === "level_selection"), [])
+  );
+
+  const selectedLevel = useMainSceneStore((state) => state.selectedLevel)
     .toString()
     .padStart(2, "0");
 
-  const levelSelectionToggled = useLevelSelectionStore(
-    (state) => state.levelSelectionToggled
-  );
-
   const { levelSelectionToggle } = useSpring({
-    levelSelectionToggle: levelSelectionToggled,
+    levelSelectionToggle: toggled,
     config: { duration: 500 },
   });
 

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

@@ -1,12 +1,13 @@
-import React, { useMemo } from "react";
+import React, { useMemo, memo } from "react";
 import Node from "./Node";
 import node_positions from "../../../../resources/node_positions.json";
 import { useMainSceneStore } 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 = () => {
+const ActiveLevelNodes = memo(() => {
   const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
 
   const gameProgress = useMainSceneStore((state) => state.gameProgress);
@@ -26,28 +27,28 @@ const ActiveLevelNodes = () => {
 
   return (
     <>
-      {Object.entries(visibleNodes).map((node: [string, any]) => {
+      {Object.values(visibleNodes).map((node: NodeDataType) => {
-        if (isNodeVisible(node[1], gameProgress)) {
+        if (isNodeVisible(node, gameProgress)) {
           return (
             <Node
-              nodeName={node[1].node_name}
+              nodeName={node.node_name}
               position={
-                node_positions[node[0].substr(2) as keyof typeof node_positions]
+                node_positions[node.id.substr(2) as keyof typeof node_positions]
                   .position
               }
               rotation={
-                node_positions[node[0].substr(2) as keyof typeof node_positions]
+                node_positions[node.id.substr(2) as keyof typeof node_positions]
                   .rotation
               }
-              key={node[1].node_name}
+              key={node.node_name}
-              active={node[0] === activeNodeId}
+              active={node.id === activeNodeId}
-              level={node[0].substr(0, 2)}
+              level={node.id.substr(0, 2)}
             />
           );
         }
       })}
     </>
   );
-};
+});
 
 export default ActiveLevelNodes;

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, memo } from "react";
 import Node from "./Node";
 import node_positions from "../../../../resources/node_positions.json";
 import { useMainSceneStore } from "../../../../store";
@@ -6,7 +6,7 @@ import { isNodeVisible } from "../../../../core/nodeSelector";
 import site_a from "../../../../resources/site_a.json";
 import site_b from "../../../../resources/site_b.json";
 
-const InactiveLevelNodes = () => {
+const InactiveLevelNodes = memo(() => {
   const gameProgress = useMainSceneStore((state) => state.gameProgress);
 
   const currentSite = useMainSceneStore((state) => state.activeSite);
@@ -57,6 +57,6 @@ const InactiveLevelNodes = () => {
       })}
     </>
   );
-};
+});
 
 export default InactiveLevelNodes;

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, memo } from "react";
 import level_y_values from "../../../../resources/level_y_values.json";
 import PurpleRing from "./PurpleRing";
 import GrayRing from "./GrayRing";
@@ -9,7 +9,7 @@ type RingsProps = {
   activateAllRings: boolean;
 };
 
-const Rings = (props: RingsProps) => {
+const Rings = memo((props: RingsProps) => {
   const activeLevel = useMainSceneStore((state) => state.activeLevel);
   const currentSite = useMainSceneStore((state) => state.activeSite);
 
@@ -61,6 +61,6 @@ const Rings = (props: RingsProps) => {
       })}
     </>
   );
-};
+});
 
 export default Rings;

src/components/MainScene/SyncedComponents/Starfield.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, memo } from "react";
 import Star from "./Starfield/Star";
 
 type StarfieldProps = {
@@ -7,7 +7,7 @@ type StarfieldProps = {
   introFinished: boolean;
 };
 
-const Starfield = (props: StarfieldProps) => {
+const Starfield = memo((props: StarfieldProps) => {
   const LCG = (a: number, c: number, m: number, s: number) => () =>
     (s = (s * a + c) % m);
 
@@ -128,6 +128,6 @@ const Starfield = (props: StarfieldProps) => {
       )}
     </group>
   );
-};
+});
 
 export default Starfield;

src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx

@@ -2,10 +2,10 @@ import React, { createRef, MutableRefObject, useMemo } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
 import AudioVisualizerColumn from "./AudioVisualizerColumn";
-import { useMediaStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 
 const AudioVisualizer = () => {
-  const analyser = useMediaStore((state) => state.audioAnalyser);
+  const analyser = useMainSceneStore((state) => state.audioAnalyser);
 
   const columnRefs = useMemo(
     () =>

src/components/MediaScene/Images.tsx

@@ -1,14 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import {
+import {useIdleStore, useMainSceneStore, useSceneStore,} from "../../store";
-  useIdleStore,
+import {a, useSpring} from "@react-spring/three";
-  useMainSceneStore,
-  useMediaStore,
-  useSceneStore,
-} from "../../store";
-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);
@@ -26,7 +21,7 @@ const Images = () => {
 
   const dummyTex = useLoader(THREE.TextureLoader, dummy);
 
-  const mediaPercentageElapsed = useMediaStore(
+  const mediaPercentageElapsed = useMainSceneStore(
     (state) => state.mediaPercentageElapsed
   );
 

src/components/MediaScene/MediaLoadingBar.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef } from "react";
-import { useMediaStore } from "../../store";
+import { useMainSceneStore } 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 = useMediaStore(
+  const mediaPercentageElapsed = useMainSceneStore(
     (state) => state.mediaPercentageElapsed
   );
   const loadingBarContainerTex = useLoader(

src/components/MediaScene/MediaPlayer.tsx

@@ -10,7 +10,6 @@ import {
   useEndSceneStore,
   useIdleStore,
   useMainSceneStore,
-  useMediaStore,
   useSceneStore,
 } from "../../store";
 import t from "../../static/webvtt/test.vtt";
@@ -24,7 +23,7 @@ const MediaPlayer = () => {
   const currentScene = useSceneStore((state) => state.currentScene);
   const setScene = useSceneStore((state) => state.setScene);
 
-  const setPercentageElapsed = useMediaStore(
+  const setPercentageElapsed = useMainSceneStore(
     (state) => state.setPercentageElapsed
   );
 
@@ -53,7 +52,10 @@ const MediaPlayer = () => {
 
   const updateTime = useCallback(() => {
     (requestRef.current as any) = requestAnimationFrame(updateTime);
-    if (videoRef.current) {
+    if (
+      videoRef.current &&
+      ["media", "idle_media", "tak", "end"].includes(currentScene)
+    ) {
       const timeElapsed = videoRef.current.currentTime;
       const duration = videoRef.current.duration;
       const percentageElapsed = Math.floor((timeElapsed / duration) * 100);

src/components/TextRenderer/StaticBigLetter.tsx

@@ -5,157 +5,154 @@ import * as THREE from "three";
 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 } from "react";
+import React, { useMemo, memo } from "react";
-import { usePauseStore } from "../../store";
+import { useMainSceneStore } from "../../store";
 
-const StaticBigLetter = (props: {
+const StaticBigLetter = memo(
-  color: string;
+  (props: {
-  letter: string;
+    color: string;
-  letterIdx: number;
+    letter: string;
-  position: number[];
+    letterIdx: number;
-  scale: number[];
+    position: number[];
-  active: boolean;
+    scale: number[];
-  rowIdx?: number;
+    active: boolean;
-  colIdx?: number;
+    rowIdx?: number;
-  intro?: boolean;
+    colIdx?: number;
-}) => {
+    intro?: boolean;
-  const exitAnimation = usePauseStore((state) => state.exitAnimation);
+  }) => {
+    const exitAnimation = useMainSceneStore(
+      (state) => state.pauseExitAnimation
+    );
 
-  const colorToTexture = (color: string) => {
+    const tex = useMemo(() => {
-    const colorTexture = {
+      switch (props.color) {
-      orange: orangeFont,
+        case "white":
-      yellow: yellowFont,
+          return whiteFont;
-      white: whiteFont,
+        case "yellow":
-    };
+          return yellowFont;
-    return colorTexture[color as keyof typeof colorTexture];
+        default:
-  };
+          return orangeFont;
+      }
+    }, [props.color]);
 
-  // first letter in big font is always orange in this case so make it orange if so. else,
+    const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, tex);
-  // run through the function.
-  const color =
-    props.letterIdx === 0 ? orangeFont : colorToTexture(props.color);
 
-  const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, color);
+    const lineYOffset = useMemo(() => {
+      const lineOne = "ABCDEFGHIJKLMNOPQ";
+      const lineTwo = "RSTUVWXYZ01234567";
+      const lineThree = "89abcdefghijklmnopqrs";
 
-  // i have yet to figure out a genrealizable way of
+      let lineNum: number;
-  // calculating the y offset, this shit will do for now
+      if (props.letter === " ") {
-  // also, we dont have all the lines since i dont need them yet.
+        lineNum = 5;
-  // also, baseline offsets dont work properly since i dont need them yet either
+      } else {
-  // should be trivial to calculate though, im just lazy
+        if (lineOne.includes(props.letter)) {
-  const getLineNum = (letter: string) => {
+          lineNum = 1;
-    const lineOne = "ABCDEFGHIJKLMNOPQ";
+        } else if (lineTwo.includes(props.letter)) {
-    const lineTwo = "RSTUVWXYZ01234567";
+          lineNum = 2;
-    const lineThree = "89abcdefghijklmnopqrs";
+        } else if (lineThree.includes(props.letter)) {
+          lineNum = 3;
+        } else {
+          lineNum = 4;
+        }
+      }
 
-    if (letter === " ") return 5;
+      const offsets = {
+        1: 0.884,
+        2: 0.765,
+        3: 0.648,
+        4: 0.47,
+        5: 1,
+      };
+      return offsets[lineNum as keyof typeof offsets];
+    }, [props.letter]);
 
-    if (lineOne.includes(letter)) {
+    const letterData = useMemo(
-      return 1;
+      () =>
-    } else if (lineTwo.includes(letter)) {
+        orange_font_json.glyphs[
-      return 2;
+          props.letter as keyof typeof orange_font_json.glyphs
-    } else if (lineThree.includes(letter)) {
+        ],
-      return 3;
+      [props.letter]
-    } else {
+    );
-      return 4;
-    }
-  };
 
-  const lineYOffsets = useMemo(
+    const geom = useMemo(() => {
-    () => ({
+      const geometry = new THREE.PlaneBufferGeometry();
-      1: 0.884,
-      2: 0.765,
-      3: 0.648,
-      4: 0.47,
-      5: 1,
-    }),
-    []
-  );
 
-  const letterData =
+      const uvAttribute = geometry.attributes.uv;
-    orange_font_json.glyphs[
-      props.letter as keyof typeof orange_font_json.glyphs
-    ];
 
-  const geom = useMemo(() => {
+      for (let i = 0; i < uvAttribute.count; i++) {
-    const geometry = new THREE.PlaneBufferGeometry();
+        let u = uvAttribute.getX(i);
+        let v = uvAttribute.getY(i);
 
-    const uvAttribute = geometry.attributes.uv;
+        u = (u * letterData[2]) / 256 + letterData[0] / 256;
 
-    for (let i = 0; i < uvAttribute.count; i++) {
+        v = (v * letterData[3]) / 136 + lineYOffset - letterData[4] / 136;
-      let u = uvAttribute.getX(i);
-      let v = uvAttribute.getY(i);
 
-      u = (u * letterData[2]) / 256 + letterData[0] / 256;
+        uvAttribute.setXY(i, u, v);
+      }
+      return geometry;
+    }, [letterData, lineYOffset]);
 
-      v =
+    const exitAnimValue = useMemo(() => {
-        (v * letterData[3]) / 136 +
+      let col = 0;
-        lineYOffsets[getLineNum(props.letter)] -
+      let row = 0;
-        letterData[4] / 136;
+      if (props.colIdx && props.rowIdx) {
+        if (props.colIdx < 3) col = -1;
+        else if (props.colIdx > 3) col = 1;
 
-      uvAttribute.setXY(i, u, v);
+        if (props.rowIdx < 3) row = -1;
-    }
+        else if (props.rowIdx > 3) row = 1;
-    return geometry;
-  }, [letterData, lineYOffsets, props.letter]);
 
-  const getExitAnimValue = useMemo(() => {
+        return { row, col };
-    let col = 0;
+      }
-    let row = 0;
+    }, [props.colIdx, props.rowIdx]);
-    if (props.colIdx && props.rowIdx) {
-      if (props.colIdx < 3) col = -1;
-      else if (props.colIdx > 3) col = 1;
 
-      if (props.rowIdx < 3) row = -1;
+    const initialState = useSpring({
-      else if (props.rowIdx > 3) row = 1;
+      posX:
+        props.position[0] +
+        (exitAnimValue ? exitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0),
+      posY:
+        -letterData[4] / 50 +
+        props.position[1] +
+        (exitAnimValue ? exitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0),
+      rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI,
+      rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2,
+      config: { duration: 500 },
+    });
 
-      return { row, col };
+    const introState = useSpring({
-    }
+      rotX: 0,
-  }, [props.colIdx, props.rowIdx]);
+      rotY: 0,
+      from: { rotX: Math.PI, rotY: Math.PI * 2 },
+      delay: (props.rowIdx! + props.colIdx!) * 100 + 500,
+      config: { duration: 200 },
+    });
 
-  const initialState = useSpring({
+    return (
-    posX:
+      <a.mesh
-      props.position[0] +
+        position={[
-      (getExitAnimValue ? getExitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0),
+          props.position[0],
-    posY:
+          -letterData[4] / 50 + props.position[1],
-      -letterData[4] / 50 +
+          props.position[2],
-      props.position[1] +
+        ]}
-      (getExitAnimValue ? getExitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0),
+        position-x={initialState.posX}
-    rotX: props.active ? (exitAnimation ? Math.PI / 2 : 0) : -Math.PI,
+        position-y={initialState.posY}
-    rotY: props.active ? (exitAnimation ? Math.PI / 2 : 0) : Math.PI / 2,
+        scale={props.scale as [number, number, number]}
-    config: { duration: 500 },
+        geometry={geom}
-  });
+        rotation-x={props.intro ? introState.rotX : initialState.rotX}
-
+        rotation-y={props.intro ? introState.rotY : initialState.rotY}
-  const introState = useSpring({
+        renderOrder={100}
-    rotX: 0,
+      >
-    rotY: 0,
+        <meshBasicMaterial
-    from: { rotX: Math.PI, rotY: Math.PI * 2 },
+          map={colorTexture}
-    delay: (props.rowIdx! + props.colIdx!) * 100 + 500,
+          attach="material"
-    config: { duration: 200 },
+          transparent={true}
-  });
+          side={THREE.FrontSide}
-
+          depthTest={false}
-  return (
+        />
-    <a.mesh
+      </a.mesh>
-      position={[
+    );
-        props.position[0],
+  }
-        -letterData[4] / 50 + props.position[1],
+);
-        props.position[2],
-      ]}
-      position-x={initialState.posX}
-      position-y={initialState.posY}
-      scale={props.scale as [number, number, number]}
-      geometry={geom}
-      rotation-x={props.intro ? introState.rotX : initialState.rotX}
-      rotation-y={props.intro ? introState.rotY : initialState.rotY}
-      renderOrder={100}
-    >
-      <meshBasicMaterial
-        map={colorTexture}
-        attach="material"
-        transparent={true}
-        side={THREE.FrontSide}
-        depthTest={false}
-      />
-    </a.mesh>
-  );
-};
 
 export default StaticBigLetter;

src/components/TextRenderer/YellowTextRenderer.tsx

@@ -11,8 +11,8 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
   const textRef = useRef(useMainSceneStore.getState().bigText.split(""));
 
   const [trail, set] = useTrail(textRef.current.length, () => ({
-    posX: 0,
+    posX: useMainSceneStore.getState().bigTextPos[0],
-    posY: 0,
+    posY: useMainSceneStore.getState().bigTextPos[1],
     config: { duration: 280 },
   }));
 

src/core/StateManagers/EventManager.tsx

@@ -1,39 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React from "react";
-import SiteManager from "./MainSceneManagers/SiteManager";
-import MiddleRingManager from "./MainSceneManagers/MiddleRingManager";
-import LainManager from "./MainSceneManagers/LainManager";
-import NodeManager from "./MainSceneManagers/NodeManager";
-import NodeHUDManager from "./MainSceneManagers/NodeHUDManager";
-import {
-  useAuthorizeUserStore,
-  useBootStore,
-  useLevelSelectionStore,
-  useMainSceneStore,
-  useMediaStore,
-  useMediaWordStore,
-  usePauseStore,
-  useSceneStore,
-  useSSknStore,
-} from "../../store";
-import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
-import SceneManager from "./GameManagers/SceneManager";
-import BigTextManager from "./MainSceneManagers/BigTextManager";
-import LevelManager from "./MainSceneManagers/LevelManager";
-import BootComponentManager from "./BootSceneManagers/BootComponentManager";
-import SSknComponentManager from "./SSknSceneManagers/SSknComponentManager";
-import handleMainSceneEvent from "../mainSceneEventHandler";
-import handleMediaSceneEvent from "../mediaSceneEventHandler";
-import handleBootEvent from "../bootEventHandler";
-import handleSSknSceneEvent from "../ssknSceneEventHandler";
-import BootAuthorizeUserManager from "./BootSceneManagers/BootAuthorizeUserManager";
-import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager";
-import SubsceneManager from "./GameManagers/SubsceneManager";
-import PauseComponentManager from "./MainSceneManagers/PauseComponentManager";
-import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager";
-import GameSaver from "./GameManagers/GameSaver";
-import GameLoader from "./GameManagers/GameLoader";
-import { useFrame } from "react-three-fiber";
-import IdleManager from "./MainSceneManagers/IdleManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -55,242 +20,6 @@ export type StateManagerProps = {
 };
 
 const EventManager = () => {
-  // const currentScene = useSceneStore((state) => state.currentScene);
-  //
-  // // main scene
-  // const currentSite = useSiteStore((state) => state.currentSite);
-  // // const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
-  // // const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
-  // const siteTransformState = useSiteStore((state) => state.transformState);
-  // const activeLevel = useLevelStore((state) => state.activeLevel);
-  // const mainSubscene = useMainSceneStore((state) => state.subscene);
-  // const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
-  // const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
-  // const activePauseComponent = usePauseStore(
-  //   useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
-  //     pauseMatrixIdx,
-  //   ])
-  // );
-  // // const gameProgress = useNodeStore((state) => state.gameProgress);
-  //
-  // // media scene
-  // const mediaComponentMatrixIndices = useMediaStore(
-  //   (state) => state.componentMatrixIndices
-  // );
-  //
-  // const activeMediaComponent = useMediaStore(
-  //   useCallback(
-  //     (state) =>
-  //       state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
-  //         mediaComponentMatrixIndices.sideIdx === 0
-  //           ? mediaComponentMatrixIndices.leftSideIdx
-  //           : mediaComponentMatrixIndices.rightSideIdx
-  //       ],
-  //     [mediaComponentMatrixIndices]
-  //   )
-  // );
-  // const rightSideComponentIdx = useMediaStore(
-  //   (state) => state.componentMatrixIndices.rightSideIdx
-  // );
-  //
-  // const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
-  //
-  // // sskn scene
-  // const ssknComponentMatrixIdx = useSSknStore(
-  //   (state) => state.componentMatrixIdx
-  // );
-  // const activeSSknComponent = useSSknStore(
-  //   useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
-  //     ssknComponentMatrixIdx,
-  //   ])
-  // );
-  //
-  // // boot scene
-  // const currentBootSubscene = useBootStore((state) => state.subscene);
-  // const activeBootElement = useBootStore(
-  //   useCallback(
-  //     (state) =>
-  //       state.componentMatrix[
-  //         currentBootSubscene as keyof typeof state.componentMatrix
-  //       ][
-  //         state.componentMatrixIndices[
-  //           currentBootSubscene as keyof typeof state.componentMatrixIndices
-  //         ]
-  //       ],
-  //     [currentBootSubscene]
-  //   )
-  // );
-  //
-  // const authorizeUserBgLettersPos = useAuthorizeUserStore(
-  //   (state) => state.bgLettersPos
-  // );
-  // const authorizeUserActiveLetterTexOffset = useAuthorizeUserStore(
-  //   (state) => state.activeLetterTextureOffset
-  // );
-  // const authorizeUserMatrixIdx = useBootStore(
-  //   (state) => state.componentMatrixIndices.authorize_user
-  // );
-  //
-  // const [eventState, setEventState] = useState<any>();
-  //
-  // const [inputCooldown, setInputCooldown] = useState(false);
-  //
-  // const timePassedSinceLastKeyPress = useRef(-1);
-  //
-  // useFrame(() => {
-  //   const now = Date.now();
-  //   if (
-  //     timePassedSinceLastKeyPress.current > -1 &&
-  //     mainSubscene !== "pause" &&
-  //     mainSubscene !== "level_selection" &&
-  //     currentScene === "main"
-  //   ) {
-  //     if (now > timePassedSinceLastKeyPress.current + 10000) {
-  //       const moves = [
-  //         "prayer",
-  //         "touch_sleeve",
-  //         "thinking",
-  //         "stretch_2",
-  //         "stretch",
-  //         "spin",
-  //         "scratch_head",
-  //         "blush",
-  //         "hands_behind_head",
-  //         "hands_on_hips",
-  //         "hands_on_hips_2",
-  //         "hands_together",
-  //         "lean_forward",
-  //         "lean_left",
-  //         "lean_right",
-  //         "look_around",
-  //         "play_with_hair",
-  //       ];
-  //
-  //       const event = moves[Math.floor(Math.random() * moves.length)];
-  //       setEventState({ event: event });
-  //       timePassedSinceLastKeyPress.current = now - 2500;
-  //     }
-  //     if (now > timePassedSinceLastKeyPress.current + 5000) {
-  //       setEventState({
-  //         event: "play_idle_media",
-  //         scene: "idle_media",
-  //         site: currentSite,
-  //       });
-  //       timePassedSinceLastKeyPress.current = -1;
-  //     }
-  //   }
-  // });
-  //
-  // const handleKeyPress = useCallback(
-  //   (event) => {
-  //     const { keyCode } = event;
-  //
-  //     const keyPress = getKeyCodeAssociation(keyCode);
-  //
-  //     if (keyPress && !inputCooldown) {
-  //       let event;
-  //       switch (currentScene) {
-  //         case "main":
-  //           timePassedSinceLastKeyPress.current = Date.now() + 2500;
-  //           event = handleMainSceneEvent({
-  //             mainSubscene: mainSubscene,
-  //             keyPress: keyPress,
-  //             siteTransformState: siteTransformState,
-  //             // activeNodeId: activeNodeId,
-  //             // nodeMatrixIndices: nodeMatrixIndices,
-  //             activeLevel: activeLevel,
-  //             selectedLevel: selectedLevel,
-  //             pauseMatrixIdx: pauseMatrixIdx,
-  //             activePauseComponent: activePauseComponent,
-  //             // gameProgress: gameProgress,
-  //             currentSite: currentSite,
-  //           });
-  //           break;
-  //         case "media":
-  //         case "idle_media":
-  //           event = handleMediaSceneEvent({
-  //             keyPress: keyPress,
-  //             activeMediaComponent: activeMediaComponent,
-  //             wordPosStateIdx: wordPosStateIdx,
-  //             rightSideComponentIdx: rightSideComponentIdx,
-  //           });
-  //           break;
-  //         case "boot":
-  //           event = handleBootEvent({
-  //             keyPress: keyPress,
-  //             bootSubscene: currentBootSubscene,
-  //             activeBootElement: activeBootElement,
-  //             authorizeUserBgLettersPos: authorizeUserBgLettersPos,
-  //             authorizeUserActiveLetterTexOffset: authorizeUserActiveLetterTexOffset,
-  //             authorizeUserMatrixIdx: authorizeUserMatrixIdx,
-  //           });
-  //           break;
-  //         case "gate":
-  //           event = { event: "exit_gate" };
-  //           break;
-  //         case "sskn":
-  //           event = handleSSknSceneEvent({
-  //             keyPress: keyPress,
-  //             activeSSknComponent: activeSSknComponent,
-  //           });
-  //           break;
-  //       }
-  //       setEventState(event);
-  //     }
-  //   },
-  //   [
-  //     inputCooldown,
-  //     currentScene,
-  //     mainSubscene,
-  //     siteTransformState,
-  //     activeLevel,
-  //     selectedLevel,
-  //     pauseMatrixIdx,
-  //     activePauseComponent,
-  //     currentSite,
-  //     activeMediaComponent,
-  //     wordPosStateIdx,
-  //     rightSideComponentIdx,
-  //     currentBootSubscene,
-  //     activeBootElement,
-  //     authorizeUserBgLettersPos,
-  //     authorizeUserActiveLetterTexOffset,
-  //     authorizeUserMatrixIdx,
-  //     activeSSknComponent,
-  //   ]
-  // );
-  //
-  // useEffect(() => {
-  //   window.addEventListener("keydown", handleKeyPress);
-  //
-  //   return () => {
-  //     window.removeEventListener("keydown", handleKeyPress);
-  //   };
-  // }, [handleKeyPress]);
-  //
-  // return (
-  //   <>
-  //     <NodeManager eventState={eventState!} />
-  //     <NodeHUDManager eventState={eventState!} />
-  //     <SiteManager eventState={eventState!} />
-  //     <LainManager eventState={eventState!} />
-  //     <MiddleRingManager eventState={eventState!} />
-  //     <MediaComponentManager eventState={eventState!} />
-  //     <SceneManager eventState={eventState!} />
-  //     <BigTextManager eventState={eventState!} />
-  //     <LevelManager eventState={eventState!} />
-  //     <BootComponentManager eventState={eventState!} />
-  //     <SSknComponentManager eventState={eventState!} />
-  //     <BootAuthorizeUserManager eventState={eventState!} />
-  //     <LevelSelectionManager eventState={eventState!} />
-  //     <SubsceneManager eventState={eventState!} />
-  //     <PauseComponentManager eventState={eventState!} />
-  //     <MediaYellowTextManager eventState={eventState!} />
-  //     <GameSaver eventState={eventState!} />
-  //     <GameLoader eventState={eventState!} />
-  //     <IdleManager eventState={eventState!} />
-  //   </>
-  // );
   return <></>;
 };
 

src/core/StateManagers/MainSceneEventManager.tsx

@@ -1,9 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
+import { useMainSceneStore } from "../../store";
-  useLevelSelectionStore,
-  useMainSceneStore,
-  usePauseStore,
-} from "../../store";
 import handleMainSceneEvent from "../mainSceneEventHandler";
 import { getKeyCodeAssociation } from "../utils/keyPressUtils";
 import NodeManager from "./MainSceneManagers/NodeManager";
@@ -37,10 +33,12 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
   const sitePosY = useMainSceneStore((state) => state.sitePos[1]);
   const activeLevel = useMainSceneStore((state) => state.activeLevel);
   const mainSubscene = useMainSceneStore((state) => state.subscene);
-  const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
+  const selectedLevel = useMainSceneStore((state) => state.selectedLevel);
-  const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
+  const pauseMatrixIdx = useMainSceneStore(
-  const activePauseComponent = usePauseStore(
+    (state) => state.pauseComponentMatrixIdx
-    useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
+  );
+  const activePauseComponent = useMainSceneStore(
+    useCallback((state) => state.pauseComponentMatrix[pauseMatrixIdx], [
       pauseMatrixIdx,
     ])
   );

src/core/StateManagers/MainSceneManagers/LevelSelectionManager.tsx

@@ -1,37 +1,22 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useLevelSelectionStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 
 const LevelSelectionManager = (props: StateManagerProps) => {
-  const toggleLevelSelection = useLevelSelectionStore(
+  const setSelectedLevel = useMainSceneStore((state) => state.setSelectedLevel);
-    (state) => state.toggleLevelSelection
-  );
-  const setSelectedLevel = useLevelSelectionStore(
-    (state) => state.setSelectedLevel
-  );
 
   const dispatchObject = useCallback(
     (eventState: { event: string; selectedLevelIdx: number }) => {
       switch (eventState.event) {
-        case "toggle_level_selection":
-        case "level_selection_back":
-          return {
-            action: toggleLevelSelection,
-          };
         case "level_selection_up":
         case "level_selection_down":
           return {
             action: setSelectedLevel,
             value: eventState.selectedLevelIdx,
           };
-        case "select_level_up":
-        case "select_level_down":
-          return {
-            action: toggleLevelSelection,
-          };
       }
     },
-    [setSelectedLevel, toggleLevelSelection]
+    [setSelectedLevel]
   );
 
   useEffect(() => {

src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx

@@ -37,14 +37,11 @@ const MiddleRingManager = (props: any) => {
 
   const moveDown = useCallback(() => {
     // make noise appear again
-    setTimeout(() => {
-      setNoiseAmp(0.06);
-    }, 800);
-
     // disable rotation of the ring
     setTimeout(() => {
+      setNoiseAmp(0.06);
       setRotating(false);
-    }, 700);
+    }, 800);
 
     setTimeout(() => {
       setPos([0, 1.39, 0]);

src/core/StateManagers/MainSceneManagers/PauseComponentManager.tsx

@@ -1,12 +1,14 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { usePauseStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 
 const PauseComponentManager = (props: StateManagerProps) => {
-  const setComponentMatrixIdx = usePauseStore(
+  const setComponentMatrixIdx = useMainSceneStore(
-    (state) => state.setComponentMatrixIdx
+    (state) => state.setPauseComponentMatrixIdx
+  );
+  const setExitAnimation = useMainSceneStore(
+    (state) => state.setPauseExitAnimation
   );
-  const setExitAnimation = usePauseStore((state) => state.setExitAnimation);
 
   const dispatchObject = useCallback(
     (eventState: { event: string; pauseMatrixIdx: number }) => {

src/core/StateManagers/MediaSceneEventManager.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { useMediaStore, useMediaWordStore } from "../../store";
+import { useMainSceneStore, useMediaWordStore } from "../../store";
 import { getKeyCodeAssociation } from "../utils/keyPressUtils";
 import SceneManager from "./GameManagers/SceneManager";
 import handleMediaSceneEvent from "../mediaSceneEventHandler";
@@ -8,23 +8,20 @@ import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager"
 
 const MediaSceneEventManager = () => {
   // all the possible context needed to calculate new state
-  const mediaComponentMatrixIndices = useMediaStore(
+  const activeMediaComponent = useMainSceneStore(
-    (state) => state.componentMatrixIndices
-  );
-
-  const activeMediaComponent = useMediaStore(
     useCallback(
       (state) =>
-        state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
+        state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
-          mediaComponentMatrixIndices.sideIdx === 0
+          state.mediaComponentMatrixIndices.sideIdx === 0
-            ? mediaComponentMatrixIndices.leftSideIdx
+            ? state.mediaComponentMatrixIndices.leftSideIdx
-            : mediaComponentMatrixIndices.rightSideIdx
+            : state.mediaComponentMatrixIndices.rightSideIdx
         ],
-      [mediaComponentMatrixIndices]
+      []
     )
   );
-  const rightSideComponentIdx = useMediaStore(
+
-    (state) => state.componentMatrixIndices.rightSideIdx
+  const rightSideComponentIdx = useMainSceneStore(
+    (state) => state.mediaComponentMatrixIndices.rightSideIdx
   );
 
   const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);

src/core/StateManagers/MediaSceneManagers/MediaComponentManager.tsx

@@ -1,26 +1,26 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useMediaStore, useMediaWordStore } from "../../../store";
+import { useMainSceneStore, useMediaWordStore } from "../../../store";
 import * as THREE from "three";
 
 const MediaComponentManager = (props: StateManagerProps) => {
-  const toggleSide = useMediaStore((state) => state.toggleSide);
+  const toggleSide = useMainSceneStore((state) => state.toggleMediaSide);
-  const setLeftComponentMatrixIdx = useMediaStore(
+  const setLeftComponentMatrixIdx = useMainSceneStore(
-    (state) => state.setLeftComponentMatrixIdx
+    (state) => state.setMediaLeftComponentMatrixIdx
   );
-  const setRightComponentMatrixIdx = useMediaStore(
+  const setRightComponentMatrixIdx = useMainSceneStore(
-    (state) => state.setRightComponentMatrixIdx
+    (state) => state.setMediaRightComponentMatrixIdx
   );
   const setWordPosStateIdx = useMediaWordStore((state) => state.setPosStateIdx);
 
-  const resetComponentMatrixIndices = useMediaStore(
+  const resetComponentMatrixIndices = useMainSceneStore(
-    (state) => state.resetComponentMatrixIndices
+    (state) => state.resetMediaComponentMatrixIndices
   );
   const resetWordPosStateIdx = useMediaWordStore(
     (state) => state.resetPosStateIdx
   );
 
-  const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
+  const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
 
   const playMedia = useCallback(() => {
     const mediaElement = document.getElementById("media") as HTMLMediaElement;
@@ -46,7 +46,7 @@ const MediaComponentManager = (props: StateManagerProps) => {
   }, []);
 
   const updateRightSide = useCallback(
-    (newRightSideComponentIdx: number, newWordPosStateIdx: number) => {
+    (newRightSideComponentIdx: 0 | 1 | 2, newWordPosStateIdx: number) => {
       setRightComponentMatrixIdx(newRightSideComponentIdx);
       setWordPosStateIdx(newWordPosStateIdx);
     },

src/core/StateManagers/SSknSceneManagers/SSknComponentManager.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "../EventManager";
-import { useMediaStore, useSSknStore } from "../../../store";
+import { useSSknStore } from "../../../store";
 
 const SSknComponentManager = (props: StateManagerProps) => {
   const toggleComponentMatrixIdx = useSSknStore(

src/scenes/EndScene.tsx

@@ -1,14 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
-import EndCylinder from "../components/EndScene/EndCylinder";
+import { useEndSceneStore, useMainSceneStore } from "../store";
-import EndSphere from "../components/EndScene/EndSphere";
-import LainSpeak from "../components/LainSpeak";
-import { useEndSceneStore, useMediaStore } from "../store";
 import EndSelectionScreen from "../components/EndScene/EndSelectionScreen";
 
 const EndScene = () => {
-  const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
+  const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
 
   const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount);
 

src/scenes/MainScene.tsx

@@ -1,16 +1,12 @@
 import { a } from "@react-spring/three";
 import { OrbitControls } from "@react-three/drei";
 import React, { Suspense, useEffect, useMemo } from "react";
-import Site from "../components/MainScene/SyncedComponents/Site";
 import Lain from "../components/MainScene/Lain";
 import Preloader from "../components/Preloader";
-import MiddleRing from "../components/MainScene/SyncedComponents/MiddleRing";
 import { useMainSceneStore } from "../store";
 import Pause from "../components/MainScene/PauseSubscene/Pause";
 import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";
 import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection";
-import NodeExplosion from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion";
-import NodeRip from "../components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip";
 
 const MainScene = () => {
   const currentSubscene = useMainSceneStore((state) => state.subscene);
@@ -31,6 +27,7 @@ const MainScene = () => {
         <a.group>
           <Preloader />
           <LevelSelection />
+          <Pause paused={isPaused} />
           <SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
           <OrbitControls />
           <pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />

src/scenes/MediaScene.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from "react";
-import { useMainSceneStore, useMediaStore } from "../store";
+import { useMainSceneStore } from "../store";
 import LeftSide from "../components/MediaScene/Selectables/LeftSide";
 import RightSide from "../components/MediaScene/Selectables/RightSide";
 import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
@@ -12,10 +12,6 @@ import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextA
 import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
 
 const MediaScene = () => {
-  const mediaComponentMatrixIndices = useMediaStore(
-    (state) => state.componentMatrixIndices
-  );
-
   const activeNodeName = useMainSceneStore((state) =>
     state.activeNode.node_name.split("")
   );
@@ -23,15 +19,15 @@ const MediaScene = () => {
     (state) => state.activeNode.media_file
   );
 
-  const activeMediaComponent = useMediaStore(
+  const activeMediaComponent = useMainSceneStore(
     useCallback(
       (state) =>
-        state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
+        state.mediaComponentMatrix[state.mediaComponentMatrixIndices.sideIdx][
-          mediaComponentMatrixIndices.sideIdx === 0
+          state.mediaComponentMatrixIndices.sideIdx === 0
-            ? mediaComponentMatrixIndices.leftSideIdx
+            ? state.mediaComponentMatrixIndices.leftSideIdx
-            : mediaComponentMatrixIndices.rightSideIdx
+            : state.mediaComponentMatrixIndices.rightSideIdx
         ],
-      [mediaComponentMatrixIndices]
+      []
     )
   );
 
@@ -48,7 +44,7 @@ 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 activeMediaComponent={activeMediaComponent!} />
         <group position={[0, 0.5, -3]}>
           <MediaLoadingBar />
           <NodeNameContainer />
@@ -61,7 +57,7 @@ const MediaScene = () => {
         <MediaYellowTextAnimator />
 
         <group visible={activeNodeMedia.includes("XA")}>
-          <RightSide activeMediaComponent={activeMediaComponent} />
+          <RightSide activeMediaComponent={activeMediaComponent!} />
           <Lof />
           <AudioVisualizer />
           <Images />

src/scenes/SSknScene.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import SSknIcon from "../components/SSknScene/SSknIcon";
 import SSknBackground from "../components/SSknScene/SSknBackground";
 import SSknHUD from "../components/SSknScene/SSknHUD";
-import { useMediaStore, useSSknStore } from "../store";
+import { useSSknStore } from "../store";
 import SSknSceneManager from "../core/StateManagers/SSknSceneManager";
 
 const SSknScene = () => {

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 { useMediaStore, useSceneStore } from "../store";
+import { useMainSceneStore, useSceneStore } from "../store";
 
 const TaKScene = () => {
-  const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
+  const setAudioAnalyser = useMainSceneStore((state) => state.setAudioAnalyser);
   const setScene = useSceneStore((state) => state.setScene);
 
   const [isIntro, setIsIntro] = useState(true);
   const [isOutro, setIsOutro] = useState(false);
 
-  const percentageElapsed = useMediaStore(
+  const percentageElapsed = useMainSceneStore(
     (state) => state.mediaPercentageElapsed
   );
 

src/store.ts

@@ -1,8 +1,6 @@
 import create from "zustand";
 import { combine } from "zustand/middleware";
 import * as THREE from "three";
-import site_a from "./resources/site_a.json";
-import site_b from "./resources/site_b.json";
 import authorize_user_letters from "./resources/authorize_user_letters.json";
 import game_progress from "./resources/initial_progress.json";
 import { HUDType } from "./components/MainScene/SyncedComponents/HUD";
@@ -40,21 +38,6 @@ type SiteSaveState = {
   };
 };
 
-type PauseState = {
-  exitAnimation: boolean;
-  componentMatrix: string[];
-  componentMatrixIdx: number;
-  setComponentMatrixIdx: (to: number) => void;
-  setExitAnimation: (to: boolean) => void;
-};
-
-type LevelSelectionState = {
-  selectedLevel: number;
-  levelSelectionToggled: number;
-  setSelectedLevel: (to: number) => void;
-  toggleLevelSelection: () => void;
-};
-
 type SceneState = {
   currentScene: string;
   setScene: (to: string) => void;
@@ -179,62 +162,6 @@ export const useIdleStore = create<IdleState>((set) => ({
   setImages: (to) => set(() => ({ images: to })),
 }));
 
-export const useMediaStore = create(
-  combine(
-    {
-      audioAnalyser: undefined,
-      mediaPercentageElapsed: 0,
-      componentMatrix: [
-        ["play", "exit"],
-        ["fstWord", "sndWord", "thirdWord"],
-      ],
-      componentMatrixIndices: {
-        // 0 or 1 (left/right)
-        sideIdx: 0,
-        // 0 or 1 ("play" or "exit")
-        leftSideIdx: 0,
-        // 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord")
-        rightSideIdx: 0,
-      },
-    } as MediaState,
-    (set) => ({
-      toggleSide: () =>
-        set((state) => ({
-          componentMatrixIndices: {
-            ...state.componentMatrixIndices,
-            sideIdx: Number(!state.componentMatrixIndices.sideIdx),
-          },
-        })),
-      setLeftComponentMatrixIdx: (to: number) =>
-        set((state) => ({
-          componentMatrixIndices: {
-            ...state.componentMatrixIndices,
-            leftSideIdx: to,
-          },
-        })),
-      setRightComponentMatrixIdx: (to: number) =>
-        set((state) => ({
-          componentMatrixIndices: {
-            ...state.componentMatrixIndices,
-            rightSideIdx: to,
-          },
-        })),
-      resetComponentMatrixIndices: () =>
-        set(() => ({
-          componentMatrixIndices: {
-            sideIdx: 0,
-            leftSideIdx: 0,
-            rightSideIdx: 0,
-          },
-        })),
-      setPercentageElapsed: (to: number) =>
-        set(() => ({ mediaPercentageElapsed: to })),
-      setAudioAnalyser: (to: THREE.AudioAnalyser) =>
-        set(() => ({ audioAnalyser: to })),
-    })
-  )
-);
-
 export const useMediaWordStore = create<MediaWordState>((set) => ({
   posStateIdx: 1,
   setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
@@ -252,7 +179,7 @@ export const useSSknStore = create<SSknState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "main",
+  currentScene: "media",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));
 
@@ -331,6 +258,16 @@ type MainSceneState = {
   pauseComponentMatrix: [string, string, string, string, string];
   pauseComponentMatrixIdx: number;
   pauseExitAnimation: boolean;
+
+  // media/media scene
+  audioAnalyser: undefined | THREE.AudioAnalyser;
+  mediaPercentageElapsed: number;
+  mediaComponentMatrix: [[string, string], [string, string, string]];
+  mediaComponentMatrixIndices: {
+    sideIdx: 0 | 1;
+    leftSideIdx: 0 | 1;
+    rightSideIdx: 0 | 1 | 2;
+  };
 };
 
 export const useMainSceneStore = create(
@@ -349,7 +286,7 @@ export const useMainSceneStore = create(
       bigText: "Tda028",
       bigTextVisible: true,
       bigTextColor: "yellow",
-      bigTextPos: [-0.35, 0.23, 0],
+      bigTextPos: [-0.35, 0.23, -8.7],
       bigTextXOffset: 0,
 
       // hud
@@ -377,6 +314,7 @@ export const useMainSceneStore = create(
 
       // nodes
       activeNode: {
+        id: "0422",
         image_table_indices: {
           "1": "93",
           "2": "356",
@@ -435,12 +373,27 @@ export const useMainSceneStore = create(
 
       // level selection
       selectedLevel: 4,
-      levelSelectionToggled: false,
 
       // pause
       pauseComponentMatrix: ["load", "about", "change", "save", "exit"],
       pauseComponentMatrixIdx: 2,
       pauseExitAnimation: false,
+
+      // media / media scene
+      audioAnalyser: undefined,
+      mediaPercentageElapsed: 0,
+      mediaComponentMatrix: [
+        ["play", "exit"],
+        ["fstWord", "sndWord", "thirdWord"],
+      ],
+      mediaComponentMatrixIndices: {
+        // 0 or 1 (left/right)
+        sideIdx: 0,
+        // 0 or 1 ("play" or "exit")
+        leftSideIdx: 0,
+        // 0 or 1 or 2 ("fstWord", "sndWord" or "thirdWord")
+        rightSideIdx: 0,
+      },
     } as MainSceneState,
     (set) => ({
       // subscene setters
@@ -511,16 +464,49 @@ export const useMainSceneStore = create(
 
       // level selection setters
       setSelectedLevel: (to: number) => set(() => ({ selectedLevel: to })),
-      toggleLevelSelection: () =>
-        set((state) => ({
-          levelSelectionToggled: !state.levelSelectionToggled,
-        })),
 
       // pause setters
       setPauseComponentMatrixIdx: (to: number) =>
         set(() => ({ pauseComponentMatrixIdx: to })),
       setPauseExitAnimation: (to: boolean) =>
         set(() => ({ pauseExitAnimation: to })),
+
+      // media/media scene setters
+      toggleMediaSide: () =>
+        set((state) => ({
+          mediaComponentMatrixIndices: {
+            ...state.mediaComponentMatrixIndices,
+            sideIdx: Number(!state.mediaComponentMatrixIndices.sideIdx) as
+              | 0
+              | 1,
+          },
+        })),
+      setMediaLeftComponentMatrixIdx: (to: 0 | 1) =>
+        set((state) => ({
+          mediaComponentMatrixIndices: {
+            ...state.mediaComponentMatrixIndices,
+            leftSideIdx: to,
+          },
+        })),
+      setMediaRightComponentMatrixIdx: (to: 0 | 1 | 2) =>
+        set((state) => ({
+          mediaComponentMatrixIndices: {
+            ...state.mediaComponentMatrixIndices,
+            rightSideIdx: to,
+          },
+        })),
+      resetMediaComponentMatrixIndices: () =>
+        set(() => ({
+          mediaComponentMatrixIndices: {
+            sideIdx: 0,
+            leftSideIdx: 0,
+            rightSideIdx: 0,
+          },
+        })),
+      setPercentageElapsed: (to: number) =>
+        set(() => ({ mediaPercentageElapsed: to })),
+      setAudioAnalyser: (to: THREE.AudioAnalyser) =>
+        set(() => ({ audioAnalyser: to })),
     })
   )
 );
@@ -583,24 +569,6 @@ export const useGateStore = create<GateState>((set) => ({
   incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
 }));
 
-export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
-  selectedLevel: 4,
-  levelSelectionToggled: 0,
-  setSelectedLevel: (to) => set(() => ({ selectedLevel: to })),
-  toggleLevelSelection: () =>
-    set((state) => ({
-      levelSelectionToggled: Number(!state.levelSelectionToggled),
-    })),
-}));
-
-export const usePauseStore = create<PauseState>((set) => ({
-  componentMatrix: ["load", "about", "change", "save", "exit"],
-  componentMatrixIdx: 2,
-  exitAnimation: false,
-  setComponentMatrixIdx: (to) => set(() => ({ componentMatrixIdx: to })),
-  setExitAnimation: (to) => set(() => ({ exitAnimation: to })),
-}));
-
 export const useSiteSaveStore = create(
   combine(
     {