diff --git a/src/components/BlueOrb.tsx b/src/components/BlueOrb.tsx index 2fc7754..10ffe9b 100644 --- a/src/components/BlueOrb.tsx +++ b/src/components/BlueOrb.tsx @@ -1,4 +1,4 @@ -import React, { memo, useMemo, useRef } from "react"; +import React, {memo, useEffect, useMemo, useRef} from "react"; import { useFrame, useLoader } from "react-three-fiber"; import { useSpring, a } from "@react-spring/three"; import * as THREE from "three"; @@ -17,6 +17,7 @@ import LdaActive from "../static/sprites/Lda_active.png"; import MULTI from "../static/sprites/MULTI.png"; import MULTIActive from "../static/sprites/MULTI_active.png"; import level_y_values from "../resources/level_y_values.json"; +import { useBlueOrbStore } from "../store"; type BlueOrbContructorProps = { sprite: string; @@ -26,15 +27,14 @@ type BlueOrbContructorProps = { level: string; }; -type LevelYValues = { - [level: string]: number; -}; - -type SpriteToPath = { - [key: string]: [string, string]; -}; - const BlueOrb = memo((props: BlueOrbContructorProps) => { + const isActiveBlueOrbInteractedWith = useBlueOrbStore( + (state) => state.isActiveBlueOrbInteractedWith + ); + const activeBlueOrbPosX = useBlueOrbStore((state) => state.activeBlueOrbPosX); + const activeBlueOrbPosZ = useBlueOrbStore((state) => state.activeBlueOrbPosZ); + const activeBlueOrbRotZ = useBlueOrbStore((state) => state.activeBlueOrbRotZ); + // the game only has a couple of sprites that it displays in the hub // dynamically importnig them would be worse for performance, // so we import all of them here and then use this function to @@ -52,7 +52,7 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => { } else if (sprite.includes("Dc")) { return [Dc, DcActive]; } else { - return ({ + const spriteAssocs = { Tda: [Tda, TdaActive], Cou: [Cou, CouActive], Dia: [Dia, DiaActive], @@ -62,7 +62,9 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => { Eda: [MULTI, MULTIActive], TaK: [MULTI, MULTIActive], Env: [MULTI, MULTIActive], - } as SpriteToPath)[sprite.substr(0, 3)]; + }; + + return spriteAssocs[sprite.substr(0, 3) as keyof typeof spriteAssocs]; } }; @@ -110,7 +112,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => { } `; - const activeBlueOrbRef = useRef(); useFrame(() => { if (materialRef.current) { materialRef.current.uniforms.timeMSeconds.value = @@ -118,19 +119,41 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => { } }); + const activeBlueOrbState = useSpring({ + activeBlueOrbPosX: isActiveBlueOrbInteractedWith + ? activeBlueOrbPosX + : props.position[0], + activeBlueOrbPosY: isActiveBlueOrbInteractedWith + ? level_y_values[props.level as keyof typeof level_y_values] + : props.position[1], + activeBlueOrbPosZ: isActiveBlueOrbInteractedWith + ? activeBlueOrbPosZ + : props.position[2], + activeBlueOrbRotZ: isActiveBlueOrbInteractedWith + ? activeBlueOrbRotZ + : 0.001, + config: { duration: 800 }, + }); + return ( - - - - {props.active ? ( + + {props.active ? ( + + { side={THREE.DoubleSide} transparent={true} /> - ) : ( + + ) : ( + + - )} - + + )} ); }); diff --git a/src/components/HUD.tsx b/src/components/HUD.tsx index ba6ec67..3a30c1e 100644 --- a/src/components/HUD.tsx +++ b/src/components/HUD.tsx @@ -20,7 +20,7 @@ export type HUDElementProps = { const HUD = memo((props: HUDElementProps) => { const hudActive = useBlueOrbStore((state) => state.hudActive); - const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId); + const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId); const currentHudId = useBlueOrbStore((state) => state.hudId); const yellowHudTextPosY = useBlueOrbStore((state) => state.yellowHudTextPosY); @@ -30,7 +30,7 @@ const HUD = memo((props: HUDElementProps) => { const currentYellowHudText = useBlueOrbStore((state) => state.yellowHudText); const currentGreenHudText = - site_a[currentBlueOrbId as keyof typeof site_a].green_text; + site_a[activeBlueOrbId as keyof typeof site_a].green_text; const yellowTextArr = currentYellowHudText.split(""); const greenTextArr = currentGreenHudText.split(""); diff --git a/src/components/Lain.tsx b/src/components/Lain.tsx index 33153fc..4b77a8f 100644 --- a/src/components/Lain.tsx +++ b/src/components/Lain.tsx @@ -38,10 +38,6 @@ const LainConstructor = (props: LainConstructorProps) => { animator.animate(); }); - useFrame(() => { - animator.animate(); - }); - return ( { const setLainMoveState = useLainStore((state) => state.setLainMoveState); - const setCurrentBlueOrb = useBlueOrbStore( - (state) => state.setCurrentBlueOrbId + const setActiveBlueOrb = useBlueOrbStore( + (state) => state.setActiveBlueOrbId ); - const setCurrentBlueOrbHudId = useBlueOrbStore( - (state) => state.setCurrentBlueOrbHudId + const setActiveBlueOrbHudId = useBlueOrbStore( + (state) => state.setActiveBlueOrbHudId ); const mainGroupPosY = useMainGroupStore((state) => state.mainGroupPosY); @@ -39,9 +39,9 @@ const MainScene = () => { useEffect(() => { setLainMoveState("standing"); - setCurrentBlueOrb("0422"); - setCurrentBlueOrbHudId("fg_hud_1"); - }, [setCurrentBlueOrb, setCurrentBlueOrbHudId, setLainMoveState]); + setActiveBlueOrb("0422"); + setActiveBlueOrbHudId("fg_hud_1"); + }, [setActiveBlueOrb, setActiveBlueOrbHudId, setLainMoveState]); // set lain intro spritesheet before the page loads fully useEffect(() => { // setLainMoving(true); diff --git a/src/components/PurpleRing.tsx b/src/components/PurpleRing.tsx index be9831b..5ad07d8 100644 --- a/src/components/PurpleRing.tsx +++ b/src/components/PurpleRing.tsx @@ -10,10 +10,6 @@ type PurpleRingProps = { level: string; }; -type SiteTextureDispatcher = { - [key: string]: number; -}; - const PurpleRing = memo((props: PurpleRingProps) => { const siteA = useLoader(THREE.TextureLoader, siteATex); const siteB = useLoader(THREE.TextureLoader, siteBTex); @@ -22,7 +18,7 @@ const PurpleRing = memo((props: PurpleRingProps) => { const purpleRingRef = useRef(); const dispatchSiteLevelTextureOffset = (level: string) => { - return ({ + const siteTextures = { "9": 0.035, "8": 0.039, "7": 0.001, @@ -33,7 +29,8 @@ const PurpleRing = memo((props: PurpleRingProps) => { "2": 0.0218, "1": 0.026, "0": 0.031, - } as SiteTextureDispatcher)[level]; + }; + return siteTextures[level as keyof typeof siteTextures]; }; const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]); diff --git a/src/components/Site.tsx b/src/components/Site.tsx index df01d2f..305b577 100644 --- a/src/components/Site.tsx +++ b/src/components/Site.tsx @@ -8,7 +8,7 @@ import { a, useSpring } from "@react-spring/three"; import { useBlueOrbStore, useSiteStore } from "../store"; const Site = memo(() => { - const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId); + const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId); const siteRotY = useSiteStore((state) => state.siteRotY); const sitePosY = useSiteStore((state) => state.sitePosY); @@ -49,7 +49,7 @@ const Site = memo(() => { ] } key={(blueOrb as any)[1]["node_name"]} - active={(blueOrb as any)[0] === currentBlueOrbId} + active={(blueOrb as any)[0] === activeBlueOrbId} level={(blueOrb as any)[0].substr(0, 2)} /> ); diff --git a/src/components/StateManagers/BlueOrbHUDStateManager.tsx b/src/components/StateManagers/BlueOrbHUDStateManager.tsx index f6c9970..fbdf688 100644 --- a/src/components/StateManagers/BlueOrbHUDStateManager.tsx +++ b/src/components/StateManagers/BlueOrbHUDStateManager.tsx @@ -1,10 +1,11 @@ -import React, { useCallback, useEffect, useMemo } from "react"; +import React, { useCallback, useEffect } from "react"; import { useBlueOrbStore } from "../../store"; import blue_orb_directions from "../../resources/blue_orb_directions.json"; +import { StateManagerProps } from "./EventStateManager"; -const BlueOrbHUDStateManager = (props: any) => { - const setCurrentBlueOrbHudId = useBlueOrbStore( - (state) => state.setCurrentBlueOrbHudId +const BlueOrbHUDStateManager = (props: StateManagerProps) => { + const setActiveBlueOrbHudId = useBlueOrbStore( + (state) => state.setActiveBlueOrbHudId ); const toggleHud = useBlueOrbStore((state) => state.toggleHud); @@ -12,27 +13,27 @@ const BlueOrbHUDStateManager = (props: any) => { (event: string, targetBlueOrbHudId: string) => { const dispatcherObjects = { moveUp: { - action: setCurrentBlueOrbHudId, + action: setActiveBlueOrbHudId, value: targetBlueOrbHudId, actionDelay: 3903.704, }, moveDown: { - action: setCurrentBlueOrbHudId, + action: setActiveBlueOrbHudId, value: targetBlueOrbHudId, actionDelay: 3903.704, }, moveLeft: { - action: setCurrentBlueOrbHudId, + action: setActiveBlueOrbHudId, value: targetBlueOrbHudId, actionDelay: 3903.704, }, moveRight: { - action: setCurrentBlueOrbHudId, + action: setActiveBlueOrbHudId, value: targetBlueOrbHudId, actionDelay: 3903.704, }, changeBlueOrbFocus: { - action: setCurrentBlueOrbHudId, + action: setActiveBlueOrbHudId, value: targetBlueOrbHudId, actionDelay: 500, }, @@ -40,7 +41,7 @@ const BlueOrbHUDStateManager = (props: any) => { return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [] + [setActiveBlueOrbHudId] ); useEffect(() => { @@ -64,13 +65,7 @@ const BlueOrbHUDStateManager = (props: any) => { }, dispatchedObject.actionDelay); } } - }, [ - props.eventState, - props.targetBlueOrbGreenText, - props.targetBlueOrbHudId, - setCurrentBlueOrbHudId, - toggleHud, - ]); + }, [props.eventState, setActiveBlueOrbHudId, toggleHud, dispatchObject]); return null; }; diff --git a/src/components/StateManagers/BlueOrbHUDTextStateManager.tsx b/src/components/StateManagers/BlueOrbHUDTextStateManager.tsx index c96517c..427b0c3 100644 --- a/src/components/StateManagers/BlueOrbHUDTextStateManager.tsx +++ b/src/components/StateManagers/BlueOrbHUDTextStateManager.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo } from "react"; +import React, { useCallback, useEffect } from "react"; import blue_orb_huds from "../../resources/blue_orb_huds.json"; import site_a from "../../resources/site_a.json"; import { useBlueOrbStore } from "../../store"; @@ -30,6 +30,7 @@ type BlueOrbHUDTextDispatcher = { const BlueOrbHUDTextStateManager = (props: any) => { const setYellowHudText = useBlueOrbStore((state) => state.setYellowHudText); + const setYellowHudTextOffsetXCoeff = useBlueOrbStore( (state) => state.setYellowHudTextOffsetXCoeff ); @@ -155,7 +156,7 @@ const BlueOrbHUDTextStateManager = (props: any) => { return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [] + [animateYellowTextWithMove, animateYellowTextWithoutMove] ); useEffect(() => { @@ -185,6 +186,7 @@ const BlueOrbHUDTextStateManager = (props: any) => { props.eventState, props.targetBlueOrbHudId, props.targetBlueOrbId, + dispatchObject, ]); return null; diff --git a/src/components/StateManagers/BlueOrbStateManager.tsx b/src/components/StateManagers/BlueOrbStateManager.tsx index a4c546f..9d02820 100644 --- a/src/components/StateManagers/BlueOrbStateManager.tsx +++ b/src/components/StateManagers/BlueOrbStateManager.tsx @@ -1,12 +1,13 @@ import React, { useCallback, useEffect } from "react"; import { useBlueOrbStore } from "../../store"; import blue_orb_directions from "../../resources/blue_orb_directions.json"; +import { StateManagerProps } from "./EventStateManager"; -type SetCurrentBlueOrb = (value: string) => void; -type SetIsCurrentBlueOrbInteractedWith = (value: boolean) => void; +type SetActiveBlueOrb = (value: string) => void; +type SetIsActiveBlueOrbInteractedWith = (value: boolean) => void; type BlueOrbDispatchData = { - action: SetCurrentBlueOrb | SetIsCurrentBlueOrbInteractedWith; + action: SetActiveBlueOrb | SetIsActiveBlueOrbInteractedWith; value: string | boolean; actionDelay: number; }; @@ -17,47 +18,87 @@ type BlueOrbDispatcher = { moveLeft: BlueOrbDispatchData; moveRight: BlueOrbDispatchData; changeBlueOrbFocus: BlueOrbDispatchData; - pickCurrentBlueOrb: BlueOrbDispatchData; + pickActiveBlueOrb: BlueOrbDispatchData; }; -const BlueOrbStateManager = (props: any) => { - const setCurrentBlueOrb: SetCurrentBlueOrb = useBlueOrbStore( - (state) => state.setCurrentBlueOrbId +const BlueOrbStateManager = (props: StateManagerProps) => { + const setActiveBlueOrb: SetActiveBlueOrb = useBlueOrbStore( + (state) => state.setActiveBlueOrbId ); - const setIsCurrentBlueOrbInteractedWith: SetIsCurrentBlueOrbInteractedWith = useBlueOrbStore( - (state) => state.setIsCurrentBlueOrbInteractedWith + const setIsActiveBlueOrbInteractedWith: SetIsActiveBlueOrbInteractedWith = useBlueOrbStore( + (state) => state.setIsActiveBlueOrbInteractedWith ); + const setActiveBlueOrbPosX = useBlueOrbStore( + (state) => state.setActiveBlueOrbPosX + ); + const setActiveBlueOrbPosZ = useBlueOrbStore( + (state) => state.setActiveBlueOrbPosZ + ); + const setActiveBlueOrbRotZ = useBlueOrbStore( + (state) => state.setActiveBlueOrbRotZ + ); + + const animateActiveBlueOrbThrow = useCallback(() => { + setIsActiveBlueOrbInteractedWith(true); + + setActiveBlueOrbPosZ(0.3); + setActiveBlueOrbPosX(0.9); + + setTimeout(() => { + setActiveBlueOrbPosZ(0.2); + setActiveBlueOrbPosX(0.5); + }, 800); + setTimeout(() => { + setActiveBlueOrbPosX(0.55); + setActiveBlueOrbRotZ(-0.005); + }, 2000); + setTimeout(() => { + setActiveBlueOrbPosZ(2); + setActiveBlueOrbPosX(0); + setActiveBlueOrbRotZ(-0.5); + }, 2450); + + setTimeout(() => { + setActiveBlueOrbRotZ(0); + setIsActiveBlueOrbInteractedWith(false); + }, 3800); + }, [ + setActiveBlueOrbPosX, + setActiveBlueOrbPosZ, + setActiveBlueOrbRotZ, + setIsActiveBlueOrbInteractedWith, + ]); const dispatchObject = useCallback( (event: string, targetBlueOrbId: string) => { const dispatcherObjects: BlueOrbDispatcher = { moveUp: { - action: setCurrentBlueOrb, + action: setActiveBlueOrb, value: targetBlueOrbId, actionDelay: 3903.704, }, moveDown: { - action: setCurrentBlueOrb, + action: setActiveBlueOrb, value: targetBlueOrbId, actionDelay: 3903.704, }, moveLeft: { - action: setCurrentBlueOrb, + action: setActiveBlueOrb, value: targetBlueOrbId, actionDelay: 3903.704, }, moveRight: { - action: setCurrentBlueOrb, + action: setActiveBlueOrb, value: targetBlueOrbId, actionDelay: 3903.704, }, changeBlueOrbFocus: { - action: setCurrentBlueOrb, + action: setActiveBlueOrb, value: targetBlueOrbId, actionDelay: 0, }, - pickCurrentBlueOrb: { - action: setIsCurrentBlueOrbInteractedWith, + pickActiveBlueOrb: { + action: animateActiveBlueOrbThrow, value: true, actionDelay: 0, }, @@ -65,7 +106,7 @@ const BlueOrbStateManager = (props: any) => { return dispatcherObjects[event as keyof typeof dispatcherObjects]; }, - [] + [animateActiveBlueOrbThrow, setActiveBlueOrb] ); useEffect(() => { @@ -81,15 +122,12 @@ const BlueOrbStateManager = (props: any) => { const dispatchedObject = dispatchObject(eventAction, targetBlueOrbId); if (dispatchedObject) { - // set current to dummy blue orb for disabling the glowing effect for the current sprite. - setCurrentBlueOrb("dummy"); - setTimeout(() => { dispatchedObject.action(dispatchedObject.value as never); }, dispatchedObject.actionDelay); } } - }, [props.eventState, props.targetBlueOrbId, setCurrentBlueOrb]); + }, [props.eventState, setActiveBlueOrb, dispatchObject]); return null; }; diff --git a/src/components/StateManagers/EventStateManager.tsx b/src/components/StateManagers/EventStateManager.tsx index 2178a7c..81c3712 100644 --- a/src/components/StateManagers/EventStateManager.tsx +++ b/src/components/StateManagers/EventStateManager.tsx @@ -7,28 +7,24 @@ import BlueOrbHUDStateManager from "./BlueOrbHUDStateManager"; import BlueOrbHUDTextStateManager from "./BlueOrbHUDTextStateManager"; import { useBlueOrbStore } from "../../store"; -type KeyCodeAssociations = { - [keyCode: number]: string; -}; - const getKeyCodeAssociation = (keyCode: number): string => { - return ({ - 40: "down", - 37: "left", - 38: "up", - 39: "right", - 88: "x", - } as KeyCodeAssociations)[keyCode]; + const keyCodeAssocs = { + 40: "down", // down arrow + 37: "left", // left arrow + 38: "up", // up arrow + 39: "right", // right arrow + 88: "pick", // x key + }; + return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs]; }; -type BlueOrbStateData = { - targetBlueOrbId: string; - targetBlueOrbHudId: string; +export type StateManagerProps = { + eventState: string; }; const EventStateManager = () => { const [eventState, setEventState] = useState(); - const currentBlueOrb = useBlueOrbStore((state) => state.blueOrbId); + const activeBlueOrb = useBlueOrbStore((state) => state.blueOrbId); const [inputCooldown, setInputCooldown] = useState(false); @@ -38,23 +34,17 @@ const EventStateManager = () => { const keyPress = getKeyCodeAssociation(keyCode); - // changing blue orb focus/moving around the map - const arrowKeys = ["up", "down", "left", "right"]; - - // interacting with blue orbs - const blueOrbPressKeys = ["x"]; - - if (arrowKeys.includes(keyPress) && !inputCooldown) { + if (keyPress && !inputCooldown) { // event id consists of the CURRENT blue orb id (to calculate where we're at currently) // and the keypress. // this id is later on used to get the needed corresponding data for each component // from blue_orb_directions.json file. - const eventId = `${currentBlueOrb}_${keyPress}`; + const eventId = `${activeBlueOrb}_${keyPress}`; setEventState(eventId); } }, - [inputCooldown, currentBlueOrb] + [inputCooldown, activeBlueOrb] ); useEffect(() => { diff --git a/src/components/StateManagers/LainStateManager.tsx b/src/components/StateManagers/LainStateManager.tsx index 07213b2..59c0d16 100644 --- a/src/components/StateManagers/LainStateManager.tsx +++ b/src/components/StateManagers/LainStateManager.tsx @@ -1,41 +1,45 @@ import React, { useCallback, useEffect, useMemo } from "react"; import { useLainStore } from "../../store"; import blue_orb_directions from "../../resources/blue_orb_directions.json"; +import { StateManagerProps } from "./EventStateManager"; -const LainStateManager = (props: any) => { +const LainStateManager = (props: StateManagerProps) => { const setLainMoveState = useLainStore((state) => state.setLainMoveState); - const dispatchObject = useCallback((event: string) => { - const dispatcherObjects = { - moveUp: { - action: setLainMoveState, - value: "moveUp", - duration: 3903.704, - }, - moveDown: { - action: setLainMoveState, - value: "moveDown", - duration: 3903.704, - }, - moveLeft: { - action: setLainMoveState, - value: "moveLeft", - duration: 3903.704, - }, - moveRight: { - action: setLainMoveState, - value: "moveRight", - duration: 3903.704, - }, - pickCurrentBlueOrb: { - action: setLainMoveState, - value: "pickCurrentBlueOrb", - duration: 3903.704, - }, - }; + const dispatchObject = useCallback( + (event: string) => { + const dispatcherObjects = { + moveUp: { + action: setLainMoveState, + value: "moveUp", + duration: 3903.704, + }, + moveDown: { + action: setLainMoveState, + value: "moveDown", + duration: 3903.704, + }, + moveLeft: { + action: setLainMoveState, + value: "moveLeft", + duration: 3903.704, + }, + moveRight: { + action: setLainMoveState, + value: "moveRight", + duration: 3903.704, + }, + pickActiveBlueOrb: { + action: setLainMoveState, + value: "throwBlueOrb", + duration: 3903.704, + }, + }; - return dispatcherObjects[event as keyof typeof dispatcherObjects]; - }, []); + return dispatcherObjects[event as keyof typeof dispatcherObjects]; + }, + [setLainMoveState] + ); useEffect(() => { if (props.eventState) { @@ -55,7 +59,7 @@ const LainStateManager = (props: any) => { }, dispatchedObject.duration); } } - }, [props.eventState, setLainMoveState]); + }, [props.eventState, setLainMoveState, dispatchObject]); return null; }; diff --git a/src/components/StateManagers/SiteStateManager.tsx b/src/components/StateManagers/SiteStateManager.tsx index 1d968a4..f39f089 100644 --- a/src/components/StateManagers/SiteStateManager.tsx +++ b/src/components/StateManagers/SiteStateManager.tsx @@ -1,8 +1,9 @@ import React, { useEffect, useMemo } from "react"; import { useSiteStore } from "../../store"; import blue_orb_directions from "../../resources/blue_orb_directions.json"; +import { StateManagerProps } from "./EventStateManager"; -const SiteStateManager = (props: any) => { +const SiteStateManager = (props: StateManagerProps) => { const incrementSiteRotY = useSiteStore((state) => state.incrementSiteRotY); const incrementSitePosY = useSiteStore((state) => state.incrementSitePosY); const setIsSiteYChanging = useSiteStore((state) => state.setIsSiteChanging); diff --git a/src/resources/blue_orb_directions.json b/src/resources/blue_orb_directions.json index 5c218d2..f39d9b9 100644 --- a/src/resources/blue_orb_directions.json +++ b/src/resources/blue_orb_directions.json @@ -14,6 +14,11 @@ "target_blue_orb_id": "0506", "target_hud_id": "fg_hud_3" }, + "0422_pick": { + "action": "pickActiveBlueOrb", + "target_blue_orb_id": "0422", + "target_hud_id": "fg_hud_1" + }, "0414_up": { "action": "changeBlueOrbFocus", diff --git a/src/store.ts b/src/store.ts index 02c2102..843a15e 100644 --- a/src/store.ts +++ b/src/store.ts @@ -5,15 +5,21 @@ type BlueOrbState = { hudId: string; hudActive: number; hudVisible: boolean; - isCurrentBlueOrbInteractedWith: boolean; + isActiveBlueOrbInteractedWith: boolean; yellowHudText: string; yellowHudTextPosY: number; yellowHudTextPosX: number; yellowHudTextOffsetXCoeff: number; - setCurrentBlueOrbId: (to: string) => void; - setCurrentBlueOrbHudId: (to: string) => void; + activeBlueOrbPosX: number; + activeBlueOrbPosZ: number; + activeBlueOrbRotZ: number; + setActiveBlueOrbPosX: (to: number) => void; + setActiveBlueOrbPosZ: (to: number) => void; + setActiveBlueOrbRotZ: (to: number) => void; + setActiveBlueOrbId: (to: string) => void; + setActiveBlueOrbHudId: (to: string) => void; toggleHud: () => void; - setIsCurrentBlueOrbInteractedWith: (to: boolean) => void; + setIsActiveBlueOrbInteractedWith: (to: boolean) => void; setYellowHudText: (to: string) => void; incrementYellowHudTextPosY: (by: number) => void; setYellowHudTextPosY: (to: number) => void; @@ -87,17 +93,24 @@ export const useBlueOrbStore = create((set) => ({ blueOrbId: "0422", hudId: "fg_hud_1", hudActive: 1, - isCurrentBlueOrbInteractedWith: false, + isActiveBlueOrbInteractedWith: false, hudVisible: true, yellowHudText: "Tda028", - yellowHudTextPosY: 0, - yellowHudTextPosX: 0, + yellowHudTextPosY: 0.23, + yellowHudTextPosX: -0.35, yellowHudTextOffsetXCoeff: 0, - setCurrentBlueOrbId: (to) => set(() => ({ blueOrbId: to })), - setCurrentBlueOrbHudId: (to) => set(() => ({ hudId: to })), + activeBlueOrbPosX: 0, + activeBlueOrbPosZ: 0, + activeBlueOrbRotZ: 0, + setActiveBlueOrbPosX: (to) => set(() => ({ activeBlueOrbPosX: to })), + setActiveBlueOrbPosZ: (to) => set(() => ({ activeBlueOrbPosZ: to })), + setActiveBlueOrbRotZ: (to) => set(() => ({ activeBlueOrbRotZ: to })), + setActiveBlueOrbId: (to) => set(() => ({ blueOrbId: to })), + setActiveBlueOrbHudId: (to) => set(() => ({ hudId: to })), toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })), setYellowHudText: (to) => set(() => ({ yellowHudText: to })), - setIsCurrentBlueOrbInteractedWith: (to) => set(() => ({isCurrentBlueOrbInteractedWith: to})), + setIsActiveBlueOrbInteractedWith: (to) => + set(() => ({ isActiveBlueOrbInteractedWith: to })), incrementYellowHudTextPosY: (by) => set((state) => ({ yellowHudTextPosY: state.yellowHudTextPosY + by })), setYellowHudTextPosY: (to) => set(() => ({ yellowHudTextPosY: to })),