From 1fae1488b71798ece3782e781f23de91eb419732 Mon Sep 17 00:00:00 2001 From: ad044 Date: Wed, 9 Sep 2020 15:49:33 +0400 Subject: [PATCH] fixed more typing. --- src/components/Game.tsx | 80 +++++++++++++++++++--------- src/components/HUDElement.tsx | 17 +++--- src/components/Hub.tsx | 16 +++--- src/components/Lain.tsx | 1 + src/components/LevelSprite.tsx | 4 +- src/components/Orb.tsx | 2 +- src/components/OrthoCamera.tsx | 5 +- src/components/Preloader.tsx | 5 ++ src/resources/level_sprite_huds.json | 5 -- 9 files changed, 86 insertions(+), 49 deletions(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 638fa50..68d7866 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -25,27 +25,46 @@ 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; }; +type SpriteDirectionData = { + [direction: string]: string; +}; + type SpriteDirections = { - [key: string]: Record; + [sprite_id: string]: SpriteDirectionData; +}; + +type HudShapeData = { + position: number[]; + scale: number[]; + type: string; + initial_position: number[]; +}; + +type SpriteHudData = { + long: HudShapeData; + boring: HudShapeData; + big: HudShapeData; }; -// will fix the typing on this later type SpriteHuds = { - [key: string]: Record | any; + [sprite_hud_id: string]: SpriteHudData; }; +type LainAnimationData = { + frame_count: number; + duration: number; +}; type LainAnimations = { - [key: string]: Record; + [sprite: string]: LainAnimationData; }; const Game = () => { - const [isIntro, setIsIntro] = useState(true); + const [isIntro, setIsIntro] = useState(false); const [isLainMoving, setLainMoving] = useState(false); const [lainMoveState, setLainMoveState] = useState(); @@ -53,7 +72,7 @@ const Game = () => { const [orthoCameraPosY, setOrthoCameraPosY] = useState(0); const [currentSprite, setCurrentSprite] = useState("0422"); - const [currentSpriteHUD, setCurrentSpriteHUD] = useState( + const [currentSpriteHUD, setCurrentSpriteHUD] = useState( (level_sprite_huds as SpriteHuds)[currentSprite.substr(2)] ); const [spriteUpdateCooldown, setSpriteUpdateCooldown] = useState(false); @@ -313,19 +332,6 @@ 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); @@ -351,13 +357,30 @@ const Game = () => { if (groupRef.current!.position.y > 0) { groupRef.current!.position.y -= 0.015; } + if (groupRef.current!.position.z < 0) { groupRef.current!.position.z += 0.04; } + + // if the rotation hits this value that means that the intro is finished. + // using a settimeout or something similar resulted in clunkiness, since it was dependant + // on load times. + if (parseFloat(groupRef.current!.rotation.x.toPrecision(2)) === -0.005) { + updateHUD(); + setLainMoving(false); + setLainMoveState(); + setIsIntro(false); + } } }); - useEffect(doIntro, []); + // on load, move the hud to the right (out of vision), and set lain sprite to intro + useEffect(() => { + setIsIntro(true); + updateHUD(); + setLainMoving(true); + setLainMoveState(); + }, [updateHUD]); // pos-z ? => 3 // rot-x 1.5 => 0 @@ -391,12 +414,19 @@ const Game = () => { longHUDType={currentSpriteHUD!["long"]["type"]} boringHUDType={currentSpriteHUD!["boring"]["type"]} bigHUDType={currentSpriteHUD!["big"]["type"]} - longHUDScale={currentSpriteHUD!["long"]["scale"]} - boringHUDScale={currentSpriteHUD!["boring"]["scale"]} - bigHUDScale={currentSpriteHUD!["big"]["scale"]} + longHUDScale={ + currentSpriteHUD!["long"]["scale"] as [number, number, number] + } + boringHUDScale={ + currentSpriteHUD!["boring"]["scale"] as [number, number, number] + } + bigHUDScale={ + currentSpriteHUD!["big"]["scale"] as [number, number, number] + } orthoCameraPosY={orthoCameraPosY} - id={currentSpriteHUD!["id"]} + id={currentSprite} orbVisibility={!isIntro} + hudVisibility={!isIntro} /> diff --git a/src/components/HUDElement.tsx b/src/components/HUDElement.tsx index e653cd7..66adbb7 100644 --- a/src/components/HUDElement.tsx +++ b/src/components/HUDElement.tsx @@ -7,7 +7,6 @@ import longHud from "../static/sprites/long_hud.png"; import longHudMirrored from "../static/sprites/long_hud_mirrored.png"; import boringHud from "../static/sprites/long_hud_boring.png"; import boringHudMirrored from "../static/sprites/long_hud_boring_mirrored.png"; -import { PositionAndScaleProps } from "./Hub"; import { a, Interpolation } from "@react-spring/three"; export type HUDElementProps = { @@ -17,17 +16,19 @@ export type HUDElementProps = { longHUDPosYZ: [number, number]; longHUDPosX: Interpolation; - longHUDScale: PositionAndScaleProps; + longHUDScale: [number, number, number]; - // boringHudPosition: PositionAndScaleProps; + // boringHudPosition: [number, number, number]; boringHUDPosX: Interpolation; boringHUDPosYZ: [number, number]; - boringHUDScale: PositionAndScaleProps; + boringHUDScale: [number, number, number]; - // bigHudPosition: PositionAndScaleProps; + // bigHudPosition: [number, number, number]; bigHUDPosX: Interpolation; bigHUDPosYZ: [number, number]; - bigHUDScale: PositionAndScaleProps; + bigHUDScale: [number, number, number]; + + hudVisibility: boolean; }; const HUDElement = memo((props: HUDElementProps) => { @@ -74,7 +75,7 @@ const HUDElement = memo((props: HUDElementProps) => { ); return ( - <> + { transparent={true} /> - + ); }); diff --git a/src/components/Hub.tsx b/src/components/Hub.tsx index 22cc556..5676c73 100644 --- a/src/components/Hub.tsx +++ b/src/components/Hub.tsx @@ -4,9 +4,6 @@ import GrayRing from "./GrayRing"; import LevelSprite from "./LevelSprite"; import PurpleRing from "./PurpleRing"; -export type PositionAndScaleProps = [number, number, number]; -export type RotationProps = [number, number, number, (string | undefined)?]; - type HubProps = { currentSprite: string; }; @@ -23,9 +20,16 @@ const Hub = (props: HubProps) => { {Object.values(level_sprites).map((sprite) => { return ( { // any here temporarily const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite); diff --git a/src/components/LevelSprite.tsx b/src/components/LevelSprite.tsx index 2a2f602..9622c66 100644 --- a/src/components/LevelSprite.tsx +++ b/src/components/LevelSprite.tsx @@ -40,8 +40,8 @@ const LevelSprite = memo((props: LevelSpriteConstructorProps) => { const spriteSheet = spriteToPath(props.sprite); - const nonActiveTexture: any = useLoader(THREE.TextureLoader, spriteSheet[0]); - const activeTexture: any = useLoader(THREE.TextureLoader, spriteSheet[1]); + const nonActiveTexture = useLoader(THREE.TextureLoader, spriteSheet[0]); + const activeTexture = useLoader(THREE.TextureLoader, spriteSheet[1]); const uniforms = useMemo( () => ({ diff --git a/src/components/Orb.tsx b/src/components/Orb.tsx index 4dd7143..79566c9 100644 --- a/src/components/Orb.tsx +++ b/src/components/Orb.tsx @@ -16,7 +16,7 @@ const Orb = memo((props: OrbProps) => { const [orbDirection, setOrbDirection] = useState("left"); const [currentCurve, setCurrentCurve] = useState("first"); - const orbSpriteTexture: any = useLoader(THREE.TextureLoader, orbSprite); + const orbSpriteTexture = useLoader(THREE.TextureLoader, orbSprite); // first one goes from up to down left to right const firstCurve = new THREE.QuadraticBezierCurve3( diff --git a/src/components/OrthoCamera.tsx b/src/components/OrthoCamera.tsx index 600c6a5..9436dbf 100644 --- a/src/components/OrthoCamera.tsx +++ b/src/components/OrthoCamera.tsx @@ -7,7 +7,7 @@ import Orb from "./Orb"; interface OrthoCameraProps extends HUDElementProps { id: string; orthoCameraPosY: number; - orbVisibility:boolean; + orbVisibility: boolean; } const OrthoCamera = (props: OrthoCameraProps) => { @@ -43,8 +43,9 @@ const OrthoCamera = (props: OrthoCameraProps) => { bigHUDPosX={props.bigHUDPosX} bigHUDScale={props.bigHUDScale} key={props.id} + hudVisibility={props.hudVisibility} /> - + ); }; diff --git a/src/components/Preloader.tsx b/src/components/Preloader.tsx index fc39fbf..70a73c9 100644 --- a/src/components/Preloader.tsx +++ b/src/components/Preloader.tsx @@ -1,3 +1,4 @@ +import introSpriteSheet from "../static/sprites/intro.png"; import moveDownSpriteSheet from "../static/sprites/jump_down.png"; import moveUpSpriteSheet from "../static/sprites/jump_up.png"; import standingSpriteSheet from "../static/sprites/standing.png"; @@ -9,6 +10,7 @@ import longHudSpriteSheet from "../static/sprites/long_hud.png"; import longHudMirroredSpriteSheet from "../static/sprites/long_hud_mirrored.png"; import boringHudSpriteSheet from "../static/sprites/long_hud_boring.png"; import boringHudMirroredSpriteSheet from "../static/sprites/long_hud_boring_mirrored.png"; + import * as THREE from "three"; import { useLoader, useThree } from "react-three-fiber"; import { useLayoutEffect } from "react"; @@ -16,6 +18,7 @@ import { useLayoutEffect } from "react"; // this function just preloads lain's spritesheets and other assets cuz they're big and lazy loading them // used to make the suspense run for a couple milliseconds, resulting in flickering const Preloader = () => { + const intro = useLoader(THREE.TextureLoader, introSpriteSheet); const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet); const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet); const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet); @@ -39,6 +42,7 @@ const Preloader = () => { const { gl } = useThree(); useLayoutEffect(() => { + gl.initTexture(intro); gl.initTexture(moveDown); gl.initTexture(moveUp); gl.initTexture(moveLeft); @@ -63,6 +67,7 @@ const Preloader = () => { boringHudMirrored, longHud, longHudMirrored, + intro, ]); return null; }; diff --git a/src/resources/level_sprite_huds.json b/src/resources/level_sprite_huds.json index 99a6be0..7f0d260 100644 --- a/src/resources/level_sprite_huds.json +++ b/src/resources/level_sprite_huds.json @@ -1,6 +1,5 @@ { "22": { - "id": "22hud", "long": { "position": [-0.45, 0.15, -8.6], "scale": [1, 0.03, 1], @@ -21,7 +20,6 @@ } }, "14": { - "id": "14hud", "long": { "position": [-0.45, -0.09, -8.6], "scale": [1, 0.03, 1], @@ -42,7 +40,6 @@ } }, "13": { - "id": "13hud", "long": { "position": [0.85, -0.09, -8.6], "scale": [1, 0.03, 1], @@ -63,7 +60,6 @@ } }, "05": { - "id": "05hud", "long": { "position": [0.85, -0.32, -8.6], "scale": [1, 0.03, 1], @@ -84,7 +80,6 @@ } }, "06": { - "id": "06hud", "long": { "position": [-0.43, -0.32, -8.6], "scale": [1, 0.03, 1],