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

almost done with main scene store refactor

Browse source
This commit is contained in:
ad044 2021-01-22 21:56:29 +04:00
parent 2bde067cec
commit c771fe2e33
23 changed files with 604 additions and 718 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/MainScene/SyncedComponents/GrayPlanes.tsx
View file

@ -1,36 +1,11 @@
import React, { useMemo, useRef } from "react";
import React, { useMemo, useRef, memo } from "react";
import * as THREE from "three";
import { useFrame } from "react-three-fiber";
import GrayPlane from "./GrayPlanes/GrayPlane";
const GrayPlanes = () => {
const GrayPlanes = memo(() => {
const grayPlaneGroupRef = useRef<THREE.Object3D>();
const grayPlanesGeom = useMemo(() => {
const singleGeom = new THREE.Geometry();
const grayPlanePoses = [
[1.2, 0, -1.2],
[1.2, 0, 1.2],
[1.2, 0, -0.5],
[-1.2, 0, -1.2],
[-1.2, 0, 1.2],
[-1.2, 0, 1],
[0.5, 0, 1],
];
for (let i = 0; i < grayPlanePoses.length; i++) {
const mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry());
mesh.position.set(
grayPlanePoses[i][0],
grayPlanePoses[i][1],
grayPlanePoses[i][2]
);
}
return singleGeom;
}, []);
const grayPlanePoses = useMemo(
() => [
[1.2, 0, -1.2],
@ -53,17 +28,8 @@ const GrayPlanes = () => {
{grayPlanePoses.map((pos, idx: number) => (
<GrayPlane position={pos as [number, number, number]} key={idx} />
))}
{/*<mesh geometry={grayPlanesGeom}>*/}
{/* <meshBasicMaterial*/}
{/* attach="material"*/}
{/* color={0xd3d3d3}*/}
{/* opacity={0.2}*/}
{/* transparent={true}*/}
{/* side={THREE.DoubleSide}*/}
{/* />*/}
{/*</mesh>*/}
</group>
);
};
});
export default GrayPlanes;

3
src/components/MainScene/SyncedComponents/HUD.tsx
View file

@ -10,6 +10,7 @@ import boringHudMirrored from "../../../static/sprite/long_hud_boring_mirrored.p
import { a, useSpring } from "@react-spring/three";
import { useMainSceneStore } from "../../../store";
import MediumLetter from "../../TextRenderer/MediumLetter";
import { NodeDataType } from "./Site";
export type HUDType = {
mirrored: number;
@ -36,7 +37,7 @@ const HUD = () => {
const greenText = useMainSceneStore((state) =>
state.activeNode.title.split("")
);
const active = useMainSceneStore((state) => state.hudActive);
const active = useMainSceneStore((state) => Number(state.hudActive));
const currentHud = useMainSceneStore((state) => state.hud);
const hudElementState = useSpring({

31
src/components/MainScene/SyncedComponents/MiddleRing.tsx
View file

@ -3,31 +3,36 @@ import { useFrame, useLoader } from "react-three-fiber";
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
import * as THREE from "three";
import { a, useSpring } from "@react-spring/three";
import { useMiddleRingStore } from "../../../store";
import { useMainSceneStore } from "../../../store";
import MiddleRingPart from "./MiddleRing/MiddleRingPart";
const MiddleRing = () => {
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
const transformState = useMiddleRingStore((state) => state.transformState);
const rotating = useMiddleRingStore((state) => state.isRotating);
const animDuration = useMiddleRingStore((state) => state.animDuration);
const mainRingVisible = useMiddleRingStore((state) => state.mainRingVisible);
const pos = useMainSceneStore((state) => state.middleRingPos);
const rot = useMainSceneStore((state) => state.middleRingRot);
const wobbleAmp = useMainSceneStore((state) => state.middleRingWobbleAmp);
const noiseAmp = useMainSceneStore((state) => state.middleRingNoiseAmp);
const rotating = useMainSceneStore((state) => state.middleRingRotating);
const mainRingVisible = useMainSceneStore(
(state) => !state.fakeMiddleRingVisible
);
const wobbleState = useSpring({
wobbleStrength: transformState.wobbleStrength,
noiseStrength: transformState.noiseStrength,
wobbleStrength: wobbleAmp,
noiseStrength: noiseAmp,
config: { duration: 200 },
});
const posState = useSpring({
posY: transformState.posY,
config: { duration: animDuration },
posY: pos[1],
config: { duration: 600 },
});
const rotState = useSpring({
rotX: transformState.rotX,
rotZ: transformState.rotZ,
rotX: rot[0],
rotZ: rot[2],
config: { duration: 1000 },
});
@ -229,7 +234,7 @@ const MiddleRing = () => {
/>
</a.mesh>
{!mainRingVisible ? (
{!mainRingVisible && (
<group
rotation={[0, 0.9, 0]}
ref={middleRingPartRef}
@ -246,8 +251,6 @@ const MiddleRing = () => {
);
})}
</group>
) : (
<></>
)}
</a.group>
);

32
src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx
View file

@ -1,9 +1,9 @@
import React, { useMemo } from "react";
import React, { useEffect, useMemo } from "react";
import middleRingTexture from "../../../../static/sprite/middle_ring_tex.png";
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
import { a, useSpring } from "@react-spring/three";
import { useMiddleRingStore } from "../../../../store";
import { useMainSceneStore } from "../../../../store";
type MiddleRingPartProps = {
position: number[];
@ -11,10 +11,6 @@ type MiddleRingPartProps = {
};
const MiddleRingPart = (props: MiddleRingPartProps) => {
const partSeparatorVal = useMiddleRingStore(
(state) => state.partSeparatorVal
);
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
const middleRingPartTex = useMemo(() => {
@ -22,16 +18,28 @@ const MiddleRingPart = (props: MiddleRingPartProps) => {
return middleRingTex;
}, [middleRingTex]);
const partPosState = useSpring({
posX: props.position[0] / partSeparatorVal,
posZ: props.position[2] / partSeparatorVal,
const [{ posX, posZ }, set] = useSpring(() => ({
posX:
props.position[0] /
useMainSceneStore.getState().middleRingPartSeparatorVal,
posZ:
props.position[2] /
useMainSceneStore.getState().middleRingPartSeparatorVal,
config: { duration: 600 },
});
}));
useEffect(() => {
useMainSceneStore.subscribe(set, (state) => ({
posX: props.position[0] / state.middleRingPartSeparatorVal,
posZ: props.position[2] / state.middleRingPartSeparatorVal,
}));
}, [props.position, set]);
return (
<a.group
position-x={partPosState.posX}
position-z={partPosState.posZ}
position-x={posX}
position-z={posZ}
position-y={props.position[1]}
rotation={props.rotation as [number, number, number]}
>

50
src/components/MainScene/SyncedComponents/Site.tsx
View file

@ -1,15 +1,16 @@
import React, { Suspense, useMemo } from "react";
import React, { Suspense, useEffect, useMemo } from "react";
import { a, useSpring } from "@react-spring/three";
import { useLevelStore, useMainSceneStore, useSiteStore } from "../../../store";
import { useMainSceneStore } from "../../../store";
import ActiveLevelNodes from "./Site/ActiveLevelNodes";
import InactiveLevelNodes from "./Site/InactiveLevelNodes";
import Rings from "./Site/Rings";
import site_a from "../../../resources/site_a.json";
import site_b from "../../../resources/site_b.json";
import game_progress from "../../../resources/initial_progress.json";
import NodeAnimations from "./Site/NodeAnimations";
import InactiveLevelNodes from "./Site/InactiveLevelNodes";
export type NodeDataType = {
id: string;
image_table_indices: { 1: string; 2: string; 3: string };
triggers_final_video: number;
required_final_video_viewcount: number;
@ -32,25 +33,18 @@ export type SiteType = {
[key: string]: LevelType;
};
export type NodesProps = {
currentSite: "a" | "b";
activeLevel: string;
siteData: typeof site_a | typeof site_b;
gameProgress: typeof game_progress;
};
type SiteProps = {
shouldIntro: boolean;
introFinished: boolean;
};
const Site = (props: SiteProps) => {
const siteTransformState = useSiteStore((state) => state.transformState);
const siteRot = useMainSceneStore((state) => state.siteRot);
const sitePos = useMainSceneStore((state) => state.sitePos);
const siteState = useSpring({
siteRotY: siteTransformState.rotY,
sitePosY: siteTransformState.posY,
siteRotX: siteTransformState.rotX,
siteRotX: siteRot[0],
siteRotY: siteRot[1],
sitePosY: sitePos[1],
config: { duration: 1200 },
});
@ -64,16 +58,6 @@ const Site = (props: SiteProps) => {
config: { duration: 3400 },
});
const gameProgress = useMainSceneStore((state) => state.gameProgress);
const currentSite = useSiteStore((state) => state.currentSite);
const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
currentSite,
]);
const activeLevel = useLevelStore((state) => state.activeLevel);
return (
<Suspense fallback={null}>
<a.group
@ -85,22 +69,10 @@ const Site = (props: SiteProps) => {
rotation-y={siteState.siteRotY}
position-y={siteState.sitePosY}
>
<ActiveLevelNodes
currentSite={currentSite}
activeLevel={activeLevel}
siteData={siteData}
gameProgress={gameProgress}
/>
<InactiveLevelNodes
currentSite={currentSite}
activeLevel={activeLevel}
siteData={siteData}
gameProgress={gameProgress}
/>
<ActiveLevelNodes />
<InactiveLevelNodes />
<NodeAnimations />
<Rings
currentSite={currentSite}
activeLevel={activeLevel}
activateAllRings={props.shouldIntro ? props.introFinished : true}
/>
</a.group>

31
src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx
View file

@ -1,26 +1,33 @@
import React, { useEffect, useMemo } from "react";
import React, { useMemo } from "react";
import Node from "./Node";
import node_positions from "../../../../resources/node_positions.json";
import { useMainSceneStore } from "../../../../store";
import { isNodeVisible } from "../../../../core/nodeSelector";
import { NodesProps } from "../Site";
import site_a from "../../../../resources/site_a.json";
import site_b from "../../../../resources/site_b.json";
const ActiveLevelNodes = (props: NodesProps) => {
const ActiveLevelNodes = () => {
const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
const activeLevelNodes = useMemo(
() => props.siteData[props.activeLevel as keyof typeof props.siteData],
[props]
);
const gameProgress = useMainSceneStore((state) => state.gameProgress);
useEffect(() => {
console.log(activeNodeId);
}, [activeNodeId]);
const currentSite = useMainSceneStore((state) => state.activeSite);
const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
currentSite,
]);
const activeLevel = useMainSceneStore((state) => state.activeLevel);
const visibleNodes = useMemo(
() => siteData[activeLevel as keyof typeof siteData],
[activeLevel, siteData]
);
return (
<>
{Object.entries(activeLevelNodes).map((node: [string, any]) => {
if (isNodeVisible(node[1], props.gameProgress)) {
{Object.entries(visibleNodes).map((node: [string, any]) => {
if (isNodeVisible(node[1], gameProgress)) {
return (
<Node
nodeName={node[1].node_name}

30
src/components/MainScene/SyncedComponents/Site/InactiveLevelNodes.tsx
View file

@ -1,13 +1,25 @@
import React, { useMemo, memo } from "react";
import node_positions from "../../../../resources/node_positions.json";
import React, { useMemo } from "react";
import Node from "./Node";
import node_positions from "../../../../resources/node_positions.json";
import { useMainSceneStore } from "../../../../store";
import { isNodeVisible } from "../../../../core/nodeSelector";
import { NodesProps } from "../Site";
import site_a from "../../../../resources/site_a.json";
import site_b from "../../../../resources/site_b.json";
const InactiveLevelNodes = () => {
const gameProgress = useMainSceneStore((state) => state.gameProgress);
const currentSite = useMainSceneStore((state) => state.activeSite);
const siteData = useMemo(() => (currentSite === "a" ? site_a : site_b), [
currentSite,
]);
const activeLevel = useMainSceneStore((state) => state.activeLevel);
const InactiveLevelNodes = memo((props: NodesProps) => {
const visibleNodes = useMemo(() => {
const obj = {};
const activeLevelNr = parseInt(props.activeLevel);
const activeLevelNr = parseInt(activeLevel);
const visibleLevels = [
(activeLevelNr - 2).toString().padStart(2, "0"),
(activeLevelNr - 1).toString().padStart(2, "0"),
@ -16,16 +28,16 @@ const InactiveLevelNodes = memo((props: NodesProps) => {
];
visibleLevels.forEach((level) => {
Object.assign(obj, props.siteData[level as keyof typeof props.siteData]);
Object.assign(obj, siteData[level as keyof typeof siteData]);
});
return obj;
}, [props]);
}, [activeLevel, siteData]);
return (
<>
{Object.entries(visibleNodes).map((node: [string, any]) => {
if (isNodeVisible(node[1], props.gameProgress)) {
if (isNodeVisible(node[1], gameProgress)) {
return (
<Node
nodeName={node[1].node_name}
@ -45,6 +57,6 @@ const InactiveLevelNodes = memo((props: NodesProps) => {
})}
</>
);
});
};
export default InactiveLevelNodes;

50
src/components/MainScene/SyncedComponents/Site/Node.tsx
View file

@ -1,6 +1,6 @@
import React, { memo, useEffect, useMemo, useRef } from "react";
import { useFrame, useLoader } from "react-three-fiber";
import { a, useSpring, interpolate } from "@react-spring/three";
import { a, useSpring } from "@react-spring/three";
import * as THREE from "three";
import Cou from "../../../../static/sprite/Cou.png";
import CouActive from "../../../../static/sprite/Cou_active.png";
@ -102,11 +102,20 @@ const Node = memo((props: NodeContructorProps) => {
`;
const [
{ activeNodePos, activeNodeRot, activeNodeScale, activeNodeVisible },
{
activeNodePosX,
activeNodePosY,
activeNodePosZ,
activeNodeRotZ,
activeNodeVisible,
activeNodeScale,
},
set,
] = useSpring(() => ({
activeNodePos: props.position,
activeNodeRot: [0, 0, 0],
activeNodePosX: props.position[0],
activeNodePosY: props.position[1],
activeNodePosZ: props.position[2],
activeNodeRotZ: 0,
activeNodeScale: 1,
activeNodeVisible: true,
config: { duration: 800 },
@ -114,16 +123,30 @@ const Node = memo((props: NodeContructorProps) => {
useEffect(() => {
useMainSceneStore.subscribe(set, (state) => ({
activeNodePos: state.activeNodeState.interactedWith
? state.activeNodePos
: props.position,
activeNodeRot: state.activeNodeState.interactedWith
? state.activeNodeState.rotZ
activeNodePosX: state.activeNodeState.interactedWith
? state.activeNodePos[0]
: props.position[0],
activeNodePosY: state.activeNodeState.interactedWith
? state.activeNodePos[1]
: props.position[1],
activeNodePosZ: state.activeNodeState.interactedWith
? state.activeNodePos[2]
: props.position[2],
activeNodeRotZ: state.activeNodeState.interactedWith
? state.activeNodeRot[2]
: 0,
activeNodeScale: state.activeNodeState.shrinking ? 0 : 1,
activeNodeVisible: state.activeNodeState.visible,
}));
}, [props.level, props.position, set, props.rotation]);
}, [
props.level,
activeNodePosX,
activeNodePosZ,
activeNodeRotZ,
props.position,
set,
props.rotation,
]);
useFrame(() => {
if (materialRef.current) {
@ -147,9 +170,10 @@ const Node = memo((props: NodeContructorProps) => {
scale-z={activeNodeScale}
>
<a.mesh
position-x={activeNodePos.interpolate((x, y, z) => x)}
position-y={activeNodePos.interpolate((x, y, z) => y)}
position-z={activeNodePos.interpolate((x, y, z) => z)}
position-x={activeNodePosX}
position-y={activeNodePosY}
position-z={activeNodePosZ}
rotation-z={activeNodeRotZ}
rotation-y={props.rotation[1]}
visible={activeNodeVisible}
scale={[0.36, 0.18, 0.36]}

16
src/components/MainScene/SyncedComponents/Site/Rings.tsx
View file

@ -3,14 +3,16 @@ import level_y_values from "../../../../resources/level_y_values.json";
import PurpleRing from "./PurpleRing";
import GrayRing from "./GrayRing";
import CyanCrystal from "./CyanCrystal";
import { useMainSceneStore } from "../../../../store";
type RingsProps = {
currentSite: string;
activeLevel: string;
activateAllRings: boolean;
};
const Rings = (props: RingsProps) => {
const activeLevel = useMainSceneStore((state) => state.activeLevel);
const currentSite = useMainSceneStore((state) => state.activeSite);
const visibleRings = useMemo(() => {
const rings: [string, number][] = [];
if (props.activateAllRings) {
@ -18,7 +20,7 @@ const Rings = (props: RingsProps) => {
rings.push([levelDataPair[0], levelDataPair[1]]);
});
} else {
const activeLevelNr = parseInt(props.activeLevel);
const activeLevelNr = parseInt(activeLevel);
const visibleLevels = [
(activeLevelNr - 2).toString().padStart(2, "0"),
(activeLevelNr - 1).toString().padStart(2, "0"),
@ -35,21 +37,21 @@ const Rings = (props: RingsProps) => {
});
}
return rings;
}, [props.activateAllRings, props.activeLevel]);
}, [props.activateAllRings, activeLevel]);
return (
<>
{visibleRings.map((level: [string, number]) => {
if (
(props.currentSite === "b" && parseInt(level[0]) <= 13) ||
props.currentSite === "a"
(currentSite === "b" && parseInt(level[0]) <= 13) ||
currentSite === "a"
) {
return (
<group position={[0, level[1], 0]} key={level[0]}>
<PurpleRing
purpleRingPosY={0.44}
level={level[0]}
site={props.currentSite}
site={currentSite}
/>
<GrayRing grayRingPosY={-0.29} />
<CyanCrystal crystalRingPosY={-0.45} />

5
src/components/MediaScene/Images.tsx
View file

@ -4,7 +4,6 @@ import {
useMainSceneStore,
useMediaStore,
useSceneStore,
useSiteStore,
} from "../../store";
import { a, useSpring } from "@react-spring/three";
import dummy from "../../static/sprite/dummy.png";
@ -14,7 +13,7 @@ import { useLoader } from "react-three-fiber";
const Images = () => {
const idleNodeImages = useIdleStore((state) => state.images);
const nodeImages = useMainSceneStore(
(state) => state.activeNodeState.image_table_indices
(state) => state.activeNode.image_table_indices
);
const currentScene = useSceneStore((state) => state.currentScene);
@ -23,7 +22,7 @@ const Images = () => {
const [sceneImages, setSceneImages] = useState([] as any);
const [activeImage, setActiveImage] = useState<THREE.Texture>();
const currentSite = useSiteStore((state) => state.currentSite);
const currentSite = useMainSceneStore((state) => state.activeSite);
const dummyTex = useLoader(THREE.TextureLoader, dummy);

3
src/components/MediaScene/MediaPlayer.tsx
View file

@ -12,7 +12,6 @@ import {
useMainSceneStore,
useMediaStore,
useSceneStore,
useSiteStore,
} from "../../store";
import t from "../../static/webvtt/test.vtt";
import endroll from "../../static/movie/ENDROLL1.STR[0].webm";
@ -39,7 +38,7 @@ const MediaPlayer = () => {
const requestRef = useRef();
const videoRef = createRef<HTMLVideoElement>();
const currentSite = useSiteStore((state) => state.currentSite);
const currentSite = useMainSceneStore((state) => state.activeSite);
// end scene specific stuff
const endMediaPlayedCount = useEndSceneStore(

1
src/components/TextRenderer/BigLetter.tsx
View file

@ -84,7 +84,6 @@ const BigLetter = memo(
config: { duration: 200 },
});
console.log('rend')
return (
<a.mesh
position-x={letterState.xOffset}

475
src/core/StateManagers/EventManager.tsx
View file

@ -8,13 +8,11 @@ import {
useAuthorizeUserStore,
useBootStore,
useLevelSelectionStore,
useLevelStore,
useMainSceneStore,
useMediaStore,
useMediaWordStore,
usePauseStore,
useSceneStore,
useSiteStore,
useSSknStore,
} from "../../store";
import MediaComponentManager from "./MediaSceneManagers/MediaComponentManager";
@ -57,242 +55,243 @@ export type StateManagerProps = {
};
const EventManager = () => {
const currentScene = useSceneStore((state) => state.currentScene);
// main scene
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);
// media scene
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);
// sskn scene
const ssknComponentMatrixIdx = useSSknStore(
(state) => state.componentMatrixIdx
);
const activeSSknComponent = useSSknStore(
useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
ssknComponentMatrixIdx,
])
);
// boot scene
const currentBootSubscene = useBootStore((state) => state.subscene);
const activeBootElement = useBootStore(
useCallback(
(state) =>
state.componentMatrix[
currentBootSubscene as keyof typeof state.componentMatrix
][
state.componentMatrixIndices[
currentBootSubscene as keyof typeof state.componentMatrixIndices
]
],
[currentBootSubscene]
)
);
const authorizeUserBgLettersPos = useAuthorizeUserStore(
(state) => state.bgLettersPos
);
const authorizeUserActiveLetterTexOffset = useAuthorizeUserStore(
(state) => state.activeLetterTextureOffset
);
const authorizeUserMatrixIdx = useBootStore(
(state) => state.componentMatrixIndices.authorize_user
);
const [eventState, setEventState] = useState<any>();
const [inputCooldown, setInputCooldown] = useState(false);
const timePassedSinceLastKeyPress = useRef(-1);
useFrame(() => {
const now = Date.now();
if (
timePassedSinceLastKeyPress.current > -1 &&
mainSubscene !== "pause" &&
mainSubscene !== "level_selection" &&
currentScene === "main"
) {
if (now > timePassedSinceLastKeyPress.current + 10000) {
const moves = [
"prayer",
"touch_sleeve",
"thinking",
"stretch_2",
"stretch",
"spin",
"scratch_head",
"blush",
"hands_behind_head",
"hands_on_hips",
"hands_on_hips_2",
"hands_together",
"lean_forward",
"lean_left",
"lean_right",
"look_around",
"play_with_hair",
];
const event = moves[Math.floor(Math.random() * moves.length)];
setEventState({ event: event });
timePassedSinceLastKeyPress.current = now - 2500;
}
if (now > timePassedSinceLastKeyPress.current + 5000) {
setEventState({
event: "play_idle_media",
scene: "idle_media",
site: currentSite,
});
timePassedSinceLastKeyPress.current = -1;
}
}
});
const handleKeyPress = useCallback(
(event) => {
const { keyCode } = event;
const keyPress = getKeyCodeAssociation(keyCode);
if (keyPress && !inputCooldown) {
let event;
switch (currentScene) {
case "main":
timePassedSinceLastKeyPress.current = Date.now() + 2500;
event = handleMainSceneEvent({
mainSubscene: mainSubscene,
keyPress: keyPress,
siteTransformState: siteTransformState,
// activeNodeId: activeNodeId,
// nodeMatrixIndices: nodeMatrixIndices,
activeLevel: activeLevel,
selectedLevel: selectedLevel,
pauseMatrixIdx: pauseMatrixIdx,
activePauseComponent: activePauseComponent,
// gameProgress: gameProgress,
currentSite: currentSite,
});
break;
case "media":
case "idle_media":
event = handleMediaSceneEvent({
keyPress: keyPress,
activeMediaComponent: activeMediaComponent,
wordPosStateIdx: wordPosStateIdx,
rightSideComponentIdx: rightSideComponentIdx,
});
break;
case "boot":
event = handleBootEvent({
keyPress: keyPress,
bootSubscene: currentBootSubscene,
activeBootElement: activeBootElement,
authorizeUserBgLettersPos: authorizeUserBgLettersPos,
authorizeUserActiveLetterTexOffset: authorizeUserActiveLetterTexOffset,
authorizeUserMatrixIdx: authorizeUserMatrixIdx,
});
break;
case "gate":
event = { event: "exit_gate" };
break;
case "sskn":
event = handleSSknSceneEvent({
keyPress: keyPress,
activeSSknComponent: activeSSknComponent,
});
break;
}
setEventState(event);
}
},
[
inputCooldown,
currentScene,
mainSubscene,
siteTransformState,
activeLevel,
selectedLevel,
pauseMatrixIdx,
activePauseComponent,
currentSite,
activeMediaComponent,
wordPosStateIdx,
rightSideComponentIdx,
currentBootSubscene,
activeBootElement,
authorizeUserBgLettersPos,
authorizeUserActiveLetterTexOffset,
authorizeUserMatrixIdx,
activeSSknComponent,
]
);
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!} />
<MediaComponentManager eventState={eventState!} />
<SceneManager eventState={eventState!} />
<BigTextManager eventState={eventState!} />
<LevelManager eventState={eventState!} />
<BootComponentManager eventState={eventState!} />
<SSknComponentManager eventState={eventState!} />
<BootAuthorizeUserManager eventState={eventState!} />
<LevelSelectionManager eventState={eventState!} />
<SubsceneManager eventState={eventState!} />
<PauseComponentManager eventState={eventState!} />
<MediaYellowTextManager eventState={eventState!} />
<GameSaver eventState={eventState!} />
<GameLoader eventState={eventState!} />
<IdleManager eventState={eventState!} />
</>
);
// const currentScene = useSceneStore((state) => state.currentScene);
//
// // main scene
// 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);
//
// // media scene
// 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);
//
// // sskn scene
// const ssknComponentMatrixIdx = useSSknStore(
// (state) => state.componentMatrixIdx
// );
// const activeSSknComponent = useSSknStore(
// useCallback((state) => state.componentMatrix[ssknComponentMatrixIdx], [
// ssknComponentMatrixIdx,
// ])
// );
//
// // boot scene
// const currentBootSubscene = useBootStore((state) => state.subscene);
// const activeBootElement = useBootStore(
// useCallback(
// (state) =>
// state.componentMatrix[
// currentBootSubscene as keyof typeof state.componentMatrix
// ][
// state.componentMatrixIndices[
// currentBootSubscene as keyof typeof state.componentMatrixIndices
// ]
// ],
// [currentBootSubscene]
// )
// );
//
// const authorizeUserBgLettersPos = useAuthorizeUserStore(
// (state) => state.bgLettersPos
// );
// const authorizeUserActiveLetterTexOffset = useAuthorizeUserStore(
// (state) => state.activeLetterTextureOffset
// );
// const authorizeUserMatrixIdx = useBootStore(
// (state) => state.componentMatrixIndices.authorize_user
// );
//
// const [eventState, setEventState] = useState<any>();
//
// const [inputCooldown, setInputCooldown] = useState(false);
//
// const timePassedSinceLastKeyPress = useRef(-1);
//
// useFrame(() => {
// const now = Date.now();
// if (
// timePassedSinceLastKeyPress.current > -1 &&
// mainSubscene !== "pause" &&
// mainSubscene !== "level_selection" &&
// currentScene === "main"
// ) {
// if (now > timePassedSinceLastKeyPress.current + 10000) {
// const moves = [
// "prayer",
// "touch_sleeve",
// "thinking",
// "stretch_2",
// "stretch",
// "spin",
// "scratch_head",
// "blush",
// "hands_behind_head",
// "hands_on_hips",
// "hands_on_hips_2",
// "hands_together",
// "lean_forward",
// "lean_left",
// "lean_right",
// "look_around",
// "play_with_hair",
// ];
//
// const event = moves[Math.floor(Math.random() * moves.length)];
// setEventState({ event: event });
// timePassedSinceLastKeyPress.current = now - 2500;
// }
// if (now > timePassedSinceLastKeyPress.current + 5000) {
// setEventState({
// event: "play_idle_media",
// scene: "idle_media",
// site: currentSite,
// });
// timePassedSinceLastKeyPress.current = -1;
// }
// }
// });
//
// const handleKeyPress = useCallback(
// (event) => {
// const { keyCode } = event;
//
// const keyPress = getKeyCodeAssociation(keyCode);
//
// if (keyPress && !inputCooldown) {
// let event;
// switch (currentScene) {
// case "main":
// timePassedSinceLastKeyPress.current = Date.now() + 2500;
// event = handleMainSceneEvent({
// mainSubscene: mainSubscene,
// keyPress: keyPress,
// siteTransformState: siteTransformState,
// // activeNodeId: activeNodeId,
// // nodeMatrixIndices: nodeMatrixIndices,
// activeLevel: activeLevel,
// selectedLevel: selectedLevel,
// pauseMatrixIdx: pauseMatrixIdx,
// activePauseComponent: activePauseComponent,
// // gameProgress: gameProgress,
// currentSite: currentSite,
// });
// break;
// case "media":
// case "idle_media":
// event = handleMediaSceneEvent({
// keyPress: keyPress,
// activeMediaComponent: activeMediaComponent,
// wordPosStateIdx: wordPosStateIdx,
// rightSideComponentIdx: rightSideComponentIdx,
// });
// break;
// case "boot":
// event = handleBootEvent({
// keyPress: keyPress,
// bootSubscene: currentBootSubscene,
// activeBootElement: activeBootElement,
// authorizeUserBgLettersPos: authorizeUserBgLettersPos,
// authorizeUserActiveLetterTexOffset: authorizeUserActiveLetterTexOffset,
// authorizeUserMatrixIdx: authorizeUserMatrixIdx,
// });
// break;
// case "gate":
// event = { event: "exit_gate" };
// break;
// case "sskn":
// event = handleSSknSceneEvent({
// keyPress: keyPress,
// activeSSknComponent: activeSSknComponent,
// });
// break;
// }
// setEventState(event);
// }
// },
// [
// inputCooldown,
// currentScene,
// mainSubscene,
// siteTransformState,
// activeLevel,
// selectedLevel,
// pauseMatrixIdx,
// activePauseComponent,
// currentSite,
// activeMediaComponent,
// wordPosStateIdx,
// rightSideComponentIdx,
// currentBootSubscene,
// activeBootElement,
// authorizeUserBgLettersPos,
// authorizeUserActiveLetterTexOffset,
// authorizeUserMatrixIdx,
// activeSSknComponent,
// ]
// );
//
// 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!} />
// <MediaComponentManager eventState={eventState!} />
// <SceneManager eventState={eventState!} />
// <BigTextManager eventState={eventState!} />
// <LevelManager eventState={eventState!} />
// <BootComponentManager eventState={eventState!} />
// <SSknComponentManager eventState={eventState!} />
// <BootAuthorizeUserManager eventState={eventState!} />
// <LevelSelectionManager eventState={eventState!} />
// <SubsceneManager eventState={eventState!} />
// <PauseComponentManager eventState={eventState!} />
// <MediaYellowTextManager eventState={eventState!} />
// <GameSaver eventState={eventState!} />
// <GameLoader eventState={eventState!} />
// <IdleManager eventState={eventState!} />
// </>
// );
return <></>;
};
export default EventManager;

93
src/core/StateManagers/GameManagers/GameLoader.tsx
View file

@ -1,10 +1,5 @@
import { useCallback, useEffect } from "react";
import {
useLevelStore,
useMainSceneStore,
useSiteSaveStore,
useSiteStore,
} from "../../../store";
import { useMainSceneStore, useSiteSaveStore } from "../../../store";
import { StateManagerProps } from "../EventManager";
import node_huds from "../../../resources/node_huds.json";
import site_a from "../../../resources/site_a.json";
@ -20,17 +15,15 @@ const GameLoader = (props: StateManagerProps) => {
// which imo didn't make much sense
// level setter
const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
// const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
// big text setter
const setBigTexPos = useMainSceneStore((state) => state.setBigTextPos);
const setBigText = useMainSceneStore((state) => state.setBigText);
// site setter
const setSiteTransformState = useSiteStore(
(state) => state.setTransformState
);
const setCurrentSite = useSiteStore((state) => state.setCurrentSite);
const setSiteRot = useMainSceneStore((state) => state.setSiteRot);
const setCurrentSite = useMainSceneStore((state) => state.setActiveSite);
// node setter
const setActiveNode = useMainSceneStore((state) => state.setNode);
@ -41,53 +34,37 @@ const GameLoader = (props: StateManagerProps) => {
// node hud setter
const setHud = useMainSceneStore((state) => state.setHud);
const changeSite = useCallback(
(site: string) => {
// load new site
const siteToLoad = site === "a" ? siteASaveState : siteBSaveState;
const siteData = site === "a" ? site_a : site_b;
// load new site (the object itself)
setSiteTransformState(0, "rotX");
setCurrentSite(site);
setSiteTransformState(siteToLoad.siteRotY, "rotY");
setSiteTransformState(siteToLoad.sitePosY, "posY");
// load new site level
setActiveLevel(siteToLoad.level);
// load new site yellow text
setBigTexPos(
node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].big_text[0]
);
const targetYellowText = (siteData as SiteType)[siteToLoad.level][
siteToLoad.activeNodeId
].node_name;
setBigText(targetYellowText);
// load new site node
setActiveNode(siteToLoad.activeNodeId);
setNodeMatrixIndices(siteToLoad.nodeMatrixIndices);
// load new site node hud
setHud(siteToLoad.nodeHudId);
},
[
setActiveLevel,
setActiveNode,
setBigTexPos,
setBigText,
setCurrentSite,
setHud,
setNodeMatrixIndices,
setSiteTransformState,
siteASaveState,
siteBSaveState,
]
);
const changeSite = useCallback((site: string) => {
// load new site
// const siteToLoad = site === "a" ? siteASaveState : siteBSaveState;
// const siteData = site === "a" ? site_a : site_b;
//
// // load new site (the object itself)
// setCurrentSite(site);
// setSiteRot(siteToLoad.siteRotY);
// setSitePos(siteToLoad.sitePosY);
//
// // load new site level
// setActiveLevel(siteToLoad.level);
//
// // load new site yellow text
// setBigTexPos(
// node_huds[siteToLoad.nodeHudId as keyof typeof node_huds].big_text[0]
// );
//
// const targetYellowText = (siteData as SiteType)[siteToLoad.level][
// siteToLoad.activeNodeId
// ].node_name;
//
// setBigText(targetYellowText);
//
// // load new site node
// setActiveNode(siteToLoad.activeNodeId);
// setNodeMatrixIndices(siteToLoad.nodeMatrixIndices);
//
// // load new site node hud
// setHud(siteToLoad.nodeHudId);
}, []);
const dispatchObject = useCallback(
(eventState: { event: string; site: string }) => {

21
src/core/StateManagers/MainSceneEventManager.tsx
View file

@ -1,10 +1,8 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import {
useLevelSelectionStore,
useLevelStore,
useMainSceneStore,
usePauseStore,
useSiteStore,
} from "../../store";
import handleMainSceneEvent from "../mainSceneEventHandler";
import { getKeyCodeAssociation } from "../utils/keyPressUtils";
@ -30,11 +28,14 @@ type MainSceneEventManagerProps = {
const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
// all the possible context needed to calculate new state
const currentSite = useSiteStore((state) => state.currentSite);
const activeNodeId = useMainSceneStore((state) => state.activeNodeState.id);
const nodeMatrixIndices = useMainSceneStore((state) => state.activeNodeMatrixIndices);
const siteTransformState = useSiteStore((state) => state.transformState);
const activeLevel = useLevelStore((state) => state.activeLevel);
const currentSite = useMainSceneStore((state) => state.activeSite);
const activeNodeId = useMainSceneStore((state) => state.activeNode.id);
const nodeMatrixIndices = useMainSceneStore(
(state) => state.activeNodeMatrixIndices
);
const siteRotY = useMainSceneStore((state) => state.siteRot[1]);
const sitePosY = useMainSceneStore((state) => state.sitePos[1]);
const activeLevel = useMainSceneStore((state) => state.activeLevel);
const mainSubscene = useMainSceneStore((state) => state.subscene);
const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
@ -102,7 +103,8 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
const event = handleMainSceneEvent({
mainSubscene: mainSubscene,
keyPress: keyPress,
siteTransformState: siteTransformState,
sitePosY: sitePosY,
siteRotY: siteRotY,
activeNodeId: activeNodeId,
nodeMatrixIndices: nodeMatrixIndices,
activeLevel: activeLevel,
@ -119,7 +121,8 @@ const MainSceneEventManager = (props: MainSceneEventManagerProps) => {
[
props.loaded,
mainSubscene,
siteTransformState,
sitePosY,
siteRotY,
activeNodeId,
nodeMatrixIndices,
activeLevel,

6
src/core/StateManagers/MainSceneManagers/BigTextManager.tsx
View file

@ -1,6 +1,4 @@
import { useCallback, useEffect } from "react";
import site_a from "../../../resources/site_a.json";
import site_b from "../../../resources/site_b.json";
import { useMainSceneStore } from "../../../store";
import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Site";
import { StateManagerProps } from "../EventManager";
@ -30,7 +28,7 @@ const BigTextManager = (props: StateManagerProps) => {
setTimeout(() => {
// make current hud big text shrink
setXOffset(-1, "xOffset");
setXOffset(-1);
}, 2500);
setTimeout(() => {
@ -115,7 +113,7 @@ const BigTextManager = (props: StateManagerProps) => {
setVisible(false);
setTimeout(() => {
setPos(hud.big_text[0]);
setPos(hud.big_text);
setColor("yellow");
const targetText = node === "UNKNOWN" ? "Unknown" : node.node_name;

4
src/core/StateManagers/MainSceneManagers/LevelManager.tsx
View file

@ -1,9 +1,9 @@
import { useCallback, useEffect } from "react";
import { StateManagerProps } from "../EventManager";
import { useLevelStore } from "../../../store";
import { useMainSceneStore } from "../../../store";
const LevelManager = (props: StateManagerProps) => {
const setActiveLevel = useLevelStore((state) => state.setActiveLevel);
const setActiveLevel = useMainSceneStore((state) => state.setActiveLevel);
const dispatchObject = useCallback(
(eventState: { event: string; level: string }) => {

116
src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx
View file

@ -1,17 +1,19 @@
import { useCallback, useEffect, useMemo } from "react";
import { useMiddleRingStore } from "../../../store";
import { useCallback, useEffect } from "react";
import { useMainSceneStore } from "../../../store";
const MiddleRingManager = (props: any) => {
const setTransformState = useMiddleRingStore(
(state) => state.setTransformState
const setRot = useMainSceneStore((state) => state.setMiddleRingRot);
const setPos = useMainSceneStore((state) => state.setMiddleRingPos);
const setRotating = useMainSceneStore((state) => state.setMiddleRingRotating);
const setNoiseAmp = useMainSceneStore((state) => state.setMiddleRingNoiseAmp);
const setWobbleAmp = useMainSceneStore(
(state) => state.setMiddleRingWobbleAmp
);
const setAnimDuration = useMiddleRingStore((state) => state.setAnimDuration);
const setRotating = useMiddleRingStore((state) => state.setRotating);
const setMainRingVisible = useMiddleRingStore(
(state) => state.setMainRingVisible
const setFakeRingVisible = useMainSceneStore(
(state) => state.setFakeMiddleRingVisible
);
const setPartSeparatorVal = useMiddleRingStore(
(state) => state.setPartSeparatorVal
const setPartSeparatorVal = useMainSceneStore(
(state) => state.setMiddleRingPartSeparatorVal
);
const rotate = useCallback(
@ -19,27 +21,24 @@ const MiddleRingManager = (props: any) => {
const rotValues = direction === "right" ? [-0.07, 0.03] : [0.07, -0.03];
setTimeout(() => {
setTransformState(rotValues[0], "rotZ");
setRot([0, 0, rotValues[0]]);
}, 2300);
setTimeout(() => {
setTransformState(rotValues[1], "rotZ");
setRot([0, 0, rotValues[1]]);
}, 3500);
setTimeout(() => {
setTransformState(0, "rotZ");
setRot([0, 0, 0]);
}, 4500);
},
[setTransformState]
[setRot]
);
const moveDown = useCallback(() => {
// set the anim duration value to match that of the site's
setAnimDuration(1200);
// make noise appear again
setTimeout(() => {
setTransformState(0.06, "noiseStrength");
setNoiseAmp(0.06);
}, 800);
// disable rotation of the ring
@ -48,54 +47,50 @@ const MiddleRingManager = (props: any) => {
}, 700);
setTimeout(() => {
setTransformState(1.39, "posY");
setPos([0, 1.39, 0]);
}, 1300);
// set ring rotation on x axis to craete motion effect
setTimeout(() => {
setTransformState(0.3, "rotX");
setRot([0.3, 0, 0]);
}, 1500);
setTimeout(() => {
setAnimDuration(600);
}, 2900);
setTimeout(() => {
setTransformState(-0.31, "posY");
setPos([0, -0.31, 0]);
}, 3000);
setTimeout(() => {
setTransformState(-0.11, "posY");
setPos([0, -0.11, 0]);
}, 3150);
// rotate it again, set ring noise to 0
setTimeout(() => {
setTransformState(-0.1, "rotX");
setTransformState(0, "noiseStrength");
setRot([-0.1, 0, 0]);
setNoiseAmp(0);
}, 3500);
// rotate it back AGAIN (holy fuk psx game)
setTimeout(() => {
setTransformState(0.05, "rotX");
setRot([0.05, 0, 0]);
}, 4500);
// reset value, set noise to 0
setTimeout(() => {
setTransformState(0, "rotX");
setRot([0, 0, 0]);
setRotating(true);
}, 4800);
// enable noise again in about 11-12 secs
setTimeout(() => {
setTransformState(0.03, "noiseStrength");
setNoiseAmp(0.03);
}, 11600);
}, [setAnimDuration, setRotating, setTransformState]);
}, [setNoiseAmp, setPos, setRot, setRotating]);
const moveUp = useCallback(() => {
// change noise to 0, make the ring bend downwards
setTimeout(() => {
setTransformState(0, "noiseStrength");
setTransformState(0.2, "wobbleStrength");
setNoiseAmp(0);
setWobbleAmp(0.2);
}, 300);
// disable rotation of the ring
@ -105,56 +100,47 @@ const MiddleRingManager = (props: any) => {
// make the ring bend upwards
setTimeout(() => {
setTransformState(-0.3, "wobbleStrength");
setWobbleAmp(-0.3);
// the middle ring stays in place, therefore we animate it
// in the same direction as the site, creating that illusion.
// set the anim duration value to match that of the site's
setAnimDuration(1200);
// animate it after
setTransformState(-1.39, "posY");
setPos([0, -1.39, 0]);
}, 1300);
// reset the ring bend, set the rotation to slightly curve
// to replicate a motion effect (since its moving upwards)
// and enable rotation again
setTimeout(() => {
setTransformState(0, "wobbleStrength");
setTransformState(-0.2, "rotX");
setWobbleAmp(0);
setRot([-0.2, 0, 0]);
setRotating(true);
}, 1500);
// reset anim duration back to default
setTimeout(() => {
setAnimDuration(600);
}, 2300);
setTimeout(() => {
setTransformState(0.09, "posY");
setPos([0, 0.09, 0]);
}, 2900);
// reset the rotation value to 0
setTimeout(() => {
setTransformState(0, "rotX");
setTransformState(-0.11, "posY");
setRot([0, 0, 0]);
setPos([0, -0.11, 0]);
}, 3150);
// enable noise again in about 8~ secs
setTimeout(() => {
setTransformState(0.03, "noiseStrength");
setNoiseAmp(0.03);
}, 7800);
}, [setAnimDuration, setRotating, setTransformState]);
}, [setNoiseAmp, setPos, setRot, setRotating, setWobbleAmp]);
const animatePause = useCallback(() => {
setTransformState(0.5, "posY");
setPos([0, 0.5, 0]);
setTimeout(() => {
setMainRingVisible(false);
setFakeRingVisible(true);
}, 600);
setTimeout(() => {
setPartSeparatorVal(0.9);
// move the hidden (main) ring below, cuz when the pause exists it needs to jump back up
// instead of reappearing
setTransformState(-2.5, "posY");
setPos([0, -2.5, 0]);
}, 1100);
setTimeout(() => {
setPartSeparatorVal(1);
@ -171,35 +157,29 @@ const MiddleRingManager = (props: any) => {
}, 3100);
setTimeout(() => {
setMainRingVisible(true);
setFakeRingVisible(false);
setPartSeparatorVal(1);
}, 3800);
}, [setMainRingVisible, setPartSeparatorVal, setTransformState]);
}, [setFakeRingVisible, setPartSeparatorVal, setPos]);
const animateUnpause = useCallback(() => {
setTimeout(() => {
setTimeout(() => {
setTransformState(0, "wobbleStrength");
setTransformState(-0.4, "rotX");
setRot([-0.4, 0, 0]);
setRotating(true);
}, 500);
// reset anim duration back to default
setTimeout(() => {
setAnimDuration(600);
}, 900);
setTimeout(() => {
setTransformState(0.13, "posY");
setPos([0, 0.13, 0]);
}, 900);
// reset the rotation value to 0
setTimeout(() => {
setTransformState(0, "rotX");
setTransformState(-0.11, "posY");
setRot([0, 0, 0]);
setPos([0, -0.11, 0]);
}, 1150);
}, 1000);
}, [setAnimDuration, setRotating, setTransformState]);
}, [setPos, setRot, setRotating]);
const dispatchObject = useCallback(
(eventState: { event: string }) => {

68
src/core/StateManagers/MainSceneManagers/NodeManager.tsx
View file

@ -5,6 +5,8 @@ import { NodeDataType } from "../../../components/MainScene/SyncedComponents/Sit
const NodeManager = (props: StateManagerProps) => {
const setActiveNode = useMainSceneStore((state) => state.setNode);
const setActiveNodePos = useMainSceneStore((state) => state.setNodePos);
const setActiveNodeRot = useMainSceneStore((state) => state.setNodeRot);
const setActiveNodeState = useMainSceneStore((state) => state.setNodeState);
const setNodeMatrixIndices = useMainSceneStore(
(state) => state.setNodeMatrixIndices
@ -28,30 +30,26 @@ const NodeManager = (props: StateManagerProps) => {
const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
const fourthCoordSet = calculateCoordsBasedOnRotation(0, 2, siteRotY);
setActiveNodeState(fstCoordSet.x, "posX");
setActiveNodeState(fstCoordSet.z, "posZ");
setActiveNodeState(0, "posY");
setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
setTimeout(() => {
setActiveNodeState(sndCoordSet.x, "posX");
setActiveNodeState(sndCoordSet.z, "posZ");
setActiveNodePos([sndCoordSet.x, 0, sndCoordSet.z]);
}, 800);
setTimeout(() => {
setActiveNodeState(thirdCoordSet.x, "posX");
setActiveNodeState(-0.005, "rotZ");
setActiveNodePos([thirdCoordSet.x, 0, sndCoordSet.z]);
setActiveNodeRot([0, 0, -0.005]);
}, 2600);
setTimeout(() => {
setActiveNodeState(fourthCoordSet.x, "posX");
setActiveNodeState(fourthCoordSet.z, "posZ");
setActiveNodeState(-0.5, "rotZ");
setActiveNodePos([fourthCoordSet.x, 0, fourthCoordSet.z]);
setActiveNodeRot([0, 0, -0.5]);
}, 2700);
setTimeout(() => {
setActiveNodeState(0, "rotZ");
setActiveNodeRot([0, 0, 0]);
setActiveNodeState(false, "interactedWith");
}, 3800);
},
[setActiveNodeState]
[setActiveNodePos, setActiveNodeRot, setActiveNodeState]
);
const animateNodeKnock = useCallback(
@ -60,15 +58,13 @@ const NodeManager = (props: StateManagerProps) => {
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
setActiveNodeState(fstCoordSet.x, "posX");
setActiveNodeState(fstCoordSet.z, "posZ");
setActiveNodeState(-0.6, "posY");
setActiveNodePos([fstCoordSet.x, -0.6, fstCoordSet.z]);
setTimeout(() => {
setActiveNodeState(false, "interactedWith");
}, 2500);
},
[setActiveNodeState]
[setActiveNodePos, setActiveNodeState]
);
const animateNodeKnockAndFall = useCallback(
@ -77,19 +73,21 @@ const NodeManager = (props: StateManagerProps) => {
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
setActiveNodeState(fstCoordSet.x, "posX");
setActiveNodeState(fstCoordSet.z, "posZ");
setActiveNodeState(-0.6, "posY");
setActiveNodePos([fstCoordSet.x, -0.6, fstCoordSet.z]);
setTimeout(() => {
setActiveNodeState(1.2, "posY");
setActiveNodeState(false, "visible");
}, 2300);
setTimeout(() => {
setActiveNodeState(false, "interactedWith");
}, 2500);
setTimeout(() => {
setActiveNodeState(true, "visible");
}, 3200);
},
[setActiveNodeState]
[setActiveNodePos, setActiveNodeState]
);
const animateNodeTouchAndScare = useCallback(
@ -98,9 +96,7 @@ const NodeManager = (props: StateManagerProps) => {
const fstCoordSet = calculateCoordsBasedOnRotation(-0.6, 0.2, siteRotY);
setActiveNodeState(fstCoordSet.x, "posX");
setActiveNodeState(fstCoordSet.z, "posZ");
setActiveNodeState(0, "posY");
setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
setTimeout(() => {
setActiveNodeState(true, "exploding");
@ -109,8 +105,7 @@ const NodeManager = (props: StateManagerProps) => {
setTimeout(() => {
setActiveNodeState(false, "interactedWith");
setActiveNodeState(0, "rotZ");
setActiveNodeState(0, "rotX");
setActiveNodeRot([0, 0, 0]);
}, 1400);
setTimeout(() => {
@ -121,7 +116,7 @@ const NodeManager = (props: StateManagerProps) => {
setActiveNodeState(true, "visible");
}, 3500);
},
[setActiveNodeState]
[setActiveNodePos, setActiveNodeRot, setActiveNodeState]
);
const animateShrinkAndRip = useCallback(
@ -132,19 +127,14 @@ const NodeManager = (props: StateManagerProps) => {
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
const thirdCoordSet = calculateCoordsBasedOnRotation(0, 0.2, siteRotY);
setActiveNodeState(fstCoordSet.x, "posX");
setActiveNodeState(fstCoordSet.z, "posZ");
setActiveNodeState(0, "posY");
setActiveNodePos([fstCoordSet.x, 0, fstCoordSet.z]);
setTimeout(() => {
setActiveNodeState(sndCoordSet.x, "posX");
setActiveNodeState(sndCoordSet.z, "posZ");
setActiveNodePos([sndCoordSet.x, 0, sndCoordSet.z]);
}, 800);
setTimeout(() => {
setActiveNodeState(thirdCoordSet.x, "posX");
setActiveNodeState(thirdCoordSet.z, "posZ");
setActiveNodeState(-0.4, "posY");
setActiveNodePos([thirdCoordSet.x, -0.4, thirdCoordSet.z]);
}, 2800);
setTimeout(() => {
@ -152,7 +142,7 @@ const NodeManager = (props: StateManagerProps) => {
}, 3000);
setTimeout(() => {
setActiveNodeState(-1.5, "posY");
setActiveNodePos([thirdCoordSet.x, -1.5, thirdCoordSet.z]);
}, 3200);
setTimeout(() => {
@ -162,15 +152,14 @@ const NodeManager = (props: StateManagerProps) => {
setTimeout(() => {
setActiveNodeState(false, "interactedWith");
setActiveNodeState(false, "shrinking");
setActiveNodeState(0, "rotZ");
setActiveNodeState(0, "rotX");
setActiveNodeRot([0, 0, 0]);
}, 6400);
setTimeout(() => {
setActiveNodeState(true, "visible");
}, 7500);
},
[setActiveNodeState]
[setActiveNodePos, setActiveNodeRot, setActiveNodeState]
);
const updateActiveNode = useCallback(
@ -204,7 +193,6 @@ const NodeManager = (props: StateManagerProps) => {
siteRotY: number;
idleNodeId?: string;
}) => {
console.log(eventState.node);
switch (eventState.event) {
case "site_up":
case "site_down":

30
src/core/StateManagers/MainSceneManagers/SiteManager.tsx
View file

@ -1,48 +1,46 @@
import { useCallback, useEffect } from "react";
import { useSiteStore } from "../../../store";
import { useMainSceneStore } from "../../../store";
import { StateManagerProps } from "../EventManager";
const SiteManager = (props: StateManagerProps) => {
const setTransformState = useSiteStore((state) => state.setTransformState);
const setPos = useMainSceneStore((state) => state.setSitePos);
const setRot = useMainSceneStore((state) => state.setSiteRot);
const setRotX = useMainSceneStore((state) => state.setSiteRotX);
const dispatchObject = useCallback(
(eventState: {
event: string;
sitePosY: number;
siteRotY: number;
}) => {
(eventState: { event: string; sitePosY: number; siteRotY: number }) => {
switch (eventState.event) {
case "site_up":
case "site_down":
case "select_level_up":
case "select_level_down":
return {
action: setTransformState,
value: [eventState.sitePosY, "posY"],
action: setPos,
value: [[0, eventState.sitePosY, 0]],
actionDelay: 1300,
};
case "site_left":
case "site_right":
return {
action: setTransformState,
value: [eventState.siteRotY, "rotY"],
action: setRot,
value: [[0, eventState.siteRotY, 0]],
actionDelay: 1100,
};
case "pause_game":
return {
action: setTransformState,
value: [Math.PI / 2, "rotX"],
action: setRotX,
value: [Math.PI / 2],
actionDelay: 3600,
};
case "pause_exit_select":
return {
action: setTransformState,
value: [0, "rotX"],
action: setRotX,
value: [0],
actionDelay: 0,
};
}
},
[setTransformState]
[setPos, setRot, setRotX]
);
useEffect(() => {

4
src/core/mainSceneEventHandler.ts
View file

@ -18,8 +18,8 @@ const handleMainSceneEvent = (gameContext: any) => {
let activeHud;
let nodeMatrixIndices = gameContext.nodeMatrixIndices;
let level = parseInt(gameContext.activeLevel);
let siteRotY = gameContext.siteTransformState.rotY;
let sitePosY = gameContext.siteTransformState.posY;
let siteRotY = gameContext.siteRotY;
let sitePosY = gameContext.sitePosY;
let scene = gameContext.scene;
if (subscene === "site") {

4
src/scenes/ChangeDiscScene.tsx
View file

@ -1,9 +1,9 @@
import React, { useEffect } from "react";
import { useSceneStore, useSiteStore } from "../store";
import { useMainSceneStore, useSceneStore } from "../store";
const ChangeDiscScene = () => {
const setScene = useSceneStore((state) => state.setScene);
const currentSite = useSiteStore((state) => state.currentSite);
const currentSite = useMainSceneStore((state) => state.activeSite);
useEffect(() => {
if (currentSite === "a") {

209
src/store.ts
View file

@ -6,6 +6,7 @@ import site_b from "./resources/site_b.json";
import authorize_user_letters from "./resources/authorize_user_letters.json";
import game_progress from "./resources/initial_progress.json";
import { HUDType } from "./components/MainScene/SyncedComponents/HUD";
import { NodeDataType } from "./components/MainScene/SyncedComponents/Site";
type EndState = {
mediaPlayedCount: number;
@ -59,62 +60,6 @@ type SceneState = {
setScene: (to: string) => void;
};
type HUDState = {
id: string;
active: number;
setId: (to: string) => void;
toggleActive: () => void;
};
type NodeState = {
activeNodeState: {
id: string;
posX: number;
posZ: number;
posY: number;
rotZ: number;
interactedWith: boolean;
exploding: boolean;
shrinking: boolean;
visible: boolean;
};
nodeMatrixIndices: { matrixIdx: number; rowIdx: number; colIdx: number };
gameProgress: typeof game_progress;
};
type LainState = {
lainMoveState: string;
setLainMoveState: (to: string) => void;
};
type SiteState = {
currentSite: "a" | "b";
transformState: {
posY: number;
rotY: number;
rotX: number;
};
};
type LevelState = {
activeLevel: string;
setActiveLevel: (to: string) => void;
};
type MiddleRingState = {
transformState: {
wobbleStrength: number;
noiseStrength: number;
posY: number;
rotX: number;
rotZ: number;
};
isRotating: boolean;
animDuration: number;
mainRingVisible: boolean;
partSeparatorVal: number;
};
type MediaWordState = {
posStateIdx: number;
setPosStateIdx: (to: number) => void;
@ -197,13 +142,6 @@ type SSknState = {
toggleLoading: () => void;
};
type MainSceneState = {
intro: boolean;
subscene: string;
setSubscene: (to: string) => void;
setIntro: (to: boolean) => void;
};
export type MediaBigTextState = {
text: string;
transformState: {
@ -241,61 +179,6 @@ export const useIdleStore = create<IdleState>((set) => ({
setImages: (to) => set(() => ({ images: to })),
}));
export const useSiteStore = create(
combine(
{
currentSite: "a",
transformState: {
posY: 0,
rotY: 0,
rotX: 0,
},
} as SiteState,
(set) => ({
setTransformState: (to: number, at: string) =>
set((state) => ({
transformState: { ...state.transformState, [at]: to },
})),
setCurrentSite: (to: string) =>
set(() => ({ currentSite: to as "a" | "b" })),
})
)
);
export const useMiddleRingStore = create(
combine(
{
transformState: {
wobbleStrength: 0,
noiseStrength: 0,
posY: -0.11,
rotX: 0,
rotZ: 0,
},
partSeparatorVal: 1,
isRotating: true,
animDuration: 600,
mainRingVisible: true,
} as MiddleRingState,
(set) => ({
setTransformState: (to: number, at: string) =>
set((state) => ({
transformState: { ...state.transformState, [at]: to },
})),
setRotating: (to: boolean) => set(() => ({ isRotating: to })),
setAnimDuration: (to: number) => set(() => ({ animDuration: to })),
setMainRingVisible: (to: boolean) => set(() => ({ mainRingVisible: to })),
setPartSeparatorVal: (to: number) =>
set(() => ({ partSeparatorVal: to })),
})
)
);
export const useLevelStore = create<LevelState>((set) => ({
activeLevel: "04",
setActiveLevel: (to) => set(() => ({ activeLevel: to })),
}));
export const useMediaStore = create(
combine(
{
@ -388,6 +271,68 @@ export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
set(() => ({ activeLetterTextureOffset: to })),
}));
type MainSceneState = {
gameProgress: typeof game_progress;
subscene: string;
intro: boolean;
bigText: string;
bigTextVisible: boolean;
bigTextColor: "yellow" | "orange";
bigTextPos: number[];
bigTextXOffset: 0 | -1;
hud: HUDType;
hudActive: boolean;
activeNode: NodeDataType;
activeNodeMatrixIndices: {
matrixIdx: number;
rowIdx: number;
colIdx: number;
};
activeNodePos: number[];
activeNodeRot: number[];
activeNodeState: {
interactedWith: boolean;
exploding: boolean;
shrinking: boolean;
visible: boolean;
};
// lain
lainMoveState: string;
// site
activeSite: "a" | "b";
siteRot: number[];
sitePos: number[];
// middle ring
middleRingPos: number[];
middleRingRot: number[];
middleRingWobbleAmp: number;
middleRingNoiseAmp: number;
middleRingPartSeparatorVal: number;
middleRingRotating: boolean;
fakeMiddleRingVisible: boolean;
// level
activeLevel: string;
// level selection
selectedLevel: number;
levelSelectionToggled: boolean;
// pause
pauseComponentMatrix: [string, string, string, string, string];
pauseComponentMatrixIdx: number;
pauseExitAnimation: boolean;
};
export const useMainSceneStore = create(
combine(
{
@ -428,7 +373,7 @@ export const useMainSceneStore = create(
initial_position: [1.18, 0.16, -8.7],
},
},
hudActive: 1,
hudActive: true,
// nodes
activeNode: {
@ -482,7 +427,6 @@ export const useMainSceneStore = create(
middleRingWobbleAmp: 0,
middleRingNoiseAmp: 0,
middleRingPartSeparatorVal: 1,
middleRingAnimDuration: 600,
middleRingRotating: true,
fakeMiddleRingVisible: false,
@ -491,17 +435,16 @@ export const useMainSceneStore = create(
// level selection
selectedLevel: 4,
levelSelectionToggled: 0,
levelSelectionToggled: false,
// pause
pauseComponentMatrix: ["load", "about", "change", "save", "exit"],
pauseComponentMatrixIdx: 2,
pauseExitAnimation: false,
} as any,
} as MainSceneState,
(set) => ({
// subscene setters
setSubscene: (to: "pause" | "level_selection") =>
set(() => ({ subscene: to })),
setSubscene: (to: string) => set(() => ({ subscene: to })),
// intro setters
setIntro: (to: boolean) => set(() => ({ intro: to })),
@ -512,15 +455,14 @@ export const useMainSceneStore = create(
setBigTextColor: (to: "yellow" | "orange") =>
set(() => ({ bigTextColor: to })),
setBigTextPos: (to: number[]) => set(() => ({ bigTextPos: to })),
setBigTextXOffset: (to: number) => set(() => ({ bigTextXOffset: to })),
setBigTextXOffset: (to: 0 | -1) => set(() => ({ bigTextXOffset: to })),
// hud setters
setHud: (to: HUDType) => set(() => ({ hud: to })),
toggleHudActive: () =>
set((state) => ({ hudActive: Number(!state.hudActive) })),
toggleHudActive: () => set((state) => ({ hudActive: !state.hudActive })),
// node setters
setNode: (to: string) => set(() => ({ activeNode: to })),
setNode: (to: NodeDataType) => set(() => ({ activeNode: to })),
setNodeMatrixIndices: (to: {
matrixIdx: number;
rowIdx: number;
@ -542,6 +484,12 @@ export const useMainSceneStore = create(
// site setters
setActiveSite: (to: "a" | "b") => set(() => ({ activeSite: to })),
setSiteRot: (to: number[]) => set(() => ({ siteRot: to })),
setSiteRotX: (to: number) =>
set((prev) => {
const nextPos = [...prev.siteRot];
nextPos[0] = to;
return { siteRot: nextPos };
}),
setSitePos: (to: number[]) => set(() => ({ sitePos: to })),
// middle ring setters
@ -565,7 +513,7 @@ export const useMainSceneStore = create(
setSelectedLevel: (to: number) => set(() => ({ selectedLevel: to })),
toggleLevelSelection: () =>
set((state) => ({
levelSelectionToggled: Number(!state.levelSelectionToggled),
levelSelectionToggled: !state.levelSelectionToggled,
})),
// pause setters
@ -699,3 +647,6 @@ export const useEndSceneStore = create<EndState>((set) => ({
set((state) => ({ mediaPlayedCount: state.mediaPlayedCount + 1 })),
resetMediaPlayedCount: () => set(() => ({ mediaPlayedCount: 0 })),
}));
export const getMainSceneContext = () =>
useMainSceneStore.getState().activeNode;