From 42e73baddee775a40efc3544dbf9d472e4a3155e Mon Sep 17 00:00:00 2001 From: ad044 Date: Wed, 9 Sep 2020 01:17:50 +0400 Subject: [PATCH] fixed most typing, more refactoring on starfield --- src/components/Game.tsx | 46 +++++++------ src/components/HUDElement.tsx | 12 ++-- src/components/Hub.tsx | 10 ++- src/components/Intro.tsx | 6 +- src/components/LevelSprite.tsx | 4 +- src/components/Orb.tsx | 10 +-- src/components/PurpleRing.tsx | 6 +- src/components/Starfield.tsx | 114 +++++++++++++++++---------------- 8 files changed, 111 insertions(+), 97 deletions(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 3943183..638fa50 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -25,6 +25,7 @@ import OrthoCamera from "./OrthoCamera"; import Preloader from "./Preloader"; import Starfield from "./Starfield"; import * as THREE from "three"; +import Orb from "./Orb"; type KeyCodeAssociations = { [keyCode: number]: string; @@ -312,6 +313,19 @@ const Game = () => { [isLainMoving, currentSprite, moveDispatcher] ); + const doIntro = useCallback(() => { + setLainMoving(true); + setLainMoveState(); + updateHUD(); + + setTimeout(() => { + setLainMoving(false); + setLainMoveState(); + setIsIntro(false); + updateHUD(); + }, (lain_animations as LainAnimations)["intro"]["duration"]); + }, [updateHUD]); + useEffect(() => { window.addEventListener("keydown", handleKeyPress); @@ -323,37 +337,27 @@ const Game = () => { }; }, [handleKeyPress]); - const groupRef = useRef(); + const groupRef = useRef(); useFrame(() => { if (isIntro) { - if ((groupRef.current as any).rotation.x > 0) { - if ((groupRef.current as any).position.z > -1) { - (groupRef.current as any).rotation.x -= 0.015; + if (groupRef.current!.rotation.x > 0) { + if (groupRef.current!.position.z > -1) { + groupRef.current!.rotation.x -= 0.015; } else { - (groupRef.current as any).rotation.x -= 0.01; + groupRef.current!.rotation.x -= 0.01; } } - if ((groupRef.current as any).position.y > 0) { - (groupRef.current as any).position.y -= 0.015; + if (groupRef.current!.position.y > 0) { + groupRef.current!.position.y -= 0.015; } - if ((groupRef.current as any).position.z < 0) { - (groupRef.current as any).position.z += 0.04; + if (groupRef.current!.position.z < 0) { + groupRef.current!.position.z += 0.04; } } }); - useEffect(() => { - setLainMoving(true); - setLainMoveState(); - updateHUD(); - setTimeout(() => { - setLainMoving(false); - setLainMoveState(); - setIsIntro(false); - updateHUD(); - }, (lain_animations as LainAnimations)["intro"]["duration"]); - }, [updateHUD]); + useEffect(doIntro, []); // pos-z ? => 3 // rot-x 1.5 => 0 @@ -366,7 +370,6 @@ const Game = () => { > - { /> + ; + longHUDPosX: Interpolation; longHUDScale: PositionAndScaleProps; // boringHudPosition: PositionAndScaleProps; - boringHUDPosX: Interpolation; + boringHUDPosX: Interpolation; boringHUDPosYZ: [number, number]; boringHUDScale: PositionAndScaleProps; // bigHudPosition: PositionAndScaleProps; - bigHUDPosX: Interpolation; + bigHUDPosX: Interpolation; bigHUDPosYZ: [number, number]; bigHUDScale: PositionAndScaleProps; }; @@ -58,17 +58,17 @@ const HUDElement = memo((props: HUDElementProps) => { } }; - const longHudTexture: any = useLoader( + const longHudTexture = useLoader( THREE.TextureLoader, spriteTypeToSprite(props.longHUDType, "long")! ); - const longHudBoringTexture: any = useLoader( + const longHudBoringTexture = useLoader( THREE.TextureLoader, spriteTypeToSprite(props.boringHUDType, "boring")! ); - const bigHudTexture: any = useLoader( + const bigHudTexture = useLoader( THREE.TextureLoader, spriteTypeToSprite(props.bigHUDType, "big")! ); diff --git a/src/components/Hub.tsx b/src/components/Hub.tsx index 6daa14d..22cc556 100644 --- a/src/components/Hub.tsx +++ b/src/components/Hub.tsx @@ -7,14 +7,18 @@ import PurpleRing from "./PurpleRing"; export type PositionAndScaleProps = [number, number, number]; export type RotationProps = [number, number, number, (string | undefined)?]; -const Hub = (props: any) => { +type HubProps = { + currentSprite: string; +}; + +const Hub = (props: HubProps) => { return ( <> loading...}> {/* average distance between rings from my CALCULATIONS is 1.87 in our case */} - + - + {Object.values(level_sprites).map((sprite) => { return ( diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx index a5ea7fd..1706579 100644 --- a/src/components/Intro.tsx +++ b/src/components/Intro.tsx @@ -46,7 +46,11 @@ const FirstMarq: React.FC = () => { ); }; -const Intro = (props: any) => { +type IntroProps = { + setMoveToGame: React.Dispatch>; +}; + +const Intro = (props: IntroProps) => { const [looping, setLooping] = useState(true); const [isArrowUp, setIsArrowUp] = useState(true); diff --git a/src/components/LevelSprite.tsx b/src/components/LevelSprite.tsx index 2b59ea4..2a2f602 100644 --- a/src/components/LevelSprite.tsx +++ b/src/components/LevelSprite.tsx @@ -36,7 +36,7 @@ const LevelSprite = memo((props: LevelSpriteConstructorProps) => { } as SpriteToPath)[sprite]; }; - const materialRef = useRef(); + const materialRef = useRef(); const spriteSheet = spriteToPath(props.sprite); @@ -82,7 +82,7 @@ const LevelSprite = memo((props: LevelSpriteConstructorProps) => { useFrame(() => { if (materialRef.current) { - (materialRef.current! as any).uniforms.timeMSeconds.value = + materialRef.current.uniforms.timeMSeconds.value = (Date.now() % (Math.PI * 2000)) / 1000.0; } }); diff --git a/src/components/Orb.tsx b/src/components/Orb.tsx index 2368020..4dd7143 100644 --- a/src/components/Orb.tsx +++ b/src/components/Orb.tsx @@ -12,7 +12,7 @@ type OrbProps = { }; const Orb = memo((props: OrbProps) => { - const orbRef = useRef(); + const orbRef = useRef(); const [orbDirection, setOrbDirection] = useState("left"); const [currentCurve, setCurrentCurve] = useState("first"); @@ -97,11 +97,11 @@ const Orb = memo((props: OrbProps) => { } if (currentCurve === "first") { - (orbRef.current as any).position.x = orbPosFirst.x; - (orbRef.current as any).position.y = orbPosFirst.y; + orbRef.current!.position.x = orbPosFirst.x; + orbRef.current!.position.y = orbPosFirst.y; } else { - (orbRef.current as any).position.x = orbPosSecond.x; - (orbRef.current as any).position.y = orbPosSecond.y; + orbRef.current!.position.x = orbPosSecond.x; + orbRef.current!.position.y = orbPosSecond.y; } } }); diff --git a/src/components/PurpleRing.tsx b/src/components/PurpleRing.tsx index 87518fa..ac5b3e8 100644 --- a/src/components/PurpleRing.tsx +++ b/src/components/PurpleRing.tsx @@ -1,5 +1,5 @@ import { draco } from "drei"; -import React, { memo, useRef } from "react"; +import React, { memo, RefObject, useRef } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; @@ -16,7 +16,7 @@ type GLTFResult = GLTF & { }; const PurpleRing = memo((props: PurpleRingProps) => { - const purpleRingRef = useRef(); + const purpleRingRef = useRef(); const { nodes } = useLoader( GLTFLoader, @@ -25,7 +25,7 @@ const PurpleRing = memo((props: PurpleRingProps) => { ); useFrame(() => { - (purpleRingRef.current as any).rotation.y += 0.01; + purpleRingRef.current!.rotation.y += 0.01; }); return ( diff --git a/src/components/Starfield.tsx b/src/components/Starfield.tsx index 8d75faa..c7a654b 100644 --- a/src/components/Starfield.tsx +++ b/src/components/Starfield.tsx @@ -1,8 +1,13 @@ -import { Interpolation, a } from "@react-spring/three"; -import React, { createRef, memo, useMemo, useRef } from "react"; +import { a, Interpolation } from "@react-spring/three"; +import React, { createRef, memo, RefObject, useMemo, useRef } from "react"; import { useFrame } from "react-three-fiber"; import * as THREE from "three"; +type StarRefsAndIncrementors = [ + React.MutableRefObject[]>, + number +][]; + type StarfieldProps = { starfieldPosY: Interpolation; }; @@ -79,53 +84,50 @@ const Starfield = memo((props: StarfieldProps) => { posesCyanFromRight, posesCyanFromLeft, posesWhiteFromLeft, - ].map((poses) => useRef(poses.map(() => createRef()))); + ].map((poses) => + useRef[]>( + poses.map(() => createRef()) + ) + ); + + // these arrays contain refs to the 3d planes and the increment values that they should move with across + // the screen + const fromRightStarRefsAndIncrementors: StarRefsAndIncrementors = [ + [blueFromRightRef, 7.3], + [cyanFromRightRef, 4.3], + ]; + + const fromLeftStarRefsAndIncrementors: StarRefsAndIncrementors = [ + [blueFromLeftRef, 8.3], + [cyanFromLeftRef, 3.3], + [whiteFromLeftRef, 3.3], + ]; useFrame(() => { - blueFromRightRef.current.forEach((ref) => { - if ((ref.current as any).position.x < -1) { - (ref.current as any).position.x += 7.3; - (ref.current as any).position.z -= 7.3; - } else { - (ref.current as any).position.x -= 0.03; - (ref.current as any).position.z += 0.03; - } + // planes (stars) coming from right move to positive X and negative Z direction + fromRightStarRefsAndIncrementors.forEach((el) => { + el[0].current.forEach((posRef: RefObject) => { + if (posRef.current!.position.x < -1) { + posRef.current!.position.x += el[1]; + posRef.current!.position.z -= el[1]; + } else { + posRef.current!.position.x -= 0.03; + posRef.current!.position.z += 0.03; + } + }); }); - blueFromLeftRef.current.forEach((ref) => { - if ((ref.current as any).position.x > 3) { - (ref.current as any).position.x -= 8.3; - (ref.current as any).position.z -= 8.3; - } else { - (ref.current as any).position.x += 0.03; - (ref.current as any).position.z += 0.03; - } - }); - cyanFromRightRef.current.forEach((ref) => { - if ((ref.current as any).position.x < -1) { - (ref.current as any).position.x += 4.3; - (ref.current as any).position.z -= 4.3; - } else { - (ref.current as any).position.x -= 0.03; - (ref.current as any).position.z += 0.03; - } - }); - cyanFromLeftRef.current.forEach((ref) => { - if ((ref.current as any).position.x > 3) { - (ref.current as any).position.x -= 3.3; - (ref.current as any).position.z -= 3.3; - } else { - (ref.current as any).position.x += 0.03; - (ref.current as any).position.z += 0.03; - } - }); - whiteFromLeftRef.current.forEach((ref) => { - if ((ref.current as any).position.x > 3) { - (ref.current as any).position.x -= 3.3; - (ref.current as any).position.z -= 3.3; - } else { - (ref.current as any).position.x += 0.02; - (ref.current as any).position.z += 0.02; - } + + // the ones that are coming from left move to negative X and Z + fromLeftStarRefsAndIncrementors.forEach((el) => { + el[0].current.forEach((posRef: RefObject) => { + if (posRef.current!.position.x > 3) { + posRef.current!.position.x -= el[1]; + posRef.current!.position.z -= el[1]; + } else { + posRef.current!.position.x += 0.03; + posRef.current!.position.z += 0.03; + } + }); }); }); @@ -135,10 +137,10 @@ const Starfield = memo((props: StarfieldProps) => { rotation={[0, 0, 0]} position-y={props.starfieldPosY} > - {posesBlueFromRight.map((pos: any, idx: number) => { + {posesBlueFromRight.map((pos: number[], idx: number) => { return ( { ); })} - {posesBlueFromLeft.map((pos: any, idx: number) => { + {posesBlueFromLeft.map((pos: number[], idx: number) => { return ( { ); })} - {posesCyanFromRight.map((pos: any, idx: number) => { + {posesCyanFromRight.map((pos: number[], idx: number) => { return ( { ); })} - {posesCyanFromLeft.map((pos: any, idx: number) => { + {posesCyanFromLeft.map((pos: number[], idx: number) => { return ( { ); })} - {posesWhiteFromLeft.map((pos: any, idx: number) => { + {posesWhiteFromLeft.map((pos: number[], idx: number) => { return (