adding authorization scene

src/components/Boot/BootAnimation.tsx

@@ -14,10 +14,10 @@ import bootBackgroundDistortedTex from "../../static/sprite/distorted_text.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import { a, useSpring } from "@react-spring/three";
 import * as THREE from "three";
-import { OrbitControls } from "@react-three/drei";
 
 type BootAnimationProps = {
   visible: boolean;
+  activeSubScene: string;
 };
 
 const BootAnimation = (props: BootAnimationProps) => {
@@ -149,7 +149,8 @@ const BootAnimation = (props: BootAnimationProps) => {
         setLofPosY(1);
 
         setBackgroundFloatingTextShown(true);
-      }, 4200);
+        //4200
+      }, 0);
     }
   }, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
 
@@ -163,11 +164,12 @@ const BootAnimation = (props: BootAnimationProps) => {
     config: { duration: 300 },
   });
 
-  const positionState = useSpring({
+  const animationState = useSpring({
     graySquarePosY: graySquarePosY,
     lofPosX: lofPosX,
     lofPosY: lofPosY,
-    config: { duration: 600 },
+    lofOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
+    config: { duration: 500 },
   });
 
   const firstBackgroundTextRef = useRef<THREE.Object3D>();
@@ -177,7 +179,18 @@ const BootAnimation = (props: BootAnimationProps) => {
 
   return (
     <>
-      {props.visible ? (
+      <a.sprite
+        scale={[1.2, 0.4, 0]}
+        position-x={animationState.lofPosX}
+        position-y={animationState.lofPosY}
+      >
+        <a.spriteMaterial
+          attach="material"
+          map={bootLofTex}
+          opacity={animationState.lofOpacity}
+        />
+      </a.sprite>
+      {props.visible && props.activeSubScene === "main_menu" ? (
         <>
           {/*we have two of each to create looping effect*/}
           <a.sprite
@@ -237,14 +250,6 @@ const BootAnimation = (props: BootAnimationProps) => {
               />
             </a.sprite>
           </group>
-
-          <a.sprite
-            scale={[1.2, 0.4, 0]}
-            position-x={positionState.lofPosX}
-            position-y={positionState.lofPosY}
-          >
-            <spriteMaterial attach="material" map={bootLofTex} />
-          </a.sprite>
           <sprite scale={[2.2, 0.66, 0]} position={[-1.1, -0.8, 0]}>
             <a.spriteMaterial
               attach="material"
@@ -302,7 +307,7 @@ const BootAnimation = (props: BootAnimationProps) => {
 
           <a.sprite
             scale={[0.2, 0.2, 0]}
-            position-y={positionState.graySquarePosY}
+            position-y={animationState.graySquarePosY}
           >
             <spriteMaterial
               attach="material"

src/components/Boot/BootAuthorizeUser.tsx

@@ -0,0 +1,121 @@
+import React 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";
+import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.png";
+import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
+import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_letters.png";
+import { useLoader } from "react-three-fiber";
+import * as THREE from "three";
+
+type BootAuthorizeUserProps = {
+  visible: boolean;
+};
+
+const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
+  const authorizeHeaderUnderlineTex = useLoader(
+    THREE.TextureLoader,
+    authorizeHeaderUnderline
+  );
+  const authorizeGlassTex = useLoader(THREE.TextureLoader, authorizeGlass);
+  const authorizeGlassUnderlineTex = useLoader(
+    THREE.TextureLoader,
+    authorizeGlassUnderline
+  );
+  const authorizeOrangeSquareTex = useLoader(
+    THREE.TextureLoader,
+    authorizeOrangeSquare
+  );
+  const authorizeStartToFinishTex = useLoader(
+    THREE.TextureLoader,
+    authorizeStartToFinish
+  );
+  const authorizeInactiveLettersTex = useLoader(
+    THREE.TextureLoader,
+    authorizeInactiveLetters
+  );
+
+  return (
+    <>
+      {props.visible ? (
+        <>
+          <sprite
+            scale={[3.5, 0.01, 0]}
+            position={[0.5, 1.1, 0]}
+            renderOrder={2}
+          >
+            <spriteMaterial
+              map={authorizeHeaderUnderlineTex}
+              attach="material"
+              transparent={true}
+            />
+          </sprite>
+          <sprite
+            scale={[2.2 * 0.9, 0.15 * 0.9, 0]}
+            position={[1, 1, 0]}
+            renderOrder={2}
+          >
+            <spriteMaterial
+              map={authorizeStartToFinishTex}
+              attach="material"
+              transparent={true}
+            />
+          </sprite>
+
+          <sprite
+            scale={[0.85, 0.65, 0]}
+            position={[0.35, -0.1, 0]}
+            renderOrder={3}
+          >
+            <spriteMaterial
+              map={authorizeGlassTex}
+              attach="material"
+              transparent={true}
+            />
+          </sprite>
+          <sprite
+            scale={[0.2, 0.2, 0]}
+            position={[-0.2, -0.3, 0]}
+            renderOrder={3}
+          >
+            <spriteMaterial
+              map={authorizeOrangeSquareTex}
+              attach="material"
+              transparent={true}
+            />
+          </sprite>
+
+          <sprite
+            scale={[2, 0.01, 0]}
+            position={[-1.06, -0.42, 0]}
+            renderOrder={2}
+          >
+            <spriteMaterial
+              map={authorizeGlassUnderlineTex}
+              attach="material"
+              transparent={true}
+            />
+          </sprite>
+
+          <mesh
+            scale={[5*1.5, 1.28*1.5, 0]}
+            position={[-1.06, -0.42, 0]}
+            rotation={[-0.8, 0, -0.3]}
+            renderOrder={-1}
+          >
+            <planeBufferGeometry attach="geometry" />
+            <meshBasicMaterial
+              map={authorizeInactiveLettersTex}
+              attach="material"
+              transparent={true}
+            />
+          </mesh>
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default BootAuthorizeUser;

src/components/Boot/BootMainMenu.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { a } from "@react-spring/three";
-import authorizeActive from "../../static/sprite/authorize_user_active.png";
-import authorizeInactive from "../../static/sprite/authorize_user_inactive.png";
-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 { useMainMenuStore } from "../../store";
-
-type BootMainMenuProps = {
-  visible: boolean;
-};
-
-const BootMainMenu = (props: BootMainMenuProps) => {
-  const activeMainMenuElement = useMainMenuStore(
-    (state) => state.activeMainMenuElement
-  );
-
-  const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive);
-  const authorizeInactiveTex = useLoader(
-    THREE.TextureLoader,
-    authorizeInactive
-  );
-  const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
-  const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive);
-
-  return (
-    <>
-      {props.visible ? (
-        <>
-          <a.sprite
-            scale={[1.8, 0.3, 0]}
-            renderOrder={1}
-            position={[0, 0.5, 0]}
-          >
-            <spriteMaterial
-              attach="material"
-              map={
-                activeMainMenuElement === "authorize_user"
-                  ? authorizeActiveTex
-                  : authorizeInactiveTex
-              }
-              transparent={true}
-            />
-          </a.sprite>
-
-          <a.sprite
-            scale={[1.4, 0.3, 0]}
-            renderOrder={1}
-            position={[0, -0.5, 0]}
-          >
-            <spriteMaterial
-              attach="material"
-              map={
-                activeMainMenuElement === "load_data"
-                  ? loadDataActiveTex
-                  : loadDataInactiveTex
-              }
-              transparent={true}
-            />
-          </a.sprite>
-        </>
-      ) : (
-        <></>
-      )}
-    </>
-  );
-};
-
-export default BootMainMenu;

src/components/Boot/BootMainMenuComponents.tsx

@@ -0,0 +1,106 @@
+import React, { useMemo } from "react";
+import { a, useSpring } from "@react-spring/three";
+import authorizeActive from "../../static/sprite/authorize_user_active.png";
+import authorizeInactive from "../../static/sprite/authorize_user_inactive.png";
+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 authorizeUserHeader from "../../static/sprite/authorize_user_scene_header.png";
+
+type BootMainMenuProps = {
+  visible: boolean;
+  activeSubScene: string;
+};
+
+const BootMainMenuComponents = (props: BootMainMenuProps) => {
+  const activeMainMenuElement = useBootMainMenuStore(
+    (state) => state.activeMainMenuElement
+  );
+  const authorizeUserPos = useBootMainMenuStore(
+    (state) => state.authorizeUserPos
+  );
+
+  const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive);
+  const authorizeInactiveTex = useLoader(
+    THREE.TextureLoader,
+    authorizeInactive
+  );
+  const authorizeUserHeaderTex = useLoader(
+    THREE.TextureLoader,
+    authorizeUserHeader
+  );
+
+  const loadDataActiveTex = useLoader(THREE.TextureLoader, loadDataActive);
+  const loadDataInactiveTex = useLoader(THREE.TextureLoader, loadDataInactive);
+
+  const mainMenuAnimationState = useSpring({
+    authorizeUserPosX: authorizeUserPos.x,
+    authorizeUserPosY: authorizeUserPos.y,
+    loadDataOpacity: props.activeSubScene === "main_menu" ? 1 : 0,
+    config: { duration: 500 },
+  });
+
+  const authorizeUserTextState = useMemo(() => {
+    if (props.activeSubScene === "authorize_user") {
+      return { scale: [1.8, 0.16, 0], texture: authorizeUserHeaderTex };
+    } else {
+      return {
+        scale: [1.8, 0.3, 0],
+        texture:
+          activeMainMenuElement === "authorize_user"
+            ? authorizeActiveTex
+            : authorizeInactiveTex,
+      };
+    }
+  }, [
+    activeMainMenuElement,
+    authorizeActiveTex,
+    authorizeInactiveTex,
+    authorizeUserHeaderTex,
+    props.activeSubScene,
+  ]);
+
+  return (
+    <>
+      {props.visible ? (
+        <>
+          <a.sprite
+            scale={authorizeUserTextState.scale as [number, number, number]}
+            renderOrder={1}
+            position-x={mainMenuAnimationState.authorizeUserPosX}
+            position-y={mainMenuAnimationState.authorizeUserPosY}
+          >
+            <spriteMaterial
+              attach="material"
+              map={authorizeUserTextState.texture}
+              transparent={true}
+            />
+          </a.sprite>
+
+          <a.sprite
+            scale={[1.4, 0.3, 0]}
+            renderOrder={1}
+            position={[0, -0.5, 0]}
+          >
+            <a.spriteMaterial
+              attach="material"
+              map={
+                activeMainMenuElement === "load_data"
+                  ? loadDataActiveTex
+                  : loadDataInactiveTex
+              }
+              transparent={true}
+              opacity={mainMenuAnimationState.loadDataOpacity}
+            />
+          </a.sprite>
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default BootMainMenuComponents;

src/core/StateManagers/EventManager.tsx

@@ -6,6 +6,7 @@ import BlueOrbManager from "./BlueOrbManager";
 import BlueOrbHUDManager from "./BlueOrbHUDManager";
 import {
   useBlueOrbStore,
+  useBootMainMenuStore,
   useLevelStore,
   useMediaStore,
   useSceneStore,
@@ -19,9 +20,9 @@ import SceneManager from "./SceneManager";
 import YellowTextManager from "./YellowTextManager";
 import MediaImageManager from "./MediaImageManager";
 import computeAction from "../computeAction";
-import available_blue_orbs_on_projection from "../../resources/available_blue_orbs_on_projection.json";
 import LevelManager from "./LevelManager";
 import MainMenuManager from "./MainMenuManager";
+import SubSceneManager from "./SubSceneManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -53,6 +54,7 @@ export type GameContext = {
   currentLevel: string;
   siteRotIdx: string;
   activeMediaComponent: string;
+  activeMainMenuElement: string;
 };
 
 const EventManager = () => {
@@ -70,6 +72,11 @@ const EventManager = () => {
     (state) => state.activeMediaComponent
   );
 
+  // boot scene
+  const activeMainMenuElement = useBootMainMenuStore(
+    (state) => state.activeMainMenuElement
+  );
+
   const [eventState, setEventState] = useState<any>();
 
   const [inputCooldown, setInputCooldown] = useState(false);
@@ -81,8 +88,10 @@ const EventManager = () => {
       blueOrbMatrixIndices: blueOrbMatrixIndices,
       currentLevel: currentLevel,
       activeMediaComponent: activeMediaComponent,
+      activeMainMenuElement: activeMainMenuElement,
     }),
     [
+      activeMainMenuElement,
       activeMediaComponent,
       blueOrbMatrixIndices,
       currentLevel,
@@ -130,6 +139,7 @@ const EventManager = () => {
       <MediaImageManager eventState={eventState!} />
       <LevelManager eventState={eventState!} />
       <MainMenuManager eventState={eventState!} />
+      <SubSceneManager eventState={eventState!} />
     </>
   );
 };

src/core/StateManagers/MainMenuManager.tsx

@@ -1,11 +1,14 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
-import { useMainMenuStore } from "../../store";
+import { useBootMainMenuStore } from "../../store";
 
 const MainMenuManager = (props: StateManagerProps) => {
-  const setActiveMainMenuElement = useMainMenuStore(
+  const setActiveMainMenuElement = useBootMainMenuStore(
     (state) => state.setActiveMainMenuElement
   );
+  const setAuthorizeUserPos = useBootMainMenuStore(
+    (state) => state.setAuthorizeUserPos
+  );
 
   const dispatchObject = useCallback(
     (event: string) => {
@@ -18,11 +21,15 @@ const MainMenuManager = (props: StateManagerProps) => {
           action: setActiveMainMenuElement,
           value: "authorize_user",
         },
+        select_authorize_user: {
+          action: setAuthorizeUserPos,
+          value: { x: 1.13, y: 1.2 },
+        },
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];
     },
-    [setActiveMainMenuElement]
+    [setActiveMainMenuElement, setAuthorizeUserPos]
   );
 
   useEffect(() => {
@@ -31,7 +38,7 @@ const MainMenuManager = (props: StateManagerProps) => {
 
       const dispatchedObject = dispatchObject(eventAction);
       if (dispatchedObject) {
-        dispatchedObject.action(dispatchedObject.value);
+        dispatchedObject.action(dispatchedObject.value as any);
       }
     }
   }, [dispatchObject, props.eventState]);

src/core/StateManagers/SubSceneManager.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useEffect } from "react";
+import { StateManagerProps } from "./EventManager";
+import { useBootStore } from "../../store";
+
+const SubSceneManager = (props: StateManagerProps) => {
+  const setActiveBootSubScene = useBootStore(
+    (state) => state.setActiveBootSubScene
+  );
+
+  const dispatchObject = useCallback(
+    (event: string) => {
+      const dispatcherObjects = {
+        select_authorize_user: {
+          action: setActiveBootSubScene,
+          value: "authorize_user",
+          delay: 0,
+        },
+      };
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [setActiveBootSubScene]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventAction = props.eventState.event;
+
+      const dispatchedObject = dispatchObject(eventAction);
+
+      if (dispatchedObject) {
+        setTimeout(() => {
+          dispatchedObject.action(dispatchedObject.value);
+        }, dispatchedObject.delay);
+      }
+    }
+  }, [props.eventState, dispatchObject]);
+
+  return null;
+};
+
+export default SubSceneManager;

src/core/bootMainMenuEventHandler.ts

@@ -3,11 +3,15 @@ import { GameContext } from "./StateManagers/EventManager";
 const handleBootMainMenuEvent = (gameContext: GameContext) => {
   const keyPress = gameContext.keyPress;
 
+  const activeMainMenuElement = gameContext.activeMainMenuElement;
+
   switch (keyPress) {
     case "down":
       return { event: "switch_to_load_data" };
     case "up":
       return { event: "switch_to_authorize_user" };
+    case "select":
+      return { event: `select_${activeMainMenuElement}` };
   }
 };
 

src/scenes/BootScene.tsx

@@ -1,26 +1,39 @@
 import React, { useEffect, useState } from "react";
 import BootAccela from "../components/Boot/BootAccela";
 import BootAnimation from "../components/Boot/BootAnimation";
-import BootMainMenu from "../components/Boot/BootMainMenu";
+import BootMainMenuComponents from "../components/Boot/BootMainMenuComponents";
+import { useBootStore } from "../store";
+import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
 
 const BootScene = () => {
+  const activeBootSubScene = useBootStore((state) => state.activeBootSubScene);
+
   const [accelaVisible, setAccelaVisible] = useState(true);
   const [mainMenuVisible, setMainMenuVisible] = useState(false);
 
   useEffect(() => {
     setTimeout(() => {
       setAccelaVisible(false);
-    }, 2000);
+      // 2000
+    }, 0);
     setTimeout(() => {
       setMainMenuVisible(true);
-    }, 6200);
+      //6200
+    }, 0);
   }, []);
 
   return (
     <perspectiveCamera position-z={3}>
       <BootAccela visible={accelaVisible} />
-      <BootAnimation visible={!accelaVisible} />
-      <BootMainMenu visible={mainMenuVisible} />
+      <BootAnimation
+        visible={!accelaVisible}
+        activeSubScene={activeBootSubScene}
+      />
+      <BootMainMenuComponents
+        visible={mainMenuVisible}
+        activeSubScene={activeBootSubScene}
+      />
+      <BootAuthorizeUser visible={activeBootSubScene === "authorize_user"} />
     </perspectiveCamera>
   );
 };

src/store.ts

@@ -1,6 +1,5 @@
 import create from "zustand";
 import { combine } from "zustand/middleware";
-import available_blue_orbs_on_projection from "./resources/available_blue_orbs_on_projection.json";
 
 type SceneState = {
   currentScene: string;
@@ -159,10 +158,17 @@ type ImageState = {
   };
 };
 
-type MainMenuState ={
+type BootState = {
+  activeBootSubScene: string;
+  setActiveBootSubScene: (to: string) => void;
+};
+
+type MainMenuState = {
   activeMainMenuElement: string;
+  authorizeUserPos: { x: number; y: number };
+  setAuthorizeUserPos: (to: { x: number; y: number }) => void;
   setActiveMainMenuElement: (to: string) => void;
-}
+};
 
 export const useTextRendererStore = create<TextRendererState>((set) => ({
   // yellow text
@@ -389,10 +395,21 @@ export const useSceneStore = create<SceneState>((set) => ({
   setScene: (to) => set(() => ({ currentScene: to })),
 }));
 
-export const useMainMenuStore = create<MainMenuState>(set=> ({
+export const useBootStore = create<BootState>((set) => ({
+  activeBootSubScene: "authorize_user",
+  setActiveBootSubScene: (to) => set(() => ({ activeBootSubScene: to })),
+}));
+
+export const useBootMainMenuStore = create<MainMenuState>((set) => ({
   activeMainMenuElement: "authorize_user",
-  setActiveMainMenuElement: (to) => set(() => ({activeMainMenuElement: to}))
-}))
+  authorizeUserPos: { x: 0, y: 0.5 },
+  setActiveMainMenuElement: (to: string) =>
+    set(() => ({ activeMainMenuElement: to })),
+  setAuthorizeUserPos: (to: { x: number; y: number }) =>
+    set(() => ({
+      authorizeUserPos: to,
+    })),
+}));
 
 export const useImageStore = create(
   combine(