cllleanup wip

src/components/MainScene/Lain.tsx

@@ -32,7 +32,7 @@ import leanRightSpriteSheet from "../../static/sprite/lean_right.png";
 import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
 import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
 
-import { useLainStore } from "../../store";
+import { useMainSceneStore } from "../../store";
 
 type LainConstructorProps = {
   sprite: string;
@@ -353,7 +353,7 @@ type LainProps = {
 };
 
 const Lain = (props: LainProps) => {
-  const lainMoveState = useLainStore((state) => state.lainMoveState);
+  const lainMoveState = useMainSceneStore((state) => state.lainMoveState);
 
   const lainAnimationDispatch = useMemo(() => {
     const anims = {

src/components/MainScene/SyncedComponents/HUD.tsx

@@ -8,33 +8,36 @@ import longHudMirrored from "../../../static/sprite/long_hud_mirrored.png";
 import boringHud from "../../../static/sprite/long_hud_boring.png";
 import boringHudMirrored from "../../../static/sprite/long_hud_boring_mirrored.png";
 import { a, useSpring } from "@react-spring/three";
-import { useHudStore, useNodeStore, useSiteStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
-import node_huds from "../../../resources/node_huds.json";
 import MediumLetter from "../../TextRenderer/MediumLetter";
-import site_a from "../../../resources/site_a.json";
+
-import site_b from "../../../resources/site_b.json";
+export type HUDType = {
-import { SiteType } from "./Site";
+  mirrored: number;
+  long: {
+    position: number[];
+    initial_position: number[];
+  };
+  boring: {
+    position: number[];
+    initial_position: number[];
+  };
+  big: {
+    position: number[];
+    initial_position: number[];
+  };
+  big_text: number[];
+  medium_text: {
+    position: number[];
+    initial_position: number[];
+  };
+};
 
 const HUD = () => {
-  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
+  const greenText = useMainSceneStore((state) =>
-  const currentSite = useSiteStore((state) => state.currentSite);
+    state.activeNode.title.split("")
-
+  );
-  const greenText = useMemo(() => {
+  const active = useMainSceneStore((state) => state.hudActive);
-    if (activeNodeId === "UNKNOWN") return "".split("");
+  const currentHud = useMainSceneStore((state) => state.hud);
-    else {
-      const siteData = currentSite === "a" ? site_a : site_b;
-      const level = activeNodeId.substr(0, 2);
-
-      return (siteData as SiteType)[level][activeNodeId].title.split("");
-    }
-  }, [activeNodeId, currentSite]);
-
-  const active = useHudStore((state) => state.active);
-  const id = useHudStore((state) => state.id);
-
-  const currentHud = useMemo(() => node_huds[id as keyof typeof node_huds], [
-    id,
-  ]);
 
   const hudElementState = useSpring({
     bigHUDPositionX: active,
@@ -145,7 +148,7 @@ const HUD = () => {
         position-z={-8.7}
         scale={[0.02, 0.035, 0.02]}
       >
-        {greenText.map((letter, idx) => (
+        {greenText.map((letter: string, idx: number) => (
           <MediumLetter letter={letter} letterIdx={idx} key={idx} />
         ))}
       </a.group>

src/components/MainScene/SyncedComponents/Site.tsx

@@ -1,11 +1,6 @@
 import React, { Suspense, useMemo } from "react";
 import { a, useSpring } from "@react-spring/three";
-import {
+import { useLevelStore, useMainSceneStore, useSiteStore } from "../../../store";
-  useLevelStore,
-  useMainSceneStore,
-  useNodeStore,
-  useSiteStore,
-} from "../../../store";
 import ActiveLevelNodes from "./Site/ActiveLevelNodes";
 import InactiveLevelNodes from "./Site/InactiveLevelNodes";
 import Rings from "./Site/Rings";
@@ -69,7 +64,7 @@ const Site = (props: SiteProps) => {
     config: { duration: 3400 },
   });
 
-  const gameProgress = useNodeStore((state) => state.gameProgress);
+  const gameProgress = useMainSceneStore((state) => state.gameProgress);
 
   const currentSite = useSiteStore((state) => state.currentSite);
 

src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx

@@ -1,22 +1,26 @@
 import React, { useEffect, useMemo } from "react";
 import Node from "./Node";
 import node_positions from "../../../../resources/node_positions.json";
-import { useNodeStore } from "../../../../store";
+import { useMainSceneStore } from "../../../../store";
 import { isNodeVisible } from "../../../../core/nodeSelector";
 import { NodesProps } from "../Site";
 
 const ActiveLevelNodes = (props: NodesProps) => {
-  const activeNodeState = useNodeStore((state) => state.activeNodeState);
+  const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
 
   const activeLevelNodes = useMemo(
     () => props.siteData[props.activeLevel as keyof typeof props.siteData],
     [props]
   );
 
+  useEffect(() => {
+    console.log(activeNodeId);
+  }, [activeNodeId]);
+
   return (
     <>
       {Object.entries(activeLevelNodes).map((node: [string, any]) => {
-        if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
+        if (isNodeVisible(node[1], props.gameProgress)) {
           return (
             <Node
               nodeName={node[1].node_name}
@@ -29,7 +33,7 @@ const ActiveLevelNodes = (props: NodesProps) => {
                   .rotation
               }
               key={node[1].node_name}
-              active={node[0] === activeNodeState.id}
+              active={node[0] === activeNodeId}
               level={node[0].substr(0, 2)}
             />
           );

src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx

@@ -25,7 +25,7 @@ const InactiveLevelNodes = memo((props: NodesProps) => {
   return (
     <>
       {Object.entries(visibleNodes).map((node: [string, any]) => {
-        if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
+        if (isNodeVisible(node[1], props.gameProgress)) {
           return (
             <Node
               nodeName={node[1].node_name}

src/components/MainScene/SyncedComponents/Site/Node.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
-import { a, useSpring } from "@react-spring/three";
+import { a, useSpring, interpolate } from "@react-spring/three";
 import * as THREE from "three";
 import Cou from "../../../../static/sprite/Cou.png";
 import CouActive from "../../../../static/sprite/Cou_active.png";
@@ -17,7 +17,7 @@ import LdaActive from "../../../../static/sprite/Lda_active.png";
 import MULTI from "../../../../static/sprite/MULTI.png";
 import MULTIActive from "../../../../static/sprite/MULTI_active.png";
 import level_y_values from "../../../../resources/level_y_values.json";
-import { useNodeStore } from "../../../../store";
+import { useMainSceneStore } from "../../../../store";
 
 type NodeContructorProps = {
   nodeName: string;
@@ -28,11 +28,6 @@ type NodeContructorProps = {
 };
 
 const Node = memo((props: NodeContructorProps) => {
-  // the game only has a couple of sprite that it displays in the hub
-  // dynamically importnig them would be worse for performance,
-  // so we import all of them here and then use this function to
-  // associate a sprite with the path
-
   const tex = useMemo(() => {
     if (props.nodeName.includes("S")) {
       return [SSkn, SSKnActive];
@@ -106,66 +101,29 @@ const Node = memo((props: NodeContructorProps) => {
     }
   `;
 
-  // these pieces of state get updated transiently rather than reactively
-  // to avoid excess unnecessary renders (this is absolutely crucial for performance).
-
   const [
-    {
+    { activeNodePos, activeNodeRot, activeNodeScale, activeNodeVisible },
-      activeNodePosX,
-      activeNodePosY,
-      activeNodePosZ,
-      activeNodeRotZ,
-      activeNodeVisible,
-      activeNodeScale,
-    },
     set,
   ] = useSpring(() => ({
-    activeNodePosX: useNodeStore.getState().activeNodeState.interactedWith
+    activeNodePos: props.position,
-      ? useNodeStore.getState().activeNodeState.posX
+    activeNodeRot: [0, 0, 0],
-      : props.position[0],
+    activeNodeScale: 1,
-    activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
-      ? level_y_values[props.level as keyof typeof level_y_values] +
-        useNodeStore.getState().activeNodeState.posY
-      : props.position[1],
-    activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
-      ? useNodeStore.getState().activeNodeState.posZ
-      : props.position[2],
-    activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
-      ? useNodeStore.getState().activeNodeState.rotZ
-      : 0,
-    activeNodeScale: useNodeStore.getState().activeNodeState.shrinking ? 0 : 1,
     activeNodeVisible: true,
     config: { duration: 800 },
   }));
 
   useEffect(() => {
-    useNodeStore.subscribe(set, (state) => ({
+    useMainSceneStore.subscribe(set, (state) => ({
-      activeNodePosX: useNodeStore.getState().activeNodeState.interactedWith
+      activeNodePos: state.activeNodeState.interactedWith
-        ? state.activeNodeState.posX
+        ? state.activeNodePos
-        : props.position[0],
+        : props.position,
-      activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
+      activeNodeRot: state.activeNodeState.interactedWith
-        ? state.activeNodeState.posY
-        : props.position[1],
-      activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
-        ? state.activeNodeState.posZ
-        : props.position[2],
-      activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
         ? state.activeNodeState.rotZ
         : 0,
-      activeNodeScale: useNodeStore.getState().activeNodeState.shrinking
+      activeNodeScale: state.activeNodeState.shrinking ? 0 : 1,
-        ? 0
+      activeNodeVisible: state.activeNodeState.visible,
-        : 1,
-      activeNodeVisible: useNodeStore.getState().activeNodeState.visible,
     }));
-  }, [
+  }, [props.level, props.position, set, props.rotation]);
-    props.level,
-    activeNodePosX,
-    activeNodePosZ,
-    activeNodeRotZ,
-    props.position,
-    set,
-    props.rotation,
-  ]);
 
   useFrame(() => {
     if (materialRef.current) {
@@ -189,10 +147,9 @@ const Node = memo((props: NodeContructorProps) => {
           scale-z={activeNodeScale}
         >
           <a.mesh
-            position-x={activeNodePosX}
+            position-x={activeNodePos.interpolate((x, y, z) => x)}
-            position-y={activeNodePosY}
+            position-y={activeNodePos.interpolate((x, y, z) => y)}
-            position-z={activeNodePosZ}
+            position-z={activeNodePos.interpolate((x, y, z) => z)}
-            rotation-z={activeNodeRotZ}
             rotation-y={props.rotation[1]}
             visible={activeNodeVisible}
             scale={[0.36, 0.18, 0.36]}

src/components/MainScene/SyncedComponents/Site/NodeAnimations.tsx

@@ -1,21 +1,21 @@
 import React from "react";
-import { useNodeStore } from "../../../../store";
+import { useMainSceneStore } from "../../../../store";
 import NodeExplosion from "./NodeAnimations/NodeExplosion";
 import NodeRip from "./NodeAnimations/NodeRip";
 
 const NodeAnimations = () => {
-  const nodeShrinking = useNodeStore(
+  const nodeShrinking = useMainSceneStore(
     (state) => state.activeNodeState.shrinking
   );
 
-  const nodeExploding = useNodeStore(
+  const nodeExploding = useMainSceneStore(
     (state) => state.activeNodeState.exploding
   );
 
   return (
     <>
-      {nodeExploding ? <NodeExplosion /> : <></>}
+      {nodeExploding && <NodeExplosion />}
-      {nodeShrinking ? <NodeRip /> : <></>}
+      {nodeShrinking && <NodeRip />}
     </>
   );
 };

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion.tsx

@@ -4,10 +4,10 @@ import node_explosion_line_positions from "../../../../../resources/node_explosi
 
 import { useFrame } from "react-three-fiber";
 import GoldNode from "./NodeExplosion/GoldNode";
-import { useNodeStore } from "../../../../../store";
+import { useMainSceneStore } from "../../../../../store";
 
 const NodeExplosion = () => {
-  const explosionVisible = useNodeStore(
+  const explosionVisible = useMainSceneStore(
     (state) => state.activeNodeState.exploding
   );
 

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeExplosion/GoldNode.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import * as THREE from "three";
 import { useFrame, useLoader } from "react-three-fiber";
@@ -16,21 +16,7 @@ import Lda from "../../../../../../static/sprite/Lda.png";
 import LdaGold from "../../../../../../static/sprite/Lda_gold.png";
 import MULTI from "../../../../../../static/sprite/MULTI.png";
 import MULTIGold from "../../../../../../static/sprite/MULTI_gold.png";
-import {
+import { useMainSceneStore } from "../../../../../../store";
-  useLevelStore,
-  useNodeStore,
-  useSiteStore,
-} from "../../../../../../store";
-import site_a from "../../../../../../resources/site_a.json";
-import site_b from "../../../../../../resources/site_b.json";
-import { SiteType } from "../../../Site";
-import SSKnActive from "../../../../../../static/sprite/SSkn_active.png";
-import MULTIActive from "../../../../../../static/sprite/MULTI_active.png";
-import DcActive from "../../../../../../static/sprite/Dc_active.png";
-import TdaActive from "../../../../../../static/sprite/Tda_active.png";
-import CouActive from "../../../../../../static/sprite/Cou_active.png";
-import DiaActive from "../../../../../../static/sprite/Dia_active.png";
-import LdaActive from "../../../../../../static/sprite/Lda_active.png";
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -48,43 +34,38 @@ type GoldNodeProps = {
 
 const GoldNode = (props: GoldNodeProps) => {
   const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/goldNode.glb");
-  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
-  const activeLevel = useLevelStore((state) => state.activeLevel);
 
-  const currentSite = useSiteStore((state) => state.currentSite);
+  const activeNodeName = useMainSceneStore(
-
+    (state) => state.activeNode.node_name
-  const siteData = currentSite === "a" ? site_a : site_b;
+  );
-
-  const activeNodeData = (siteData as SiteType)[activeLevel][activeNodeId];
-  const activeNodeName = activeNodeData.node_name;
 
   const tex = useMemo(() => {
     if (activeNodeName.includes("S")) {
-      return [SSkn, SSKnActive];
+      return [SSkn, SSKnGold];
     } else if (
       activeNodeName.startsWith("P") ||
       activeNodeName.startsWith("G") ||
       activeNodeName.includes("?")
     ) {
-      return [MULTI, MULTIActive];
+      return [MULTI, MULTIGold];
     } else if (activeNodeName.includes("Dc")) {
-      return [Dc, DcActive];
+      return [Dc, DcGold];
     } else {
       switch (activeNodeName.substr(0, 3)) {
         case "Tda":
-          return [Tda, TdaActive];
+          return [Tda, TdaGold];
         case "Cou":
-          return [Cou, CouActive];
+          return [Cou, CouGold];
         case "Dia":
-          return [Dia, DiaActive];
+          return [Dia, DiaGold];
         case "Lda":
-          return [Lda, LdaActive];
+          return [Lda, LdaGold];
         case "Ere":
         case "Ekm":
         case "Eda":
         case "TaK":
         case "Env":
-          return [MULTI, MULTIActive];
+          return [MULTI, MULTIGold];
       }
     }
   }, [activeNodeName]);
@@ -109,7 +90,6 @@ const GoldNode = (props: GoldNodeProps) => {
     }
   });
 
-
   return (
     <mesh
       geometry={nodes.Cube.geometry}

src/components/MainScene/SyncedComponents/Site/NodeAnimations/NodeRip.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import TriangleNode from "./NodeRip/TriangleNode";
-import { useNodeStore } from "../../../../../store";
+import { useMainSceneStore } from "../../../../../store";
 import RipLine from "./NodeRip/RipLine";
 import { useFrame } from "react-three-fiber";
 
 const NodeRip = () => {
-  const nodeShrinking = useNodeStore(
+  const nodeShrinking = useMainSceneStore(
     (state) => state.activeNodeState.shrinking
   );
   const [shouldAnimate, setShouldAnimate] = useState(false);

src/components/MediaScene/Images.tsx

@@ -1,24 +1,22 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   useIdleStore,
-  useLevelStore,
+  useMainSceneStore,
   useMediaStore,
-  useNodeStore,
   useSceneStore,
   useSiteStore,
 } from "../../store";
 import { a, useSpring } from "@react-spring/three";
-import { LevelType, SiteType } from "../MainScene/SyncedComponents/Site";
-import site_a from "../../resources/site_a.json";
-import site_b from "../../resources/site_b.json";
 import dummy from "../../static/sprite/dummy.png";
 import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 
 const Images = () => {
   const idleNodeImages = useIdleStore((state) => state.images);
+  const nodeImages = useMainSceneStore(
+    (state) => state.activeNodeState.image_table_indices
+  );
 
-  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
   const currentScene = useSceneStore((state) => state.currentScene);
 
   const [imageScaleY, setImageScaleY] = useState(3.75);
@@ -27,8 +25,6 @@ const Images = () => {
 
   const currentSite = useSiteStore((state) => state.currentSite);
 
-  const siteData = currentSite === "a" ? site_a : site_b;
-
   const dummyTex = useLoader(THREE.TextureLoader, dummy);
 
   const mediaPercentageElapsed = useMediaStore(
@@ -40,17 +36,10 @@ const Images = () => {
     config: { duration: 300 },
   });
 
-  const activeLevel = useLevelStore((state) => state.activeLevel);
-  const activeLevelData: LevelType = useMemo(
-    () => siteData[activeLevel as keyof typeof siteData],
-    [activeLevel, siteData]
-  );
-
   useEffect(() => {
     let images;
     if (currentScene === "media" || currentScene === "tak") {
-      images = (siteData as SiteType)[activeLevel][activeNodeId]
+      images = nodeImages;
-        .image_table_indices;
     } else if (currentScene === "idle_media") {
       images = idleNodeImages;
     }
@@ -77,15 +66,7 @@ const Images = () => {
         }
       });
     }
-  }, [
+  }, [currentScene, currentSite, idleNodeImages, nodeImages]);
-    activeLevel,
-    activeLevelData,
-    activeNodeId,
-    currentScene,
-    currentSite,
-    idleNodeImages,
-    siteData,
-  ]);
 
   useEffect(() => {
     if (mediaPercentageElapsed === 0 && sceneImages[0]) {

src/components/MediaScene/MediaPlayer.tsx

@@ -6,19 +6,15 @@ import React, {
   useRef,
   useState,
 } from "react";
-import site_a from "../../resources/site_a.json";
-import site_b from "../../resources/site_b.json";
 import {
   useEndSceneStore,
   useIdleStore,
-  useLevelStore,
+  useMainSceneStore,
   useMediaStore,
-  useNodeStore,
   useSceneStore,
   useSiteStore,
 } from "../../store";
 import t from "../../static/webvtt/test.vtt";
-import { SiteType } from "../MainScene/SyncedComponents/Site";
 import endroll from "../../static/movie/ENDROLL1.STR[0].webm";
 import xa0001 from "../../static/audio/a/Xa0001.mp4";
 import xa0006 from "../../static/audio/a/Xa0006.mp4";
@@ -34,19 +30,17 @@ const MediaPlayer = () => {
   );
 
   const idleMedia = useIdleStore((state) => state.media);
+  const nodeMedia = useMainSceneStore((state) => state.activeNode.media_file);
 
-  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
+  const triggersFinalVideo = useMainSceneStore(
-  const activeLevel = useLevelStore((state) => state.activeLevel);
+    (state) => state.activeNode.triggers_final_video
+  );
 
   const requestRef = useRef();
   const videoRef = createRef<HTMLVideoElement>();
 
   const currentSite = useSiteStore((state) => state.currentSite);
 
-  const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
-    currentSite,
-  ]);
-
   // end scene specific stuff
   const endMediaPlayedCount = useEndSceneStore(
     (state) => state.mediaPlayedCount
@@ -76,10 +70,7 @@ const MediaPlayer = () => {
             if (currentScene === "end") {
               incrementEndMediaPlayedCount();
             } else {
-              if (
+              if (triggersFinalVideo === 1) {
-                (siteData as SiteType)[activeLevel][activeNodeId]
-                  .triggers_final_video === 1
-              ) {
                 resetEndMediaPlayedCount();
                 setScene("end");
               } else {
@@ -91,14 +82,12 @@ const MediaPlayer = () => {
       }
     }
   }, [
-    activeLevel,
-    activeNodeId,
     currentScene,
     incrementEndMediaPlayedCount,
     resetEndMediaPlayedCount,
     setPercentageElapsed,
     setScene,
-    siteData,
+    triggersFinalVideo,
     videoRef,
   ]);
 
@@ -140,8 +129,6 @@ const MediaPlayer = () => {
       }
     } else {
       if (currentScene === "media" || currentScene === "tak") {
-        const nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
-          .media_file;
         if (nodeMedia.includes("XA")) {
           import(
             "../../static/audio/" + currentSite + "/" + nodeMedia + ".ogg"
@@ -188,13 +175,11 @@ const MediaPlayer = () => {
       }
     }
   }, [
-    activeLevel,
-    activeNodeId,
     currentScene,
     currentSite,
     endMediaPlayedCount,
     idleMedia,
-    siteData,
+    nodeMedia,
     videoRef,
   ]);
 

src/components/MediaScene/Selectables/RightSide.tsx

@@ -1,26 +1,16 @@
 import React, { useCallback, useMemo } from "react";
-import {useLevelStore, useMediaWordStore, useNodeStore, useSiteStore} from "../../../store";
+import { useMainSceneStore, useMediaWordStore } from "../../../store";
 import Word from "./RightSide/Word";
-import { useSpring, a } from "@react-spring/three";
+import { a, useSpring } from "@react-spring/three";
 import word_position_states from "../../../resources/word_position_states.json";
 import * as THREE from "three";
-import site_a from "../../../resources/site_a.json";
-import { SiteType } from "../../MainScene/SyncedComponents/Site";
-import site_b from "../../../resources/site_b.json";
 
 type RightSideProps = {
   activeMediaComponent: string;
 };
 
 const RightSide = (props: RightSideProps) => {
-  const activeLevel = useLevelStore((state) => state.activeLevel);
+  const words = useMainSceneStore((state) => state.activeNode.words);
-  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
-
-  const currentSite = useSiteStore((state) => state.currentSite);
-
-  const siteData = currentSite === "a" ? site_a : site_b;
-
-  const words = (siteData as SiteType)[activeLevel][activeNodeId].words;
 
   const posStateIdx = useMediaWordStore(
     (state) => state.posStateIdx

src/components/TextRenderer/BigLetter.tsx

@@ -84,6 +84,7 @@ const BigLetter = memo(
       config: { duration: 200 },
     });
 
+    console.log('rend')
     return (
       <a.mesh
         position-x={letterState.xOffset}

src/core/StateManagers/EventManager.tsx

@@ -12,7 +12,6 @@ import {
   useMainSceneStore,
   useMediaStore,
   useMediaWordStore,
-  useNodeStore,
   usePauseStore,
   useSceneStore,
   useSiteStore,
@@ -62,8 +61,8 @@ const EventManager = () => {
 
   // main scene
   const currentSite = useSiteStore((state) => state.currentSite);
-  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
+  // const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
-  const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
+  // const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
   const siteTransformState = useSiteStore((state) => state.transformState);
   const activeLevel = useLevelStore((state) => state.activeLevel);
   const mainSubscene = useMainSceneStore((state) => state.subscene);
@@ -74,7 +73,7 @@ const EventManager = () => {
       pauseMatrixIdx,
     ])
   );
-  const gameProgress = useNodeStore((state) => state.gameProgress);
+  // const gameProgress = useNodeStore((state) => state.gameProgress);
 
   // media scene
   const mediaComponentMatrixIndices = useMediaStore(
@@ -199,13 +198,13 @@ const EventManager = () => {
               mainSubscene: mainSubscene,
               keyPress: keyPress,
               siteTransformState: siteTransformState,
-              activeNodeId: activeNodeId,
+              // activeNodeId: activeNodeId,
-              nodeMatrixIndices: nodeMatrixIndices,
+              // nodeMatrixIndices: nodeMatrixIndices,
               activeLevel: activeLevel,
               selectedLevel: selectedLevel,
               pauseMatrixIdx: pauseMatrixIdx,
               activePauseComponent: activePauseComponent,
-              gameProgress: gameProgress,
+              // gameProgress: gameProgress,
               currentSite: currentSite,
             });
             break;
@@ -246,13 +245,10 @@ const EventManager = () => {
       currentScene,
       mainSubscene,
       siteTransformState,
-      activeNodeId,
-      nodeMatrixIndices,
       activeLevel,
       selectedLevel,
       pauseMatrixIdx,
       activePauseComponent,
-      gameProgress,
       currentSite,
       activeMediaComponent,
       wordPosStateIdx,

src/core/StateManagers/GameManagers/GameLoader.tsx

@@ -1,9 +1,7 @@
 import { useCallback, useEffect } from "react";
 import {
-  useHudStore,
   useLevelStore,
   useMainSceneStore,
-  useNodeStore,
   useSiteSaveStore,
   useSiteStore,
 } from "../../../store";
@@ -35,13 +33,13 @@ const GameLoader = (props: StateManagerProps) => {
   const setCurrentSite = useSiteStore((state) => state.setCurrentSite);
 
   // node setter
-  const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState);
+  const setActiveNode = useMainSceneStore((state) => state.setNode);
-  const setNodeMatrixIndices = useNodeStore(
+  const setNodeMatrixIndices = useMainSceneStore(
     (state) => state.setNodeMatrixIndices
   );
 
   // node hud setter
-  const setHudId = useHudStore((state) => state.setId);
+  const setHud = useMainSceneStore((state) => state.setHud);
 
   const changeSite = useCallback(
     (site: string) => {
@@ -71,19 +69,19 @@ const GameLoader = (props: StateManagerProps) => {
       setBigText(targetYellowText);
 
       // load new site node
-      setActiveNodeState(siteToLoad.activeNodeId, "id");
+      setActiveNode(siteToLoad.activeNodeId);
       setNodeMatrixIndices(siteToLoad.nodeMatrixIndices);
 
       // load new site node hud
-      setHudId(siteToLoad.nodeHudId);
+      setHud(siteToLoad.nodeHudId);
     },
     [
       setActiveLevel,
-      setActiveNodeState,
+      setActiveNode,
       setBigTexPos,
       setBigText,
       setCurrentSite,
-      setHudId,
+      setHud,
       setNodeMatrixIndices,
       setSiteTransformState,
       siteASaveState,

src/core/StateManagers/MainSceneEventManager.tsx

@@ -3,7 +3,6 @@ import {
   useLevelSelectionStore,
   useLevelStore,
   useMainSceneStore,
-  useNodeStore,
   usePauseStore,
   useSiteStore,
 } from "../../store";
@@ -32,8 +31,8 @@ type MainSceneEventManagerProps = {
 const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
   // all the possible context needed to calculate new state
   const currentSite = useSiteStore((state) => state.currentSite);
-  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
+  const activeNodeId = useMainSceneStore((state) => state.activeNodeState.id);
-  const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
+  const nodeMatrixIndices = useMainSceneStore((state) => state.activeNodeMatrixIndices);
   const siteTransformState = useSiteStore((state) => state.transformState);
   const activeLevel = useLevelStore((state) => state.activeLevel);
   const mainSubscene = useMainSceneStore((state) => state.subscene);
@@ -44,7 +43,7 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
       pauseMatrixIdx,
     ])
   );
-  const gameProgress = useNodeStore((state) => state.gameProgress);
+  const gameProgress = useMainSceneStore((state) => state.gameProgress);
 
   const timePassedSinceLastKeyPress = useRef(-1);
 

src/core/StateManagers/MainSceneManagers/BigTextManager.tsx

@@ -1,10 +1,10 @@
 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 { useMainSceneStore } from "../../../store";
-import { SiteType } from "../../../components/MainScene/SyncedComponents/Site";
+import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
 import { StateManagerProps } from "../EventManager";
+import { HUDType } from "../../../components/MainScene/SyncedComponents/HUD";
 
 const BigTextManager = (props: StateManagerProps) => {
   const setText = useMainSceneStore((state) => state.setBigText);
@@ -13,17 +13,12 @@ const BigTextManager = (props: StateManagerProps) => {
   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 animateYellowTextWithMove = useCallback(
     (
       posXOffset: number,
       posYOffset: number,
-      newActiveHudId: string,
+      hud: HUDType,
-      newActiveNodeId: string,
+      node: NodeDataType | "UNKNOWN",
-      newLevel: string,
       delay: number
     ) => {
       // animate the letters to match that of site's
@@ -40,12 +35,9 @@ const BigTextManager = (props: StateManagerProps) => {
 
       setTimeout(() => {
         // animate it to new pos x/y
-        setPos(node_huds[newActiveHudId as keyof typeof node_huds].big_text);
+        setPos(hud.big_text);
         // set new text according to the node name
-        const targetText =
+        const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;
-          newActiveNodeId === "UNKNOWN"
-            ? "Unknown"
-            : (siteData as SiteType)[newLevel][newActiveNodeId].node_name;
 
         setText(targetText);
       }, 3000);
@@ -55,22 +47,22 @@ const BigTextManager = (props: StateManagerProps) => {
         setXOffset(0);
       }, 3900);
     },
-    [setPos, setText, setXOffset, siteData]
+    [setPos, setText, setXOffset]
   );
 
   const animateYellowTextWithoutMove = useCallback(
-    (newActiveHudId: string, newActiveNodeId: string, level: string) => {
+    (hud: HUDType, node: NodeDataType) => {
       // make current hud big text shrink
       setXOffset(-1);
 
       setTimeout(() => {
         // animate it to new pos x/y
-        setPos(node_huds[newActiveHudId as keyof typeof node_huds].big_text);
+        setPos(hud.big_text);
       }, 400);
 
       setTimeout(() => {
         // set new text according to the node name
-        setText((siteData as SiteType)[level][newActiveNodeId].node_name);
+        setText(node.node_name);
       }, 1000);
 
       setTimeout(() => {
@@ -78,7 +70,7 @@ const BigTextManager = (props: StateManagerProps) => {
         setXOffset(0);
       }, 1200);
     },
-    [setPos, setText, setXOffset, siteData]
+    [setPos, setText, setXOffset]
   );
 
   const initializeLevelSelection = useCallback(() => {
@@ -99,36 +91,33 @@ const BigTextManager = (props: StateManagerProps) => {
   }, [setColor, setPos, setText, setXOffset]);
 
   const levelSelectionBack = useCallback(
-    (activeNodeId: string, activeHudId: string, level: string) => {
+    (node: NodeDataType, hud: HUDType) => {
       setXOffset(-1);
 
       setTimeout(() => {
-        setPos(node_huds[activeHudId as keyof typeof node_huds].big_text);
+        setPos(hud.big_text);
       }, 400);
 
       setTimeout(() => {
         setColor("yellow");
-        setText((siteData as SiteType)[level][activeNodeId].node_name);
+        setText(node.node_name);
       }, 1000);
 
       setTimeout(() => {
         setXOffset(0);
       }, 1200);
     },
-    [setColor, setPos, setText, setXOffset, siteData]
+    [setColor, setPos, setText, setXOffset]
   );
 
   const toggleVisibleAfterLevelSelect = useCallback(
-    (activeNodeId: string, activeHudId: string, level: string) => {
+    (node: NodeDataType | "UNKNOWN", hud: HUDType) => {
       setVisible(false);
 
       setTimeout(() => {
-        setPos(node_huds[activeHudId as keyof typeof node_huds].big_text[0]);
+        setPos(hud.big_text[0]);
         setColor("yellow");
-        const targetText =
+        const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;
-          activeNodeId === "UNKNOWN"
-            ? "Unknown"
-            : (siteData as SiteType)[level][activeNodeId].node_name;
 
         setText(targetText);
       }, 400);
@@ -137,82 +126,46 @@ const BigTextManager = (props: StateManagerProps) => {
         setVisible(true);
       }, 3900);
     },
-    [setColor, setPos, setText, setVisible, siteData]
+    [setColor, setPos, setText, setVisible]
   );
 
   const dispatchObject = useCallback(
     (eventState: {
       event: string;
-      activeHudId: string;
+      hud: HUDType;
-      activeNodeId: string;
+      node: NodeDataType;
       level: string;
     }) => {
       switch (eventState.event) {
         case "site_up":
           return {
             action: animateYellowTextWithMove,
-            value: [
+            value: [0, -1.5, eventState.hud, eventState.node, 1300],
-              0,
-              -1.5,
-              eventState.activeHudId,
-              eventState.activeNodeId,
-              eventState.level,
-              1300,
-            ],
           };
         case "site_down":
           return {
             action: animateYellowTextWithMove,
-            value: [
+            value: [0, 1.5, eventState.hud, eventState.node, 1300],
-              0,
-              1.5,
-              eventState.activeHudId,
-              eventState.activeNodeId,
-              eventState.level,
-              1300,
-            ],
           };
         case "site_left":
           return {
             action: animateYellowTextWithMove,
-            value: [
+            value: [Math.PI / 4, 0, eventState.hud, eventState.node, 1100],
-              Math.PI / 4,
-              0,
-              eventState.activeHudId,
-              eventState.activeNodeId,
-              eventState.level,
-              1100,
-            ],
           };
         case "site_right":
           return {
             action: animateYellowTextWithMove,
-            value: [
+            value: [-Math.PI / 4, 0, eventState.hud, eventState.node, 1100],
-              -Math.PI / 4,
-              0,
-              eventState.activeHudId,
-              eventState.activeNodeId,
-              eventState.level,
-              1100,
-            ],
           };
         case "change_node":
           return {
             action: animateYellowTextWithoutMove,
-            value: [
+            value: [eventState.hud, eventState.node],
-              eventState.activeHudId,
-              eventState.activeNodeId,
-              eventState.level,
-            ],
           };
         case "level_selection_back":
           return {
             action: levelSelectionBack,
-            value: [
+            value: [eventState.node, eventState.hud],
-              eventState.activeNodeId,
-              eventState.activeHudId,
-              eventState.level,
-            ],
           };
         case "toggle_level_selection":
           return {
@@ -222,11 +175,7 @@ const BigTextManager = (props: StateManagerProps) => {
         case "select_level_down":
           return {
             action: toggleVisibleAfterLevelSelect,
-            value: [
+            value: [eventState.node, eventState.hud],
-              eventState.activeNodeId,
-              eventState.activeHudId,
-              eventState.level,
-            ],
           };
       }
     },

src/core/StateManagers/MainSceneManagers/LainManager.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from "react";
-import { useLainStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 import { StateManagerProps } from "../EventManager";
 
 const LainManager = (props: StateManagerProps) => {
-  const setLainMoveState = useLainStore((state) => state.setLainMoveState);
+  const setLainMoveState = useMainSceneStore((state) => state.setLainMoveState);
 
   const dispatchObject = useCallback(
     (eventState: { event: string }) => {

src/core/StateManagers/MainSceneManagers/NodeHUDManager.tsx

@@ -1,47 +1,48 @@
 import { useCallback, useEffect } from "react";
-import { useHudStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 import { StateManagerProps } from "../EventManager";
+import {HUDType} from "../../../components/MainScene/SyncedComponents/HUD";
 
 const NodeHUDManager = (props: StateManagerProps) => {
-  const setId = useHudStore((state) => state.setId);
+  const set = useMainSceneStore((state) => state.setHud);
-  const toggleActive = useHudStore((state) => state.toggleActive);
+  const toggleActive = useMainSceneStore((state) => state.toggleHudActive);
 
   const moveAndChangeNode = useCallback(
-    (targetNodeHudId: string) => {
+    (hud: HUDType) => {
       toggleActive();
 
       setTimeout(() => {
-        setId(targetNodeHudId);
+        set(hud);
         toggleActive();
       }, 3900);
     },
-    [setId, toggleActive]
+    [set, toggleActive]
   );
 
   const changeNode = useCallback(
-    (targetNodeHudId: string) => {
+    (hud: HUDType) => {
       toggleActive();
 
       setTimeout(() => {
-        setId(targetNodeHudId);
+        set(hud);
         toggleActive();
       }, 500);
     },
-    [setId, toggleActive]
+    [set, toggleActive]
   );
 
   const selectLevelAnimation = useCallback(
-    (targetNodeHudId: string) => {
+    (hud: HUDType) => {
       setTimeout(() => {
-        setId(targetNodeHudId);
+        set(hud);
         toggleActive();
       }, 3900);
     },
-    [setId, toggleActive]
+    [set, toggleActive]
   );
 
   const dispatchObject = useCallback(
-    (eventState: { event: string; activeHudId: string }) => {
+    (eventState: { event: string; hud: HUDType }) => {
       switch (eventState.event) {
         case "site_up":
         case "site_down":
@@ -49,12 +50,12 @@ const NodeHUDManager = (props: StateManagerProps) => {
         case "site_right":
           return {
             action: moveAndChangeNode,
-            value: [eventState.activeHudId],
+            value: [eventState.hud],
           };
         case "change_node":
           return {
             action: changeNode,
-            value: [eventState.activeHudId],
+            value: [eventState.hud],
           };
         case "toggle_level_selection":
         case "level_selection_back":
@@ -65,7 +66,7 @@ const NodeHUDManager = (props: StateManagerProps) => {
         case "select_level_down":
           return {
             action: selectLevelAnimation,
-            value: [eventState.activeHudId],
+            value: [eventState.hud],
           };
       }
     },

src/core/StateManagers/MainSceneManagers/NodeManager.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useEffect } from "react";
-import { useNodeStore } from "../../../store";
+import { useMainSceneStore } from "../../../store";
 import { StateManagerProps } from "../EventManager";
+import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
 
 const NodeManager = (props: StateManagerProps) => {
-  const setActiveNodeState = useNodeStore((state) => state.setActiveNodeState);
+  const setActiveNode = useMainSceneStore((state) => state.setNode);
-  const setNodeMatrixIndices = useNodeStore(
+  const setActiveNodeState = useMainSceneStore((state) => state.setNodeState);
+  const setNodeMatrixIndices = useMainSceneStore(
     (state) => state.setNodeMatrixIndices
   );
 
@@ -173,7 +175,7 @@ const NodeManager = (props: StateManagerProps) => {
 
   const updateActiveNode = useCallback(
     (
-      newActiveNodeId: string,
+      node: NodeDataType,
       newNodeMatrixIndices: {
         matrixIdx: number;
         rowIdx: number;
@@ -183,17 +185,17 @@ const NodeManager = (props: StateManagerProps) => {
       delay?: number
     ) => {
       setTimeout(() => {
-        setActiveNodeState(newActiveNodeId, "id");
+        setActiveNode(node);
         setNodeMatrixIndices(newNodeMatrixIndices);
       }, delay);
     },
-    [setActiveNodeState, setNodeMatrixIndices]
+    [setActiveNode, setNodeMatrixIndices]
   );
 
   const dispatchObject = useCallback(
     (eventState: {
       event: string;
-      activeNodeId: string;
+      node: NodeDataType;
       nodeMatrixIndices: {
         matrixIdx: number;
         rowIdx: number;
@@ -202,6 +204,7 @@ const NodeManager = (props: StateManagerProps) => {
       siteRotY: number;
       idleNodeId?: string;
     }) => {
+      console.log(eventState.node);
       switch (eventState.event) {
         case "site_up":
         case "site_down":
@@ -211,17 +214,12 @@ const NodeManager = (props: StateManagerProps) => {
         case "select_level_down":
           return {
             action: updateActiveNode,
-            value: [
+            value: [eventState.node, eventState.nodeMatrixIndices, true, 3900],
-              eventState.activeNodeId,
-              eventState.nodeMatrixIndices,
-              true,
-              3900,
-            ],
           };
         case "change_node":
           return {
             action: updateActiveNode,
-            value: [eventState.activeNodeId, eventState.nodeMatrixIndices],
+            value: [eventState.node, eventState.nodeMatrixIndices],
           };
         case "throw_node_media":
         case "throw_node_gate":

src/core/mainSceneEventHandler.ts

@@ -1,7 +1,4 @@
-import site_a from "../resources/site_a.json";
+import nodeSelector, { getNode, getNodeHud } from "./nodeSelector";
-import site_b from "../resources/site_b.json";
-import nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector";
-import { SiteType } from "../components/MainScene/SyncedComponents/Site";
 
 const handleMainSceneEvent = (gameContext: any) => {
   let event;
@@ -17,8 +14,8 @@ const handleMainSceneEvent = (gameContext: any) => {
   const siteASaveState = gameContext.siteASaveState;
   const siteBSaveState = gameContext.siteBSaveState;
 
-  let activeNodeId = gameContext.activeNodeId;
+  let activeNode = gameContext.activeNode;
-  let activeHudId;
+  let activeHud;
   let nodeMatrixIndices = gameContext.nodeMatrixIndices;
   let level = parseInt(gameContext.activeLevel);
   let siteRotY = gameContext.siteTransformState.rotY;
@@ -34,7 +31,7 @@ const handleMainSceneEvent = (gameContext: any) => {
       case "UP":
         selectedNodeData = nodeSelector({
           action: `site_${keyPress.toLowerCase()}`,
-          activeId: activeNodeId,
+          activeId: activeNode,
           nodeMatrixIndices: nodeMatrixIndices,
           level: level,
           siteRotY: siteRotY,
@@ -45,12 +42,12 @@ const handleMainSceneEvent = (gameContext: any) => {
 
         if (selectedNodeData) {
           event = selectedNodeData.event;
-          activeNodeId = selectedNodeData.newActiveNodeId;
+          activeNode = selectedNodeData.node;
           nodeMatrixIndices = selectedNodeData.newNodeMatrixIndices;
           siteRotY = selectedNodeData.newSiteRotY;
           sitePosY = selectedNodeData.newSitePosY;
           level = selectedNodeData.newLevel;
-          activeHudId = selectedNodeData.newActiveHudId;
+          activeHud = selectedNodeData.newActiveHud;
         }
 
         break;
@@ -58,14 +55,9 @@ 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.
-        activeNodeId = getNodeId(level, nodeMatrixIndices);
+        activeNode = getNode(level, nodeMatrixIndices, currentSite);
 
-        const siteData = currentSite === "a" ? site_a : site_b;
+        const nodeType = activeNode.type;
-
-        const nodeData = (siteData as SiteType)[gameContext.activeLevel][
-          activeNodeId
-        ];
-        const nodeType = nodeData.type;
 
         const eventAnimation = Math.random() < 0.4 ? "rip_node" : "throw_node";
 
@@ -79,7 +71,7 @@ const handleMainSceneEvent = (gameContext: any) => {
             scene = "media";
             break;
           case 6:
-            if (nodeData.node_name.substr(0, 3) === "TaK") {
+            if (activeNode.node_name.substr(0, 3) === "TaK") {
               event = `${eventAnimation}_tak`;
               scene = "tak";
             } else {
@@ -112,8 +104,8 @@ const handleMainSceneEvent = (gameContext: any) => {
       siteRotY: siteRotY,
       level: level.toString().padStart(2, "0"),
       scene: scene,
-      activeNodeId: activeNodeId,
+      node: activeNode,
-      activeHudId: activeHudId,
+      hud: activeHud,
     };
   } else if (subscene === "level_selection") {
     switch (keyPress) {
@@ -142,14 +134,13 @@ const handleMainSceneEvent = (gameContext: any) => {
       case "X":
         return {
           event: "level_selection_back",
-          activeNodeId: getNodeId(level, nodeMatrixIndices),
+          node: getNode(level, nodeMatrixIndices, currentSite),
-          activeHudId: getNodeHudId(nodeMatrixIndices),
+          hud: getNodeHud(nodeMatrixIndices),
-          level: level.toString().padStart(2, "0"),
         };
       case "CIRCLE":
         const selectedNodeData = nodeSelector({
           action: "select_level",
-          activeId: activeNodeId,
+          activeId: activeNode,
           nodeMatrixIndices: nodeMatrixIndices,
           level: selectedLevel,
           siteRotY: siteRotY,
@@ -165,8 +156,8 @@ const handleMainSceneEvent = (gameContext: any) => {
           return {
             event: event,
             level: selectedLevel.toString().padStart(2, "0"),
-            activeNodeId: selectedNodeData.newActiveNodeId,
+            activeNodeId: selectedNodeData.node,
-            activeHudId: selectedNodeData.newActiveHudId,
+            activeHud: selectedNodeData.newActiveHud,
             nodeMatrixIndices: selectedNodeData.newNodeMatrixIndices,
             sitePosY: -selectedNodeData.newSitePosY,
           };
@@ -191,9 +182,9 @@ const handleMainSceneEvent = (gameContext: any) => {
           event: `pause_${activePauseComponent}_select`,
           currentSitePosY: sitePosY,
           currentSiteRotY: siteRotY,
-          currentNodeId: activeNodeId,
+          currentNodeId: activeNode,
           currentNodeMatrixIndices: nodeMatrixIndices,
-          currentHudId: getNodeHudId(nodeMatrixIndices),
+          currentHud: getNodeHud(nodeMatrixIndices),
           currentLevel: level.toString().padStart(2, "0"),
           site: currentSite === "a" ? "b" : "a",
         };

src/core/nodeSelector.ts

@@ -1,9 +1,13 @@
 import node_matrices from "../resources/node_matrices.json";
 import site_a from "../resources/site_a.json";
 import site_b from "../resources/site_b.json";
-import { SiteType } from "../components/MainScene/SyncedComponents/Site";
+import {
+  NodeDataType,
+  SiteType,
+} from "../components/MainScene/SyncedComponents/Site";
 import unlocked_nodes from "../resources/initial_progress.json";
 import level_y_values from "../resources/level_y_values.json";
+import node_huds from "../resources/node_huds.json";
 
 type NodeSelectorContext = {
   action: string;
@@ -31,41 +35,45 @@ const hudAssocs = {
   "23": "fg_hud_6",
 };
 
-export const getNodeId = (
+export const getNode = (
   level: number,
   nodeMatrixIndices: {
     matrixIdx: number;
     rowIdx: number;
     colIdx: number;
-  }
+  },
+  currentSite: string
 ) => {
-  return (
+  const siteData = currentSite === "a" ? site_a : site_b;
-    level.toString().padStart(2, "0") +
+
+  const formattedLevel = level.toString().padStart(2, "0");
+  const nodePos =
     node_matrices[
       nodeMatrixIndices.matrixIdx.toString() as keyof typeof node_matrices
-    ][nodeMatrixIndices.rowIdx][nodeMatrixIndices.colIdx]
+    ][nodeMatrixIndices.rowIdx][nodeMatrixIndices.colIdx];
-  );
+
+  const id = formattedLevel + nodePos;
+
+  return (siteData as SiteType)[formattedLevel][id];
 };
 
-export const getNodeHudId = (nodeMatrixIndices: {
+export const getNodeHud = (nodeMatrixIndices: {
   matrixIdx: number;
   rowIdx: number;
   colIdx: number;
 }) =>
+  node_huds[
     hudAssocs[
       `${nodeMatrixIndices.rowIdx}${nodeMatrixIndices.colIdx}` as keyof typeof hudAssocs
+    ] as keyof typeof node_huds
   ];
 
 export const isNodeVisible = (
-  nodeId: string,
+  node: NodeDataType,
-  gameProgress: typeof unlocked_nodes,
+  gameProgress: typeof unlocked_nodes
-  currentSite: string
 ) => {
-  const siteData = currentSite === "a" ? site_a : site_b;
+  if (node) {
-  const nodeLevel = nodeId.substr(0, 2);
+    const unlockedBy = node.unlocked_by;
-  const nodeData = (siteData as SiteType)[nodeLevel][nodeId];
-  if (nodeData) {
-    const unlockedBy = nodeData.unlocked_by;
 
     let unlocked;
     if (unlockedBy === "") unlocked = true;
@@ -77,7 +85,7 @@ export const isNodeVisible = (
 
     return (
       unlocked &&
-      gameProgress[nodeData.node_name as keyof typeof gameProgress].is_visible
+      gameProgress[node.node_name as keyof typeof gameProgress].is_visible
     );
   } else {
     return false;
@@ -106,9 +114,13 @@ const findNodeAfterLevelSelection = (
 
   newMatIndices.rowIdx = 0;
 
-  let newNodeId = getNodeId(targetLevel, newMatIndices);
+  let newNode: NodeDataType | "UNKNOWN" = getNode(
+    targetLevel,
+    newMatIndices,
+    currentSite
+  );
 
-  while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
+  while (!isNodeVisible(newNode, gameProgress)) {
     if (triedCols.length < 4) {
       triedCols.push(newMatIndices.colIdx);
       const colToTry = tryCol(newMatIndices.colIdx, triedCols);
@@ -118,7 +130,7 @@ const findNodeAfterLevelSelection = (
     } else {
       if (newMatIndices.rowIdx === 2) {
         newMatIndices.colIdx = nodeMatrixIndices.colIdx;
-        newNodeId = "UNKNOWN";
+        newNode = "UNKNOWN";
         break;
       } else {
         newMatIndices.rowIdx++;
@@ -126,15 +138,15 @@ const findNodeAfterLevelSelection = (
         newMatIndices.colIdx = 0;
       }
     }
-    newNodeId = getNodeId(targetLevel, newMatIndices);
+    newNode = getNode(targetLevel, newMatIndices, currentSite);
   }
 
-  const newNodeHudId = getNodeHudId(newMatIndices);
+  const newNodeHud = getNodeHud(newMatIndices);
 
   return {
     newLevel: targetLevel,
-    newNodeId: newNodeId,
+    node: newNode,
-    newNodeHudId: newNodeHudId,
+    newNodeHud: newNodeHud,
     newNodeMatrixIndices: newMatIndices,
     newSitePosY:
       level_y_values[
@@ -150,7 +162,7 @@ const findNodeVertical = (
   nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number },
   currentSite: string
 ) => {
-  let newNodeId;
+  let newNode: NodeDataType | "UNKNOWN";
   let newLevel = level;
   let newMatIndices = Object.assign({}, nodeMatrixIndices);
 
@@ -164,9 +176,9 @@ const findNodeVertical = (
       newLevel = level - 1;
     }
 
-    newNodeId = getNodeId(newLevel, newMatIndices);
+    newNode = getNode(newLevel, newMatIndices, currentSite);
 
-    while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
+    while (!isNodeVisible(newNode, gameProgress)) {
       if (triedCols.length < 4) {
         triedCols.push(newMatIndices.colIdx);
         const colToTry = tryCol(newMatIndices.colIdx, triedCols);
@@ -176,7 +188,7 @@ const findNodeVertical = (
       } else {
         if (newMatIndices.rowIdx === 2) {
           if (newLevel === level - 1) {
-            newNodeId = "UNKNOWN";
+            newNode = "UNKNOWN";
             newMatIndices.colIdx = nodeMatrixIndices.colIdx;
             break;
           }
@@ -188,7 +200,7 @@ const findNodeVertical = (
           triedCols = [];
         }
       }
-      newNodeId = getNodeId(newLevel, newMatIndices);
+      newNode = getNode(newLevel, newMatIndices, currentSite);
     }
   } else if (direction === "up") {
     newMatIndices.rowIdx--;
@@ -200,9 +212,9 @@ const findNodeVertical = (
       newLevel = level + 1;
     }
 
-    newNodeId = getNodeId(newLevel, newMatIndices);
+    newNode = getNode(newLevel, newMatIndices, currentSite);
 
-    while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
+    while (!isNodeVisible(newNode, gameProgress)) {
       if (triedCols.length < 4) {
         triedCols.push(newMatIndices.colIdx);
         const colToTry = tryCol(newMatIndices.colIdx, triedCols);
@@ -212,7 +224,7 @@ const findNodeVertical = (
       } else {
         if (newMatIndices.rowIdx === 0) {
           if (newLevel === level + 1) {
-            newNodeId = "UNKNOWN";
+            newNode = "UNKNOWN";
             newMatIndices.colIdx = nodeMatrixIndices.colIdx;
             break;
           }
@@ -224,13 +236,13 @@ const findNodeVertical = (
           triedCols = [];
         }
       }
-      newNodeId = getNodeId(newLevel, newMatIndices);
+      newNode = getNode(newLevel, newMatIndices, currentSite);
     }
   }
 
   return {
-    newNodeId: newNodeId,
+    node: newNode!,
-    newNodeHudId: getNodeHudId(newMatIndices),
+    newNodeHud: getNodeHud(newMatIndices),
     newLevel: newLevel,
     newNodeMatrixIndices: newMatIndices,
   };
@@ -244,7 +256,7 @@ const findNodeHorizontal = (
   nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number },
   currentSite: string
 ) => {
-  let newNodeId;
+  let newNode: NodeDataType | "UNKNOWN";
   let newMatIndices = Object.assign({}, nodeMatrixIndices);
 
   let didMove = false;
@@ -261,9 +273,9 @@ const findNodeHorizontal = (
         newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
     }
 
-    newNodeId = getNodeId(level, newMatIndices);
+    newNode = getNode(level, newMatIndices, currentSite);
 
-    while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
+    while (!isNodeVisible(newNode, gameProgress)) {
       if (triedRows.length < 3) {
         triedRows.push(newMatIndices.rowIdx);
         const rowToTry = tryRow(newMatIndices.rowIdx, triedRows);
@@ -279,7 +291,7 @@ const findNodeHorizontal = (
             newMatIndices.colIdx = nodeMatrixIndices.colIdx;
             newMatIndices.matrixIdx =
               newMatIndices.matrixIdx + 1 > 8 ? 1 : newMatIndices.matrixIdx + 1;
-            newNodeId = "UNKNOWN";
+            newNode = "UNKNOWN";
             break;
           } else {
             didMove = true;
@@ -293,7 +305,7 @@ const findNodeHorizontal = (
           newMatIndices.rowIdx = 0;
         }
       }
-      newNodeId = getNodeId(level, newMatIndices);
+      newNode = getNode(level, newMatIndices, currentSite);
     }
   } else if (direction === "right") {
     newMatIndices.colIdx++;
@@ -307,9 +319,9 @@ const findNodeHorizontal = (
         newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
     }
 
-    newNodeId = getNodeId(level, newMatIndices);
+    newNode = getNode(level, newMatIndices, currentSite);
 
-    while (!isNodeVisible(newNodeId, gameProgress, currentSite)) {
+    while (!isNodeVisible(newNode, gameProgress)) {
       if (triedRows.length < 3) {
         triedRows.push(newMatIndices.rowIdx);
         const rowToTry = tryRow(newMatIndices.rowIdx, triedRows);
@@ -325,7 +337,7 @@ const findNodeHorizontal = (
             newMatIndices.colIdx = nodeMatrixIndices.colIdx;
             newMatIndices.matrixIdx =
               newMatIndices.matrixIdx - 1 < 1 ? 8 : newMatIndices.matrixIdx - 1;
-            newNodeId = "UNKNOWN";
+            newNode = "UNKNOWN";
             break;
           } else {
             if (didMove) return;
@@ -344,16 +356,16 @@ const findNodeHorizontal = (
           newMatIndices.rowIdx = 0;
         }
       }
-      newNodeId = getNodeId(level, newMatIndices);
+      newNode = getNode(level, newMatIndices, currentSite);
     }
   }
 
-  const newNodeHudId = getNodeHudId(newMatIndices);
+  const newNodeHud = getNodeHud(newMatIndices);
 
   return {
     didMove: didMove,
-    newNodeId: newNodeId,
+    node: newNode!,
-    newNodeHudId: newNodeHudId,
+    newNodeHud: newNodeHud,
     newNodeMatrixIndices: newMatIndices,
   };
 };
@@ -380,8 +392,8 @@ const nodeSelector = (context: NodeSelectorContext) => {
 
         return {
           event: newNodeData.didMove ? context.action : "change_node",
-          newActiveNodeId: newNodeData.newNodeId,
+          node: newNodeData.node,
-          newActiveHudId: newNodeData.newNodeHudId,
+          newActiveHud: newNodeData.newNodeHud,
           newNodeMatrixIndices: newNodeData.newNodeMatrixIndices,
           newSiteRotY: newNodeData.didMove
             ? context.siteRotY + siteRotYModifier
@@ -408,9 +420,9 @@ const nodeSelector = (context: NodeSelectorContext) => {
         const sitePosYModifier = move === "up" ? -1.5 : 1.5;
         return {
           event: didMove ? context.action : "change_node",
-          newActiveNodeId: newNodeData.newNodeId,
+          node: newNodeData.node,
           newNodeMatrixIndices: newNodeData.newNodeMatrixIndices,
-          newActiveHudId: newNodeData.newNodeHudId,
+          newActiveHud: newNodeData.newNodeHud,
           newSiteRotY: context.siteRotY,
           newSitePosY: didMove
             ? context.sitePosY + sitePosYModifier
@@ -429,9 +441,9 @@ const nodeSelector = (context: NodeSelectorContext) => {
 
       if (newNodeData) {
         return {
-          newActiveNodeId: newNodeData.newNodeId,
+          node: newNodeData.node,
           newNodeMatrixIndices: newNodeData.newNodeMatrixIndices,
-          newActiveHudId: newNodeData.newNodeHudId,
+          newActiveHud: newNodeData.newNodeHud,
           newSiteRotY: context.siteRotY,
           newLevel: newNodeData.newLevel,
           newSitePosY: newNodeData.newSitePosY,

src/scenes/MediaScene.tsx

@@ -1,12 +1,5 @@
 import React, { useCallback, useEffect } from "react";
-import {
+import { useMainSceneStore, useMediaStore } from "../store";
-  useIdleStore,
-  useLevelStore,
-  useMediaStore,
-  useNodeStore,
-  useSceneStore,
-  useSiteStore,
-} from "../store";
 import LeftSide from "../components/MediaScene/Selectables/LeftSide";
 import RightSide from "../components/MediaScene/Selectables/RightSide";
 import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
@@ -15,29 +8,20 @@ import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
 import Lof from "../components/MediaScene/Lof";
 import Images from "../components/MediaScene/Images";
 import MediumLetter from "../components/TextRenderer/MediumLetter";
-import site_a from "../resources/site_a.json";
-import { SiteType } from "../components/MainScene/SyncedComponents/Site";
 import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
-import site_b from "../resources/site_b.json";
 import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
 
 const MediaScene = () => {
-  const currentScene = useSceneStore((state) => state.currentScene);
   const mediaComponentMatrixIndices = useMediaStore(
     (state) => state.componentMatrixIndices
   );
 
-  const idleMedia = useIdleStore((state) => state.media);
+  const activeNodeName = useMainSceneStore((state) =>
-  const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
+    state.activeNode.node_name.split("")
-  const activeLevel = useLevelStore((state) => state.activeLevel);
+  );
-
+  const activeNodeMedia = useMainSceneStore(
-  const currentSite = useSiteStore((state) => state.currentSite);
+    (state) => state.activeNode.media_file
-
+  );
-  const siteData = currentSite === "a" ? site_a : site_b;
-
-  const activeNodeData = (siteData as SiteType)[activeLevel][activeNodeId];
-  const activeNodeName = activeNodeData.node_name;
-  const activeNodeMedia = activeNodeData.media_file;
 
   const activeMediaComponent = useMediaStore(
     useCallback(
@@ -70,7 +54,7 @@ const MediaScene = () => {
           <NodeNameContainer />
         </group>
         <group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
-          {activeNodeName.split("").map((letter, idx) => (
+          {activeNodeName.map((letter: string, idx: number) => (
             <MediumLetter letter={letter} letterIdx={idx} key={idx} />
           ))}
         </group>

src/store.ts

@@ -5,6 +5,7 @@ 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";
+import { HUDType } from "./components/MainScene/SyncedComponents/HUD";
 
 type EndState = {
   mediaPlayedCount: number;
@@ -86,15 +87,6 @@ type LainState = {
   setLainMoveState: (to: string) => void;
 };
 
-type StarfieldState = {
-  introStarfieldVisible: boolean;
-  mainStarfieldVisible: boolean;
-  mainStarfieldBoostVal: number;
-  setIntroStarfieldVisible: (to: boolean) => void;
-  setMainStarfieldVisible: (to: boolean) => void;
-  setMainStarfieldBoostVal: (to: number) => void;
-};
-
 type SiteState = {
   currentSite: "a" | "b";
   transformState: {
@@ -241,44 +233,6 @@ export const useMediaBigTextStore = create(
   )
 );
 
-export const useHudStore = create<HUDState>((set) => ({
-  id: "fg_hud_1",
-  active: 1,
-  setId: (to) => set(() => ({ id: to })),
-  toggleActive: () => set((state) => ({ active: Number(!state.active) })),
-}));
-
-export const useNodeStore = create(
-  combine(
-    {
-      activeNodeState: {
-        id: "0422",
-        posX: 0,
-        posZ: 0,
-        rotZ: 0,
-        posY: 0,
-        interactedWith: false,
-        exploding: false,
-        shrinking: false,
-        visible: true,
-      },
-      nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
-      gameProgress: game_progress,
-    } as NodeState,
-    (set) => ({
-      setActiveNodeState: (to: number | boolean | string, at: string) =>
-        set((state) => ({
-          activeNodeState: { ...state.activeNodeState, [at]: to },
-        })),
-      setNodeMatrixIndices: (to: {
-        matrixIdx: number;
-        rowIdx: number;
-        colIdx: number;
-      }) => set(() => ({ nodeMatrixIndices: to })),
-    })
-  )
-);
-
 export const useIdleStore = create<IdleState>((set) => ({
   media: "INS01.STR",
   // this may be undefined depending on whether or not the media is audio or not
@@ -287,20 +241,6 @@ export const useIdleStore = create<IdleState>((set) => ({
   setImages: (to) => set(() => ({ images: to })),
 }));
 
-export const useLainStore = create<LainState>((set) => ({
-  lainMoveState: "standing",
-  setLainMoveState: (to) => set(() => ({ lainMoveState: to })),
-}));
-
-export const useStarfieldStore = create<StarfieldState>((set) => ({
-  introStarfieldVisible: false,
-  mainStarfieldVisible: true,
-  mainStarfieldBoostVal: 0.2,
-  setIntroStarfieldVisible: (to) => set(() => ({ introStarfieldVisible: to })),
-  setMainStarfieldVisible: (to) => set(() => ({ mainStarfieldVisible: to })),
-  setMainStarfieldBoostVal: (to) => set(() => ({ mainStarfieldBoostVal: to })),
-}));
-
 export const useSiteStore = create(
   combine(
     {
@@ -468,11 +408,56 @@ export const useMainSceneStore = create(
       bigTextXOffset: 0,
 
       // hud
-      hudId: "fg_hud_1",
+      hud: {
+        mirrored: 0,
+        long: {
+          position: [-0.45, 0.15, -8.6],
+          initial_position: [-1.45, 0.15, -8.6],
+        },
+        boring: {
+          position: [0.48, 0.174, -8.6],
+          initial_position: [1.48, 0.174, -8.6],
+        },
+        big: {
+          position: [0.36, 0.13, -8.6],
+          initial_position: [1.36, 0.13, -8.6],
+        },
+        big_text: [-0.35, 0.23, -8.7],
+        medium_text: {
+          position: [0.18, 0.16, -8.7],
+          initial_position: [1.18, 0.16, -8.7],
+        },
+      },
       hudActive: 1,
 
       // nodes
-      activeNodeId: "0422",
+      activeNode: {
+        image_table_indices: {
+          "1": "93",
+          "2": "356",
+          "3": "562",
+        },
+        media_file: "LAIN08.XA[26]",
+        node_name: "Tda028",
+        protocol_lines: {
+          "1": "TOUKO's_DIARY",
+          "2": "authorized_il",
+          "3": "decoded file:t",
+          "4": "ftp/tl.S_server",
+        },
+        required_final_video_viewcount: 0,
+        site: "A",
+        title: "TOUKO's DIARY",
+        triggers_final_video: 0,
+        type: 2,
+        unlocked_by: "",
+        upgrade_requirement: 0,
+        words: {
+          "1": "eye",
+          "2": "quiet",
+          "3": "hallucination",
+        },
+      },
       activeNodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
       activeNodePos: [0, 0, 0],
       activeNodeRot: [0, 0, 0],
@@ -486,11 +471,6 @@ export const useMainSceneStore = create(
       // lain
       lainMoveState: "standing",
 
-      // starfield
-      mainStarfieldVisible: true,
-      introStarfieldVisible: false,
-      mainStarBoostVal: 0.2,
-
       // site
       activeSite: "a",
       siteRot: [0, 0, 0],
@@ -535,20 +515,20 @@ export const useMainSceneStore = create(
       setBigTextXOffset: (to: number) => set(() => ({ bigTextXOffset: to })),
 
       // hud setters
-      setHudId: (to: string) => set(() => ({ hudId: to })),
+      setHud: (to: HUDType) => set(() => ({ hud: to })),
       toggleHudActive: () =>
         set((state) => ({ hudActive: Number(!state.hudActive) })),
 
       // node setters
-      setActiveNodeId: (to: string) => set(() => ({ activeNodeId: to })),
+      setNode: (to: string) => set(() => ({ activeNode: to })),
-      setActiveNodeMatrixIndices: (to: {
+      setNodeMatrixIndices: (to: {
         matrixIdx: number;
         rowIdx: number;
         colIdx: number;
       }) => set(() => ({ activeNodeMatrixIndices: to })),
-      setActiveNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
+      setNodePos: (to: number[]) => set(() => ({ activeNodePos: to })),
-      setActiveNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
+      setNodeRot: (to: number[]) => set(() => ({ activeNodeRot: to })),
-      setActiveNodeState: (
+      setNodeState: (
         to: boolean,
         at: "interactedWith" | "visible" | "exploding" | "shrinking"
       ) =>
@@ -559,14 +539,6 @@ export const useMainSceneStore = create(
       // 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 })),