switching hud based on current sprite

src/App.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useState, Suspense } from "react";
-import Intro from "./components/Intro";
+import React, { useEffect, useState } from "react";
 import Game from "./components/Game";
-import "./static/css/main.css";
 import "./static/css/hub.css";
+import "./static/css/main.css";
 
 const App = () => {
   const [moveToGame, setMoveToGame] = useState(false);

src/components/Game.tsx

@@ -1,7 +1,13 @@
-import { a, useSpring } from "@react-spring/three";
+import { a, useSpring, update } from "@react-spring/three";
 //import Orb from "./Orb";
 import { OrbitControls } from "drei";
-import React, { Suspense, useCallback, useEffect, useState } from "react";
+import React, {
+  Suspense,
+  useCallback,
+  useEffect,
+  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";
@@ -44,18 +50,20 @@ const Game = () => {
     (level_sprite_huds as SpriteHuds)[currentSprite]
   );
 
-  // we separate positions of the hud sprites into the state since we need to animate thme
-  const [longHudPosX, setLongHudPosX] = useState(
-    currentSpriteHUD["long"]["position"][0]
-  );
-  const [boringHudPosition, setBoringHudPosition] = useState<
-    PositionAndScaleProps
-  >();
-  const [bigHudPosition, setBigHudPosition] = useState<PositionAndScaleProps>();
+  const [longHUDActive, setLongHUDActive] = useState(1);
 
-  const getMove = (currentLoc: string, key: string): string => {
-    return (level_sprite_directions as SpriteDirections)[currentLoc][key];
-  };
+  const { longHUDPositionX } = useSpring({
+    longHUDPositionX: longHUDActive,
+    config: { duration: 500 },
+  });
+
+  const longHUDPosX = longHUDPositionX.to(
+    [0, 1],
+    [
+      currentSpriteHUD["long"]["initial_position"][0],
+      currentSpriteHUD["long"]["position"][0],
+    ]
+  );
 
   const [{ cameraRotationY }, setCameraRotationY] = useSpring(
     () => ({
@@ -121,6 +129,10 @@ const Game = () => {
   const camPosY = cameraPositionY.to([0, 1], [0, Math.PI]);
   const lainPosY = lainPositionY.to([0, 1], [0, Math.PI]);
 
+  const getMove = (currentLoc: string, key: string): string => {
+    return (level_sprite_directions as SpriteDirections)[currentLoc][key];
+  };
+
   const getKeyCodeAssociation = (keyCode: number): string => {
     return ({
       40: "down",
@@ -168,21 +180,9 @@ const Game = () => {
     [moveCamera, moveLain, rotateCamera]
   );
 
-  const animateSpriteHUDIn = useCallback(
-    (spriteHUD: SpriteHuds) => {
-      const [longPos, boringPos, bigPos] = [
-        spriteHUD["long"]["position"],
-        spriteHUD["boring"]["position"],
-        spriteHUD["big"]["position"],
-      ];
-      const [initialLongPos, initialBoringPos, initialBigPos] = [
-        spriteHUD["long"]["initial_position"],
-        spriteHUD["boring"]["initial_position"],
-        spriteHUD["big"]["initial_position"],
-      ];
-    },
-    [longHudPosX]
-  );
+  const updateHUD = useCallback(() => {
+    setLongHUDActive((prev: number) => Number(!prev));
+  }, [setLongHUDActive]);
 
   const moveDispatcher = useCallback(
     (move: string, key: string) => {
@@ -203,11 +203,14 @@ const Game = () => {
         // only change sprite focus
         default:
           setCurrentSprite(move);
-          setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
-          animateSpriteHUDIn(currentSpriteHUD);
+          updateHUD();
+          setTimeout(() => {
+            setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
+            updateHUD();
+          }, 500);
       }
     },
-    [setAnimationState, animateSpriteHUDIn, currentSpriteHUD]
+    [setAnimationState, updateHUD]
   );
 
   const handleKeyPress = useCallback(
@@ -256,10 +259,11 @@ const Game = () => {
           <Hub currentSprite={currentSprite} />
           <Lights />
           <OrthoCamera
-            bigHudPosition={bigHudPosition!}
-            boringHudPosition={boringHudPosition!}
+            // bigHudPosition={bigHudPosition!}
+            // boringHudPosition={boringHudPosition!}
+            longHUDPosX={longHUDPosX}
             longHudPosition={[
-              longHudPosX,
+              currentSpriteHUD!["long"]["position"][0],
               currentSpriteHUD!["long"]["position"][1],
               currentSpriteHUD!["long"]["position"][2],
             ]}

src/components/GrayRing.tsx

@@ -1,16 +1,8 @@
-import React, {
-  useRef,
-  useCallback,
-  Suspense,
-  useState,
-  useEffect,
-} from "react";
-import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { useThree, useFrame, Canvas, useLoader } from "react-three-fiber";
-import { OrbitControls, Html, draco, Icosahedron } from "drei";
-import Lain from "./Lain";
-import { Mesh, MeshLambertMaterial, DoubleSide } from "three";
+import { draco } from "drei";
+import React from "react";
+import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 type GrayRingProps = {
   lowerRingPositionY: number;
@@ -25,7 +17,7 @@ type GLTFResult = GLTF & {
 };
 
 const GrayRing = (props: any) => {
-  const { nodes, materials } = useLoader<GLTFResult>(
+  const { nodes } = useLoader<GLTFResult>(
     GLTFLoader,
     "/models/ring0.glb",
     draco("/draco-gltf/")

src/components/HUDElement.tsx

@@ -1,10 +1,11 @@
-import React, { Suspense } from "react";
-import { useFrame, useLoader, useThree } from "react-three-fiber";
+import React from "react";
+import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
+import bigHud from "../static/sprites/big_hud.png";
 import longHud from "../static/sprites/long_hud.png";
 import boringHud from "../static/sprites/long_hud_boring.png";
-import bigHud from "../static/sprites/big_hud.png";
 import { PositionAndScaleProps } from "./Hub";
+import { a, Interpolation } from "@react-spring/three";
 
 export type HUDElementProps = {
   longHudType: string;
@@ -12,12 +13,13 @@ export type HUDElementProps = {
   bigHudType: string;
 
   longHudPosition: PositionAndScaleProps;
+  longHUDPosX: Interpolation<any, any>;
   longHudScale: PositionAndScaleProps;
 
-  boringHudPosition: PositionAndScaleProps;
+  // boringHudPosition: PositionAndScaleProps;
   boringHudScale: PositionAndScaleProps;
 
-  bigHudPosition: PositionAndScaleProps;
+  // bigHudPosition: PositionAndScaleProps;
   bigHudScale: PositionAndScaleProps;
 };
 
@@ -56,14 +58,18 @@ const HUDElement = (props: HUDElementProps) => {
 
   return (
     <>
-      <sprite position={props.longHudPosition} scale={props.longHudScale}>
+      <a.sprite
+        position={props.longHudPosition}
+        position-x={props.longHUDPosX}
+        scale={props.longHudScale}
+      >
         <spriteMaterial
           attach="material"
           map={longHudTexture}
           transparent={true}
         />
-      </sprite>
-      <sprite position={props.boringHudPosition} scale={props.boringHudScale}>
+      </a.sprite>
+      {/* <sprite position={props.boringHudPosition} scale={props.boringHudScale}>
         <spriteMaterial
           attach="material"
           map={longHudBoringTexture}
@@ -76,7 +82,7 @@ const HUDElement = (props: HUDElementProps) => {
           map={bigHudTexture}
           transparent={true}
         />
-      </sprite>
+      </sprite> */}
     </>
   );
 };

src/components/Lain.tsx

@@ -1,14 +1,13 @@
+import { a, Interpolation } from "@react-spring/three";
 import React, { Suspense, useState } from "react";
-import { useFrame, useLoader, useThree } from "react-three-fiber";
+import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import introSpriteSheet from "../static/sprites/intro.png";
+import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
 import moveDownSpriteSheet from "../static/sprites/jump_down.png";
-import standingSpriteSheet from "../static/sprites/standing.png";
+import moveUpSpriteSheet from "../static/sprites/jump_up.png";
 import moveLeftSpriteSheet from "../static/sprites/move_left.png";
 import moveRightSpriteSheet from "../static/sprites/move_right.png";
-import moveUpSpriteSheet from "../static/sprites/jump_up.png";
-import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
-import { a, Interpolation, useSpring } from "@react-spring/three";
+import standingSpriteSheet from "../static/sprites/standing.png";
 
 type LainProps = {
   isLainMoving: boolean;

src/components/LevelSprite.tsx

@@ -1,14 +1,14 @@
-import React, { Suspense, useMemo, useState, useEffect, useRef } from "react";
-import { useFrame, useLoader, useThree } from "react-three-fiber";
+import React, { useRef } from "react";
+import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
-import movie from "../static/sprites/movie.png";
-import movieActive from "../static/sprites/movie_active.png";
-import touko from "../static/sprites/touko.png";
-import toukoActive from "../static/sprites/touko_active.png";
-import s from "../static/sprites/s.png";
-import sActive from "../static/sprites/s_active.png";
 import copland from "../static/sprites/copland.png";
 import coplandActive from "../static/sprites/copland_active.png";
+import movie from "../static/sprites/movie.png";
+import movieActive from "../static/sprites/movie_active.png";
+import s from "../static/sprites/s.png";
+import sActive from "../static/sprites/s_active.png";
+import touko from "../static/sprites/touko.png";
+import toukoActive from "../static/sprites/touko_active.png";
 
 type LevelSpriteConstructorProps = {
   sprite: string;

src/components/OrthoCamera.tsx

@@ -1,23 +1,8 @@
-import React, {
-  useState,
-  Suspense,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import {
-  useFrame,
-  Canvas,
-  useLoader,
-  useThree,
-  useCamera,
-  createPortal,
-} from "react-three-fiber";
 //import Orb from "./Orb";
-import { OrthographicCamera, Octahedron } from "drei";
-import { Matrix4, Scene, BasicDepthPacking } from "three";
-import * as THREE from "three";
+import { OrthographicCamera } from "drei";
+import React, { useMemo, useRef } from "react";
+import { useFrame, useThree } from "react-three-fiber";
+import { Scene } from "three";
 import HUDElement, { HUDElementProps } from "./HUDElement";
 
 interface OrthoCameraProps extends HUDElementProps {
@@ -48,10 +33,11 @@ const OrthoCamera = (props: OrthoCameraProps) => {
         boringHudType={props.boringHudType}
         bigHudType={props.bigHudType}
         longHudPosition={props.longHudPosition}
+        longHUDPosX={props.longHUDPosX}
         longHudScale={props.longHudScale}
-        boringHudPosition={props.boringHudPosition}
+        // boringHudPosition={props.boringHudPosition}
         boringHudScale={props.boringHudScale}
-        bigHudPosition={props.bigHudPosition}
+        // bigHudPosition={props.bigHudPosition}
         bigHudScale={props.bigHudScale}
         key={props.id}
       />

src/components/Preloader.tsx

@@ -14,11 +14,15 @@ const Preloader = () => {
   const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
   const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
   const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
+  const stand = useLoader(THREE.TextureLoader, standingSpriteSheet);
   const { gl } = useThree();
   useLayoutEffect(() => {
     gl.initTexture(moveDown);
     gl.initTexture(moveUp);
-  }, [moveDown, moveUp, moveLeft, standingSpriteSheet, moveRight]);
+    gl.initTexture(moveLeft);
+    gl.initTexture(moveRight);
+    gl.initTexture(stand);
+  }, [moveDown, moveUp, moveLeft, moveRight, stand, gl]);
   return null;
 };
 

src/components/PurpleRing.tsx

@@ -1,9 +1,9 @@
-import * as THREE from "three";
-import React, { useRef, useState, useEffect } from "react";
-import { useLoader, useFrame } from "react-three-fiber";
-import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader";
+import { a, useSpring } from "@react-spring/three";
 import { draco } from "drei";
-import { useSpring, a } from "@react-spring/three";
+import React from "react";
+import { useFrame, useLoader } from "react-three-fiber";
+import * as THREE from "three";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -21,7 +21,7 @@ const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
     []
   );
 
-  const { nodes, materials } = useLoader<GLTFResult>(
+  const { nodes } = useLoader<GLTFResult>(
     GLTFLoader,
     "/models/ring1.glb",
     draco("/draco-gltf/")

src/resources/level_sprite_directions.json

@@ -14,7 +14,7 @@
   "041": {
     "up": "043",
     "down": "",
-    "left": "",
+    "left": "042",
     "right": "041"
   }
 }

src/resources/level_sprite_huds.json

@@ -21,10 +21,10 @@
   "042": {
     "id": "042hud",
     "long": {
-      "position": [-0.45, 0.15, -8.6],
+      "position": [-0.45, -0.15, -8.6],
       "scale": [1, 0.03, 1],
       "type": "normal",
-      "initial_position": [-1.45, 0.15, -8.6]
+      "initial_position": [-1.45, -0.15, -8.6]
     },
     "boring": {
       "position": [0.48, 0.174, -8.6],