feat(settings): block interactions while animation is happening

app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue

@@ -33,6 +33,8 @@ const achievements = useAchievementsStore();
 const achievementsScreen = useAchievementsScreen();
 const confirmationModal = useConfirmationModal();
 
+const isAnimating = ref(true);
+
 const SLIDE_OFFSET = 96;
 const SLIDE_DURATION = 0.25;
 const ARROW_SLIDE_DELAY = 0.15;
@@ -50,6 +52,7 @@ const obtainedRef =
 const totalRef = useTemplateRef<InstanceType<typeof NumberInput>>("total");
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   await Promise.all([
     obtainedRef.value?.animateIntro(),
     totalRef.value?.animateIntro(),
@@ -63,9 +66,11 @@ const animateIntro = async () => {
         SLIDE_DURATION + ARROW_SLIDE_DELAY,
       ),
   ]);
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   await Promise.all([
     obtainedRef.value?.animateOutro(),
     totalRef.value?.animateOutro(),
@@ -94,11 +99,13 @@ onMounted(() => {
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleReset = () => {
+  if (isAnimating.value) return;
   confirmationModal.open({
     text: $t("settings.clock.achievements.resetConfirmation"),
     onConfirm: () => {
@@ -108,10 +115,12 @@ const handleReset = () => {
 };
 
 const handleVisitAll = () => {
+  if (isAnimating.value) return;
   achievementsScreen.animateFadeToBlackIntro();
 };
 
 onClick((x, y) => {
+  if (isAnimating.value) return;
   const viewAllRect = achievementAssets.viewAllButton.rect;
   if (rectContains([127, 2, viewAllRect.width, viewAllRect.height], [x, y])) {
     handleVisitAll();
@@ -119,6 +128,7 @@ onClick((x, y) => {
 });
 
 useKeyDown((key) => {
+  if (isAnimating.value) return;
   if (key === "NDS_X") {
     handleVisitAll();
   }