From c771fe2e332d18e105b006fc4e9285390075e127 Mon Sep 17 00:00:00 2001 From: ad044 Date: Fri, 22 Jan 2021 21:56:29 +0400 Subject: [PATCH] almost done with main scene store refactor --- .../MainScene/SyncedComponents/GrayPlanes.tsx | 40 +- .../MainScene/SyncedComponents/HUD.tsx | 3 +- .../MainScene/SyncedComponents/MiddleRing.tsx | 31 +- .../MiddleRing/MiddleRingPart.tsx | 32 +- .../MainScene/SyncedComponents/Site.tsx | 50 +- .../Site/ActiveLevelNodes.tsx | 31 +- .../Site/InactiveLevelNodes.tsx | 30 +- .../MainScene/SyncedComponents/Site/Node.tsx | 50 +- .../MainScene/SyncedComponents/Site/Rings.tsx | 16 +- src/components/MediaScene/Images.tsx | 5 +- src/components/MediaScene/MediaPlayer.tsx | 3 +- src/components/TextRenderer/BigLetter.tsx | 1 - src/core/StateManagers/EventManager.tsx | 475 +++++++++--------- .../StateManagers/GameManagers/GameLoader.tsx | 93 ++-- .../StateManagers/MainSceneEventManager.tsx | 21 +- .../MainSceneManagers/BigTextManager.tsx | 6 +- .../MainSceneManagers/LevelManager.tsx | 4 +- .../MainSceneManagers/MiddleRingManager.tsx | 116 ++--- .../MainSceneManagers/NodeManager.tsx | 68 ++- .../MainSceneManagers/SiteManager.tsx | 30 +- src/core/mainSceneEventHandler.ts | 4 +- src/scenes/ChangeDiscScene.tsx | 4 +- src/store.ts | 209 +++----- 23 files changed, 604 insertions(+), 718 deletions(-) diff --git a/src/components/MainScene/SyncedComponents/GrayPlanes.tsx b/src/components/MainScene/SyncedComponents/GrayPlanes.tsx index b344307..821c3ac 100644 --- a/src/components/MainScene/SyncedComponents/GrayPlanes.tsx +++ b/src/components/MainScene/SyncedComponents/GrayPlanes.tsx @@ -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(); - 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) => ( ))} - {/**/} - {/* */} - {/**/} ); -}; +}); export default GrayPlanes; diff --git a/src/components/MainScene/SyncedComponents/HUD.tsx b/src/components/MainScene/SyncedComponents/HUD.tsx index f74fabd..90b751d 100644 --- a/src/components/MainScene/SyncedComponents/HUD.tsx +++ b/src/components/MainScene/SyncedComponents/HUD.tsx @@ -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({ diff --git a/src/components/MainScene/SyncedComponents/MiddleRing.tsx b/src/components/MainScene/SyncedComponents/MiddleRing.tsx index 943d2d9..9236c6c 100644 --- a/src/components/MainScene/SyncedComponents/MiddleRing.tsx +++ b/src/components/MainScene/SyncedComponents/MiddleRing.tsx @@ -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 = () => { /> - {!mainRingVisible ? ( + {!mainRingVisible && ( { ); })} - ) : ( - <> )} ); diff --git a/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx b/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx index a85643e..a080aef 100644 --- a/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx +++ b/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx @@ -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 ( diff --git a/src/components/MainScene/SyncedComponents/Site.tsx b/src/components/MainScene/SyncedComponents/Site.tsx index 26d016e..2d1fccc 100644 --- a/src/components/MainScene/SyncedComponents/Site.tsx +++ b/src/components/MainScene/SyncedComponents/Site.tsx @@ -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 ( { rotation-y={siteState.siteRotY} position-y={siteState.sitePosY} > - - + + diff --git a/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx b/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx index 5c53483..e639483 100644 --- a/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx +++ b/src/components/MainScene/SyncedComponents/Site/ActiveLevelNodes.tsx @@ -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 ( { + 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 ( { })} ); -}); +}; export default InactiveLevelNodes; diff --git a/src/components/MainScene/SyncedComponents/Site/Node.tsx b/src/components/MainScene/SyncedComponents/Site/Node.tsx index ea37931..ada0b56 100644 --- a/src/components/MainScene/SyncedComponents/Site/Node.tsx +++ b/src/components/MainScene/SyncedComponents/Site/Node.tsx @@ -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} > 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]} diff --git a/src/components/MainScene/SyncedComponents/Site/Rings.tsx b/src/components/MainScene/SyncedComponents/Site/Rings.tsx index 075b3e5..1080e1e 100644 --- a/src/components/MainScene/SyncedComponents/Site/Rings.tsx +++ b/src/components/MainScene/SyncedComponents/Site/Rings.tsx @@ -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 ( diff --git a/src/components/MediaScene/Images.tsx b/src/components/MediaScene/Images.tsx index 88990cf..f8335fd 100644 --- a/src/components/MediaScene/Images.tsx +++ b/src/components/MediaScene/Images.tsx @@ -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(); - const currentSite = useSiteStore((state) => state.currentSite); + const currentSite = useMainSceneStore((state) => state.activeSite); const dummyTex = useLoader(THREE.TextureLoader, dummy); diff --git a/src/components/MediaScene/MediaPlayer.tsx b/src/components/MediaScene/MediaPlayer.tsx index 1391cea..3b9990e 100644 --- a/src/components/MediaScene/MediaPlayer.tsx +++ b/src/components/MediaScene/MediaPlayer.tsx @@ -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(); - const currentSite = useSiteStore((state) => state.currentSite); + const currentSite = useMainSceneStore((state) => state.activeSite); // end scene specific stuff const endMediaPlayedCount = useEndSceneStore( diff --git a/src/components/TextRenderer/BigLetter.tsx b/src/components/TextRenderer/BigLetter.tsx index 343c4cf..6b2d20b 100644 --- a/src/components/TextRenderer/BigLetter.tsx +++ b/src/components/TextRenderer/BigLetter.tsx @@ -84,7 +84,6 @@ const BigLetter = memo( config: { duration: 200 }, }); - console.log('rend') return ( { - 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(); - - 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 ( - <> - - - - - - - - - - - - - - - - - - - - - ); + // 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(); + // + // 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 ( + // <> + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // ); + return <>; }; export default EventManager; diff --git a/src/core/StateManagers/GameManagers/GameLoader.tsx b/src/core/StateManagers/GameManagers/GameLoader.tsx index 7e451ef..fc8678d 100644 --- a/src/core/StateManagers/GameManagers/GameLoader.tsx +++ b/src/core/StateManagers/GameManagers/GameLoader.tsx @@ -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 }) => { diff --git a/src/core/StateManagers/MainSceneEventManager.tsx b/src/core/StateManagers/MainSceneEventManager.tsx index 9fdc3ab..e88d04f 100644 --- a/src/core/StateManagers/MainSceneEventManager.tsx +++ b/src/core/StateManagers/MainSceneEventManager.tsx @@ -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, diff --git a/src/core/StateManagers/MainSceneManagers/BigTextManager.tsx b/src/core/StateManagers/MainSceneManagers/BigTextManager.tsx index 8ab7825..dcede22 100644 --- a/src/core/StateManagers/MainSceneManagers/BigTextManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/BigTextManager.tsx @@ -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; diff --git a/src/core/StateManagers/MainSceneManagers/LevelManager.tsx b/src/core/StateManagers/MainSceneManagers/LevelManager.tsx index dbe2e27..3f762a3 100644 --- a/src/core/StateManagers/MainSceneManagers/LevelManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/LevelManager.tsx @@ -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 }) => { diff --git a/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx b/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx index 951b945..3832384 100644 --- a/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx @@ -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 }) => { diff --git a/src/core/StateManagers/MainSceneManagers/NodeManager.tsx b/src/core/StateManagers/MainSceneManagers/NodeManager.tsx index 962b4f3..5de9fe0 100644 --- a/src/core/StateManagers/MainSceneManagers/NodeManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/NodeManager.tsx @@ -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": diff --git a/src/core/StateManagers/MainSceneManagers/SiteManager.tsx b/src/core/StateManagers/MainSceneManagers/SiteManager.tsx index 4eb0a5e..df752bf 100644 --- a/src/core/StateManagers/MainSceneManagers/SiteManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/SiteManager.tsx @@ -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(() => { diff --git a/src/core/mainSceneEventHandler.ts b/src/core/mainSceneEventHandler.ts index 5dbfefc..93f6e3a 100644 --- a/src/core/mainSceneEventHandler.ts +++ b/src/core/mainSceneEventHandler.ts @@ -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") { diff --git a/src/scenes/ChangeDiscScene.tsx b/src/scenes/ChangeDiscScene.tsx index f59d144..ac5609b 100644 --- a/src/scenes/ChangeDiscScene.tsx +++ b/src/scenes/ChangeDiscScene.tsx @@ -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") { diff --git a/src/store.ts b/src/store.ts index 4cf45a0..9f66aab 100644 --- a/src/store.ts +++ b/src/store.ts @@ -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((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((set) => ({ - activeLevel: "04", - setActiveLevel: (to) => set(() => ({ activeLevel: to })), -})); - export const useMediaStore = create( combine( { @@ -388,6 +271,68 @@ export const useAuthorizeUserStore = create((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((set) => ({ set((state) => ({ mediaPlayedCount: state.mediaPlayedCount + 1 })), resetMediaPlayedCount: () => set(() => ({ mediaPlayedCount: 0 })), })); + +export const getMainSceneContext = () => + useMainSceneStore.getState().activeNode;