reverted some stuff, fixed a couple bugs

src/components/MainScene/PauseSubscene/Pause.tsx

@@ -342,7 +342,6 @@ const Pause = (props: { visible: boolean }) => {
             depthTest={false}
           />
         </mesh>
-        <MainSceneEventManager loaded={!exit} />
       </group>
     </group>
   ) : (

src/components/MainScene/SyncedComponentLoader.tsx

@@ -7,6 +7,8 @@ import Starfield from "./SyncedComponents/Starfield";
 import Site from "./SyncedComponents/Site";
 import MiddleRing from "./SyncedComponents/MiddleRing";
 import MainSceneEventManager from "../../core/StateManagers/MainSceneEventManager";
+import Pause from "./PauseSubscene/Pause";
+import { a } from "@react-spring/three";
 
 type SyncedComponentLoaderProps = {
   paused: boolean;
@@ -46,11 +48,15 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => {
         <GrayPlanes />
       </group>
       <Starfield
+        visible={!props.paused}
         shouldIntro={props.shouldIntro}
         introFinished={introFinished}
       />
+      <Pause visible={props.paused} />
       <Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
-      <MainSceneEventManager loaded={visible} />
+      <MainSceneEventManager
+        loaded={props.shouldIntro ? introFinished : true}
+      />
     </>
   );
 };

src/components/MainScene/SyncedComponents/Starfield.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import Star from "./Starfield/Star";
 
 type StarfieldProps = {
+  visible: boolean;
   shouldIntro: boolean;
   introFinished: boolean;
 };
@@ -52,7 +53,7 @@ const Starfield = (props: StarfieldProps) => {
   }, []);
 
   return (
-    <>
+    <group visible={props.visible}>
       <group
         position={[0, -1, 2]}
         visible={props.shouldIntro ? mainVisible : true}
@@ -125,7 +126,7 @@ const Starfield = (props: StarfieldProps) => {
       ) : (
         <></>
       )}
-    </>
+    </group>
   );
 };
 

src/components/TextRenderer/BigLetter.tsx

@@ -5,13 +5,13 @@ 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, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
-import { useBigTextStore } from "../../store";
 
 const BigLetter = (props: {
   color: string;
   letter: string;
   letterIdx: number;
+  xOffsetCoeff: number;
 }) => {
   const colorToTexture = (color: string) => {
     const colorTexture = {
@@ -89,23 +89,15 @@ const BigLetter = (props: {
     return geometry;
   }, [letterData, lineYOffsets, props.letter]);
 
-  const [{ letterOffsetX }, set] = useSpring(() => ({
+  const textRendererState = useSpring({
-    letterOffsetX: props.letterIdx + 0.3 + (props.letterIdx + 0.3),
+    letterOffsetXCoeff:
+      props.letterIdx + 0.3 + (props.letterIdx + 0.3) * props.xOffsetCoeff,
     config: { duration: 200 },
-  }));
+  });
-
-  useEffect(() => {
-    useBigTextStore.subscribe(set, (state) => ({
-      letterOffsetX:
-        props.letterIdx +
-        0.3 +
-        (props.letterIdx + 0.3) * state.transformState.xOffset,
-    }));
-  }, [props.letterIdx, set]);
 
   return (
     <a.mesh
-      position-x={letterOffsetX}
+      position-x={textRendererState.letterOffsetXCoeff}
       position-y={-letterData[4] / 12.5}
       scale={[1, 1, 0]}
       geometry={geom}

src/components/TextRenderer/MediaYellowTextAnimator.tsx

@@ -1,24 +1,17 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { useMediaBigTextStore } from "../../store";
 import { a, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 
 const MediaYellowTextAnimator = () => {
-  const textArrRef = useRef(useMediaBigTextStore.getState().text.split(""));
+  const transformState = useMediaBigTextStore((state) => state.transformState);
+  const textArr = useMediaBigTextStore((state) => state.text).split("");
 
-  const [trail, set] = useTrail(textArrRef.current.length, () => ({
+  const trail = useTrail(textArr.length, {
-    posX: 0,
+    posX: transformState.posX,
-    posY: 0,
+    posY: transformState.posY,
-    xOffset: 0,
+    config: { duration: 280 },
-    config: { duration: 200 },
+  });
-  }));
-
-  useEffect(() => {
-    useMediaBigTextStore.subscribe(set, (state) => ({
-      posX: state.transformState.posX,
-      posY: state.transformState.posY,
-    }));
-  }, [set]);
 
   return (
     <group position={[0, 0, 10]}>
@@ -32,7 +25,8 @@ const MediaYellowTextAnimator = () => {
         >
           <BigLetter
             color={"yellow"}
-            letter={textArrRef.current[idx]}
+            xOffsetCoeff={transformState.xOffset}
+            letter={textArr[idx]}
             letterIdx={idx}
             key={idx}
           />

src/components/TextRenderer/YellowTextRenderer.tsx

@@ -1,30 +1,66 @@
 import React, { useEffect, useRef } from "react";
-import { BigTextState, useBigTextStore, useNodeStore } from "../../store";
+import { BigTextState, useBigTextStore } from "../../store";
 import { a, useSpring, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 
-const YellowTextRenderer = () => {
+const YellowTextRenderer = (props: { visible?: boolean }) => {
+  const disableTrail = useBigTextStore((state) => state.disableTrail);
+  const transformState = useBigTextStore((state) => state.transformState);
+
   const visible = useBigTextStore((state) => state.visible);
   const color = useBigTextStore((state) => state.color);
 
   const textArrRef = useRef(useBigTextStore.getState().text.split(""));
 
-  const [trail, set] = useTrail(textArrRef.current.length, () => ({
+  const transformRef = useRef(useBigTextStore.getState().transformState);
-    posX: 0,
-    posY: 0,
-    config: { duration: 280 },
-  }));
 
-  useEffect(() => {
+  // this is used to animate the letters moving one after another
-    useBigTextStore.subscribe(set, (state) => ({
+  const trail = useTrail(textArrRef.current.length, {
-      posX: state.transformState.posX,
+    posX: transformRef.current.posX,
-      posY: state.transformState.posY,
+    posY: transformRef.current.posY,
-    }));
+    config: { duration: 280 },
-  }, [set]);
+  });
+
+  // this is used when the whole GROUP itself needs to be animated
+  const spring = useSpring({
+    posX: transformState.posX,
+    posY: transformState.posY,
+    config: { duration: 1200 },
+  });
+
+  useEffect(
+    () =>
+      useBigTextStore.subscribe(
+        (state) => {
+          transformRef.current = (state as BigTextState).transformState;
+          textArrRef.current = (state as BigTextState).text.split("");
+        },
+        (state) => state
+      ),
+    []
+  );
 
   return (
-    <group position={[0, 0, 10]} visible={visible}>
+    <group position={[0, 0, 10]} visible={props.visible && visible}>
-      {trail.map(({ posX, posY }, idx) => (
+      {disableTrail
+        ? textArrRef.current.map((letter, idx) => (
+            <a.group
+              key={idx}
+              position-x={spring.posX}
+              position-y={spring.posY}
+              position-z={-8.7}
+              scale={[0.04, 0.06, 0.04]}
+            >
+              <BigLetter
+                color={color}
+                xOffsetCoeff={0}
+                letter={textArrRef.current[idx]}
+                letterIdx={idx}
+                key={idx}
+              />
+            </a.group>
+          ))
+        : trail.map(({ posX, posY }, idx) => (
             <a.group
               key={idx}
               position-x={posX}
@@ -34,6 +70,7 @@ const YellowTextRenderer = () => {
             >
               <BigLetter
                 color={color}
+                xOffsetCoeff={transformRef.current.xOffset}
                 letter={textArrRef.current[idx]}
                 letterIdx={idx}
                 key={idx}

src/core/StateManagers/MainSceneEventManager.tsx

@@ -23,6 +23,7 @@ import PauseComponentManager from "./MainSceneManagers/PauseComponentManager";
 import GameSaver from "./GameManagers/GameSaver";
 import GameLoader from "./GameManagers/GameLoader";
 import IdleManager from "./MainSceneManagers/IdleManager";
+import { useFrame } from "react-three-fiber";
 
 type MainSceneEventManagerProps = {
   loaded: boolean;
@@ -49,6 +50,48 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
 
   const [eventState, setEventState] = useState<any>();
 
+  useFrame(() => {
+    const now = Date.now();
+    if (
+      timePassedSinceLastKeyPress.current > -1 &&
+      mainSubscene !== "pause" &&
+      mainSubscene !== "level_selection"
+    ) {
+      if (now > timePassedSinceLastKeyPress.current + 5000) {
+        setEventState({
+          event: "play_idle_media",
+          scene: "idle_media",
+          site: currentSite,
+        });
+        timePassedSinceLastKeyPress.current = -1;
+      } else 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;
+      }
+    }
+  });
+
   const handleKeyPress = useCallback(
     (event) => {
       const { keyCode } = event;
@@ -70,6 +113,7 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
           gameProgress: gameProgress,
           currentSite: currentSite,
         });
+
         setEventState(event);
       }
     },

src/core/StateManagers/MainSceneManagers/YellowTextManager.tsx

@@ -102,6 +102,7 @@ const YellowTextManager = (props: StateManagerProps) => {
         // unshrink text
         setTransformState(0, "xOffset");
       }, 1200);
+
     },
     [setText, setTransformState, siteData]
   );

src/scenes/MainScene.tsx

@@ -30,7 +30,6 @@ const MainScene = () => {
       <Suspense fallback={null}>
         <a.group>
           <Preloader />
-          <Pause visible={isPaused} />
           <LevelSelection />
           <SyncedComponentLoader paused={isPaused} shouldIntro={shouldIntro} />
           <OrbitControls />

src/scenes/MediaScene.tsx

@@ -75,22 +75,23 @@ const MediaScene = () => {
           ))}
         </group>
         <MediaYellowTextAnimator />
-        {activeNodeMedia.includes("XA") || idleMedia.includes("XA") ? (
+
-          <>
+        <group
-            {currentScene !== "idle_media" ? (
+          visible={
-              <>
+            currentScene !== "idle_media" && activeNodeMedia.includes("XA")
+          }
+        >
           <RightSide activeMediaComponent={activeMediaComponent} />
           <Lof />
           <AudioVisualizer />
-              </>
-            ) : (
-              <></>
-            )}
           <Images />
-          </>
+        </group>
-        ) : (
+
-          <></>
+        <group
-        )}
+          visible={currentScene === "idle_media" && idleMedia.includes("XA")}
+        >
+          <Images />
+        </group>
       </group>
       <MediaSceneEventManager />
     </perspectiveCamera>