From 19450f0bf7922aa6d1b4ef3fb3b2b77f11c469f5 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Sat, 20 Dec 2025 14:55:49 +0100
Subject: [PATCH] fix: block interactions when animation is happening

---
 .../Contact/BottomScreen/BottomScreen.vue        |  7 ++++---
 app/components/Home/BottomScreen/Buttons.vue     |  1 +
 app/composables/useButtonNavigation.ts           |  6 ++++--
 app/stores/contact.ts                            | 16 +++++++---------
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/components/Contact/BottomScreen/BottomScreen.vue b/app/components/Contact/BottomScreen/BottomScreen.vue
index 3995999..c44f38c 100644
--- a/app/components/Contact/BottomScreen/BottomScreen.vue
+++ b/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":
diff --git a/app/components/Home/BottomScreen/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue
index f3ed0d1..0b89344 100644
--- a/app/components/Home/BottomScreen/Buttons.vue
+++ 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"]) => {
diff --git a/app/composables/useButtonNavigation.ts b/app/composables/useButtonNavigation.ts
index 4413e5e..c0c74c7 100644
--- a/app/composables/useButtonNavigation.ts
+++ b/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];
diff --git a/app/stores/contact.ts b/app/stores/contact.ts
index f004c9e..69f4c4c 100644
--- a/app/stores/contact.ts
+++ b/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) {