From e5220e193d368ad362a686481dbaa08a06fd8d4e Mon Sep 17 00:00:00 2001 From: ad044 Date: Sat, 2 Jan 2021 21:15:43 +0400 Subject: [PATCH] middle ring anim done --- .../MainScene/SyncedComponentLoader.tsx | 5 +- .../MainScene/SyncedComponents/MiddleRing.tsx | 14 +++- .../MiddleRing/MiddleRingPart.tsx | 21 ++++-- src/components/MainSceneIntro.tsx | 70 ------------------- .../MainSceneManagers/MiddleRingManager.tsx | 70 ++++++++++++++++++- .../MainSceneManagers/SiteManager.tsx | 2 +- src/core/StateManagers/SubsceneManager.tsx | 2 +- src/scenes/MainScene.tsx | 7 +- src/store.ts | 11 ++- 9 files changed, 116 insertions(+), 86 deletions(-) delete mode 100644 src/components/MainSceneIntro.tsx diff --git a/src/components/MainScene/SyncedComponentLoader.tsx b/src/components/MainScene/SyncedComponentLoader.tsx index 645cef7..30ab4f4 100644 --- a/src/components/MainScene/SyncedComponentLoader.tsx +++ b/src/components/MainScene/SyncedComponentLoader.tsx @@ -7,6 +7,8 @@ import LevelSelection from "./SyncedComponents/LevelSelection"; import GrayPlanes from "./SyncedComponents/GrayPlanes"; import Starfield from "./SyncedComponents/Starfield"; import Site from "./SyncedComponents/Site"; +import MiddleRing from "./SyncedComponents/MiddleRing"; +import { a } from "@react-spring/three"; type SyncedComponentLoaderProps = { paused: boolean; @@ -26,7 +28,6 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => { document.getElementsByTagName("canvas")[0].className = "main-scene-background"; }, 4000); - }, [props.shouldIntro]); const visible = useMemo(() => { @@ -44,7 +45,7 @@ const SyncedComponentLoader = (props: SyncedComponentLoaderProps) => { - + { 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 partSeparatorVal = useMiddleRingStore(state=> state.partSeparatorVal) const wobbleState = useSpring({ wobbleStrength: transformState.wobbleStrength, @@ -201,6 +204,10 @@ const MiddleRing = () => { } }); + useEffect(() => { + console.log(mainRingVisible); + }, [mainRingVisible]); + return ( { ref={middleRingRef} rotation={[0, 0.9, 0]} rotation-x={rotState.rotX} + visible={mainRingVisible} > { {[...Array(30).keys()].map((i) => { const angle = (i / 30) * 2 * Math.PI; @@ -236,6 +245,7 @@ const MiddleRing = () => { ); })} diff --git a/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx b/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx index d189045..a85643e 100644 --- a/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx +++ b/src/components/MainScene/SyncedComponents/MiddleRing/MiddleRingPart.tsx @@ -2,7 +2,8 @@ import React, { 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 } from "@react-spring/three"; +import { a, useSpring } from "@react-spring/three"; +import { useMiddleRingStore } from "../../../../store"; type MiddleRingPartProps = { position: number[]; @@ -10,6 +11,10 @@ type MiddleRingPartProps = { }; const MiddleRingPart = (props: MiddleRingPartProps) => { + const partSeparatorVal = useMiddleRingStore( + (state) => state.partSeparatorVal + ); + const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture); const middleRingPartTex = useMemo(() => { @@ -17,9 +22,17 @@ const MiddleRingPart = (props: MiddleRingPartProps) => { return middleRingTex; }, [middleRingTex]); + const partPosState = useSpring({ + posX: props.position[0] / partSeparatorVal, + posZ: props.position[2] / partSeparatorVal, + config: { duration: 600 }, + }); + return ( - @@ -31,7 +44,7 @@ const MiddleRingPart = (props: MiddleRingPartProps) => { side={THREE.DoubleSide} /> - + ); }; diff --git a/src/components/MainSceneIntro.tsx b/src/components/MainSceneIntro.tsx deleted file mode 100644 index b95a0c4..0000000 --- a/src/components/MainSceneIntro.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { memo, useEffect } from "react"; -import { useHudStore, useLainStore, useStarfieldStore } from "../store"; - -// ghost component to manipulate the intro action for the main scene. - -// we separate this file because having something like this -// inside tags makes it behave in a more stable manner -// by waiting for the components to load and synchronously calling the functions. -const MainSceneIntro = memo(() => { - // todo component - - // -2.5 - intro val - //-9.5 - intro val - //1.5 - intro val - - const toggleHud = useHudStore((state) => state.toggleActive); - - //const setHudVisible = useSetRecoilState(hudVisibilityAtom); - // const setOrbVisible = useYellowOrbStore((state) => state.setYellowOrbVisible); - - const setLainMoveState = useLainStore((state) => state.setLainMoveState); - - const setIntroStarfieldVisible = useStarfieldStore( - (state) => state.setIntroStarfieldVisible - ); - const setMainStarfieldVisible = useStarfieldStore( - (state) => state.setMainStarfieldVisible - ); - const setMainStarfieldBoostVal = useStarfieldStore( - (state) => state.setMainStarfieldBoostVal - ); - - useEffect(() => { - setTimeout(() => { - // setGrayPlanesVisible(true); - }, 2500); - - setTimeout(() => { - setMainStarfieldVisible(true); - setMainStarfieldBoostVal(0); - }, 2800); - - toggleHud(); - - setTimeout(() => { - setLainMoveState("standing"); - - // setOrbVisible(true); - //setHudVisible(true); - - setIntroStarfieldVisible(false); - - toggleHud(); - setTimeout(() => { - document.getElementsByTagName("canvas")[0].className = - "main-scene-background"; - }, 300); - }, 3860); - }, [ - setMainStarfieldBoostVal, - setMainStarfieldVisible, - setIntroStarfieldVisible, - setLainMoveState, - toggleHud, - ]); - - return <>; -}); - -export default MainSceneIntro; diff --git a/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx b/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx index cb45421..7e65664 100644 --- a/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/MiddleRingManager.tsx @@ -7,6 +7,12 @@ const MiddleRingManager = (props: any) => { ); const setAnimDuration = useMiddleRingStore((state) => state.setAnimDuration); const setRotating = useMiddleRingStore((state) => state.setRotating); + const setMainRingVisible = useMiddleRingStore( + (state) => state.setMainRingVisible + ); + const setPartSeparatorVal = useMiddleRingStore( + (state) => state.setPartSeparatorVal + ); const rotate = useCallback( (direction: string) => { @@ -139,6 +145,62 @@ const MiddleRingManager = (props: any) => { }, 7800); }, [setAnimDuration, setRotating, setTransformState]); + const animatePause = useCallback(() => { + setTransformState(0.5, "posY"); + setTimeout(() => { + setMainRingVisible(false); + }, 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"); + }, 1100); + setTimeout(() => { + setPartSeparatorVal(1); + }, 1500); + setTimeout(() => { + setPartSeparatorVal(0.9); + }, 1900); + setTimeout(() => { + setPartSeparatorVal(1); + }, 2300); + + setTimeout(() => { + setPartSeparatorVal(0.2); + }, 3100); + + setTimeout(() => { + setMainRingVisible(true); + setPartSeparatorVal(1); + }, 3800); + }, [setMainRingVisible, setPartSeparatorVal, setTransformState]); + + const animateUnpause = useCallback(() => { + setTimeout(() => { + setTimeout(() => { + setTransformState(0, "wobbleStrength"); + setTransformState(-0.4, "rotX"); + setRotating(true); + }, 500); + + // reset anim duration back to default + setTimeout(() => { + setAnimDuration(600); + }, 900); + + setTimeout(() => { + setTransformState(0.13, "posY"); + }, 900); + + // reset the rotation value to 0 + setTimeout(() => { + setTransformState(0, "rotX"); + setTransformState(-0.11, "posY"); + }, 1150); + }, 1000); + }, [setAnimDuration, setRotating, setTransformState]); + const dispatchObject = useCallback( (eventState: { event: string }) => { switch (eventState.event) { @@ -152,15 +214,21 @@ const MiddleRingManager = (props: any) => { return { action: rotate, value: ["left"] }; case "site_right": return { action: rotate, value: ["right"] }; + case "pause_game": + return { action: animatePause }; + case "pause_exit_select": + case "pause_change_select": + return { action: animateUnpause }; } }, - [moveDown, moveUp, rotate] + [animatePause, animateUnpause, moveDown, moveUp, rotate] ); useEffect(() => { if (props.eventState) { const dispatchedObject = dispatchObject(props.eventState); if (dispatchedObject) { + console.log(dispatchedObject); dispatchedObject.action.apply(null, dispatchedObject.value as any); } } diff --git a/src/core/StateManagers/MainSceneManagers/SiteManager.tsx b/src/core/StateManagers/MainSceneManagers/SiteManager.tsx index abbe0d2..4eb0a5e 100644 --- a/src/core/StateManagers/MainSceneManagers/SiteManager.tsx +++ b/src/core/StateManagers/MainSceneManagers/SiteManager.tsx @@ -32,7 +32,7 @@ const SiteManager = (props: StateManagerProps) => { return { action: setTransformState, value: [Math.PI / 2, "rotX"], - actionDelay: 0, + actionDelay: 3600, }; case "pause_exit_select": return { diff --git a/src/core/StateManagers/SubsceneManager.tsx b/src/core/StateManagers/SubsceneManager.tsx index c3c1932..59cf632 100644 --- a/src/core/StateManagers/SubsceneManager.tsx +++ b/src/core/StateManagers/SubsceneManager.tsx @@ -27,7 +27,7 @@ const SubsceneManager = (props: StateManagerProps) => { return { action: setMainSubscene, value: "pause", - delay: 0, + delay: 3400, }; case "pause_exit_select": case "pause_change_select": diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index d6767bb..3bfac51 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -8,6 +8,7 @@ import MiddleRing from "../components/MainScene/SyncedComponents/MiddleRing"; import { useMainSceneStore } from "../store"; import Pause from "../components/MainScene/PauseSubscene/Pause"; import SyncedComponentLoader from "../components/MainScene/SyncedComponentLoader"; +import LevelSelection from "../components/MainScene/SyncedComponents/LevelSelection"; const MainScene = () => { const currentSubscene = useMainSceneStore((state) => state.subscene); @@ -27,9 +28,9 @@ const MainScene = () => { - {/**/} - {/**/} - + + + diff --git a/src/store.ts b/src/store.ts index caf5de1..6276a53 100644 --- a/src/store.ts +++ b/src/store.ts @@ -106,6 +106,8 @@ type MiddleRingState = { }; isRotating: boolean; animDuration: number; + mainRingVisible: boolean; + partSeparatorVal: number }; type MediaWordState = { @@ -358,16 +360,21 @@ export const useMiddleRingStore = create( 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) => ({ isRotating: to }), - setAnimDuration: (to: number) => ({ animDuration: 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 })), }) ) );