bugfixes

src/components/MainScene/Node.tsx

@@ -139,7 +139,7 @@ const Node = (props: NodeContructorProps) => {
         ? state.activeNodeState.posX
         : props.position[0],
       activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
-        ? level_y_values[props.level as keyof typeof level_y_values]
+        ? 0
         : props.position[1],
       activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
         ? state.activeNodeState.posZ

src/components/TextRenderer/GreenTextRenderer.tsx

@@ -43,7 +43,6 @@ const GreenTextRenderer = (props: { visible?: boolean }) => {
       >
         {textArrRef.current.map((letter, idx) => (
           <MediumLetter
-            color={"yellow"}
             letter={letter}
             letterIdx={idx}
             key={idx}

src/components/TextRenderer/MediumLetter.tsx

@@ -6,7 +6,6 @@ import { a } from "@react-spring/three";
 import React, { useMemo } from "react";
 
 const MediumLetter = (props: {
-  color: string;
   letter: string;
   letterIdx: number;
 }) => {

src/core/StateManagers/GreenTextManager.tsx

@@ -46,23 +46,6 @@ const GreenTextManager = (props: StateManagerProps) => {
     [setGreenText, setTransformState, toggleActive]
   );
 
-  const initializeGreenTextForMediaScene = useCallback(
-    (activeNodeId: string, level: string) => {
-      setTimeout(() => {
-        setGreenText((site_a as SiteType)[level][activeNodeId].node_name);
-        setTransformState(
-          {
-            initial: 0,
-            final: 0.009,
-          },
-          "posX"
-        );
-        setTransformState(0.675, "posY");
-      }, 3950);
-    },
-    [setGreenText, setTransformState]
-  );
-
   const dispatchObject = useCallback(
     (
       event: string,
@@ -84,12 +67,8 @@ const GreenTextManager = (props: StateManagerProps) => {
             action: toggleAndSetGreenText,
             value: [newActiveNodeId, newActiveHudId, newLevel, 500, true],
           };
-        case "throw_node_media":
-          return {
-            action: initializeGreenTextForMediaScene,
-            value: [newActiveNodeId, newLevel],
-          };
         case "toggle_level_selection":
+        case "level_selection_back":
           return {
             action: toggleActive,
           };
@@ -101,7 +80,7 @@ const GreenTextManager = (props: StateManagerProps) => {
           };
       }
     },
-    [initializeGreenTextForMediaScene, toggleActive, toggleAndSetGreenText]
+    [toggleActive, toggleAndSetGreenText]
   );
 
   useEffect(() => {

src/core/StateManagers/NodeHUDManager.tsx

@@ -57,6 +57,7 @@ const NodeHUDManager = (props: StateManagerProps) => {
             value: [targetNodeHudId],
           };
         case "toggle_level_selection":
+        case "level_selection_back":
           return {
             action: toggleActive,
           };

src/core/StateManagers/SceneManager.tsx

@@ -14,7 +14,7 @@ const SceneManager = (props: StateManagerProps) => {
           return {
             action: setScene,
             value: newScene,
-            delay: 3904.704,
+            delay: 3450,
           };
         case "exit_select":
         case "exit_gate":

src/core/StateManagers/YellowTextManager.tsx

@@ -206,7 +206,12 @@ const YellowTextManager = (props: StateManagerProps) => {
           "posY"
         );
         setColor("yellow");
-        setText((site_a as SiteType)[level][activeNodeId].node_name);
+        const targetText =
+          activeNodeId === "UNKNOWN"
+            ? "Unknown"
+            : (site_a as SiteType)[level][activeNodeId].node_name;
+
+        setText(targetText);
       }, 400);
 
       setTimeout(() => {

src/core/mainSceneEventHandler.ts

@@ -59,9 +59,11 @@ const handleMainSceneEvent = (gameContext: any) => {
         // in this case we have to check the type of the blue orb
         // and dispatch an action depending on that, so we have to precalculate the
         // new active blue orb here.
-        newActiveNodeId = getNodeId(gameContext.activeLevel, nodeMatrixIndices);
+        newActiveNodeId = getNodeId(level, nodeMatrixIndices);
 
-        const nodeType = (site_a as any)[newLevel][newActiveNodeId].type;
+        const nodeType = (site_a as any)[gameContext.activeLevel][
+          newActiveNodeId
+        ].type;
 
         const eventAnimation = "throw_node_";
 
@@ -116,9 +118,9 @@ const handleMainSceneEvent = (gameContext: any) => {
       case "X":
         return {
           event: "level_selection_back",
-          newActiveNodeId: getNodeId(gameContext.level, nodeMatrixIndices),
+          newActiveNodeId: getNodeId(newLevel, nodeMatrixIndices),
           newActiveHudId: getNodeHudId(nodeMatrixIndices),
-          newLevel: newLevel,
+          newLevel: newLevel.toString().padStart(2, "0"),
         };
       case "CIRCLE":
         const selectedNodeData = nodeSelector({

src/core/nodeSelector.ts

@@ -93,10 +93,12 @@ const findNodeAfterLevelSelection = (
   targetLevel: number,
   nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number }
 ) => {
-  let newMatIndices = nodeMatrixIndices;
+  let newMatIndices = Object.assign({}, nodeMatrixIndices);
 
   let triedCols: number[] = [];
 
+  newMatIndices.rowIdx = 0;
+
   let newNodeId = getNodeId(targetLevel, newMatIndices);
 
   while (!isNodeVisible(newNodeId, unlockedNodes)) {
@@ -107,9 +109,15 @@ const findNodeAfterLevelSelection = (
         newMatIndices.colIdx = colToTry;
       }
     } else {
-      newMatIndices.rowIdx++;
+      if (newMatIndices.rowIdx === 2) {
-      triedCols = [];
+        newMatIndices.colIdx = nodeMatrixIndices.colIdx;
-      newMatIndices.colIdx = 0;
+        newNodeId = "UNKNOWN";
+        break;
+      } else {
+        newMatIndices.rowIdx++;
+        triedCols = [];
+        newMatIndices.colIdx = 0;
+      }
     }
     newNodeId = getNodeId(targetLevel, newMatIndices);
   }
@@ -254,15 +262,18 @@ const findNodeHorizontal = (
           newMatIndices.rowIdx = rowToTry;
         }
       } else {
+        if (newMatIndices.colIdx > 3 && didMove) return;
+
         if (newMatIndices.colIdx < 0) {
-          didMove = true;
           if (activeId === "UNKNOWN") {
+            didMove = true;
             newMatIndices.colIdx = nodeMatrixIndices.colIdx;
             newMatIndices.matrixIdx =
               newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
             newNodeId = "UNKNOWN";
             break;
           } else {
+            didMove = true;
             newMatIndices.colIdx = 0;
             newMatIndices.matrixIdx =
               newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
@@ -281,6 +292,7 @@ const findNodeHorizontal = (
     let triedRows: number[] = [];
 
     if (newMatIndices.colIdx > 3) {
+      didMove = true;
       newMatIndices.colIdx = 3;
       newMatIndices.matrixIdx =
         newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
@@ -296,18 +308,26 @@ const findNodeHorizontal = (
           newMatIndices.rowIdx = rowToTry;
         }
       } else {
+        if (newMatIndices.colIdx < 0 && didMove) return;
+
         if (newMatIndices.colIdx > 3) {
-          didMove = true;
           if (activeId === "UNKNOWN") {
+            didMove = true;
             newMatIndices.colIdx = nodeMatrixIndices.colIdx;
             newMatIndices.matrixIdx =
               newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
             newNodeId = "UNKNOWN";
             break;
           } else {
-            newMatIndices.colIdx = 3;
+            if (didMove) return;
-            newMatIndices.matrixIdx =
+            else {
-              newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
+              didMove = true;
+              newMatIndices.colIdx = 3;
+              newMatIndices.matrixIdx =
+                newMatIndices.matrixIdx - 1 < 1
+                  ? 8
+                  : newMatIndices.matrixIdx - 1;
+            }
           }
         } else {
           didMove ? newMatIndices.colIdx-- : newMatIndices.colIdx++;

src/scenes/MainScene.tsx

@@ -33,7 +33,7 @@ const MainScene = () => {
   return (
     <perspectiveCamera position-z={3}>
       <Suspense fallback={null}>
-        <MainSceneIntro />
+        {/*<MainSceneIntro />*/}
         <a.group>
           <Preloader />
           <Site />

src/scenes/MediaScene.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useMemo } from "react";
-import { useMediaStore } from "../store";
+import {
+  useLevelSelectionStore,
+  useLevelStore,
+  useMediaStore,
+  useNodeStore,
+} from "../store";
 import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
 import LeftSide from "../components/MediaScene/Selectables/LeftSide";
 import RightSide from "../components/MediaScene/Selectables/RightSide";
@@ -10,12 +15,22 @@ import Lof from "../components/MediaScene/Lof";
 import { OrbitControls } from "@react-three/drei";
 import Images from "../components/MediaScene/Images";
 import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
+import MediumLetter from "../components/TextRenderer/MediumLetter";
+import { a } from "@react-spring/three";
+import site_a from "../resources/site_a.json";
+import { SiteType } from "../components/MainScene/Site";
 
 const MediaScene = () => {
   const mediaComponentMatrixIndices = useMediaStore(
     (state) => state.componentMatrixIndices
   );
 
+  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
+  const activeLevel = useLevelStore((state) => state.activeLevel);
+
+  const activeNodeName = (site_a as SiteType)[activeLevel][activeNodeId]
+    .node_name;
+
   const activeMediaComponent = useMediaStore(
     useCallback(
       (state) =>
@@ -45,8 +60,13 @@ const MediaScene = () => {
           <MediaLoadingBar />
           <NodeNameContainer />
         </group>
+        <group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
+          {activeNodeName.split("").map((letter, idx) => (
+            <MediumLetter letter={letter} letterIdx={idx} key={idx} />
+          ))}
+        </group>
+
         <group position={[0, 0, 0]}>
-          <GreenTextRenderer />
           <YellowTextRenderer />
         </group>
         <Lof />

src/store.ts

@@ -390,7 +390,7 @@ export const useSSknStore = create<SSknState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "main",
+  currentScene: "media",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));