feat(settings): block interactions while animation is happening

app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue

@@ -66,6 +66,8 @@ const highScore = useLocalStorage("taptap_high_score", 0);
 let score = 0;
 let isNewBest = false;
 
+const isAnimating = ref(true);
+
 const AREA_FADE_DURATION = 0.2;
 const SCORE_OFFSET = -20;
 const SCORE_DURATION = 0.15;
@@ -77,6 +79,7 @@ const animation = reactive({
 });
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   await gsap
     .timeline()
     .to(
@@ -89,9 +92,11 @@ const animateIntro = async () => {
       { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
       AREA_FADE_DURATION,
     );
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   targetX = 0;
   targetY = LOGICAL_HEIGHT * 2 - 20;
 
@@ -119,6 +124,7 @@ onMounted(() => {
 });
 
 const handleActivateB = () => {
+  if (isAnimating.value) return;
   if (state.value === "playing") {
     state.value = "paused";
     confirmationModal.open({
@@ -140,6 +146,7 @@ const handleActivateB = () => {
 };
 
 const handleActivateA = async () => {
+  if (isAnimating.value) return;
   if (state.value === "playing") {
     state.value = "paused";
     confirmationModal.open({