authorize user text movement done

src/components/Boot/BootAuthorizeUser.tsx

@@ -1,12 +1,15 @@
-import React, { useRef } from "react";
+import React, { useCallback, useMemo, 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";
 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 authorizeActiveLetters from "../../static/sprite/authorize_active_letters.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
+import { useBootStore } from "../../store";
+import { OrbitControls } from "@react-three/drei";
 
 type BootAuthorizeUserProps = {
   visible: boolean;
@@ -34,17 +37,29 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
     THREE.TextureLoader,
     authorizeInactiveLetters
   );
+  const authorizeActiveLettersTex = useLoader(
+    THREE.TextureLoader,
+    authorizeActiveLetters
+  );
 
-  const backgroundLetterRef = useRef<THREE.Object3D>();
+  const backgroundLettersPos = useBootStore((state) => state.lettersPos);
+  const activeLetterTextureOffset = useBootStore(
+    (state) => state.activeLetterTextureOffset
+  );
 
-  useFrame(() => {
+  const authorizeActiveLettersMap = useMemo(() => {
-    if (backgroundLetterRef.current) {
+    authorizeActiveLettersTex.wrapT = authorizeActiveLettersTex.wrapS =
-      // backgroundLetterRef.current.position.x += 0.01
+      THREE.RepeatWrapping;
-    }
+    authorizeActiveLettersTex.repeat.set(0.06, 0.2);
-  });
+    authorizeActiveLettersTex.offset.x = activeLetterTextureOffset.x;
+    authorizeActiveLettersTex.offset.y = activeLetterTextureOffset.y;
+
+    return authorizeActiveLettersTex;
+  }, [activeLetterTextureOffset, authorizeActiveLettersTex]);
 
   return (
     <>
+      <OrbitControls />
       {props.visible ? (
         <>
           <sprite
@@ -112,8 +127,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
             <mesh
               scale={[4, 1.28, 0]}
               renderOrder={-1}
-              position={[-0.45, -0.6, 0]}
+              position={[backgroundLettersPos.x, backgroundLettersPos.y, 0]}
-              ref={backgroundLetterRef}
             >
               <planeBufferGeometry attach="geometry" />
               <meshBasicMaterial
@@ -122,6 +136,28 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
                 transparent={true}
               />
             </mesh>
+            <mesh
+              scale={[0.35, 0.45, 0]}
+              position={[1.51, -0.12, 0]}
+              renderOrder={2}
+            >
+              <planeBufferGeometry attach="geometry" />
+              <meshBasicMaterial
+                map={authorizeActiveLettersMap}
+                attach="material"
+                transparent={true}
+                depthTest={false}
+              />
+            </mesh>
+            <mesh position={[1.54, -0.13, 0]} renderOrder={1}>
+              <circleBufferGeometry attach="geometry" args={[0.221, 32]} />
+              <meshBasicMaterial
+                attach="material"
+                transparent={true}
+                depthTest={false}
+                color={0x000000}
+              />
+            </mesh>
           </group>
         </>
       ) : (

src/core/StateManagers/BootManager.tsx

@@ -7,6 +7,9 @@ const BootManager = (props: StateManagerProps) => {
     (state) => state.toggleComponentMatrixIdx
   );
   const setBootSubscene = useBootStore((state) => state.setSubscene);
+  const moveAuthorizeUserLetters = useBootStore(
+    (state) => state.moveAuthorizeUserLetters
+  );
 
   const dispatchObject = useCallback(
     (event: string) => {
@@ -34,11 +37,31 @@ const BootManager = (props: StateManagerProps) => {
             action: setBootSubscene,
             value: "authorize_user",
           };
+        case "authorize_user_right":
+          return {
+            action: moveAuthorizeUserLetters,
+            value: "right",
+          };
+        case "authorize_user_left":
+          return {
+            action: moveAuthorizeUserLetters,
+            value: "left",
+          };
+        case "authorize_user_up":
+          return {
+            action: moveAuthorizeUserLetters,
+            value: "up",
+          };
+        case "authorize_user_down":
+          return {
+            action: moveAuthorizeUserLetters,
+            value: "down",
+          };
         case "load_data_select":
           return { action: setBootSubscene, value: "load_data" };
       }
     },
-    [setBootSubscene, toggleComponentMatrixIdx]
+    [moveAuthorizeUserLetters, setBootSubscene, toggleComponentMatrixIdx]
   );
 
   useEffect(() => {

src/store.ts

@@ -454,22 +454,13 @@ export const useBootStore = create(
         load_data: ["load_data_yes", "load_data_no"],
         authorize_user: ["authorize_user_letters"],
       },
-      authorizeUserLetterMatrix: {
+      lettersPos: {
-        xIndices: [
+        x: 3.35,
-          3.35,
+        y: -0.7,
-          3.05,
+      },
-          2.75,
+      activeLetterTextureOffset: {
-          2.45,
+        x: 0,
-          2.15,
+        y: -0.2,
-          1.85,
-          1.55,
-          1.25,
-          0.75,
-          0.45,
-          0.15,
-          -0.15,
-          -0.45,
-        ],
       },
       componentMatrixIndices: {
         // 0 or 1
@@ -491,6 +482,72 @@ export const useBootStore = create(
           },
         })),
       setSubscene: (to: string) => set(() => ({ subscene: to })),
+      moveAuthorizeUserLetters: (direction: string) =>
+        set((state) => {
+          let initialPos = state.lettersPos;
+          let initialActiveLetterTextureOffset =
+            state.activeLetterTextureOffset;
+
+          let axis: string;
+          let finalPosVal: number;
+          let finalTextureOffsetVal: number;
+          switch (direction) {
+            case "right":
+              axis = "x";
+              if (initialPos.x - 0.3 < -0.25) {
+                finalPosVal = -0.25;
+                finalTextureOffsetVal = 0.93;
+              } else {
+                finalPosVal = initialPos.x - 0.3;
+                finalTextureOffsetVal =
+                  initialActiveLetterTextureOffset.x + 0.0775;
+              }
+              break;
+            case "left":
+              axis = "x";
+              if (initialPos.x + 0.3 > 3.35) {
+                finalPosVal = 3.35;
+                finalTextureOffsetVal = 0;
+              } else {
+                finalPosVal = initialPos.x + 0.3;
+                finalTextureOffsetVal =
+                  initialActiveLetterTextureOffset.x - 0.0775;
+              }
+              break;
+            case "up":
+              axis = "y";
+              if (initialPos.y - 0.25 < -0.7) {
+                finalPosVal = -0.7;
+                finalTextureOffsetVal = -0.2;
+              } else {
+                finalPosVal = initialPos.y - 0.25;
+                finalTextureOffsetVal =
+                  initialActiveLetterTextureOffset.y + 0.2;
+              }
+              break;
+            case "down":
+              axis = "y";
+              if (initialPos.y + 0.25 > 0.3) {
+                finalPosVal = 0.3;
+                finalTextureOffsetVal = -1;
+              } else {
+                finalPosVal = initialPos.y + 0.25;
+                finalTextureOffsetVal =
+                  initialActiveLetterTextureOffset.y - 0.2;
+              }
+              break;
+          }
+          return {
+            lettersPos: {
+              ...state.lettersPos,
+              [axis!]: finalPosVal!,
+            },
+            activeLetterTextureOffset: {
+              ...state.activeLetterTextureOffset,
+              [axis!]: finalTextureOffsetVal!,
+            },
+          };
+        }),
     })
   )
 );