fixed more typing.

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<string, string>;
+  [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<string, any> | any;
+  [sprite_hud_id: string]: SpriteHudData;
 };
 
+type LainAnimationData = {
+  frame_count: number;
+  duration: number;
+};
 type LainAnimations = {
-  [key: string]: Record<string, number>;
+  [sprite: string]: LainAnimationData;
 };
 
 const Game = () => {
-  const [isIntro, setIsIntro] = useState(true);
+  const [isIntro, setIsIntro] = useState(false);
 
   const [isLainMoving, setLainMoving] = useState(false);
   const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
@@ -53,7 +72,7 @@ const Game = () => {
   const [orthoCameraPosY, setOrthoCameraPosY] = useState(0);
 
   const [currentSprite, setCurrentSprite] = useState("0422");
-  const [currentSpriteHUD, setCurrentSpriteHUD] = useState<SpriteHuds>(
+  const [currentSpriteHUD, setCurrentSpriteHUD] = useState<SpriteHudData>(
     (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(<LainIntro />);
-    updateHUD();
-
-    setTimeout(() => {
-      setLainMoving(false);
-      setLainMoveState(<LainStanding />);
-      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(<LainStanding />);
+        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(<LainIntro />);
+  }, [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"]}
+            longHUDScale={
-            boringHUDScale={currentSpriteHUD!["boring"]["scale"]}
+              currentSpriteHUD!["long"]["scale"] as [number, number, number]
-            bigHUDScale={currentSpriteHUD!["big"]["scale"]}
+            }
+            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}
           />
           <Starfield starfieldPosY={starfieldPosY} />
           <Lights />

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<number, number>;
-  longHUDScale: PositionAndScaleProps;
+  longHUDScale: [number, number, number];
 
-  // boringHudPosition: PositionAndScaleProps;
+  // boringHudPosition: [number, number, number];
   boringHUDPosX: Interpolation<number, number>;
   boringHUDPosYZ: [number, number];
-  boringHUDScale: PositionAndScaleProps;
+  boringHUDScale: [number, number, number];
 
-  // bigHudPosition: PositionAndScaleProps;
+  // bigHudPosition: [number, number, number];
   bigHUDPosX: Interpolation<number, number>;
   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 (
-    <>
+    <group visible={props.hudVisibility}>
       <a.sprite
         position-y={props.longHUDPosYZ[0]}
         position-z={props.longHUDPosYZ[1]}
@@ -111,7 +112,7 @@ const HUDElement = memo((props: HUDElementProps) => {
           transparent={true}
         />
       </a.sprite>
-    </>
+    </group>
   );
 });
 

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 (
             <LevelSprite
-              position={sprite.position as PositionAndScaleProps}
+              position={sprite.position as [number, number, number]}
-              scale={sprite.scale as PositionAndScaleProps}
+              scale={sprite.scale as [number, number, number]}
-              rotation={sprite.rotation as RotationProps}
+              rotation={
+                sprite.rotation as [
+                  number,
+                  number,
+                  number,
+                  (string | undefined)?
+                ]
+              }
               sprite={sprite.sprite}
               key={sprite.id}
               active={sprite.id === props.currentSprite}

src/components/Lain.tsx

@@ -23,6 +23,7 @@ type LainConstructorProps = {
   framesHorizontal: number;
 };
 
+
 const LainConstructor = (props: LainConstructorProps) => {
   // any here temporarily
   const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite);

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 nonActiveTexture = useLoader(THREE.TextureLoader, spriteSheet[0]);
-  const activeTexture: any = useLoader(THREE.TextureLoader, spriteSheet[1]);
+  const activeTexture = useLoader(THREE.TextureLoader, spriteSheet[1]);
 
   const uniforms = useMemo(
     () => ({

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(

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}
       />
-      <Orb orbVisibility={props.orbVisibility}/>
+      <Orb orbVisibility={props.orbVisibility} />
     </orthographicCamera>
   );
 };

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;
 };

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