diff --git a/src/components/Boot/BootAuthorizeUser.tsx b/src/components/Boot/BootAuthorizeUser.tsx index a48d6e4..e74984d 100644 --- a/src/components/Boot/BootAuthorizeUser.tsx +++ b/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(); + const backgroundLettersPos = useBootStore((state) => state.lettersPos); + const activeLetterTextureOffset = useBootStore( + (state) => state.activeLetterTextureOffset + ); - useFrame(() => { - if (backgroundLetterRef.current) { - // backgroundLetterRef.current.position.x += 0.01 - } - }); + const authorizeActiveLettersMap = useMemo(() => { + authorizeActiveLettersTex.wrapT = authorizeActiveLettersTex.wrapS = + THREE.RepeatWrapping; + authorizeActiveLettersTex.repeat.set(0.06, 0.2); + authorizeActiveLettersTex.offset.x = activeLetterTextureOffset.x; + authorizeActiveLettersTex.offset.y = activeLetterTextureOffset.y; + + return authorizeActiveLettersTex; + }, [activeLetterTextureOffset, authorizeActiveLettersTex]); return ( <> + {props.visible ? ( <> { { transparent={true} /> + + + + + + + + ) : ( diff --git a/src/core/StateManagers/BootManager.tsx b/src/core/StateManagers/BootManager.tsx index 25e0d28..89aee09 100644 --- a/src/core/StateManagers/BootManager.tsx +++ b/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(() => { diff --git a/src/store.ts b/src/store.ts index 9e286b3..e82bc12 100644 --- a/src/store.ts +++ b/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: { - 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, - ], + lettersPos: { + x: 3.35, + y: -0.7, + }, + activeLetterTextureOffset: { + x: 0, + y: -0.2, }, 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!, + }, + }; + }), }) ) );