user authorization fully functional, bugfixes, all mobile buttons implemtned

src/App.tsx

@@ -14,7 +14,6 @@ import ChangeDiscScene from "./scenes/ChangeDiscScene";
 import EndScene from "./scenes/EndScene";
 import IdleMediaScene from "./scenes/IdleMediaScene";
 import InputHandler from "./components/InputHandler";
-import { Html } from "@react-three/drei";
 
 const App = () => {
   const currentScene = useStore((state) => state.currentScene);

src/components/BootScene/BootAnimation.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {useEffect, useMemo, useRef, useState} from "react";
 import bootLof from "../../static/sprites/boot/boot_lof.png";
 import bootBottomBarLeft from "../../static/sprites/boot/boot_bottom_bar_left.png";
 import bootBottomBarRight from "../../static/sprites/boot/boot_bottom_bar_right.png";
@@ -11,13 +11,14 @@ import bootStatusTexts from "../../static/sprites/boot/boot_status_texts.png";
 import bootBackgroundText from "../../static/sprites/boot/boot_background_text.png";
 import bootBackgroundDistortedTex from "../../static/sprites/boot/distorted_text.png";
 
-import { useFrame, useLoader } from "react-three-fiber";
+import {useFrame, useLoader} from "react-three-fiber";
-import { a, useSpring } from "@react-spring/three";
+import {a, useSpring} from "@react-spring/three";
 import * as THREE from "three";
 import sleep from "../../utils/sleep";
 
 type BootAnimationProps = {
   visible: boolean;
+  mainMenuVisible: boolean;
   activeSubScene: string;
 };
 
@@ -134,19 +135,21 @@ const BootAnimation = (props: BootAnimationProps) => {
 
         await sleep(100);
         currentBootStatusTextTex.offset.y = 0.79;
+      })();
+    }
+  }, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
 
-        await sleep(1700);
+  useEffect(() => {
+    if (props.mainMenuVisible) {
       currentBootStatusTextTex.offset.x = 0.5;
       currentBootStatusTextTex.offset.y = 0.005;
       setBootOpacity(0);
       setGraySquarePosY(0);
       setLofPosX(1.3);
       setLofPosY(1);
-
       setBackgroundFloatingTextShown(true);
-      })();
     }
-  }, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
+  }, [currentBootStatusTextTex.offset, props.mainMenuVisible]);
 
   const [bootOpacity, setBootOpacity] = useState(1);
   const [graySquarePosY, setGraySquarePosY] = useState(-0.8);
@@ -196,7 +199,7 @@ const BootAnimation = (props: BootAnimationProps) => {
           opacity={animationState.graySquareOpacity}
         />
       </a.sprite>
-      {props.activeSubScene !== "authorize_user" ? (
+      {props.activeSubScene !== "authorize_user" && (
         <>
           {/*we have two of each to create looping effect*/}
           <a.sprite
@@ -315,8 +318,6 @@ const BootAnimation = (props: BootAnimationProps) => {
             />
           </sprite>
         </>
-      ) : (
-        <></>
       )}
     </group>
   );

src/components/BootScene/BootAuthorizeUser.tsx

@@ -8,9 +8,7 @@ import authorizeInactiveLetters from "../../static/sprites/boot/authorize_inacti
 import authorizeActiveLetters from "../../static/sprites/boot/authorize_active_letters.png";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { OrbitControls } from "@react-three/drei";
 import { useStore } from "../../store";
-import usePrevious from "../../hooks/usePrevious";
 import StaticJpCharacter from "../TextRenderer/StaticJpCharacter";
 
 type BootAuthorizeUserProps = {
@@ -44,7 +42,6 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
     authorizeActiveLetters
   );
 
-  const subscene = useStore((state) => state.bootSubscene);
   const authorizeUserMatrixIndices = useStore(
     (state) => state.authorizeUserMatrixIndices
   );
@@ -115,8 +112,9 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
           </sprite>
           <sprite
             scale={[0.2, 0.2, 0]}
-            position={[-0.2, -0.3, 0]}
+            position={[-0.19, -0.3, 0]}
             renderOrder={3}
+            visible={!(playerName.length === 8)}
           >
             <spriteMaterial
               map={authorizeOrangeSquareTex}
@@ -125,8 +123,15 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
               depthTest={false}
             />
           </sprite>
-
+          <group
-          <group position={[playerName.length * -0.25 - 0.2, -0.27, 0]}>
+            position={[
+              (playerName.length === 8 ? 0.2 : 0) +
+                playerName.length * -0.2 -
+                0.2,
+              -0.29,
+              0,
+            ]}
+          >
             {playerName.map((char, idx) => (
               <StaticJpCharacter char={char} charIdx={idx} key={idx} />
             ))}
@@ -144,11 +149,10 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
             />
           </sprite>
 
-          <OrbitControls />
           <group position={[-1.15, 0.4, 0.3]} rotation={[-0.8, 0, -0.3]}>
             <mesh
               scale={[4, 1.28, 0]}
-              position={[3.35, -0.7, 0]}
+              position={[1.25, -0.45, 0]}
               ref={bgLettersRef}
             >
               <planeBufferGeometry attach="geometry" />
@@ -156,7 +160,6 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
                 map={authorizeInactiveLettersTex}
                 attach="material"
                 transparent={true}
-                side={THREE.DoubleSide}
               />
             </mesh>
             <mesh

src/components/IdleManager.tsx

@@ -11,6 +11,7 @@ import {
   getRandomIdleMedia,
 } from "../helpers/idle-helpers";
 import handleEvent from "../core/handleEvent";
+import { useEffect } from "react";
 
 type IdleManagerProps = {
   lainIdleTimerRef: any;
@@ -21,6 +22,12 @@ const IdleManager = (props: IdleManagerProps) => {
   const mainSubscene = useStore((state) => state.mainSubscene);
   const scene = useStore((state) => state.currentScene);
 
+  useEffect(() => {
+    if (scene !== "main") {
+      props.idleSceneTimerRef.current = -1;
+    }
+  }, [props.idleSceneTimerRef, scene]);
+
   useFrame(() => {
     const now = Date.now();
     if (

src/components/InputHandler.tsx

@@ -20,6 +20,8 @@ import circleButton from "../static/sprites/controller/circle.png";
 import squareButton from "../static/sprites/controller/square.png";
 import triangleButton from "../static/sprites/controller/triangle.png";
 import crossButton from "../static/sprites/controller/cross.png";
+import startButton from "../static/sprites/controller/start.png";
+import l2Button from "../static/sprites/controller/l2.png";
 import * as THREE from "three";
 import { useGesture } from "react-use-gesture";
 import IdleManager from "./IdleManager";
@@ -32,6 +34,8 @@ const InputHandler = () => {
   const crossButtonTex = useLoader(THREE.TextureLoader, crossButton);
   const squareButtonTex = useLoader(THREE.TextureLoader, squareButton);
   const triangleButtonTex = useLoader(THREE.TextureLoader, triangleButton);
+  const startButtonTex = useLoader(THREE.TextureLoader, startButton);
+  const l2ButtonTex = useLoader(THREE.TextureLoader, l2Button);
 
   const timeSinceLastKeyPress = useRef(-1);
 
@@ -166,7 +170,37 @@ const InputHandler = () => {
         <spriteMaterial attach="material" opacity={0} depthTest={false} />
       </sprite>
 
-      <group scale={[0.8, 0.8, 0]} position={[3.5, -2, 0]}>
+      <sprite
+        scale={[1.5, 1.5, 0]}
+        position={[-4, 3, 0]}
+        renderOrder={99999}
+        onClick={handleVirtualButtonPress}
+        name={"L2"}
+      >
+        <spriteMaterial
+          attach="material"
+          map={l2ButtonTex}
+          depthTest={false}
+          opacity={0.8}
+        />
+      </sprite>
+
+      <sprite
+        scale={[1.5, 1.5, 0]}
+        position={[4, 3, 0]}
+        renderOrder={99999}
+        onClick={handleVirtualButtonPress}
+        name={"START"}
+      >
+        <spriteMaterial
+          attach="material"
+          map={startButtonTex}
+          depthTest={false}
+          opacity={0.8}
+        />
+      </sprite>
+
+      <group scale={[0.8, 0.8, 0]} position={[3.5, -2.3, 0]}>
         <sprite
           scale={[1.5, 1.5, 0]}
           position={[1, 0, 0]}

src/components/MainScene/LevelSelection.tsx

@@ -124,7 +124,7 @@ const LevelSelection = () => {
   ]);
 
   return (
-    <group>
+    <>
       <a.group position-y={pos.vertPosY} renderOrder={5}>
         <mesh
           scale={[0.3, 0.4, 0]}
@@ -212,7 +212,7 @@ const LevelSelection = () => {
           depthTest={false}
         />
       </a.sprite>
-    </group>
+    </>
   );
 };
 

src/components/TextRenderer/StaticJpCharacter.tsx

@@ -34,8 +34,8 @@ const StaticJpCharacter = memo((props: { char: string; charIdx: number }) => {
 
   return (
     <mesh
-      position={[props.charIdx / 4, 0, 0]}
+      position={[props.charIdx / 5, 0, 0]}
-      scale={[0.25, 0.25, 0]}
+      scale={[0.2, 0.2, 0]}
       geometry={geom}
       renderOrder={205}
     >

src/core/eventTemplates.ts

@@ -662,7 +662,7 @@ export const exitUserAuthorization = {
         playerName: "",
         bootSubscene: "main_menu",
         inputCooldown: 500,
-        authorizeUserMatrixIndices: { rowIdx: 0, colIdx: 0 },
+        authorizeUserMatrixIndices: { rowIdx: 1, colIdx: 7 },
       },
     },
   ],

src/core/input-handlers/handleBootSceneInput.ts

@@ -1,5 +1,8 @@
 import authorize_user_letters from "../../resources/authorize_user_letters.json";
-import handleNameSelection from "../../helpers/name-selection-helpers";
+import {
+  handleNameSelection,
+  handleUserAuthorizationMove,
+} from "../../helpers/name-selection-helpers";
 import {
   changeMainMenuComponent,
   changePromptComponent,
@@ -83,62 +86,21 @@ const handleBootSceneInput = (
             } else {
               return exitUserAuthorization;
             }
-          case "LEFT": {
+          case "LEFT":
-            const newMatrixIndices = {
+          case "UP":
-              ...authorizeUserMatrixIndices,
+          case "DOWN":
-              colIdx:
+          case "RIGHT":
-                authorizeUserMatrixIndices.colIdx - 1 < 0
+            const direction = keyPress.toLowerCase();
-                  ? authorizeUserMatrixIndices.colIdx
+            const newMatrixIndices = handleUserAuthorizationMove(
-                  : authorizeUserMatrixIndices.colIdx - 1,
+              authorizeUserMatrixIndices,
-            };
+              direction
+            );
 
+            if (newMatrixIndices)
               return updateAuthorizeUserLetterMatrixIndices({
                 authorizeUserLetterMatrixIndices: newMatrixIndices,
               });
-          }
+            break;
-
-          case "RIGHT": {
-            const newMatrixIndices = {
-              ...authorizeUserMatrixIndices,
-              colIdx:
-                authorizeUserMatrixIndices.colIdx + 1 > 12
-                  ? authorizeUserMatrixIndices.colIdx
-                  : authorizeUserMatrixIndices.colIdx + 1,
-            };
-
-            return updateAuthorizeUserLetterMatrixIndices({
-              authorizeUserLetterMatrixIndices: newMatrixIndices,
-            });
-          }
-
-          case "DOWN": {
-            const newMatrixIndices = {
-              ...authorizeUserMatrixIndices,
-              rowIdx:
-                authorizeUserMatrixIndices.rowIdx + 1 > 4
-                  ? authorizeUserMatrixIndices.rowIdx
-                  : authorizeUserMatrixIndices.rowIdx + 1,
-            };
-
-            return updateAuthorizeUserLetterMatrixIndices({
-              authorizeUserLetterMatrixIndices: newMatrixIndices,
-            });
-          }
-
-          case "UP": {
-            const newMatrixIndices = {
-              ...authorizeUserMatrixIndices,
-              rowIdx:
-                authorizeUserMatrixIndices.rowIdx - 1 < 0
-                  ? authorizeUserMatrixIndices.rowIdx
-                  : authorizeUserMatrixIndices.rowIdx - 1,
-            };
-
-            return updateAuthorizeUserLetterMatrixIndices({
-              authorizeUserLetterMatrixIndices: newMatrixIndices,
-            });
-          }
-
           case "CIRCLE":
             const chosenCharacter =
               authorize_user_letters.matrix[authorizeUserMatrixIndices.rowIdx][
@@ -148,7 +110,7 @@ const handleBootSceneInput = (
             if (chosenCharacter) {
               const newName = handleNameSelection(playerName, chosenCharacter);
 
-              if (newName?.length === 8) return;
+              if (newName && newName.length > 8) return;
               if (newName !== undefined)
                 return updatePlayerName({ playerName: newName });
               else return failUpdatePlayerName;

src/helpers/name-selection-helpers.ts

@@ -1,6 +1,11 @@
-// huge thanks to oo for help with this!!
+import authorize_user_letters from "../resources/authorize_user_letters.json";
+import { AuthorizeUserMatrixIndices } from "../types/types";
 
-const handleNameSelection = (currentString: string, newCharacter: string) => {
+// huge thanks to oo for help with this!!
+export const handleNameSelection = (
+  currentString: string,
+  newCharacter: string
+) => {
   // characters that cannot be the first letter
   const cantBeFirst = [
     "ン",
@@ -120,4 +125,45 @@ const handleNameSelection = (currentString: string, newCharacter: string) => {
   return currentString.concat(newCharacter);
 };
 
-export default handleNameSelection;
+export const handleUserAuthorizationMove = (
+  matrixIndices: AuthorizeUserMatrixIndices,
+  direction: string
+): AuthorizeUserMatrixIndices | undefined => {
+  const funcs = {
+    up: (matIndices: AuthorizeUserMatrixIndices) => ({
+      ...matIndices,
+      rowIdx: matIndices.rowIdx - 1,
+    }),
+    down: (matIndices: AuthorizeUserMatrixIndices) => ({
+      ...matIndices,
+      rowIdx: matIndices.rowIdx + 1,
+    }),
+    left: (matIndices: AuthorizeUserMatrixIndices) => ({
+      ...matIndices,
+      colIdx: matIndices.colIdx - 1,
+    }),
+    right: (matIndices: AuthorizeUserMatrixIndices) => ({
+      ...matIndices,
+      colIdx: matIndices.colIdx + 1,
+    }),
+  };
+
+  const boundaries = {
+    up: (matIndices: AuthorizeUserMatrixIndices) => matIndices.rowIdx === 0,
+    down: (matIndices: AuthorizeUserMatrixIndices) => matIndices.rowIdx === 4,
+    left: (matIndices: AuthorizeUserMatrixIndices) => matIndices.colIdx === 0,
+    right: (matIndices: AuthorizeUserMatrixIndices) => matIndices.colIdx === 12,
+  };
+
+  const isBoundary = boundaries[direction as keyof typeof boundaries](
+    matrixIndices
+  );
+
+  if (isBoundary) return;
+
+  const res = funcs[direction as keyof typeof funcs](matrixIndices);
+  const chosenCharacter = authorize_user_letters.matrix[res.rowIdx][res.colIdx];
+
+  if (chosenCharacter) return res;
+  else return handleUserAuthorizationMove(res, direction);
+};

src/scenes/BootScene.tsx

@@ -24,7 +24,11 @@ const BootScene = () => {
   return (
     <group position-z={3}>
       <BootAccela visible={accelaVisible} />
-      <BootAnimation visible={!accelaVisible} activeSubScene={activeSubscene} />
+      <BootAnimation
+        visible={!accelaVisible}
+        activeSubScene={activeSubscene}
+        mainMenuVisible={mainMenuVisible}
+      />
       <BootMainMenuComponents
         visible={mainMenuVisible}
         activeSubScene={activeSubscene}

src/store.ts

@@ -199,13 +199,13 @@ export const useStore = create(
       },
 
       // player name
-      playerName: "アイウエオ",
+      playerName: "",
 
       // boot scene
       activeMainMenuComponent: "authorize_user",
       authorizeUserMatrixIndices: {
-        rowIdx: 0,
+        rowIdx: 1,
-        colIdx: 0,
+        colIdx: 7,
       },
       bootSubscene: "main_menu",