working on the exit animation. i am tired.

src/components/MainScene/Pause.tsx

@@ -4,8 +4,9 @@ import PauseSquare from "./PauseSquare";
 import StaticBigLetter from "../TextRenderer/StaticBigLetter";
 import { usePauseStore } from "../../store";
 
-const Pause = () => {
+const Pause = (props: { visible: boolean }) => {
   const [intro, setIntro] = useState(true);
+  const [animation, setAnimation] = useState(false);
 
   const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
   const activeComponent = usePauseStore(
@@ -39,11 +40,17 @@ const Pause = () => {
   );
 
   useEffect(() => {
-    setTimeout(() => {
-      setIntro(false);
-    }, 2000);
-  }, []);
-  return (
+    if (props.visible) {
+      setTimeout(() => {
+        setAnimation(true);
+      }, 1000);
+      setTimeout(() => {
+        setIntro(false);
+      }, 3000);
+    }
+  }, [props.visible]);
+
+  return animation ? (
     <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) => {
@@ -275,6 +282,8 @@ const Pause = () => {
         />
       ))}
     </group>
+  ) : (
+    <></>
   );
 };
 

src/components/MainScene/PauseSquare.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 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";
+import { usePauseStore } from "../../store";
 
 type PauseSquareProps = {
   colIdx: number;
@@ -14,6 +15,8 @@ type PauseSquareProps = {
 };
 
 const PauseSquare = (props: PauseSquareProps) => {
+  const exitAnimation = usePauseStore((state) => state.exitAnimation);
+
   const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
 
   const [intro, setIntro] = useState(true);
@@ -29,8 +32,8 @@ const PauseSquare = (props: PauseSquareProps) => {
     config: { duration: 200 },
   });
 
-  const rotX = toggle.to([0, 1], [-Math.PI, 0]);
-  const rotY = toggle.to([0, 1], [Math.PI / 2, 0]);
+  const rotX = toggle.to([0, 1], [-Math.PI, exitAnimation ? 2.2 : 0]);
+  const rotY = toggle.to([0, 1], [Math.PI / 2, exitAnimation ? 2.2 : 0]);
 
   const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
   const introRotY = introToggle.to(
@@ -50,9 +53,22 @@ const PauseSquare = (props: PauseSquareProps) => {
     }, 500);
   }, [props.colIdx, props.rowIdx]);
 
+  const getExitAnimValue = useMemo(() => {
+    let col, row;
+    if (props.colIdx < 3) col = -1;
+    else if (props.colIdx > 3) col = 1;
+    else col = 0;
+
+    if (props.rowIdx < 3) row = -1;
+    else if (props.rowIdx > 3) row = 1;
+    else row = 0;
+
+    return { row, col };
+  }, [props.colIdx, props.rowIdx]);
+
   const initialState = useSpring({
-    posX: props.colIdx / 2.8,
-    posY: props.rowIdx / 2.8,
+    posX: props.colIdx / 2.8 + getExitAnimValue.col * (exitAnimation ? 2.2 : 0),
+    posY: props.rowIdx / 2.8 + getExitAnimValue.row * (exitAnimation ? 2.2 : 0),
     rotZ: 0,
     from: { posX: 1.05, posY: 1.07, rotZ: -1 },
     config: { duration: 500 },

src/components/TextRenderer/StaticBigLetter.tsx

@@ -6,6 +6,7 @@ import { useLoader } from "react-three-fiber";
 import orange_font_json from "../../resources/font_data/big_font.json";
 import { a, useSpring } from "@react-spring/three";
 import React, { useEffect, useMemo, useState } from "react";
+import { usePauseStore } from "../../store";
 
 const StaticBigLetter = (props: {
   color: string;
@@ -17,24 +18,7 @@ const StaticBigLetter = (props: {
   rowIdx?: number;
   colIdx?: number;
 }) => {
-  const { toggle } = useSpring({
-    toggle: Number(props.active),
-    config: { duration: 200 },
-  });
-
-  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 exitAnimation = usePauseStore((state) => state.exitAnimation);
 
   const colorToTexture = (color: string) => {
     const colorTexture = {
@@ -112,6 +96,39 @@ const StaticBigLetter = (props: {
     return geometry;
   }, [letterData, lineYOffsets, props.letter]);
 
+  const { toggle } = useSpring({
+    toggle: Number(props.active),
+    config: { duration: 200 },
+  });
+
+  const getExitAnimValue = useMemo(() => {
+    let col = 0;
+    let row = 0;
+    if (props.colIdx && props.rowIdx) {
+      if (props.colIdx < 3) col = -1;
+      else if (props.colIdx > 3) col = 1;
+
+      if (props.rowIdx < 3) row = -1;
+      else if (props.rowIdx > 3) row = 1;
+
+      return { row, col };
+    }
+  }, [props.colIdx, props.rowIdx]);
+
+  const rotX = toggle.to([0, 1], [-Math.PI, 0 + (exitAnimation ? 2.2 : 0)]);
+  const rotY = toggle.to([0, 1], [Math.PI / 2, 0 + (exitAnimation ? 2.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]);
+
   useEffect(() => {
     setTimeout(() => {
       if (props.rowIdx && props.colIdx) {
@@ -126,6 +143,17 @@ const StaticBigLetter = (props: {
     }, 500);
   }, [props.colIdx, props.rowIdx]);
 
+  const initialState = useSpring({
+    posX:
+      props.position[0] +
+      (getExitAnimValue ? getExitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0),
+    posY:
+      -letterData[4] / 50 +
+      props.position[1] +
+      (getExitAnimValue ? getExitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0),
+    config: { duration: 800 },
+  });
+
   return (
     <a.mesh
       position={[
@@ -133,6 +161,8 @@ const StaticBigLetter = (props: {
         -letterData[4] / 50 + props.position[1],
         props.position[2],
       ]}
+      position-x={initialState.posX}
+      position-y={initialState.posY}
       scale={props.scale as [number, number, number]}
       geometry={geom}
       rotation-x={intro ? introRotX : rotX}

src/core/StateManagers/EventManager.tsx

@@ -65,6 +65,11 @@ const EventManager = () => {
     (state) => state.selectedLevelIdx
   );
   const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
+  const activePauseComponent = usePauseStore(
+    useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
+      pauseMatrixIdx,
+    ])
+  );
 
   // media scene
   const mediaComponentMatrixIndices = useMediaStore(
@@ -146,6 +151,7 @@ const EventManager = () => {
               activeLevel: activeLevel,
               levelSelectionIdx: levelSelectionIdx,
               pauseMatrixIdx: pauseMatrixIdx,
+              activePauseComponent: activePauseComponent,
             });
             break;
           case "media":

src/core/StateManagers/PauseComponentManager.tsx

@@ -6,6 +6,7 @@ const PauseComponentManager = (props: StateManagerProps) => {
   const setComponentMatrixIdx = usePauseStore(
     (state) => state.setComponentMatrixIdx
   );
+  const setExitAnimation = usePauseStore((state) => state.setExitAnimation);
 
   const dispatchObject = useCallback(
     (event: string, newComponentMatrixIdx: number) => {
@@ -16,9 +17,14 @@ const PauseComponentManager = (props: StateManagerProps) => {
             action: setComponentMatrixIdx,
             value: newComponentMatrixIdx,
           };
+        case "pause_exit_select":
+          return {
+            action: setExitAnimation,
+            value: true,
+          };
       }
     },
-    [setComponentMatrixIdx]
+    [setComponentMatrixIdx, setExitAnimation]
   );
 
   useEffect(() => {

src/core/StateManagers/SiteManager.tsx

@@ -30,6 +30,12 @@ const SiteManager = (props: StateManagerProps) => {
             value: [Math.PI / 2, "rotX"],
             actionDelay: 0,
           };
+        case "pause_exit_select":
+          return {
+            action: setTransformState,
+            value: [0, "rotX"],
+            actionDelay: 0,
+          };
       }
     },
     [setTransformState]

src/core/StateManagers/SubsceneManager.tsx

@@ -26,6 +26,11 @@ const SubsceneManager = (props: StateManagerProps) => {
             action: setMainSubscene,
             value: "pause",
           };
+        case "pause_exit_select":
+          return {
+            action: setMainSubscene,
+            value: "site",
+          };
         case "authorize_user_back":
         case "load_data_no_select":
           return {

src/core/mainSceneEventHandler.ts

@@ -24,6 +24,7 @@ const handleMainSceneEvent = (gameContext: any) => {
   const subscene = gameContext.mainSubscene;
   const levelSelectionIdx = gameContext.levelSelectionIdx;
   const pauseMatrixIdx = gameContext.pauseMatrixIdx;
+  const activePauseComponent = gameContext.activePauseComponent;
 
   const nodeColIdx = gameContext.nodeMatrixIndices.colIdx;
   const nodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
@@ -213,6 +214,10 @@ const handleMainSceneEvent = (gameContext: any) => {
           event: "pause_down",
           newPauseMatrixIdx: pauseMatrixIdx + 1,
         };
+      case "CIRCLE":
+        return {
+          event: `pause_${activePauseComponent}_select`,
+        };
     }
   }
 };

src/scenes/MainScene.tsx

@@ -35,23 +35,23 @@ const MainScene = () => {
       <Suspense fallback={null}>
         <MainSceneIntro />
         <a.group>
-          {/*<Preloader />*/}
-          {/*<Site />*/}
-          {/*<ActiveLevelNodes />*/}
-          {/*<HUD visible={!isPaused} />*/}
-          {/*<GreenTextRenderer visible={!isPaused} />*/}
-          {/*<YellowTextRenderer visible={!isPaused} />*/}
-          {/*<YellowOrb visible={!isPaused} />*/}
-          {/*<Starfield />*/}
-          {/*<GrayPlanes visible={!isPaused} />*/}
-          {/*<MiddleRing />*/}
-          {/*<LevelSelection />*/}
-          {/*<OrbitControls />*/}
+          <Preloader />
+          <Site />
+          <ActiveLevelNodes />
+          <HUD visible={!isPaused} />
+          <GreenTextRenderer visible={!isPaused} />
+          <YellowTextRenderer visible={!isPaused} />
+          <YellowOrb visible={!isPaused} />
+          <Starfield />
+          <GrayPlanes visible={!isPaused} />
+          <MiddleRing />
+          <LevelSelection />
+          <Pause visible={isPaused} />
+          <OrbitControls />
           <pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
           <pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
           <pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
           <pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
-          <Pause />
         </a.group>
         {/*<Lain />*/}
       </Suspense>

src/store.ts

@@ -4,9 +4,11 @@ import * as THREE from "three";
 import authorize_user_letters from "./resources/authorize_user_letters.json";
 
 type PauseState = {
+  exitAnimation: boolean;
   componentMatrix: string[];
   componentMatrixIdx: number;
   setComponentMatrixIdx: (to: number) => void;
+  setExitAnimation: (to: boolean) => void;
 };
 
 type LevelSelectionState = {
@@ -403,7 +405,7 @@ export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
 }));
 
 export const useMainSceneStore = create<MainSceneState>((set) => ({
-  subscene: "pause",
+  subscene: "site",
   setSubscene: (to) => set(() => ({ subscene: to })),
 }));
 
@@ -479,6 +481,7 @@ export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
 export const usePauseStore = create<PauseState>((set) => ({
   componentMatrix: ["load", "about", "change", "save", "exit"],
   componentMatrixIdx: 2,
-  setComponentMatrixIdx: (to: number) =>
-    set(() => ({ componentMatrixIdx: to })),
+  exitAnimation: false,
+  setComponentMatrixIdx: (to) => set(() => ({ componentMatrixIdx: to })),
+  setExitAnimation: (to) => set(() => ({ exitAnimation: to })),
 }));