mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
more refactoring, fixed some bugs
This commit is contained in:
ad044
parent
6554e689ab
commit
923089557b
12 changed files with 1021 additions and 849 deletions
1291
package-lock.json
generated
1291
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
|||
import React, { memo, useMemo } from "react";
|
||||
import React, { memo } from "react";
|
||||
import * as THREE from "three";
|
||||
import lofTexture from "../static/sprites/lof.png";
|
||||
import holeTexture from "../static/sprites/hole.png";
|
||||
|
|
@ -6,21 +6,21 @@ import lifeTexture from "../static/sprites/life.png";
|
|||
import { useLoader } from "react-three-fiber";
|
||||
|
||||
type GrayRingProps = {
|
||||
grayRingPosY: number;
|
||||
grayRingPosY: number;
|
||||
};
|
||||
|
||||
const GrayRing = memo((props: GrayRingProps) => {
|
||||
const lofTex = useLoader(THREE.TextureLoader, lofTexture);
|
||||
const holeTex = useLoader(THREE.TextureLoader, holeTexture);
|
||||
const lifeTex = useLoader(THREE.TextureLoader, lifeTexture);
|
||||
const lofTex = useLoader(THREE.TextureLoader, lofTexture);
|
||||
const holeTex = useLoader(THREE.TextureLoader, holeTexture);
|
||||
const lifeTex = useLoader(THREE.TextureLoader, lifeTexture);
|
||||
|
||||
const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
|
||||
const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
|
||||
|
||||
uniforms.lof = { type: "t", value: lofTex };
|
||||
uniforms.hole = { type: "t", value: holeTex };
|
||||
uniforms.life = { type: "t", value: lifeTex };
|
||||
uniforms.lof = { type: "t", value: lofTex };
|
||||
uniforms.hole = { type: "t", value: holeTex };
|
||||
uniforms.life = { type: "t", value: lifeTex };
|
||||
|
||||
const vertexShader = `
|
||||
const vertexShader = `
|
||||
varying vec2 vUv;
|
||||
|
||||
varying vec3 vPos;
|
||||
|
|
@ -36,7 +36,7 @@ const GrayRing = memo((props: GrayRingProps) => {
|
|||
}
|
||||
`;
|
||||
|
||||
const fragmentShader = `
|
||||
const fragmentShader = `
|
||||
varying vec2 vUv;
|
||||
uniform sampler2D lof;
|
||||
uniform sampler2D hole;
|
||||
|
|
@ -151,28 +151,28 @@ const GrayRing = memo((props: GrayRingProps) => {
|
|||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<mesh
|
||||
position={[0, props.grayRingPosY, 0]}
|
||||
rotation={[0, 3.95, 0]}
|
||||
renderOrder={1}
|
||||
scale={[33, 33, 33]}
|
||||
>
|
||||
<cylinderBufferGeometry
|
||||
args={[0.036, 0.036, 0.003, 64, 64, true]}
|
||||
attach="geometry"
|
||||
/>
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
side={THREE.DoubleSide}
|
||||
vertexShader={vertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
transparent={true}
|
||||
uniforms={uniforms}
|
||||
lights={true}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
return (
|
||||
<mesh
|
||||
position={[0, props.grayRingPosY, 0]}
|
||||
rotation={[0, 3.95, 0]}
|
||||
renderOrder={1}
|
||||
scale={[33, 33, 33]}
|
||||
>
|
||||
<cylinderBufferGeometry
|
||||
args={[0.036, 0.036, 0.003, 64, 64, true]}
|
||||
attach="geometry"
|
||||
/>
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
side={THREE.DoubleSide}
|
||||
vertexShader={vertexShader}
|
||||
fragmentShader={fragmentShader}
|
||||
transparent={true}
|
||||
uniforms={uniforms}
|
||||
lights={true}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
});
|
||||
|
||||
export default GrayRing;
|
||||
|
|
|
|||
|
|
@ -44,8 +44,6 @@ const HUD = memo((props: HUDElementProps) => {
|
|||
config: { duration: 280 },
|
||||
});
|
||||
|
||||
console.log(yellowHudTextPosY);
|
||||
console.log(yellowHudTextPosX);
|
||||
// this one is used when the site moves up/down and
|
||||
// the text has to stay stationary
|
||||
const letterStaticState = useSpring({
|
||||
|
|
|
|||
|
|
@ -1,149 +0,0 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import blue_orb_directions from "../resources/blue_orb_directions.json";
|
||||
import site_a from "../resources/site_a.json";
|
||||
import SiteStateManager from "./StateManagers/SiteStateManager";
|
||||
import MiddleRingStateManager from "./StateManagers/MiddleRingStateManager";
|
||||
import LainStateManager from "./StateManagers/LainStateManager";
|
||||
import BlueOrbStateManager from "./StateManagers/BlueOrbStateManager";
|
||||
import BlueOrbHUDStateManager from "./StateManagers/BlueOrbHUDStateManager";
|
||||
import BlueOrbHUDTextStateManager from "./StateManagers/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];
|
||||
};
|
||||
|
||||
type BlueOrbStateData = {
|
||||
targetBlueOrbId: string;
|
||||
targetBlueOrbHudId: string;
|
||||
targetBlueOrbGreenText: string;
|
||||
};
|
||||
|
||||
const InputHandler = () => {
|
||||
const [eventState, setEventState] = useState<string>();
|
||||
const currentBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
|
||||
|
||||
const [blueOrbStateData, setBlueOrbStateData] = useState<BlueOrbStateData>();
|
||||
|
||||
const [inputCooldown, setInputCooldown] = useState(false);
|
||||
|
||||
const moveEvents = useMemo(
|
||||
() => ({
|
||||
up: "moveUp",
|
||||
down: "moveDown",
|
||||
left: "moveLeft",
|
||||
right: "moveRight",
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const blueOrbChangeEvents = useMemo(
|
||||
() => ({
|
||||
up: "changeBlueOrbUp",
|
||||
down: "changeBlueOrbDown",
|
||||
left: "changeBlueOrbLeft",
|
||||
right: "changeBlueOrbRight",
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const handleKeyPress = useCallback(
|
||||
(event) => {
|
||||
const { keyCode } = event;
|
||||
|
||||
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) {
|
||||
const targetBlueOrbDirectionId = `${currentBlueOrb}_${keyPress}`;
|
||||
|
||||
const targetBlueOrb =
|
||||
blue_orb_directions[
|
||||
targetBlueOrbDirectionId as keyof typeof blue_orb_directions
|
||||
];
|
||||
|
||||
const targetBlueOrbIdUnfiltered = targetBlueOrb.id;
|
||||
|
||||
// + in the json denotes that the target blue orb is not currently visible
|
||||
// on screen (lain needs to move up/down/left/right), and then choose it.
|
||||
const moveOrRotate = targetBlueOrbIdUnfiltered[0] === "+";
|
||||
|
||||
const targetBlueOrbId =
|
||||
targetBlueOrbIdUnfiltered[0] === "+"
|
||||
? targetBlueOrbIdUnfiltered.substr(1)
|
||||
: targetBlueOrbIdUnfiltered;
|
||||
|
||||
const targetBlueOrbHudId = targetBlueOrb.hud;
|
||||
|
||||
const targetBlueOrbGreenText =
|
||||
site_a[targetBlueOrbId as keyof typeof site_a].green_text;
|
||||
|
||||
setBlueOrbStateData({
|
||||
targetBlueOrbId: targetBlueOrbId,
|
||||
targetBlueOrbHudId: targetBlueOrbHudId,
|
||||
targetBlueOrbGreenText: targetBlueOrbGreenText,
|
||||
});
|
||||
|
||||
if (moveOrRotate) {
|
||||
const event = moveEvents[keyPress as keyof typeof moveEvents];
|
||||
|
||||
setEventState(event);
|
||||
} else {
|
||||
const event =
|
||||
blueOrbChangeEvents[keyPress as keyof typeof blueOrbChangeEvents];
|
||||
|
||||
setEventState(event);
|
||||
}
|
||||
} else if (blueOrbPressKeys.includes(keyPress) && !inputCooldown) {
|
||||
}
|
||||
},
|
||||
[inputCooldown, currentBlueOrb, moveEvents, blueOrbChangeEvents]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("keydown", handleKeyPress);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [handleKeyPress]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<BlueOrbStateManager
|
||||
eventState={eventState!}
|
||||
targetBlueOrbId={blueOrbStateData?.targetBlueOrbId}
|
||||
/>
|
||||
<BlueOrbHUDStateManager
|
||||
eventState={eventState!}
|
||||
targetBlueOrbHudId={blueOrbStateData?.targetBlueOrbHudId}
|
||||
targetBlueOrbGreenText={blueOrbStateData?.targetBlueOrbGreenText}
|
||||
/>
|
||||
<BlueOrbHUDTextStateManager
|
||||
eventState={eventState!}
|
||||
targetBlueOrbId={blueOrbStateData?.targetBlueOrbId}
|
||||
targetBlueOrbHudId={blueOrbStateData?.targetBlueOrbHudId}
|
||||
/>
|
||||
<SiteStateManager eventState={eventState!} />
|
||||
<LainStateManager eventState={eventState!} />
|
||||
<MiddleRingStateManager eventState={eventState!} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InputHandler;
|
||||
|
|
@ -6,15 +6,22 @@ import Lain from "./Lain";
|
|||
import Lights from "./Lights";
|
||||
import OrthoCamera from "./OrthoCamera";
|
||||
import Preloader from "./Preloader";
|
||||
import InputHandler from "./InputHandler";
|
||||
import EventStateManager from "./StateManagers/EventStateManager";
|
||||
import MainSceneIntro from "./MainSceneIntro";
|
||||
import GrayPlanes from "./GrayPlanes";
|
||||
import MiddleRing from "./MiddleRing";
|
||||
import Starfield from "./Starfield";
|
||||
import { useLainStore, useMainGroupStore } from "../store";
|
||||
import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
|
||||
|
||||
const MainScene = () => {
|
||||
const setLainMoveState = useLainStore((state) => state.setLainMoveState);
|
||||
const setCurrentBlueOrb = useBlueOrbStore(
|
||||
(state) => state.setCurrentBlueOrbId
|
||||
);
|
||||
const setCurrentBlueOrbHudId = useBlueOrbStore(
|
||||
(state) => state.setCurrentBlueOrbHudId
|
||||
);
|
||||
|
||||
const mainGroupPosY = useMainGroupStore((state) => state.mainGroupPosY);
|
||||
const mainGroupPosZ = useMainGroupStore((state) => state.mainGroupPosZ);
|
||||
const mainGroupRotX = useMainGroupStore((state) => state.mainGroupRotX);
|
||||
|
|
@ -32,7 +39,9 @@ const MainScene = () => {
|
|||
|
||||
useEffect(() => {
|
||||
setLainMoveState("standing");
|
||||
}, [setLainMoveState]);
|
||||
setCurrentBlueOrb("0422");
|
||||
setCurrentBlueOrbHudId("fg_hud_1");
|
||||
}, [setCurrentBlueOrb, setCurrentBlueOrbHudId, setLainMoveState]);
|
||||
// set lain intro spritesheet before the page loads fully
|
||||
useEffect(() => {
|
||||
// setLainMoving(true);
|
||||
|
|
@ -48,7 +57,7 @@ const MainScene = () => {
|
|||
position-y={mainGroupStatePos.mainGroupPosY}
|
||||
position-z={mainGroupStatePos.mainGroupPosZ}
|
||||
>
|
||||
<InputHandler />
|
||||
<EventStateManager />
|
||||
<Preloader />
|
||||
<Site />
|
||||
<OrthoCamera />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from "react";
|
|||
import { useBlueOrbStore } from "../../store";
|
||||
|
||||
const BlueOrbHUDStateManager = (props: any) => {
|
||||
const setCurrentHudId = useBlueOrbStore((state) => state.setCurrentHudId);
|
||||
const setCurrentBlueOrbHudId = useBlueOrbStore((state) => state.setCurrentBlueOrbHudId);
|
||||
const toggleHud = useBlueOrbStore((state) => state.toggleHud);
|
||||
|
||||
const dispatcherObjects = useMemo(
|
||||
|
|
@ -11,10 +11,7 @@ const BlueOrbHUDStateManager = (props: any) => {
|
|||
moveDown: { duration: 3903.704 },
|
||||
moveLeft: { duration: 3903.704 },
|
||||
moveRight: { duration: 3903.704 },
|
||||
changeBlueOrbUp: { duration: 500 },
|
||||
changeBlueOrbDown: { duration: 500 },
|
||||
changeBlueOrbLeft: { duration: 500 },
|
||||
changeBlueOrbRight: { duration: 500 },
|
||||
changeBlueOrbFocus: { duration: 500 },
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
|
@ -29,7 +26,7 @@ const BlueOrbHUDStateManager = (props: any) => {
|
|||
toggleHud();
|
||||
|
||||
setTimeout(() => {
|
||||
setCurrentHudId(targetBlueOrbHudId);
|
||||
setCurrentBlueOrbHudId(targetBlueOrbHudId);
|
||||
|
||||
toggleHud();
|
||||
}, dispatchedAction.duration);
|
||||
|
|
@ -39,7 +36,7 @@ const BlueOrbHUDStateManager = (props: any) => {
|
|||
props.eventState,
|
||||
props.targetBlueOrbGreenText,
|
||||
props.targetBlueOrbHudId,
|
||||
setCurrentHudId,
|
||||
setCurrentBlueOrbHudId,
|
||||
toggleHud,
|
||||
]);
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import site_a from "../../resources/site_a.json";
|
|||
import { useBlueOrbStore } from "../../store";
|
||||
|
||||
const BlueOrbHUDTextStateManager = (props: any) => {
|
||||
const currentBlueOrbHudId = useBlueOrbStore((state) => state.hudId);
|
||||
const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
|
||||
const setYellowHudText = useBlueOrbStore((state) => state.setYellowHudText);
|
||||
const setYellowHudTextOffsetXCoeff = useBlueOrbStore(
|
||||
(state) => state.setYellowHudTextOffsetXCoeff
|
||||
|
|
@ -22,7 +20,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
|||
);
|
||||
|
||||
const animateYellowTextWithMove = useCallback(
|
||||
(yellowLetterPosYOffset: number) => {
|
||||
(yellowLetterPosYOffset: number, targ1: string, targ2: string) => {
|
||||
// animate the letters to match that of site's
|
||||
// to create an illusion of not moving
|
||||
setTimeout(() => {
|
||||
|
|
@ -37,17 +35,13 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
|||
setTimeout(() => {
|
||||
// animate it to new pos x/y
|
||||
setYellowHudTextPosX(
|
||||
blue_orb_huds[currentBlueOrbHudId as keyof typeof blue_orb_huds]
|
||||
.big_text[0]
|
||||
blue_orb_huds[targ1 as keyof typeof blue_orb_huds].big_text[0]
|
||||
);
|
||||
setYellowHudTextPosY(
|
||||
blue_orb_huds[currentBlueOrbHudId as keyof typeof blue_orb_huds]
|
||||
.big_text[1]
|
||||
blue_orb_huds[targ1 as keyof typeof blue_orb_huds].big_text[1]
|
||||
);
|
||||
// set new text according to the node name
|
||||
setYellowHudText(
|
||||
site_a[currentBlueOrbId as keyof typeof site_a].node_name
|
||||
);
|
||||
setYellowHudText(site_a[targ2 as keyof typeof site_a].node_name);
|
||||
}, 3000);
|
||||
|
||||
// unshrink text
|
||||
|
|
@ -56,8 +50,6 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
|||
}, 3900);
|
||||
},
|
||||
[
|
||||
currentBlueOrbHudId,
|
||||
currentBlueOrbId,
|
||||
incrementYellowHudTextPosY,
|
||||
setYellowHudText,
|
||||
setYellowHudTextOffsetXCoeff,
|
||||
|
|
@ -66,41 +58,38 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
|||
]
|
||||
);
|
||||
|
||||
const animateYellowTextWithoutMove = useCallback(() => {
|
||||
// make current hud big text shrink
|
||||
setYellowHudTextOffsetXCoeff(-1);
|
||||
const animateYellowTextWithoutMove = useCallback(
|
||||
(targ1: string, targ2: string) => {
|
||||
// make current hud big text shrink
|
||||
setYellowHudTextOffsetXCoeff(-1);
|
||||
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
setYellowHudTextPosX(
|
||||
blue_orb_huds[targ1 as keyof typeof blue_orb_huds].big_text[0]
|
||||
);
|
||||
setYellowHudTextPosY(
|
||||
blue_orb_huds[targ1 as keyof typeof blue_orb_huds].big_text[1]
|
||||
);
|
||||
}, 400);
|
||||
// animate it to new pos x/y
|
||||
setYellowHudTextPosX(
|
||||
blue_orb_huds[currentBlueOrbHudId as keyof typeof blue_orb_huds]
|
||||
.big_text[0]
|
||||
);
|
||||
setYellowHudTextPosY(
|
||||
blue_orb_huds[currentBlueOrbHudId as keyof typeof blue_orb_huds]
|
||||
.big_text[1]
|
||||
);
|
||||
}, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
// set new text according to the node name
|
||||
setYellowHudText(
|
||||
site_a[currentBlueOrbId as keyof typeof site_a].node_name
|
||||
);
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// set new text according to the node name
|
||||
setYellowHudText(site_a[targ2 as keyof typeof site_a].node_name);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
// unshrink text
|
||||
setYellowHudTextOffsetXCoeff(0);
|
||||
}, 1200);
|
||||
}, [
|
||||
currentBlueOrbHudId,
|
||||
currentBlueOrbId,
|
||||
setYellowHudText,
|
||||
setYellowHudTextOffsetXCoeff,
|
||||
setYellowHudTextPosX,
|
||||
setYellowHudTextPosY,
|
||||
]);
|
||||
setTimeout(() => {
|
||||
// unshrink text
|
||||
setYellowHudTextOffsetXCoeff(0);
|
||||
}, 1200);
|
||||
},
|
||||
[
|
||||
setYellowHudText,
|
||||
setYellowHudTextOffsetXCoeff,
|
||||
setYellowHudTextPosX,
|
||||
setYellowHudTextPosY,
|
||||
]
|
||||
);
|
||||
|
||||
const dispatcherObjects = useMemo(
|
||||
() => ({
|
||||
|
|
@ -124,22 +113,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
|||
actionFunction: animateYellowTextWithMove,
|
||||
yellowLetterPosYOffset: 0,
|
||||
},
|
||||
changeBlueOrbUp: {
|
||||
action: "animateWithoutMove",
|
||||
actionFunction: animateYellowTextWithoutMove,
|
||||
yellowLetterPosYOffset: 0,
|
||||
},
|
||||
changeBlueOrbDown: {
|
||||
action: "animateWithoutMove",
|
||||
actionFunction: animateYellowTextWithoutMove,
|
||||
yellowLetterPosYOffset: 0,
|
||||
},
|
||||
changeBlueOrbLeft: {
|
||||
action: "animateWithoutMove",
|
||||
actionFunction: animateYellowTextWithoutMove,
|
||||
yellowLetterPosYOffset: 0,
|
||||
},
|
||||
changeBlueOrbRight: {
|
||||
changeBlueOrbFocus: {
|
||||
action: "animateWithoutMove",
|
||||
actionFunction: animateYellowTextWithoutMove,
|
||||
yellowLetterPosYOffset: 0,
|
||||
|
|
@ -154,9 +128,16 @@ const BlueOrbHUDTextStateManager = (props: any) => {
|
|||
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
|
||||
|
||||
if (dispatchedAction.action === "animateWithMove") {
|
||||
animateYellowTextWithMove(dispatchedAction.yellowLetterPosYOffset);
|
||||
animateYellowTextWithMove(
|
||||
dispatchedAction.yellowLetterPosYOffset,
|
||||
props.targetBlueOrbHudId,
|
||||
props.targetBlueOrbId
|
||||
);
|
||||
} else {
|
||||
animateYellowTextWithoutMove();
|
||||
animateYellowTextWithoutMove(
|
||||
props.targetBlueOrbHudId,
|
||||
props.targetBlueOrbId
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [
|
||||
|
|
|
|||
|
|
@ -1,43 +1,81 @@
|
|||
import React, { useEffect, useMemo } from "react";
|
||||
import React, { useCallback, useEffect, useMemo } from "react";
|
||||
import { useBlueOrbStore } from "../../store";
|
||||
|
||||
// fix the typing on this
|
||||
type BlueOrbDispatchData = {
|
||||
action: (value: any) => void;
|
||||
value: string | boolean;
|
||||
actionDelay: number;
|
||||
};
|
||||
|
||||
type BlueOrbDispatcher = {
|
||||
moveUp: BlueOrbDispatchData;
|
||||
moveDown: BlueOrbDispatchData;
|
||||
moveLeft: BlueOrbDispatchData;
|
||||
moveRight: BlueOrbDispatchData;
|
||||
changeBlueOrbFocus: BlueOrbDispatchData;
|
||||
pickCurrentBlueOrb: BlueOrbDispatchData;
|
||||
};
|
||||
|
||||
const BlueOrbStateManager = (props: any) => {
|
||||
const setCurrentBlueOrb = useBlueOrbStore(
|
||||
(state) => state.setCurrentBlueOrbId
|
||||
);
|
||||
|
||||
// this one is repetitive for now but ill leave them separated
|
||||
// in case it comes in handy later on
|
||||
const dispatcherObjects = useMemo(
|
||||
() => ({
|
||||
moveUp: { duration: 3903.704 },
|
||||
moveDown: { duration: 3903.704 },
|
||||
moveLeft: { duration: 3903.704 },
|
||||
moveRight: { duration: 3903.704 },
|
||||
changeBlueOrbUp: { duration: 0 },
|
||||
changeBlueOrbDown: { duration: 0 },
|
||||
changeBlueOrbLeft: { duration: 0 },
|
||||
changeBlueOrbRight: { duration: 0 },
|
||||
}),
|
||||
[]
|
||||
const setIsCurrentBlueOrbInteractedWith = useBlueOrbStore(
|
||||
(state) => state.setIsCurrentBlueOrbInteractedWith
|
||||
);
|
||||
|
||||
const dispatchObject = useCallback(
|
||||
(event: string, targetBlueOrbId: string) => {
|
||||
const dispatcherObjects: BlueOrbDispatcher = {
|
||||
moveUp: {
|
||||
action: setCurrentBlueOrb,
|
||||
value: targetBlueOrbId,
|
||||
actionDelay: 3903.704,
|
||||
},
|
||||
moveDown: {
|
||||
action: setCurrentBlueOrb,
|
||||
value: targetBlueOrbId,
|
||||
actionDelay: 3903.704,
|
||||
},
|
||||
moveLeft: {
|
||||
action: setCurrentBlueOrb,
|
||||
value: targetBlueOrbId,
|
||||
actionDelay: 3903.704,
|
||||
},
|
||||
moveRight: {
|
||||
action: setCurrentBlueOrb,
|
||||
value: targetBlueOrbId,
|
||||
actionDelay: 3903.704,
|
||||
},
|
||||
changeBlueOrbFocus: {
|
||||
action: setCurrentBlueOrb,
|
||||
value: targetBlueOrbId,
|
||||
actionDelay: 0,
|
||||
},
|
||||
pickCurrentBlueOrb: {
|
||||
action: setIsCurrentBlueOrbInteractedWith,
|
||||
value: true,
|
||||
actionDelay: 0,
|
||||
},
|
||||
};
|
||||
|
||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||
},
|
||||
[]
|
||||
);
|
||||
useEffect(() => {
|
||||
if (props.eventState) {
|
||||
const dispatchedAction =
|
||||
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
|
||||
const dispatchedObject = dispatchObject(
|
||||
props.eventState,
|
||||
props.targetBlueOrbId
|
||||
);
|
||||
|
||||
// set new one after action ends
|
||||
setTimeout(() => {
|
||||
setCurrentBlueOrb(props.targetBlueOrbId);
|
||||
}, dispatchedAction.duration);
|
||||
dispatchedObject.action(dispatchedObject.value);
|
||||
}, dispatchedObject.actionDelay);
|
||||
}
|
||||
}, [
|
||||
dispatcherObjects,
|
||||
props.eventState,
|
||||
props.targetBlueOrbId,
|
||||
setCurrentBlueOrb,
|
||||
]);
|
||||
}, [props.eventState, props.targetBlueOrbId, setCurrentBlueOrb]);
|
||||
return null;
|
||||
};
|
||||
|
||||
|
|
|
|||
109
src/components/StateManagers/EventStateManager.tsx
Normal file
109
src/components/StateManagers/EventStateManager.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
||||
import SiteStateManager from "./SiteStateManager";
|
||||
import MiddleRingStateManager from "./MiddleRingStateManager";
|
||||
import LainStateManager from "./LainStateManager";
|
||||
import BlueOrbStateManager from "./BlueOrbStateManager";
|
||||
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];
|
||||
};
|
||||
|
||||
type BlueOrbStateData = {
|
||||
targetBlueOrbId: string;
|
||||
targetBlueOrbHudId: string;
|
||||
};
|
||||
|
||||
const EventStateManager = () => {
|
||||
const [eventState, setEventState] = useState<string>();
|
||||
const currentBlueOrb = useBlueOrbStore((state) => state.blueOrbId);
|
||||
|
||||
const [blueOrbState, setBlueOrbState] = useState<BlueOrbStateData>();
|
||||
|
||||
const [inputCooldown, setInputCooldown] = useState(false);
|
||||
|
||||
const handleKeyPress = useCallback(
|
||||
(event) => {
|
||||
const { keyCode } = event;
|
||||
|
||||
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) {
|
||||
const targetBlueOrbDirectionId = `${currentBlueOrb}_${keyPress}`;
|
||||
|
||||
const targetBlueOrbDirectionData =
|
||||
blue_orb_directions[
|
||||
targetBlueOrbDirectionId as keyof typeof blue_orb_directions
|
||||
];
|
||||
|
||||
const targetBlueOrbId = targetBlueOrbDirectionData.id;
|
||||
|
||||
const targetBlueOrbHudId = targetBlueOrbDirectionData.hud;
|
||||
|
||||
const action = targetBlueOrbDirectionData.action;
|
||||
|
||||
setBlueOrbState({
|
||||
targetBlueOrbId: targetBlueOrbId,
|
||||
targetBlueOrbHudId: targetBlueOrbHudId,
|
||||
});
|
||||
|
||||
setEventState(action);
|
||||
} else if (blueOrbPressKeys.includes(keyPress) && !inputCooldown) {
|
||||
const action = "pickCurrentBlueOrb";
|
||||
|
||||
setEventState(action);
|
||||
}
|
||||
},
|
||||
[inputCooldown, currentBlueOrb]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("keydown", handleKeyPress);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [handleKeyPress]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<BlueOrbStateManager
|
||||
eventState={eventState!}
|
||||
targetBlueOrbId={blueOrbState?.targetBlueOrbId}
|
||||
/>
|
||||
<BlueOrbHUDStateManager
|
||||
eventState={eventState!}
|
||||
targetBlueOrbHudId={blueOrbState?.targetBlueOrbHudId}
|
||||
/>
|
||||
<BlueOrbHUDTextStateManager
|
||||
eventState={eventState!}
|
||||
targetBlueOrbId={blueOrbState?.targetBlueOrbId}
|
||||
targetBlueOrbHudId={blueOrbState?.targetBlueOrbHudId}
|
||||
/>
|
||||
<SiteStateManager eventState={eventState!} />
|
||||
<LainStateManager eventState={eventState!} />
|
||||
<MiddleRingStateManager eventState={eventState!} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventStateManager;
|
||||
|
|
@ -1,60 +1,72 @@
|
|||
{
|
||||
"0422_down": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0414",
|
||||
"hud": "fg_hud_2"
|
||||
},
|
||||
"0422_right": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0417",
|
||||
"hud": "bg_hud_1"
|
||||
},
|
||||
"0422_up": {
|
||||
"id": "+0506",
|
||||
"action": "moveUp",
|
||||
"id": "0506",
|
||||
"hud": "fg_hud_3"
|
||||
},
|
||||
|
||||
"0414_up": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0422",
|
||||
"hud": "fg_hud_1"
|
||||
},
|
||||
"0414_right": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0417",
|
||||
"hud": "bg_hud_1"
|
||||
},
|
||||
|
||||
"0413_down": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0405",
|
||||
"hud": "fg_hud_6"
|
||||
},
|
||||
"0413_left": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0417",
|
||||
"hud": "bg_hud_1"
|
||||
},
|
||||
|
||||
"0405_left": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0417",
|
||||
"hud": "bg_hud_1"
|
||||
},
|
||||
"0405_up": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0413",
|
||||
"hud": "fg_hud_5"
|
||||
},
|
||||
|
||||
|
||||
"0417_left": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0422",
|
||||
"hud": "fg_hud_1"
|
||||
},
|
||||
"0417_down": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0414",
|
||||
"hud": "fg_hud_2"
|
||||
},
|
||||
"0417_right": {
|
||||
"action": "changeBlueOrbFocus",
|
||||
"id": "0413",
|
||||
"hud": "fg_hud_5"
|
||||
},
|
||||
|
||||
"0506_down": {
|
||||
"id": "+0422",
|
||||
"action": "moveDown",
|
||||
"id": "0422",
|
||||
"hud": "fg_hud_1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
src/store.ts
10
src/store.ts
|
|
@ -5,13 +5,15 @@ type BlueOrbState = {
|
|||
hudId: string;
|
||||
hudActive: number;
|
||||
hudVisible: boolean;
|
||||
isCurrentBlueOrbInteractedWith: boolean;
|
||||
yellowHudText: string;
|
||||
yellowHudTextPosY: number;
|
||||
yellowHudTextPosX: number;
|
||||
yellowHudTextOffsetXCoeff: number;
|
||||
setCurrentBlueOrbId: (to: string) => void;
|
||||
setCurrentHudId: (to: string) => void;
|
||||
setCurrentBlueOrbHudId: (to: string) => void;
|
||||
toggleHud: () => void;
|
||||
setIsCurrentBlueOrbInteractedWith: (to: boolean) => void;
|
||||
setYellowHudText: (to: string) => void;
|
||||
incrementYellowHudTextPosY: (by: number) => void;
|
||||
setYellowHudTextPosY: (to: number) => void;
|
||||
|
|
@ -85,15 +87,17 @@ export const useBlueOrbStore = create<BlueOrbState>((set) => ({
|
|||
blueOrbId: "0422",
|
||||
hudId: "fg_hud_1",
|
||||
hudActive: 1,
|
||||
isCurrentBlueOrbInteractedWith: false,
|
||||
hudVisible: true,
|
||||
yellowHudText: "",
|
||||
yellowHudText: "Tda028",
|
||||
yellowHudTextPosY: 0,
|
||||
yellowHudTextPosX: 0,
|
||||
yellowHudTextOffsetXCoeff: 0,
|
||||
setCurrentBlueOrbId: (to) => set(() => ({ blueOrbId: to })),
|
||||
setCurrentHudId: (to) => set(() => ({ hudId: to })),
|
||||
setCurrentBlueOrbHudId: (to) => set(() => ({ hudId: to })),
|
||||
toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
|
||||
setYellowHudText: (to) => set(() => ({ yellowHudText: to })),
|
||||
setIsCurrentBlueOrbInteractedWith: (to) => set(() => ({isCurrentBlueOrbInteractedWith: to})),
|
||||
incrementYellowHudTextPosY: (by) =>
|
||||
set((state) => ({ yellowHudTextPosY: state.yellowHudTextPosY + by })),
|
||||
setYellowHudTextPosY: (to) => set(() => ({ yellowHudTextPosY: to })),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"target": "es6",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
|
|
|
|||
Loading…
Reference in a new issue