adding blue orb interactions

src/components/BlueOrb/BlueOrb.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useRef } from "react";
 import { useFrame, useLoader } from "react-three-fiber";
-import { a } from "@react-spring/three";
+import { useSpring, a } from "@react-spring/three";
 import * as THREE from "three";
 import Cou from "../../static/sprites/Cou.png";
 import CouActive from "../../static/sprites/Cou_active.png";
@@ -17,6 +17,13 @@ import LdaActive from "../../static/sprites/Lda_active.png";
 import MULTI from "../../static/sprites/MULTI.png";
 import MULTIActive from "../../static/sprites/MULTI_active.png";
 import level_y_values from "../../resources/level_y_values.json";
+import { useRecoilValue } from "recoil";
+import {
+  currentBlueOrbAnimatingAtom,
+  currentBlueOrbPosXAtom,
+  currentBlueOrbPosYAtom,
+  currentBlueOrbPosZAtom,
+} from "./CurrentBlueOrbAtom";
 
 type BlueOrbContructorProps = {
   sprite: string;
@@ -39,6 +46,11 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
   // dynamically importnig them would be worse for performance,
   // so we import all of them here and then use this function to
   // associate a sprite with the path
+  const currentBlueOrbAnimating = useRecoilValue(currentBlueOrbAnimatingAtom);
+  const currentBlueOrbPosX = useRecoilValue(currentBlueOrbPosXAtom);
+  const currentBlueOrbPosY = useRecoilValue(currentBlueOrbPosYAtom);
+  const currentBlueOrbPosZ = useRecoilValue(currentBlueOrbPosZAtom);
+
   const spriteToPath = (sprite: string) => {
     if (sprite.includes("S")) {
       return [SSkn, SSKnActive];
@@ -116,10 +128,31 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
     }
   });
 
+  const currentBlueOrbState = useSpring({
+    currentBlueOrbPosX: currentBlueOrbPosX,
+    currentBlueOrbPosY: currentBlueOrbPosY,
+    currentBlueOrbPosZ: currentBlueOrbPosZ,
+    config: { duration: 900 },
+  });
+
   return (
     <group position={[0, (level_y_values as LevelYValues)[props.level], 0]}>
       <a.mesh
-        position={props.position as [number, number, number]}
+        position-x={
+          props.active && currentBlueOrbAnimating
+            ? currentBlueOrbState.currentBlueOrbPosX
+            : props.position[0]
+        }
+        position-y={
+          props.active && currentBlueOrbAnimating
+            ? currentBlueOrbState.currentBlueOrbPosY
+            : props.position[1]
+        }
+        position-z={
+          props.active && currentBlueOrbAnimating
+            ? currentBlueOrbState.currentBlueOrbPosZ
+            : props.position[2]
+        }
         rotation-y={props.rotation[1]}
         scale={[0.36, 0.18, 0.36]}
         renderOrder={1}

src/components/BlueOrb/CurrentBlueOrbAtom.tsx

@@ -1,6 +1,26 @@
-import { atom } from 'recoil'
+import { atom } from "recoil";
 
 export const currentBlueOrbAtom = atom({
-    key: 'currentBlueOrbAtom',
+  key: "currentBlueOrbAtom",
-    default: "0422"
+  default: "0422",
-})
+});
+
+export const currentBlueOrbAnimatingAtom = atom({
+  key: "currentBlueOrbAnimatingAtom",
+  default: false,
+});
+
+export const currentBlueOrbPosXAtom = atom({
+  key: "currentBlueOrbPosXAtom",
+  default: 0,
+});
+
+export const currentBlueOrbPosYAtom = atom({
+  key: "currentBlueOrbPosYAtom",
+  default: 0,
+});
+
+export const currentBlueOrbPosZAtom = atom({
+  key: "currentBlueOrbPosZAtom",
+  default: 0,
+});

src/components/HUD/HUDElementAtom.tsx

@@ -14,17 +14,17 @@ export const hudVisibilityAtom = atom({
 
 export const currentHUDAtom = atom({
   key: "currentHUDAtom",
-  default: (blue_orb_huds as BlueOrbHuds)["bg_hud_3"],
+  default: (blue_orb_huds as BlueOrbHuds)["fg_hud_1"],
 });
 
 export const bigLetterPosYAtom = atom({
   key: "bigLetterPosYAtom",
-  default: (blue_orb_huds as BlueOrbHuds)["bg_hud_3"]["big_text"][1],
+  default: (blue_orb_huds as BlueOrbHuds)["fg_hud_1"]["big_text"][1],
 });
 
 export const bigLetterPosXAtom = atom({
   key: "bigLetterPosXAtom",
-  default: (blue_orb_huds as BlueOrbHuds)["bg_hud_3"]["big_text"][0],
+  default: (blue_orb_huds as BlueOrbHuds)["fg_hud_1"]["big_text"][0],
 });
 
 export const bigHudTextAtom = atom({

src/components/InputHandler/InputHandler.tsx

@@ -5,7 +5,8 @@ import {
   LainMoveRight,
   LainMoveUp,
   LainStanding,
-} from "./Lain/Lain";
+  LainThrowBlueOrb,
+} from "../Lain/Lain";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import {
   bigHudTextAtom,
@@ -14,14 +15,21 @@ import {
   currentHUDAtom,
   hudActiveAtom,
   mediumHudTextAtom,
-} from "./HUD/HUDElementAtom";
+} from "../HUD/HUDElementAtom";
-import { currentBlueOrbAtom } from "./BlueOrb/CurrentBlueOrbAtom";
+import {
-import lain_animations from "../resources/lain_animations.json";
+  currentBlueOrbAnimatingAtom,
-import blue_orb_huds from "../resources/blue_orb_huds.json";
+  currentBlueOrbAtom,
-import blue_orb_directions from "../resources/blue_orb_directions.json";
+  currentBlueOrbPosXAtom,
-import site_a from "../resources/site_a.json";
+  currentBlueOrbPosYAtom,
-import { lainMoveStateAtom, lainMovingAtom } from "./Lain/LainAtom";
+  currentBlueOrbPosZAtom,
-import { BlueOrbHudData, BlueOrbHuds } from "./HUD/HUDElement";
+} from "../BlueOrb/CurrentBlueOrbAtom";
+import lain_animations from "../../resources/lain_animations.json";
+import blue_orb_huds from "../../resources/blue_orb_huds.json";
+import blue_orb_directions from "../../resources/blue_orb_directions.json";
+import blue_orb_positions from "../../resources/blue_orb_positions.json";
+import site_a from "../../resources/site_a.json";
+import { lainMoveStateAtom, lainMovingAtom } from "../Lain/LainAtom";
+import { BlueOrbHudData, BlueOrbHuds } from "../HUD/HUDElement";
 import {
   middleRingAnimDurationAtom,
   middleRingNoiseAtom,
@@ -30,14 +38,15 @@ import {
   middleRingRotZAtom,
   middleRingPosYAtom,
   middleRingWobbleStrengthAtom,
-} from "./MiddleRing/MiddleRingAtom";
+} from "../MiddleRing/MiddleRingAtom";
-import { bigLetterOffsetXCoeffAtom } from "./TextRenderer/TextRendererAtom";
+import { bigLetterOffsetXCoeffAtom } from "../TextRenderer/TextRendererAtom";
-import { SiteData } from "./Site/Site";
+import { SiteData } from "../Site/Site";
 import {
   isSiteYChangingAtom,
   sitePosYAtom,
   siteRotYAtom,
-} from "./Site/SiteAtom";
+} from "../Site/SiteAtom";
+import { sleep } from "./inputHandlerHelpers";
 
 type KeyCodeAssociations = {
   [keyCode: number]: string;
@@ -75,6 +84,7 @@ const getKeyCodeAssociation = (keyCode: number): string => {
     37: "left",
     38: "up",
     39: "right",
+    88: "x",
   } as KeyCodeAssociations)[keyCode];
 };
 
@@ -82,6 +92,13 @@ const InputHandler = () => {
   const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState(
     currentBlueOrbAtom
   );
+  const setCurrentBlueOrbAnimating = useSetRecoilState(
+    currentBlueOrbAnimatingAtom
+  );
+
+  const setCurrentBlueOrbPosX = useSetRecoilState(currentBlueOrbPosXAtom);
+  const setCurrentBlueOrbPosY = useSetRecoilState(currentBlueOrbPosYAtom);
+  const setCurrentBlueOrbPosZ = useSetRecoilState(currentBlueOrbPosZAtom);
 
   const [lainMoving, setLainMoving] = useRecoilState(lainMovingAtom);
   const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
@@ -379,6 +396,9 @@ const InputHandler = () => {
 
           rotateMiddleRing("right");
           break;
+        case "throw_blue_orb":
+          setLainMoveState(<LainThrowBlueOrb />);
+          break;
         default:
           break;
       }
@@ -493,7 +513,16 @@ const InputHandler = () => {
     (event) => {
       const { keyCode } = event;
 
-      const moveDirection = getKeyCodeAssociation(keyCode);
+      const keyCodeAssoc = getKeyCodeAssociation(keyCode);
+
+      let moveDirection;
+      let action;
+
+      if (keyCodeAssoc !== "x") {
+        moveDirection = keyCodeAssoc;
+      } else {
+        action = "throw_blue_orb";
+      }
 
       if (moveDirection && !lainMoving && !spriteUpdateCooldown) {
         const targetBlueOrb = getTargetFrom(currentBlueOrb, moveDirection);
@@ -528,6 +557,29 @@ const InputHandler = () => {
             targetBlueOrbHudId
           );
         }
+      } else if (action && !lainMoving && !spriteUpdateCooldown) {
+        const currentBlueOrbPosId = currentBlueOrb.substr(2);
+
+        const currentBlueOrbPos =
+          blue_orb_positions[
+            currentBlueOrbPosId as keyof typeof blue_orb_positions
+          ].position;
+
+        setAnimationState(action);
+        setCurrentBlueOrbPosX(currentBlueOrbPos[0]);
+        setCurrentBlueOrbPosY(currentBlueOrbPos[1]);
+        setCurrentBlueOrbPosZ(currentBlueOrbPos[2]);
+
+        setTimeout(() => {
+          setCurrentBlueOrbAnimating(true);
+          setCurrentBlueOrbPosX(0.5);
+          setCurrentBlueOrbPosY(0);
+          setCurrentBlueOrbPosZ(0);
+        }, 1500);
+
+        setTimeout(() => {
+          setCurrentBlueOrbAnimating(false);
+        }, 4200);
       }
     },
     [
@@ -536,6 +588,11 @@ const InputHandler = () => {
       currentBlueOrb,
       moveAndChangeBlueOrbFocus,
       changeBlueOrbFocus,
+      setAnimationState,
+      setCurrentBlueOrbPosX,
+      setCurrentBlueOrbPosY,
+      setCurrentBlueOrbPosZ,
+      setCurrentBlueOrbAnimating,
     ]
   );
 

src/components/InputHandler/inputHandlerHelpers.ts

@@ -0,0 +1,2 @@
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));

src/components/Lain/Lain.tsx

@@ -8,6 +8,7 @@ import moveLeftSpriteSheet from "../../static/sprites/move_left.png";
 import moveRightSpriteSheet from "../../static/sprites/move_right.png";
 import standingSpriteSheet from "../../static/sprites/standing.png";
 import introSpriteSheet from "../../static/sprites/intro.png";
+import throwBlueOrbSpriteSheet from "../../static/sprites/throw_blue_orb.png";
 import { useRecoilValue } from "recoil";
 import { lainMoveStateAtom, lainMovingAtom } from "./LainAtom";
 
@@ -46,68 +47,67 @@ const LainConstructor = (props: LainConstructorProps) => {
   );
 };
 
-export const LainIntro = () => {
+export const LainIntro = () => (
-  return (
+  <LainConstructor
-    <LainConstructor
+    sprite={introSpriteSheet}
-      sprite={introSpriteSheet}
+    frameCount={50}
-      frameCount={50}
+    framesHorizontal={10}
-      framesHorizontal={10}
+    framesVertical={5}
-      framesVertical={5}
+  />
-    />
+);
-  );
-};
 
-export const LainStanding = () => {
+export const LainStanding = () => (
-  return (
+  <LainConstructor
-    <LainConstructor
+    sprite={standingSpriteSheet}
-      sprite={standingSpriteSheet}
+    frameCount={3}
-      frameCount={3}
+    framesHorizontal={3}
-      framesHorizontal={3}
+    framesVertical={1}
-      framesVertical={1}
+  />
-    />
+);
-  );
-};
 
-export const LainMoveDown = () => {
+export const LainMoveDown = () => (
-  return (
+  <LainConstructor
-    <LainConstructor
+    sprite={moveDownSpriteSheet}
-      sprite={moveDownSpriteSheet}
+    frameCount={36}
-      frameCount={36}
+    framesHorizontal={6}
-      framesHorizontal={6}
+    framesVertical={6}
-      framesVertical={6}
+  />
-    />
+);
-  );
-};
 
-export const LainMoveLeft = () => {
+export const LainMoveLeft = () => (
+  <LainConstructor
+    sprite={moveLeftSpriteSheet}
+    frameCount={47}
+    framesHorizontal={8}
+    framesVertical={6}
+  />
+);
+
+export const LainMoveRight = () => (
+  <LainConstructor
+    sprite={moveRightSpriteSheet}
+    frameCount={47}
+    framesHorizontal={8}
+    framesVertical={6}
+  />
+);
+
+export const LainMoveUp = () => (
+  <LainConstructor
+    sprite={moveUpSpriteSheet}
+    frameCount={36}
+    framesHorizontal={6}
+    framesVertical={6}
+  />
+);
+
+export const LainThrowBlueOrb = () => {
   return (
     <LainConstructor
-      sprite={moveLeftSpriteSheet}
+      sprite={throwBlueOrbSpriteSheet}
       frameCount={47}
-      framesHorizontal={8}
+      framesHorizontal={7}
-      framesVertical={6}
+      framesVertical={7}
-    />
-  );
-};
-
-export const LainMoveRight = () => {
-  return (
-    <LainConstructor
-      sprite={moveRightSpriteSheet}
-      frameCount={47}
-      framesHorizontal={8}
-      framesVertical={6}
-    />
-  );
-};
-
-export const LainMoveUp = () => {
-  return (
-    <LainConstructor
-      sprite={moveUpSpriteSheet}
-      frameCount={36}
-      framesHorizontal={6}
-      framesVertical={6}
     />
   );
 };

src/components/MainScene/MainScene.tsx

@@ -8,7 +8,7 @@ import OrthoCamera from "../OrthoCamera/OrthoCamera";
 import Preloader from "../Preloader";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { lainMoveStateAtom, lainMovingAtom } from "../Lain/LainAtom";
-import InputHandler from "../InputHandler";
+import InputHandler from "../InputHandler/InputHandler";
 import MainSceneIntro from "./MainSceneIntro";
 import {
   mainGroupPosYAtom,

src/components/Preloader.tsx

@@ -10,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 throwBlueOrbSpriteSheet from "../static/sprites/throw_blue_orb.png";
 
 import * as THREE from "three";
 import { useLoader, useThree } from "react-three-fiber";
@@ -24,6 +25,7 @@ const Preloader = () => {
   const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
   const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
   const stand = useLoader(THREE.TextureLoader, standingSpriteSheet);
+  const throwBlueOrb = useLoader(THREE.TextureLoader, throwBlueOrbSpriteSheet);
   const bigHud = useLoader(THREE.TextureLoader, bigHudSpriteSheet);
   const bigHudMirrored = useLoader(
     THREE.TextureLoader,
@@ -54,6 +56,7 @@ const Preloader = () => {
     gl.initTexture(longHudMirrored);
     gl.initTexture(boringHud);
     gl.initTexture(boringHudMirrored);
+    gl.initTexture(throwBlueOrb);
   }, [
     moveDown,
     moveUp,
@@ -68,6 +71,7 @@ const Preloader = () => {
     longHud,
     longHudMirrored,
     intro,
+    throwBlueOrb,
   ]);
   return null;
 };

src/resources/blue_orb_directions.json

@@ -51,7 +51,10 @@
   "0417_right": {
     "id": "0413",
     "hud": "fg_hud_5"
+  },
+
+  "0506_down": {
+    "id": "+0422",
+    "hud": "fg_hud_1"
   }
-
-
 }

src/resources/lain_animations.json

@@ -18,5 +18,9 @@
   "right": {
     "frame_count": 47,
     "duration": 3903.704
+  },
+  "throw_blue_orb": {
+    "frame_count": 47,
+    "duration": 3903.704
   }
 }