all current animations work properly, have to add more

src/components/MediaScene/MediaScene.tsx

@@ -1,16 +1,12 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, { useState } from "react";
-
-import grayTextureFile from "../../static/sprite/gray_box.png";
-import darkGrayTextureFile from "../../static/sprite/dark_gray_box.png";
 import mediaOverlayHud from "../../static/sprite/media_hud.png";
 
-import { useFrame, useLoader } from "react-three-fiber";
+import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import { OrbitControls } from "drei";
-import { useMediaStore, useMediaWordStore } from "../../store";
+import { useMediaStore } from "../../store";
 import TextRenderer from "../TextRenderer/TextRenderer";
 import LeftSide from "./LeftSide/LeftSide";
-import Word from "./RightSide/Word";
 import RightSide from "./RightSide/RightSide";
 
 const MediaScene = () => {

src/components/MediaScene/RightSide/RightSide.tsx

@@ -10,24 +10,24 @@ type RightSideProps = {
 const RightSide = (props: RightSideProps) => {
   const words = useMediaWordStore((state) => state.words);
 
-  const wordStateDataStructIdx = useMediaWordStore(
+  const wordPositionDataStructIdx = useMediaWordStore(
-    (state) => state.wordStateDataStructIdx
+    (state) => state.wordPositionDataStructIdx
   );
 
-  const wordState = useMediaWordStore(
+  const wordPositionState = useMediaWordStore(
-    useCallback((state) => state.wordStateDataStruct[wordStateDataStructIdx], [
+    useCallback(
-      wordStateDataStructIdx,
+      (state) => state.wordPositionDataStruct[wordPositionDataStructIdx],
-    ])
+      [wordPositionDataStructIdx]
+    )
   );
 
-  console.log(wordStateDataStructIdx);
+  const wordPositionStateSpring = useSpring({
-  const wordStateSpring = useSpring({
+    fstWordPosX: wordPositionState.positions.fstWord.posX,
-    fstWordPosX: wordState.positions.fstWord.posX,
+    fstWordPosY: wordPositionState.positions.fstWord.posY,
-    fstWordPosY: wordState.positions.fstWord.posY,
+    sndWordPosX: wordPositionState.positions.sndWord.posX,
-    sndWordPosX: wordState.positions.sndWord.posX,
+    sndWordPosY: wordPositionState.positions.sndWord.posY,
-    sndWordPosY: wordState.positions.sndWord.posY,
+    thirdWordPosX: wordPositionState.positions.thirdWord.posX,
-    thirdWordPosX: wordState.positions.thirdWord.posX,
+    thirdWordPosY: wordPositionState.positions.thirdWord.posY,
-    thirdWordPosY: wordState.positions.thirdWord.posY,
     config: { duration: 300 },
   });
 
@@ -35,20 +35,20 @@ const RightSide = (props: RightSideProps) => {
     <>
       <Word
         word={words[0]}
-        posX={wordStateSpring.fstWordPosX}
+        posX={wordPositionStateSpring.fstWordPosX}
-        posY={wordStateSpring.fstWordPosY}
+        posY={wordPositionStateSpring.fstWordPosY}
         active={props.activeMediaElement === "fstWord"}
       />
       <Word
         word={words[1]}
-        posX={wordStateSpring.sndWordPosX}
+        posX={wordPositionStateSpring.sndWordPosX}
-        posY={wordStateSpring.sndWordPosY}
+        posY={wordPositionStateSpring.sndWordPosY}
         active={props.activeMediaElement === "sndWord"}
       />
       <Word
         word={words[2]}
-        posX={wordStateSpring.thirdWordPosX}
+        posX={wordPositionStateSpring.thirdWordPosX}
-        posY={wordStateSpring.thirdWordPosY}
+        posY={wordPositionStateSpring.thirdWordPosY}
         active={props.activeMediaElement === "thirdWord"}
       />
     </>

src/components/StateManagers/EventStateManager.tsx

@@ -8,6 +8,8 @@ import YellowTextStateManager from "./YellowTextStateManager";
 import { useBlueOrbStore, useMediaStore } from "../../store";
 import GreenTextStateManager from "./GreenTextStateManager";
 import ActiveMediaElementStateManager from "./MediaScene/ActiveMediaElementStateManager";
+import MediaWordStateManager from "./MediaScene/MediaWordStateManager";
+import MediaYellowTextStateManager from "./MediaScene/MediaYellowTextStateManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -24,16 +26,6 @@ export type StateManagerProps = {
   eventState: string;
 };
 
-export type EventObject = {
-  action: string;
-
-  target_blue_orb_id?: string;
-  target_hud_id?: string;
-  target_media_element?: string;
-  target_media_element_text?: string;
-  target_media_element_text_position?: number[];
-};
-
 const EventStateManager = () => {
   const [eventState, setEventState] = useState<string>();
   const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
@@ -55,7 +47,6 @@ const EventStateManager = () => {
         // const eventId = `${activeBlueOrb}_${keyPress}`;
         //
         const eventId = `${activeMediaElement}_${keyPress}`;
-        console.log(activeMediaElement)
         setEventState(eventId);
       }
     },
@@ -80,6 +71,8 @@ const EventStateManager = () => {
       <LainStateManager eventState={eventState!} />
       <MiddleRingStateManager eventState={eventState!} />
       <ActiveMediaElementStateManager eventState={eventState!} />
+      <MediaWordStateManager eventState={eventState!} />
+      <MediaYellowTextStateManager eventState={eventState!} />
     </>
   );
 };

src/components/StateManagers/LainStateManager.tsx

@@ -12,27 +12,27 @@ const LainStateManager = (props: StateManagerProps) => {
         moveUp: {
           action: setLainMoveState,
           value: "moveUp",
-          duration: 3903.704,
+          duration: 3904.704,
         },
         moveDown: {
           action: setLainMoveState,
           value: "moveDown",
-          duration: 3903.704,
+          duration: 3904.704,
         },
         moveLeft: {
           action: setLainMoveState,
           value: "moveLeft",
-          duration: 3903.704,
+          duration: 3904.704,
         },
         moveRight: {
           action: setLainMoveState,
           value: "moveRight",
-          duration: 3903.704,
+          duration: 3904.704,
         },
         pickActiveBlueOrb: {
           action: setLainMoveState,
           value: "throwBlueOrb",
-          duration: 3903.704,
+          duration: 3904.704,
         },
       };
 

src/components/StateManagers/MediaScene/ActiveMediaElementStateManager.tsx

@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect } from "react";
+import { StateManagerProps } from "../EventStateManager";
+import { useMediaStore } from "../../../store";
+
+const ActiveMediaElementStateManager = (props: StateManagerProps) => {
+  const setActiveMediaElement = useMediaStore(
+    (state) => state.setActiveMediaElement
+  );
+
+  const setLastActiveLeftSideElement = useMediaStore(
+    (state) => state.setLastActiveLeftSideElement
+  );
+  const lastActiveLeftSideElement = useMediaStore(
+    (state) => state.lastActiveLeftSideElement
+  );
+  const setLastActiveRightSideElement = useMediaStore(
+    (state) => state.setLastActiveRightSideElement
+  );
+  const lastActiveRightSideElement = useMediaStore(
+    (state) => state.lastActiveRightSideElement
+  );
+
+  const switchToLeftSide = useCallback(
+    (from: string) => {
+      setActiveMediaElement(lastActiveLeftSideElement);
+      // store last active right side elem
+      setLastActiveRightSideElement(from);
+    },
+    [
+      lastActiveLeftSideElement,
+      setActiveMediaElement,
+      setLastActiveRightSideElement,
+    ]
+  );
+
+  const switchToRightSide = useCallback(
+    (from: string) => {
+      setActiveMediaElement(lastActiveRightSideElement);
+      // store last active left side elem
+      setLastActiveLeftSideElement(from);
+    },
+    [
+      lastActiveRightSideElement,
+      setActiveMediaElement,
+      setLastActiveLeftSideElement,
+    ]
+  );
+
+  const dispatchObject = useCallback(
+    (event: string) => {
+      const dispatcherObjects = {
+        play_down: { action: setActiveMediaElement, value: "exit" },
+        exit_up: { action: setActiveMediaElement, value: "play" },
+        play_right: {
+          action: switchToRightSide,
+          value: "play",
+        },
+        exit_right: {
+          action: switchToRightSide,
+          value: "exit",
+        },
+        fstWord_left: {
+          action: switchToLeftSide,
+          value: "fstWord",
+        },
+        fstWord_down: {
+          action: setActiveMediaElement,
+          value: "sndWord",
+        },
+        sndWord_up: {
+          action: setActiveMediaElement,
+          value: "fstWord",
+        },
+        sndWord_down: {
+          action: setActiveMediaElement,
+          value: "thirdWord",
+        },
+      };
+
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [setActiveMediaElement, switchToLeftSide, switchToRightSide]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const dispatchedObject = dispatchObject(props.eventState);
+
+      if (dispatchedObject) {
+        dispatchedObject.action(dispatchedObject.value);
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default ActiveMediaElementStateManager;

src/components/StateManagers/MediaScene/MediaWordStateManager.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback, useEffect } from "react";
+import { StateManagerProps } from "../EventStateManager";
+import { useMediaWordStore } from "../../../store";
+
+const MediaWordStateManager = (props: StateManagerProps) => {
+  const addToWordPositionDataStructIdx = useMediaWordStore(
+    (state) => state.addToWordPositionDataStructIdx
+  );
+  const dispatchObject = useCallback((event: string) => {
+    const dispatcherObjects = {
+      fstWord_down: {
+        action: addToWordPositionDataStructIdx,
+        value: 1,
+      },
+      sndWord_up: {
+        action: addToWordPositionDataStructIdx,
+        value: -1,
+      },
+      sndWord_down: {
+        action: addToWordPositionDataStructIdx,
+        value: 1,
+
+      }
+    };
+
+    return dispatcherObjects[event as keyof typeof dispatcherObjects];
+  }, []);
+
+  useEffect(() => {
+    if (props.eventState) {
+      const dispatchedObject = dispatchObject(props.eventState);
+
+      if (dispatchedObject) {
+        dispatchedObject.action(dispatchedObject.value as never);
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default MediaWordStateManager;

src/components/StateManagers/MediaScene/MediaYellowTextStateManager.tsx

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

src/components/StateManagers/YellowTextStateManager.tsx

@@ -3,8 +3,6 @@ import blue_orb_huds from "../../resources/blue_orb_huds.json";
 import site_a from "../../resources/site_a.json";
 import { useTextRendererStore } from "../../store";
 import blue_orb_directions from "../../resources/blue_orb_directions.json";
-import media_scene_directions from "../../resources/media_scene_actions.json";
-import { EventObject } from "./EventStateManager";
 
 type AnimateYellowTextWithMove = (
   yellowLetterPosYOffset: number,
@@ -17,16 +15,8 @@ type AnimateYellowTextWithoutMove = (
   targetBlueOrbId: string
 ) => void;
 
-type AnimateMediaYellowText = (
-  targetMediaText: string,
-  targetMediaTextPos: number[]
-) => void;
-
 type YellowTextDispatchData = {
-  action:
+  action: AnimateYellowTextWithMove | AnimateYellowTextWithoutMove;
-    | AnimateYellowTextWithMove
-    | AnimateYellowTextWithoutMove
-    | AnimateMediaYellowText;
   value: any;
 };
 
@@ -36,8 +26,6 @@ type YellowTextDispatcher = {
   moveLeft: YellowTextDispatchData;
   moveRight: YellowTextDispatchData;
   changeBlueOrbFocus: YellowTextDispatchData;
-  setActivePlay: YellowTextDispatchData;
-  setActiveExit: YellowTextDispatchData;
 };
 
 const YellowTextStateManager = (props: any) => {
@@ -137,33 +125,6 @@ const YellowTextStateManager = (props: any) => {
     ]
   );
 
-  const animateMediaYellowText: AnimateMediaYellowText = useCallback(
-    (targetMediaElementText: string, targetMediaElementTextPos: number[]) => {
-      // make current text shrink
-      setYellowTextOffsetXCoeff(-1);
-
-      setTimeout(() => {
-        setYellowTextPosX(targetMediaElementTextPos[0]);
-        setYellowTextPosY(targetMediaElementTextPos[1]);
-      }, 400);
-
-      setTimeout(() => {
-        setYellowText(targetMediaElementText);
-      }, 1000);
-
-      setTimeout(() => {
-        // unshrink text
-        setYellowTextOffsetXCoeff(0);
-      }, 1200);
-    },
-    [
-      setYellowText,
-      setYellowTextOffsetXCoeff,
-      setYellowTextPosX,
-      setYellowTextPosY,
-    ]
-  );
-
   const dispatchObject = useCallback(
     (
       event: string,
@@ -171,7 +132,6 @@ const YellowTextStateManager = (props: any) => {
       targetBlueOrbId: string | undefined
     ) => {
       const dispatcherObjects: YellowTextDispatcher = {
-        // main scene
         moveUp: {
           action: animateYellowTextWithMove,
           value: [-1.5, targetBlueOrbHudId, targetBlueOrbId],
@@ -192,40 +152,23 @@ const YellowTextStateManager = (props: any) => {
           action: animateYellowTextWithoutMove,
           value: [targetBlueOrbHudId, targetBlueOrbId],
         },
-        // media scene
-        setActivePlay: {
-          action: animateMediaYellowText,
-          value: ["Play", [-0.8, 0.05, 0.6]],
-        },
-        setActiveExit: {
-          action: animateMediaYellowText,
-          value: ["Exit", [-0.8, -0.08, 0.6]],
-        },
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [
+    [animateYellowTextWithMove, animateYellowTextWithoutMove]
-      animateYellowTextWithMove,
-      animateYellowTextWithoutMove,
-      animateMediaYellowText,
-    ]
   );
 
   useEffect(() => {
     if (props.eventState) {
-      const eventObject: EventObject =
+      const eventObject =
         blue_orb_directions[
           props.eventState as keyof typeof blue_orb_directions
-        ] ||
-        media_scene_directions[
-          props.eventState as keyof typeof media_scene_directions
         ];
 
       if (eventObject) {
         const eventAction = eventObject.action;
 
-        // main scene specific
         const targetBlueOrbId = eventObject.target_blue_orb_id;
         const targetBlueOrbHudId = eventObject.target_hud_id;
 
@@ -238,6 +181,7 @@ const YellowTextStateManager = (props: any) => {
         if (dispatchedObject) {
           (dispatchedObject.action as any).apply(null, dispatchedObject.value);
         }
+      } else {
       }
     }
   }, [

src/resources/media_scene_actions.json

@@ -1,26 +0,0 @@
-{
-  "play_down": {
-    "action": "setActiveMediaElement",
-    "value": "exit"
-  },
-  "exit_up": {
-    "action": "setActiveMediaElement",
-    "value": "play"
-  },
-  "exit_right": {
-    "action": "setActiveWords",
-    "value": "lastActiveWord"
-  },
-  "play_right": {
-    "action": "setActiveWords",
-    "value": "lastActiveWord"
-  },
-  "fstWord_down": {
-    "action": "addToWordState",
-    "value": -1
-  },
-  "fstWord_up": {
-    "action": "addToWordState",
-    "value": 1
-  }
-}

src/store.ts

@@ -85,36 +85,26 @@ type MiddleRingState = {
   setMiddleRingAnimDuration: (to: number) => void;
 };
 
-type MediaWordData = {
+type MediaWordState = {
-  activeWord: string;
+  wordPositionDataStruct: {
     positions: {
       fstWord: { posX: number; posY: number };
       sndWord: { posX: number; posY: number };
       thirdWord: { posX: number; posY: number };
     };
-};
+  }[];
-
+  wordPositionDataStructIdx: number;
-type MediaWordState = {
-  wordStateDataStruct: MediaWordData[];
-  wordStateDataStructIdx: number;
   words: string[];
-  activeWordIdx: number;
+  addToWordPositionDataStructIdx: (val: number) => void;
-  lastActiveWordIdx: number;
-  setWords: (to: string[]) => void;
-  addToActiveWordIdx: (val: number) => void;
-  addToWordStateDataStructIdx: (val: number) => void;
-  setLastActiveWordIdx: (to: number) => void;
 };
 
 type MediaState = {
   activeMediaElement: string;
-  leftColActiveMediaElement: string;
-  leftColActiveMediaElementText: string;
-  leftColActiveMediaElementTextPos: number[];
   setActiveMediaElement: (to: string) => void;
-  setLeftColActiveMediaElement: (to: string) => void;
+  lastActiveLeftSideElement: string;
-  setLeftColActiveMediaElementText: (to: string) => void;
+  setLastActiveLeftSideElement: (to: string) => void;
-  setLeftColActiveMediaElementTextPos: (to: number[]) => void;
+  lastActiveRightSideElement: string;
+  setLastActiveRightSideElement: (to: string) => void;
 };
 
 type TextRendererState = {
@@ -254,22 +244,19 @@ export const useMediaStore = create<MediaState>((set) => ({
   // you end up on the last active element FROM THAT COLUMN).
   // so we store leftColActiveMediaElement as well as rightCol.
   activeMediaElement: "play",
-  leftColActiveMediaElement: "play",
-  leftColActiveMediaElementText: "Play",
-  leftColActiveMediaElementTextPos: [-2.7, -0.9, 0.6],
   setActiveMediaElement: (to) => set(() => ({ activeMediaElement: to })),
-  setLeftColActiveMediaElement: (to) =>
+  lastActiveLeftSideElement: "play",
-    set(() => ({ leftColActiveMediaElement: to })),
+  lastActiveRightSideElement: "fstWord",
-  setLeftColActiveMediaElementText: (to) =>
+  setLastActiveLeftSideElement: (to) =>
-    set(() => ({ leftColActiveMediaElementText: to })),
+    set(() => ({ lastActiveLeftSideElement: to })),
-  setLeftColActiveMediaElementTextPos: (to) =>
+  setLastActiveRightSideElement: (to) =>
-    set(() => ({ leftColActiveMediaElementTextPos: to })),
+    set(() => ({ lastActiveRightSideElement: to })),
 }));
 
 export const useMediaWordStore = create<MediaWordState>((set) => ({
-  wordStateDataStruct: [
+  words: ["eye", "quiet", "hallucination"],
+  wordPositionDataStruct: [
     {
-      activeWord: "fstWord",
       positions: {
         fstWord: { posX: 0, posY: 0 },
         sndWord: { posX: 3, posY: -3 },
@@ -277,26 +264,23 @@ export const useMediaWordStore = create<MediaWordState>((set) => ({
       },
     },
     {
-      activeWord: "sndWord",
       positions: {
         fstWord: { posX: 1.8, posY: -2.5 },
         sndWord: { posX: 1.5, posY: -1.5 },
         thirdWord: { posX: 3.3, posY: -3.7 },
       },
     },
+    {
+      positions: {
+        fstWord: { posX: 3.7, posY: -4.3 },
+        sndWord: { posX: 0, posY: 0 },
+        thirdWord: { posX: 3, posY: -3 },
+      },
+    },
   ],
-  wordStateDataStructIdx: 0,
+  wordPositionDataStructIdx: 0,
-  words: ["eye", "quiet", "hallucination"],
+  addToWordPositionDataStructIdx: (val) =>
-  activeWordIdx: 0,
-  lastActiveWordIdx: 0,
-  setWords: (to) => set(() => ({ words: to })),
-  setLastActiveWordIdx: (to) => set(() => ({ lastActiveWordIdx: to })),
-  addToWordStateDataStructIdx: (val) =>
     set((state) => ({
-      wordStateDataStructIdx: state.wordStateDataStructIdx + val,
+      wordPositionDataStructIdx: state.wordPositionDataStructIdx + val,
-    })),
-  addToActiveWordIdx: (val) =>
-    set((state) => ({
-      activeWordIdx: state.activeWordIdx + val,
     })),
 }));