added huds for all 4 current sprites, cleaned up some code

src/components/Game.tsx

@@ -1,24 +1,23 @@
-import { a, useSpring, update } from "@react-spring/three";
+import { a, useSpring } from "@react-spring/three";
 //import Orb from "./Orb";
 import { OrbitControls } from "drei";
 import React, {
   Suspense,
   useCallback,
   useEffect,
-  useState,
+  useState
-  useRef,
 } from "react";
 import { Canvas } from "react-three-fiber";
 import lain_animations from "../resources/lain_animations.json";
 import level_sprite_directions from "../resources/level_sprite_directions.json";
 import level_sprite_huds from "../resources/level_sprite_huds.json";
-import Hub, { PositionAndScaleProps } from "./Hub";
+import Hub from "./Hub";
 import Lain, {
   LainMoveDown,
   LainMoveLeft,
   LainMoveRight,
   LainMoveUp,
-  LainStanding,
+  LainStanding
 } from "./Lain";
 import Lights from "./Lights";
 import OrthoCamera from "./OrthoCamera";
@@ -45,18 +44,44 @@ const Game = () => {
   const [isLainMoving, setLainMoving] = useState(false);
   const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
 
-  const [currentSprite, setCurrentSprite] = useState("043");
+  const [currentSprite, setCurrentSprite] = useState("0422");
   const [currentSpriteHUD, setCurrentSpriteHUD] = useState<SpriteHuds>(
     (level_sprite_huds as SpriteHuds)[currentSprite]
   );
 
-  const [longHUDActive, setLongHUDActive] = useState(1);
+  const [HUDActive, setHUDActive] = useState(1);
 
-  const { longHUDPositionX } = useSpring({
+  const { bigHUDPositionX } = useSpring({
-    longHUDPositionX: longHUDActive,
+    bigHUDPositionX: HUDActive,
     config: { duration: 500 },
   });
 
+  const { longHUDPositionX } = useSpring({
+    longHUDPositionX: HUDActive,
+    config: { duration: 500 },
+  });
+
+  const { boringHUDPositionX } = useSpring({
+    boringHUDPositionX: HUDActive,
+    config: { duration: 500 },
+  });
+
+  const bigHUDPosX = bigHUDPositionX.to(
+    [0, 1],
+    [
+      currentSpriteHUD["big"]["initial_position"][0],
+      currentSpriteHUD["big"]["position"][0],
+    ]
+  );
+
+  const boringHUDPosX = boringHUDPositionX.to(
+    [0, 1],
+    [
+      currentSpriteHUD["boring"]["initial_position"][0],
+      currentSpriteHUD["boring"]["position"][0],
+    ]
+  );
+
   const longHUDPosX = longHUDPositionX.to(
     [0, 1],
     [
@@ -181,8 +206,8 @@ const Game = () => {
   );
 
   const updateHUD = useCallback(() => {
-    setLongHUDActive((prev: number) => Number(!prev));
+    setHUDActive((prev: number) => Number(!prev));
-  }, [setLongHUDActive]);
+  }, [setHUDActive]);
 
   const moveDispatcher = useCallback(
     (move: string, key: string) => {
@@ -262,20 +287,27 @@ const Game = () => {
           <Hub currentSprite={currentSprite} />
           <Lights />
           <OrthoCamera
-            // bigHudPosition={bigHudPosition!}
-            // boringHudPosition={boringHudPosition!}
             longHUDPosX={longHUDPosX}
-            longHudPosition={[
+            bigHUDPosX={bigHUDPosX}
-              currentSpriteHUD!["long"]["position"][0],
+            boringHUDPosX={boringHUDPosX}
+            longHUDPosYZ={[
               currentSpriteHUD!["long"]["position"][1],
               currentSpriteHUD!["long"]["position"][2],
             ]}
-            longHudType={currentSpriteHUD!["long"]["type"]}
+            boringHUDPosYZ={[
-            boringHudType={currentSpriteHUD!["boring"]["type"]}
+              currentSpriteHUD!["boring"]["position"][1],
-            bigHudType={currentSpriteHUD!["big"]["type"]}
+              currentSpriteHUD!["boring"]["position"][2],
-            longHudScale={currentSpriteHUD!["long"]["scale"]}
+            ]}
-            boringHudScale={currentSpriteHUD!["boring"]["scale"]}
+            bigHUDPosYZ={[
-            bigHudScale={currentSpriteHUD!["big"]["scale"]}
+              currentSpriteHUD!["big"]["position"][1],
+              currentSpriteHUD!["big"]["position"][2],
+            ]}
+            longHUDType={currentSpriteHUD!["long"]["type"]}
+            boringHUDType={currentSpriteHUD!["boring"]["type"]}
+            bigHUDType={currentSpriteHUD!["big"]["type"]}
+            longHUDScale={currentSpriteHUD!["long"]["scale"]}
+            boringHUDScale={currentSpriteHUD!["boring"]["scale"]}
+            bigHUDScale={currentSpriteHUD!["big"]["scale"]}
             id={currentSpriteHUD!["id"]}
           />
         </Suspense>

src/components/HUDElement.tsx

@@ -2,25 +2,32 @@ import React from "react";
 import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
 import bigHud from "../static/sprites/big_hud.png";
+import bigHudMirrored from "../static/sprites/big_hud_mirrored.png";
 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 = {
-  longHudType: string;
+  longHUDType: string;
-  boringHudType: string;
+  boringHUDType: string;
-  bigHudType: string;
+  bigHUDType: string;
 
-  longHudPosition: PositionAndScaleProps;
+  longHUDPosYZ: [number, number];
   longHUDPosX: Interpolation<number, any>;
-  longHudScale: PositionAndScaleProps;
+  longHUDScale: PositionAndScaleProps;
 
   // boringHudPosition: PositionAndScaleProps;
-  boringHudScale: PositionAndScaleProps;
+  boringHUDPosX: Interpolation<number, any>;
+  boringHUDPosYZ: [number, number];
+  boringHUDScale: PositionAndScaleProps;
 
   // bigHudPosition: PositionAndScaleProps;
-  bigHudScale: PositionAndScaleProps;
+  bigHUDPosX: Interpolation<number, any>;
+  bigHUDPosYZ: [number, number];
+  bigHUDScale: PositionAndScaleProps;
 };
 
 const HUDElement = (props: HUDElementProps) => {
@@ -38,30 +45,41 @@ const HUDElement = (props: HUDElementProps) => {
           case "big":
             return bigHud;
         }
+        break;
+      case "mirrored":
+        switch (hudElement) {
+          case "big":
+            return bigHudMirrored;
+          case "long":
+            return longHudMirrored;
+          case "boring":
+            return boringHudMirrored;
+        }
     }
   };
 
   const longHudTexture: any = useLoader(
     THREE.TextureLoader,
-    spriteTypeToSprite(props.longHudType, "long")!
+    spriteTypeToSprite(props.longHUDType, "long")!
   );
 
   const longHudBoringTexture: any = useLoader(
     THREE.TextureLoader,
-    spriteTypeToSprite(props.boringHudType, "boring")!
+    spriteTypeToSprite(props.boringHUDType, "boring")!
   );
 
   const bigHudTexture: any = useLoader(
     THREE.TextureLoader,
-    spriteTypeToSprite(props.bigHudType, "big")!
+    spriteTypeToSprite(props.bigHUDType, "big")!
   );
 
   return (
     <>
       <a.sprite
-        position={props.longHudPosition}
+        position-y={props.longHUDPosYZ[0]}
+        position-z={props.longHUDPosYZ[1]}
         position-x={props.longHUDPosX}
-        scale={props.longHudScale}
+        scale={props.longHUDScale}
       >
         <spriteMaterial
           attach="material"
@@ -69,20 +87,30 @@ const HUDElement = (props: HUDElementProps) => {
           transparent={true}
         />
       </a.sprite>
-      {/* <sprite position={props.boringHudPosition} scale={props.boringHudScale}>
+      <a.sprite
+        position-x={props.boringHUDPosX}
+        position-y={props.boringHUDPosYZ[0]}
+        position-z={props.boringHUDPosYZ[1]}
+        scale={props.boringHUDScale}
+      >
         <spriteMaterial
           attach="material"
           map={longHudBoringTexture}
           transparent={true}
         />
-      </sprite>
+      </a.sprite>
-      <sprite position={props.bigHudPosition} scale={props.bigHudScale}>
+      <a.sprite
+        position-x={props.bigHUDPosX}
+        position-y={props.bigHUDPosYZ[0]}
+        position-z={props.bigHUDPosYZ[1]}
+        scale={props.bigHUDScale}
+      >
         <spriteMaterial
           attach="material"
           map={bigHudTexture}
           transparent={true}
         />
-      </sprite> */}
+      </a.sprite>
     </>
   );
 };

src/components/Hub.tsx

@@ -13,7 +13,7 @@ const Hub = (props: any) => {
       <Suspense fallback={<>loading...</>}>
         <PurpleRing />
         <GrayRing />
-        {Object.values(level_sprites.level04).map((sprite) => {
+        {Object.values(level_sprites).map((sprite) => {
           return (
             <LevelSprite
               position={sprite.position as PositionAndScaleProps}

src/components/LevelSprite.tsx

@@ -48,9 +48,9 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
     () => ({
       tex1: { type: "t", value: nonActiveTexture },
       tex2: { type: "t", value: activeTexture },
-      timeMSeconds: { value: Date.now() },
+      timeMSeconds: { value: (Date.now() % (Math.PI * 2000)) / 1000.0 },
     }),
-    []
+    [nonActiveTexture, activeTexture]
   );
 
   const vertexShader = `

src/components/OrthoCamera.tsx

@@ -29,16 +29,18 @@ const OrthoCamera = (props: OrthoCameraProps) => {
       position={[0, 0, 10]}
     >
       <HUDElement
-        longHudType={props.longHudType}
+        longHUDType={props.longHUDType}
-        boringHudType={props.boringHudType}
+        boringHUDType={props.boringHUDType}
-        bigHudType={props.bigHudType}
+        bigHUDType={props.bigHUDType}
-        longHudPosition={props.longHudPosition}
+        longHUDPosYZ={props.longHUDPosYZ}
         longHUDPosX={props.longHUDPosX}
-        longHudScale={props.longHudScale}
+        longHUDScale={props.longHUDScale}
-        // boringHudPosition={props.boringHudPosition}
+        boringHUDPosYZ={props.boringHUDPosYZ}
-        boringHudScale={props.boringHudScale}
+        boringHUDPosX={props.boringHUDPosX}
-        // bigHudPosition={props.bigHudPosition}
+        boringHUDScale={props.boringHUDScale}
-        bigHudScale={props.bigHudScale}
+        bigHUDPosYZ={props.bigHUDPosYZ}
+        bigHUDPosX={props.bigHUDPosX}
+        bigHUDScale={props.bigHUDScale}
         key={props.id}
       />
     </OrthographicCamera>

src/components/Preloader.tsx

@@ -3,11 +3,17 @@ import moveUpSpriteSheet from "../static/sprites/jump_up.png";
 import standingSpriteSheet from "../static/sprites/standing.png";
 import moveLeftSpriteSheet from "../static/sprites/move_left.png";
 import moveRightSpriteSheet from "../static/sprites/move_right.png";
+import bigHudSpriteSheet from "../static/sprites/big_hud.png";
+import bigHudMirroredSpriteSheet from "../static/sprites/big_hud_mirrored.png";
+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";
 
-// this function just preloads lain's spritesheets cuz they're big and lazy loading them
+// 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 moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
@@ -15,6 +21,22 @@ const Preloader = () => {
   const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
   const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
   const stand = useLoader(THREE.TextureLoader, standingSpriteSheet);
+  const bigHud = useLoader(THREE.TextureLoader, bigHudSpriteSheet);
+  const bigHudMirrored = useLoader(
+    THREE.TextureLoader,
+    bigHudMirroredSpriteSheet
+  );
+  const longHud = useLoader(THREE.TextureLoader, longHudSpriteSheet);
+  const longHudMirrored = useLoader(
+    THREE.TextureLoader,
+    longHudMirroredSpriteSheet
+  );
+  const boringHud = useLoader(THREE.TextureLoader, boringHudSpriteSheet);
+  const boringHudMirrored = useLoader(
+    THREE.TextureLoader,
+    boringHudMirroredSpriteSheet
+  );
+
   const { gl } = useThree();
   useLayoutEffect(() => {
     gl.initTexture(moveDown);
@@ -22,7 +44,26 @@ const Preloader = () => {
     gl.initTexture(moveLeft);
     gl.initTexture(moveRight);
     gl.initTexture(stand);
-  }, [moveDown, moveUp, moveLeft, moveRight, stand, gl]);
+    gl.initTexture(longHud);
+    gl.initTexture(bigHud);
+    gl.initTexture(bigHudMirrored);
+    gl.initTexture(longHudMirrored);
+    gl.initTexture(boringHud);
+    gl.initTexture(boringHudMirrored);
+  }, [
+    moveDown,
+    moveUp,
+    moveLeft,
+    moveRight,
+    stand,
+    gl,
+    bigHud,
+    bigHudMirrored,
+    boringHud,
+    boringHudMirrored,
+    longHud,
+    longHudMirrored,
+  ]);
   return null;
 };
 

src/components/PurpleRing.tsx

@@ -29,7 +29,7 @@ const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
 
   useFrame(() => {
     setPurpleRingRotationY(() => ({
-      purpleRingRotationY: purpleRingRotationY.get() + 0.04,
+      purpleRingRotationY: purpleRingRotationY.get() + 0.15,
     }));
   });
 

src/resources/level_sprite_directions.json

@@ -1,20 +1,26 @@
 {
-  "043": {
+  "0422": {
     "up": "+",
-    "down": "042",
+    "down": "0414",
     "left": "+",
     "right": ""
   },
-  "042": {
+  "0414": {
-    "up": "043",
+    "up": "0422",
     "down": "",
     "left": "",
+    "right": "0413"
+  },
+  "0413": {
+    "up": "0422",
+    "down": "0405",
+    "left": "0414",
     "right": "041"
   },
-  "041": {
+  "0405": {
-    "up": "043",
+    "up": "0413",
     "down": "",
-    "left": "042",
+    "left": "0414",
     "right": "041"
   }
 }

src/resources/level_sprite_huds.json

@@ -1,6 +1,6 @@
 {
-  "043": {
+  "0422": {
-    "id": "043hud",
+    "id": "0422hud",
     "long": {
       "position": [-0.45, 0.15, -8.6],
       "scale": [1, 0.03, 1],
@@ -10,31 +10,77 @@
     "boring": {
       "position": [0.48, 0.174, -8.6],
       "scale": [1, 0.03, 1],
-      "type": "normal"
+      "type": "normal",
+      "initial_position": [1.48, 0.174, -8.6]
     },
     "big": {
       "position": [0.36, 0.13, -8.6],
       "scale": [0.5, 0.06, 1],
-      "type": "normal"
+      "type": "normal",
+      "initial_position": [1.36, 0.13, -8.6]
     }
   },
-  "042": {
+  "0414": {
-    "id": "042hud",
+    "id": "0414hud",
     "long": {
-      "position": [-0.45, -0.15, -8.6],
+      "position": [-0.45, -0.09, -8.6],
       "scale": [1, 0.03, 1],
       "type": "normal",
-      "initial_position": [-1.45, -0.15, -8.6]
+      "initial_position": [-1.45, -0.09, -8.6]
     },
     "boring": {
-      "position": [0.48, 0.174, -8.6],
+      "position": [0.5, -0.07, -8.6],
       "scale": [1, 0.03, 1],
-      "type": "normal"
+      "type": "normal",
+      "initial_position": [1.48, -0.07, -8.6]
     },
     "big": {
-      "position": [0.36, 0.13, -8.6],
+      "position": [0.35, -0.12, -8.6],
       "scale": [0.5, 0.06, 1],
-      "type": "normal"
+      "type": "normal",
+      "initial_position": [1.36, -0.12, -8.6]
+    }
+  },
+  "0413": {
+    "id": "0413hud",
+    "long": {
+      "position": [0.85, -0.09, -8.6],
+      "scale": [1, 0.03, 1],
+      "type": "mirrored",
+      "initial_position": [1.45, -0.09, -8.6]
+    },
+    "boring": {
+      "position": [-0.11, -0.07, -8.6],
+      "scale": [1, 0.03, 1],
+      "type": "mirrored",
+      "initial_position": [-1.48, -0.07, -8.6]
+    },
+    "big": {
+      "position": [-0.35, -0.12, -8.6],
+      "scale": [0.5, 0.06, 1],
+      "type": "mirrored",
+      "initial_position": [-1.48, -0.12, -8.6]
+    }
+  },
+  "0405": {
+    "id": "0405hud",
+    "long": {
+      "position": [0.85, -0.32, -8.6],
+      "scale": [1, 0.03, 1],
+      "type": "mirrored",
+      "initial_position": [1.45, -0.3, -8.6]
+    },
+    "boring": {
+      "position": [-0.11, -0.30, -8.6],
+      "scale": [1, 0.03, 1],
+      "type": "mirrored",
+      "initial_position": [-1.48, -0.30, -8.6]
+    },
+    "big": {
+      "position": [-0.25, -0.28, -8.6],
+      "scale": [0.5, 0.06, 1],
+      "type": "mirrored",
+      "initial_position": [-1.48, -0.12, -8.6]
     }
   }
 }

src/resources/level_sprites.json

@@ -1,32 +1,30 @@
 {
-  "level04": {
   "0": {
     "position": [0.4, -0.25, 1.3],
     "scale": [0.25, 0.15, 0.25],
     "rotation": [0, 0.2, 0],
     "sprite": "movie",
-      "id": "040"
+    "id": "0405"
   },
   "1": {
     "position": [0.4, 0, 1.3],
     "scale": [0.25, 0.15, 0.25],
     "rotation": [0, 0.09, 0],
     "sprite": "s",
-      "id": "041"
+    "id": "0413"
   },
   "2": {
     "position": [-0.35, 0, 1.3],
     "scale": [0.25, 0.15, 0.25],
     "rotation": [0, -0.1, 0],
     "sprite": "copland",
-      "id": "042"
+    "id": "0414"
   },
   "3": {
     "position": [-0.35, 0.25, 1.3],
     "scale": [0.25, 0.15, 0.25],
     "rotation": [0, -0.1, 0],
     "sprite": "touko",
-      "id": "043"
+    "id": "0422"
-    }
   }
 }