From c71a8eae5ba8648c881595bd423881c91bac8c6e Mon Sep 17 00:00:00 2001 From: ad044 Date: Tue, 6 Oct 2020 23:50:54 +0400 Subject: [PATCH] cleaned up global state after inputhandler refactor --- src/components/BlueOrb/BlueOrb.tsx | 4 +- src/components/GrayPlanes/GrayPlanes.tsx | 68 +++---- src/components/GrayPlanes/GrayPlanesAtom.tsx | 10 -- src/components/InputHandler.tsx | 8 +- src/components/Lain/Lain.tsx | 178 +++++++++---------- src/components/Lain/LainAtom.tsx | 10 -- src/components/Lights.tsx | 14 ++ src/components/Lights/Lights.tsx | 30 ---- src/components/Lights/LightsAtom.tsx | 11 -- src/components/MainScene/CameraAtom.tsx | 12 -- src/components/MainScene/MainScene.tsx | 108 +++++------ src/components/MiddleRing/MiddleRing.tsx | 7 +- src/components/MiddleRing/MiddleRingAtom.tsx | 5 - src/components/Starfield/Starfield.tsx | 10 +- src/components/Starfield/StarfieldAtom.tsx | 10 -- 15 files changed, 178 insertions(+), 307 deletions(-) create mode 100644 src/components/Lights.tsx delete mode 100644 src/components/Lights/Lights.tsx delete mode 100644 src/components/Lights/LightsAtom.tsx delete mode 100644 src/components/MainScene/CameraAtom.tsx diff --git a/src/components/BlueOrb/BlueOrb.tsx b/src/components/BlueOrb/BlueOrb.tsx index c83733d..1a8be6c 100644 --- a/src/components/BlueOrb/BlueOrb.tsx +++ b/src/components/BlueOrb/BlueOrb.tsx @@ -1,6 +1,6 @@ import React, { memo, useMemo, useRef } from "react"; import { useFrame, useLoader } from "react-three-fiber"; -import { a, useSpring } from "@react-spring/three"; +import { a } from "@react-spring/three"; import * as THREE from "three"; import Cou from "../../static/sprites/Cou.png"; import CouActive from "../../static/sprites/Cou_active.png"; @@ -17,7 +17,6 @@ import LdaActive from "../../static/sprites/Lda_active.png"; import MULTI from "../../static/sprites/MULTI.png"; import MULTIActive from "../../static/sprites/MULTI_active.png"; import level_y_values from "../../resources/level_y_values.json"; -import { useRecoilValue } from "recoil"; type BlueOrbContructorProps = { sprite: string; @@ -117,7 +116,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => { } }); - return ( { const grayPlaneGroupRef = useRef(); - const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom); - const grayPlaneRotY = useRecoilValue(grayPlanesRotYAtom); const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom); const grayPlanePoses = [ @@ -37,42 +30,33 @@ const GrayPlanes = memo(() => { grayPlaneRefs.forEach((ref: any) => (ref.current!.rotation.y += 0.03)); }); - const grayPlaneState = useSpring({ - grayPlanePosY: grayPlanePosY, - grayPlaneRotY: grayPlaneRotY, - config: { duration: 1200 }, - }); - return ( // separate wrapper group to make it rotate around [0,0,0] - - - {grayPlaneRefs.map((ref, idx: number) => { - return ( - - - - - ); - })} - - + + {grayPlaneRefs.map((ref, idx: number) => { + return ( + + + + + ); + })} + ); }); diff --git a/src/components/GrayPlanes/GrayPlanesAtom.tsx b/src/components/GrayPlanes/GrayPlanesAtom.tsx index beeeae8..acd2050 100644 --- a/src/components/GrayPlanes/GrayPlanesAtom.tsx +++ b/src/components/GrayPlanes/GrayPlanesAtom.tsx @@ -1,15 +1,5 @@ import { atom } from "recoil"; -export const grayPlanesPosYAtom = atom({ - key: "grayPlanesPosYAtom", - default: 0, -}); - -export const grayPlanesRotYAtom = atom({ - key: "grayPlanesRotYAtom", - default: 0, -}); - export const grayPlanesVisibleAtom = atom({ key: "grayPlanesVisibleAtom", default: false, diff --git a/src/components/InputHandler.tsx b/src/components/InputHandler.tsx index 5bfae6d..6174dd5 100644 --- a/src/components/InputHandler.tsx +++ b/src/components/InputHandler.tsx @@ -24,10 +24,10 @@ import { BlueOrbHuds } from "./HUD/HUDElement"; import { middleRingAnimDurationAtom, middleRingNoiseAtom, - middleRingPosYAtom, middleRingRotatingAtom, middleRingRotXAtom, middleRingRotZAtom, + middleRingPosYAtom, middleRingWobbleStrengthAtom, } from "./MiddleRing/MiddleRingAtom"; import { bigLetterOffsetXCoeffAtom } from "./TextRenderer/TextRendererAtom"; @@ -168,7 +168,7 @@ const InputHandler = () => { [setMiddleRingRotZ] ); - const moveMiddleRingUp = useCallback(() => { + const moveMiddleRingDown = useCallback(() => { // make noise appear again setTimeout(() => { setMiddleRingNoise(0.06); @@ -207,7 +207,7 @@ const InputHandler = () => { }, 11600); }, [setMiddleRingNoise, setMiddleRingRotX, setMiddleRingRotating]); - const moveMiddleRingDown = useCallback(() => { + const moveMiddleRingUp = useCallback(() => { // change noise to 0, make the ring bend downwards setTimeout(() => { setMiddleRingNoise(0); @@ -282,7 +282,7 @@ const InputHandler = () => { setMiddleRingAnimDuration(1500); // animate it after setMiddleRingPosY((prev: number) => prev - 1.5); - }, 1100); + }, 1300); // reset anim duration back to default setTimeout(() => { diff --git a/src/components/Lain/Lain.tsx b/src/components/Lain/Lain.tsx index c3892ce..9b1f771 100644 --- a/src/components/Lain/Lain.tsx +++ b/src/components/Lain/Lain.tsx @@ -1,4 +1,3 @@ -import { a, useSpring } from "@react-spring/three"; import React, { Suspense, useState } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; @@ -10,129 +9,120 @@ import moveRightSpriteSheet from "../../static/sprites/move_right.png"; import standingSpriteSheet from "../../static/sprites/standing.png"; import introSpriteSheet from "../../static/sprites/intro.png"; import { useRecoilValue } from "recoil"; -import { lainMoveStateAtom, lainMovingAtom, lainPosYAtom } from "./LainAtom"; +import { lainMoveStateAtom, lainMovingAtom } from "./LainAtom"; type LainConstructorProps = { - sprite: string; - frameCount: number; - framesVertical: number; - framesHorizontal: number; + sprite: string; + frameCount: number; + framesVertical: number; + framesHorizontal: number; }; const LainConstructor = (props: LainConstructorProps) => { - // any here temporarily - const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite); + // any here temporarily + const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite); - const [animator] = useState( - () => - new PlainSingularAnimator( - lainSpriteTexture, - props.framesHorizontal, - props.framesVertical, - props.frameCount, - props.frameCount * 0.27 - ) - ); + const [animator] = useState( + () => + new PlainSingularAnimator( + lainSpriteTexture, + props.framesHorizontal, + props.framesVertical, + props.frameCount, + props.frameCount * 0.27 + ) + ); - useFrame(() => { - animator.animate(); - }); + useFrame(() => { + animator.animate(); + }); - return ( - - ); + return ( + + ); }; export const LainIntro = () => { - return ( - - ); + return ( + + ); }; export const LainStanding = () => { - return ( - - ); + return ( + + ); }; export const LainMoveDown = () => { - return ( - - ); + return ( + + ); }; export const LainMoveLeft = () => { - return ( - - ); + return ( + + ); }; export const LainMoveRight = () => { - return ( - - ); + return ( + + ); }; export const LainMoveUp = () => { - return ( - - ); + return ( + + ); }; const Lain = () => { - const lainMoving = useRecoilValue(lainMovingAtom); - const lainMoveState = useRecoilValue(lainMoveStateAtom); - const lainPosY = useRecoilValue(lainPosYAtom); + const lainMoving = useRecoilValue(lainMovingAtom); + const lainMoveState = useRecoilValue(lainMoveStateAtom); - const lainPosYState = useSpring({ - lainPosY: lainPosY, - config: { duration: 1200 }, - }); - - return ( - loading...}> - - {lainMoving ? lainMoveState : } - - - ); + return ( + loading...}> + + {lainMoving ? lainMoveState : } + + + ); }; export default Lain; diff --git a/src/components/Lain/LainAtom.tsx b/src/components/Lain/LainAtom.tsx index 2cdf421..bfb4522 100644 --- a/src/components/Lain/LainAtom.tsx +++ b/src/components/Lain/LainAtom.tsx @@ -1,16 +1,6 @@ import { atom } from "recoil"; import React from "react"; -export const lainPosYAtom = atom({ - key: "lainPosYAtom", - default: -0.15, -}); - -export const lainRotYAtom = atom({ - key: "lainRotYAtom", - default: 0, -}); - export const lainMovingAtom = atom({ key: "lainMovingAtom", default: false, diff --git a/src/components/Lights.tsx b/src/components/Lights.tsx new file mode 100644 index 0000000..2b92df9 --- /dev/null +++ b/src/components/Lights.tsx @@ -0,0 +1,14 @@ +import React, { memo } from "react"; + +const Lights = memo(() => { + return ( + <> + + + + + + ); +}); + +export default Lights; diff --git a/src/components/Lights/Lights.tsx b/src/components/Lights/Lights.tsx deleted file mode 100644 index 15f9f37..0000000 --- a/src/components/Lights/Lights.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { memo } from "react"; -import { useRecoilValue } from "recoil"; -import { a, useSpring } from "@react-spring/three"; -import { lightPosYAtom, lightRotYAtom } from "./LightsAtom"; - -const Lights = memo(() => { - const lightRotY = useRecoilValue(lightRotYAtom); - const lightPosY = useRecoilValue(lightPosYAtom); - - const lightState = useSpring({ - lightRotY: lightRotY, - lightPosY: lightPosY, - config: { duration: 1200 }, - }); - - return ( - - - - - - - - ); -}); - -export default Lights; diff --git a/src/components/Lights/LightsAtom.tsx b/src/components/Lights/LightsAtom.tsx deleted file mode 100644 index 6667e0b..0000000 --- a/src/components/Lights/LightsAtom.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { atom } from "recoil"; - -export const lightPosYAtom = atom({ - key: "lightPosYAtom", - default: 0, -}); - -export const lightRotYAtom = atom({ - key: "lightRotYAtom", - default: 0, -}); diff --git a/src/components/MainScene/CameraAtom.tsx b/src/components/MainScene/CameraAtom.tsx deleted file mode 100644 index a5ea86a..0000000 --- a/src/components/MainScene/CameraAtom.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { atom } from "recoil"; - -export const camRotYAtom = atom({ - key: "camRotYAtom", - default: 0, -}); - -export const camPosYAtom = atom({ - key: "camPosYAtom", - default: 0, -}); - diff --git a/src/components/MainScene/MainScene.tsx b/src/components/MainScene/MainScene.tsx index 43cd060..37367b7 100644 --- a/src/components/MainScene/MainScene.tsx +++ b/src/components/MainScene/MainScene.tsx @@ -2,83 +2,69 @@ import { a, useSpring } from "@react-spring/three"; import { OrbitControls } from "drei"; import React, { Suspense, useEffect } from "react"; import Site from "../Site/Site"; -import Lain, { LainIntro } from "../Lain/Lain"; -import Lights from "../Lights/Lights"; +import Lain from "../Lain/Lain"; +import Lights from "../Lights"; import OrthoCamera from "../OrthoCamera/OrthoCamera"; import Preloader from "../Preloader"; -import Starfield from "../Starfield/Starfield"; import { useRecoilValue, useSetRecoilState } from "recoil"; import { lainMoveStateAtom, lainMovingAtom } from "../Lain/LainAtom"; -import { camPosYAtom, camRotYAtom } from "./CameraAtom"; import InputHandler from "../InputHandler"; import MainSceneIntro from "./MainSceneIntro"; import { - mainGroupPosYAtom, - mainGroupPosZAtom, - mainGroupRotXAtom, + mainGroupPosYAtom, + mainGroupPosZAtom, + mainGroupRotXAtom, } from "./MainGroupAtom"; import GrayPlanes from "../GrayPlanes/GrayPlanes"; import MiddleRing from "../MiddleRing/MiddleRing"; +import Starfield from "../Starfield/Starfield"; const MainScene = () => { - const setLainMoving = useSetRecoilState(lainMovingAtom); - const setLainMoveState = useSetRecoilState(lainMoveStateAtom); - const mainGroupPosY = useRecoilValue(mainGroupPosYAtom); - const mainGroupPosZ = useRecoilValue(mainGroupPosZAtom); - const mainGroupRotX = useRecoilValue(mainGroupRotXAtom); + const setLainMoving = useSetRecoilState(lainMovingAtom); + const setLainMoveState = useSetRecoilState(lainMoveStateAtom); + const mainGroupPosY = useRecoilValue(mainGroupPosYAtom); + const mainGroupPosZ = useRecoilValue(mainGroupPosZAtom); + const mainGroupRotX = useRecoilValue(mainGroupRotXAtom); - const camPosY = useRecoilValue(camPosYAtom); - const camRotY = useRecoilValue(camRotYAtom); + const mainGroupStatePos = useSpring({ + mainGroupPosY: mainGroupPosY, + mainGroupPosZ: mainGroupPosZ, + config: { duration: 3644 }, + }); - const cameraState = useSpring({ - camPosY: camPosY, - camRotY: camRotY, - config: { duration: 1200 }, - }); + const mainGroupStateRot = useSpring({ + mainGroupRotX: mainGroupRotX, + config: { duration: 1500 }, + }); - const mainGroupStatePos = useSpring({ - mainGroupPosY: mainGroupPosY, - mainGroupPosZ: mainGroupPosZ, - config: { duration: 3644 }, - }); + // set lain intro spritesheet before the page loads fully + useEffect(() => { + // setLainMoving(true); + // setLainMoveState(); + }, [setLainMoveState, setLainMoving]); - const mainGroupStateRot = useSpring({ - mainGroupRotX: mainGroupRotX, - config: { duration: 1500 }, - }); - - // set lain intro spritesheet before the page loads fully - useEffect(() => { - // setLainMoving(true); - // setLainMoveState(); - }, [setLainMoveState, setLainMoving]); - - return ( - + + + - - - - - - - - {/**/} - - - - - - - - - ); + + + + + + + + + + + + + + ); }; export default MainScene; diff --git a/src/components/MiddleRing/MiddleRing.tsx b/src/components/MiddleRing/MiddleRing.tsx index ac54444..c67e876 100644 --- a/src/components/MiddleRing/MiddleRing.tsx +++ b/src/components/MiddleRing/MiddleRing.tsx @@ -5,11 +5,9 @@ import * as THREE from "three"; import { a, useSpring } from "@react-spring/three"; import { middleRingAnimDurationAtom, - middleRingNoiseAtom, - middleRingPosYAtom, + middleRingNoiseAtom, middleRingPosYAtom, middleRingRotatingAtom, middleRingRotXAtom, - middleRingRotYAtom, middleRingRotZAtom, middleRingWobbleStrengthAtom, } from "./MiddleRingAtom"; @@ -24,7 +22,6 @@ const MiddleRing = () => { const middleRingPosY = useRecoilValue(middleRingPosYAtom); const middleRingRotX = useRecoilValue(middleRingRotXAtom); const middleRingRotZ = useRecoilValue(middleRingRotZAtom); - const middleRingRotY = useRecoilValue(middleRingRotYAtom); const middleRingAnimDuration = useRecoilValue(middleRingAnimDurationAtom); @@ -42,7 +39,6 @@ const MiddleRing = () => { const middleRingRotState = useSpring({ middleRingRotX: middleRingRotX, middleRingRotZ: middleRingRotZ, - middleRingRotY: middleRingRotY, config: { duration: 1000 }, }); @@ -218,7 +214,6 @@ const MiddleRing = () => { return ( { const introStarfieldGroupRef = useRef(); - const starfieldPosY = useRecoilValue(starfieldPosYAtom); - const starfieldRotY = useRecoilValue(starfieldRotYAtom); - const introStarfieldVisible = useRecoilValue(introStarfieldVisibilityAtom); const mainStarfieldVisible = useRecoilValue(mainStarfieldVisibilityAtom); const mainStarfieldBoostVal = useRecoilValue(mainStarfieldBoostValAtom); const starfieldState = useSpring({ - starfieldPosY: starfieldPosY, - starfieldRotY: starfieldRotY, starfieldBoostVal: mainStarfieldBoostVal, config: { duration: 1200 }, }); @@ -310,8 +303,7 @@ const Starfield = memo(() => { {mainStarfieldObjects.map((obj: StarfieldObjectData) => diff --git a/src/components/Starfield/StarfieldAtom.tsx b/src/components/Starfield/StarfieldAtom.tsx index c75f774..7d66afb 100644 --- a/src/components/Starfield/StarfieldAtom.tsx +++ b/src/components/Starfield/StarfieldAtom.tsx @@ -1,15 +1,5 @@ import { atom } from "recoil"; -export const starfieldPosYAtom = atom({ - key: "starfieldPosYAtom", - default: -1, -}); - -export const starfieldRotYAtom = atom({ - key: "starfieldRotYAtom", - default: 0, -}); - export const introStarfieldVisibilityAtom = atom({ key: "introStarfieldVisibilityAtom", default: true,