mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added basic throw animation, cleaned some stuff up
This commit is contained in:
ad044
parent
64f463f067
commit
bc4fc74f45
14 changed files with 230 additions and 155 deletions
|
|
@ -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<THREE.Object3D>();
|
||||
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 (
|
||||
<group position={[0, (level_y_values as LevelYValues)[props.level], 0]}>
|
||||
<group
|
||||
position={[
|
||||
0,
|
||||
level_y_values[props.level as keyof typeof level_y_values],
|
||||
0,
|
||||
]}
|
||||
>
|
||||
{props.active ? (
|
||||
<a.mesh
|
||||
position-x={props.position[0]}
|
||||
position-y={props.position[1]}
|
||||
position-z={props.position[2]}
|
||||
position-x={activeBlueOrbState.activeBlueOrbPosX}
|
||||
position-y={activeBlueOrbState.activeBlueOrbPosY}
|
||||
position-z={activeBlueOrbState.activeBlueOrbPosZ}
|
||||
rotation-z={activeBlueOrbState.activeBlueOrbRotZ}
|
||||
rotation-y={props.rotation[1]}
|
||||
ref={props.active ? activeBlueOrbRef : undefined}
|
||||
scale={[0.36, 0.18, 0.36]}
|
||||
renderOrder={1}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
{props.active ? (
|
||||
<shaderMaterial
|
||||
ref={materialRef}
|
||||
attach="material"
|
||||
|
|
@ -140,15 +163,26 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
|||
side={THREE.DoubleSide}
|
||||
transparent={true}
|
||||
/>
|
||||
</a.mesh>
|
||||
) : (
|
||||
<a.mesh
|
||||
position-x={props.position[0]}
|
||||
position-y={props.position[1]}
|
||||
position-z={props.position[2]}
|
||||
rotation-y={props.rotation[1]}
|
||||
rotation-z={0}
|
||||
scale={[0.36, 0.18, 0.36]}
|
||||
renderOrder={1}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshStandardMaterial
|
||||
attach="material"
|
||||
map={nonActiveTexture}
|
||||
side={THREE.DoubleSide}
|
||||
transparent={true}
|
||||
/>
|
||||
)}
|
||||
</a.mesh>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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("");
|
||||
|
|
|
|||
|
|
@ -38,10 +38,6 @@ const LainConstructor = (props: LainConstructorProps) => {
|
|||
animator.animate();
|
||||
});
|
||||
|
||||
useFrame(() => {
|
||||
animator.animate();
|
||||
});
|
||||
|
||||
return (
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
|
|||
|
||||
const MainScene = () => {
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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<THREE.Object3D>();
|
||||
|
||||
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"]]);
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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<string>();
|
||||
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(() => {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
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 dispatchObject = useCallback(
|
||||
(event: string) => {
|
||||
const dispatcherObjects = {
|
||||
moveUp: {
|
||||
action: setLainMoveState,
|
||||
|
|
@ -27,15 +29,17 @@ const LainStateManager = (props: any) => {
|
|||
value: "moveRight",
|
||||
duration: 3903.704,
|
||||
},
|
||||
pickCurrentBlueOrb: {
|
||||
pickActiveBlueOrb: {
|
||||
action: setLainMoveState,
|
||||
value: "pickCurrentBlueOrb",
|
||||
value: "throwBlueOrb",
|
||||
duration: 3903.704,
|
||||
},
|
||||
};
|
||||
|
||||
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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
33
src/store.ts
33
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<BlueOrbState>((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 })),
|
||||
|
|
|
|||
Loading…
Reference in a new issue