From e1813e83e0656ce6bc230fb292204265372563c2 Mon Sep 17 00:00:00 2001
From: ad044 <antidepressant044@protonmail.com>
Date: Thu, 3 Dec 2020 19:52:07 +0400
Subject: [PATCH] basic animation done! gotta clean up and add some more
 details

---
 src/components/MainScene/Pause.tsx            | 161 ++++++++++++------
 src/components/MainScene/PauseSquare.tsx      |  47 ++---
 .../TextRenderer/StaticBigLetter.tsx          |  36 +++-
 3 files changed, 169 insertions(+), 75 deletions(-)

diff --git a/src/components/MainScene/Pause.tsx b/src/components/MainScene/Pause.tsx
index 8bbe9a9..3112752 100644
--- a/src/components/MainScene/Pause.tsx
+++ b/src/components/MainScene/Pause.tsx
@@ -1,15 +1,18 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import * as THREE from "three";
 import PauseSquare from "./PauseSquare";
 import StaticBigLetter from "../TextRenderer/StaticBigLetter";
 import { usePauseStore } from "../../store";
 
 const Pause = () => {
+  const [intro, setIntro] = useState(true);
+
   const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
   const activeComponent = usePauseStore(
-    useCallback((state) => state.componentMatrix[componentMatrixIdx], [
-      componentMatrixIdx,
-    ])
+    useCallback(
+      (state) => (intro ? "" : state.componentMatrix[componentMatrixIdx]),
+      [componentMatrixIdx, intro]
+    )
   );
 
   const generateSqaureGeom = useCallback((row: number, square: number) => {
@@ -35,21 +38,37 @@ const Pause = () => {
     [generateSqaureGeom]
   );
 
+  useEffect(() => {
+    setTimeout(() => {
+      setIntro(false);
+    }, 2000);
+  }, []);
   return (
     <group position={[-1, -0.8, 0]} scale={[0.9, 0.9, 0]}>
       {[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
         [0, 1, 2, 3, 4, 5, 6].map((col: number) => {
           if (rowIdx === 5 && col > 0 && col < 5) {
             return col === 1 ? (
-              <StaticBigLetter
-                color={"white"}
-                letter={"L"}
-                letterIdx={col}
-                position={[0.35, 1.8, 0]}
-                scale={[0.25, 0.25, 0.25]}
-                active={!(activeComponent === "load")}
-                key={col}
-              />
+              <>
+                <StaticBigLetter
+                  color={"white"}
+                  letter={"L"}
+                  letterIdx={col}
+                  position={[0.35, 1.8, 0]}
+                  scale={[0.25, 0.25, 0.25]}
+                  active={!(activeComponent === "load")}
+                  key={col}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                />
+                <PauseSquare
+                  geometry={squareGeoms[row][col]}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                  key={col}
+                  shouldDisappear={true}
+                />
+              </>
             ) : (
               <PauseSquare
                 geometry={squareGeoms[row][col]}
@@ -61,15 +80,26 @@ const Pause = () => {
             );
           } else if (rowIdx === 4 && col > 4 && col < 7) {
             return col === 5 ? (
-              <StaticBigLetter
-                color={"white"}
-                letter={"A"}
-                letterIdx={col}
-                position={[1.78, 1.43, 0]}
-                scale={[0.25, 0.25, 0]}
-                active={!(activeComponent === "about")}
-                key={col}
-              />
+              <>
+                <StaticBigLetter
+                  color={"white"}
+                  letter={"A"}
+                  letterIdx={col}
+                  position={[1.78, 1.43, 0]}
+                  scale={[0.25, 0.25, 0]}
+                  active={!(activeComponent === "about")}
+                  key={col}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                />
+                <PauseSquare
+                  geometry={squareGeoms[row][col]}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                  key={col}
+                  shouldDisappear={true}
+                />
+              </>
             ) : (
               <PauseSquare
                 geometry={squareGeoms[row][col]}
@@ -81,15 +111,26 @@ const Pause = () => {
             );
           } else if (rowIdx === 3 && col > 2 && col < 7) {
             return col === 3 ? (
-              <StaticBigLetter
-                color={"white"}
-                letter={"C"}
-                letterIdx={col}
-                position={[1.05, 1.07, 0]}
-                scale={[0.25, 0.25, 0]}
-                active={!(activeComponent === "change")}
-                key={col}
-              />
+              <>
+                <StaticBigLetter
+                  color={"white"}
+                  letter={"C"}
+                  letterIdx={col}
+                  position={[1.05, 1.07, 0]}
+                  scale={[0.25, 0.25, 0]}
+                  active={!(activeComponent === "change")}
+                  key={col}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                />
+                <PauseSquare
+                  geometry={squareGeoms[row][col]}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                  key={col}
+                  shouldDisappear={true}
+                />
+              </>
             ) : (
               <PauseSquare
                 geometry={squareGeoms[row][col]}
@@ -101,15 +142,26 @@ const Pause = () => {
             );
           } else if (rowIdx === 1 && col > 0 && col < 5) {
             return col === 1 ? (
-              <StaticBigLetter
-                color={"white"}
-                letter={"S"}
-                letterIdx={col}
-                position={[0.35, 0.35, 0]}
-                scale={[0.25, 0.25, 0]}
-                active={!(activeComponent === "save")}
-                key={col}
-              />
+              <>
+                <StaticBigLetter
+                  color={"white"}
+                  letter={"S"}
+                  letterIdx={col}
+                  position={[0.35, 0.35, 0]}
+                  scale={[0.25, 0.25, 0]}
+                  active={!(activeComponent === "save")}
+                  key={col}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                />
+                <PauseSquare
+                  geometry={squareGeoms[row][col]}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                  key={col}
+                  shouldDisappear={true}
+                />
+              </>
             ) : (
               <PauseSquare
                 geometry={squareGeoms[row][col]}
@@ -121,15 +173,26 @@ const Pause = () => {
             );
           } else if (rowIdx === 0 && col > 4 && col < 7) {
             return col === 5 ? (
-              <StaticBigLetter
-                color={"white"}
-                letter={"E"}
-                letterIdx={col}
-                position={[1.78, 0, 0]}
-                scale={[0.25, 0.25, 0]}
-                active={!(activeComponent === "exit")}
-                key={col}
-              />
+              <>
+                <StaticBigLetter
+                  color={"white"}
+                  letter={"E"}
+                  letterIdx={col}
+                  position={[1.78, 0, 0]}
+                  scale={[0.25, 0.25, 0]}
+                  active={!(activeComponent === "exit")}
+                  key={col}
+                  rowIdx={1}
+                  colIdx={col}
+                />
+                <PauseSquare
+                  geometry={squareGeoms[row][col]}
+                  rowIdx={rowIdx}
+                  colIdx={col}
+                  key={col}
+                  shouldDisappear={true}
+                />
+              </>
             ) : (
               <PauseSquare
                 geometry={squareGeoms[row][col]}
diff --git a/src/components/MainScene/PauseSquare.tsx b/src/components/MainScene/PauseSquare.tsx
index d5d7a7b..7f7076e 100644
--- a/src/components/MainScene/PauseSquare.tsx
+++ b/src/components/MainScene/PauseSquare.tsx
@@ -3,12 +3,14 @@ import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png";
 import { a, useSpring } from "@react-spring/three";
+import { CurveUtils } from "three";
 
 type PauseSquareProps = {
   colIdx: number;
   rowIdx: number;
   geometry: THREE.PlaneBufferGeometry;
-  active: boolean;
+  active?: boolean;
+  shouldDisappear?: boolean;
 };
 
 const PauseSquare = (props: PauseSquareProps) => {
@@ -30,37 +32,37 @@ const PauseSquare = (props: PauseSquareProps) => {
   const rotX = toggle.to([0, 1], [-Math.PI, 0]);
   const rotY = toggle.to([0, 1], [Math.PI / 2, 0]);
 
-  const introRotX = introToggle.to([0, 1], [0, 2 * Math.PI]);
-  const introRotY = introToggle.to([0, 1], [0, 2 * Math.PI]);
+  const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
+  const introRotY = introToggle.to(
+    [0, 1],
+    [Math.PI, props.shouldDisappear ? Math.PI / 2 : 0]
+  );
 
   useEffect(() => {
     setTimeout(() => {
-      setIntroAnimToggle(true);
-    }, (props.rowIdx + props.colIdx) * 100);
+      setTimeout(() => {
+        setIntroAnimToggle(true);
+      }, (props.rowIdx + props.colIdx) * 100);
 
-    setTimeout(() => {
-      setIntro(false);
-    }, 5000);
+      setTimeout(() => {
+        setIntro(false);
+      }, 1500);
+    }, 500);
   }, [props.colIdx, props.rowIdx]);
 
-  const side = useMemo(() => {
-    if (intro) return THREE.DoubleSide;
-    else {
-      if (
-        (props.colIdx > 3 && props.rowIdx <= 3) ||
-        (props.colIdx <= 3 && props.rowIdx > 3)
-      ) {
-        return THREE.FrontSide;
-      } else {
-        return THREE.BackSide;
-      }
-    }
-  }, [intro, props.colIdx, props.rowIdx]);
+  const initialState = useSpring({
+    posX: props.colIdx / 2.8,
+    posY: props.rowIdx / 2.8,
+    rotZ: 0,
+    from: { posX: 1.05, posY: 1.07, rotZ: -1 },
+    config: { duration: 500 },
+  });
 
   return (
     <a.mesh
       geometry={props.geometry}
-      position={[props.colIdx / 2.8, props.rowIdx / 2.8, 0]}
+      position-x={initialState.posX}
+      position-y={initialState.posY}
       scale={[
         props.colIdx > 3 ? -0.25 : 0.25,
         props.rowIdx <= 3 ? -0.25 : 0.25,
@@ -68,6 +70,7 @@ const PauseSquare = (props: PauseSquareProps) => {
       ]}
       rotation-x={intro ? introRotX : rotX}
       rotation-y={intro ? introRotY : rotY}
+      rotation-z={initialState.rotZ}
     >
       <meshBasicMaterial
         attach="material"
diff --git a/src/components/TextRenderer/StaticBigLetter.tsx b/src/components/TextRenderer/StaticBigLetter.tsx
index a6760ab..1a88f7c 100644
--- a/src/components/TextRenderer/StaticBigLetter.tsx
+++ b/src/components/TextRenderer/StaticBigLetter.tsx
@@ -4,8 +4,8 @@ import whiteFont from "../../static/sprite/white_and_green_texture.png";
 import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 import orange_font_json from "../../resources/font_data/big_font.json";
-import { a, Interpolation, SpringValue, useSpring } from "@react-spring/three";
-import React, { useMemo } from "react";
+import { a, useSpring } from "@react-spring/three";
+import React, { useEffect, useMemo, useState } from "react";
 
 const StaticBigLetter = (props: {
   color: string;
@@ -14,6 +14,8 @@ const StaticBigLetter = (props: {
   position: number[];
   scale: number[];
   active: boolean;
+  rowIdx?: number;
+  colIdx?: number;
 }) => {
   const { toggle } = useSpring({
     toggle: Number(props.active),
@@ -23,6 +25,17 @@ const StaticBigLetter = (props: {
   const rotX = toggle.to([0, 1], [-Math.PI, 0]);
   const rotY = toggle.to([0, 1], [Math.PI / 2, 0]);
 
+  const [intro, setIntro] = useState<boolean>(!!(props.rowIdx && props.colIdx));
+  const [introAnimToggle, setIntroAnimToggle] = useState(false);
+
+  const { introToggle } = useSpring({
+    introToggle: Number(introAnimToggle),
+    config: { duration: 200 },
+  });
+
+  const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
+  const introRotY = introToggle.to([0, 1], [Math.PI * 2, 0]);
+
   const colorToTexture = (color: string) => {
     const colorTexture = {
       orange: orangeFont,
@@ -99,6 +112,20 @@ const StaticBigLetter = (props: {
     return geometry;
   }, [letterData, lineYOffsets, props.letter]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      if (props.rowIdx && props.colIdx) {
+        setTimeout(() => {
+          setIntroAnimToggle(true);
+        }, (props.rowIdx + props.colIdx) * 100);
+
+        setTimeout(() => {
+          setIntro(false);
+        }, 1500);
+      }
+    }, 500);
+  }, [props.colIdx, props.rowIdx]);
+
   return (
     <a.mesh
       position={[
@@ -108,13 +135,14 @@ const StaticBigLetter = (props: {
       ]}
       scale={props.scale as [number, number, number]}
       geometry={geom}
-      rotation-x={rotX}
-      rotation-y={rotY}
+      rotation-x={intro ? introRotX : rotX}
+      rotation-y={intro ? introRotY : rotY}
     >
       <meshBasicMaterial
         map={colorTexture}
         attach="material"
         transparent={true}
+        side={THREE.FrontSide}
       />
     </a.mesh>
   );