made boot state a bit better, still wip

src/components/Boot/BootAuthorizeUser.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useRef } 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";
@@ -37,6 +37,12 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
 
   const backgroundLetterRef = useRef<THREE.Object3D>();
 
+  useFrame(() => {
+    if (backgroundLetterRef.current) {
+      // backgroundLetterRef.current.position.x += 0.01
+    }
+  });
+
   return (
     <>
       {props.visible ? (
@@ -73,6 +79,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
               map={authorizeGlassTex}
               attach="material"
               transparent={true}
+              depthTest={false}
             />
           </sprite>
           <sprite
@@ -84,6 +91,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
               map={authorizeOrangeSquareTex}
               attach="material"
               transparent={true}
+              depthTest={false}
             />
           </sprite>
 
@@ -96,14 +104,15 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
               map={authorizeGlassUnderlineTex}
               attach="material"
               transparent={true}
+              depthTest={false}
             />
           </sprite>
 
+          <group position={[-1.15, 0.4, 0.3]} rotation={[-0.8, 0, -0.3]}>
             <mesh
               scale={[4, 1.28, 0]}
-            position={[-1.06, 0.3, -0.3]}
-            rotation={[-1, 0, -0.3]}
               renderOrder={-1}
+              position={[-0.45, -0.6, 0]}
               ref={backgroundLetterRef}
             >
               <planeBufferGeometry attach="geometry" />
@@ -113,6 +122,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
                 transparent={true}
               />
             </mesh>
+          </group>
         </>
       ) : (
         <></>

src/components/Boot/BootLoadData.tsx

@@ -7,10 +7,10 @@ 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;
+  activeBootElement: string;
 };
 
 const BootLoadData = (props: BootLoadDataProps) => {
@@ -30,8 +30,6 @@ const BootLoadData = (props: BootLoadDataProps) => {
   const yesTex = useLoader(THREE.TextureLoader, yes);
   const noTex = useLoader(THREE.TextureLoader, no);
 
-  const activeBootElement = useBootStore((state) => state.activeBootElement);
-
   return (
     <>
       {props.visible ? (
@@ -65,7 +63,7 @@ const BootLoadData = (props: BootLoadDataProps) => {
             scale={[0.7, 0.3, 0]}
             renderOrder={2}
             position={
-              activeBootElement === "load_data_yes"
+              props.activeBootElement === "load_data_yes"
                 ? [-1.2, -0.2, 0]
                 : [1.2, -0.2, 0]
             }

src/components/Boot/BootMainMenuComponents.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, 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";
@@ -6,18 +6,16 @@ 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 { 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;
   activeSubScene: string;
+  activeBootElement: string;
 };
 
 const BootMainMenuComponents = (props: BootMainMenuProps) => {
-  const activeBootElement = useBootStore((state) => state.activeBootElement);
-
   const authorizeActiveTex = useLoader(THREE.TextureLoader, authorizeActive);
   const authorizeInactiveTex = useLoader(
     THREE.TextureLoader,
@@ -41,17 +39,17 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
     } else {
       return {
         texture:
-          activeBootElement === "load_data"
+          props.activeBootElement === "load_data"
             ? loadDataActiveTex
             : loadDataInactiveTex,
         position: { x: 0, y: -0.5 },
       };
     }
   }, [
-    activeBootElement,
     loadDataActiveTex,
     loadDataHeaderTex,
     loadDataInactiveTex,
+    props.activeBootElement,
     props.activeSubScene,
   ]);
 
@@ -66,17 +64,17 @@ const BootMainMenuComponents = (props: BootMainMenuProps) => {
       return {
         scale: [1.8, 0.3, 0],
         texture:
-          activeBootElement === "authorize_user"
+          props.activeBootElement === "authorize_user"
             ? authorizeActiveTex
             : authorizeInactiveTex,
         position: { x: 0, y: 0.5 },
       };
     }
   }, [
-    activeBootElement,
     authorizeActiveTex,
     authorizeInactiveTex,
     authorizeUserHeaderTex,
+    props.activeBootElement,
     props.activeSubScene,
   ]);
 

src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx

@@ -2,29 +2,24 @@ import React, { createRef, MutableRefObject, useMemo } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
 import AudioVisualizerColumn from "./AudioVisualizerColumn";
+import { useMediaStore } from "../../../store";
 
 const AudioVisualizer = () => {
-  const analyser = useMemo(() => {
+  const analyser = useMediaStore((state) => state.audioAnalyser);
-    const listener = new THREE.AudioListener();
 
-    const audio = new THREE.Audio(listener);
+  const columnRefs = useMemo(
-    audio.setMediaElementSource(
+    () =>
-      document.getElementById("media") as HTMLMediaElement
+      Array.from({ length: 15 }, () => [
+        createRef<THREE.Object3D>(),
+        createRef<THREE.Object3D>(),
+        createRef<THREE.Object3D>(),
+        createRef<THREE.Object3D>(),
+      ]),
+    []
   );
 
-    return new THREE.AudioAnalyser(audio, 2048);
-  }, []);
-
-  const columnRefs = useMemo(() => {
-    return Array.from({ length: 15 }, () => [
-      createRef<THREE.Object3D>(),
-      createRef<THREE.Object3D>(),
-      createRef<THREE.Object3D>(),
-      createRef<THREE.Object3D>(),
-    ]);
-  }, []);
-
   useFrame(() => {
+    if (analyser) {
       const frequencyData = analyser.getFrequencyData();
 
       columnRefs.forEach((refArray, idx) => {
@@ -70,6 +65,7 @@ const AudioVisualizer = () => {
             break;
         }
       });
+    }
   });
 
   return (

src/components/MediaScene/AudioVisualizer/AudioVisualizerColumn.tsx

@@ -32,6 +32,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
         scale={[0.4, 0.4, 0.4]}
         position={[-5.2, 3.8, 0]}
         renderOrder={10}
+        visible={false}
         ref={ref1}
       >
         <meshBasicMaterial
@@ -47,6 +48,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
         scale={[0.4, 0.4, 0.4]}
         position={[-4.65, 3.8, 0]}
         ref={ref2}
+        visible={false}
         renderOrder={5}
       >
         <meshBasicMaterial
@@ -63,6 +65,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
         scale={[0.4, 0.4, 0.4]}
         position={[-4.1, 3.8, 0]}
         ref={ref3}
+        visible={false}
         renderOrder={5}
       >
         <meshBasicMaterial
@@ -78,6 +81,7 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => {
         scale={[0.4, 0.4, 0.4]}
         position={[-3.55, 3.8, 0]}
         renderOrder={10}
+        visible={false}
         ref={ref4}
       >
         <meshBasicMaterial

src/components/MediaScene/MediaPlayer.tsx

@@ -35,8 +35,6 @@ const MediaPlayer = () => {
     <video
       width="800"
       height="600"
-      controls
-      autoPlay
       id="media"
       ref={videoRef}
       style={{ display: currentScene === "media" ? "block" : "none" }}

src/core/StateManagers/BootManager.tsx

@@ -3,49 +3,42 @@ import { StateManagerProps } from "./EventManager";
 import { useBootStore } from "../../store";
 
 const BootManager = (props: StateManagerProps) => {
-  const setActiveBootElement = useBootStore(
+  const toggleComponentMatrixIdx = useBootStore(
-    (state) => state.setActiveBootElement
+    (state) => state.toggleComponentMatrixIdx
   );
+  const setBootSubscene = useBootStore((state) => state.setSubscene);
 
   const dispatchObject = useCallback(
     (event: string) => {
       switch (event) {
         case "main_menu_down":
-          return {
-            action: setActiveBootElement,
-            value: "load_data",
-          };
         case "main_menu_up":
           return {
-            action: setActiveBootElement,
+            action: toggleComponentMatrixIdx,
-            value: "authorize_user",
+            value: "main_menu",
           };
         case "load_data_left":
-          return {
-            action: setActiveBootElement,
-            value: "load_data_yes",
-          };
         case "load_data_right":
           return {
-            action: setActiveBootElement,
+            action: toggleComponentMatrixIdx,
-            value: "load_data_no",
-          };
-        case "authorize_user_back":
-        case "select_authorize_user":
-          return {
-            action: setActiveBootElement,
-            value: "authorize_user",
-          };
-        case "load_data_no":
-          return {
-            action: setActiveBootElement,
             value: "load_data",
           };
-        case "select_load_data":
+        case "authorize_user_back":
-          return { action: setActiveBootElement, value: "load_data_yes" };
+        case "load_data_no_select":
+          return {
+            action: setBootSubscene,
+            value: "main_menu",
+          };
+        case "authorize_user_select":
+          return {
+            action: setBootSubscene,
+            value: "authorize_user",
+          };
+        case "load_data_select":
+          return { action: setBootSubscene, value: "load_data" };
       }
     },
-    [setActiveBootElement]
+    [setBootSubscene, toggleComponentMatrixIdx]
   );
 
   useEffect(() => {

src/core/StateManagers/EventManager.tsx

@@ -11,7 +11,6 @@ import {
   useMediaStore,
   useSceneStore,
   useSiteStore,
-  useSubsceneStore,
   useSSknStore,
 } from "../../store";
 import GreenTextManager from "./GreenTextManager";
@@ -23,7 +22,6 @@ import MediaImageManager from "./MediaImageManager";
 import computeAction from "../computeAction";
 import LevelManager from "./LevelManager";
 import BootManager from "./BootManager";
-import SubSceneManager from "./SubSceneManager";
 import SSknComponentManager from "./SSknComponentManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
@@ -54,7 +52,7 @@ export type StateManagerProps = {
 export type GameContext = {
   keyPress?: string;
   scene: string;
-  subscene: string;
+  bootSubscene: string;
   nodeMatrixIndices: { rowIdx: number; colIdx: number };
   currentLevel: string;
   siteRotIdx: string;
@@ -65,7 +63,6 @@ export type GameContext = {
 
 const EventManager = () => {
   const currentScene = useSceneStore((state) => state.currentScene);
-  const currentSubscene = useSubsceneStore((state) => state.activeSubscene);
 
   // main scene
   const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
@@ -90,7 +87,6 @@ const EventManager = () => {
   );
 
   // sskn scene
-
   const ssknComponentMatrixIdx = useSSknStore(
     (state) => state.componentMatrixIdx
   );
@@ -101,7 +97,16 @@ const EventManager = () => {
   );
 
   // boot scene
-  const activeBootElement = useBootStore((state) => state.activeBootElement);
+  const currentBootSubscene = useBootStore((state) => state.subscene);
+  const activeBootElement = useBootStore(
+    useCallback(
+      (state) =>
+        state.componentMatrix[currentBootSubscene][
+          state.componentMatrixIndices[currentBootSubscene]
+        ],
+      [currentBootSubscene]
+    )
+  );
 
   const [eventState, setEventState] = useState<any>();
 
@@ -110,7 +115,7 @@ const EventManager = () => {
   const gameContext: GameContext = useMemo(
     () => ({
       scene: currentScene,
-      subscene: currentSubscene,
+      bootSubscene: currentBootSubscene,
       siteRotIdx: siteRotIdx,
       nodeMatrixIndices: nodeMatrixIndices,
       currentLevel: currentLevel,
@@ -120,7 +125,7 @@ const EventManager = () => {
     }),
     [
       currentScene,
-      currentSubscene,
+      currentBootSubscene,
       siteRotIdx,
       nodeMatrixIndices,
       currentLevel,
@@ -168,7 +173,6 @@ const EventManager = () => {
       <MediaImageManager eventState={eventState!} />
       <LevelManager eventState={eventState!} />
       <BootManager eventState={eventState!} />
-      <SubSceneManager eventState={eventState!} />
       <SSknComponentManager eventState={eventState!} />
     </>
   );

src/core/StateManagers/MediaComponentManager.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
 import { useMediaStore } from "../../store";
+import * as THREE from "three";
 
 const MediaComponentManager = (props: StateManagerProps) => {
   const toggleSide = useMediaStore((state) => state.toggleSide);
@@ -15,10 +16,24 @@ const MediaComponentManager = (props: StateManagerProps) => {
     (state) => state.resetComponentMatrixIndices
   );
 
+  const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
+
   const playMedia = useCallback(() => {
     const mediaElement = document.getElementById("media") as HTMLMediaElement;
-    if (mediaElement) mediaElement.play().then((r) => console.log(r));
+
-  }, []);
+    const listener = new THREE.AudioListener();
+    const audio = new THREE.Audio(listener);
+
+    audio.setMediaElementSource(
+      document.getElementById("media") as HTMLMediaElement
+    );
+
+    setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
+
+    if (mediaElement) {
+      mediaElement.play();
+    }
+  }, [setAudioAnalyser]);
 
   const dispatchObject = useCallback(
     (event: string) => {

src/core/StateManagers/SubSceneManager.tsx

@@ -1,50 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { StateManagerProps } from "./EventManager";
-import { useSubsceneStore } from "../../store";
-
-const SubSceneManager = (props: StateManagerProps) => {
-  const setActiveSubscene = useSubsceneStore(
-    (state) => state.setActiveSubScene
-  );
-
-  const dispatchObject = useCallback(
-    (event: string) => {
-      switch (event) {
-        case "authorize_user_back":
-          return {
-            action: setActiveSubscene,
-            value: "main_menu",
-          };
-        case "select_authorize_user":
-          return { action: setActiveSubscene, value: "authorize_user" };
-        case "select_load_data":
-          return {
-            action: setActiveSubscene,
-            value: "load_data",
-          };
-        case "select_load_data_no":
-          return {
-            action: setActiveSubscene,
-            value: "main_menu",
-          };
-      }
-    },
-    [setActiveSubscene]
-  );
-
-  useEffect(() => {
-    if (props.eventState) {
-      const eventAction = props.eventState.event;
-
-      const dispatchedObject = dispatchObject(eventAction);
-
-      if (dispatchedObject) {
-        dispatchedObject.action(dispatchedObject.value);
-      }
-    }
-  }, [props.eventState, dispatchObject]);
-
-  return null;
-};
-
-export default SubSceneManager;

src/core/bootEventHandler.ts

@@ -4,7 +4,7 @@ const handleBootEvent = (gameContext: GameContext) => {
   const keyPress = gameContext.keyPress;
 
   const activeBootElement = gameContext.activeBootElement;
-  const currentSubscene = gameContext.subscene;
+  const currentSubscene = gameContext.bootSubscene;
 
   switch (keyPress) {
     case "down":
@@ -14,7 +14,7 @@ const handleBootEvent = (gameContext: GameContext) => {
     case "back":
       return { event: `${currentSubscene}_${keyPress}` };
     case "select":
-      return { event: `select_${activeBootElement}` };
+      return { event: `${activeBootElement}_${keyPress}` };
   }
 };
 

src/scenes/BootScene.tsx

@@ -1,13 +1,22 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import BootAccela from "../components/Boot/BootAccela";
 import BootAnimation from "../components/Boot/BootAnimation";
 import BootMainMenuComponents from "../components/Boot/BootMainMenuComponents";
-import { useSubsceneStore } from "../store";
+import { useBootStore } from "../store";
 import BootAuthorizeUser from "../components/Boot/BootAuthorizeUser";
 import BootLoadData from "../components/Boot/BootLoadData";
 
 const BootScene = () => {
-  const activeSubscene = useSubsceneStore((state) => state.activeSubscene);
+  const activeSubscene = useBootStore((state) => state.subscene);
+  const activeBootElement = useBootStore(
+    useCallback(
+      (state) =>
+        state.componentMatrix[activeSubscene][
+          state.componentMatrixIndices[activeSubscene]
+        ],
+      [activeSubscene]
+    )
+  );
 
   const [accelaVisible, setAccelaVisible] = useState(true);
   const [mainMenuVisible, setMainMenuVisible] = useState(false);
@@ -26,16 +35,17 @@ const BootScene = () => {
   return (
     <perspectiveCamera position-z={3}>
       <BootAccela visible={accelaVisible} />
-      <BootAnimation
+      <BootAnimation visible={!accelaVisible} activeSubScene={activeSubscene} />
-        visible={!accelaVisible}
-        activeSubScene={activeSubscene}
-      />
       <BootMainMenuComponents
         visible={mainMenuVisible}
         activeSubScene={activeSubscene}
+        activeBootElement={activeBootElement}
       />
       <BootAuthorizeUser visible={activeSubscene === "authorize_user"} />
-      <BootLoadData visible={activeSubscene === "load_data"} />
+      <BootLoadData
+        visible={activeSubscene === "load_data"}
+        activeBootElement={activeBootElement}
+      />
     </perspectiveCamera>
   );
 };

src/store.ts

@@ -1,5 +1,6 @@
 import create from "zustand";
 import { combine } from "zustand/middleware";
+import * as THREE from "three";
 
 type SceneState = {
   currentScene: string;
@@ -114,17 +115,6 @@ type MediaWordState = {
   resetWordPositionDataStructIdx: () => void;
 };
 
-type MediaState = {
-  mediaPercentageElapsed: number;
-  activeMediaComponent: string;
-  setActiveMediaComponent: (to: string) => void;
-  lastActiveLeftSideElement: string;
-  setLastActiveLeftSideElement: (to: string) => void;
-  lastActiveRightSideElement: string;
-  setLastActiveRightSideElement: (to: string) => void;
-  setPercentageElapsed: (to: number) => void;
-};
-
 export type TextRendererState = {
   yellowText: string;
   yellowTextPosY: number;
@@ -158,16 +148,6 @@ type ImageState = {
   };
 };
 
-type SubsceneState = {
-  activeSubscene: string;
-  setActiveSubScene: (to: string) => void;
-};
-
-type MainMenuState = {
-  activeBootElement: string;
-  setActiveBootElement: (to: string) => void;
-};
-
 type GateState = {
   gateLvl: number;
   incrementGateLvl: () => void;
@@ -315,6 +295,7 @@ export const useLevelStore = create<LevelState>((set) => ({
 export const useMediaStore = create(
   combine(
     {
+      audioAnalyser: undefined,
       mediaPercentageElapsed: 0,
       componentMatrix: [
         ["play", "exit"],
@@ -372,6 +353,8 @@ export const useMediaStore = create(
         })),
       setPercentageElapsed: (to: number) =>
         set(() => ({ mediaPercentageElapsed: to })),
+      setAudioAnalyser: (to: THREE.AudioAnalyser) =>
+        set(() => ({ audioAnalyser: to })),
     })
   )
 );
@@ -459,19 +442,58 @@ export const useSSknStore = create<SSknState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "sskn",
+  currentScene: "boot",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));
 
-export const useSubsceneStore = create<SubsceneState>((set) => ({
+export const useBootStore = create(
-  activeSubscene: "authorize_user",
+  combine(
-  setActiveSubScene: (to) => set(() => ({ activeSubscene: to })),
+    {
-}));
+      componentMatrix: {
-
+        main_menu: ["authorize_user", "load_data"],
-export const useBootStore = create<MainMenuState>((set) => ({
+        load_data: ["load_data_yes", "load_data_no"],
-  activeBootElement: "load_data_yes",
+        authorize_user: ["authorize_user_letters"],
-  setActiveBootElement: (to: string) => set(() => ({ activeBootElement: to })),
+      },
-}));
+      authorizeUserLetterMatrix: {
+        xIndices: [
+          3.35,
+          3.05,
+          2.75,
+          2.45,
+          2.15,
+          1.85,
+          1.55,
+          1.25,
+          0.75,
+          0.45,
+          0.15,
+          -0.15,
+          -0.45,
+        ],
+      },
+      componentMatrixIndices: {
+        // 0 or 1
+        main_menu: 0,
+        // 0 or 1
+        load_data: 0,
+        // only 0 (depends on external dataset)
+        authorize_user: 0,
+      },
+      // main_menu, load_data or authorize_user
+      subscene: "authorize_user",
+    } as any,
+    (set) => ({
+      toggleComponentMatrixIdx: (subscene: string) =>
+        set((state) => ({
+          componentMatrixIndices: {
+            ...state.componentMatrixIndices,
+            [subscene]: Number(!state.componentMatrixIndices[subscene]),
+          },
+        })),
+      setSubscene: (to: string) => set(() => ({ subscene: to })),
+    })
+  )
+);
 
 export const useImageStore = create(
   combine(