fix: block interactions when animation is happening

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -43,9 +43,10 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
     },
   },
   initialButton: "github",
-  onButtonClick: async (button) => {
+  onButtonClick: (button) => {
     actionateButton(button);
   },
+  disabled: computed(() => store.isIntro || store.isOutro),
 });
 
 const actionateButton = async (button: (typeof selectedButton)["value"]) => {
@@ -71,7 +72,7 @@ const QUIT_BUTTON: Rect = [31, 172, 80, 18];
 const OK_BUTTON: Rect = [144, 172, 80, 18];
 
 useScreenClick((x, y) => {
-  if (modalState.value.isOpen) {
+  if (modalState.value.isOpen || store.isIntro || store.isOutro) {
     return;
   }
 
@@ -83,7 +84,7 @@ useScreenClick((x, y) => {
 });
 
 useKeyDown((key) => {
-  if (modalState.value.isOpen) return;
+  if (modalState.value.isOpen || store.isIntro || store.isOutro) return;
 
   switch (key) {
     case "NDS_B":

app/components/Home/BottomScreen/Buttons.vue

@@ -51,6 +51,7 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
       left: "settings",
     },
   },
+  disabled: computed(() => store.isIntro || store.isOutro),
 });
 
 const getButtonOffset = (button: (typeof selectedButton)["value"]) => {

app/composables/useButtonNavigation.ts

@@ -5,6 +5,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   initialButton,
   onButtonClick,
   navigation,
+  disabled,
 }: {
   buttons: T;
   initialButton: keyof T;
@@ -19,6 +20,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
       horizontalMode?: "navigate" | "preview";
     }
   >;
+  disabled?: Ref<boolean>;
 }) => {
   const { state: modalState } = useConfirmationModal();
 
@@ -28,7 +30,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   const nextButton = ref<keyof T | undefined>();
 
   useScreenClick((x: number, y: number) => {
-    if (modalState.value.isOpen) return;
+    if (modalState.value.isOpen || disabled?.value) return;
 
     for (const [buttonName, config] of Object.entries(buttons) as [
       keyof T,
@@ -56,7 +58,7 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   });
 
   useKeyDown((key) => {
-    if (modalState.value.isOpen) return;
+    if (modalState.value.isOpen || disabled?.value) return;
 
     const currentButton = selectedButton.value as keyof T;
     const currentNav = navigation[currentButton];

app/stores/contact.ts

@@ -20,7 +20,7 @@ export const useContactStore = defineStore("contact", {
     },
 
     isIntro: true,
-    isOutro: true,
+    isOutro: false,
 
     notifications: [] as string[],
     notificationsYOffset: 0,
@@ -30,13 +30,8 @@ export const useContactStore = defineStore("contact", {
     animateIntro() {
       this.isIntro = true;
 
-      const timeline = gsap.timeline({
-        onComplete: () => {
-          this.isIntro = false;
-        },
-      });
-
-      timeline
+      gsap
+        .timeline()
         .fromTo(
           this.intro,
           {
@@ -76,7 +71,10 @@ export const useContactStore = defineStore("contact", {
             ease: "none",
           },
           2.3,
-        );
+        )
+        .call(() => {
+          this.isIntro = false;
+        });
     },
 
     pushNotification(content: string) {