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

cleaned up global state after inputhandler refactor

Browse source
This commit is contained in:
ad044 2020-10-06 23:50:54 +04:00
parent a94f701d3e
commit c71a8eae5b
15 changed files with 178 additions and 307 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/BlueOrb/BlueOrb.tsx
View file

@ -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 (
<group position={[0, (level_y_values as LevelYValues)[props.level], 0]}>
<a.mesh

22
src/components/GrayPlanes/GrayPlanes.tsx
View file

@ -1,19 +1,12 @@
import React, { createRef, memo, RefObject, useRef } from "react";
import * as THREE from "three";
import { useFrame } from "react-three-fiber";
import { a, useSpring } from "@react-spring/three";
import { useRecoilValue } from "recoil";
import {
grayPlanesPosYAtom,
grayPlanesRotYAtom,
grayPlanesVisibleAtom,
} from "./GrayPlanesAtom";
import { grayPlanesVisibleAtom } from "./GrayPlanesAtom";
const GrayPlanes = memo(() => {
const grayPlaneGroupRef = useRef<THREE.Object3D>();
const grayPlanePosY = useRecoilValue(grayPlanesPosYAtom);
const grayPlaneRotY = useRecoilValue(grayPlanesRotYAtom);
const grayPlanesVisible = useRecoilValue(grayPlanesVisibleAtom);
const grayPlanePoses = [
@ -37,18 +30,10 @@ 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]
<a.group rotation-y={grayPlaneState.grayPlaneRotY}>
<a.group
<group
position={[0.1, 0, -2]}
position-y={grayPlaneState.grayPlanePosY}
ref={grayPlaneGroupRef}
visible={grayPlanesVisible}
>
@ -71,8 +56,7 @@ const GrayPlanes = memo(() => {
</mesh>
);
})}
</a.group>
</a.group>
</group>
);
});

10
src/components/GrayPlanes/GrayPlanesAtom.tsx
View file

@ -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,

8
src/components/InputHandler.tsx
View file

@ -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(() => {

16
src/components/Lain/Lain.tsx
View file

@ -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,7 +9,7 @@ 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;
@ -116,21 +115,12 @@ export const LainMoveUp = () => {
const Lain = () => {
const lainMoving = useRecoilValue(lainMovingAtom);
const lainMoveState = useRecoilValue(lainMoveStateAtom);
const lainPosY = useRecoilValue(lainPosYAtom);
const lainPosYState = useSpring({
lainPosY: lainPosY,
config: { duration: 1200 },
});
return (
<Suspense fallback={<>loading...</>}>
<a.sprite
position-y={lainPosYState.lainPosY}
scale={[4.5, 4.5, 4.5]}
>
<sprite scale={[4.5, 4.5, 4.5]} position={[0, -0.15, 0]}>
{lainMoving ? lainMoveState : <LainStanding />}
</a.sprite>
</sprite>
</Suspense>
);
};

10
src/components/Lain/LainAtom.tsx
View file

@ -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,

14
src/components/Lights.tsx Normal file
View file

@ -0,0 +1,14 @@
import React, { memo } from "react";
const Lights = memo(() => {
return (
<>
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
</>
);
});
export default Lights;

30
src/components/Lights/Lights.tsx
View file

@ -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 (
<a.group
position-y={lightState.lightPosY}
rotation-y={lightState.lightRotY}
>
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
</a.group>
);
});
export default Lights;

11
src/components/Lights/LightsAtom.tsx
View file

@ -1,11 +0,0 @@
import { atom } from "recoil";
export const lightPosYAtom = atom({
key: "lightPosYAtom",
default: 0,
});
export const lightRotYAtom = atom({
key: "lightRotYAtom",
default: 0,
});

12
src/components/MainScene/CameraAtom.tsx
View file

@ -1,12 +0,0 @@
import { atom } from "recoil";
export const camRotYAtom = atom({
key: "camRotYAtom",
default: 0,
});
export const camPosYAtom = atom({
key: "camPosYAtom",
default: 0,
});

26
src/components/MainScene/MainScene.tsx
View file

@ -2,14 +2,12 @@ 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 {
@ -19,6 +17,7 @@ import {
} from "./MainGroupAtom";
import GrayPlanes from "../GrayPlanes/GrayPlanes";
import MiddleRing from "../MiddleRing/MiddleRing";
import Starfield from "../Starfield/Starfield";
const MainScene = () => {
const setLainMoving = useSetRecoilState(lainMovingAtom);
@ -27,15 +26,6 @@ const MainScene = () => {
const mainGroupPosZ = useRecoilValue(mainGroupPosZAtom);
const mainGroupRotX = useRecoilValue(mainGroupRotXAtom);
const camPosY = useRecoilValue(camPosYAtom);
const camRotY = useRecoilValue(camRotYAtom);
const cameraState = useSpring({
camPosY: camPosY,
camRotY: camRotY,
config: { duration: 1200 },
});
const mainGroupStatePos = useSpring({
mainGroupPosY: mainGroupPosY,
mainGroupPosZ: mainGroupPosZ,
@ -54,11 +44,7 @@ const MainScene = () => {
}, [setLainMoveState, setLainMoving]);
return (
<a.perspectiveCamera
position-z={3}
position-y={cameraState.camPosY}
rotation-y={cameraState.camRotY}
>
<perspectiveCamera position-z={3}>
<Suspense fallback={null}>
<MainSceneIntro />
<a.group
@ -70,7 +56,7 @@ const MainScene = () => {
<Preloader />
<Site />
<OrthoCamera />
{/*<Starfield />*/}
<Starfield />
<GrayPlanes />
<Lights />
<MiddleRing />
@ -78,7 +64,7 @@ const MainScene = () => {
</a.group>
<Lain />
</Suspense>
</a.perspectiveCamera>
</perspectiveCamera>
);
};
export default MainScene;

7
src/components/MiddleRing/MiddleRing.tsx
View file

@ -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 (
<a.group
rotation-z={middleRingRotState.middleRingRotZ}
rotation-y={middleRingRotState.middleRingRotY}
>
<a.mesh
position={[0, 0, 0.3]}

5
src/components/MiddleRing/MiddleRingAtom.tsx
View file

@ -30,11 +30,6 @@ export const middleRingRotZAtom = atom({
default: 0,
});
export const middleRingRotYAtom = atom({
key: "middleRingRotYAtom",
default: 0,
});
export const middleRingAnimDurationAtom = atom({
key: "middleRingAnimDurationAtom",
default: 500,

10
src/components/Starfield/Starfield.tsx
View file

@ -6,8 +6,6 @@ import {
introStarfieldVisibilityAtom,
mainStarfieldBoostValAtom,
mainStarfieldVisibilityAtom,
starfieldPosYAtom,
starfieldRotYAtom,
} from "./StarfieldAtom";
import { useRecoilValue } from "recoil";
@ -37,17 +35,12 @@ type IntroStarfieldObjectData = {
const Starfield = memo(() => {
const introStarfieldGroupRef = useRef<THREE.Object3D>();
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(() => {
<a.group
position={[-0.7, 0, -5]}
rotation={[0, 0, 0]}
position-y={starfieldState.starfieldPosY}
rotation-y={starfieldState.starfieldRotY}
position-y={-1}
visible={mainStarfieldVisible}
>
{mainStarfieldObjects.map((obj: StarfieldObjectData) =>

10
src/components/Starfield/StarfieldAtom.tsx
View file

@ -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,