more bugfixing

src/components/MainScene/Site.tsx

@@ -1,9 +1,19 @@
-import React, { memo, Suspense, useEffect, useState } from "react";
+import React, {
+  memo,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { a, useSpring } from "@react-spring/three";
-import { useSiteStore } from "../../store";
+import { useLevelStore, useNodeStore, useSiteStore } from "../../store";
 import ActiveLevelNodes from "./Site/ActiveLevelNodes";
 import InactiveLevelNodes from "./Site/InactiveLevelNodes";
 import Rings from "./Site/Rings";
+import site_a from "../../resources/site_a.json";
+import site_b from "../../resources/site_b.json";
+import game_progress from "../../resources/initial_progress.json";
 
 export type NodeDataType = {
   image_table_indices: { 1: string; 2: string; 3: string };
@@ -28,6 +38,13 @@ export type SiteType = {
   [key: string]: LevelType;
 };
 
+export type NodesProps = {
+  currentSite: "a" | "b";
+  activeLevel: string;
+  siteData: typeof site_a | typeof site_b;
+  gameProgress: typeof game_progress;
+};
+
 const Site = () => {
   const siteTransformState = useSiteStore((state) => state.transformState);
   const introAnim = useSiteStore((state) => state.introAnim);
@@ -46,6 +63,16 @@ const Site = () => {
     config: { duration: 3900 },
   });
 
+  const gameProgress = useNodeStore((state) => state.gameProgress);
+
+  const currentSite = useSiteStore((state) => state.currentSite);
+
+  const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
+    currentSite,
+  ]);
+
+  const activeLevel = useLevelStore((state) => state.activeLevel);
+
   return (
     <Suspense fallback={null}>
       <a.group
@@ -57,8 +84,18 @@ const Site = () => {
             rotation-y={siteState.siteRotY}
             position-y={siteState.sitePosY}
           >
-            <ActiveLevelNodes />
-            <InactiveLevelNodes />
+            <ActiveLevelNodes
+              currentSite={currentSite}
+              activeLevel={activeLevel}
+              siteData={siteData}
+              gameProgress={gameProgress}
+            />
+            <InactiveLevelNodes
+              currentSite={currentSite}
+              activeLevel={activeLevel}
+              siteData={siteData}
+              gameProgress={gameProgress}
+            />
             <Rings />
           </a.group>
         </a.group>

src/components/MainScene/Site/ActiveLevelNodes.tsx

@@ -1,30 +1,25 @@
-import React, { useMemo } from "react";
+import React, {useEffect, useMemo} from "react";
 import Node from "../Node";
 import node_positions from "../../../resources/node_positions.json";
-import site_a from "../../../resources/site_a.json";
-import { useLevelStore, useNodeStore, useSiteStore } from "../../../store";
+import { useNodeStore } from "../../../store";
 import { isNodeVisible } from "../../../core/nodeSelector";
-import site_b from "../../../resources/site_b.json";
-
-const ActiveLevelNodes = () => {
-  const gameProgress = useNodeStore((state) => state.gameProgress);
-
-  const currentSite = useSiteStore((state) => state.currentSite);
-
-  const siteData = currentSite === "a" ? site_a : site_b;
+import { NodesProps } from "../Site";
 
+const ActiveLevelNodes = (props: NodesProps) => {
   const activeNodeState = useNodeStore((state) => state.activeNodeState);
-  const activeLevel = useLevelStore((state) => state.activeLevel);
 
   const activeLevelNodes = useMemo(
-    () => siteData[activeLevel as keyof typeof siteData],
-    [activeLevel, siteData]
+    () => props.siteData[props.activeLevel as keyof typeof props.siteData],
+    [props]
   );
 
+  useEffect(() => {
+    console.log("sex")
+  })
   return (
     <>
       {Object.entries(activeLevelNodes).map((node: [string, any]) => {
-        if (isNodeVisible(node[0], gameProgress, currentSite)) {
+        if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
           return (
             <Node
               sprite={node[1].node_name}

src/components/MainScene/Site/InactiveLevelNodes.tsx

@@ -1,21 +1,13 @@
 import React, { useMemo } from "react";
-import site_a from "../../../resources/site_a.json";
-import site_b from "../../../resources/site_b.json";
 import node_positions from "../../../resources/node_positions.json";
 import Node from "../Node";
-import { useLevelStore, useNodeStore, useSiteStore } from "../../../store";
 import { isNodeVisible } from "../../../core/nodeSelector";
+import { NodesProps } from "../Site";
 
-const InactiveLevelNodes = () => {
-  const gameProgress = useNodeStore((state) => state.gameProgress);
-  const currentSite = useSiteStore((state) => state.currentSite);
-
-  const siteData = currentSite === "a" ? site_a : site_b;
-
-  const activeLevel = useLevelStore((state) => state.activeLevel);
+const InactiveLevelNodes = (props: NodesProps) => {
   const visibleNodes = useMemo(() => {
     const obj = {};
-    const activeLevelNr = parseInt(activeLevel);
+    const activeLevelNr = parseInt(props.activeLevel);
     const visibleLevels = [
       (activeLevelNr - 2).toString().padStart(2, "0"),
       (activeLevelNr - 1).toString().padStart(2, "0"),
@@ -24,16 +16,16 @@ const InactiveLevelNodes = () => {
     ];
 
     visibleLevels.forEach((level) => {
-      Object.assign(obj, siteData[level as keyof typeof siteData]);
+      Object.assign(obj, props.siteData[level as keyof typeof props.siteData]);
     });
 
     return obj;
-  }, [activeLevel, siteData]);
+  }, [props]);
 
   return (
     <>
       {Object.entries(visibleNodes).map((node: [string, any]) => {
-        if (isNodeVisible(node[0], gameProgress, currentSite)) {
+        if (isNodeVisible(node[0], props.gameProgress, props.currentSite)) {
           return (
             <Node
               sprite={node[1].node_name}

src/core/StateManagers/EventManager.tsx

@@ -34,6 +34,7 @@ import LevelSelectionManager from "./LevelSelectionManager";
 import SubsceneManager from "./SubsceneManager";
 import PauseComponentManager from "./PauseComponentManager";
 import MediaYellowTextManager from "./MediaYellowTextManager";
+import SiteSaveManager from "./SiteSaveManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -241,6 +242,7 @@ const EventManager = () => {
       <SubsceneManager eventState={eventState!} />
       <PauseComponentManager eventState={eventState!} />
       <MediaYellowTextManager eventState={eventState!} />
+      <SiteSaveManager eventState={eventState!} />
     </>
   );
 };

src/core/StateManagers/LevelManager.tsx

@@ -1,12 +1,15 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
-import { useLevelStore } from "../../store";
+import { useLevelStore, useSiteSaveStore } from "../../store";
+
 
 const LevelManager = (props: StateManagerProps) => {
   const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
+  const siteASaveState = useSiteSaveStore((state) => state.a);
+  const siteBSaveState = useSiteSaveStore((state) => state.b);
 
   const dispatchObject = useCallback(
-    (event: string, newLevel: string) => {
+    (event: string, newLevel: string, newSite: string) => {
       switch (event) {
         case "site_up":
         case "site_down":
@@ -22,21 +25,29 @@ const LevelManager = (props: StateManagerProps) => {
             value: newLevel,
             delay: 1500,
           };
+        case "pause_change_select":
+          return {
+            action: setActiveLevel,
+            value: [
+              newSite === "a" ? siteASaveState.level : siteBSaveState.level,
+            ],
+          };
       }
     },
-    [setActiveLevel]
+    [setActiveLevel, siteASaveState.level, siteBSaveState.level]
   );
 
   useEffect(() => {
     if (props.eventState) {
       const eventAction = props.eventState.event;
       const newLevel = props.eventState.newLevel;
+      const newSite = props.eventState.newSite;
 
-      const dispatchedObject = dispatchObject(eventAction, newLevel);
+      const dispatchedObject = dispatchObject(eventAction, newLevel, newSite);
 
       if (dispatchedObject) {
         setTimeout(() => {
-          dispatchedObject.action(dispatchedObject.value);
+          dispatchedObject.action(dispatchedObject.value as any);
         }, dispatchedObject.delay);
       }
     }

src/core/StateManagers/NodeManager.tsx

@@ -124,7 +124,7 @@ const NodeManager = (props: StateManagerProps) => {
           };
       }
     },
-    [animateActiveNodeThrow, updateActiveNode]
+    [animateActiveNodeThrow, setAfterChangeSite, updateActiveNode]
   );
 
   useEffect(() => {

src/core/StateManagers/SceneManager.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
-import { useSceneStore } from "../../store";
+import { useMainSceneStore, useSceneStore } from "../../store";
 
 const SceneManager = (props: StateManagerProps) => {
   const setScene = useSceneStore((state) => state.setScene);
+  const setMainSceneIntro = useMainSceneStore((state) => state.setIntro);
 
   const dispatchObject = useCallback(
     (event: string, newScene: string) => {
@@ -16,6 +17,7 @@ const SceneManager = (props: StateManagerProps) => {
             action: setScene,
             value: newScene,
             delay: 3450,
+            setMainSceneIntro: false,
           };
         case "media_exit_select":
         case "exit_gate":
@@ -36,6 +38,7 @@ const SceneManager = (props: StateManagerProps) => {
             action: setScene,
             value: "change_disc",
             delay: 0,
+            setMainSceneIntro: true,
           };
       }
     },
@@ -53,9 +56,16 @@ const SceneManager = (props: StateManagerProps) => {
         setTimeout(() => {
           dispatchedObject.action(dispatchedObject.value);
         }, dispatchedObject.delay);
+        if (dispatchedObject.setMainSceneIntro !== undefined) {
+          if (dispatchedObject.setMainSceneIntro) {
+            setMainSceneIntro(true);
+          } else {
+            setMainSceneIntro(false);
+          }
+        }
       }
     }
-  }, [props.eventState, dispatchObject]);
+  }, [props.eventState, dispatchObject, setMainSceneIntro]);
 
   return null;
 };

src/core/StateManagers/SiteManager.tsx

@@ -5,34 +5,13 @@ import { StateManagerProps } from "./EventManager";
 const SiteManager = (props: StateManagerProps) => {
   const setTransformState = useSiteStore((state) => state.setTransformState);
   const setCurrentSite = useSiteStore((state) => state.setCurrentSite);
-  const setIntroAnim = useSiteStore((state) => state.setIntroAnim);
 
-  const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState);
   const siteASaveState = useSiteSaveStore((state) => state.a);
   const siteBSaveState = useSiteSaveStore((state) => state.b);
 
   const changeSite = useCallback(
-    (
-      currentSite: string,
-      activeNodeId: string,
-      activeNodeMatrixIndices: {
-        matrixIdx: number;
-        rowIdx: number;
-        colIdx: number;
-      },
-      siteRotY: number,
-      sitePosY: number,
-      newSite: string
-    ) => {
+    (newSite: string) => {
       setTransformState(0, "rotX");
-      setIntroAnim(true);
-
-      setSiteSaveState(currentSite, {
-        activeNodeId: activeNodeId,
-        nodeMatrixIndices: activeNodeMatrixIndices,
-        siteRotY: siteRotY,
-        sitePosY: sitePosY,
-      });
 
       const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState;
 
@@ -40,14 +19,7 @@ const SiteManager = (props: StateManagerProps) => {
       setTransformState(siteToLoad.siteRotY, "rotY");
       setTransformState(siteToLoad.sitePosY, "posY");
     },
-    [
-      setCurrentSite,
-      setIntroAnim,
-      setSiteSaveState,
-      setTransformState,
-      siteASaveState,
-      siteBSaveState,
-    ]
+    [setCurrentSite, setTransformState, siteASaveState, siteBSaveState]
   );
 
   const dispatchObject = useCallback(
@@ -56,13 +28,7 @@ const SiteManager = (props: StateManagerProps) => {
       newSitePosY: number,
       newSiteRotY: number,
       currentSite: string,
-      newSite: string,
-      activeNodeId: string,
-      activeNodeMatrixIndices: {
-        matrixIdx: number;
-        rowIdx: number;
-        colIdx: number;
-      }
+      newSite: string
     ) => {
       switch (event) {
         case "site_up":
@@ -96,14 +62,7 @@ const SiteManager = (props: StateManagerProps) => {
         case "pause_change_select":
           return {
             action: changeSite,
-            value: [
-              currentSite,
-              activeNodeId,
-              activeNodeMatrixIndices,
-              newSiteRotY,
-              newSitePosY,
-              newSite,
-            ],
+            value: [newSite],
             actionDelay: 0,
           };
         case "throw_node_media":
@@ -121,8 +80,6 @@ const SiteManager = (props: StateManagerProps) => {
       const eventAction = props.eventState.event;
       const newSiteRotY = props.eventState.newSiteRotY;
       const newSitePosY = props.eventState.newSitePosY;
-      const activeNodeId = props.eventState.activeNodeId;
-      const activeNodeMatrixIndices = props.eventState.activeNodeMatrixIndices;
 
       const currentSite = props.eventState.currentSite;
       const newSite = props.eventState.newSite;
@@ -132,9 +89,7 @@ const SiteManager = (props: StateManagerProps) => {
         newSitePosY,
         newSiteRotY,
         currentSite,
-        newSite,
-        activeNodeId,
-        activeNodeMatrixIndices
+        newSite
       );
 
       if (dispatchedObject) {

src/core/StateManagers/SiteSaveManager.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useEffect } from "react";
+import { useSiteSaveStore } from "../../store";
+import { StateManagerProps } from "./EventManager";
+
+const SiteSaveManager = (props: StateManagerProps) => {
+  const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState);
+
+  const dispatchObject = useCallback(
+    (
+      event: string,
+      sitePosY: number,
+      siteRotY: number,
+      currentSite: string,
+      newSite: string,
+      activeNodeId: string,
+      activeNodeMatrixIndices: {
+        matrixIdx: number;
+        rowIdx: number;
+        colIdx: number;
+      },
+      level: string
+    ) => {
+      switch (event) {
+        case "pause_change_select":
+          return {
+            action: setSiteSaveState,
+            value: [
+              currentSite,
+              {
+                activeNodeId: activeNodeId,
+                nodeMatrixIndices: activeNodeMatrixIndices,
+                siteRotY: siteRotY,
+                sitePosY: sitePosY,
+                level: level.toString().padStart(2, "0"),
+              },
+            ],
+            actionDelay: 0,
+          };
+      }
+    },
+    [setSiteSaveState]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventAction = props.eventState.event;
+      const siteRotY = props.eventState.currentSiteRotY;
+      const sitePosY = props.eventState.currentSitePosY;
+      const activeNodeId = props.eventState.currentActiveNodeId;
+      const activeNodeMatrixIndices =
+        props.eventState.currentActiveNodeMatrixIndices;
+      const newLevel = props.eventState.currentLevel;
+
+      const currentSite = props.eventState.currentSite;
+      const newSite = props.eventState.newSite;
+
+      const dispatchedObject = dispatchObject(
+        eventAction,
+        sitePosY,
+        siteRotY,
+        currentSite,
+        newSite,
+        activeNodeId,
+        activeNodeMatrixIndices,
+        newLevel
+      );
+
+      if (dispatchedObject) {
+        setTimeout(() => {
+          dispatchedObject.action.apply(null, dispatchedObject.value as any);
+        }, dispatchedObject.actionDelay);
+      }
+    }
+  }, [dispatchObject, props.eventState]);
+  return null;
+};
+
+export default SiteSaveManager;

src/core/mainSceneEventHandler.ts

@@ -191,10 +191,11 @@ const handleMainSceneEvent = (gameContext: any) => {
         return {
           event: `pause_${activePauseComponent}_select`,
           currentSite: currentSite,
-          newSitePosY: newSitePosY,
-          newSiteRotY: newSiteRotY,
-          activeNodeId: newActiveNodeId,
-          activeNodeMatrixIndices: nodeMatrixIndices,
+          currentSitePosY: newSitePosY,
+          currentSiteRotY: newSiteRotY,
+          currentActiveNodeId: newActiveNodeId,
+          currentActiveNodeMatrixIndices: nodeMatrixIndices,
+          currentLevel: newLevel,
           newSite: currentSite === "a" ? "b" : "a",
         };
     }

src/scenes/MainScene.tsx

@@ -1,6 +1,6 @@
 import { a } from "@react-spring/three";
 import { OrbitControls } from "@react-three/drei";
-import React, { Suspense } from "react";
+import React, { Suspense, useMemo } from "react";
 import Site from "../components/MainScene/Site";
 import Lain from "../components/MainScene/Lain";
 import Preloader from "../components/Preloader";
@@ -18,7 +18,9 @@ import Starfield from "../components/MainScene/Starfield/Starfield";
 const MainScene = () => {
   const currentSubscene = useMainSceneStore((state) => state.subscene);
 
-  const isPaused = currentSubscene === "pause";
+  const isPaused = useMemo(() => currentSubscene === "pause", [
+    currentSubscene,
+  ]);
 
   return (
     <perspectiveCamera position-z={3}>

src/store.ts

@@ -4,6 +4,23 @@ import * as THREE from "three";
 import authorize_user_letters from "./resources/authorize_user_letters.json";
 import game_progress from "./resources/initial_progress.json";
 
+type SiteSaveState = {
+  a: {
+    activeNodeId: string;
+    nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number };
+    siteRotY: number;
+    sitePosY: number;
+    level: string;
+  };
+  b: {
+    activeNodeId: string;
+    nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number };
+    siteRotY: number;
+    sitePosY: number;
+    level: string;
+  };
+};
+
 type PauseState = {
   exitAnimation: boolean;
   componentMatrix: string[];
@@ -58,7 +75,6 @@ type StarfieldState = {
 };
 
 type SiteState = {
-  introAnim: boolean;
   currentSite: "a" | "b";
   transformState: {
     posY: number;
@@ -156,8 +172,10 @@ type SSknState = {
 };
 
 type MainSceneState = {
+  intro: boolean;
   subscene: string;
   setSubscene: (to: string) => void;
+  setIntro: (to: boolean) => void;
 };
 
 export type MediaBigTextState = {
@@ -304,7 +322,6 @@ export const useStarfieldStore = create<StarfieldState>((set) => ({
 export const useSiteStore = create(
   combine(
     {
-      introAnim: true,
       currentSite: "a",
       transformState: {
         posY: 0,
@@ -319,7 +336,6 @@ export const useSiteStore = create(
         })),
       setCurrentSite: (to: string) =>
         set(() => ({ currentSite: to as "a" | "b" })),
-      setIntroAnim: (to: boolean) => set(() => ({ introAnim: to })),
     })
   )
 );
@@ -446,8 +462,10 @@ export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
 }));
 
 export const useMainSceneStore = create<MainSceneState>((set) => ({
+  intro: true,
   subscene: "site",
   setSubscene: (to) => set(() => ({ subscene: to })),
+  setIntro: (to) => set(() => ({ intro: to })),
 }));
 
 export const useBootStore = create(
@@ -534,24 +552,31 @@ export const useSiteSaveStore = create(
         nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
         siteRotY: 0,
         sitePosY: 0,
+        level: "04",
       },
       b: {
         activeNodeId: "0414",
         nodeMatrixIndices: { matrixIdx: 7, rowIdx: 1, colIdx: 0 },
         siteRotY: 0,
         sitePosY: 0,
+        level: "04",
       },
-    } as any,
+    } as SiteSaveState,
     (set) => ({
       setSiteSaveState: (
         site: string,
         to: {
           activeNodeId: string;
-          nodeMatrixIndices: { matrixIdx: 7; rowIdx: 0; colIdx: 0 };
+          nodeMatrixIndices: {
+            matrixIdx: number;
+            rowIdx: number;
+            colIdx: number;
+          };
           siteRotY: number;
           sitePosY: number;
+          level: string;
         }
-      ) => set(() => ({ site: to })),
+      ) => set(() => ({ [site]: to })),
     })
   )
 );