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();
   }

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

@@ -12,19 +12,24 @@ useIntervalFn(() => {
   now.value = new Date();
 }, 1000);
 
+const isAnimating = ref(true);
+
 const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
 const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
 const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   await Promise.all([
     monthRef.value?.animateIntro(),
     dayRef.value?.animateIntro(),
     yearRef.value?.animateIntro(),
   ]);
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   await Promise.all([
     monthRef.value?.animateOutro(),
     dayRef.value?.animateOutro(),
@@ -37,11 +42,13 @@ onMounted(() => {
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleConfirm = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };

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

@@ -21,10 +21,13 @@ const animation = reactive({
   opacity: 0,
 });
 
+const isAnimating = ref(true);
+
 const hourRef = useTemplateRef<InstanceType<typeof NumberInput>>("hour");
 const minuteRef = useTemplateRef<InstanceType<typeof NumberInput>>("minute");
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   await Promise.all([
     hourRef.value?.animateIntro(),
     minuteRef.value?.animateIntro(),
@@ -33,9 +36,11 @@ const animateIntro = async () => {
       .to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
       .to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0),
   ]);
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   await Promise.all([
     hourRef.value?.animateOutro(),
     minuteRef.value?.animateOutro(),
@@ -55,11 +60,13 @@ onMounted(() => {
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleConfirm = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };