more state cleanup

src/components/MainScene/ActiveLevelNodes.tsx

@@ -14,12 +14,11 @@ const ActiveLevelNodes = () => {
     [activeLevel]
   );
 
-  const sitePosY = useSiteStore((state) => state.sitePosY);
-  const siteRotY = useSiteStore((state) => state.siteRotY);
+  const siteTransformState = useSiteStore((state) => state.transformState);
 
   const siteState = useSpring({
-    siteRotY: siteRotY,
-    sitePosY: sitePosY,
+    siteRotY: siteTransformState.rotY,
+    sitePosY: siteTransformState.posY,
     config: { duration: 1200 },
   });
 

src/components/MainScene/Site.tsx

@@ -55,12 +55,11 @@ const Site = memo(() => {
     return obj;
   }, [activeLevel]);
 
-  const siteRotY = useSiteStore((state) => state.siteRotY);
-  const sitePosY = useSiteStore((state) => state.sitePosY);
+  const siteTransformState = useSiteStore((state) => state.transformState);
 
   const siteState = useSpring({
-    siteRotY: siteRotY,
-    sitePosY: sitePosY,
+    siteRotY: siteTransformState.rotY,
+    sitePosY: siteTransformState.posY,
     config: { duration: 1200 },
   });
 

src/components/MediaScene/Images.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { useLoader } from "react-three-fiber";
 import { useLevelStore, useMediaStore, useNodeStore } from "../../store";
 import { a, useSpring } from "@react-spring/three";
 import image_table from "../../resources/image_table.json";
 import { LevelType } from "../MainScene/Site";
 import site_a from "../../resources/site_a.json";
+import dummy from "../../static/sprite/dummy.png";
 import * as THREE from "three";
+import { useLoader } from "react-three-fiber";
 
 const Images = () => {
   const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
@@ -13,6 +14,8 @@ const Images = () => {
   const [sceneImages, setSceneImages] = useState([] as any);
   const [activeImage, setActiveImage] = useState<THREE.Texture>();
 
+  const dummyTex = useLoader(THREE.TextureLoader, dummy);
+
   const mediaPercentageElapsed = useMediaStore(
     (state) => state.mediaPercentageElapsed
   );
@@ -50,6 +53,9 @@ const Images = () => {
   }, [activeLevelData, activeNodeId]);
 
   useEffect(() => {
+    if (mediaPercentageElapsed === 0 && sceneImages[0]) {
+      new THREE.TextureLoader().load(sceneImages[0].default, setActiveImage);
+    }
     if (mediaPercentageElapsed === 35 && sceneImages[1]) {
       setImageScaleY(0);
       setTimeout(() => {
@@ -72,11 +78,10 @@ const Images = () => {
       scale={[5, 3.75, 0]}
       scale-y={imageScaleState.imageScaleY}
     >
-      {sceneImages.length === 3 ? (
-        <spriteMaterial attach="material" map={activeImage} />
-      ) : (
-        <></>
-      )}
+      <spriteMaterial
+        attach="material"
+        map={activeImage ? activeImage : dummyTex}
+      />
     </a.sprite>
   );
 };

src/components/MediaScene/Selectables/RightSide.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from "react";
 import { useMediaWordStore } from "../../../store";
 import Word from "./RightSide/Word";
 import { useSpring, a } from "@react-spring/three";
+import word_position_states from "../../../resources/word_position_states.json";
 import * as THREE from "three";
 
 type RightSideProps = {
@@ -11,20 +12,15 @@ type RightSideProps = {
 const RightSide = (props: RightSideProps) => {
   const words = useMediaWordStore((state) => state.words);
 
-  const wordPositionDataStructIdx = useMediaWordStore(
-    (state) => state.wordPositionDataStructIdx
-  );
+  const posStateIdx = useMediaWordStore(
+    (state) => state.posStateIdx
+  ).toString();
 
   const wordPositionState = useMediaWordStore(
     useCallback(
-      (state) => {
-        return wordPositionDataStructIdx < 0
-          ? state.wordPositionDataStruct[
-              state.wordPositionDataStruct.length + wordPositionDataStructIdx
-            ]
-          : state.wordPositionDataStruct[wordPositionDataStructIdx];
-      },
-      [wordPositionDataStructIdx]
+      () =>
+        word_position_states[posStateIdx as keyof typeof word_position_states],
+      [posStateIdx]
     )
   );
 

src/core/StateManagers/EventManager.tsx

@@ -1,14 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import SiteManager from "./SiteManager";
 import MiddleRingManager from "./MiddleRingManager";
 import LainManager from "./LainManager";
 import NodeManager from "./NodeManager";
 import NodeHUDManager from "./NodeHUDManager";
 import {
-  useNodeStore,
   useBootStore,
   useLevelStore,
   useMediaStore,
+  useMediaWordStore,
+  useNodeStore,
   useSceneStore,
   useSiteStore,
   useSSknStore,
@@ -18,10 +19,13 @@ import MediaComponentManager from "./MediaComponentManager";
 import MediaWordManager from "./MediaWordManager";
 import SceneManager from "./SceneManager";
 import YellowTextManager from "./YellowTextManager";
-import computeAction from "../computeAction";
 import LevelManager from "./LevelManager";
 import BootManager from "./BootManager";
 import SSknComponentManager from "./SSknComponentManager";
+import handleMainSceneEvent from "../mainSceneEventHandler";
+import handleMediaSceneEvent from "../mediaSceneEventHandler";
+import handleBootEvent from "../bootEventHandler";
+import handleSSknSceneEvent from "../ssknSceneEventHandler";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -35,43 +39,16 @@ const getKeyCodeAssociation = (keyCode: number): string => {
   return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
 };
 
-type EventState = {
-  event: string;
-  newNodeColIdx: number;
-  newNodeRowIdx: number;
-  newLevel: string;
-  newActiveNodeId: string;
-  newSiteRotIdx: string;
-};
-
 export type StateManagerProps = {
   eventState: any;
 };
 
-export type GameContext = {
-  keyPress?: string;
-  scene: string;
-  bootSubscene: string;
-  nodeMatrixIndices: {
-    matrixIdx: number;
-    rowIdx: number;
-    colIdx: number;
-  };
-  activeLevel: string;
-  siteRotY: number;
-  sitePosY: number;
-  activeMediaComponent: string;
-  activeBootElement: string;
-  activeSSknComponent: string;
-};
-
 const EventManager = () => {
   const currentScene = useSceneStore((state) => state.currentScene);
 
   // main scene
   const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
-  const sitePosY = useSiteStore((state) => state.sitePosY);
-  const siteRotY = useSiteStore((state) => state.siteRotY);
+  const siteTransformState = useSiteStore((state) => state.transformState);
   const activeLevel = useLevelStore((state) => state.activeLevel);
 
   // media scene
@@ -90,6 +67,11 @@ const EventManager = () => {
       [mediaComponentMatrixIndices]
     )
   );
+  const rightSideComponentIdx = useMediaStore(
+    (state) => state.componentMatrixIndices.rightSideIdx
+  );
+
+  const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
 
   // sskn scene
   const ssknComponentMatrixIdx = useSSknStore(
@@ -117,31 +99,6 @@ const EventManager = () => {
 
   const [inputCooldown, setInputCooldown] = useState(false);
 
-  const gameContext: GameContext = useMemo(
-    () => ({
-      scene: currentScene,
-      bootSubscene: currentBootSubscene,
-      siteRotY: siteRotY,
-      sitePosY: sitePosY,
-      nodeMatrixIndices: nodeMatrixIndices,
-      activeLevel: activeLevel,
-      activeMediaComponent: activeMediaComponent,
-      activeBootElement: activeBootElement,
-      activeSSknComponent: activeSSknComponent,
-    }),
-    [
-      currentScene,
-      currentBootSubscene,
-      siteRotY,
-      sitePosY,
-      nodeMatrixIndices,
-      activeLevel,
-      activeMediaComponent,
-      activeBootElement,
-      activeSSknComponent,
-    ]
-  );
-
   const handleKeyPress = useCallback(
     (event) => {
       const { keyCode } = event;
@@ -149,12 +106,56 @@ const EventManager = () => {
       const keyPress = getKeyCodeAssociation(keyCode);
 
       if (keyPress && !inputCooldown) {
-        gameContext.keyPress = keyPress;
-        const event = computeAction(gameContext);
+        let event;
+        switch (currentScene) {
+          case "main":
+            event = handleMainSceneEvent({
+              keyPress: keyPress,
+              siteRotY: siteTransformState.rotY,
+              sitePosY: siteTransformState.posY,
+              nodeMatrixIndices: nodeMatrixIndices,
+              activeLevel: activeLevel,
+            });
+            break;
+          case "media":
+            event = handleMediaSceneEvent({
+              keyPress: keyPress,
+              activeMediaComponent: activeMediaComponent,
+              wordPosStateIdx: wordPosStateIdx,
+              rightSideComponentIdx: rightSideComponentIdx,
+            });
+            break;
+          case "boot":
+            event = handleBootEvent({
+              bootSubscene: currentBootSubscene,
+              activeBootElement: activeBootElement,
+            });
+            break;
+          case "gate":
+            event = { event: "exit_gate" };
+            break;
+          case "sskn":
+            event = handleSSknSceneEvent({
+              keyPress: keyPress,
+              activeSSknComponent: activeSSknComponent,
+            });
+            break;
+        }
         setEventState(event);
       }
     },
-    [gameContext, inputCooldown]
+    [
+      activeBootElement,
+      activeLevel,
+      activeMediaComponent,
+      activeSSknComponent,
+      currentBootSubscene,
+      currentScene,
+      inputCooldown,
+      nodeMatrixIndices,
+      siteTransformState.posY,
+      siteTransformState.rotY,
+    ]
   );
 
   useEffect(() => {

src/core/StateManagers/MediaComponentManager.tsx

@@ -8,8 +8,8 @@ const MediaComponentManager = (props: StateManagerProps) => {
   const toggleLeftComponent = useMediaStore(
     (state) => state.toggleLeftComponent
   );
-  const addToRightComponentMatrixIdx = useMediaStore(
-    (state) => state.addToRightComponentMatrixIdx
+  const setRightComponentMatrixIdx = useMediaStore(
+    (state) => state.setRightComponentMatrixIdx
   );
 
   const resetComponentMatrixIndices = useMediaStore(
@@ -36,21 +36,17 @@ const MediaComponentManager = (props: StateManagerProps) => {
   }, [setAudioAnalyser]);
 
   const dispatchObject = useCallback(
-    (event: string) => {
+    (event: string, newRightSideComponentIdx) => {
       switch (event) {
         case "fstWord_down":
         case "sndWord_down":
         case "thirdWord_down":
-          return {
-            action: addToRightComponentMatrixIdx,
-            value: [1],
-          };
         case "fstWord_up":
         case "thirdWord_up":
         case "sndWord_up":
           return {
-            action: addToRightComponentMatrixIdx,
-            value: [-1],
+            action: setRightComponentMatrixIdx,
+            value: [newRightSideComponentIdx],
           };
         case "play_down":
         case "exit_up":
@@ -74,9 +70,9 @@ const MediaComponentManager = (props: StateManagerProps) => {
       }
     },
     [
-      addToRightComponentMatrixIdx,
       playMedia,
       resetComponentMatrixIndices,
+      setRightComponentMatrixIdx,
       toggleLeftComponent,
       toggleSide,
     ]
@@ -85,8 +81,13 @@ const MediaComponentManager = (props: StateManagerProps) => {
   useEffect(() => {
     if (props.eventState) {
       const eventAction = props.eventState.event;
+      const newRightSideComponentIdx =
+        props.eventState.newRightSideComponentIdx;
 
-      const dispatchedObject = dispatchObject(eventAction);
+      const dispatchedObject = dispatchObject(
+        eventAction,
+        newRightSideComponentIdx
+      );
 
       if (dispatchedObject) {
         dispatchedObject.action.apply(null, dispatchedObject.value);

src/core/StateManagers/MediaWordManager.tsx

@@ -3,44 +3,37 @@ import { StateManagerProps } from "./EventManager";
 import { useMediaWordStore } from "../../store";
 
 const MediaWordManager = (props: StateManagerProps) => {
-  const addToWordPositionDataStructIdx = useMediaWordStore(
-    (state) => state.addToWordPositionDataStructIdx
-  );
-  const resetWordPositionDataStructIdx = useMediaWordStore(
-    (state) => state.resetWordPositionDataStructIdx
-  );
+  const setPosStateIdx = useMediaWordStore((state) => state.setPosStateIdx);
+  const resetPosStateIdx = useMediaWordStore((state) => state.resetPosStateIdx);
 
   const dispatchObject = useCallback(
-    (event: string) => {
+    (event: string, newWordPosStateIdx: number) => {
       switch (event) {
         case "fstWord_down":
         case "sndWord_down":
         case "thirdWord_down":
-          return {
-            action: addToWordPositionDataStructIdx,
-            value: 1,
-          };
         case "fstWord_up":
         case "sndWord_up":
         case "thirdWord_up":
           return {
-            action: addToWordPositionDataStructIdx,
-            value: -1,
+            action: setPosStateIdx,
+            value: newWordPosStateIdx,
           };
         case "throw_node_media":
           return {
-            action: resetWordPositionDataStructIdx,
+            action: resetPosStateIdx,
           };
       }
     },
-    [addToWordPositionDataStructIdx, resetWordPositionDataStructIdx]
+    [resetPosStateIdx, setPosStateIdx]
   );
 
   useEffect(() => {
     if (props.eventState) {
       const eventAction = props.eventState.event;
+      const newWordPosStateIdx = props.eventState.newWordPosStateIdx;
 
-      const dispatchedObject = dispatchObject(eventAction);
+      const dispatchedObject = dispatchObject(eventAction, newWordPosStateIdx);
 
       if (dispatchedObject) {
         dispatchedObject.action(dispatchedObject.value as any);

src/core/StateManagers/SiteManager.tsx

@@ -3,8 +3,7 @@ import { useSiteStore } from "../../store";
 import { StateManagerProps } from "./EventManager";
 
 const SiteManager = (props: StateManagerProps) => {
-  const setSiteRotY = useSiteStore((state) => state.setSiteRotY);
-  const setSitePosY = useSiteStore((state) => state.setSitePosY);
+  const setTransformState = useSiteStore((state) => state.setTransformState);
 
   const dispatchObject = useCallback(
     (event: string, newSitePosY: number, newSiteRotY: number) => {
@@ -12,20 +11,20 @@ const SiteManager = (props: StateManagerProps) => {
         case "move_up":
         case "move_down":
           return {
-            action: setSitePosY,
-            value: newSitePosY,
+            action: setTransformState,
+            value: [newSitePosY, "posY"],
             actionDelay: 1300,
           };
         case "move_left":
         case "move_right":
           return {
-            action: setSiteRotY,
-            value: newSiteRotY,
+            action: setTransformState,
+            value: [newSiteRotY, "rotY"],
             actionDelay: 1100,
           };
       }
     },
-    [setSitePosY, setSiteRotY]
+    [setTransformState]
   );
 
   useEffect(() => {
@@ -39,9 +38,10 @@ const SiteManager = (props: StateManagerProps) => {
         newSitePosY,
         newSiteRotY
       );
+
       if (dispatchedObject) {
         setTimeout(() => {
-          dispatchedObject.action(dispatchedObject.value);
+          dispatchedObject.action.apply(null, dispatchedObject.value as any);
         }, dispatchedObject.actionDelay);
       }
     }

src/core/bootEventHandler.ts

@@ -1,6 +1,4 @@
-import { GameContext } from "./StateManagers/EventManager";
-
-const handleBootEvent = (gameContext: GameContext) => {
+const handleBootEvent = (gameContext: any) => {
   const keyPress = gameContext.keyPress;
 
   const activeBootElement = gameContext.activeBootElement;
@@ -14,9 +12,8 @@ const handleBootEvent = (gameContext: GameContext) => {
     case "back":
       return { event: `${currentSubscene}_${keyPress}` };
     case "select":
-      switch(currentSubscene){
+      switch (currentSubscene) {
         case "authorize_user":
-
       }
       return { event: `${activeBootElement}_${keyPress}` };
   }

src/core/computeAction.ts

@@ -1,23 +0,0 @@
-import { GameContext } from "./StateManagers/EventManager";
-import handleMainSceneEvent from "./mainSceneEventHandler";
-import handleMediaSceneEvent from "./mediaSceneEventHandler";
-import handleBootMainMenuEvent from "./bootEventHandler";
-import handleGateSceneEvent from "./gateSceneEventHandler";
-import handleSSknSceneEvent from "./ssknSceneEventHandler";
-
-const computeAction = (gameContext: GameContext) => {
-  switch (gameContext.scene) {
-    case "main":
-      return handleMainSceneEvent(gameContext);
-    case "media":
-      return handleMediaSceneEvent(gameContext);
-    case "boot":
-      return handleBootMainMenuEvent(gameContext);
-    case "gate":
-      return handleGateSceneEvent();
-    case "sskn":
-      return handleSSknSceneEvent(gameContext);
-  }
-};
-
-export default computeAction;

src/core/gateSceneEventHandler.ts

@@ -1,3 +0,0 @@
-const handleGateSceneEvent = () => ({ event: "exit_gate" });
-
-export default handleGateSceneEvent;

src/core/mainSceneEventHandler.ts

@@ -1,4 +1,3 @@
-import { GameContext } from "./StateManagers/EventManager";
 import node_matrices from "../resources/node_matrices.json";
 import site_a from "../resources/site_a.json";
 
@@ -17,7 +16,7 @@ const hudAssocs = {
   "23": "fg_hud_6",
 };
 
-const handleMainSceneEvent = (gameContext: GameContext) => {
+const handleMainSceneEvent = (gameContext: any) => {
   let event;
 
   const keyPress = gameContext.keyPress;
@@ -33,7 +32,6 @@ const handleMainSceneEvent = (gameContext: GameContext) => {
   let newSitePosY = gameContext.sitePosY;
   let newScene = gameContext.scene;
 
-
   switch (keyPress) {
     case "left":
       newNodeColIdx = nodeColIdx - 1;

src/core/mediaSceneEventHandler.ts

@@ -1,9 +1,39 @@
-import { GameContext } from "./StateManagers/EventManager";
-
-const handleMediaSceneEvent = (gameContext: GameContext) => {
+const handleMediaSceneEvent = (gameContext: any) => {
   const keyPress = gameContext.keyPress;
   const activeMediaComponent = gameContext.activeMediaComponent;
-  return { event: `${activeMediaComponent}_${keyPress}` };
+  let newWordPosStateIdx = gameContext.wordPosStateIdx;
+  let newRightSideComponentIdx = gameContext.rightSideComponentIdx;
+
+  const rightSideComponents = ["fstWord", "sndWord", "thirdWord"];
+  if (rightSideComponents.includes(activeMediaComponent)) {
+    switch (keyPress) {
+      case "down":
+        newWordPosStateIdx++;
+        if (newWordPosStateIdx > 6) {
+          newWordPosStateIdx = 1;
+        }
+        newRightSideComponentIdx++;
+        if (newRightSideComponentIdx > 2) {
+          newRightSideComponentIdx = 0;
+        }
+        break;
+      case "up":
+        newWordPosStateIdx--;
+        if (newWordPosStateIdx < 1) {
+          newWordPosStateIdx = 6;
+        }
+        newRightSideComponentIdx--;
+        if (newRightSideComponentIdx < 0) {
+          newRightSideComponentIdx = 2;
+        }
+        break;
+    }
+  }
+  return {
+    event: `${activeMediaComponent}_${keyPress}`,
+    newWordPosStateIdx: newWordPosStateIdx,
+    newRightSideComponentIdx: newRightSideComponentIdx,
+  };
 };
 
 export default handleMediaSceneEvent;

src/core/ssknSceneEventHandler.ts

@@ -1,6 +1,4 @@
-import { GameContext } from "./StateManagers/EventManager";
-
-const handleSSknSceneEvent = (gameContext: GameContext) => {
+const handleSSknSceneEvent = (gameContext: any) => {
   const keyPress = gameContext.keyPress;
   const activeSSknComponent = gameContext.activeSSknComponent;
   return { event: `${activeSSknComponent}_${keyPress}` };

src/resources/word_position_states.json

@@ -0,0 +1,110 @@
+{
+  "1": {
+    "cross": {
+      "posX": -2,
+      "posY": 2
+    },
+    "fstWord": {
+      "posX": 0,
+      "posY": 0
+    },
+    "sndWord": {
+      "posX": 3,
+      "posY": -3
+    },
+    "thirdWord": {
+      "posX": 3.7,
+      "posY": -4.3
+    }
+  },
+  "2": {
+    "cross": {
+      "posX": -0.5,
+      "posY": 0.5
+    },
+    "fstWord": {
+      "posX": 1.8,
+      "posY": -2.5
+    },
+    "sndWord": {
+      "posX": 1.5,
+      "posY": -1.5
+    },
+    "thirdWord": {
+      "posX": 3.3,
+      "posY": -3.7
+    }
+  },
+  "3": {
+    "cross": {
+      "posX": 1,
+      "posY": -1
+    },
+    "fstWord": {
+      "posX": 3.7,
+      "posY": -4.3
+    },
+    "sndWord": {
+      "posX": 0,
+      "posY": 0
+    },
+    "thirdWord": {
+      "posX": 3,
+      "posY": -3
+    }
+  },
+  "4": {
+    "cross": {
+      "posX": 1.3,
+      "posY": -1.7
+    },
+    "fstWord": {
+      "posX": 3.3,
+      "posY": -3.7
+    },
+    "sndWord": {
+      "posX": 1.8,
+      "posY": -2.5
+    },
+    "thirdWord": {
+      "posX": 1.5,
+      "posY": -1.5
+    }
+  },
+  "5": {
+    "cross": {
+      "posX": 1.7,
+      "posY": -2.3
+    },
+    "fstWord": {
+      "posX": 3,
+      "posY": -3
+    },
+    "sndWord": {
+      "posX": 3.7,
+      "posY": -4.3
+    },
+    "thirdWord": {
+      "posX": 0,
+      "posY": 0
+    }
+  },
+  "6": {
+    "cross": {
+      "posX": -0.4,
+      "posY": -0.5
+    },
+    "fstWord": {
+      "posX": 1.5,
+      "posY": -1.5
+    },
+    "sndWord": {
+      "posX": 3.3,
+      "posY": -3.7
+    },
+    "thirdWord": {
+      "posX": 1.8,
+      "posY": -2.5
+    }
+  }
+}

src/scenes/MediaScene.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 import { useMediaStore } from "../store";
-import TextRenderer from "../components/TextRenderer/GreenTextRenderer";
+import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
 import LeftSide from "../components/MediaScene/Selectables/LeftSide";
 import RightSide from "../components/MediaScene/Selectables/RightSide";
 import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
@@ -9,6 +9,7 @@ import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
 import Lof from "../components/MediaScene/Lof";
 import { OrbitControls } from "@react-three/drei";
 import Images from "../components/MediaScene/Images";
+import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
 
 const MediaScene = () => {
   const mediaComponentMatrixIndices = useMediaStore(
@@ -45,7 +46,8 @@ const MediaScene = () => {
           <NodeNameContainer />
         </group>
         <group position={[0, 0, 0]}>
-          <TextRenderer />
+          <GreenTextRenderer />
+          <YellowTextRenderer />
         </group>
         <Lof />
         <Images />

src/store.ts

@@ -51,10 +51,10 @@ type YellowOrbState = {
 };
 
 type SiteState = {
-  siteRotY: number;
-  sitePosY: number;
-  setSiteRotY: (to: number) => void;
-  setSitePosY: (to: number) => void;
+  transformState: {
+    posY: number;
+    rotY: number;
+  };
 };
 
 type LevelState = {
@@ -75,17 +75,11 @@ type MiddleRingState = {
 };
 
 type MediaWordState = {
-  wordPositionDataStruct: {
-    cross: { posX: number; posY: number };
-    fstWord: { posX: number; posY: number };
-    sndWord: { posX: number; posY: number };
-    thirdWord: { posX: number; posY: number };
-  }[];
-  wordPositionDataStructIdx: number;
+  posStateIdx: number;
   words: string[];
   setWords: (to: string[]) => void;
-  addToWordPositionDataStructIdx: (val: number) => void;
-  resetWordPositionDataStructIdx: () => void;
+  setPosStateIdx: (to: number) => void;
+  resetPosStateIdx: () => void;
 };
 
 export type YellowTextState = {
@@ -108,17 +102,6 @@ export type GreenTextState = {
   active: number;
 };
 
-export type TextRendererState = {
-  greenTextPosY: number;
-  greenTextPosX: { initial: number; final: number };
-  greenText: string;
-  greenTextActive: number;
-  setGreenTextPosY: (to: number) => void;
-  setGreenTextPosX: (to: { initial: number; final: number }) => void;
-  setGreenText: (to: string) => void;
-  toggleGreenText: () => void;
-};
-
 type GateState = {
   gateLvl: number;
   incrementGateLvl: () => void;
@@ -247,12 +230,22 @@ export const useYellowOrbStore = create<YellowOrbState>((set) => ({
   setYellowOrbVisible: (to) => set(() => ({ yellowOrbVisible: to })),
 }));
 
-export const useSiteStore = create<SiteState>((set) => ({
-  sitePosY: 0,
-  siteRotY: 0,
-  setSitePosY: (to) => set(() => ({ sitePosY: to })),
-  setSiteRotY: (to) => set(() => ({ siteRotY: to })),
-}));
+export const useSiteStore = create(
+  combine(
+    {
+      transformState: {
+        posY: 0,
+        rotY: 0,
+      },
+    } as SiteState,
+    (set) => ({
+      setTransformState: (to: number, at: string) =>
+        set((state) => ({
+          transformState: { ...state.transformState, [at]: to },
+        })),
+    })
+  )
+);
 
 export const useMiddleRingStore = create(
   combine(
@@ -316,24 +309,13 @@ export const useMediaStore = create(
             leftSideIdx: Number(!state.componentMatrixIndices.leftSideIdx),
           },
         })),
-      addToRightComponentMatrixIdx: (val: number) =>
-        set((state) => {
-          let finalVal;
-          const newSum = state.componentMatrixIndices["rightSideIdx"] + val;
-          if (newSum > 2) {
-            finalVal = 0;
-          } else if (newSum < 0) {
-            finalVal = 2;
-          } else {
-            finalVal = newSum;
-          }
-          return {
-            componentMatrixIndices: {
-              ...state.componentMatrixIndices,
-              rightSideIdx: finalVal,
-            },
-          };
-        }),
+      setRightComponentMatrixIdx: (to: number) =>
+        set((state) => ({
+          componentMatrixIndices: {
+            ...state.componentMatrixIndices,
+            rightSideIdx: to,
+          },
+        })),
       resetComponentMatrixIndices: () =>
         set(() => ({
           componentMatrixIndices: {
@@ -352,74 +334,10 @@ export const useMediaStore = create(
 
 export const useMediaWordStore = create<MediaWordState>((set) => ({
   words: ["eye", "quiet", "hallucination"],
-  wordPositionDataStruct: [
-    {
-      cross: {
-        posX: -2,
-        posY: 2,
-      },
-      fstWord: { posX: 0, posY: 0 },
-      sndWord: { posX: 3, posY: -3 },
-      thirdWord: { posX: 3.7, posY: -4.3 },
-    },
-    {
-      cross: {
-        posX: -0.5,
-        posY: 0.5,
-      },
-      fstWord: { posX: 1.8, posY: -2.5 },
-      sndWord: { posX: 1.5, posY: -1.5 },
-      thirdWord: { posX: 3.3, posY: -3.7 },
-    },
-    {
-      cross: {
-        posX: 1,
-        posY: -1,
-      },
-      fstWord: { posX: 3.7, posY: -4.3 },
-      sndWord: { posX: 0, posY: 0 },
-      thirdWord: { posX: 3, posY: -3 },
-    },
-    {
-      cross: {
-        posX: 1.3,
-        posY: -1.7,
-      },
-      fstWord: { posX: 3.3, posY: -3.7 },
-      sndWord: { posX: 1.8, posY: -2.5 },
-      thirdWord: { posX: 1.5, posY: -1.5 },
-    },
-    {
-      cross: {
-        posX: 1.7,
-        posY: -2.3,
-      },
-      fstWord: { posX: 3, posY: -3 },
-      sndWord: { posX: 3.7, posY: -4.3 },
-      thirdWord: { posX: 0, posY: 0 },
-    },
-    {
-      cross: {
-        posX: -0.4,
-        posY: -0.5,
-      },
-      fstWord: { posX: 1.5, posY: -1.5 },
-      sndWord: { posX: 3.3, posY: -3.7 },
-      thirdWord: { posX: 1.8, posY: -2.5 },
-    },
-  ],
-  wordPositionDataStructIdx: 0,
-  addToWordPositionDataStructIdx: (val) =>
-    set((state) => ({
-      wordPositionDataStructIdx:
-        state.wordPositionDataStructIdx > 4 ||
-        state.wordPositionDataStructIdx < -4
-          ? 0
-          : state.wordPositionDataStructIdx + val,
-    })),
+  posStateIdx: 1,
+  setPosStateIdx: (to) => set(() => ({ posStateIdx: to })),
   setWords: (to) => set(() => ({ words: to })),
-  resetWordPositionDataStructIdx: () =>
-    set(() => ({ wordPositionDataStructIdx: 0 })),
+  resetPosStateIdx: () => set(() => ({ posStateIdx: 0 })),
 }));
 
 export const useSSknStore = create<SSknState>((set) => ({