mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

more refactoring, fixed some bugs

Browse source
This commit is contained in:
ad044 2020-10-15 21:43:04 +04:00
parent 6554e689ab
commit 923089557b
12 changed files with 1021 additions and 849 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1291
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

66
src/components/GrayRing.tsx
View file

@ -1,4 +1,4 @@
import React, { memo, useMemo } from "react"; import React, { memo } from "react";
import * as THREE from "three"; import * as THREE from "three";
import lofTexture from "../static/sprites/lof.png"; import lofTexture from "../static/sprites/lof.png";
import holeTexture from "../static/sprites/hole.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"; import { useLoader } from "react-three-fiber";
type GrayRingProps = { type GrayRingProps = {
grayRingPosY: number; grayRingPosY: number;
}; };
const GrayRing = memo((props: GrayRingProps) => { const GrayRing = memo((props: GrayRingProps) => {
const lofTex = useLoader(THREE.TextureLoader, lofTexture); const lofTex = useLoader(THREE.TextureLoader, lofTexture);
const holeTex = useLoader(THREE.TextureLoader, holeTexture); const holeTex = useLoader(THREE.TextureLoader, holeTexture);
const lifeTex = useLoader(THREE.TextureLoader, lifeTexture); 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.lof = { type: "t", value: lofTex };
uniforms.hole = { type: "t", value: holeTex }; uniforms.hole = { type: "t", value: holeTex };
uniforms.life = { type: "t", value: lifeTex }; uniforms.life = { type: "t", value: lifeTex };
const vertexShader = ` const vertexShader = `
varying vec2 vUv; varying vec2 vUv;
varying vec3 vPos; varying vec3 vPos;
@ -36,7 +36,7 @@ const GrayRing = memo((props: GrayRingProps) => {
} }
`; `;
const fragmentShader = ` const fragmentShader = `
varying vec2 vUv; varying vec2 vUv;
uniform sampler2D lof; uniform sampler2D lof;
uniform sampler2D hole; uniform sampler2D hole;
@ -151,28 +151,28 @@ const GrayRing = memo((props: GrayRingProps) => {
} }
`; `;
return ( return (
<mesh <mesh
position={[0, props.grayRingPosY, 0]} position={[0, props.grayRingPosY, 0]}
rotation={[0, 3.95, 0]} rotation={[0, 3.95, 0]}
renderOrder={1} renderOrder={1}
scale={[33, 33, 33]} scale={[33, 33, 33]}
> >
<cylinderBufferGeometry <cylinderBufferGeometry
args={[0.036, 0.036, 0.003, 64, 64, true]} args={[0.036, 0.036, 0.003, 64, 64, true]}
attach="geometry" attach="geometry"
/> />
<shaderMaterial <shaderMaterial
attach="material" attach="material"
side={THREE.DoubleSide} side={THREE.DoubleSide}
vertexShader={vertexShader} vertexShader={vertexShader}
fragmentShader={fragmentShader} fragmentShader={fragmentShader}
transparent={true} transparent={true}
uniforms={uniforms} uniforms={uniforms}
lights={true} lights={true}
/> />
</mesh> </mesh>
); );
}); });
export default GrayRing; export default GrayRing;

2
src/components/HUD.tsx
View file

@ -44,8 +44,6 @@ const HUD = memo((props: HUDElementProps) => {
config: { duration: 280 }, config: { duration: 280 },
}); });
console.log(yellowHudTextPosY);
console.log(yellowHudTextPosX);
// this one is used when the site moves up/down and // this one is used when the site moves up/down and
// the text has to stay stationary // the text has to stay stationary
const letterStaticState = useSpring({ const letterStaticState = useSpring({

149
src/components/InputHandler.tsx
View file

@ -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;

17
src/components/MainScene.tsx
View file

@ -6,15 +6,22 @@ import Lain from "./Lain";
import Lights from "./Lights"; import Lights from "./Lights";
import OrthoCamera from "./OrthoCamera"; import OrthoCamera from "./OrthoCamera";
import Preloader from "./Preloader"; import Preloader from "./Preloader";
import InputHandler from "./InputHandler"; import EventStateManager from "./StateManagers/EventStateManager";
import MainSceneIntro from "./MainSceneIntro"; import MainSceneIntro from "./MainSceneIntro";
import GrayPlanes from "./GrayPlanes"; import GrayPlanes from "./GrayPlanes";
import MiddleRing from "./MiddleRing"; import MiddleRing from "./MiddleRing";
import Starfield from "./Starfield"; import Starfield from "./Starfield";
import { useLainStore, useMainGroupStore } from "../store"; import { useBlueOrbStore, useLainStore, useMainGroupStore } from "../store";
const MainScene = () => { const MainScene = () => {
const setLainMoveState = useLainStore((state) => state.setLainMoveState); 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 mainGroupPosY = useMainGroupStore((state) => state.mainGroupPosY);
const mainGroupPosZ = useMainGroupStore((state) => state.mainGroupPosZ); const mainGroupPosZ = useMainGroupStore((state) => state.mainGroupPosZ);
const mainGroupRotX = useMainGroupStore((state) => state.mainGroupRotX); const mainGroupRotX = useMainGroupStore((state) => state.mainGroupRotX);
@ -32,7 +39,9 @@ const MainScene = () => {
useEffect(() => { useEffect(() => {
setLainMoveState("standing"); setLainMoveState("standing");
}, [setLainMoveState]); setCurrentBlueOrb("0422");
setCurrentBlueOrbHudId("fg_hud_1");
}, [setCurrentBlueOrb, setCurrentBlueOrbHudId, setLainMoveState]);
// set lain intro spritesheet before the page loads fully // set lain intro spritesheet before the page loads fully
useEffect(() => { useEffect(() => {
// setLainMoving(true); // setLainMoving(true);
@ -48,7 +57,7 @@ const MainScene = () => {
position-y={mainGroupStatePos.mainGroupPosY} position-y={mainGroupStatePos.mainGroupPosY}
position-z={mainGroupStatePos.mainGroupPosZ} position-z={mainGroupStatePos.mainGroupPosZ}
> >
<InputHandler /> <EventStateManager />
<Preloader /> <Preloader />
<Site /> <Site />
<OrthoCamera /> <OrthoCamera />

11
src/components/StateManagers/BlueOrbHUDStateManager.tsx
View file

@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from "react";
import { useBlueOrbStore } from "../../store"; import { useBlueOrbStore } from "../../store";
const BlueOrbHUDStateManager = (props: any) => { const BlueOrbHUDStateManager = (props: any) => {
const setCurrentHudId = useBlueOrbStore((state) => state.setCurrentHudId); const setCurrentBlueOrbHudId = useBlueOrbStore((state) => state.setCurrentBlueOrbHudId);
const toggleHud = useBlueOrbStore((state) => state.toggleHud); const toggleHud = useBlueOrbStore((state) => state.toggleHud);
const dispatcherObjects = useMemo( const dispatcherObjects = useMemo(
@ -11,10 +11,7 @@ const BlueOrbHUDStateManager = (props: any) => {
moveDown: { duration: 3903.704 }, moveDown: { duration: 3903.704 },
moveLeft: { duration: 3903.704 }, moveLeft: { duration: 3903.704 },
moveRight: { duration: 3903.704 }, moveRight: { duration: 3903.704 },
changeBlueOrbUp: { duration: 500 }, changeBlueOrbFocus: { duration: 500 },
changeBlueOrbDown: { duration: 500 },
changeBlueOrbLeft: { duration: 500 },
changeBlueOrbRight: { duration: 500 },
}), }),
[] []
); );
@ -29,7 +26,7 @@ const BlueOrbHUDStateManager = (props: any) => {
toggleHud(); toggleHud();
setTimeout(() => { setTimeout(() => {
setCurrentHudId(targetBlueOrbHudId); setCurrentBlueOrbHudId(targetBlueOrbHudId);
toggleHud(); toggleHud();
}, dispatchedAction.duration); }, dispatchedAction.duration);
@ -39,7 +36,7 @@ const BlueOrbHUDStateManager = (props: any) => {
props.eventState, props.eventState,
props.targetBlueOrbGreenText, props.targetBlueOrbGreenText,
props.targetBlueOrbHudId, props.targetBlueOrbHudId,
setCurrentHudId, setCurrentBlueOrbHudId,
toggleHud, toggleHud,
]); ]);
return null; return null;

103
src/components/StateManagers/BlueOrbHUDTextStateManager.tsx
View file

@ -4,8 +4,6 @@ import site_a from "../../resources/site_a.json";
import { useBlueOrbStore } from "../../store"; import { useBlueOrbStore } from "../../store";
const BlueOrbHUDTextStateManager = (props: any) => { const BlueOrbHUDTextStateManager = (props: any) => {
const currentBlueOrbHudId = useBlueOrbStore((state) => state.hudId);
const currentBlueOrbId = useBlueOrbStore((state) => state.blueOrbId);
const setYellowHudText = useBlueOrbStore((state) => state.setYellowHudText); const setYellowHudText = useBlueOrbStore((state) => state.setYellowHudText);
const setYellowHudTextOffsetXCoeff = useBlueOrbStore( const setYellowHudTextOffsetXCoeff = useBlueOrbStore(
(state) => state.setYellowHudTextOffsetXCoeff (state) => state.setYellowHudTextOffsetXCoeff
@ -22,7 +20,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
); );
const animateYellowTextWithMove = useCallback( const animateYellowTextWithMove = useCallback(
(yellowLetterPosYOffset: number) => { (yellowLetterPosYOffset: number, targ1: string, targ2: string) => {
// animate the letters to match that of site's // animate the letters to match that of site's
// to create an illusion of not moving // to create an illusion of not moving
setTimeout(() => { setTimeout(() => {
@ -37,17 +35,13 @@ const BlueOrbHUDTextStateManager = (props: any) => {
setTimeout(() => { setTimeout(() => {
// animate it to new pos x/y // animate it to new pos x/y
setYellowHudTextPosX( setYellowHudTextPosX(
blue_orb_huds[currentBlueOrbHudId as keyof typeof blue_orb_huds] blue_orb_huds[targ1 as keyof typeof blue_orb_huds].big_text[0]
.big_text[0]
); );
setYellowHudTextPosY( setYellowHudTextPosY(
blue_orb_huds[currentBlueOrbHudId as keyof typeof blue_orb_huds] blue_orb_huds[targ1 as keyof typeof blue_orb_huds].big_text[1]
.big_text[1]
); );
// set new text according to the node name // set new text according to the node name
setYellowHudText( setYellowHudText(site_a[targ2 as keyof typeof site_a].node_name);
site_a[currentBlueOrbId as keyof typeof site_a].node_name
);
}, 3000); }, 3000);
// unshrink text // unshrink text
@ -56,8 +50,6 @@ const BlueOrbHUDTextStateManager = (props: any) => {
}, 3900); }, 3900);
}, },
[ [
currentBlueOrbHudId,
currentBlueOrbId,
incrementYellowHudTextPosY, incrementYellowHudTextPosY,
setYellowHudText, setYellowHudText,
setYellowHudTextOffsetXCoeff, setYellowHudTextOffsetXCoeff,
@ -66,41 +58,38 @@ const BlueOrbHUDTextStateManager = (props: any) => {
] ]
); );
const animateYellowTextWithoutMove = useCallback(() => { const animateYellowTextWithoutMove = useCallback(
// make current hud big text shrink (targ1: string, targ2: string) => {
setYellowHudTextOffsetXCoeff(-1); // 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 // 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(() => { setTimeout(() => {
// set new text according to the node name // set new text according to the node name
setYellowHudText( setYellowHudText(site_a[targ2 as keyof typeof site_a].node_name);
site_a[currentBlueOrbId as keyof typeof site_a].node_name }, 1000);
);
}, 1000);
setTimeout(() => { setTimeout(() => {
// unshrink text // unshrink text
setYellowHudTextOffsetXCoeff(0); setYellowHudTextOffsetXCoeff(0);
}, 1200); }, 1200);
}, [ },
currentBlueOrbHudId, [
currentBlueOrbId, setYellowHudText,
setYellowHudText, setYellowHudTextOffsetXCoeff,
setYellowHudTextOffsetXCoeff, setYellowHudTextPosX,
setYellowHudTextPosX, setYellowHudTextPosY,
setYellowHudTextPosY, ]
]); );
const dispatcherObjects = useMemo( const dispatcherObjects = useMemo(
() => ({ () => ({
@ -124,22 +113,7 @@ const BlueOrbHUDTextStateManager = (props: any) => {
actionFunction: animateYellowTextWithMove, actionFunction: animateYellowTextWithMove,
yellowLetterPosYOffset: 0, yellowLetterPosYOffset: 0,
}, },
changeBlueOrbUp: { changeBlueOrbFocus: {
action: "animateWithoutMove",
actionFunction: animateYellowTextWithoutMove,
yellowLetterPosYOffset: 0,
},
changeBlueOrbDown: {
action: "animateWithoutMove",
actionFunction: animateYellowTextWithoutMove,
yellowLetterPosYOffset: 0,
},
changeBlueOrbLeft: {
action: "animateWithoutMove",
actionFunction: animateYellowTextWithoutMove,
yellowLetterPosYOffset: 0,
},
changeBlueOrbRight: {
action: "animateWithoutMove", action: "animateWithoutMove",
actionFunction: animateYellowTextWithoutMove, actionFunction: animateYellowTextWithoutMove,
yellowLetterPosYOffset: 0, yellowLetterPosYOffset: 0,
@ -154,9 +128,16 @@ const BlueOrbHUDTextStateManager = (props: any) => {
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects]; dispatcherObjects[props.eventState as keyof typeof dispatcherObjects];
if (dispatchedAction.action === "animateWithMove") { if (dispatchedAction.action === "animateWithMove") {
animateYellowTextWithMove(dispatchedAction.yellowLetterPosYOffset); animateYellowTextWithMove(
dispatchedAction.yellowLetterPosYOffset,
props.targetBlueOrbHudId,
props.targetBlueOrbId
);
} else { } else {
animateYellowTextWithoutMove(); animateYellowTextWithoutMove(
props.targetBlueOrbHudId,
props.targetBlueOrbId
);
} }
} }
}, [ }, [

92
src/components/StateManagers/BlueOrbStateManager.tsx
View file

@ -1,43 +1,81 @@
import React, { useEffect, useMemo } from "react"; import React, { useCallback, useEffect, useMemo } from "react";
import { useBlueOrbStore } from "../../store"; 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 BlueOrbStateManager = (props: any) => {
const setCurrentBlueOrb = useBlueOrbStore( const setCurrentBlueOrb = useBlueOrbStore(
(state) => state.setCurrentBlueOrbId (state) => state.setCurrentBlueOrbId
); );
const setIsCurrentBlueOrbInteractedWith = useBlueOrbStore(
// this one is repetitive for now but ill leave them separated (state) => state.setIsCurrentBlueOrbInteractedWith
// 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 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(() => { useEffect(() => {
if (props.eventState) { if (props.eventState) {
const dispatchedAction = const dispatchedObject = dispatchObject(
dispatcherObjects[props.eventState as keyof typeof dispatcherObjects]; props.eventState,
props.targetBlueOrbId
);
// set new one after action ends
setTimeout(() => { setTimeout(() => {
setCurrentBlueOrb(props.targetBlueOrbId); dispatchedObject.action(dispatchedObject.value);
}, dispatchedAction.duration); }, dispatchedObject.actionDelay);
} }
}, [ }, [props.eventState, props.targetBlueOrbId, setCurrentBlueOrb]);
dispatcherObjects,
props.eventState,
props.targetBlueOrbId,
setCurrentBlueOrb,
]);
return null; return null;
}; };

109
src/components/StateManagers/EventStateManager.tsx Normal file
View 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;

18
src/resources/blue_orb_directions.json
View file

@ -1,60 +1,72 @@
{ {
"0422_down": { "0422_down": {
"action": "changeBlueOrbFocus",
"id": "0414", "id": "0414",
"hud": "fg_hud_2" "hud": "fg_hud_2"
}, },
"0422_right": { "0422_right": {
"action": "changeBlueOrbFocus",
"id": "0417", "id": "0417",
"hud": "bg_hud_1" "hud": "bg_hud_1"
}, },
"0422_up": { "0422_up": {
"id": "+0506", "action": "moveUp",
"id": "0506",
"hud": "fg_hud_3" "hud": "fg_hud_3"
}, },
"0414_up": { "0414_up": {
"action": "changeBlueOrbFocus",
"id": "0422", "id": "0422",
"hud": "fg_hud_1" "hud": "fg_hud_1"
}, },
"0414_right": { "0414_right": {
"action": "changeBlueOrbFocus",
"id": "0417", "id": "0417",
"hud": "bg_hud_1" "hud": "bg_hud_1"
}, },
"0413_down": { "0413_down": {
"action": "changeBlueOrbFocus",
"id": "0405", "id": "0405",
"hud": "fg_hud_6" "hud": "fg_hud_6"
}, },
"0413_left": { "0413_left": {
"action": "changeBlueOrbFocus",
"id": "0417", "id": "0417",
"hud": "bg_hud_1" "hud": "bg_hud_1"
}, },
"0405_left": { "0405_left": {
"action": "changeBlueOrbFocus",
"id": "0417", "id": "0417",
"hud": "bg_hud_1" "hud": "bg_hud_1"
}, },
"0405_up": { "0405_up": {
"action": "changeBlueOrbFocus",
"id": "0413", "id": "0413",
"hud": "fg_hud_5" "hud": "fg_hud_5"
}, },
"0417_left": { "0417_left": {
"action": "changeBlueOrbFocus",
"id": "0422", "id": "0422",
"hud": "fg_hud_1" "hud": "fg_hud_1"
}, },
"0417_down": { "0417_down": {
"action": "changeBlueOrbFocus",
"id": "0414", "id": "0414",
"hud": "fg_hud_2" "hud": "fg_hud_2"
}, },
"0417_right": { "0417_right": {
"action": "changeBlueOrbFocus",
"id": "0413", "id": "0413",
"hud": "fg_hud_5" "hud": "fg_hud_5"
}, },
"0506_down": { "0506_down": {
"id": "+0422", "action": "moveDown",
"id": "0422",
"hud": "fg_hud_1" "hud": "fg_hud_1"
} }
} }

10
src/store.ts
View file

@ -5,13 +5,15 @@ type BlueOrbState = {
hudId: string; hudId: string;
hudActive: number; hudActive: number;
hudVisible: boolean; hudVisible: boolean;
isCurrentBlueOrbInteractedWith: boolean;
yellowHudText: string; yellowHudText: string;
yellowHudTextPosY: number; yellowHudTextPosY: number;
yellowHudTextPosX: number; yellowHudTextPosX: number;
yellowHudTextOffsetXCoeff: number; yellowHudTextOffsetXCoeff: number;
setCurrentBlueOrbId: (to: string) => void; setCurrentBlueOrbId: (to: string) => void;
setCurrentHudId: (to: string) => void; setCurrentBlueOrbHudId: (to: string) => void;
toggleHud: () => void; toggleHud: () => void;
setIsCurrentBlueOrbInteractedWith: (to: boolean) => void;
setYellowHudText: (to: string) => void; setYellowHudText: (to: string) => void;
incrementYellowHudTextPosY: (by: number) => void; incrementYellowHudTextPosY: (by: number) => void;
setYellowHudTextPosY: (to: number) => void; setYellowHudTextPosY: (to: number) => void;
@ -85,15 +87,17 @@ export const useBlueOrbStore = create<BlueOrbState>((set) => ({
blueOrbId: "0422", blueOrbId: "0422",
hudId: "fg_hud_1", hudId: "fg_hud_1",
hudActive: 1, hudActive: 1,
isCurrentBlueOrbInteractedWith: false,
hudVisible: true, hudVisible: true,
yellowHudText: "", yellowHudText: "Tda028",
yellowHudTextPosY: 0, yellowHudTextPosY: 0,
yellowHudTextPosX: 0, yellowHudTextPosX: 0,
yellowHudTextOffsetXCoeff: 0, yellowHudTextOffsetXCoeff: 0,
setCurrentBlueOrbId: (to) => set(() => ({ blueOrbId: to })), setCurrentBlueOrbId: (to) => set(() => ({ blueOrbId: to })),
setCurrentHudId: (to) => set(() => ({ hudId: to })), setCurrentBlueOrbHudId: (to) => set(() => ({ hudId: to })),
toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })), toggleHud: () => set((state) => ({ hudActive: Number(!state.hudActive) })),
setYellowHudText: (to) => set(() => ({ yellowHudText: to })), setYellowHudText: (to) => set(() => ({ yellowHudText: to })),
setIsCurrentBlueOrbInteractedWith: (to) => set(() => ({isCurrentBlueOrbInteractedWith: to})),
incrementYellowHudTextPosY: (by) => incrementYellowHudTextPosY: (by) =>
set((state) => ({ yellowHudTextPosY: state.yellowHudTextPosY + by })), set((state) => ({ yellowHudTextPosY: state.yellowHudTextPosY + by })),
setYellowHudTextPosY: (to) => set(() => ({ yellowHudTextPosY: to })), setYellowHudTextPosY: (to) => set(() => ({ yellowHudTextPosY: to })),

2
tsconfig.json
View file

@ -1,6 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es6",
"lib": [ "lib": [
"dom", "dom",
"dom.iterable", "dom.iterable",