site changing works

src/App.tsx

@@ -13,8 +13,8 @@ import TaKScene from "./scenes/TaKScene";
 import ChangeDiscScene from "./scenes/ChangeDiscScene";
 import EndScene from "./scenes/EndScene";
 import IdleMediaScene from "./scenes/IdleMediaScene";
-import KeyPressHandler from "./core/state-management/KeyPressHandler";
+import KeyPressHandler from "./components/KeyPressHandler";
-import Preloader from "./core/Preloader";
+import Preloader from "./components/Preloader";
 
 const App = () => {
   const currentScene = useStore((state) => state.currentScene);

src/components/GateScene/GateMiddleObject/Mirror.tsx

@@ -21,7 +21,7 @@ type MirrorProps = {
 
 const Mirror = (props: MirrorProps) => {
   const mirrorTex = useLoader(THREE.TextureLoader, mirrorTexture);
-  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/gatePass.glb");
+  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/gate_mirror.glb");
 
   const mirrorGroupRef = useRef<THREE.Object3D>();
   const materialRef = useRef<THREE.MeshBasicMaterial>();

src/components/KeyPressHandler.tsx

@@ -4,21 +4,23 @@ import {
   getMediaSceneContext,
   getSSknSceneContext,
   useStore,
-} from "../../store";
+} from "../store";
-import { getKeyCodeAssociation } from "../../utils/keyPressUtils";
+import { getKeyCodeAssociation } from "../utils/keyPressUtils";
-import mediaManager from "../state-management/setters/media/mediaManager";
+import mediaManager from "../core/setters/media/mediaManager";
-import handleMediaSceneEvent from "./scene-keypress-handlers/handleMediaKeyPress";
+import handleMediaSceneEvent from "../core/scene-keypress-handlers/handleMediaKeyPress";
-import sceneManager from "../state-management/setters/sceneManager";
+import sceneManager from "../core/setters/sceneManager";
-import levelSelectionManager from "./setters/main/level_selection/levelSelectionManager";
+import levelSelectionManager from "../core/setters/main/level_selection/levelSelectionManager";
-import nodeManager from "./setters/main/site/nodeManager";
+import nodeManager from "../core/setters/main/site/nodeManager";
-import levelManager from "./setters/main/site/levelManager";
+import levelManager from "../core/setters/main/site/levelManager";
-import lainManager from "./setters/main/site/lainManager";
+import lainManager from "../core/setters/main/site/lainManager";
-import siteManager from "./setters/main/site/siteManager";
+import siteManager from "../core/setters/main/site/siteManager";
-import pauseManager from "./setters/main/pause/pauseManager";
+import pauseManager from "../core/setters/main/pause/pauseManager";
-import mainSubsceneManager from "./setters/main/mainSubsceneManager";
+import mainSubsceneManager from "../core/setters/main/mainSubsceneManager";
-import ssknManager from "./setters/sskn/ssknManager";
+import ssknManager from "../core/setters/sskn/ssknManager";
-import handleSSknSceneEvent from "./scene-keypress-handlers/handleSSknKeyPress";
+import handleSSknSceneEvent from "../core/scene-keypress-handlers/handleSSknKeyPress";
-import handleMainSceneEvent from "./scene-keypress-handlers/handleMainKeyPress";
+import handleMainSceneEvent from "../core/scene-keypress-handlers/handleMainKeyPress";
+import gameLoader from "../core/setters/gameLoader";
+import gameSaver from "../core/setters/gameSaver";
 
 const KeyPressHandler = () => {
   const mediaSceneSetters = useMemo(() => [mediaManager, sceneManager], []);
@@ -33,6 +35,8 @@ const KeyPressHandler = () => {
       pauseManager,
       mainSubsceneManager,
       sceneManager,
+      gameLoader,
+      gameSaver,
     ],
     []
   );
@@ -49,7 +53,7 @@ const KeyPressHandler = () => {
 
       const now = Date.now();
 
-      if (keyPress && now > timePassedSinceLastKeyPress.current + 1500) {
+      if (keyPress) {
         timePassedSinceLastKeyPress.current = Date.now();
 
         const sceneFns = (() => {

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

@@ -15,7 +15,7 @@ type GLTFResult = GLTF & {
 };
 
 const CyanCrystal = memo((props: CrystalRingProps) => {
-  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/cyancrystal.glb");
+  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/cyan_crystal.glb");
 
   return (
     <mesh

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

@@ -33,7 +33,7 @@ type GoldNodeProps = {
 };
 
 const GoldNode = (props: GoldNodeProps) => {
-  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/goldNode.glb");
+  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/gold_node.glb");
 
   const activeNodeName = useStore(
     (state) => state.activeNode.node_name

src/components/MediaScene/Selectables/LeftSide/TriangularPrism.tsx

@@ -19,7 +19,7 @@ const TriangularPrism = memo((props: ShapeProps) => {
   const grayTex = useLoader(THREE.TextureLoader, grayTextureFile);
   const darkGrayTex = useLoader(THREE.TextureLoader, darkGrayTextureFile);
 
-  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/cutcube.glb");
+  const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/cut_cube.glb");
 
   const prismRef = useRef<THREE.Object3D>();
 

src/core/scene-keypress-handlers/handleMainKeyPress.ts

@@ -1,4 +1,4 @@
-import {findNode, getNodeById} from "../../../utils/node-utils";
+import { findNode, getNodeById } from "../../utils/node-utils";
 
 const handleMainSceneEvent = (mainSceneContext: any) => {
   const {
@@ -209,6 +209,7 @@ const handleMainSceneEvent = (mainSceneContext: any) => {
         case "CIRCLE":
           return {
             event: `pause_${activePauseComponent}_select`,
+            site: currentSite,
           };
       }
   }

src/core/setters/boot/bootSubsceneManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../store";
+import { useStore } from "../../../store";
 
 const bootSubsceneManager = (eventState: any) => {
   const setBootSubscene = useStore.getState().setBootSubscene;

src/core/setters/gameLoader.ts

@@ -0,0 +1,22 @@
+import { useStore } from "../../store";
+
+const gameLoader = (eventState: any) => {
+  const loadSiteSaveState = useStore.getState().loadSiteSaveState;
+
+  const dispatchAction = (eventState: { event: string; site: "a" | "b" }) => {
+    switch (eventState.event) {
+      case "pause_change_select":
+        return {
+          action: () => loadSiteSaveState(eventState.site === "a" ? "b" : "a"),
+        };
+    }
+  };
+
+  const { action } = { ...dispatchAction(eventState) };
+
+  if (action) {
+    action();
+  }
+};
+
+export default gameLoader;

src/core/setters/gameSaver.ts

@@ -0,0 +1,23 @@
+import { getSiteState, useStore } from "../../store";
+
+const gameSaver = (eventState: any) => {
+  const setSiteSaveState = useStore.getState().setSiteSaveState;
+
+  const dispatchAction = (eventState: { event: string; site: "a" | "b" }) => {
+    switch (eventState.event) {
+      case "pause_change_select":
+        return {
+          action: () =>
+            setSiteSaveState(eventState.site, getSiteState(eventState.site)),
+        };
+    }
+  };
+
+  const { action } = { ...dispatchAction(eventState) };
+
+  if (action) {
+    action();
+  }
+};
+
+export default gameSaver;

src/core/setters/main/idleManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../store";
+import { useStore } from "../../../store";
 
 const idleManager = (eventState: any) => {
   const dispatchAction = (eventState: {

src/core/setters/main/level_selection/levelSelectionManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../../store";
+import { useStore } from "../../../../store";
 
 const levelSelectionManager = (eventState: any) => {
   const setSelectedLevel = useStore.getState().setSelectedLevel;

src/core/setters/main/mainSubsceneManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../store";
+import { useStore } from "../../../store";
 
 const mainSubsceneManager = (eventState: any) => {
   const setMainSubscene = useStore.getState().setMainSubscene;

src/core/setters/main/pause/pauseManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../../store";
+import { useStore } from "../../../../store";
 
 type PauseManagerProps = { event: string; pauseMatrixIdx: number };
 

src/core/setters/main/site/lainManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../../store";
+import { useStore } from "../../../../store";
 
 const lainManager = (eventState: any) => {
   const setLainMoveState = useStore.getState().setLainMoveState;

src/core/setters/main/site/levelManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../../store";
+import { useStore } from "../../../../store";
 
 const levelManager = (eventState: any) => {
   const setActiveLevel = useStore.getState().setActiveLevel;

src/core/setters/main/site/nodeManager.ts

@@ -1,5 +1,5 @@
-import { useStore } from "../../../../../store";
+import { useStore } from "../../../../store";
-import { NodeDataType } from "../../../../../components/MainScene/SyncedComponents/Site";
+import { NodeDataType } from "../../../../components/MainScene/SyncedComponents/Site";
 
 const nodeManager = (eventState: any) => {
   const setActiveNode = useStore.getState().setNode;

src/core/setters/main/site/siteManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../../store";
+import { useStore } from "../../../../store";
 
 const siteManager = (eventState: any) => {
   const setRotY = useStore.getState().setSiteRotY;
@@ -18,6 +18,7 @@ const siteManager = (eventState: any) => {
           delay: 3600,
         };
       case "pause_exit_select":
+      case "pause_change_select":
         return {
           action: () => setRotX(0),
           delay: 0,

src/core/setters/media/mediaManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../store";
+import { useStore } from "../../../store";
 import { useCallback } from "react";
 import * as THREE from "three";
 

src/core/setters/sceneManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../store";
+import { useStore } from "../../store";
 
 const sceneManager = (eventState: any) => {
   const dispatchAction = (eventState: { event: string; scene: string }) => {

src/core/setters/sskn/ssknManager.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../../../../store";
+import { useStore } from "../../../store";
 
 const ssknManager = (eventState: any) => {
   const toggleComponentMatrixIdx = useStore.getState()

src/scenes/MainScene.tsx

@@ -1,6 +1,6 @@
 import { OrbitControls } from "@react-three/drei";
 import React, { Suspense, useEffect, useMemo } from "react";
-import Preloader from "../core/Preloader";
+import Preloader from "../components/Preloader";
 import { useStore } from "../store";
 import Pause from "../components/MainScene/PauseSubscene/Pause";
 import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader";

src/store.ts

@@ -4,6 +4,7 @@ import * as THREE from "three";
 import authorize_user_letters from "./resources/authorize_user_letters.json";
 import game_progress from "./resources/initial_progress.json";
 import { NodeDataType } from "./components/MainScene/SyncedComponents/Site";
+import { getNodeById } from "./utils/node-utils";
 
 type State = {
   currentScene: string;
@@ -92,6 +93,21 @@ type State = {
 
   // end scene
   endMediaPlayedCount: number;
+
+  // save state
+
+  siteSaveState: {
+    a: {
+      activeNode: NodeDataType;
+      siteRot: number[];
+      activeLevel: string;
+    };
+    b: {
+      activeNode: NodeDataType;
+      siteRot: number[];
+      activeLevel: string;
+    };
+  };
 };
 
 export const useStore = create(
@@ -223,6 +239,26 @@ export const useStore = create(
 
       // end scene
       endMediaPlayedCount: 0,
+
+      // save states for loading the game/changing sites
+      siteSaveState: {
+        a: {
+          activeNode: {
+            ...getNodeById("0422", "a"),
+            matrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
+          },
+          siteRot: [0, 0, 0],
+          activeLevel: "04",
+        },
+        b: {
+          activeNode: {
+            ...getNodeById("0414", "b"),
+            matrixIndices: { matrixIdx: 7, rowIdx: 1, colIdx: 0 },
+          },
+          siteRot: [0, 0, 0],
+          activeLevel: "04",
+        },
+      },
     } as State,
     (set) => ({
       // scene data setters
@@ -354,10 +390,44 @@ export const useStore = create(
           endMediaPlayedCount: state.endMediaPlayedCount + 1,
         })),
       resetEndMediaPlayedCount: () => set(() => ({ endMediaPlayedCount: 0 })),
+
+      // site state setters
+      setSiteSaveState: (
+        site: string,
+        to: {
+          activeNode: NodeDataType;
+          siteRot: number[];
+          activeLevel: string;
+        }
+      ) =>
+        set((state) => ({
+          siteSaveState: { ...state.siteSaveState, [site]: to },
+        })),
+
+      loadSiteSaveState: (site: "a" | "b") =>
+        set((state) => {
+          const stateToLoad = state.siteSaveState[site];
+          return {
+            activeSite: site,
+            activeNode: stateToLoad.activeNode,
+            siteRot: stateToLoad.siteRot,
+            activeLevel: stateToLoad.activeLevel,
+          };
+        }),
     })
   )
 );
 
+export const getSiteState = (site: "a" | "b") => {
+  const siteState = useStore.getState().siteSaveState[site];
+
+  return {
+    activeNode: siteState.activeNode,
+    siteRot: siteState.siteRot,
+    activeLevel: siteState.activeLevel,
+  };
+};
+
 export const getMainSceneContext = () => {
   const state = useStore.getState();