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

fixed most typing, more refactoring on starfield

Browse source
This commit is contained in:
ad044 2020-09-09 01:17:50 +04:00
parent 6f5af7dbef
commit 42e73badde
8 changed files with 111 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/Game.tsx
View file

@ -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(<LainIntro />);
updateHUD();
setTimeout(() => {
setLainMoving(false);
setLainMoveState(<LainStanding />);
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<THREE.Object3D>();
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(<LainIntro />);
updateHUD();
setTimeout(() => {
setLainMoving(false);
setLainMoveState(<LainStanding />);
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 = () => {
>
<group rotation={[2.3, 0, 0]} position={[0, 1.5, -7.5]} ref={groupRef}>
<Suspense fallback={null}>
<OrbitControls />
<Preloader />
<Hub currentSprite={currentSprite} />
<OrthoCamera
@ -397,6 +400,7 @@ const Game = () => {
/>
<Starfield starfieldPosY={starfieldPosY} />
<Lights />
<OrbitControls />
</Suspense>
</group>
<Lain

12
src/components/HUDElement.tsx
View file

@ -16,16 +16,16 @@ export type HUDElementProps = {
bigHUDType: string;
longHUDPosYZ: [number, number];
longHUDPosX: Interpolation<number, any>;
longHUDPosX: Interpolation<number, number>;
longHUDScale: PositionAndScaleProps;
// boringHudPosition: PositionAndScaleProps;
boringHUDPosX: Interpolation<number, any>;
boringHUDPosX: Interpolation<number, number>;
boringHUDPosYZ: [number, number];
boringHUDScale: PositionAndScaleProps;
// bigHudPosition: PositionAndScaleProps;
bigHUDPosX: Interpolation<number, any>;
bigHUDPosX: Interpolation<number, number>;
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")!
);

10
src/components/Hub.tsx
View file

@ -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 (
<>
<Suspense fallback={<>loading...</>}>
{/* average distance between rings from my CALCULATIONS is 1.87 in our case */}
<PurpleRing purpleRingPosY={2.27}/>
<PurpleRing purpleRingPosY={2.27} />
<GrayRing grayRingPosY={1.6} />
<PurpleRing purpleRingPosY={0.4}/>
<PurpleRing purpleRingPosY={0.4} />
<GrayRing grayRingPosY={-0.27} />
{Object.values(level_sprites).map((sprite) => {
return (

6
src/components/Intro.tsx
View file

@ -46,7 +46,11 @@ const FirstMarq: React.FC = () => {
);
};
const Intro = (props: any) => {
type IntroProps = {
setMoveToGame: React.Dispatch<React.SetStateAction<boolean>>;
};
const Intro = (props: IntroProps) => {
const [looping, setLooping] = useState(true);
const [isArrowUp, setIsArrowUp] = useState(true);

4
src/components/LevelSprite.tsx
View file

@ -36,7 +36,7 @@ const LevelSprite = memo((props: LevelSpriteConstructorProps) => {
} as SpriteToPath)[sprite];
};
const materialRef = useRef();
const materialRef = useRef<THREE.ShaderMaterial>();
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;
}
});

10
src/components/Orb.tsx
View file

@ -12,7 +12,7 @@ type OrbProps = {
};
const Orb = memo((props: OrbProps) => {
const orbRef = useRef();
const orbRef = useRef<THREE.Object3D>();
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;
}
}
});

6
src/components/PurpleRing.tsx
View file

@ -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<THREE.Object3D>();
const { nodes } = useLoader<GLTFResult>(
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 (

114
src/components/Starfield.tsx
View file

@ -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<React.RefObject<THREE.Object3D>[]>,
number
][];
type StarfieldProps = {
starfieldPosY: Interpolation<number, number>;
};
@ -79,53 +84,50 @@ const Starfield = memo((props: StarfieldProps) => {
posesCyanFromRight,
posesCyanFromLeft,
posesWhiteFromLeft,
].map((poses) => useRef(poses.map(() => createRef())));
].map((poses) =>
useRef<RefObject<THREE.Object3D>[]>(
poses.map(() => createRef<THREE.Object3D>())
)
);
// 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<THREE.Object3D>) => {
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<THREE.Object3D>) => {
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 (
<mesh
ref={(blueFromRightRef.current as any)[idx]}
ref={blueFromRightRef.current[idx]}
scale={[0.01, 2, 1]}
rotation={[1.7, 0, 0.9]}
position={[pos[0], pos[1], pos[2]]}
@ -158,10 +160,10 @@ const Starfield = memo((props: StarfieldProps) => {
</mesh>
);
})}
{posesBlueFromLeft.map((pos: any, idx: number) => {
{posesBlueFromLeft.map((pos: number[], idx: number) => {
return (
<mesh
ref={(blueFromLeftRef.current as any)[idx]}
ref={blueFromLeftRef.current[idx]}
scale={[0.01, 2, 1]}
rotation={[1.7, 0, -0.9]}
position={[pos[0] - 2.4, pos[1] - 0.5, pos[2]]}
@ -181,10 +183,10 @@ const Starfield = memo((props: StarfieldProps) => {
</mesh>
);
})}
{posesCyanFromRight.map((pos: any, idx: number) => {
{posesCyanFromRight.map((pos: number[], idx: number) => {
return (
<mesh
ref={(cyanFromRightRef.current as any)[idx]}
ref={cyanFromRightRef.current[idx]}
scale={[0.01, 0.9, 1]}
position={[pos[0] - 1.3, pos[1], pos[2] + 1.5]}
rotation={[1.7, 0, 0.9]}
@ -204,10 +206,10 @@ const Starfield = memo((props: StarfieldProps) => {
</mesh>
);
})}
{posesCyanFromLeft.map((pos: any, idx: number) => {
{posesCyanFromLeft.map((pos: number[], idx: number) => {
return (
<mesh
ref={(cyanFromLeftRef.current as any)[idx]}
ref={cyanFromLeftRef.current[idx]}
scale={[0.01, 0.9, 1]}
position={[pos[0] - 1.3, pos[1], pos[2] + 1.5]}
rotation={[1.7, 0, -0.9]}
@ -227,10 +229,10 @@ const Starfield = memo((props: StarfieldProps) => {
</mesh>
);
})}
{posesWhiteFromLeft.map((pos: any, idx: number) => {
{posesWhiteFromLeft.map((pos: number[], idx: number) => {
return (
<mesh
ref={(whiteFromLeftRef.current as any)[idx]}
ref={whiteFromLeftRef.current[idx]}
scale={[0.01, 0.9, 1]}
position={[pos[0] - 1.3, pos[1] + 0.5, pos[2] + 1.5]}
rotation={[1.7, 0, -0.9]}