refactoring the store

src/components/MainScene/SyncedComponents/HUD.tsx

@@ -67,7 +67,6 @@ const HUD = () => {
     ]
   );
 
-  console.log('called')
   const longHudTex = useLoader(THREE.TextureLoader, longHud);
   const longHudMirroredTex = useLoader(THREE.TextureLoader, longHudMirrored);
 

src/components/TextRenderer/BigLetter.tsx

@@ -1,6 +1,5 @@
 import orangeFont from "../../static/sprite/orange_font_texture.png";
 import yellowFont from "../../static/sprite/yellow_font_texture.png";
-import whiteFont from "../../static/sprite/white_and_green_texture.png";
 import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 import orange_font_json from "../../resources/font_data/big_font.json";
@@ -12,62 +11,55 @@ const BigLetter = memo(
     color: string;
     letter: string;
     letterIdx: number;
-    xOffsetCoeff: number;
+    xOffset: number;
   }) => {
-    const colorToTexture = (color: string) => {
+    const tex = useMemo(
-      const colorTexture = {
+      () =>
-        orange: orangeFont,
+        props.color === "orange" || props.letterIdx === 0
-        yellow: yellowFont,
+          ? orangeFont
-        white: whiteFont,
+          : yellowFont,
-      };
+      [props.color, props.letterIdx]
-      return colorTexture[color as keyof typeof colorTexture];
+    );
-    };
 
-    // 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(() => {
-
-    // i have yet to figure out a genrealizable way of
-    // calculating the y offset, this shit will do for now
-    // also, we dont have all the lines since i dont need them yet.
-    // also, baseline offsets dont work properly since i dont need them yet either
-    // should be trivial to calculate though, im just lazy
-    const getLineNum = (letter: string) => {
       const lineOne = "ABCDEFGHIJKLMNOPQ";
       const lineTwo = "RSTUVWXYZ01234567";
       const lineThree = "89abcdefghijklmnopqrs";
 
-      if (letter === " ") return 5;
+      let lineNum: number;
-
+      if (props.letter === " ") {
-      if (lineOne.includes(letter)) {
+        lineNum = 5;
-        return 1;
-      } else if (lineTwo.includes(letter)) {
-        return 2;
-      } else if (lineThree.includes(letter)) {
-        return 3;
       } else {
-        return 4;
+        if (lineOne.includes(props.letter)) {
+          lineNum = 1;
+        } else if (lineTwo.includes(props.letter)) {
+          lineNum = 2;
+        } else if (lineThree.includes(props.letter)) {
+          lineNum = 3;
+        } else {
+          lineNum = 4;
+        }
       }
-    };
 
-    const lineYOffsets = useMemo(
+      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]);
 
-    const letterData =
+    const letterData = useMemo(
+      () =>
         orange_font_json.glyphs[
           props.letter as keyof typeof orange_font_json.glyphs
-      ];
+        ],
+      [props.letter]
+    );
 
     const geom = useMemo(() => {
       const geometry = new THREE.PlaneBufferGeometry();
@@ -80,25 +72,21 @@ const BigLetter = memo(
 
         u = (u * letterData[2]) / 256 + letterData[0] / 256;
 
-        v =
+        v = (v * letterData[3]) / 136 + lineYOffset - letterData[4] / 136;
-          (v * letterData[3]) / 136 +
-          lineYOffsets[getLineNum(props.letter)] -
-          letterData[4] / 136;
 
         uvAttribute.setXY(i, u, v);
       }
       return geometry;
-    }, [letterData, lineYOffsets, props.letter]);
+    }, [letterData, lineYOffset]);
 
-    const textRendererState = useSpring({
+    const letterState = useSpring({
-      letterOffsetXCoeff:
+      xOffset: props.letterIdx + 0.3 + (props.letterIdx + 0.3) * props.xOffset,
-        props.letterIdx + 0.3 + (props.letterIdx + 0.3) * props.xOffsetCoeff,
       config: { duration: 200 },
     });
 
     return (
       <a.mesh
-        position-x={textRendererState.letterOffsetXCoeff}
+        position-x={letterState.xOffset}
         position-y={-letterData[4] / 12.5}
         scale={[1, 1, 0]}
         geometry={geom}

src/components/TextRenderer/MediaYellowTextAnimator.tsx

@@ -25,7 +25,7 @@ const MediaYellowTextAnimator = () => {
         >
           <BigLetter
             color={"yellow"}
-            xOffsetCoeff={transformState.xOffset}
+            xOffset={transformState.xOffset}
             letter={textArr[idx]}
             letterIdx={idx}
             key={idx}

src/components/TextRenderer/MediumLetter.tsx

@@ -7,45 +7,44 @@ import React, { useMemo, memo } from "react";
 
 const MediumLetter = memo((props: { letter: string; letterIdx: number }) => {
   const colorTexture = useLoader(THREE.TextureLoader, greenFont);
-  // i have yet to figure out a genrealizable way of
+
-  // calculating the y offset, this shit will do for now
+  const lineYOffset = useMemo(() => {
-  // also, we dont have all the lines since i dont need them yet.
-  // also, baseline offsets dont work properly since i dont need them yet either
-  // should be trivial to calculate though, im just lazy
-  const getLineNum = (letter: string) => {
     const lineOne = "ABCDEFGHIJKLMNOPQQRSTUVW";
     const lineTwo = "XYZ0123456789abcdefghij";
     const lineThree = "klmnopqrstuvwxyz,.*";
 
-    if (letter === " ") return 5;
+    let lineNum: number;
-
+    if (props.letter === " ") {
-    if (lineOne.includes(letter)) {
+      lineNum = 5;
-      return 1;
-    } else if (lineTwo.includes(letter)) {
-      return 2;
-    } else if (lineThree.includes(letter)) {
-      return 3;
     } else {
-      return 4;
+      if (lineOne.includes(props.letter)) {
+        lineNum = 1;
+      } else if (lineTwo.includes(props.letter)) {
+        lineNum = 2;
+      } else if (lineThree.includes(props.letter)) {
+        lineNum = 3;
+      } else {
+        lineNum = 4;
+      }
     }
-  };
 
-  // 5th one is just a space, this is my hacky way of doing it.
+    const offsets = {
-  const lineYOffsets = useMemo(
-    () => ({
       1: 0.355,
       2: 0.297,
       3: 0.238,
       4: 0.18,
       5: 1,
-    }),
+    };
-    []
+    return offsets[lineNum as keyof typeof offsets];
-  );
+  }, [props.letter]);
 
-  const letterData =
+  const letterData = useMemo(
+    () =>
       medium_font_json.glyphs[
         props.letter as keyof typeof medium_font_json.glyphs
-    ];
+      ],
+    [props.letter]
+  );
 
   const geom = useMemo(() => {
     const geometry = new THREE.PlaneBufferGeometry();
@@ -58,16 +57,13 @@ const MediumLetter = memo((props: { letter: string; letterIdx: number }) => {
 
       u = (u * letterData[2]) / 256 + letterData[0] / 256;
 
-      v =
+      v = (v * letterData[3]) / 136 + lineYOffset - letterData[4] / 136;
-        (v * letterData[3]) / 136 +
-        lineYOffsets[getLineNum(props.letter)] -
-        letterData[4] / 136;
 
       uvAttribute.setXY(i, u, v);
     }
 
     return geometry;
-  }, [letterData, lineYOffsets, props.letter]);
+  }, [letterData, lineYOffset]);
 
   return (
     <a.mesh

src/components/TextRenderer/YellowTextRenderer.tsx

@@ -1,66 +1,42 @@
 import React, { useEffect, useRef } from "react";
-import { BigTextState, useBigTextStore } from "../../store";
+import { useMainSceneStore } from "../../store";
-import { a, useSpring, useTrail } from "@react-spring/three";
+import { a, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 
 const YellowTextRenderer = (props: { visible?: boolean }) => {
-  const disableTrail = useBigTextStore((state) => state.disableTrail);
+  const xOffset = useMainSceneStore((state) => state.bigTextXOffset);
-  const transformState = useBigTextStore((state) => state.transformState);
+  const visible = useMainSceneStore((state) => state.bigTextVisible);
+  const color = useMainSceneStore((state) => state.bigTextColor);
 
-  const visible = useBigTextStore((state) => state.visible);
+  const textRef = useRef(useMainSceneStore.getState().bigText.split(""));
-  const color = useBigTextStore((state) => state.color);
 
-  const textArrRef = useRef(useBigTextStore.getState().text.split(""));
+  const [trail, set] = useTrail(textRef.current.length, () => ({
-
+    posX: 0,
-  const transformRef = useRef(useBigTextStore.getState().transformState);
+    posY: 0,
-
-  // this is used to animate the letters moving one after another
-  const trail = useTrail(textArrRef.current.length, {
-    posX: transformRef.current.posX,
-    posY: transformRef.current.posY,
     config: { duration: 280 },
-  });
+  }));
-
-  // 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(
+      useMainSceneStore.subscribe(
         (state) => {
-          transformRef.current = (state as BigTextState).transformState;
+          textRef.current = (state as any).bigText.split("");
-          textArrRef.current = (state as BigTextState).text.split("");
         },
         (state) => state
       ),
     []
   );
 
+  useEffect(() => {
+    useMainSceneStore.subscribe(set, (state) => ({
+      posX: state.bigTextPos[0],
+      posY: state.bigTextPos[1],
+    }));
+  }, [set]);
+
   return (
     <group position={[0, 0, 10]} visible={props.visible && visible}>
-      {disableTrail
+      {trail.map(({ posX, posY }, idx) => (
-        ? 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}
@@ -70,8 +46,8 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
         >
           <BigLetter
             color={color}
-                xOffsetCoeff={transformRef.current.xOffset}
+            xOffset={xOffset}
-                letter={textArrRef.current[idx]}
+            letter={textRef.current[idx]}
             letterIdx={idx}
             key={idx}
           />

src/core/StateManagers/EventManager.tsx

@@ -20,7 +20,7 @@ import {
 } from "../../store";
 import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
 import SceneManager from "./GameManagers/SceneManager";
-import YellowTextManager from "./MainSceneManagers/YellowTextManager";
+import BigTextManager from "./MainSceneManagers/BigTextManager";
 import LevelManager from "./MainSceneManagers/LevelManager";
 import BootComponentManager from "./BootSceneManagers/BootComponentManager";
 import SSknComponentManager from "./SSknSceneManagers/SSknComponentManager";
@@ -283,7 +283,7 @@ const EventManager = () => {
       <MiddleRingManager eventState={eventState!} />
       <MediaComponentManager eventState={eventState!} />
       <SceneManager eventState={eventState!} />
-      <YellowTextManager eventState={eventState!} />
+      <BigTextManager eventState={eventState!} />
       <LevelManager eventState={eventState!} />
       <BootComponentManager eventState={eventState!} />
       <SSknComponentManager eventState={eventState!} />

src/core/StateManagers/GameManagers/GameLoader.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useEffect } from "react";
 import {
-  useBigTextStore,
-  useGreenTextStore,
   useHudStore,
   useLevelStore,
+  useMainSceneStore,
   useNodeStore,
   useSiteSaveStore,
   useSiteStore,
@@ -25,17 +24,9 @@ const GameLoader = (props: StateManagerProps) => {
   // level setter
   const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
 
-  // yellow text setter
+  // big text setter
-  const setYellowTextTransformState = useBigTextStore(
+  const setBigTexPos = useMainSceneStore((state) => state.setBigTextPos);
-    (state) => state.setTransformState
+  const setBigText = useMainSceneStore((state) => state.setBigText);
-  );
-  const setYellowText = useBigTextStore((state) => state.setText);
-
-  // green text setter
-  const setGreenText = useGreenTextStore((state) => state.setText);
-  const setGreenTextTransformState = useGreenTextStore(
-    (state) => state.setTransformState
-  );
 
   // site setter
   const setSiteTransformState = useSiteStore(
@@ -69,39 +60,15 @@ const GameLoader = (props: StateManagerProps) => {
       setActiveLevel(siteToLoad.level);
 
       // load new site yellow text
-      setYellowTextTransformState(
+      setBigTexPos(
-        node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].big_text[0],
+        node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].big_text[0]
-        "posX"
-      );
-      setYellowTextTransformState(
-        node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].big_text[1],
-        "posY"
       );
 
       const targetYellowText = (siteData as SiteType)[siteToLoad.level][
         siteToLoad.activeNodeId
       ].node_name;
 
-      setYellowText(targetYellowText);
+      setBigText(targetYellowText);
-
-      // load new site green text
-
-      const targetGreenText = (siteData as SiteType)[siteToLoad.level][
-        siteToLoad.activeNodeId
-      ].title;
-
-      const targetGreenTextPosData =
-        node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].medium_text;
-
-      setGreenTextTransformState(
-        {
-          initial: targetGreenTextPosData.initial_position[0],
-          final: targetGreenTextPosData.position[0],
-        },
-        "posX"
-      );
-      setGreenTextTransformState(targetGreenTextPosData.position[1], "posY");
-      setGreenText(targetGreenText);
 
       // load new site node
       setActiveNodeState(siteToLoad.activeNodeId, "id");
@@ -113,14 +80,12 @@ const GameLoader = (props: StateManagerProps) => {
     [
       setActiveLevel,
       setActiveNodeState,
+      setBigTexPos,
+      setBigText,
       setCurrentSite,
-      setGreenText,
-      setGreenTextTransformState,
       setHudId,
       setNodeMatrixIndices,
       setSiteTransformState,
-      setYellowText,
-      setYellowTextTransformState,
       siteASaveState,
       siteBSaveState,
     ]

src/core/StateManagers/MainSceneEventManager.tsx

@@ -15,7 +15,7 @@ import SiteManager from "./MainSceneManagers/SiteManager";
 import LainManager from "./MainSceneManagers/LainManager";
 import MiddleRingManager from "./MainSceneManagers/MiddleRingManager";
 import SceneManager from "./GameManagers/SceneManager";
-import YellowTextManager from "./MainSceneManagers/YellowTextManager";
+import BigTextManager from "./MainSceneManagers/BigTextManager";
 import LevelManager from "./MainSceneManagers/LevelManager";
 import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager";
 import SubsceneManager from "./GameManagers/SubsceneManager";
@@ -148,7 +148,7 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
       <LainManager eventState={eventState!} />
       <MiddleRingManager eventState={eventState!} />
       <SceneManager eventState={eventState!} />
-      <YellowTextManager eventState={eventState!} />
+      <BigTextManager eventState={eventState!} />
       <LevelManager eventState={eventState!} />
       <LevelSelectionManager eventState={eventState!} />
       <SubsceneManager eventState={eventState!} />

src/core/StateManagers/MainSceneManagers/BigTextManager.tsx

@@ -1,29 +1,21 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 import node_huds from "../../../resources/node_huds.json";
 import site_a from "../../../resources/site_a.json";
 import site_b from "../../../resources/site_b.json";
-import { useBigTextStore, useSiteStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 import { SiteType } from "../../../components/MainScene/SyncedComponents/Site";
 import { StateManagerProps } from "../EventManager";
 
-const YellowTextManager = (props: StateManagerProps) => {
+const BigTextManager = (props: StateManagerProps) => {
-  const setTransformState = useBigTextStore((state) => state.setTransformState);
+  const setText = useMainSceneStore((state) => state.setBigText);
-  const addToTransformState = useBigTextStore(
+  const setColor = useMainSceneStore((state) => state.setBigTextColor);
-    (state) => state.addToTransformState
+  const setVisible = useMainSceneStore((state) => state.setBigTextVisible);
+  const setXOffset = useMainSceneStore((state) => state.setBigTextXOffset);
+  const setPos = useMainSceneStore((state) => state.setBigTextPos);
+
+  const siteData = useMainSceneStore(
+    useCallback((state) => (state.activeSite === "a" ? site_a : site_b), [])
   );
-  const setText = useBigTextStore((state) => state.setText);
-
-  const setDisableTrail = useBigTextStore((state) => state.setDisableTrail);
-
-  const setColor = useBigTextStore((state) => state.setColor);
-
-  const setVisible = useBigTextStore((state) => state.setVisible);
-
-  const currentSite = useSiteStore((state) => state.currentSite);
-
-  const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
-    currentSite,
-  ]);
 
   const animateYellowTextWithMove = useCallback(
     (
@@ -34,30 +26,21 @@ const YellowTextManager = (props: StateManagerProps) => {
       newLevel: string,
       delay: number
     ) => {
-      setDisableTrail(true);
-
       // animate the letters to match that of site's
       // to create an illusion of not moving
-      setTimeout(() => {
+      // setTimeout(() => {
-        addToTransformState(posXOffset, "posX");
+      //   addToTransformState(posXOffset, "posX");
-        addToTransformState(posYOffset, "posY");
+      //   addToTransformState(posYOffset, "posY");
-      }, delay);
+      // }, delay);
 
       setTimeout(() => {
         // make current hud big text shrink
-        setTransformState(-1, "xOffset");
+        setXOffset(-1, "xOffset");
       }, 2500);
 
       setTimeout(() => {
         // animate it to new pos x/y
-        setTransformState(
+        setPos(node_huds[newActiveHudId as keyof typeof node_huds].big_text);
-          node_huds[newActiveHudId as keyof typeof node_huds].big_text[0],
-          "posX"
-        );
-        setTransformState(
-          node_huds[newActiveHudId as keyof typeof node_huds].big_text[1],
-          "posY"
-        );
         // set new text according to the node name
         const targetText =
           newActiveNodeId === "UNKNOWN"
@@ -65,32 +48,24 @@ const YellowTextManager = (props: StateManagerProps) => {
             : (siteData as SiteType)[newLevel][newActiveNodeId].node_name;
 
         setText(targetText);
-        setDisableTrail(false);
       }, 3000);
 
       // unshrink text
       setTimeout(() => {
-        setTransformState(0, "xOffset");
+        setXOffset(0);
       }, 3900);
     },
-    [addToTransformState, setDisableTrail, setText, setTransformState, siteData]
+    [setPos, setText, setXOffset, siteData]
   );
 
   const animateYellowTextWithoutMove = useCallback(
     (newActiveHudId: string, newActiveNodeId: string, level: string) => {
       // make current hud big text shrink
-      setTransformState(-1, "xOffset");
+      setXOffset(-1);
 
       setTimeout(() => {
         // animate it to new pos x/y
-        setTransformState(
+        setPos(node_huds[newActiveHudId as keyof typeof node_huds].big_text);
-          node_huds[newActiveHudId as keyof typeof node_huds].big_text[0],
-          "posX"
-        );
-        setTransformState(
-          node_huds[newActiveHudId as keyof typeof node_huds].big_text[1],
-          "posY"
-        );
       }, 400);
 
       setTimeout(() => {
@@ -100,19 +75,17 @@ const YellowTextManager = (props: StateManagerProps) => {
 
       setTimeout(() => {
         // unshrink text
-        setTransformState(0, "xOffset");
+        setXOffset(0);
       }, 1200);
-
     },
-    [setText, setTransformState, siteData]
+    [setPos, setText, setXOffset, siteData]
   );
 
   const initializeLevelSelection = useCallback(() => {
-    setTransformState(-1, "xOffset");
+    setXOffset(-1);
 
     setTimeout(() => {
-      setTransformState(-0.02, "posX");
+      setPos([-0.02, 0.005, -8.7]);
-      setTransformState(0.005, "posY");
     }, 400);
 
     setTimeout(() => {
@@ -121,23 +94,16 @@ const YellowTextManager = (props: StateManagerProps) => {
     }, 1000);
 
     setTimeout(() => {
-      setTransformState(0, "xOffset");
+      setXOffset(0);
     }, 1200);
-  }, [setColor, setText, setTransformState]);
+  }, [setColor, setPos, setText, setXOffset]);
 
   const levelSelectionBack = useCallback(
     (activeNodeId: string, activeHudId: string, level: string) => {
-      setTransformState(-1, "xOffset");
+      setXOffset(-1);
 
       setTimeout(() => {
-        setTransformState(
+        setPos(node_huds[activeHudId as keyof typeof node_huds].big_text);
-          node_huds[activeHudId as keyof typeof node_huds].big_text[0],
-          "posX"
-        );
-        setTransformState(
-          node_huds[activeHudId as keyof typeof node_huds].big_text[1],
-          "posY"
-        );
       }, 400);
 
       setTimeout(() => {
@@ -146,10 +112,10 @@ const YellowTextManager = (props: StateManagerProps) => {
       }, 1000);
 
       setTimeout(() => {
-        setTransformState(0, "xOffset");
+        setXOffset(0);
       }, 1200);
     },
-    [setColor, setText, setTransformState, siteData]
+    [setColor, setPos, setText, setXOffset, siteData]
   );
 
   const toggleVisibleAfterLevelSelect = useCallback(
@@ -157,14 +123,7 @@ const YellowTextManager = (props: StateManagerProps) => {
       setVisible(false);
 
       setTimeout(() => {
-        setTransformState(
+        setPos(node_huds[activeHudId as keyof typeof node_huds].big_text[0]);
-          node_huds[activeHudId as keyof typeof node_huds].big_text[0],
-          "posX"
-        );
-        setTransformState(
-          node_huds[activeHudId as keyof typeof node_huds].big_text[1],
-          "posY"
-        );
         setColor("yellow");
         const targetText =
           activeNodeId === "UNKNOWN"
@@ -178,7 +137,7 @@ const YellowTextManager = (props: StateManagerProps) => {
         setVisible(true);
       }, 3900);
     },
-    [setColor, setText, setTransformState, setVisible, siteData]
+    [setColor, setPos, setText, setVisible, siteData]
   );
 
   const dispatchObject = useCallback(
@@ -298,4 +257,4 @@ const YellowTextManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default YellowTextManager;
+export default BigTextManager;

src/store.ts

@@ -1,6 +1,8 @@
 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";
 
@@ -239,66 +241,6 @@ export const useMediaBigTextStore = create(
   )
 );
 
-export const useBigTextStore = create(
-  combine(
-    {
-      visible: true,
-      color: "yellow",
-      disableTrail: false,
-      text: "Tda028",
-      transformState: {
-        posX: -0.35,
-        posY: 0.23,
-        xOffset: 0,
-      },
-    } as BigTextState,
-    (set) => ({
-      setDisableTrail: (to: boolean) => set(() => ({ disableTrail: to })),
-      setText: (to: string) => set(() => ({ text: to })),
-      setTransformState: (to: number, at: string) =>
-        set((state) => ({
-          transformState: { ...state.transformState, [at]: to },
-        })),
-      addToTransformState: (val: number, at: string) =>
-        set((state) => ({
-          transformState: {
-            ...state.transformState,
-            [at]:
-              state.transformState[at as keyof typeof state.transformState] +
-              val,
-          },
-        })),
-      setColor: (to: string) => set(() => ({ color: to })),
-      setVisible: (to: boolean) => set(() => ({ visible: to })),
-    })
-  )
-);
-
-export const useGreenTextStore = create(
-  combine(
-    {
-      text: "TOUKO's DIARY",
-      transformState: {
-        posX: { initial: 1.18, final: 0.18 },
-        posY: 0.16,
-        xOffset: 0,
-      },
-      active: 1,
-    } as GreenTextState,
-    (set) => ({
-      setText: (to: string) => set(() => ({ text: to })),
-      setTransformState: (
-        to: number | { initial: number; final: number },
-        at: string
-      ) =>
-        set((state) => ({
-          transformState: { ...state.transformState, [at]: to },
-        })),
-      toggleActive: () => set((state) => ({ active: Number(!state.active) })),
-    })
-  )
-);
-
 export const useHudStore = create<HUDState>((set) => ({
   id: "fg_hud_1",
   active: 1,
@@ -506,12 +448,162 @@ export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
     set(() => ({ activeLetterTextureOffset: to })),
 }));
 
-export const useMainSceneStore = create<MainSceneState>((set) => ({
+export const useMainSceneStore = create(
-  intro: true,
+  combine(
+    {
+      // game progress
+      gameProgress: game_progress,
+
+      // subscene
       subscene: "site",
-  setSubscene: (to) => set(() => ({ subscene: to })),
+
-  setIntro: (to) => set(() => ({ intro: to })),
+      // whether or not to play the intro anim
-}));
+      intro: true,
+
+      // big text (the one that displays node names)
+      bigText: "Tda028",
+      bigTextVisible: true,
+      bigTextColor: "yellow",
+      bigTextPos: [-0.35, 0.23, 0],
+      bigTextXOffset: 0,
+
+      // hud
+      hudId: "fg_hud_1",
+      hudActive: 1,
+
+      // nodes
+      activeNodeId: "0422",
+      activeNodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
+      activeNodePos: [0, 0, 0],
+      activeNodeRot: [0, 0, 0],
+      activeNodeState: {
+        interactedWith: false,
+        exploding: false,
+        shrinking: false,
+        visible: true,
+      },
+
+      // lain
+      lainMoveState: "standing",
+
+      // starfield
+      mainStarfieldVisible: true,
+      introStarfieldVisible: false,
+      mainStarBoostVal: 0.2,
+
+      // site
+      activeSite: "a",
+      siteRot: [0, 0, 0],
+      sitePos: [0, 0, 0],
+
+      // middle ring
+      middleRingPos: [0, -0.11, 0],
+      middleRingRot: [0, 0, 0],
+      middleRingWobbleAmp: 0,
+      middleRingNoiseAmp: 0,
+      middleRingPartSeparatorVal: 1,
+      middleRingAnimDuration: 600,
+      middleRingRotating: true,
+      fakeMiddleRingVisible: false,
+
+      // level
+      activeLevel: "04",
+
+      // level selection
+      selectedLevel: 4,
+      levelSelectionToggled: 0,
+
+      // pause
+      pauseComponentMatrix: ["load", "about", "change", "save", "exit"],
+      pauseComponentMatrixIdx: 2,
+      pauseExitAnimation: false,
+    } as any,
+    (set) => ({
+      // subscene setters
+      setSubscene: (to: "pause" | "level_selection") =>
+        set(() => ({ subscene: to })),
+
+      // intro setters
+      setIntro: (to: boolean) => set(() => ({ intro: to })),
+
+      // big text setters
+      setBigText: (to: string) => set(() => ({ bigText: to })),
+      setBigTextVisible: (to: boolean) => set(() => ({ bigTextVisible: to })),
+      setBigTextColor: (to: "yellow" | "orange") =>
+        set(() => ({ bigTextColor: to })),
+      setBigTextPos: (to: number[]) => set(() => ({ bigTextPos: to })),
+      setBigTextXOffset: (to: number) => set(() => ({ bigTextXOffset: to })),
+
+      // hud setters
+      setHudId: (to: string) => set(() => ({ hudId: to })),
+      toggleHudActive: () =>
+        set((state) => ({ hudActive: Number(!state.hudActive) })),
+
+      // node setters
+      setActiveNodeId: (to: string) => set(() => ({ activeNodeId: to })),
+      setActiveNodeMatrixIndices: (to: {
+        matrixIdx: number;
+        rowIdx: number;
+        colIdx: number;
+      }) => set(() => ({ activeNodeMatrixIndices: to })),
+      setActiveNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
+      setActiveNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
+      setActiveNodeState: (
+        to: boolean,
+        at: "interactedWith" | "visible" | "exploding" | "shrinking"
+      ) =>
+        set((state) => ({
+          activeNodeState: { ...state.activeNodeState, [at]: to },
+        })),
+
+      // lain setters
+      setLainMoveState: (to: string) => set(() => ({ lainMoveState: to })),
+
+      // starfield setters
+      setMainStarfieldVisible: (to: boolean) =>
+        set(() => ({ mainStarfieldVisible: to })),
+      setMainStarBoostVal: (to: number) =>
+        set(() => ({ mainStarBoostVal: to })),
+      setIntroStarfieldVisible: (to: boolean) =>
+        set(() => ({ introStarfieldVisible: to })),
+
+      // site setters
+      setActiveSite: (to: "a" | "b") => set(() => ({ activeSite: to })),
+      setSiteRot: (to: number[]) => set(() => ({ siteRot: to })),
+      setSitePos: (to: number[]) => set(() => ({ sitePos: to })),
+
+      // middle ring setters
+      setMiddleRingPos: (to: number[]) => set(() => ({ middleRingPos: to })),
+      setMiddleRingRot: (to: number[]) => set(() => ({ middleRingRot: to })),
+      setMiddleRingWobbleAmp: (to: number) =>
+        set(() => ({ middleRingWobbleAmp: to })),
+      setMiddleRingNoiseAmp: (to: number) =>
+        set(() => ({ middleRingNoiseAmp: to })),
+      setMiddleRingPartSeparatorVal: (to: number) =>
+        set(() => ({ middleRingPartSeparatorVal: to })),
+      setMiddleRingRotating: (to: boolean) =>
+        set(() => ({ middleRingRotating: to })),
+      setFakeMiddleRingVisible: (to: boolean) =>
+        set(() => ({ fakeMiddleRingVisible: to })),
+
+      // level setters
+      setActiveLevel: (to: string) => set(() => ({ activeLevel: to })),
+
+      // level selection setters
+      setSelectedLevel: (to: number) => set(() => ({ selectedLevel: to })),
+      toggleLevelSelection: () =>
+        set((state) => ({
+          levelSelectionToggled: Number(!state.levelSelectionToggled),
+        })),
+
+      // pause setters
+      setPauseComponentMatrixIdx: (to: number) =>
+        set(() => ({ pauseComponentMatrixIdx: to })),
+      setPauseExitAnimation: (to: boolean) =>
+        set(() => ({ pauseExitAnimation: to })),
+    })
+  )
+);
 
 export const useBootStore = create(
   combine(