added more stuff to load data subscene

src/components/Boot/BootAnimation.tsx

@@ -169,6 +169,7 @@ const BootAnimation = (props: BootAnimationProps) => {
     lofPosX: lofPosX,
     lofPosY: lofPosY,
     lofOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
+    graySquareOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
     config: { duration: 500 },
   });
 
@@ -190,7 +191,18 @@ const BootAnimation = (props: BootAnimationProps) => {
           opacity={animationState.lofOpacity}
         />
       </a.sprite>
-      {props.visible && props.activeSubScene === "main_menu" ? (
+      <a.sprite
+        scale={[0.2, 0.2, 0]}
+        position-y={animationState.graySquarePosY}
+      >
+        <a.spriteMaterial
+          attach="material"
+          map={bootGraySquareTex}
+          ref={graySquareRef}
+          opacity={animationState.graySquareOpacity}
+        />
+      </a.sprite>
+      {props.visible && props.activeSubScene !== "authorize_user" ? (
         <>
           {/*we have two of each to create looping effect*/}
           <a.sprite
@@ -304,17 +316,6 @@ const BootAnimation = (props: BootAnimationProps) => {
               opacity={bootState.bootOpacity}
             />
           </sprite>
-
-          <a.sprite
-            scale={[0.2, 0.2, 0]}
-            position-y={animationState.graySquarePosY}
-          >
-            <spriteMaterial
-              attach="material"
-              map={bootGraySquareTex}
-              ref={graySquareRef}
-            />
-          </a.sprite>
         </>
       ) : (
         <></>

src/components/Boot/BootLoadData.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import loadDataUnderline from "../../static/sprite/load_data_header_underline.png";
+import loadDataQuestionContainer from "../../static/sprite/load_data_question_container.png";
+import loadDataAnswerContainer from "../../static/sprite/load_data_answer_container.png";
+import areYouSure from "../../static/sprite/are_you_sure.png";
+import yes from "../../static/sprite/Yes.png";
+import no from "../../static/sprite/No.png";
+import * as THREE from "three";
+import { useLoader } from "react-three-fiber";
+import { useBootStore } from "../../store";
+
+type BootLoadDataProps = {
+  visible: boolean;
+};
+
+const BootLoadData = (props: BootLoadDataProps) => {
+  const loadDataUnderlineTex = useLoader(
+    THREE.TextureLoader,
+    loadDataUnderline
+  );
+  const loadDataQuestionContainerTex = useLoader(
+    THREE.TextureLoader,
+    loadDataQuestionContainer
+  );
+  const loadDataAnswerContainerTex = useLoader(
+    THREE.TextureLoader,
+    loadDataAnswerContainer
+  );
+  const areYouSureTex = useLoader(THREE.TextureLoader, areYouSure);
+  const yesTex = useLoader(THREE.TextureLoader, yes);
+  const noTex = useLoader(THREE.TextureLoader, no);
+
+  const activeLoadDataElement = useBootStore(
+    (state) => state.activeLoadDataElement
+  );
+
+  return (
+    <>
+      {props.visible ? (
+        <>
+          <sprite scale={[4.1, 0.3, 0]} renderOrder={2} position={[0, 0.2, 0]}>
+            <spriteMaterial
+              map={loadDataQuestionContainerTex}
+              attach="material"
+              transparent={true}
+              opacity={0.6}
+            />
+          </sprite>
+
+          <sprite scale={[2, 0.24, 0]} renderOrder={3} position={[0, 0.19, 0]}>
+            <spriteMaterial
+              map={areYouSureTex}
+              attach="material"
+              transparent={true}
+            />
+          </sprite>
+
+          <sprite
+            scale={[0.5, 0.19, 0]}
+            renderOrder={3}
+            position={[-1.2, -0.2, 0]}
+          >
+            <spriteMaterial map={yesTex} attach="material" transparent={true} />
+          </sprite>
+
+          <sprite
+            scale={[0.7, 0.3, 0]}
+            renderOrder={2}
+            position={
+              activeLoadDataElement === "yes" ? [-1.2, -0.2, 0] : [1.2, -0.2, 0]
+            }
+          >
+            <spriteMaterial
+              map={loadDataAnswerContainerTex}
+              attach="material"
+              transparent={true}
+            />
+          </sprite>
+
+          <sprite
+            scale={[0.4, 0.19, 0]}
+            renderOrder={3}
+            position={[1.2, -0.2, 0]}
+          >
+            <spriteMaterial map={noTex} attach="material" transparent={true} />
+          </sprite>
+
+          <sprite
+            scale={[3.5, 0.01, 0]}
+            position={[-0.5, -1.15, 0]}
+            renderOrder={2}
+          >
+            <spriteMaterial
+              map={loadDataUnderlineTex}
+              attach="material"
+              transparent={true}
+            />
+          </sprite>
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default BootLoadData;

src/components/Boot/BootMainMenuComponents.tsx

@@ -6,8 +6,9 @@ import loadDataActive from "../../static/sprite/load_data_active.png";
 import loadDataInactive from "../../static/sprite/load_data_inactive.png";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { useBootMainMenuStore } from "../../store";
+import { useBootStore } from "../../store";
 import authorizeUserHeader from "../../static/sprite/authorize_user_scene_header.png";
+import loadDataHeader from "../../static/sprite/load_data_header.png";
 
 type BootMainMenuProps = {
   visible: boolean;
@@ -15,10 +16,10 @@ type BootMainMenuProps = {
 };
 
 const BootMainMenuComponents = (props: BootMainMenuProps) => {
-  const activeMainMenuElement = useBootMainMenuStore(
+  const activeMainMenuElement = useBootStore(
     (state) => state.activeMainMenuElement
   );
-  const authorizeUserPos = useBootMainMenuStore(
+  const authorizeUserPos = useBootStore(
     (state) => state.authorizeUserPos
   );
 
@@ -34,11 +35,17 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
 
   const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
   const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive);
+  const loadDataHeaderTex = useLoader(THREE.TextureLoader, loadDataHeader);
+
+  const loadDataPos = useBootStore((state) => state.loadDataPos);
 
   const mainMenuAnimationState = useSpring({
     authorizeUserPosX: authorizeUserPos.x,
     authorizeUserPosY: authorizeUserPos.y,
-    loadDataOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
+    authorizeUserOpacity: props.activeSubScene !== "load_data" ? 1 : 0,
+    loadDataOpacity: props.activeSubScene !== "authorize_user" ? 1 : 0,
+    loadDataPosX: loadDataPos.x,
+    loadDataPosY: loadDataPos.y,
     config: { duration: 500 },
   });
 
@@ -62,6 +69,26 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
     props.activeSubScene,
   ]);
 
+  const loadDataTextState = useMemo(() => {
+    if (props.activeSubScene === "load_data") {
+      return { scale: [1.4, 0.16, 0], texture: loadDataHeaderTex };
+    } else {
+      return {
+        scale: [1.4, 0.3, 0],
+        texture:
+          activeMainMenuElement === "load_data"
+            ? loadDataActiveTex
+            : loadDataInactiveTex,
+      };
+    }
+  }, [
+    activeMainMenuElement,
+    loadDataActiveTex,
+    loadDataHeaderTex,
+    loadDataInactiveTex,
+    props.activeSubScene,
+  ]);
+
   return (
     <>
       {props.visible ? (
@@ -72,25 +99,23 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
             position-x={mainMenuAnimationState.authorizeUserPosX}
             position-y={mainMenuAnimationState.authorizeUserPosY}
           >
-            <spriteMaterial
+            <a.spriteMaterial
               attach="material"
               map={authorizeUserTextState.texture}
               transparent={true}
+              opacity={mainMenuAnimationState.authorizeUserOpacity}
             />
           </a.sprite>
 
           <a.sprite
-            scale={[1.4, 0.3, 0]}
+            scale={loadDataTextState.scale as [number, number, number]}
             renderOrder={1}
-            position={[0, -0.5, 0]}
+            position-x={mainMenuAnimationState.loadDataPosX}
+            position-y={mainMenuAnimationState.loadDataPosY}
           >
             <a.spriteMaterial
               attach="material"
-              map={
-                activeMainMenuElement === "load_data"
-                  ? loadDataActiveTex
-                  : loadDataInactiveTex
-              }
+              map={loadDataTextState.texture}
               transparent={true}
               opacity={mainMenuAnimationState.loadDataOpacity}
             />

src/core/StateManagers/BootManager.tsx

@@ -1,35 +1,56 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
-import { useBootMainMenuStore } from "../../store";
+import { useBootStore } from "../../store";
 
-const MainMenuManager = (props: StateManagerProps) => {
-  const setActiveMainMenuElement = useBootMainMenuStore(
+const BootManager = (props: StateManagerProps) => {
+  const setActiveMainMenuElement = useBootStore(
     (state) => state.setActiveMainMenuElement
   );
-  const setAuthorizeUserPos = useBootMainMenuStore(
+  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 = {
-        switch_to_load_data: {
+        main_menu_down: {
           action: setActiveMainMenuElement,
           value: "load_data",
         },
-        switch_to_authorize_user: {
+        main_menu_up: {
           action: setActiveMainMenuElement,
           value: "authorize_user",
         },
+        load_data_left: {
+          action: setActiveLoadDataElement,
+          value: "yes",
+        },
+        load_data_right: {
+          action: setActiveLoadDataElement,
+          value: "no",
+        },
         select_authorize_user: {
           action: setAuthorizeUserPos,
           value: { x: 1.13, y: 1.2 },
         },
+        select_load_data: {
+          action: setLoadDataPos,
+          value: { x: -1.13, y: -1 },
+        },
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [setActiveMainMenuElement, setAuthorizeUserPos]
+    [
+      setActiveLoadDataElement,
+      setActiveMainMenuElement,
+      setAuthorizeUserPos,
+      setLoadDataPos,
+    ]
   );
 
   useEffect(() => {
@@ -45,4 +66,4 @@ const MainMenuManager = (props: StateManagerProps) => {
   return null;
 };
 
-export default MainMenuManager;
+export default BootManager;

src/core/StateManagers/EventManager.tsx

@@ -6,11 +6,12 @@ import BlueOrbManager from "./BlueOrbManager";
 import BlueOrbHUDManager from "./BlueOrbHUDManager";
 import {
   useBlueOrbStore,
-  useBootMainMenuStore,
+  useBootStore,
   useLevelStore,
   useMediaStore,
   useSceneStore,
   useSiteStore,
+  useSubsceneStore,
 } from "../../store";
 import GreenTextManager from "./GreenTextManager";
 import MediaComponentManager from "./MediaComponentManager";
@@ -21,7 +22,7 @@ import YellowTextManager from "./YellowTextManager";
 import MediaImageManager from "./MediaImageManager";
 import computeAction from "../computeAction";
 import LevelManager from "./LevelManager";
-import MainMenuManager from "./MainMenuManager";
+import BootManager from "./BootManager";
 import SubSceneManager from "./SubSceneManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
@@ -50,6 +51,7 @@ export type StateManagerProps = {
 export type GameContext = {
   keyPress?: string;
   scene: string;
+  subscene: string;
   blueOrbMatrixIndices: { rowIdx: number; colIdx: number };
   currentLevel: string;
   siteRotIdx: string;
@@ -59,6 +61,7 @@ export type GameContext = {
 
 const EventManager = () => {
   const currentScene = useSceneStore((state) => state.currentScene);
+  const currentSubscene = useSubsceneStore((state) => state.activeSubscene);
 
   // main scene
   const blueOrbMatrixIndices = useBlueOrbStore(
@@ -73,7 +76,7 @@ const EventManager = () => {
   );
 
   // boot scene
-  const activeMainMenuElement = useBootMainMenuStore(
+  const activeMainMenuElement = useBootStore(
     (state) => state.activeMainMenuElement
   );
 
@@ -84,6 +87,7 @@ const EventManager = () => {
   const gameContext: GameContext = useMemo(
     () => ({
       scene: currentScene,
+      subscene: currentSubscene,
       siteRotIdx: siteRotIdx,
       blueOrbMatrixIndices: blueOrbMatrixIndices,
       currentLevel: currentLevel,
@@ -96,6 +100,7 @@ const EventManager = () => {
       blueOrbMatrixIndices,
       currentLevel,
       currentScene,
+      currentSubscene,
       siteRotIdx,
     ]
   );
@@ -138,7 +143,7 @@ const EventManager = () => {
       <YellowTextManager eventState={eventState!} />
       <MediaImageManager eventState={eventState!} />
       <LevelManager eventState={eventState!} />
-      <MainMenuManager eventState={eventState!} />
+      <BootManager eventState={eventState!} />
       <SubSceneManager eventState={eventState!} />
     </>
   );

src/core/StateManagers/SubSceneManager.tsx

@@ -1,24 +1,29 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
-import { useBootStore } from "../../store";
+import { useSubsceneStore } from "../../store";
 
 const SubSceneManager = (props: StateManagerProps) => {
-  const setActiveBootSubScene = useBootStore(
-    (state) => state.setActiveBootSubScene
+  const setActiveSubscene = useSubsceneStore(
+    (state) => state.setActiveSubScene
   );
 
   const dispatchObject = useCallback(
     (event: string) => {
       const dispatcherObjects = {
         select_authorize_user: {
-          action: setActiveBootSubScene,
+          action: setActiveSubscene,
           value: "authorize_user",
           delay: 0,
         },
+        select_load_data: {
+          action: setActiveSubscene,
+          value: "load_data",
+          delay: 0,
+        },
       };
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [setActiveBootSubScene]
+    [setActiveSubscene]
   );
 
   useEffect(() => {

src/core/bootEventHandler.ts

@@ -1,18 +1,20 @@
 import { GameContext } from "./StateManagers/EventManager";
 
-const handleBootMainMenuEvent = (gameContext: GameContext) => {
+const handleBootEvent = (gameContext: GameContext) => {
   const keyPress = gameContext.keyPress;
 
   const activeMainMenuElement = gameContext.activeMainMenuElement;
+  const currentSubscene = gameContext.subscene;
 
   switch (keyPress) {
     case "down":
-      return { event: "switch_to_load_data" };
     case "up":
-      return { event: "switch_to_authorize_user" };
+    case "left":
+    case "right":
+      return { event: `${currentSubscene}_${keyPress}` };
     case "select":
       return { event: `select_${activeMainMenuElement}` };
   }
 };
 
-export default handleBootMainMenuEvent;
+export default handleBootEvent;

src/core/computeAction.ts

@@ -1,7 +1,7 @@
 import { GameContext } from "./StateManagers/EventManager";
 import handleMainSceneEvent from "./mainSceneEventHandler";
 import handleMediaSceneEvent from "./mediaSceneEventHandler";
-import handleBootMainMenuEvent from "./bootMainMenuEventHandler";
+import handleBootMainMenuEvent from "./bootEventHandler";
 
 const computeAction = (gameContext: GameContext) => {
   switch (gameContext.scene) {

src/scenes/BootScene.tsx

@@ -2,11 +2,12 @@ import React, { useEffect, useState } from "react";
 import BootAccela from "../components/Boot/BootAccela";
 import BootAnimation from "../components/Boot/BootAnimation";
 import BootMainMenuComponents from "../components/Boot/BootMainMenuComponents";
-import { useBootStore } from "../store";
+import { useSubsceneStore } from "../store";
 import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
+import BootLoadData from "../components/Boot/BootLoadData";
 
 const BootScene = () => {
-  const activeBootSubScene = useBootStore((state) => state.activeBootSubScene);
+  const activeSubscene = useSubsceneStore((state) => state.activeSubscene);
 
   const [accelaVisible, setAccelaVisible] = useState(true);
   const [mainMenuVisible, setMainMenuVisible] = useState(false);
@@ -27,13 +28,14 @@ const BootScene = () => {
       <BootAccela visible={accelaVisible} />
       <BootAnimation
         visible={!accelaVisible}
-        activeSubScene={activeBootSubScene}
+        activeSubScene={activeSubscene}
       />
       <BootMainMenuComponents
         visible={mainMenuVisible}
-        activeSubScene={activeBootSubScene}
+        activeSubScene={activeSubscene}
       />
-      <BootAuthorizeUser visible={activeBootSubScene === "authorize_user"} />
+      <BootAuthorizeUser visible={activeSubscene === "authorize_user"} />
+      <BootLoadData visible={activeSubscene === "load_data"} />
     </perspectiveCamera>
   );
 };

src/store.ts

@@ -158,16 +158,20 @@ type ImageState = {
   };
 };
 
-type BootState = {
-  activeBootSubScene: string;
-  setActiveBootSubScene: (to: string) => void;
+type SubsceneState = {
+  activeSubscene: string;
+  setActiveSubScene: (to: string) => void;
 };
 
 type MainMenuState = {
   activeMainMenuElement: string;
   authorizeUserPos: { x: number; y: number };
+  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) => ({
@@ -395,20 +399,25 @@ export const useSceneStore = create<SceneState>((set) => ({
   setScene: (to) => set(() => ({ currentScene: to })),
 }));
 
-export const useBootStore = create<BootState>((set) => ({
-  activeBootSubScene: "authorize_user",
-  setActiveBootSubScene: (to) => set(() => ({ activeBootSubScene: to })),
+export const useSubsceneStore = create<SubsceneState>((set) => ({
+  activeSubscene: "load_data",
+  setActiveSubScene: (to) => set(() => ({ activeSubscene: to })),
 }));
 
-export const useBootMainMenuStore = create<MainMenuState>((set) => ({
+export const useBootStore = create<MainMenuState>((set) => ({
   activeMainMenuElement: "authorize_user",
   authorizeUserPos: { x: 0, y: 0.5 },
+  loadDataPos: { x: 0, y: -0.5 },
   setActiveMainMenuElement: (to: string) =>
     set(() => ({ activeMainMenuElement: to })),
-  setAuthorizeUserPos: (to: { x: number; y: number }) =>
+  setAuthorizeUserPos: (to) =>
     set(() => ({
       authorizeUserPos: to,
     })),
+  setLoadDataPos: (to) => set(() => ({ loadDataPos: to })),
+  activeLoadDataElement: "yes",
+  setActiveLoadDataElement: (to: string) =>
+    set(() => ({ activeLoadDataElement: to })),
 }));
 
 export const useImageStore = create(