implementing more animations...

src/components/MainScene/Lain.tsx

@@ -10,6 +10,9 @@ import standingSpriteSheet from "../../static/sprite/standing.png";
 import introSpriteSheet from "../../static/sprite/intro.png";
 import throwNodeSpriteSheet from "../../static/sprite/throw_node.png";
 import ripMiddleRingSpriteSheet from "../../static/sprite/rip_middle_ring.png";
+import knockSpriteSheet from "../../static/sprite/knock.png";
+import knockAndFallSpriteSheet from "../../static/sprite/knock_and_fall.png";
+import touchAndScareSpriteSheet from "../../static/sprite/touch_and_scare.png";
 import { useLainStore, useMainSceneStore } from "../../store";
 
 type LainConstructorProps = {
@@ -17,6 +20,7 @@ type LainConstructorProps = {
   frameCount: number;
   framesVertical: number;
   framesHorizontal: number;
+  fps?: number;
 };
 
 export const LainConstructor = (props: LainConstructorProps) => {
@@ -29,7 +33,7 @@ export const LainConstructor = (props: LainConstructorProps) => {
       props.framesHorizontal,
       props.framesVertical,
       props.frameCount,
-      props.frameCount * 0.27
+      props.fps ? props.fps : props.frameCount * 0.27
     );
     anim.init(0);
     return anim;
@@ -124,6 +128,40 @@ export const LainRipMiddleRing = () => {
   );
 };
 
+export const LainKnock = () => {
+  return (
+    <LainConstructor
+      sprite={knockSpriteSheet}
+      frameCount={32}
+      framesHorizontal={6}
+      framesVertical={6}
+    />
+  );
+};
+
+export const LainKnockAndFall = () => {
+  return (
+    <LainConstructor
+      sprite={knockAndFallSpriteSheet}
+      frameCount={64}
+      framesHorizontal={8}
+      framesVertical={8}
+      fps={64 * 0.17}
+    />
+  );
+};
+
+export const LainTouchAndScare = () => {
+  return (
+    <LainConstructor
+      sprite={touchAndScareSpriteSheet}
+      frameCount={37}
+      framesHorizontal={7}
+      framesVertical={6}
+    />
+  );
+};
+
 type LainProps = {
   shouldIntro: boolean;
 };
@@ -141,6 +179,7 @@ const Lain = (props: LainProps) => {
     select_level_up: <LainMoveUp />,
     throw_node: <LainThrowNode />,
     pause_game: <LainRipMiddleRing />,
+    test: <LainTouchAndScare />,
   };
 
   const [introFinished, setIntroFinished] = useState(false);

src/components/MainScene/SyncedComponents/Site/Node.tsx

@@ -115,14 +115,15 @@ const Node = (props: NodeContructorProps) => {
   // these pieces of state get updated transiently rather than reactively
   // to avoid excess unnecessary renders (this is absolutely crucial for performance).
   const [
-    { activeNodePosX, activeNodePosY, activeNodePosZ, activeNodeRotZ },
+    { activeNodePosX, activeNodePosY, activeNodePosZ, activeNodeRotZ, activeNodeRotY },
     set,
   ] = useSpring(() => ({
     activeNodePosX: useNodeStore.getState().activeNodeState.interactedWith
       ? useNodeStore.getState().activeNodeState.posX
       : props.position[0],
     activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
-      ? level_y_values[props.level as keyof typeof level_y_values]
+      ? level_y_values[props.level as keyof typeof level_y_values] +
+        useNodeStore.getState().activeNodeState.posY
       : props.position[1],
     activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
       ? useNodeStore.getState().activeNodeState.posZ
@@ -130,6 +131,9 @@ const Node = (props: NodeContructorProps) => {
     activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
       ? useNodeStore.getState().activeNodeState.rotZ
       : 0,
+    activeNodeRotY: useNodeStore.getState().activeNodeState.interactedWith
+      ? useNodeStore.getState().activeNodeState.rotY
+      : props.rotation[1],
     config: { duration: 800 },
   }));
 
@@ -139,7 +143,7 @@ const Node = (props: NodeContructorProps) => {
         ? state.activeNodeState.posX
         : props.position[0],
       activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
-        ? 0
+        ? state.activeNodeState.posY
         : props.position[1],
       activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
         ? state.activeNodeState.posZ
@@ -147,6 +151,9 @@ const Node = (props: NodeContructorProps) => {
       activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
         ? state.activeNodeState.rotZ
         : 0,
+      activeNodeRotY: useNodeStore.getState().activeNodeState.interactedWith
+        ? state.activeNodeState.rotY
+        : props.rotation[1],
     }));
   }, [
     props.level,
@@ -155,6 +162,7 @@ const Node = (props: NodeContructorProps) => {
     activeNodeRotZ,
     props.position,
     set,
+    props.rotation,
   ]);
 
   return (
@@ -171,7 +179,7 @@ const Node = (props: NodeContructorProps) => {
           position-y={activeNodePosY}
           position-z={activeNodePosZ}
           rotation-z={activeNodeRotZ}
-          rotation-y={props.rotation[1]}
+          rotation-y={activeNodeRotY}
           scale={[0.36, 0.18, 0.36]}
           renderOrder={1}
         >

src/core/StateManagers/MainSceneManagers/LainManager.tsx

@@ -29,10 +29,22 @@ const LainManager = (props: StateManagerProps) => {
             value: "throw_node",
             duration: 3900,
           };
+        case "knock_node":
+          return {
+            action: setLainMoveState,
+            value: "knock_node",
+            duration: 3900,
+          };
+        case "knock_node_and_fall":
+          return {
+            action: setLainMoveState,
+            value: "knock_node_and_fall",
+            duration: 6000,
+          };
         case "test":
           return {
             action: setLainMoveState,
-            value: "pause_game",
+            value: "test",
             duration: 3900,
           };
       }

src/core/StateManagers/MainSceneManagers/NodeManager.tsx

@@ -8,19 +8,19 @@ const NodeManager = (props: StateManagerProps) => {
     (state) => state.setNodeMatrixIndices
   );
 
+  const calculateCoordsBasedOnRotation = (
+    x: number,
+    z: number,
+    rotation: number
+  ) => ({
+    x: x * Math.cos(rotation) - z * Math.sin(rotation),
+    z: x * Math.sin(rotation) + z * Math.cos(rotation),
+  });
+
   const animateActiveNodeThrow = useCallback(
     (siteRotY: number) => {
       setActiveNodeState(true, "interactedWith");
 
-      const calculateCoordsBasedOnRotation = (
-        x: number,
-        z: number,
-        rotation: number
-      ) => ({
-        x: x * Math.cos(rotation) - z * Math.sin(rotation),
-        z: x * Math.sin(rotation) + z * Math.cos(rotation),
-      });
-
       const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
       const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
       const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
@@ -28,6 +28,7 @@ const NodeManager = (props: StateManagerProps) => {
 
       setActiveNodeState(fstCoordSet.x, "posX");
       setActiveNodeState(fstCoordSet.z, "posZ");
+      setActiveNodeState(0, "posY");
 
       setTimeout(() => {
         setActiveNodeState(sndCoordSet.x, "posX");
@@ -51,6 +52,68 @@ const NodeManager = (props: StateManagerProps) => {
     [setActiveNodeState]
   );
 
+  const animateNodeKnock = useCallback(
+    (siteRotY: number) => {
+      setActiveNodeState(true, "interactedWith");
+
+      const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
+
+      setActiveNodeState(fstCoordSet.x, "posX");
+      setActiveNodeState(fstCoordSet.z, "posZ");
+      setActiveNodeState(-0.6, "posY");
+
+      setTimeout(() => {
+        setActiveNodeState(false, "interactedWith");
+      }, 2500);
+    },
+    [setActiveNodeState]
+  );
+
+  const animateNodeKnockAndFall = useCallback(
+    (siteRotY: number) => {
+      setActiveNodeState(true, "interactedWith");
+
+      const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
+
+      setActiveNodeState(fstCoordSet.x, "posX");
+      setActiveNodeState(fstCoordSet.z, "posZ");
+      setActiveNodeState(-0.6, "posY");
+
+      setTimeout(() => {
+        setActiveNodeState(1.2, "posY");
+      }, 2300);
+
+      setTimeout(() => {
+        setActiveNodeState(false, "interactedWith");
+      }, 2500);
+    },
+    [setActiveNodeState]
+  );
+
+  const animateNodeTouchAndScare = useCallback(
+    (siteRotY: number) => {
+      setActiveNodeState(true, "interactedWith");
+
+      const fstCoordSet = calculateCoordsBasedOnRotation(-0.6, 0.2, siteRotY);
+
+      setActiveNodeState(fstCoordSet.x, "posX");
+      setActiveNodeState(fstCoordSet.z, "posZ");
+      setActiveNodeState(0, "posY");
+
+      setTimeout(() => {
+        setActiveNodeState(Math.PI, "rotZ");
+        setActiveNodeState(Math.PI, "rotY");
+      }, 1200);
+
+      setTimeout(() => {
+        setActiveNodeState(false, "interactedWith");
+        setActiveNodeState(0, "rotZ");
+        setActiveNodeState(0, "rotY");
+      }, 2500);
+    },
+    [setActiveNodeState]
+  );
+
   const updateActiveNode = useCallback(
     (
       newActiveNodeId: string,
@@ -110,9 +173,14 @@ const NodeManager = (props: StateManagerProps) => {
             action: animateActiveNodeThrow,
             value: [eventState.siteRotY],
           };
+        case "test":
+          return {
+            action: animateNodeTouchAndScare,
+            value: [eventState.siteRotY],
+          };
       }
     },
-    [animateActiveNodeThrow, updateActiveNode]
+    [animateActiveNodeThrow, animateNodeKnock, updateActiveNode]
   );
 
   useEffect(() => {

src/core/mainSceneEventHandler.ts

@@ -102,7 +102,7 @@ const handleMainSceneEvent = (gameContext: any) => {
       case "TRIANGLE":
         return { event: "pause_game" };
       case "SPACE":
-        return { event: "test" };
+        return { event: "test", siteRotY: siteRotY };
     }
 
     return {

src/store.ts

@@ -61,6 +61,8 @@ type NodeState = {
     id: string;
     posX: number;
     posZ: number;
+    posY: number;
+    rotY: number;
     rotZ: number;
     interactedWith: boolean;
   };
@@ -107,7 +109,7 @@ type MiddleRingState = {
   isRotating: boolean;
   animDuration: number;
   mainRingVisible: boolean;
-  partSeparatorVal: number
+  partSeparatorVal: number;
 };
 
 type MediaWordState = {
@@ -296,6 +298,8 @@ export const useNodeStore = create(
         posX: 0,
         posZ: 0,
         rotZ: 0,
+        rotY: 0,
+        posY: 0,
         interactedWith: false,
       },
       nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },