feat(settings): block interactions while animation is happening

app/components/Settings/BottomScreen/Menus/Options/2048.vue

@@ -9,6 +9,7 @@ const { assets } = useAssets();
 const { onRender } = useScreen();
 
 const handleActivateB = () => {
+  if (isAnimating.value) return;
   confirmationModal.open({
     text: $t("settings.options.2048.quitConfirmation"),
     onConfirm: () => {},
@@ -22,6 +23,7 @@ const handleActivateB = () => {
 };
 
 const handleActivateA = () => {
+  if (isAnimating.value) return;
   if (isDead()) {
     resetBoard();
     return;
@@ -70,6 +72,8 @@ const SLIDE_DURATION = 0.25;
 const SCORE_OFFSET = -20;
 const SCORE_DURATION = 0.15;
 
+const isAnimating = ref(true);
+
 const intro = reactive({
   frameOffsetY: SLIDE_OFFSET,
   frameOpacity: 0,
@@ -137,6 +141,7 @@ const animateSpawnAll = () => {
 };
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   buildTilesFromBoard();
 
   await gsap
@@ -156,9 +161,11 @@ const animateIntro = async () => {
       { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
       SLIDE_DURATION,
     );
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   await gsap
     .timeline()
     .to(
@@ -530,6 +537,7 @@ const slide = (rowDir: number, colDir: number) => {
 };
 
 useKeyDown((key) => {
+  if (isAnimating.value) return;
   switch (key) {
     // TODO: remove this, testing only
     case "n":

app/components/Settings/BottomScreen/Menus/Options/Language.vue

@@ -26,6 +26,8 @@ const BUTTON_POSITIONS = [
   [143, 128],
 ] as const;
 
+const isAnimating = ref(true);
+
 const { selected, selectorPosition } = useButtonNavigation({
   buttons: {
     english: [10, 27, 106, 41],
@@ -66,6 +68,7 @@ const { selected, selectorPosition } = useButtonNavigation({
       left: "italian",
     },
   },
+  disabled: isAnimating,
   selectorAnimation: {
     duration: 0.1,
     ease: "power2.out",
@@ -90,6 +93,7 @@ const animation = reactive({
 });
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   const timeline = gsap.timeline();
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
@@ -105,9 +109,11 @@ const animateIntro = async () => {
       );
   }
   await timeline;
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   const timeline = gsap.timeline();
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
@@ -130,11 +136,13 @@ onMounted(() => {
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleConfirm = () => {
+  if (isAnimating.value) return;
   const selectedLocale = locales.value[BUTTON_KEYS.indexOf(selected.value)]!;
 
   setLocale(selectedLocale.code);

app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue

@@ -16,6 +16,8 @@ const BUTTON_STAGGER = 0.3;
 const SLIDE_OFFSET = 96;
 const SLIDE_DURATION = 0.25;
 
+const isAnimating = ref(true);
+
 const animation = reactive({
   _3dMode: { headerOffsetY: HEADER_HEIGHT * 3, opacity: 0 },
   _2dMode: { headerOffsetY: HEADER_HEIGHT * 3, opacity: 0 },
@@ -24,6 +26,7 @@ const animation = reactive({
 });
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   await gsap
     .timeline()
     .to(
@@ -46,9 +49,11 @@ const animateIntro = async () => {
       },
       BUTTON_STAGGER,
     );
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   await gsap
     .timeline()
     .to(
@@ -77,6 +82,7 @@ const { selected, selectorPosition } = useButtonNavigation({
     _3dMode: { down: "_2dMode" },
     _2dMode: { up: "_3dMode" },
   },
+  disabled: isAnimating,
   selectorAnimation: {
     ease: "none",
     duration: 0.065,
@@ -84,11 +90,13 @@ const { selected, selectorPosition } = useButtonNavigation({
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleConfirm = () => {
+  if (isAnimating.value) return;
   const mode = selected.value === "_3dMode" ? "3d" : "2d";
   app.setRenderingMode(mode);