authorize user clean up

src/components/Boot/BootAnimation.tsx

@@ -150,7 +150,7 @@ const BootAnimation = (props: BootAnimationProps) => {
 
         setBackgroundFloatingTextShown(true);
         //4200
-      }, 0);
+      }, 4200);
     }
   }, [bootBackgroundTextTex, currentBootStatusTextTex.offset, props.visible]);
 
@@ -179,7 +179,7 @@ const BootAnimation = (props: BootAnimationProps) => {
   const sndDistortedBackgroundTextRef = useRef<THREE.Object3D>();
 
   return (
-    <>
+    <group visible={props.visible}>
       <a.sprite
         scale={[1.2, 0.4, 0]}
         position-x={animationState.lofPosX}
@@ -202,7 +202,7 @@ const BootAnimation = (props: BootAnimationProps) => {
           opacity={animationState.graySquareOpacity}
         />
       </a.sprite>
-      {props.visible && props.activeSubScene !== "authorize_user" ? (
+      {props.activeSubScene !== "authorize_user" ? (
         <>
           {/*we have two of each to create looping effect*/}
           <a.sprite
@@ -276,7 +276,7 @@ const BootAnimation = (props: BootAnimationProps) => {
               opacity={bootState.bootOpacity}
             />
           </sprite>
-          <sprite scale={[0.2, 0.2, 0]} position={[0, -0.8, 0]}>
+          <sprite scale={[0.2, 0.2, 0]} position={[0, -0.8, 0]} renderOrder={-1}>
             <a.spriteMaterial
               attach="material"
               map={bootPurpleSquareTex}
@@ -320,7 +320,7 @@ const BootAnimation = (props: BootAnimationProps) => {
       ) : (
         <></>
       )}
-    </>
+    </group>
   );
 };
 

src/components/Boot/BootAuthorizeUser.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useMemo } 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";
@@ -6,9 +6,9 @@ import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.p
 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 { useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import { useBootStore } from "../../store";
+import { useAuthorizeUserStore, useBootStore } from "../../store";
 import { OrbitControls } from "@react-three/drei";
 
 type BootAuthorizeUserProps = {
@@ -42,8 +42,10 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
     authorizeActiveLetters
   );
 
-  const backgroundLettersPos = useBootStore((state) => state.bgLettersPos);
-  const activeLetterTextureOffset = useBootStore(
+  const backgroundLettersPos = useAuthorizeUserStore(
+    (state) => state.bgLettersPos
+  );
+  const activeLetterTextureOffset = useAuthorizeUserStore(
     (state) => state.activeLetterTextureOffset
   );
 
@@ -57,10 +59,6 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
     return authorizeActiveLettersTex;
   }, [activeLetterTextureOffset, authorizeActiveLettersTex]);
 
-  const t = useBootStore(
-    (state) => state.componentMatrixIndices.authorize_user
-  );
-
   return (
     <>
       <OrbitControls />

src/components/Boot/BootLoadData.tsx

@@ -10,7 +10,7 @@ import { useLoader } from "react-three-fiber";
 
 type BootLoadDataProps = {
   visible: boolean;
-  activeBootElement: string;
+  activeBootElement: any;
 };
 
 const BootLoadData = (props: BootLoadDataProps) => {

src/components/Boot/BootMainMenuComponents.tsx

@@ -12,7 +12,7 @@ import loadDataHeader from "../../static/sprite/load_data_header.png";
 type BootMainMenuProps = {
   visible: boolean;
   activeSubScene: string;
-  activeBootElement: string;
+  activeBootElement: any;
 };
 
 const BootMainMenuComponents = (props: BootMainMenuProps) => {

src/core/StateManagers/BootAuthorizeUserManager.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect } from "react";
+import { StateManagerProps } from "./EventManager";
+import { useAuthorizeUserStore, useBootStore } from "../../store";
+
+const BootAuthorizeUserManager = (props: StateManagerProps) => {
+  const setActiveLetterTextureOffset = useAuthorizeUserStore(
+    (state) => state.setActiveLetterTexOffset
+  );
+  const setBgLettersPos = useAuthorizeUserStore(
+    (state) => state.setBgLettersPos
+  );
+
+  const updateAuthorizeUser = useCallback(
+    (
+      newBgLettersPos: { x: number; y: number },
+      newActiveLetterTexOffset: { x: number; y: number }
+    ) => {
+      setActiveLetterTextureOffset(newActiveLetterTexOffset);
+      setBgLettersPos(newBgLettersPos);
+    },
+    [setActiveLetterTextureOffset, setBgLettersPos]
+  );
+
+  const dispatchObject = useCallback(
+    (
+      event: string,
+      newBgLettersPos: { x: number; y: number },
+      newActiveLetterTexOffset: { x: number; y: number }
+    ) => {
+      switch (event) {
+        case "authorize_user_left":
+        case "authorize_user_up":
+        case "authorize_user_down":
+        case "authorize_user_right":
+          return {
+            action: updateAuthorizeUser,
+            value: [newBgLettersPos, newActiveLetterTexOffset],
+          };
+      }
+    },
+    [updateAuthorizeUser]
+  );
+
+  useEffect(() => {
+    if (props.eventState) {
+      const eventAction = props.eventState.event;
+      const newBgLettersPos = props.eventState.newBgLettersPos;
+      const newActiveLetterTexOffset =
+        props.eventState.newActiveLetterTexOffset;
+
+      const dispatchedObject = dispatchObject(
+        eventAction,
+        newBgLettersPos,
+        newActiveLetterTexOffset
+      );
+      if (dispatchedObject) {
+        dispatchedObject.action.apply(null, dispatchedObject.value as any);
+      }
+    }
+  }, [dispatchObject, props.eventState]);
+  return null;
+};
+
+export default BootAuthorizeUserManager;

src/core/StateManagers/BootComponentManager.tsx

@@ -2,29 +2,29 @@ import { useCallback, useEffect } from "react";
 import { StateManagerProps } from "./EventManager";
 import { useBootStore } from "../../store";
 
-const BootManager = (props: StateManagerProps) => {
+const BootComponentManager = (props: StateManagerProps) => {
   const toggleComponentMatrixIdx = useBootStore(
     (state) => state.toggleComponentMatrixIdx
   );
-  const setBootSubscene = useBootStore((state) => state.setSubscene);
-  const moveAuthorizeUserLetters = useBootStore(
-    (state) => state.moveAuthorizeUserLetters
+  const setAuthorizeUserMatrixIdx = useBootStore(
+    (state) => state.setAuthorizeUserMatrixIdx
   );
+  const setBootSubscene = useBootStore((state) => state.setSubscene);
 
   const dispatchObject = useCallback(
-    (event: string) => {
+    (
+      event: string,
+      activeSubscene: string,
+      newAuthorizeUserMatrixIdx: number
+    ) => {
       switch (event) {
         case "main_menu_down":
         case "main_menu_up":
-          return {
-            action: toggleComponentMatrixIdx,
-            value: "main_menu",
-          };
         case "load_data_left":
         case "load_data_right":
           return {
             action: toggleComponentMatrixIdx,
-            value: "load_data",
+            value: activeSubscene,
           };
         case "authorize_user_back":
         case "load_data_no_select":
@@ -38,43 +38,39 @@ const BootManager = (props: StateManagerProps) => {
             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_left":
         case "authorize_user_down":
           return {
-            action: moveAuthorizeUserLetters,
-            value: "down",
+            action: setAuthorizeUserMatrixIdx,
+            value: newAuthorizeUserMatrixIdx,
           };
         case "load_data_select":
           return { action: setBootSubscene, value: "load_data" };
       }
     },
-    [moveAuthorizeUserLetters, setBootSubscene, toggleComponentMatrixIdx]
+    [setAuthorizeUserMatrixIdx, setBootSubscene, toggleComponentMatrixIdx]
   );
 
   useEffect(() => {
     if (props.eventState) {
       const eventAction = props.eventState.event;
+      const newAuthorizeUserMatrixIdx =
+        props.eventState.newAuthorizeUserMatrixIdx;
+      const activeSubscene = props.eventState.subscene;
+
+      const dispatchedObject = dispatchObject(
+        eventAction,
+        activeSubscene,
+        newAuthorizeUserMatrixIdx
+      );
 
-      const dispatchedObject = dispatchObject(eventAction);
       if (dispatchedObject) {
-        dispatchedObject.action(dispatchedObject.value as any);
+        dispatchedObject.action(dispatchedObject.value as never);
       }
     }
   }, [dispatchObject, props.eventState]);
   return null;
 };
 
-export default BootManager;
+export default BootComponentManager;

src/core/StateManagers/EventManager.tsx

@@ -5,6 +5,7 @@ import LainManager from "./LainManager";
 import NodeManager from "./NodeManager";
 import NodeHUDManager from "./NodeHUDManager";
 import {
+  useAuthorizeUserStore,
   useBootStore,
   useLevelStore,
   useMediaStore,
@@ -20,12 +21,13 @@ import MediaWordManager from "./MediaWordManager";
 import SceneManager from "./SceneManager";
 import YellowTextManager from "./YellowTextManager";
 import LevelManager from "./LevelManager";
-import BootManager from "./BootManager";
+import BootComponentManager from "./BootComponentManager";
 import SSknComponentManager from "./SSknComponentManager";
 import handleMainSceneEvent from "../mainSceneEventHandler";
 import handleMediaSceneEvent from "../mediaSceneEventHandler";
 import handleBootEvent from "../bootEventHandler";
 import handleSSknSceneEvent from "../ssknSceneEventHandler";
+import BootAuthorizeUserManager from "./BootAuthorizeUserManager";
 
 const getKeyCodeAssociation = (keyCode: number): string => {
   const keyCodeAssocs = {
@@ -88,13 +90,27 @@ const EventManager = () => {
   const activeBootElement = useBootStore(
     useCallback(
       (state) =>
-        state.componentMatrix[currentBootSubscene][
-          state.componentMatrixIndices[currentBootSubscene]
+        state.componentMatrix[
+          currentBootSubscene as keyof typeof state.componentMatrix
+        ][
+          state.componentMatrixIndices[
+            currentBootSubscene as keyof typeof state.componentMatrixIndices
+          ]
         ],
       [currentBootSubscene]
     )
   );
 
+  const authorizeUserBgLettersPos = useAuthorizeUserStore(
+    (state) => state.bgLettersPos
+  );
+  const authorizeUserActiveLetterTexOffset = useAuthorizeUserStore(
+    (state) => state.activeLetterTextureOffset
+  );
+  const authorizeUserMatrixIdx = useBootStore(
+    (state) => state.componentMatrixIndices.authorize_user
+  );
+
   const [eventState, setEventState] = useState<any>();
 
   const [inputCooldown, setInputCooldown] = useState(false);
@@ -111,8 +127,7 @@ const EventManager = () => {
           case "main":
             event = handleMainSceneEvent({
               keyPress: keyPress,
-              siteRotY: siteTransformState.rotY,
-              sitePosY: siteTransformState.posY,
+              siteTransformState: siteTransformState,
               nodeMatrixIndices: nodeMatrixIndices,
               activeLevel: activeLevel,
             });
@@ -127,8 +142,12 @@ const EventManager = () => {
             break;
           case "boot":
             event = handleBootEvent({
+              keyPress: keyPress,
               bootSubscene: currentBootSubscene,
               activeBootElement: activeBootElement,
+              authorizeUserBgLettersPos: authorizeUserBgLettersPos,
+              authorizeUserActiveLetterTexOffset: authorizeUserActiveLetterTexOffset,
+              authorizeUserMatrixIdx: authorizeUserMatrixIdx,
             });
             break;
           case "gate":
@@ -153,8 +172,9 @@ const EventManager = () => {
       currentScene,
       inputCooldown,
       nodeMatrixIndices,
-      siteTransformState.posY,
-      siteTransformState.rotY,
+      rightSideComponentIdx,
+      siteTransformState,
+      wordPosStateIdx,
     ]
   );
 
@@ -179,8 +199,9 @@ const EventManager = () => {
       <SceneManager eventState={eventState!} />
       <YellowTextManager eventState={eventState!} />
       <LevelManager eventState={eventState!} />
-      <BootManager eventState={eventState!} />
+      <BootComponentManager eventState={eventState!} />
       <SSknComponentManager eventState={eventState!} />
+      <BootAuthorizeUserManager eventState={eventState!} />
     </>
   );
 };

src/core/authorizeUserEventHandler.ts

@@ -0,0 +1,78 @@
+const handleAuthorizeUserEvent = (gameContext: any) => {
+  const keyPress = gameContext.keyPress;
+
+  const bgLettersPos = gameContext.bgLettersPos;
+  const activeLetterTexOffset = gameContext.activeLetterTexOffset;
+  const matrixIdx = gameContext.matrixIdx;
+
+  const currentSubscene = "authorize_user";
+
+  switch (keyPress) {
+    case "left":
+      const utmostLeftIndices = [0, 13, 26, 39, 52];
+      if (utmostLeftIndices.includes(matrixIdx)) {
+        break;
+      } else {
+        return {
+          event: `${currentSubscene}_${keyPress}`,
+          newBgLettersPos: { x: bgLettersPos.x + 0.3, y: bgLettersPos.y },
+          newActiveLetterTexOffset: {
+            x: activeLetterTexOffset.x - 0.0775,
+            y: activeLetterTexOffset.y,
+          },
+          newAuthorizeUserMatrixIdx: matrixIdx - 1,
+        };
+      }
+    case "right":
+      const utmostRightIndices = [12, 25, 38, 51, 64];
+      if (utmostRightIndices.includes(matrixIdx)) {
+        break;
+      } else {
+        return {
+          event: `${currentSubscene}_${keyPress}`,
+          newBgLettersPos: { x: bgLettersPos.x - 0.3, y: bgLettersPos.y },
+          newActiveLetterTexOffset: {
+            x: activeLetterTexOffset.x + 0.0775,
+            y: activeLetterTexOffset.y,
+          },
+          newAuthorizeUserMatrixIdx: matrixIdx + 1,
+        };
+      }
+    case "down":
+      const utmostLowIndices = Array.from(new Array(13), (x, i) => i + 52);
+      if (utmostLowIndices.includes(matrixIdx)) {
+        break;
+      } else {
+        return {
+          event: `${currentSubscene}_${keyPress}`,
+          newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y + 0.25 },
+          newActiveLetterTexOffset: {
+            x: activeLetterTexOffset.x,
+            y: activeLetterTexOffset.y - 0.2,
+          },
+          newAuthorizeUserMatrixIdx: matrixIdx + 13,
+        };
+      }
+    case "up":
+      const utmostHighIndices = Array.from(new Array(13), (x, i) => i);
+      if (utmostHighIndices.includes(matrixIdx)) {
+        break;
+      } else {
+        return {
+          event: `${currentSubscene}_${keyPress}`,
+          newBgLettersPos: { x: bgLettersPos.x, y: bgLettersPos.y - 0.25 },
+          newActiveLetterTexOffset: {
+            x: activeLetterTexOffset.x,
+            y: activeLetterTexOffset.y + 0.2,
+          },
+          newAuthorizeUserMatrixIdx: matrixIdx - 13,
+        };
+      }
+
+    case "back": {
+      return { event: "authorize_user_back" };
+    }
+  }
+};
+
+export default handleAuthorizeUserEvent;

src/core/bootEventHandler.ts

@@ -1,21 +1,39 @@
+import handleAuthorizeUserEvent from "./authorizeUserEventHandler";
+
 const handleBootEvent = (gameContext: any) => {
   const keyPress = gameContext.keyPress;
 
   const activeBootElement = gameContext.activeBootElement;
   const currentSubscene = gameContext.bootSubscene;
+  const authorizeUserBgLettersPos = gameContext.authorizeUserBgLettersPos;
+  const authorizeUserActiveLetterTexOffset =
+    gameContext.authorizeUserActiveLetterTexOffset;
+  const authorizeUserMatrixIdx = gameContext.authorizeUserMatrixIdx;
 
-  switch (keyPress) {
-    case "down":
-    case "up":
-    case "left":
-    case "right":
-    case "back":
-      return { event: `${currentSubscene}_${keyPress}` };
-    case "select":
-      switch (currentSubscene) {
-        case "authorize_user":
-      }
-      return { event: `${activeBootElement}_${keyPress}` };
+  if (currentSubscene === "authorize_user") {
+    return handleAuthorizeUserEvent({
+      keyPress: keyPress,
+      bgLettersPos: authorizeUserBgLettersPos,
+      activeLetterTexOffset: authorizeUserActiveLetterTexOffset,
+      matrixIdx: authorizeUserMatrixIdx,
+    });
+  } else {
+    switch (keyPress) {
+      case "down":
+      case "up":
+      case "left":
+      case "right":
+      case "back":
+        return {
+          event: `${currentSubscene}_${keyPress}`,
+          subscene: currentSubscene,
+        };
+      case "select":
+        return {
+          event: `${activeBootElement}_${keyPress}`,
+          subscene: currentSubscene,
+        };
+    }
   }
 };
 

src/core/mainSceneEventHandler.ts

@@ -28,8 +28,8 @@ const handleMainSceneEvent = (gameContext: any) => {
   let newNodeColIdx = gameContext.nodeMatrixIndices.colIdx;
   let newNodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
   let newLevel = gameContext.activeLevel;
-  let newSiteRotY = gameContext.siteRotY;
-  let newSitePosY = gameContext.sitePosY;
+  let newSiteRotY = gameContext.siteTransformState.rotY;
+  let newSitePosY = gameContext.siteTransformState.posY;
   let newScene = gameContext.scene;
 
   switch (keyPress) {

src/resources/authorize_user_letters.json

@@ -0,0 +1,69 @@
+{
+  "letters": [
+    0,
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    13,
+    14,
+    15,
+    16,
+    17,
+    18,
+    19,
+    20,
+    21,
+    22,
+    23,
+    24,
+    25,
+    26,
+    27,
+    28,
+    29,
+    30,
+    31,
+    32,
+    33,
+    34,
+    35,
+    36,
+    37,
+    38,
+    39,
+    40,
+    41,
+    42,
+    43,
+    44,
+    45,
+    46,
+    47,
+    48,
+    49,
+    50,
+    51,
+    52,
+    53,
+    54,
+    55,
+    56,
+    57,
+    58,
+    59,
+    60,
+    61,
+    62,
+    63,
+    64
+  ]
+}

src/scenes/BootScene.tsx

@@ -11,8 +11,12 @@ const BootScene = () => {
   const activeBootElement = useBootStore(
     useCallback(
       (state) =>
-        state.componentMatrix[activeSubscene][
-          state.componentMatrixIndices[activeSubscene]
+        state.componentMatrix[
+          activeSubscene as keyof typeof state.componentMatrix
+        ][
+          state.componentMatrixIndices[
+            activeSubscene as keyof typeof state.componentMatrixIndices
+          ]
         ],
       [activeSubscene]
     )
@@ -25,11 +29,11 @@ const BootScene = () => {
     setTimeout(() => {
       setAccelaVisible(false);
       // 2000
-    }, 0);
+    }, 2000);
     setTimeout(() => {
       setMainMenuVisible(true);
       //6200
-    }, 0);
+    }, 6200);
   }, []);
 
   return (

src/store.ts

@@ -1,6 +1,7 @@
 import create from "zustand";
 import { combine } from "zustand/middleware";
 import * as THREE from "three";
+import authorize_user_letters from "./resources/authorize_user_letters.json";
 
 type SceneState = {
   currentScene: string;
@@ -92,6 +93,35 @@ export type YellowTextState = {
   };
 };
 
+export type BootState = {
+  componentMatrix: {
+    main_menu: [string, string];
+    load_data: [string, string];
+    authorize_user: number[];
+  };
+  componentMatrixIndices: {
+    // 0 or 1
+    main_menu: number;
+    // 0 or 1
+    load_data: number;
+    authorize_user: number;
+  };
+  subscene: string;
+};
+
+export type AuthorizeUserState = {
+  bgLettersPos: {
+    x: number;
+    y: number;
+  };
+  activeLetterTextureOffset: {
+    x: number;
+    y: number;
+  };
+  setBgLettersPos: (to: { x: number; y: number }) => void;
+  setActiveLetterTexOffset: (to: { x: number; y: number }) => void;
+};
+
 export type GreenTextState = {
   text: string;
   transformState: {
@@ -351,146 +381,63 @@ export const useSSknStore = create<SSknState>((set) => ({
 }));
 
 export const useSceneStore = create<SceneState>((set) => ({
-  currentScene: "media",
+  currentScene: "polytan",
   setScene: (to) => set(() => ({ currentScene: to })),
 }));
 
+export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
+  bgLettersPos: {
+    x: 3.35,
+    y: -0.7,
+  },
+  activeLetterTextureOffset: {
+    x: 0,
+    y: -0.2,
+  },
+  setBgLettersPos: (to: { x: number; y: number }) =>
+    set(() => ({ bgLettersPos: to })),
+  setActiveLetterTexOffset: (to: { x: number; y: number }) =>
+    set(() => ({ activeLetterTextureOffset: to })),
+}));
+
 export const useBootStore = create(
   combine(
     {
       componentMatrix: {
         main_menu: ["authorize_user", "load_data"],
         load_data: ["load_data_yes", "load_data_no"],
-        authorize_user: [
-          [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
-          [14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26],
-          [27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39],
-          [39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51],
-          [51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63],
-        ],
-      },
-      bgLettersPos: {
-        x: 3.35,
-        y: -0.7,
-      },
-      activeLetterTextureOffset: {
-        x: 0,
-        y: -0.2,
+        authorize_user: authorize_user_letters.letters,
       },
       componentMatrixIndices: {
         // 0 or 1
         main_menu: 0,
         // 0 or 1
         load_data: 0,
-        authorize_user: {
-          row: 0,
-          col: 0,
-        },
+        authorize_user: 0,
       },
       // main_menu, load_data or authorize_user
-      subscene: "authorize_user",
-    } as any,
+      subscene: "main_menu",
+    } as BootState,
     (set) => ({
+      setSubscene: (to: string) => set(() => ({ subscene: to })),
       toggleComponentMatrixIdx: (subscene: string) =>
         set((state) => ({
           componentMatrixIndices: {
             ...state.componentMatrixIndices,
-            [subscene]: Number(!state.componentMatrixIndices[subscene]),
+            [subscene]: Number(
+              !state.componentMatrixIndices[
+                subscene as keyof typeof state.componentMatrixIndices
+              ]
+            ),
+          },
+        })),
+      setAuthorizeUserMatrixIdx: (to: number) =>
+        set((state) => ({
+          componentMatrixIndices: {
+            ...state.componentMatrixIndices,
+            authorize_user: to,
           },
         })),
-      setSubscene: (to: string) => set(() => ({ subscene: to })),
-      moveAuthorizeUserLetters: (direction: string) =>
-        set((state) => {
-          let initialPos = state.bgLettersPos;
-          let initialActiveLetterTextureOffset =
-            state.activeLetterTextureOffset;
-          let initialLetterRowIdx =
-            state.componentMatrixIndices.authorize_user.row;
-          let initialLetterColIdx =
-            state.componentMatrixIndices.authorize_user.col;
-
-          let axis: string;
-          let finalPosVal: number;
-          let finalTextureOffsetVal: number;
-          let finalLetterRowIdx: number;
-          let finalLetterColIdx: number;
-
-          switch (direction) {
-            case "right":
-              axis = "x";
-              if (initialPos.x - 0.3 < -0.25) {
-                finalPosVal = -0.25;
-                finalLetterRowIdx = 12;
-                finalTextureOffsetVal = 0.93;
-              } else {
-                finalPosVal = initialPos.x - 0.3;
-                finalLetterRowIdx = initialLetterRowIdx + 1;
-                finalTextureOffsetVal =
-                  initialActiveLetterTextureOffset.x + 0.0775;
-              }
-              finalLetterColIdx = initialLetterColIdx;
-              break;
-            case "left":
-              axis = "x";
-              if (initialPos.x + 0.3 > 3.35) {
-                finalPosVal = 3.35;
-                finalLetterRowIdx = 0;
-                finalTextureOffsetVal = 0;
-              } else {
-                finalPosVal = initialPos.x + 0.3;
-                finalTextureOffsetVal =
-                  initialActiveLetterTextureOffset.x - 0.0775;
-                finalLetterRowIdx = initialLetterRowIdx - 1;
-              }
-              finalLetterColIdx = initialLetterColIdx;
-              break;
-            case "up":
-              axis = "y";
-              if (initialPos.y - 0.25 < -0.7) {
-                finalPosVal = -0.7;
-                finalLetterColIdx = 0;
-                finalTextureOffsetVal = -0.2;
-              } else {
-                finalPosVal = initialPos.y - 0.25;
-                finalTextureOffsetVal =
-                  initialActiveLetterTextureOffset.y + 0.2;
-                finalLetterColIdx = initialLetterColIdx - 1;
-              }
-              finalLetterRowIdx = initialLetterRowIdx;
-              break;
-            case "down":
-              axis = "y";
-              if (initialPos.y + 0.25 > 0.3) {
-                finalPosVal = 0.3;
-                finalLetterColIdx = 4;
-                finalTextureOffsetVal = -1;
-              } else {
-                finalPosVal = initialPos.y + 0.25;
-                finalTextureOffsetVal =
-                  initialActiveLetterTextureOffset.y - 0.2;
-                finalLetterColIdx = initialLetterColIdx + 1;
-              }
-              finalLetterRowIdx = initialLetterRowIdx;
-              break;
-          }
-          return {
-            bgLettersPos: {
-              ...state.bgLettersPos,
-              [axis!]: finalPosVal!,
-            },
-            activeLetterTextureOffset: {
-              ...state.activeLetterTextureOffset,
-              [axis!]: finalTextureOffsetVal!,
-            },
-            componentMatrixIndices: {
-              ...state.componentMatrixIndices,
-              authorize_user: {
-                row: finalLetterRowIdx!,
-                col: finalLetterColIdx!,
-              },
-            },
-          };
-        }),
     })
   )
 );