got rid of yellow text manager, gota fix some bugs still

src/components/MainScene/SyncedComponents/HUD.tsx

@@ -41,7 +41,8 @@ const HUD = memo(() => {
   );
   const siteRotY = useStore((state) => state.siteRot[1]);
   const sitePosY = useStore((state) => state.sitePos[1]);
-  const prevData = usePrevious({ siteRotY, sitePosY });
+  const subscene = useStore((state) => state.mainSubscene);
+  const prevData = usePrevious({ siteRotY, sitePosY, subscene });
 
   // this part is imperative because it performs a lot better than having a toggleable spring.
   useFrame(() => {
@@ -87,7 +88,11 @@ const HUD = memo(() => {
 
   useEffect(() => {
     if (activeRef.current !== undefined) {
-      if (prevData?.siteRotY !== siteRotY || prevData?.sitePosY !== sitePosY) {
+      if (
+        prevData?.siteRotY !== siteRotY ||
+        prevData?.sitePosY !== sitePosY ||
+        subscene === "level_selection"
+      ) {
         activeRef.current = false;
       } else {
         const wasHidden = !activeRef.current;
@@ -145,6 +150,7 @@ const HUD = memo(() => {
     prevData?.siteRotY,
     sitePosY,
     siteRotY,
+    subscene,
   ]);
 
   const longHudRef = useRef<THREE.Object3D>();

src/components/TextRenderer/BigLetter.tsx

@@ -4,22 +4,23 @@ 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, { memo, useEffect, useMemo } from "react";
+import React, { memo, useEffect, useMemo, useState } from "react";
 import { useStore } from "../../store";
+import usePrevious from "../../hooks/usePrevious";
 
 const BigLetter = memo(
   (props: {
-    color: string;
+    color?: string;
     letter: string;
     letterIdx: number;
     xOffset?: number;
   }) => {
+    const [color, setColor] = useState("yellow");
+
     const tex = useMemo(
       () =>
-        props.color === "orange" || props.letterIdx === 0
-          ? orangeFont
-          : yellowFont,
-      [props.color, props.letterIdx]
+        color === "orange" || props.letterIdx === 0 ? orangeFont : yellowFont,
+      [color, props.letterIdx]
     );
 
     const colorTexture: THREE.Texture = useLoader(THREE.TextureLoader, tex);
@@ -81,6 +82,7 @@ const BigLetter = memo(
     }, [letterData, lineYOffset]);
 
     const activeNode = useStore((state) => state.activeNode);
+    const subscene = useStore((state) => state.mainSubscene);
 
     const [shrinkState, set] = useSpring(() => ({
       x: props.letterIdx + 0.3,
@@ -89,11 +91,17 @@ const BigLetter = memo(
 
     useEffect(() => {
       set({ x: 0 });
-
+      if (subscene === "level_selection") {
+        setColor("orange");
+      } else {
+        if (color === "orange") {
+          setColor("yellow");
+        }
+      }
       setTimeout(() => {
         set({ x: props.letterIdx + 0.3 });
       }, 1200);
-    }, [activeNode, props.letterIdx, set]);
+    }, [activeNode, props.letterIdx, subscene, set, color]);
 
     return (
       <a.mesh

src/components/TextRenderer/YellowTextRenderer.tsx

@@ -3,34 +3,48 @@ import { useStore } from "../../store";
 import { a, useTrail } from "@react-spring/three";
 import BigLetter from "./BigLetter";
 import { getNodeHud } from "../../core/nodeSelector";
+import usePrevious from "../../hooks/usePrevious";
 
 const YellowTextRenderer = (props: { visible?: boolean }) => {
-  const visible = useStore((state) => state.bigTextVisible);
-  const color = useStore((state) => state.bigTextColor);
-
   const activeNode = useStore((state) => state.activeNode);
+  const subscene = useStore((state) => state.mainSubscene);
+  const prevData = usePrevious({ subscene });
 
-  const [text, setText] = useState(useStore.getState().bigText.split(""));
+  const [text, setText] = useState(
+    useStore.getState().activeNode.node_name.split("")
+  );
 
   const [trail, set] = useTrail(text.length, () => ({
-    posX: useStore.getState().bigTextPos[0],
-    posY: useStore.getState().bigTextPos[1],
+    posX: getNodeHud(useStore.getState().activeNode.matrixIndices!).big_text[0],
+    posY: getNodeHud(useStore.getState().activeNode.matrixIndices!).big_text[1],
     config: { duration: 280 },
   }));
 
   useEffect(() => {
-    const hud = getNodeHud(activeNode.matrixIndices!);
-    setTimeout(() => {
-      set({ posX: hud.big_text[0], posY: hud.big_text[1] });
-    }, 400);
+    if (prevData?.subscene !== "pause") {
+      const hud = getNodeHud(activeNode.matrixIndices!);
+      if (subscene === "level_selection") {
+        setTimeout(() => {
+          set({ posX: -0.02, posY: 0.005 });
+        }, 400);
 
-    setTimeout(() => {
-      setText(activeNode.node_name.split(""));
-    }, 1000);
-  }, [activeNode, set]);
+        setTimeout(() => {
+          setText("JumpTo".split(""));
+        }, 1000);
+      } else {
+        setTimeout(() => {
+          set({ posX: hud.big_text[0], posY: hud.big_text[1] });
+        }, 400);
+
+        setTimeout(() => {
+          setText(activeNode.node_name.split(""));
+        }, 1000);
+      }
+    }
+  }, [activeNode, prevData?.subscene, set, subscene]);
 
   return (
-    <group position={[0, 0, 10]} visible={props.visible && visible}>
+    <a.group position-z={10} visible={props.visible}>
       {trail.map(({ posX, posY }, idx) => (
         <a.group
           key={idx}
@@ -39,15 +53,10 @@ const YellowTextRenderer = (props: { visible?: boolean }) => {
           position-z={-8.7}
           scale={[0.04, 0.06, 0.04]}
         >
-          <BigLetter
-            color={color}
-            letter={text[idx]}
-            letterIdx={idx}
-            key={idx}
-          />
+          <BigLetter letter={text[idx]} letterIdx={idx} key={idx} />
         </a.group>
       ))}
-    </group>
+    </a.group>
   );
 };
 

src/core/StateManagers/GameManagers/GameLoader.tsx

@@ -17,10 +17,6 @@ const GameLoader = (props: StateManagerProps) => {
   // level setter
   // const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
 
-  // big text setter
-  const setBigTexPos = useStore((state) => state.setBigTextPos);
-  const setBigText = useStore((state) => state.setBigText);
-
   // site setter
   const setSiteRot = useStore((state) => state.setSiteRot);
   const setCurrentSite = useStore((state) => state.setActiveSite);

src/core/StateManagers/MainSceneEventManager.tsx

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

src/core/StateManagers/MainSceneManagers/BigTextManager.tsx

@@ -1,173 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { useStore } from "../../../store";
-import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
-import { StateManagerProps } from "../EventManager";
-import { HUDType } from "../../../components/MainScene/SyncedComponents/HUD";
-
-const BigTextManager = (props: StateManagerProps) => {
-  const setText = useStore((state) => state.setBigText);
-  const setColor = useStore((state) => state.setBigTextColor);
-  const setVisible = useStore((state) => state.setBigTextVisible);
-  const setXOffset = useStore((state) => state.setBigTextXOffset);
-  const setPos = useStore((state) => state.setBigTextPos);
-
-  const animateYellowTextWithMove = useCallback(
-    (
-      posXOffset: number,
-      posYOffset: number,
-      hud: HUDType,
-      node: NodeDataType | "UNKNOWN",
-      delay: number
-    ) => {
-      // animate the letters to match that of site's
-      // to create an illusion of not moving
-      // setTimeout(() => {
-      //   addToTransformState(posXOffset, "posX");
-      //   addToTransformState(posYOffset, "posY");
-      // }, delay);
-
-      setTimeout(() => {
-        // make current hud big text shrink
-        setXOffset(-1);
-      }, 2500);
-
-      setTimeout(() => {
-        // animate it to new pos x/y
-        setPos(hud.big_text);
-        // set new text according to the node name
-        const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;
-
-        setText(targetText);
-      }, 3000);
-
-      // unshrink text
-      setTimeout(() => {
-        setXOffset(0);
-      }, 3900);
-    },
-    [setPos, setText, setXOffset]
-  );
-
-  const initializeLevelSelection = useCallback(() => {
-    setXOffset(-1);
-
-    setTimeout(() => {
-      setPos([-0.02, 0.005, -8.7]);
-    }, 400);
-
-    setTimeout(() => {
-      setText("Jump To");
-      setColor("orange");
-    }, 1000);
-
-    setTimeout(() => {
-      setXOffset(0);
-    }, 1200);
-  }, [setColor, setPos, setText, setXOffset]);
-
-  const levelSelectionBack = useCallback(
-    (node: NodeDataType, hud: HUDType) => {
-      setXOffset(-1);
-
-      setTimeout(() => {
-        setPos(hud.big_text);
-      }, 400);
-
-      setTimeout(() => {
-        setColor("yellow");
-        setText(node.node_name);
-      }, 1000);
-
-      setTimeout(() => {
-        setXOffset(0);
-      }, 1200);
-    },
-    [setColor, setPos, setText, setXOffset]
-  );
-
-  const toggleVisibleAfterLevelSelect = useCallback(
-    (node: NodeDataType | "UNKNOWN", hud: HUDType) => {
-      setVisible(false);
-
-      setTimeout(() => {
-        setPos(hud.big_text);
-        setColor("yellow");
-        const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;
-
-        setText(targetText);
-      }, 400);
-
-      setTimeout(() => {
-        setVisible(true);
-      }, 3900);
-    },
-    [setColor, setPos, setText, setVisible]
-  );
-
-  const dispatchObject = useCallback(
-    (eventState: {
-      event: string;
-      hud: HUDType;
-      node: NodeDataType;
-      level: string;
-    }) => {
-      switch (eventState.event) {
-        case "site_up":
-          return {
-            action: animateYellowTextWithMove,
-            value: [0, -1.5, eventState.hud, eventState.node, 1300],
-          };
-        case "site_down":
-          return {
-            action: animateYellowTextWithMove,
-            value: [0, 1.5, eventState.hud, eventState.node, 1300],
-          };
-        case "site_left":
-          return {
-            action: animateYellowTextWithMove,
-            value: [Math.PI / 4, 0, eventState.hud, eventState.node, 1100],
-          };
-        case "site_right":
-          return {
-            action: animateYellowTextWithMove,
-            value: [-Math.PI / 4, 0, eventState.hud, eventState.node, 1100],
-          };
-        case "level_selection_back":
-          return {
-            action: levelSelectionBack,
-            value: [eventState.node, eventState.hud],
-          };
-        case "toggle_level_selection":
-          return {
-            action: initializeLevelSelection,
-          };
-        case "select_level_up":
-        case "select_level_down":
-          return {
-            action: toggleVisibleAfterLevelSelect,
-            value: [eventState.node, eventState.hud],
-          };
-      }
-    },
-    [
-      animateYellowTextWithMove,
-      initializeLevelSelection,
-      levelSelectionBack,
-      toggleVisibleAfterLevelSelect,
-    ]
-  );
-
-  useEffect(() => {
-    if (props.eventState) {
-      const dispatchedObject = dispatchObject(props.eventState);
-
-      if (dispatchedObject) {
-        (dispatchedObject.action as any).apply(null, dispatchedObject.value);
-      }
-    }
-  }, [animateYellowTextWithMove, props.eventState, dispatchObject]);
-
-  return null;
-};
-
-export default BigTextManager;

src/core/mainSceneEventHandler.ts

@@ -46,7 +46,7 @@ const handleMainSceneEvent = (gameContext: any) => {
           nodeMatrixIndices = selectedNodeData.newNodeMatrixIndices;
           siteRotY = selectedNodeData.newSiteRotY;
           sitePosY = selectedNodeData.newSitePosY;
-          level = selectedNodeData.newLevel;
+          level = selectedNodeData.newLevel!;
           activeHud = selectedNodeData.newActiveHud;
         }
 
@@ -155,11 +155,11 @@ const handleMainSceneEvent = (gameContext: any) => {
             selectedLevel < level ? "select_level_down" : "select_level_up";
           return {
             event: event,
+            nodeMatrixIndices: selectedNodeData.nodeMatrixIndices,
+            sitePosY: -selectedNodeData.sitePosY!,
             level: selectedLevel.toString().padStart(2, "0"),
-            activeNodeId: selectedNodeData.node,
-            activeHud: selectedNodeData.newActiveHud,
-            nodeMatrixIndices: selectedNodeData.newNodeMatrixIndices,
-            sitePosY: -selectedNodeData.newSitePosY,
+            node: selectedNodeData.node,
+            hud: selectedNodeData.activeHud,
           };
         }
     }

src/core/nodeSelector.ts

@@ -442,11 +442,11 @@ const nodeSelector = (context: NodeSelectorContext) => {
       if (newNodeData) {
         return {
           node: newNodeData.node,
-          newNodeMatrixIndices: newNodeData.newNodeMatrixIndices,
-          newActiveHud: newNodeData.newNodeHud,
-          newSiteRotY: context.siteRotY,
-          newLevel: newNodeData.newLevel,
-          newSitePosY: newNodeData.newSitePosY,
+          nodeMatrixIndices: newNodeData.newNodeMatrixIndices,
+          activeHud: newNodeData.newNodeHud,
+          siteRotY: context.siteRotY,
+          level: newNodeData.newLevel,
+          sitePosY: newNodeData.newSitePosY,
         };
       }
   }

src/core/utils/bigTextUtils.ts

@@ -0,0 +1,36 @@
+export const calculatePosAfterMove = (
+  currentData: {
+    siteRotY: number;
+    sitePosY: number;
+    matrixIndices: { rowIdx: number; colIdx: number; matrixIdx: number };
+  },
+  prevData: { siteRotY: number; sitePosY: number }
+) => {
+  if (currentData.sitePosY > prevData.sitePosY) {
+    // todo
+    // instead of 1 i need to calculate the amplifier value
+    return { posX: 0, posY: 1 * 1 };
+  } else if (currentData.sitePosY < prevData.sitePosY) {
+    return { posX: 0, posY: -1 * 1 };
+  } else {
+    if (
+      currentData.matrixIndices.colIdx === 0 ||
+      currentData.matrixIndices.colIdx === 3
+    ) {
+      if (currentData.siteRotY > prevData.siteRotY) {
+        return { posX: 1.5, posY: 0 };
+      } else if (currentData.siteRotY < prevData.siteRotY) {
+        return { posX: -1.5, posY: 0 };
+      }
+    } else if (
+      currentData.matrixIndices.colIdx === 1 ||
+      currentData.matrixIndices.colIdx === 2
+    ) {
+      if (currentData.siteRotY > prevData.siteRotY) {
+        return { posX: 0.5, posY: 0 };
+      } else if (currentData.siteRotY < prevData.siteRotY) {
+        return { posX: -0.5, posY: 0 };
+      }
+    }
+  }
+};

src/store.ts

@@ -34,12 +34,6 @@ type State = {
 
   intro: boolean;
 
-  bigText: string;
-  bigTextVisible: boolean;
-  bigTextColor: "yellow" | "orange";
-  bigTextPos: number[];
-  bigTextXOffset: 0 | -1;
-
   hud: HUDType;
   hudActive: boolean;
 
@@ -148,13 +142,6 @@ export const useStore = create(
       // 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, -8.7],
-      bigTextXOffset: 0,
-
       // hud
       hud: {
         mirrored: 0,
@@ -313,14 +300,6 @@ export const useStore = create(
       // 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: 0 | -1) => set(() => ({ bigTextXOffset: to })),
-
       // hud setters
       setHud: (to: HUDType) => set(() => ({ hud: to })),
       toggleHudActive: () => set((state) => ({ hudActive: !state.hudActive })),