mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
cleaning stuff up
This commit is contained in:
parent
908479f21a
commit
40545c74a5
29 changed files with 519 additions and 362 deletions
|
@ -40,7 +40,6 @@ const App = () => {
|
||||||
<div id="game-root" className="game">
|
<div id="game-root" className="game">
|
||||||
<span className="canvas">
|
<span className="canvas">
|
||||||
<Canvas concurrent>
|
<Canvas concurrent>
|
||||||
<EventManager />
|
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
{dispatchScene[currentScene as keyof typeof dispatchScene]}
|
{dispatchScene[currentScene as keyof typeof dispatchScene]}
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
|
@ -4,6 +4,7 @@ import PauseSquare from "./PauseSquare";
|
||||||
import StaticBigLetter from "../../TextRenderer/StaticBigLetter";
|
import StaticBigLetter from "../../TextRenderer/StaticBigLetter";
|
||||||
import { usePauseStore } from "../../../store";
|
import { usePauseStore } from "../../../store";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
|
import MainSceneEventManager from "../../../core/StateManagers/MainSceneEventManager";
|
||||||
|
|
||||||
const Pause = (props: { visible: boolean }) => {
|
const Pause = (props: { visible: boolean }) => {
|
||||||
const exit = usePauseStore((state) => state.exitAnimation);
|
const exit = usePauseStore((state) => state.exitAnimation);
|
||||||
|
@ -341,6 +342,7 @@ const Pause = (props: { visible: boolean }) => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
|
<MainSceneEventManager loaded={!exit} />
|
||||||
</group>
|
</group>
|
||||||
</group>
|
</group>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import HUD from "./SyncedComponents/HUD";
|
import HUD from "./SyncedComponents/HUD";
|
||||||
import GreenTextRenderer from "../TextRenderer/GreenTextRenderer";
|
|
||||||
import YellowTextRenderer from "../TextRenderer/YellowTextRenderer";
|
import YellowTextRenderer from "../TextRenderer/YellowTextRenderer";
|
||||||
import YellowOrb from "./SyncedComponents/YellowOrb";
|
import YellowOrb from "./SyncedComponents/YellowOrb";
|
||||||
import GrayPlanes from "./SyncedComponents/GrayPlanes";
|
import GrayPlanes from "./SyncedComponents/GrayPlanes";
|
||||||
import Starfield from "./SyncedComponents/Starfield";
|
import Starfield from "./SyncedComponents/Starfield";
|
||||||
import Site from "./SyncedComponents/Site";
|
import Site from "./SyncedComponents/Site";
|
||||||
import MiddleRing from "./SyncedComponents/MiddleRing";
|
import MiddleRing from "./SyncedComponents/MiddleRing";
|
||||||
|
import MainSceneEventManager from "../../core/StateManagers/MainSceneEventManager";
|
||||||
|
|
||||||
type SyncedComponentLoaderProps = {
|
type SyncedComponentLoaderProps = {
|
||||||
paused: boolean;
|
paused: boolean;
|
||||||
|
@ -40,7 +40,6 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => {
|
||||||
<>
|
<>
|
||||||
<group visible={visible}>
|
<group visible={visible}>
|
||||||
<HUD />
|
<HUD />
|
||||||
<GreenTextRenderer />
|
|
||||||
<YellowTextRenderer />
|
<YellowTextRenderer />
|
||||||
<YellowOrb visible={visible} />
|
<YellowOrb visible={visible} />
|
||||||
<MiddleRing />
|
<MiddleRing />
|
||||||
|
@ -51,6 +50,7 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => {
|
||||||
introFinished={introFinished}
|
introFinished={introFinished}
|
||||||
/>
|
/>
|
||||||
<Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
|
<Site shouldIntro={props.shouldIntro} introFinished={introFinished} />
|
||||||
|
<MainSceneEventManager loaded={visible} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
import React, { createRef, memo, RefObject, useRef } from "react";
|
import React, { useMemo, useRef } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
|
import GrayPlane from "./GrayPlanes/GrayPlane";
|
||||||
|
|
||||||
const GrayPlanes = () => {
|
const GrayPlanes = () => {
|
||||||
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
const grayPlaneGroupRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
const grayPlanePoses = [
|
const grayPlanePoses = useMemo(
|
||||||
|
() => [
|
||||||
[1.2, 0, -1.2],
|
[1.2, 0, -1.2],
|
||||||
[1.2, 0, 1.2],
|
[1.2, 0, 1.2],
|
||||||
[1.2, 0, -0.5],
|
[1.2, 0, -0.5],
|
||||||
|
@ -13,42 +15,19 @@ const GrayPlanes = () => {
|
||||||
[-1.2, 0, 1.2],
|
[-1.2, 0, 1.2],
|
||||||
[-1.2, 0, 1],
|
[-1.2, 0, 1],
|
||||||
[0.5, 0, 1],
|
[0.5, 0, 1],
|
||||||
];
|
],
|
||||||
|
[]
|
||||||
const grayPlaneRefs = grayPlanePoses.map((poses: number[]) =>
|
|
||||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
||||||
useRef<RefObject<THREE.Object3D>[]>(
|
|
||||||
poses.map(() => createRef<THREE.Object3D>())
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
grayPlaneGroupRef.current!.rotation.y -= 0.01;
|
grayPlaneGroupRef.current!.rotation.y -= 0.01;
|
||||||
grayPlaneRefs.forEach((ref: any) => (ref.current!.rotation.y += 0.03));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// separate wrapper group to make it rotate around [0,0,0]
|
|
||||||
<group position={[0.1, 0, -2]} ref={grayPlaneGroupRef}>
|
<group position={[0.1, 0, -2]} ref={grayPlaneGroupRef}>
|
||||||
{grayPlaneRefs.map((ref, idx: number) => {
|
{grayPlanePoses.map((pos, idx: number) => (
|
||||||
return (
|
<GrayPlane position={pos as [number, number, number]} key={idx} />
|
||||||
<mesh
|
))}
|
||||||
scale={[0.04, 10, 0.04]}
|
|
||||||
position={grayPlanePoses[idx] as [number, number, number]}
|
|
||||||
ref={ref}
|
|
||||||
key={idx}
|
|
||||||
>
|
|
||||||
<planeBufferGeometry attach="geometry" />
|
|
||||||
<meshBasicMaterial
|
|
||||||
attach="material"
|
|
||||||
color={0xd3d3d3}
|
|
||||||
opacity={0.2}
|
|
||||||
transparent={true}
|
|
||||||
side={THREE.DoubleSide}
|
|
||||||
/>
|
|
||||||
</mesh>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
import React, { useRef } from "react";
|
||||||
|
import * as THREE from "three";
|
||||||
|
import { useFrame } from "react-three-fiber";
|
||||||
|
|
||||||
|
type GrayPlaneProps = {
|
||||||
|
position: [number, number, number];
|
||||||
|
};
|
||||||
|
|
||||||
|
const GrayPlane = (props: GrayPlaneProps) => {
|
||||||
|
const meshRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
if (meshRef.current) {
|
||||||
|
meshRef.current.rotation.y += 0.03;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<mesh
|
||||||
|
scale={[0.04, 10, 0.04]}
|
||||||
|
position={props.position as [number, number, number]}
|
||||||
|
>
|
||||||
|
<planeBufferGeometry attach="geometry" />
|
||||||
|
<meshBasicMaterial
|
||||||
|
attach="material"
|
||||||
|
color={0xd3d3d3}
|
||||||
|
opacity={0.2}
|
||||||
|
transparent={true}
|
||||||
|
side={THREE.DoubleSide}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GrayPlane;
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { memo } from "react";
|
import React, { useMemo } from "react";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import bigHud from "../../../static/sprite/big_hud.png";
|
import bigHud from "../../../static/sprite/big_hud.png";
|
||||||
|
@ -8,19 +8,39 @@ import longHudMirrored from "../../../static/sprite/long_hud_mirrored.png";
|
||||||
import boringHud from "../../../static/sprite/long_hud_boring.png";
|
import boringHud from "../../../static/sprite/long_hud_boring.png";
|
||||||
import boringHudMirrored from "../../../static/sprite/long_hud_boring_mirrored.png";
|
import boringHudMirrored from "../../../static/sprite/long_hud_boring_mirrored.png";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { useHudStore } from "../../../store";
|
import { useHudStore, useNodeStore, useSiteStore } from "../../../store";
|
||||||
import node_huds from "../../../resources/node_huds.json";
|
import node_huds from "../../../resources/node_huds.json";
|
||||||
|
import MediumLetter from "../../TextRenderer/MediumLetter";
|
||||||
|
import site_a from "../../../resources/site_a.json";
|
||||||
|
import site_b from "../../../resources/site_b.json";
|
||||||
|
import { SiteType } from "./Site";
|
||||||
|
|
||||||
const HUD = () => {
|
const HUD = () => {
|
||||||
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
|
const currentSite = useSiteStore((state) => state.currentSite);
|
||||||
|
|
||||||
|
const greenText = useMemo(() => {
|
||||||
|
if (activeNodeId === "UNKNOWN") return "".split("");
|
||||||
|
else {
|
||||||
|
const siteData = currentSite === "a" ? site_a : site_b;
|
||||||
|
const level = activeNodeId.substr(0, 2);
|
||||||
|
|
||||||
|
return (siteData as SiteType)[level][activeNodeId].title.split("");
|
||||||
|
}
|
||||||
|
}, [activeNodeId, currentSite]);
|
||||||
|
|
||||||
const active = useHudStore((state) => state.active);
|
const active = useHudStore((state) => state.active);
|
||||||
const id = useHudStore((state) => state.id);
|
const id = useHudStore((state) => state.id);
|
||||||
|
|
||||||
const currentHud = node_huds[id as keyof typeof node_huds];
|
const currentHud = useMemo(() => node_huds[id as keyof typeof node_huds], [
|
||||||
|
id,
|
||||||
|
]);
|
||||||
|
|
||||||
const hudElementState = useSpring({
|
const hudElementState = useSpring({
|
||||||
bigHUDPositionX: active,
|
bigHUDPositionX: active,
|
||||||
longHUDPositionX: active,
|
longHUDPositionX: active,
|
||||||
boringHUDPositionX: active,
|
boringHUDPositionX: active,
|
||||||
|
greenTextPositionX: active,
|
||||||
config: { duration: 400 },
|
config: { duration: 400 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -39,9 +59,14 @@ const HUD = () => {
|
||||||
[currentHud.long.initial_position[0], currentHud.long.position[0]]
|
[currentHud.long.initial_position[0], currentHud.long.position[0]]
|
||||||
);
|
);
|
||||||
|
|
||||||
// these hud elements come in all shapes and forms, some of them are mirrored, rotated
|
const greenTextPosX = hudElementState.greenTextPositionX.to(
|
||||||
// you name it. this function allows me to specify whether i want a normal texture
|
[0, 1],
|
||||||
// for the blue orb or the mirrored/rotated one.
|
[
|
||||||
|
currentHud.medium_text.initial_position[0],
|
||||||
|
currentHud.medium_text.position[0],
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
const spriteTypeToSprite = (spriteType: string, hudElement: string) => {
|
const spriteTypeToSprite = (spriteType: string, hudElement: string) => {
|
||||||
switch (spriteType) {
|
switch (spriteType) {
|
||||||
case "normal":
|
case "normal":
|
||||||
|
@ -85,8 +110,8 @@ const HUD = () => {
|
||||||
<group position={[0, 0, 10]}>
|
<group position={[0, 0, 10]}>
|
||||||
<a.sprite
|
<a.sprite
|
||||||
position-x={longHUDPosX}
|
position-x={longHUDPosX}
|
||||||
position-y={currentHud!.long.position[1]}
|
position-y={currentHud.long.position[1]}
|
||||||
position-z={currentHud!.long.position[2]}
|
position-z={currentHud.long.position[2]}
|
||||||
scale={[1, 0.03, 1]}
|
scale={[1, 0.03, 1]}
|
||||||
renderOrder={2}
|
renderOrder={2}
|
||||||
>
|
>
|
||||||
|
@ -99,8 +124,8 @@ const HUD = () => {
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
<a.sprite
|
<a.sprite
|
||||||
position-x={boringHUDPosX}
|
position-x={boringHUDPosX}
|
||||||
position-y={currentHud!.boring.position[1]}
|
position-y={currentHud.boring.position[1]}
|
||||||
position-z={currentHud!.boring.position[2]}
|
position-z={currentHud.boring.position[2]}
|
||||||
scale={[1, 0.03, 1]}
|
scale={[1, 0.03, 1]}
|
||||||
renderOrder={2}
|
renderOrder={2}
|
||||||
>
|
>
|
||||||
|
@ -113,8 +138,8 @@ const HUD = () => {
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
<a.sprite
|
<a.sprite
|
||||||
position-x={bigHUDPosX}
|
position-x={bigHUDPosX}
|
||||||
position-y={currentHud!.big.position[1]}
|
position-y={currentHud.big.position[1]}
|
||||||
position-z={currentHud!.big.position[2]}
|
position-z={currentHud.big.position[2]}
|
||||||
scale={[0.5, 0.06, 1]}
|
scale={[0.5, 0.06, 1]}
|
||||||
renderOrder={2}
|
renderOrder={2}
|
||||||
>
|
>
|
||||||
|
@ -125,6 +150,16 @@ const HUD = () => {
|
||||||
depthTest={false}
|
depthTest={false}
|
||||||
/>
|
/>
|
||||||
</a.sprite>
|
</a.sprite>
|
||||||
|
<a.group
|
||||||
|
position-x={greenTextPosX}
|
||||||
|
position-y={currentHud.medium_text.position[1]}
|
||||||
|
position-z={-8.7}
|
||||||
|
scale={[0.02, 0.035, 0.02]}
|
||||||
|
>
|
||||||
|
{greenText.map((letter, idx) => (
|
||||||
|
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
|
||||||
|
))}
|
||||||
|
</a.group>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect, useMemo, useRef } from "react";
|
import React, { useMemo, useRef } from "react";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
|
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
@ -14,8 +14,6 @@ const MiddleRing = () => {
|
||||||
const animDuration = useMiddleRingStore((state) => state.animDuration);
|
const animDuration = useMiddleRingStore((state) => state.animDuration);
|
||||||
const mainRingVisible = useMiddleRingStore((state) => state.mainRingVisible);
|
const mainRingVisible = useMiddleRingStore((state) => state.mainRingVisible);
|
||||||
|
|
||||||
const partSeparatorVal = useMiddleRingStore(state=> state.partSeparatorVal)
|
|
||||||
|
|
||||||
const wobbleState = useSpring({
|
const wobbleState = useSpring({
|
||||||
wobbleStrength: transformState.wobbleStrength,
|
wobbleStrength: transformState.wobbleStrength,
|
||||||
noiseStrength: transformState.noiseStrength,
|
noiseStrength: transformState.noiseStrength,
|
||||||
|
@ -198,8 +196,10 @@ const MiddleRing = () => {
|
||||||
|
|
||||||
middleRingMaterialRef.current.needsUpdate = true;
|
middleRingMaterialRef.current.needsUpdate = true;
|
||||||
}
|
}
|
||||||
if (rotating && middleRingRef && middleRingPartRef) {
|
if (rotating && middleRingRef.current) {
|
||||||
middleRingRef.current!.rotation.y += 0.05;
|
middleRingRef.current!.rotation.y += 0.05;
|
||||||
|
}
|
||||||
|
if (rotating && middleRingPartRef.current) {
|
||||||
middleRingPartRef.current!.rotation.y += 0.05;
|
middleRingPartRef.current!.rotation.y += 0.05;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -229,11 +229,11 @@ const MiddleRing = () => {
|
||||||
/>
|
/>
|
||||||
</a.mesh>
|
</a.mesh>
|
||||||
|
|
||||||
|
{!mainRingVisible ? (
|
||||||
<group
|
<group
|
||||||
rotation={[0, 0.9, 0]}
|
rotation={[0, 0.9, 0]}
|
||||||
ref={middleRingPartRef}
|
ref={middleRingPartRef}
|
||||||
position={[0, 0.5, 0.3]}
|
position={[0, 0.5, 0.3]}
|
||||||
visible={!mainRingVisible}
|
|
||||||
>
|
>
|
||||||
{[...Array(30).keys()].map((i) => {
|
{[...Array(30).keys()].map((i) => {
|
||||||
const angle = (i / 30) * 2 * Math.PI;
|
const angle = (i / 30) * 2 * Math.PI;
|
||||||
|
@ -246,6 +246,9 @@ const MiddleRing = () => {
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</group>
|
</group>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
</a.group>
|
</a.group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,13 +5,13 @@ import * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import React, { useMemo } from "react";
|
import React, { useEffect, useMemo } from "react";
|
||||||
|
import { useBigTextStore } from "../../store";
|
||||||
|
|
||||||
const BigLetter = (props: {
|
const BigLetter = (props: {
|
||||||
color: string;
|
color: string;
|
||||||
letter: string;
|
letter: string;
|
||||||
letterIdx: number;
|
letterIdx: number;
|
||||||
xOffsetCoeff: number;
|
|
||||||
}) => {
|
}) => {
|
||||||
const colorToTexture = (color: string) => {
|
const colorToTexture = (color: string) => {
|
||||||
const colorTexture = {
|
const colorTexture = {
|
||||||
|
@ -89,17 +89,23 @@ const BigLetter = (props: {
|
||||||
return geometry;
|
return geometry;
|
||||||
}, [letterData, lineYOffsets, props.letter]);
|
}, [letterData, lineYOffsets, props.letter]);
|
||||||
|
|
||||||
const textRendererState = useSpring({
|
const [{ letterOffsetX }, set] = useSpring(() => ({
|
||||||
letterOffsetXCoeff:
|
letterOffsetX: props.letterIdx + 0.3 + (props.letterIdx + 0.3),
|
||||||
|
config: { duration: 200 },
|
||||||
|
}));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
useBigTextStore.subscribe(set, (state) => ({
|
||||||
|
letterOffsetX:
|
||||||
props.letterIdx +
|
props.letterIdx +
|
||||||
0.3 +
|
0.3 +
|
||||||
(props.letterIdx + 0.3) * props.xOffsetCoeff,
|
(props.letterIdx + 0.3) * state.transformState.xOffset,
|
||||||
config: { duration: 200 },
|
}));
|
||||||
});
|
}, [props.letterIdx, set]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a.mesh
|
<a.mesh
|
||||||
position-x={textRendererState.letterOffsetXCoeff}
|
position-x={letterOffsetX}
|
||||||
position-y={-letterData[4] / 12.5}
|
position-y={-letterData[4] / 12.5}
|
||||||
scale={[1, 1, 0]}
|
scale={[1, 1, 0]}
|
||||||
geometry={geom}
|
geometry={geom}
|
||||||
|
|
|
@ -1,52 +0,0 @@
|
||||||
import { a, useSpring } from "@react-spring/three";
|
|
||||||
import React, { useEffect, useRef } from "react";
|
|
||||||
import { GreenTextState, useGreenTextStore } from "../../store";
|
|
||||||
import MediumLetter from "./MediumLetter";
|
|
||||||
|
|
||||||
const GreenTextRenderer = () => {
|
|
||||||
const greenTextActive = useGreenTextStore((state) => state.active);
|
|
||||||
|
|
||||||
const transformRef = useRef(useGreenTextStore.getState().transformState);
|
|
||||||
|
|
||||||
const textArrRef = useRef(useGreenTextStore.getState().text.split(""));
|
|
||||||
|
|
||||||
const { greenTextPosXToggle } = useSpring({
|
|
||||||
greenTextPosXToggle: greenTextActive,
|
|
||||||
config: { duration: 400 },
|
|
||||||
});
|
|
||||||
|
|
||||||
const greenTextPosX = greenTextPosXToggle.to(
|
|
||||||
[0, 1],
|
|
||||||
[transformRef.current.posX.initial, transformRef.current.posX.final]
|
|
||||||
);
|
|
||||||
|
|
||||||
// subscribing to state and updating transiently
|
|
||||||
useEffect(
|
|
||||||
() =>
|
|
||||||
useGreenTextStore.subscribe(
|
|
||||||
(state) => {
|
|
||||||
transformRef.current = (state as GreenTextState).transformState;
|
|
||||||
textArrRef.current = (state as GreenTextState).text.split("");
|
|
||||||
},
|
|
||||||
(state) => state
|
|
||||||
),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<group position={[0, 0, 10]}>
|
|
||||||
<a.group
|
|
||||||
position-x={greenTextPosX}
|
|
||||||
position-y={transformRef.current.posY}
|
|
||||||
position-z={-8.7}
|
|
||||||
scale={[0.02, 0.035, 0.02]}
|
|
||||||
>
|
|
||||||
{textArrRef.current.map((letter, idx) => (
|
|
||||||
<MediumLetter letter={letter} letterIdx={idx} key={idx} />
|
|
||||||
))}
|
|
||||||
</a.group>
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GreenTextRenderer;
|
|
|
@ -1,17 +1,24 @@
|
||||||
import React from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { useMediaBigTextStore } from "../../store";
|
import { useMediaBigTextStore } from "../../store";
|
||||||
import { a, useTrail } from "@react-spring/three";
|
import { a, useTrail } from "@react-spring/three";
|
||||||
import BigLetter from "./BigLetter";
|
import BigLetter from "./BigLetter";
|
||||||
|
|
||||||
const MediaYellowTextAnimator = () => {
|
const MediaYellowTextAnimator = () => {
|
||||||
const transformState = useMediaBigTextStore((state) => state.transformState);
|
const textArrRef = useRef(useMediaBigTextStore.getState().text.split(""));
|
||||||
const textArr = useMediaBigTextStore((state) => state.text).split("");
|
|
||||||
|
|
||||||
const trail = useTrail(textArr.length, {
|
const [trail, set] = useTrail(textArrRef.current.length, () => ({
|
||||||
posX: transformState.posX,
|
posX: 0,
|
||||||
posY: transformState.posY,
|
posY: 0,
|
||||||
config: { duration: 280 },
|
xOffset: 0,
|
||||||
});
|
config: { duration: 200 },
|
||||||
|
}));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
useMediaBigTextStore.subscribe(set, (state) => ({
|
||||||
|
posX: state.transformState.posX,
|
||||||
|
posY: state.transformState.posY,
|
||||||
|
}));
|
||||||
|
}, [set]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, 0, 10]}>
|
<group position={[0, 0, 10]}>
|
||||||
|
@ -25,8 +32,7 @@ const MediaYellowTextAnimator = () => {
|
||||||
>
|
>
|
||||||
<BigLetter
|
<BigLetter
|
||||||
color={"yellow"}
|
color={"yellow"}
|
||||||
xOffsetCoeff={transformState.xOffset}
|
letter={textArrRef.current[idx]}
|
||||||
letter={textArr[idx]}
|
|
||||||
letterIdx={idx}
|
letterIdx={idx}
|
||||||
key={idx}
|
key={idx}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,66 +1,30 @@
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { BigTextState, useBigTextStore } from "../../store";
|
import { BigTextState, useBigTextStore, useNodeStore } from "../../store";
|
||||||
import { a, useSpring, useTrail } from "@react-spring/three";
|
import { a, useSpring, useTrail } from "@react-spring/three";
|
||||||
import BigLetter from "./BigLetter";
|
import BigLetter from "./BigLetter";
|
||||||
|
|
||||||
const YellowTextRenderer = () => {
|
const YellowTextRenderer = () => {
|
||||||
const disableTrail = useBigTextStore((state) => state.disableTrail);
|
|
||||||
const transformState = useBigTextStore((state) => state.transformState);
|
|
||||||
|
|
||||||
const visible = useBigTextStore((state) => state.visible);
|
const visible = useBigTextStore((state) => state.visible);
|
||||||
const color = useBigTextStore((state) => state.color);
|
const color = useBigTextStore((state) => state.color);
|
||||||
|
|
||||||
const textArrRef = useRef(useBigTextStore.getState().text.split(""));
|
const textArrRef = useRef(useBigTextStore.getState().text.split(""));
|
||||||
|
|
||||||
const transformRef = useRef(useBigTextStore.getState().transformState);
|
const [trail, set] = useTrail(textArrRef.current.length, () => ({
|
||||||
|
posX: 0,
|
||||||
// this is used to animate the letters moving one after another
|
posY: 0,
|
||||||
const trail = useTrail(textArrRef.current.length, {
|
|
||||||
posX: transformRef.current.posX,
|
|
||||||
posY: transformRef.current.posY,
|
|
||||||
config: { duration: 280 },
|
config: { duration: 280 },
|
||||||
});
|
}));
|
||||||
|
|
||||||
// this is used when the whole GROUP itself needs to be animated
|
useEffect(() => {
|
||||||
const spring = useSpring({
|
useBigTextStore.subscribe(set, (state) => ({
|
||||||
posX: transformState.posX,
|
posX: state.transformState.posX,
|
||||||
posY: transformState.posY,
|
posY: state.transformState.posY,
|
||||||
config: { duration: 1200 },
|
}));
|
||||||
});
|
}, [set]);
|
||||||
|
|
||||||
useEffect(
|
|
||||||
() =>
|
|
||||||
useBigTextStore.subscribe(
|
|
||||||
(state) => {
|
|
||||||
transformRef.current = (state as BigTextState).transformState;
|
|
||||||
textArrRef.current = (state as BigTextState).text.split("");
|
|
||||||
},
|
|
||||||
(state) => state
|
|
||||||
),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, 0, 10]} visible={visible}>
|
<group position={[0, 0, 10]} visible={visible}>
|
||||||
{disableTrail
|
{trail.map(({ posX, posY }, idx) => (
|
||||||
? textArrRef.current.map((letter, idx) => (
|
|
||||||
<a.group
|
|
||||||
key={idx}
|
|
||||||
position-x={spring.posX}
|
|
||||||
position-y={spring.posY}
|
|
||||||
position-z={-8.7}
|
|
||||||
scale={[0.04, 0.06, 0.04]}
|
|
||||||
>
|
|
||||||
<BigLetter
|
|
||||||
color={color}
|
|
||||||
xOffsetCoeff={0}
|
|
||||||
letter={textArrRef.current[idx]}
|
|
||||||
letterIdx={idx}
|
|
||||||
key={idx}
|
|
||||||
/>
|
|
||||||
</a.group>
|
|
||||||
))
|
|
||||||
: trail.map(({ posX, posY }, idx) => (
|
|
||||||
<a.group
|
<a.group
|
||||||
key={idx}
|
key={idx}
|
||||||
position-x={posX}
|
position-x={posX}
|
||||||
|
@ -70,7 +34,6 @@ const YellowTextRenderer = () => {
|
||||||
>
|
>
|
||||||
<BigLetter
|
<BigLetter
|
||||||
color={color}
|
color={color}
|
||||||
xOffsetCoeff={transformRef.current.xOffset}
|
|
||||||
letter={textArrRef.current[idx]}
|
letter={textArrRef.current[idx]}
|
||||||
letterIdx={idx}
|
letterIdx={idx}
|
||||||
key={idx}
|
key={idx}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { useAuthorizeUserStore, useBootStore } from "../../store";
|
import { useAuthorizeUserStore, useBootStore } from "../../../store";
|
||||||
|
|
||||||
const BootAuthorizeUserManager = (props: StateManagerProps) => {
|
const BootAuthorizeUserManager = (props: StateManagerProps) => {
|
||||||
const setActiveLetterTextureOffset = useAuthorizeUserStore(
|
const setActiveLetterTextureOffset = useAuthorizeUserStore(
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { useBootStore } from "../../store";
|
import { useBootStore } from "../../../store";
|
||||||
|
|
||||||
const BootComponentManager = (props: StateManagerProps) => {
|
const BootComponentManager = (props: StateManagerProps) => {
|
||||||
const toggleComponentMatrixIdx = useBootStore(
|
const toggleComponentMatrixIdx = useBootStore(
|
|
@ -18,24 +18,23 @@ import {
|
||||||
useSiteStore,
|
useSiteStore,
|
||||||
useSSknStore,
|
useSSknStore,
|
||||||
} from "../../store";
|
} from "../../store";
|
||||||
import GreenTextManager from "./MainSceneManagers/GreenTextManager";
|
|
||||||
import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
|
import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
|
||||||
import SceneManager from "./SceneManager";
|
import SceneManager from "./GameManagers/SceneManager";
|
||||||
import YellowTextManager from "./MainSceneManagers/YellowTextManager";
|
import YellowTextManager from "./MainSceneManagers/YellowTextManager";
|
||||||
import LevelManager from "./MainSceneManagers/LevelManager";
|
import LevelManager from "./MainSceneManagers/LevelManager";
|
||||||
import BootComponentManager from "./BootComponentManager";
|
import BootComponentManager from "./BootSceneManagers/BootComponentManager";
|
||||||
import SSknComponentManager from "./SSknComponentManager";
|
import SSknComponentManager from "./SSknSceneManagers/SSknComponentManager";
|
||||||
import handleMainSceneEvent from "../mainSceneEventHandler";
|
import handleMainSceneEvent from "../mainSceneEventHandler";
|
||||||
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
||||||
import handleBootEvent from "../bootEventHandler";
|
import handleBootEvent from "../bootEventHandler";
|
||||||
import handleSSknSceneEvent from "../ssknSceneEventHandler";
|
import handleSSknSceneEvent from "../ssknSceneEventHandler";
|
||||||
import BootAuthorizeUserManager from "./BootAuthorizeUserManager";
|
import BootAuthorizeUserManager from "./BootSceneManagers/BootAuthorizeUserManager";
|
||||||
import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager";
|
import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager";
|
||||||
import SubsceneManager from "./SubsceneManager";
|
import SubsceneManager from "./GameManagers/SubsceneManager";
|
||||||
import PauseComponentManager from "./MainSceneManagers/PauseComponentManager";
|
import PauseComponentManager from "./MainSceneManagers/PauseComponentManager";
|
||||||
import MediaYellowTextManager from "./MediaYellowTextManager";
|
import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager";
|
||||||
import GameSaver from "./GameSaver";
|
import GameSaver from "./GameManagers/GameSaver";
|
||||||
import GameLoader from "./GameLoader";
|
import GameLoader from "./GameManagers/GameLoader";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import IdleManager from "./MainSceneManagers/IdleManager";
|
import IdleManager from "./MainSceneManagers/IdleManager";
|
||||||
|
|
||||||
|
@ -279,7 +278,6 @@ const EventManager = () => {
|
||||||
<>
|
<>
|
||||||
<NodeManager eventState={eventState!} />
|
<NodeManager eventState={eventState!} />
|
||||||
<NodeHUDManager eventState={eventState!} />
|
<NodeHUDManager eventState={eventState!} />
|
||||||
<GreenTextManager eventState={eventState!} />
|
|
||||||
<SiteManager eventState={eventState!} />
|
<SiteManager eventState={eventState!} />
|
||||||
<LainManager eventState={eventState!} />
|
<LainManager eventState={eventState!} />
|
||||||
<MiddleRingManager eventState={eventState!} />
|
<MiddleRingManager eventState={eventState!} />
|
||||||
|
|
|
@ -7,12 +7,12 @@ import {
|
||||||
useNodeStore,
|
useNodeStore,
|
||||||
useSiteSaveStore,
|
useSiteSaveStore,
|
||||||
useSiteStore,
|
useSiteStore,
|
||||||
} from "../../store";
|
} from "../../../store";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import node_huds from "./../../resources/node_huds.json";
|
import node_huds from "../../../resources/node_huds.json";
|
||||||
import site_a from "./../../resources/site_a.json";
|
import site_a from "../../../resources/site_a.json";
|
||||||
import site_b from "./../../resources/site_b.json";
|
import site_b from "../../../resources/site_b.json";
|
||||||
import { SiteType } from "../../components/MainScene/SyncedComponents/Site";
|
import { SiteType } from "../../../components/MainScene/SyncedComponents/Site";
|
||||||
|
|
||||||
const GameLoader = (props: StateManagerProps) => {
|
const GameLoader = (props: StateManagerProps) => {
|
||||||
const siteASaveState = useSiteSaveStore((state) => state.a);
|
const siteASaveState = useSiteSaveStore((state) => state.a);
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useSiteSaveStore } from "../../store";
|
import { useSiteSaveStore } from "../../../store";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
|
|
||||||
const GameSaver = (props: StateManagerProps) => {
|
const GameSaver = (props: StateManagerProps) => {
|
||||||
const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState);
|
const setSiteSaveState = useSiteSaveStore((state) => state.setSiteSaveState);
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { useMainSceneStore, useSceneStore } from "../../store";
|
import { useMainSceneStore, useSceneStore } from "../../../store";
|
||||||
|
|
||||||
const SceneManager = (props: StateManagerProps) => {
|
const SceneManager = (props: StateManagerProps) => {
|
||||||
const setScene = useSceneStore((state) => state.setScene);
|
const setScene = useSceneStore((state) => state.setScene);
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { useBootStore, useMainSceneStore } from "../../store";
|
import { useBootStore, useMainSceneStore } from "../../../store";
|
||||||
|
|
||||||
const SubsceneManager = (props: StateManagerProps) => {
|
const SubsceneManager = (props: StateManagerProps) => {
|
||||||
const setMainSubscene = useMainSceneStore((state) => state.setSubscene);
|
const setMainSubscene = useMainSceneStore((state) => state.setSubscene);
|
42
src/core/StateManagers/GateSceneManager.tsx
Normal file
42
src/core/StateManagers/GateSceneManager.tsx
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
|
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||||
|
import SceneManager from "./GameManagers/SceneManager";
|
||||||
|
|
||||||
|
const GateSceneManager = () => {
|
||||||
|
const [eventState, setEventState] = useState<any>();
|
||||||
|
|
||||||
|
const [loaded, setLoaded] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoaded(true);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
setLoaded(false);
|
||||||
|
};
|
||||||
|
}, 3500);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleKeyPress = useCallback((event) => {
|
||||||
|
const { keyCode } = event;
|
||||||
|
|
||||||
|
const keyPress = getKeyCodeAssociation(keyCode);
|
||||||
|
|
||||||
|
if (keyPress && loaded) {
|
||||||
|
const event = { event: "exit_gate" };
|
||||||
|
setEventState(event);
|
||||||
|
}
|
||||||
|
}, [loaded]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener("keydown", handleKeyPress);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("keydown", handleKeyPress);
|
||||||
|
};
|
||||||
|
}, [handleKeyPress]);
|
||||||
|
|
||||||
|
return <SceneManager eventState={eventState!} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GateSceneManager;
|
119
src/core/StateManagers/MainSceneEventManager.tsx
Normal file
119
src/core/StateManagers/MainSceneEventManager.tsx
Normal file
|
@ -0,0 +1,119 @@
|
||||||
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||||
|
import {
|
||||||
|
useLevelSelectionStore,
|
||||||
|
useLevelStore,
|
||||||
|
useMainSceneStore,
|
||||||
|
useNodeStore,
|
||||||
|
usePauseStore,
|
||||||
|
useSiteStore,
|
||||||
|
} from "../../store";
|
||||||
|
import handleMainSceneEvent from "../mainSceneEventHandler";
|
||||||
|
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||||
|
import NodeManager from "./MainSceneManagers/NodeManager";
|
||||||
|
import NodeHUDManager from "./MainSceneManagers/NodeHUDManager";
|
||||||
|
import SiteManager from "./MainSceneManagers/SiteManager";
|
||||||
|
import LainManager from "./MainSceneManagers/LainManager";
|
||||||
|
import MiddleRingManager from "./MainSceneManagers/MiddleRingManager";
|
||||||
|
import SceneManager from "./GameManagers/SceneManager";
|
||||||
|
import YellowTextManager from "./MainSceneManagers/YellowTextManager";
|
||||||
|
import LevelManager from "./MainSceneManagers/LevelManager";
|
||||||
|
import LevelSelectionManager from "./MainSceneManagers/LevelSelectionManager";
|
||||||
|
import SubsceneManager from "./GameManagers/SubsceneManager";
|
||||||
|
import PauseComponentManager from "./MainSceneManagers/PauseComponentManager";
|
||||||
|
import GameSaver from "./GameManagers/GameSaver";
|
||||||
|
import GameLoader from "./GameManagers/GameLoader";
|
||||||
|
import IdleManager from "./MainSceneManagers/IdleManager";
|
||||||
|
|
||||||
|
type MainSceneEventManagerProps = {
|
||||||
|
loaded: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
|
||||||
|
// all the possible context needed to calculate new state
|
||||||
|
const currentSite = useSiteStore((state) => state.currentSite);
|
||||||
|
const activeNodeId = useNodeStore((state) => state.activeNodeState.id);
|
||||||
|
const nodeMatrixIndices = useNodeStore((state) => state.nodeMatrixIndices);
|
||||||
|
const siteTransformState = useSiteStore((state) => state.transformState);
|
||||||
|
const activeLevel = useLevelStore((state) => state.activeLevel);
|
||||||
|
const mainSubscene = useMainSceneStore((state) => state.subscene);
|
||||||
|
const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
|
||||||
|
const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
||||||
|
const activePauseComponent = usePauseStore(
|
||||||
|
useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
|
||||||
|
pauseMatrixIdx,
|
||||||
|
])
|
||||||
|
);
|
||||||
|
const gameProgress = useNodeStore((state) => state.gameProgress);
|
||||||
|
|
||||||
|
const timePassedSinceLastKeyPress = useRef(-1);
|
||||||
|
|
||||||
|
const [eventState, setEventState] = useState<any>();
|
||||||
|
|
||||||
|
const handleKeyPress = useCallback(
|
||||||
|
(event) => {
|
||||||
|
const { keyCode } = event;
|
||||||
|
|
||||||
|
const keyPress = getKeyCodeAssociation(keyCode);
|
||||||
|
|
||||||
|
if (keyPress && props.loaded) {
|
||||||
|
timePassedSinceLastKeyPress.current = Date.now() + 2500;
|
||||||
|
const event = handleMainSceneEvent({
|
||||||
|
mainSubscene: mainSubscene,
|
||||||
|
keyPress: keyPress,
|
||||||
|
siteTransformState: siteTransformState,
|
||||||
|
activeNodeId: activeNodeId,
|
||||||
|
nodeMatrixIndices: nodeMatrixIndices,
|
||||||
|
activeLevel: activeLevel,
|
||||||
|
selectedLevel: selectedLevel,
|
||||||
|
pauseMatrixIdx: pauseMatrixIdx,
|
||||||
|
activePauseComponent: activePauseComponent,
|
||||||
|
gameProgress: gameProgress,
|
||||||
|
currentSite: currentSite,
|
||||||
|
});
|
||||||
|
setEventState(event);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
props.loaded,
|
||||||
|
mainSubscene,
|
||||||
|
siteTransformState,
|
||||||
|
activeNodeId,
|
||||||
|
nodeMatrixIndices,
|
||||||
|
activeLevel,
|
||||||
|
selectedLevel,
|
||||||
|
pauseMatrixIdx,
|
||||||
|
activePauseComponent,
|
||||||
|
gameProgress,
|
||||||
|
currentSite,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener("keydown", handleKeyPress);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("keydown", handleKeyPress);
|
||||||
|
};
|
||||||
|
}, [handleKeyPress]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<NodeManager eventState={eventState!} />
|
||||||
|
<NodeHUDManager eventState={eventState!} />
|
||||||
|
<SiteManager eventState={eventState!} />
|
||||||
|
<LainManager eventState={eventState!} />
|
||||||
|
<MiddleRingManager eventState={eventState!} />
|
||||||
|
<SceneManager eventState={eventState!} />
|
||||||
|
<YellowTextManager eventState={eventState!} />
|
||||||
|
<LevelManager eventState={eventState!} />
|
||||||
|
<LevelSelectionManager eventState={eventState!} />
|
||||||
|
<SubsceneManager eventState={eventState!} />
|
||||||
|
<PauseComponentManager eventState={eventState!} />
|
||||||
|
<GameSaver eventState={eventState!} />
|
||||||
|
<GameLoader eventState={eventState!} />
|
||||||
|
<IdleManager eventState={eventState!} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainSceneEventManager;
|
|
@ -1,124 +0,0 @@
|
||||||
import { useCallback, useEffect } from "react";
|
|
||||||
import { StateManagerProps } from "../EventManager";
|
|
||||||
import node_huds from "../../../resources/node_huds.json";
|
|
||||||
import site_a from "../../../resources/site_a.json";
|
|
||||||
import { SiteType } from "../../../components/MainScene/SyncedComponents/Site";
|
|
||||||
import { useGreenTextStore, useSiteStore } from "../../../store";
|
|
||||||
import site_b from "../../../resources/site_b.json";
|
|
||||||
|
|
||||||
const GreenTextManager = (props: StateManagerProps) => {
|
|
||||||
const setGreenText = useGreenTextStore((state) => state.setText);
|
|
||||||
const toggleActive = useGreenTextStore((state) => state.toggleActive);
|
|
||||||
const setTransformState = useGreenTextStore(
|
|
||||||
(state) => state.setTransformState
|
|
||||||
);
|
|
||||||
|
|
||||||
const currentSite = useSiteStore((state) => state.currentSite);
|
|
||||||
|
|
||||||
const siteData = currentSite === "a" ? site_a : site_b;
|
|
||||||
|
|
||||||
const toggleAndSetGreenText = useCallback(
|
|
||||||
(
|
|
||||||
newActiveNodeId: string,
|
|
||||||
newActiveHudId: string,
|
|
||||||
newLevel: string,
|
|
||||||
delay: number,
|
|
||||||
shouldToggleAtStart: boolean
|
|
||||||
) => {
|
|
||||||
const targetGreenText =
|
|
||||||
newActiveNodeId === "UNKNOWN"
|
|
||||||
? ""
|
|
||||||
: (siteData as SiteType)[newLevel][newActiveNodeId].title;
|
|
||||||
|
|
||||||
const targetGreenTextPosData =
|
|
||||||
node_huds[newActiveHudId as keyof typeof node_huds].medium_text;
|
|
||||||
|
|
||||||
if (shouldToggleAtStart) toggleActive();
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setTransformState(
|
|
||||||
{
|
|
||||||
initial: targetGreenTextPosData.initial_position[0],
|
|
||||||
final: targetGreenTextPosData.position[0],
|
|
||||||
},
|
|
||||||
"posX"
|
|
||||||
);
|
|
||||||
setTransformState(targetGreenTextPosData.position[1], "posY");
|
|
||||||
setGreenText(targetGreenText);
|
|
||||||
toggleActive();
|
|
||||||
}, delay);
|
|
||||||
},
|
|
||||||
[setGreenText, setTransformState, siteData, toggleActive]
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
|
||||||
(eventState: {
|
|
||||||
event: string;
|
|
||||||
activeNodeId: string;
|
|
||||||
activeHudId: string;
|
|
||||||
level: string;
|
|
||||||
}) => {
|
|
||||||
switch (eventState.event) {
|
|
||||||
case "site_up":
|
|
||||||
case "site_down":
|
|
||||||
case "site_left":
|
|
||||||
case "site_right":
|
|
||||||
return {
|
|
||||||
action: toggleAndSetGreenText,
|
|
||||||
value: [
|
|
||||||
eventState.activeNodeId,
|
|
||||||
eventState.activeHudId,
|
|
||||||
eventState.level,
|
|
||||||
3900,
|
|
||||||
true,
|
|
||||||
],
|
|
||||||
};
|
|
||||||
case "change_node":
|
|
||||||
return {
|
|
||||||
action: toggleAndSetGreenText,
|
|
||||||
value: [
|
|
||||||
eventState.activeNodeId,
|
|
||||||
eventState.activeHudId,
|
|
||||||
eventState.level,
|
|
||||||
500,
|
|
||||||
true,
|
|
||||||
],
|
|
||||||
};
|
|
||||||
case "toggle_level_selection":
|
|
||||||
case "level_selection_back":
|
|
||||||
return {
|
|
||||||
action: toggleActive,
|
|
||||||
};
|
|
||||||
case "select_level_up":
|
|
||||||
case "select_level_down":
|
|
||||||
return {
|
|
||||||
action: toggleAndSetGreenText,
|
|
||||||
value: [
|
|
||||||
eventState.activeNodeId,
|
|
||||||
eventState.activeHudId,
|
|
||||||
eventState.level,
|
|
||||||
3900,
|
|
||||||
false,
|
|
||||||
],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[toggleActive, toggleAndSetGreenText]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (props.eventState) {
|
|
||||||
const dispatchedObject = dispatchObject(props.eventState);
|
|
||||||
|
|
||||||
if (dispatchedObject) {
|
|
||||||
(dispatchedObject.action as any).apply(
|
|
||||||
null,
|
|
||||||
dispatchedObject.value as any
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [props.eventState, dispatchObject]);
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GreenTextManager;
|
|
71
src/core/StateManagers/MediaSceneEventManager.tsx
Normal file
71
src/core/StateManagers/MediaSceneEventManager.tsx
Normal file
|
@ -0,0 +1,71 @@
|
||||||
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
|
import { useMediaStore, useMediaWordStore } from "../../store";
|
||||||
|
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||||
|
import SceneManager from "./GameManagers/SceneManager";
|
||||||
|
import handleMediaSceneEvent from "../mediaSceneEventHandler";
|
||||||
|
import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
|
||||||
|
import MediaYellowTextManager from "./MediaSceneManagers/MediaYellowTextManager";
|
||||||
|
|
||||||
|
const MediaSceneEventManager = () => {
|
||||||
|
// all the possible context needed to calculate new state
|
||||||
|
const mediaComponentMatrixIndices = useMediaStore(
|
||||||
|
(state) => state.componentMatrixIndices
|
||||||
|
);
|
||||||
|
|
||||||
|
const activeMediaComponent = useMediaStore(
|
||||||
|
useCallback(
|
||||||
|
(state) =>
|
||||||
|
state.componentMatrix[mediaComponentMatrixIndices.sideIdx][
|
||||||
|
mediaComponentMatrixIndices.sideIdx === 0
|
||||||
|
? mediaComponentMatrixIndices.leftSideIdx
|
||||||
|
: mediaComponentMatrixIndices.rightSideIdx
|
||||||
|
],
|
||||||
|
[mediaComponentMatrixIndices]
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const rightSideComponentIdx = useMediaStore(
|
||||||
|
(state) => state.componentMatrixIndices.rightSideIdx
|
||||||
|
);
|
||||||
|
|
||||||
|
const wordPosStateIdx = useMediaWordStore((state) => state.posStateIdx);
|
||||||
|
|
||||||
|
const [eventState, setEventState] = useState<any>();
|
||||||
|
|
||||||
|
const handleKeyPress = useCallback(
|
||||||
|
(event) => {
|
||||||
|
const { keyCode } = event;
|
||||||
|
|
||||||
|
const keyPress = getKeyCodeAssociation(keyCode);
|
||||||
|
|
||||||
|
if (keyPress) {
|
||||||
|
const event = handleMediaSceneEvent({
|
||||||
|
keyPress: keyPress,
|
||||||
|
activeMediaComponent: activeMediaComponent,
|
||||||
|
wordPosStateIdx: wordPosStateIdx,
|
||||||
|
rightSideComponentIdx: rightSideComponentIdx,
|
||||||
|
});
|
||||||
|
|
||||||
|
setEventState(event);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[activeMediaComponent, rightSideComponentIdx, wordPosStateIdx]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener("keydown", handleKeyPress);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("keydown", handleKeyPress);
|
||||||
|
};
|
||||||
|
}, [handleKeyPress]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MediaComponentManager eventState={eventState!} />
|
||||||
|
<SceneManager eventState={eventState!} />
|
||||||
|
<MediaYellowTextManager eventState={eventState!} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MediaSceneEventManager;
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useMediaBigTextStore } from "../../store";
|
import { useMediaBigTextStore } from "../../../store";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
|
|
||||||
const MediaYellowTextManager = (props: StateManagerProps) => {
|
const MediaYellowTextManager = (props: StateManagerProps) => {
|
||||||
const setTransformState = useMediaBigTextStore(
|
const setTransformState = useMediaBigTextStore(
|
55
src/core/StateManagers/SSknSceneManager.tsx
Normal file
55
src/core/StateManagers/SSknSceneManager.tsx
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
|
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
|
||||||
|
import SceneManager from "./GameManagers/SceneManager";
|
||||||
|
import handleSSknSceneEvent from "../ssknSceneEventHandler";
|
||||||
|
import { useSSknStore } from "../../store";
|
||||||
|
import SSknComponentManager from "./SSknSceneManagers/SSknComponentManager";
|
||||||
|
|
||||||
|
const SSknSceneManager = () => {
|
||||||
|
// all the possible context needed to calculate new state
|
||||||
|
const ssknComponentMatrixIdx = useSSknStore(
|
||||||
|
(state) => state.componentMatrixIdx
|
||||||
|
);
|
||||||
|
const activeSSknComponent = useSSknStore(
|
||||||
|
useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
|
||||||
|
ssknComponentMatrixIdx,
|
||||||
|
])
|
||||||
|
);
|
||||||
|
|
||||||
|
const [eventState, setEventState] = useState<any>();
|
||||||
|
|
||||||
|
const handleKeyPress = useCallback(
|
||||||
|
(event) => {
|
||||||
|
const { keyCode } = event;
|
||||||
|
|
||||||
|
const keyPress = getKeyCodeAssociation(keyCode);
|
||||||
|
|
||||||
|
if (keyPress) {
|
||||||
|
const event = handleSSknSceneEvent({
|
||||||
|
keyPress: keyPress,
|
||||||
|
activeSSknComponent: activeSSknComponent,
|
||||||
|
});
|
||||||
|
|
||||||
|
setEventState(event);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[activeSSknComponent]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener("keydown", handleKeyPress);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("keydown", handleKeyPress);
|
||||||
|
};
|
||||||
|
}, [handleKeyPress]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SceneManager eventState={eventState!} />
|
||||||
|
<SSknComponentManager eventState={eventState!} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SSknSceneManager;
|
|
@ -1,6 +1,6 @@
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { StateManagerProps } from "./EventManager";
|
import { StateManagerProps } from "../EventManager";
|
||||||
import { useMediaStore, useSSknStore } from "../../store";
|
import { useMediaStore, useSSknStore } from "../../../store";
|
||||||
|
|
||||||
const SSknComponentManager = (props: StateManagerProps) => {
|
const SSknComponentManager = (props: StateManagerProps) => {
|
||||||
const toggleComponentMatrixIdx = useSSknStore(
|
const toggleComponentMatrixIdx = useSSknStore(
|
14
src/core/utils/keyPressUtils.ts
Normal file
14
src/core/utils/keyPressUtils.ts
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
export const getKeyCodeAssociation = (keyCode: number) => {
|
||||||
|
const keyCodeAssocs = {
|
||||||
|
40: "DOWN", // down arrow
|
||||||
|
37: "LEFT", // left arrow
|
||||||
|
38: "UP", // up arrow
|
||||||
|
39: "RIGHT", // right arrow
|
||||||
|
88: "CIRCLE", // x key
|
||||||
|
90: "X", // z key
|
||||||
|
68: "TRIANGLE", // d key
|
||||||
|
69: "L2", // e key
|
||||||
|
32: "SPACE",
|
||||||
|
};
|
||||||
|
return keyCodeAssocs[keyCode as keyof typeof keyCodeAssocs];
|
||||||
|
};
|
|
@ -4,6 +4,7 @@ import { OrbitControls } from "@react-three/drei";
|
||||||
import GateHUD from "../components/GateScene/GateHUD";
|
import GateHUD from "../components/GateScene/GateHUD";
|
||||||
import GateMiddleObject from "../components/GateScene/GateMiddleObject";
|
import GateMiddleObject from "../components/GateScene/GateMiddleObject";
|
||||||
import { useGateStore } from "../store";
|
import { useGateStore } from "../store";
|
||||||
|
import GateSceneManager from "../core/StateManagers/GateSceneManager";
|
||||||
|
|
||||||
const GateScene = () => {
|
const GateScene = () => {
|
||||||
const gateLvl = useGateStore((state) => state.gateLvl);
|
const gateLvl = useGateStore((state) => state.gateLvl);
|
||||||
|
@ -22,6 +23,7 @@ const GateScene = () => {
|
||||||
<GateSide />
|
<GateSide />
|
||||||
<GateHUD intro={introAnim} gateLvl={gateLvl} />
|
<GateHUD intro={introAnim} gateLvl={gateLvl} />
|
||||||
<GateMiddleObject intro={introAnim} gateLvl={gateLvl} />
|
<GateMiddleObject intro={introAnim} gateLvl={gateLvl} />
|
||||||
|
<GateSceneManager />
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -19,6 +19,7 @@ import site_a from "../resources/site_a.json";
|
||||||
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
import { SiteType } from "../components/MainScene/SyncedComponents/Site";
|
||||||
import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
|
import MediaYellowTextAnimator from "../components/TextRenderer/MediaYellowTextAnimator";
|
||||||
import site_b from "../resources/site_b.json";
|
import site_b from "../resources/site_b.json";
|
||||||
|
import MediaSceneEventManager from "../core/StateManagers/MediaSceneEventManager";
|
||||||
|
|
||||||
const MediaScene = () => {
|
const MediaScene = () => {
|
||||||
const currentScene = useSceneStore((state) => state.currentScene);
|
const currentScene = useSceneStore((state) => state.currentScene);
|
||||||
|
@ -91,6 +92,7 @@ const MediaScene = () => {
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
</group>
|
</group>
|
||||||
|
<MediaSceneEventManager />
|
||||||
</perspectiveCamera>
|
</perspectiveCamera>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,6 +3,7 @@ import SSknIcon from "../components/SSknScene/SSknIcon";
|
||||||
import SSknBackground from "../components/SSknScene/SSknBackground";
|
import SSknBackground from "../components/SSknScene/SSknBackground";
|
||||||
import SSknHUD from "../components/SSknScene/SSknHUD";
|
import SSknHUD from "../components/SSknScene/SSknHUD";
|
||||||
import { useMediaStore, useSSknStore } from "../store";
|
import { useMediaStore, useSSknStore } from "../store";
|
||||||
|
import SSknSceneManager from "../core/StateManagers/SSknSceneManager";
|
||||||
|
|
||||||
const SSknScene = () => {
|
const SSknScene = () => {
|
||||||
const ssknComponentMatrixIdx = useSSknStore(
|
const ssknComponentMatrixIdx = useSSknStore(
|
||||||
|
@ -21,6 +22,7 @@ const SSknScene = () => {
|
||||||
<SSknBackground />
|
<SSknBackground />
|
||||||
<SSknIcon />
|
<SSknIcon />
|
||||||
<SSknHUD activeSSknComponent={activeSSknComponent} loading={loading} />
|
<SSknHUD activeSSknComponent={activeSSknComponent} loading={loading} />
|
||||||
|
<SSknSceneManager />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue