not much today, cleaned a bit of stuff and added "back" button

src/components/Boot/BootAuthorizeUser.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import authorizeHeaderUnderline from "../../static/sprite/authorize_header_underline.png";
 import authorizeGlass from "../../static/sprite/authorize_glass.png";
 import authorizeGlassUnderline from "../../static/sprite/authorize_glass_underline.png";
@@ -98,7 +98,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
           </sprite>
 
           <mesh
-            scale={[5*1.5, 1.28*1.5, 0]}
+            scale={[5 * 1.5, 1.28 * 1.5, 0]}
             position={[-1.06, -0.42, 0]}
             rotation={[-0.8, 0, -0.3]}
             renderOrder={-1}

src/components/Boot/BootLoadData.tsx

@@ -30,9 +30,7 @@ const BootLoadData = (props: BootLoadDataProps) => {
   const yesTex = useLoader(THREE.TextureLoader, yes);
   const noTex = useLoader(THREE.TextureLoader, no);
 
-  const activeLoadDataElement = useBootStore(
+  const activeBootElement = useBootStore((state) => state.activeBootElement);
-    (state) => state.activeLoadDataElement
-  );
 
   return (
     <>
@@ -67,7 +65,9 @@ const BootLoadData = (props: BootLoadDataProps) => {
             scale={[0.7, 0.3, 0]}
             renderOrder={2}
             position={
-              activeLoadDataElement === "yes" ? [-1.2, -0.2, 0] : [1.2, -0.2, 0]
+              activeBootElement === "load_data_yes"
+                ? [-1.2, -0.2, 0]
+                : [1.2, -0.2, 0]
             }
           >
             <spriteMaterial

src/components/Boot/BootMainMenuComponents.tsx

@@ -16,12 +16,7 @@ type BootMainMenuProps = {
 };
 
 const BootMainMenuComponents = (props: BootMainMenuProps) => {
-  const activeMainMenuElement = useBootStore(
+  const activeBootElement = useBootStore((state) => state.activeBootElement);
-    (state) => state.activeMainMenuElement
-  );
-  const authorizeUserPos = useBootStore(
-    (state) => state.authorizeUserPos
-  );
 
   const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive);
   const authorizeInactiveTex = useLoader(
@@ -37,57 +32,65 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
   const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive);
   const loadDataHeaderTex = useLoader(THREE.TextureLoader, loadDataHeader);
 
-  const loadDataPos = useBootStore((state) => state.loadDataPos);
+  const loadDataTextState = useMemo(() => {
-
+    if (props.activeSubScene === "load_data") {
-  const mainMenuAnimationState = useSpring({
+      return {
-    authorizeUserPosX: authorizeUserPos.x,
+        scale: [1.4, 0.16, 0],
-    authorizeUserPosY: authorizeUserPos.y,
+        texture: loadDataHeaderTex,
-    authorizeUserOpacity: props.activeSubScene !== "load_data" ? 1 : 0,
+        position: { x: -1.13, y: -1 },
-    loadDataOpacity: props.activeSubScene !== "authorize_user" ? 1 : 0,
+      };
-    loadDataPosX: loadDataPos.x,
+    } else {
-    loadDataPosY: loadDataPos.y,
+      return {
-    config: { duration: 500 },
+        scale: [1.4, 0.3, 0],
-  });
+        texture:
+          activeBootElement === "load_data"
+            ? loadDataActiveTex
+            : loadDataInactiveTex,
+        position: { x: 0, y: -0.5 },
+      };
+    }
+  }, [
+    activeBootElement,
+    loadDataActiveTex,
+    loadDataHeaderTex,
+    loadDataInactiveTex,
+    props.activeSubScene,
+  ]);
 
   const authorizeUserTextState = useMemo(() => {
     if (props.activeSubScene === "authorize_user") {
-      return { scale: [1.8, 0.16, 0], texture: authorizeUserHeaderTex };
+      return {
+        scale: [1.8, 0.16, 0],
+        texture: authorizeUserHeaderTex,
+        position: { x: 1.13, y: 1.2 },
+      };
     } else {
       return {
         scale: [1.8, 0.3, 0],
         texture:
-          activeMainMenuElement === "authorize_user"
+          activeBootElement === "authorize_user"
             ? authorizeActiveTex
             : authorizeInactiveTex,
+        position: { x: 0, y: 0.5 },
       };
     }
   }, [
-    activeMainMenuElement,
+    activeBootElement,
     authorizeActiveTex,
     authorizeInactiveTex,
     authorizeUserHeaderTex,
     props.activeSubScene,
   ]);
 
-  const loadDataTextState = useMemo(() => {
+  const mainMenuAnimationState = useSpring({
-    if (props.activeSubScene === "load_data") {
+    authorizeUserOpacity: props.activeSubScene !== "load_data" ? 1 : 0,
-      return { scale: [1.4, 0.16, 0], texture: loadDataHeaderTex };
+    authorizeUserPosX: authorizeUserTextState.position.x,
-    } else {
+    authorizeUserPosY: authorizeUserTextState.position.y,
-      return {
+    loadDataOpacity: props.activeSubScene !== "authorize_user" ? 1 : 0,
-        scale: [1.4, 0.3, 0],
+    loadDataPosX: loadDataTextState.position.x,
-        texture:
+    loadDataPosY: loadDataTextState.position.y,
-          activeMainMenuElement === "load_data"
+    config: { duration: 500 },
-            ? loadDataActiveTex
+  });
-            : loadDataInactiveTex,
-      };
-    }
-  }, [
-    activeMainMenuElement,
-    loadDataActiveTex,
-    loadDataHeaderTex,
-    loadDataInactiveTex,
-    props.activeSubScene,
-  ]);
 
   return (
     <>

src/core/StateManagers/BootManager.tsx

@@ -3,54 +3,50 @@ import { StateManagerProps } from "./EventManager";
 import { useBootStore } from "../../store";
 
 const BootManager = (props: StateManagerProps) => {
-  const setActiveMainMenuElement = useBootStore(
+  const setActiveBootElement = useBootStore(
-    (state) => state.setActiveMainMenuElement
+    (state) => state.setActiveBootElement
   );
-  const setActiveLoadDataElement = useBootStore(
-    (state) => state.setActiveLoadDataElement
-  );
-  const setAuthorizeUserPos = useBootStore(
-    (state) => state.setAuthorizeUserPos
-  );
-  const setLoadDataPos = useBootStore((state) => state.setLoadDataPos);
 
   const dispatchObject = useCallback(
     (event: string) => {
       const dispatcherObjects = {
         main_menu_down: {
-          action: setActiveMainMenuElement,
+          action: setActiveBootElement,
           value: "load_data",
         },
         main_menu_up: {
-          action: setActiveMainMenuElement,
+          action: setActiveBootElement,
           value: "authorize_user",
         },
         load_data_left: {
-          action: setActiveLoadDataElement,
+          action: setActiveBootElement,
-          value: "yes",
+          value: "load_data_yes",
         },
         load_data_right: {
-          action: setActiveLoadDataElement,
+          action: setActiveBootElement,
-          value: "no",
+          value: "load_data_no",
+        },
+        authorize_user_back: {
+          action: setActiveBootElement,
+          value: "authorize_user",
         },
         select_authorize_user: {
-          action: setAuthorizeUserPos,
+          action: setActiveBootElement,
-          value: { x: 1.13, y: 1.2 },
+          value: "authorize_user",
+        },
+        select_load_data_no: {
+          action: setActiveBootElement,
+          value: "load_data",
         },
         select_load_data: {
-          action: setLoadDataPos,
+          action: setActiveBootElement,
-          value: { x: -1.13, y: -1 },
+          value: "load_data_yes"
-        },
+        }
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [
+    [setActiveBootElement]
-      setActiveLoadDataElement,
-      setActiveMainMenuElement,
-      setAuthorizeUserPos,
-      setLoadDataPos,
-    ]
   );
 
   useEffect(() => {

src/core/StateManagers/EventManager.tsx

@@ -32,6 +32,7 @@ const getKeyCodeAssociation = (keyCode: number): string => {
     38: "up", // up arrow
     39: "right", // right arrow
     88: "select", // x key
+    90: "back", // z key
   };
   return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
 };
@@ -44,6 +45,7 @@ type EventState = {
   newActiveBlueOrbId: string;
   newSiteRotIdx: string;
 };
+
 export type StateManagerProps = {
   eventState: any;
 };
@@ -56,7 +58,7 @@ export type GameContext = {
   currentLevel: string;
   siteRotIdx: string;
   activeMediaComponent: string;
-  activeMainMenuElement: string;
+  activeBootElement: string;
 };
 
 const EventManager = () => {
@@ -76,9 +78,7 @@ const EventManager = () => {
   );
 
   // boot scene
-  const activeMainMenuElement = useBootStore(
+  const activeBootElement = useBootStore((state) => state.activeBootElement);
-    (state) => state.activeMainMenuElement
-  );
 
   const [eventState, setEventState] = useState<any>();
 
@@ -92,10 +92,10 @@ const EventManager = () => {
       blueOrbMatrixIndices: blueOrbMatrixIndices,
       currentLevel: currentLevel,
       activeMediaComponent: activeMediaComponent,
-      activeMainMenuElement: activeMainMenuElement,
+      activeBootElement: activeBootElement,
     }),
     [
-      activeMainMenuElement,
+      activeBootElement,
       activeMediaComponent,
       blueOrbMatrixIndices,
       currentLevel,

src/core/StateManagers/SubSceneManager.tsx

@@ -10,15 +10,21 @@ const SubSceneManager = (props: StateManagerProps) => {
   const dispatchObject = useCallback(
     (event: string) => {
       const dispatcherObjects = {
+        authorize_user_back: {
+          action: setActiveSubscene,
+          value: "main_menu",
+        },
         select_authorize_user: {
           action: setActiveSubscene,
           value: "authorize_user",
-          delay: 0,
         },
         select_load_data: {
           action: setActiveSubscene,
           value: "load_data",
-          delay: 0,
+        },
+        select_load_data_no: {
+          action: setActiveSubscene,
+          value: "main_menu",
         },
       };
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
@@ -33,9 +39,7 @@ const SubSceneManager = (props: StateManagerProps) => {
       const dispatchedObject = dispatchObject(eventAction);
 
       if (dispatchedObject) {
-        setTimeout(() => {
         dispatchedObject.action(dispatchedObject.value);
-        }, dispatchedObject.delay);
       }
     }
   }, [props.eventState, dispatchObject]);

src/core/bootEventHandler.ts

@@ -3,7 +3,7 @@ import { GameContext } from "./StateManagers/EventManager";
 const handleBootEvent = (gameContext: GameContext) => {
   const keyPress = gameContext.keyPress;
 
-  const activeMainMenuElement = gameContext.activeMainMenuElement;
+  const activeBootElement = gameContext.activeBootElement;
   const currentSubscene = gameContext.subscene;
 
   switch (keyPress) {
@@ -11,9 +11,10 @@ const handleBootEvent = (gameContext: GameContext) => {
     case "up":
     case "left":
     case "right":
+    case "back":
       return { event: `${currentSubscene}_${keyPress}` };
     case "select":
-      return { event: `select_${activeMainMenuElement}` };
+      return { event: `select_${activeBootElement}` };
   }
 };
 

src/store.ts

@@ -164,14 +164,8 @@ type SubsceneState = {
 };
 
 type MainMenuState = {
-  activeMainMenuElement: string;
+  activeBootElement: string;
-  authorizeUserPos: { x: number; y: number };
+  setActiveBootElement: (to: string) => void;
-  loadDataPos: { x: number; y: number };
-  setAuthorizeUserPos: (to: { x: number; y: number }) => void;
-  setActiveMainMenuElement: (to: string) => void;
-  setLoadDataPos: (to: { x: number; y: number }) => void;
-  activeLoadDataElement: string;
-  setActiveLoadDataElement: (to: string) => void;
 };
 
 export const useTextRendererStore = create<TextRendererState>((set) => ({
@@ -405,19 +399,8 @@ export const useSubsceneStore = create<SubsceneState>((set) => ({
 }));
 
 export const useBootStore = create<MainMenuState>((set) => ({
-  activeMainMenuElement: "authorize_user",
+  activeBootElement: "load_data_yes",
-  authorizeUserPos: { x: 0, y: 0.5 },
+  setActiveBootElement: (to: string) => set(() => ({ activeBootElement: to })),
-  loadDataPos: { x: 0, y: -0.5 },
-  setActiveMainMenuElement: (to: string) =>
-    set(() => ({ activeMainMenuElement: to })),
-  setAuthorizeUserPos: (to) =>
-    set(() => ({
-      authorizeUserPos: to,
-    })),
-  setLoadDataPos: (to) => set(() => ({ loadDataPos: to })),
-  activeLoadDataElement: "yes",
-  setActiveLoadDataElement: (to: string) =>
-    set(() => ({ activeLoadDataElement: to })),
 }));
 
 export const useImageStore = create(