site change bug fix and some additions to it

src/components/MainScene/PauseSubscene/Pause.tsx

@@ -54,6 +54,9 @@ const Pause = (props: { visible: boolean }) => {
   );
 
   useEffect(() => {
+    setAnimation(false);
+    setIntro(true);
+    setShowActiveComponent(false);
     if (props.visible) {
       setTimeout(() => {
         setAnimation(true);
@@ -63,20 +66,10 @@ const Pause = (props: { visible: boolean }) => {
         setIntro(false);
       }, 3500);
     }
-    return () => {
-      setTimeout(() => {
-        setAnimation(false);
-        setIntro(true);
-        setShowActiveComponent(false);
-      }, 700);
-    };
   }, [props.visible]);
 
   return animation ? (
-    <group
-      position={[-0.85, -0.7, 0]}
-      scale={[0.85, 0.85, 0]}
-    >
+    <group position={[-0.85, -0.7, 0]} scale={[0.85, 0.85, 0]}>
       {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
         [0, 1, 2, 3, 4, 5, 6].map((col: number) => {
           if (rowIdx === 5 && col > 0 && col < 5) {

src/components/MainScene/Site.tsx

@@ -30,6 +30,7 @@ export type SiteType = {
 
 const Site = () => {
   const siteTransformState = useSiteStore((state) => state.transformState);
+  const introAnim = useSiteStore((state) => state.introAnim);
 
   const siteState = useSpring({
     siteRotY: siteTransformState.rotY,
@@ -41,7 +42,7 @@ const Site = () => {
   const introSiteState = useSpring({
     posZ: 0,
     rotX: 0,
-    from: { posZ: -7, rotX: Math.PI / 2 },
+    from: { posZ: introAnim ? -7 : 0, rotX: introAnim ? Math.PI / 2 : 0 },
     config: { duration: 3900 },
   });
 
@@ -56,8 +57,8 @@ const Site = () => {
             rotation-y={siteState.siteRotY}
             position-y={siteState.sitePosY}
           >
-            {/*<ActiveLevelNodes />*/}
-            {/*<InactiveLevelNodes />*/}
+            <ActiveLevelNodes />
+            <InactiveLevelNodes />
             <Rings />
           </a.group>
         </a.group>

src/core/StateManagers/NodeManager.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { useNodeStore } from "../../store";
+import { useNodeStore, useSiteSaveStore } from "../../store";
 import { StateManagerProps } from "./EventManager";
 
 const NodeManager = (props: StateManagerProps) => {
@@ -7,6 +7,8 @@ const NodeManager = (props: StateManagerProps) => {
   const setNodeMatrixIndices = useNodeStore(
     (state) => state.setNodeMatrixIndices
   );
+  const siteASaveState = useSiteSaveStore((state) => state.a);
+  const siteBSaveState = useSiteSaveStore((state) => state.b);
 
   const animateActiveNodeThrow = useCallback(
     (siteRotY: number) => {
@@ -53,14 +55,14 @@ const NodeManager = (props: StateManagerProps) => {
 
   const updateActiveNode = useCallback(
     (
-      delay: number,
-      isMoving: boolean,
       newActiveNodeId: string,
       newNodeMatrixIndices: {
         matrixIdx: number;
         rowIdx: number;
         colIdx: number;
-      }
+      },
+      isMoving?: boolean,
+      delay?: number
     ) => {
       setTimeout(() => {
         setActiveNodeState(newActiveNodeId, "id");
@@ -70,6 +72,15 @@ const NodeManager = (props: StateManagerProps) => {
     [setActiveNodeState, setNodeMatrixIndices]
   );
 
+  const setAfterChangeSite = useCallback(
+    (newSite: string) => {
+      const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState;
+      setActiveNodeState(siteToLoad.activeNodeId, "id");
+      setNodeMatrixIndices(siteToLoad.nodeMatrixIndices);
+    },
+    [setActiveNodeState, setNodeMatrixIndices, siteASaveState, siteBSaveState]
+  );
+
   const dispatchObject = useCallback(
     (
       event: string,
@@ -79,7 +90,8 @@ const NodeManager = (props: StateManagerProps) => {
         rowIdx: number;
         colIdx: number;
       },
-      newSiteRotY: number
+      newSiteRotY: number,
+      newSite: string
     ) => {
       switch (event) {
         case "site_up":
@@ -90,12 +102,17 @@ const NodeManager = (props: StateManagerProps) => {
         case "select_level_down":
           return {
             action: updateActiveNode,
-            value: [3900, true, newActiveNodeId, newNodeMatrixIndices],
+            value: [newActiveNodeId, newNodeMatrixIndices, true, 3900],
           };
         case "change_node":
           return {
             action: updateActiveNode,
-            value: [0, false, newActiveNodeId, newNodeMatrixIndices],
+            value: [newActiveNodeId, newNodeMatrixIndices],
+          };
+        case "pause_change_select":
+          return {
+            action: setAfterChangeSite,
+            value: [newSite],
           };
         case "throw_node_media":
         case "throw_node_gate":
@@ -115,17 +132,23 @@ const NodeManager = (props: StateManagerProps) => {
       const eventAction = props.eventState.event;
       const newActiveNodeId = props.eventState.newActiveNodeId;
       const newNodeMatrixIndices = props.eventState.newNodeMatrixIndices;
+
       const newSiteRotY = props.eventState.newSiteRotY;
+      const newSite = props.eventState.newSite;
 
       const dispatchedObject = dispatchObject(
         eventAction,
         newActiveNodeId,
         newNodeMatrixIndices,
-        newSiteRotY
+        newSiteRotY,
+        newSite
       );
 
       if (dispatchedObject) {
-        dispatchedObject.action.apply(null, dispatchedObject.value as never);
+        (dispatchedObject.action as any).apply(
+          null,
+          dispatchedObject.value as never
+        );
       }
     }
   }, [props.eventState, setActiveNodeState, dispatchObject]);

src/core/StateManagers/SceneManager.tsx

@@ -31,6 +31,12 @@ const SceneManager = (props: StateManagerProps) => {
             value: "main",
             delay: 6000,
           };
+        case "pause_change_select":
+          return {
+            action: setScene,
+            value: "change_disc",
+            delay: 0,
+          };
       }
     },
     [setScene]

src/core/StateManagers/SiteManager.tsx

@@ -5,6 +5,7 @@ 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);
@@ -23,6 +24,9 @@ const SiteManager = (props: StateManagerProps) => {
       sitePosY: number,
       newSite: string
     ) => {
+      setTransformState(0, "rotX");
+      setIntroAnim(true);
+
       setSiteSaveState(currentSite, {
         activeNodeId: activeNodeId,
         nodeMatrixIndices: activeNodeMatrixIndices,
@@ -33,13 +37,12 @@ const SiteManager = (props: StateManagerProps) => {
       const siteToLoad = newSite === "a" ? siteASaveState : siteBSaveState;
 
       setCurrentSite(newSite);
-      setTransformState(siteToLoad.rotY, "rotY");
-      setTransformState(siteToLoad.posY, "posY");
-
-      console.log(newSite)
+      setTransformState(siteToLoad.siteRotY, "rotY");
+      setTransformState(siteToLoad.sitePosY, "posY");
     },
     [
       setCurrentSite,
+      setIntroAnim,
       setSiteSaveState,
       setTransformState,
       siteASaveState,
@@ -103,9 +106,14 @@ const SiteManager = (props: StateManagerProps) => {
             ],
             actionDelay: 0,
           };
+        case "throw_node_media":
+        case "throw_node_gate":
+        case "throw_node_sskn":
+        case "throw_node_tak":
+          return { action: setIntroAnim, value: [false], actionDelay: 0 };
       }
     },
-    [changeSite, setTransformState]
+    [changeSite, setIntroAnim, setTransformState]
   );
 
   useEffect(() => {

src/core/StateManagers/SubsceneManager.tsx

@@ -30,6 +30,7 @@ const SubsceneManager = (props: StateManagerProps) => {
             delay: 0,
           };
         case "pause_exit_select":
+        case "pause_change_select":
           return {
             action: setMainSubscene,
             value: "site",

src/core/mainSceneEventHandler.ts

@@ -1,4 +1,3 @@
-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 nodeSelector, { getNodeHudId, getNodeId } from "./nodeSelector";
@@ -193,7 +192,7 @@ const handleMainSceneEvent = (gameContext: any) => {
           event: `pause_${activePauseComponent}_select`,
           currentSite: currentSite,
           newSitePosY: newSitePosY,
-          newtSiteRotY: newSiteRotY,
+          newSiteRotY: newSiteRotY,
           activeNodeId: newActiveNodeId,
           activeNodeMatrixIndices: nodeMatrixIndices,
           newSite: currentSite === "a" ? "b" : "a",

src/scenes/ChangeDiscScene.tsx

@@ -1,29 +1,23 @@
 import React, { useEffect } from "react";
-
-import lof from "../../src/static/sprite/disc_lof.png";
-import changeSiteText from "../../src/static/sprite/disc_change_site.png";
-import { useLoader } from "react-three-fiber";
-import * as THREE from "three";
+import { useSceneStore } from "../store";
 
 const ChangeDiscScene = () => {
-  const lofTex = useLoader(THREE.TextureLoader, lof);
-  const changeSiteTextTex = useLoader(THREE.TextureLoader, changeSiteText);
-
+  const setScene = useSceneStore((state) => state.setScene);
   useEffect(() => {
     document.getElementsByTagName("canvas")[0].className =
       "change-disc-scene-background";
-  }, []);
 
-  return (
-    <>
-      <sprite scale={[3, 1, 0]} position={[0, 2, 0]}>
-        <spriteMaterial map={lofTex} attach="material" />
-      </sprite>
-      <sprite scale={[5, 1, 0]} position={[0, 0, 0]}>
-        <spriteMaterial map={changeSiteTextTex} attach="material" />
-      </sprite>
-    </>
-  );
+    setTimeout(() => {
+      setScene("main");
+    }, 3500);
+
+    return () => {
+      document.getElementsByTagName("canvas")[0].className =
+        "main-scene-background";
+    };
+  }, [setScene]);
+
+  return <></>;
 };
 
 export default ChangeDiscScene;

src/store.ts

@@ -58,6 +58,7 @@ type StarfieldState = {
 };
 
 type SiteState = {
+  introAnim: boolean;
   currentSite: "a" | "b";
   transformState: {
     posY: number;
@@ -303,6 +304,7 @@ export const useStarfieldStore = create<StarfieldState>((set) => ({
 export const useSiteStore = create(
   combine(
     {
+      introAnim: true,
       currentSite: "a",
       transformState: {
         posY: 0,
@@ -317,6 +319,7 @@ export const useSiteStore = create(
         })),
       setCurrentSite: (to: string) =>
         set(() => ({ currentSite: to as "a" | "b" })),
+      setIntroAnim: (to: boolean) => set(() => ({ introAnim: to })),
     })
   )
 );
@@ -423,7 +426,7 @@ export const useSSknStore = create<SSknState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "change_disc",
+  currentScene: "main",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));
 
@@ -533,8 +536,8 @@ export const useSiteSaveStore = create(
         sitePosY: 0,
       },
       b: {
-        activeNodeId: "0422",
-        nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
+        activeNodeId: "0414",
+        nodeMatrixIndices: { matrixIdx: 7, rowIdx: 1, colIdx: 0 },
         siteRotY: 0,
         sitePosY: 0,
       },