diff --git a/src/components/Boot/BootAnimation.tsx b/src/components/Boot/BootAnimation.tsx index 7044221..e496292 100644 --- a/src/components/Boot/BootAnimation.tsx +++ b/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(); return ( - <> + { opacity={animationState.graySquareOpacity} /> - {props.visible && props.activeSubScene !== "authorize_user" ? ( + {props.activeSubScene !== "authorize_user" ? ( <> {/*we have two of each to create looping effect*/} { opacity={bootState.bootOpacity} /> - + { ) : ( <> )} - + ); }; diff --git a/src/components/Boot/BootAuthorizeUser.tsx b/src/components/Boot/BootAuthorizeUser.tsx index fdd3487..42d67b4 100644 --- a/src/components/Boot/BootAuthorizeUser.tsx +++ b/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 ( <> diff --git a/src/components/Boot/BootLoadData.tsx b/src/components/Boot/BootLoadData.tsx index c770d03..e92e5e9 100644 --- a/src/components/Boot/BootLoadData.tsx +++ b/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) => { diff --git a/src/components/Boot/BootMainMenuComponents.tsx b/src/components/Boot/BootMainMenuComponents.tsx index dea2b5c..2db23da 100644 --- a/src/components/Boot/BootMainMenuComponents.tsx +++ b/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) => { diff --git a/src/core/StateManagers/BootAuthorizeUserManager.tsx b/src/core/StateManagers/BootAuthorizeUserManager.tsx new file mode 100644 index 0000000..a9969c3 --- /dev/null +++ b/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; diff --git a/src/core/StateManagers/BootManager.tsx b/src/core/StateManagers/BootComponentManager.tsx similarity index 60% rename from src/core/StateManagers/BootManager.tsx rename to src/core/StateManagers/BootComponentManager.tsx index 89aee09..32b120c 100644 --- a/src/core/StateManagers/BootManager.tsx +++ b/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; diff --git a/src/core/StateManagers/EventManager.tsx b/src/core/StateManagers/EventManager.tsx index 56adb2f..f6b66ce 100644 --- a/src/core/StateManagers/EventManager.tsx +++ b/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(); 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 = () => { - + + ); }; diff --git a/src/core/authorizeUserEventHandler.ts b/src/core/authorizeUserEventHandler.ts new file mode 100644 index 0000000..152661b --- /dev/null +++ b/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; diff --git a/src/core/bootEventHandler.ts b/src/core/bootEventHandler.ts index 24962fd..dc6668f 100644 --- a/src/core/bootEventHandler.ts +++ b/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, + }; + } } }; diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 99b6121..72bb6f1 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/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) { diff --git a/src/resources/authorize_user_letters.json b/src/resources/authorize_user_letters.json new file mode 100644 index 0000000..ad27f9b --- /dev/null +++ b/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 + ] +} diff --git a/src/scenes/BootScene.tsx b/src/scenes/BootScene.tsx index 2285fd3..f08d108 100644 --- a/src/scenes/BootScene.tsx +++ b/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 ( diff --git a/src/store.ts b/src/store.ts index 151c25b..e11ade1 100644 --- a/src/store.ts +++ b/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((set) => ({ })); export const useSceneStore = create((set) => ({ - currentScene: "media", + currentScene: "polytan", setScene: (to) => set(() => ({ currentScene: to })), })); +export const useAuthorizeUserStore = create((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!, - }, - }, - }; - }), }) ) );