feat(common): handleConfirm -> handleActivateA, handleCancel -> handleActivateB

app/components/Common/ConfirmationModal.vue

@@ -18,13 +18,13 @@ const BOTTOM_BAR_HEIGHT = 24;
 const CLIP_HEIGHT = LOGICAL_HEIGHT - BOTTOM_BAR_HEIGHT;
 
 const handleActivateA = () => {
-  confirmationModal.onConfirm?.();
+  confirmationModal.onActivateA?.();
-  confirmationModal.close("confirm");
+  confirmationModal.close("A");
 };
 
 const handleActivateB = () => {
-  confirmationModal.onCancel?.();
+  confirmationModal.onActivateB?.();
-  confirmationModal.close("cancel");
+  confirmationModal.close("B");
 };
 
 onRender((ctx) => {
@@ -58,15 +58,15 @@ onRender((ctx) => {
 }, 100);
 
 onUnmounted(() => {
-  confirmationModal.close("cancel");
+  confirmationModal.close("B");
 });
 </script>
 
 <template>
   <Buttons
     v-if="
-      confirmationModal.onCancel ||
+      confirmationModal.onActivateB ||
-      confirmationModal.onConfirm ||
+      confirmationModal.onActivateA ||
       confirmationModal.bLabel ||
       confirmationModal.aLabel
     "

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -70,7 +70,7 @@ const actionateButton = async (button: (typeof selected)["value"]) => {
     const url = content.replace(/^https?:\/\//, "");
     confirmationModal.open({
       text: $t("contact.openUrl", { url }),
-      onConfirm: async () => {
+      onActivateA: async () => {
         store.pushNotification($t("contact.opened", { item: verb }));
         await promiseTimeout(100);
         await navigateTo(content, { open: { target: "_blank " } });

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

@@ -98,7 +98,7 @@ onMounted(() => {
   animateIntro();
 });
 
-const handleCancel = async () => {
+const handleActivateB = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
@@ -111,7 +111,7 @@ const handleReset = () => {
     bLabel: $t("common.no"),
     aLabel: $t("common.yes"),
     onClosed: (choice) => {
-      if (choice === "confirm") {
+      if (choice === "A") {
         achievements.reset();
       }
     },
@@ -199,7 +199,7 @@ onRender((ctx) => {
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.reset')"
-    @activate-b="handleCancel()"
+    @activate-b="handleActivateB()"
     @activate-a="handleReset()"
   />
 </template>

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

@@ -39,13 +39,13 @@ onMounted(() => {
   animateIntro();
 });
 
-const handleCancel = async () => {
+const handleActivateB = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = async () => {
+const handleActivateA = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
@@ -82,7 +82,7 @@ defineOptions({ render: () => null });
     :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
-    @activate-b="handleCancel"
+    @activate-b="handleActivateB"
-    @activate-a="handleConfirm"
+    @activate-a="handleActivateA"
   />
 </template>

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

@@ -59,13 +59,13 @@ onMounted(() => {
   animateIntro();
 });
 
-const handleCancel = async () => {
+const handleActivateB = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = async () => {
+const handleActivateA = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
@@ -100,7 +100,7 @@ defineOptions({ render: () => null });
     :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
-    @activate-b="handleCancel"
+    @activate-b="handleActivateB"
-    @activate-a="handleConfirm"
+    @activate-a="handleActivateA"
   />
 </template>

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

@@ -15,12 +15,12 @@ const handleActivateB = () => {
     bLabel: $t("common.no"),
     aLabel: $t("common.yes"),
     onClosed: async (choice) => {
-      if (choice === "confirm") {
+      if (choice === "A") {
         await animateOutro();
         store.closeSubMenu();
       }
     },
-    keepButtonsDown: (choice) => choice === "confirm",
+    keepButtonsDown: (choice) => choice === "A",
   });
 };
 
@@ -35,7 +35,7 @@ const handleActivateA = () => {
     bLabel: $t("common.no"),
     aLabel: $t("common.yes"),
     onClosed: (choice) => {
-      if (choice === "confirm") {
+      if (choice === "A") {
         resetBoard();
       }
     },
@@ -116,9 +116,9 @@ let animating = false;
 const showRestartModal = () => {
   confirmationModal.open({
     text: $t("settings.options.2048.gameOver"),
-    onConfirm: () => {},
+    onActivateA: () => {},
     onClosed: (choice) => {
-      if (choice === "confirm") {
+      if (choice === "A") {
         resetBoard();
       }
     },

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

@@ -135,13 +135,13 @@ onMounted(() => {
   animateIntro();
 });
 
-const handleCancel = async () => {
+const handleActivateB = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = () => {
+const handleActivateA = () => {
   if (isAnimating.value) return;
   const selectedLocale = locales.value[BUTTON_KEYS.indexOf(selected.value)]!;
 
@@ -206,8 +206,8 @@ defineOptions({
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
-    @activate-b="handleCancel"
+    @activate-b="handleActivateB"
-    @activate-a="handleConfirm"
+    @activate-a="handleActivateA"
   />
 
   <CommonButtonSelector

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

@@ -89,13 +89,13 @@ const { selected, selectorPosition } = useButtonNavigation({
   },
 });
 
-const handleCancel = async () => {
+const handleActivateB = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = () => {
+const handleActivateA = () => {
   if (isAnimating.value) return;
   const mode = selected.value === "_3dMode" ? "3d" : "2d";
   app.setRenderingMode(mode);
@@ -184,8 +184,8 @@ onRender((ctx) => {
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
-    @activate-b="handleCancel"
+    @activate-b="handleActivateB"
-    @activate-a="handleConfirm"
+    @activate-a="handleActivateA"
   />
 
   <CommonButtonSelector

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

@@ -132,14 +132,14 @@ const handleActivateB = () => {
       bLabel: $t("common.no"),
       aLabel: $t("common.yes"),
       onClosed: async (choice) => {
-        if (choice === "confirm") {
+        if (choice === "A") {
           await animateOutro();
           store.closeSubMenu();
         } else {
           state.value = "playing";
         }
       },
-      keepButtonsDown: (choice) => choice === "confirm",
+      keepButtonsDown: (choice) => choice === "A",
     });
   } else {
     animateOutro().then(() => store.closeSubMenu());
@@ -155,7 +155,7 @@ const handleActivateA = async () => {
       bLabel: $t("common.no"),
       aLabel: $t("common.yes"),
       onClosed: (choice) => {
-        if (choice === "confirm") {
+        if (choice === "A") {
           resetGame();
         } else {
           state.value = "playing";
@@ -233,14 +233,14 @@ const showDeathScreen = () => {
     bLabel: $t("common.quit"),
     aLabel: $t("common.restart"),
     onClosed: async (choice) => {
-      if (choice === "confirm") {
+      if (choice === "A") {
         resetGame();
       } else {
         await animateOutro();
         store.closeSubMenu();
       }
     },
-    keepButtonsDown: (choice) => choice === "cancel",
+    keepButtonsDown: (choice) => choice === "B",
   });
 };
 

app/components/Settings/BottomScreen/Menus/User/Snake.vue

@@ -84,7 +84,7 @@ onMounted(() => {
   animateIntro();
 });
 
-const handleCancel = async () => {
+const handleActivateB = async () => {
   if (isAnimating.value) return;
   switch (state.value) {
     case "alive": {
@@ -94,14 +94,14 @@ const handleCancel = async () => {
         bLabel: $t("common.no"),
         aLabel: $t("common.yes"),
         onClosed: async (choice) => {
-          if (choice === "confirm") {
+          if (choice === "A") {
             await animateOutro();
             store.closeSubMenu();
           } else {
             state.value = "alive";
           }
         },
-        keepButtonsDown: (choice) => choice === "confirm",
+        keepButtonsDown: (choice) => choice === "A",
       });
       break;
     }
@@ -115,7 +115,7 @@ const handleCancel = async () => {
   }
 };
 
-const handleConfirm = () => {
+const handleActivateA = () => {
   if (isAnimating.value) return;
   switch (state.value) {
     case "alive": {
@@ -125,7 +125,7 @@ const handleConfirm = () => {
         bLabel: $t("common.no"),
         aLabel: $t("common.yes"),
         onClosed: (choice) => {
-          if (choice === "confirm") {
+          if (choice === "A") {
             spawn();
           } else {
             state.value = "alive";
@@ -334,7 +334,7 @@ defineOptions({ render: () => null });
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
     :b-label="$t('common.quit')"
     :a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
-    @activate-b="handleCancel"
+    @activate-b="handleActivateB"
-    @activate-a="handleConfirm"
+    @activate-a="handleActivateA"
   />
 </template>

app/components/Settings/BottomScreen/Menus/User/UserName.vue

@@ -67,13 +67,13 @@ onMounted(() => {
   animateIntro();
 });
 
-const handleCancel = async () => {
+const handleActivateB = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = async () => {
+const handleActivateA = async () => {
   if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
@@ -130,7 +130,7 @@ defineOptions({ render: () => null });
     :y-offset="store.submenuButtonsOffsetY"
     :b-label="$t('common.cancel')"
     :a-label="$t('common.confirm')"
-    @activate-b="handleCancel"
+    @activate-b="handleActivateB"
-    @activate-a="handleConfirm"
+    @activate-a="handleActivateA"
   />
 </template>

app/stores/confirmationModal.ts

@@ -11,13 +11,10 @@ export const useConfirmationModal = defineStore("confirmationModal", {
     text: "",
     aLabel: null as string | null,
     bLabel: null as string | null,
-    onConfirm: null as (() => void) | null,
+    onActivateA: null as (() => void) | null,
-    onCancel: null as (() => void) | null,
+    onActivateB: null as (() => void) | null,
-    onClosed: null as ((choice: "confirm" | "cancel") => void) | null,
+    onClosed: null as ((choice: "A" | "B") => void) | null,
-    keepButtonsDown: null as
+    keepButtonsDown: null as boolean | ((choice: "A" | "B") => boolean) | null,
-      | boolean
-      | ((choice: "confirm" | "cancel") => boolean)
-      | null,
     offsetY: MODAL_MAX_Y_OFFSET,
     buttonsYOffset: 0,
     modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
@@ -30,18 +27,18 @@ export const useConfirmationModal = defineStore("confirmationModal", {
       text: string;
       aLabel?: string;
       bLabel?: string;
-      onCancel?: () => void;
+      onActivateA?: () => void;
-      onConfirm?: () => void;
+      onActivateB?: () => void;
-      onClosed?: (choice: "confirm" | "cancel") => void;
+      onClosed?: (choice: "A" | "B") => void;
-      keepButtonsDown?: boolean | ((choice: "confirm" | "cancel") => boolean);
+      keepButtonsDown?: boolean | ((choice: "A" | "B") => boolean);
       timeout?: number;
     }) {
       gsap.killTweensOf(this);
       this.text = options.text;
       this.aLabel = options.aLabel ?? null;
       this.bLabel = options.bLabel ?? null;
-      this.onConfirm = options.onConfirm ?? null;
+      this.onActivateA = options.onActivateA ?? null;
-      this.onCancel = options.onCancel ?? null;
+      this.onActivateB = options.onActivateB ?? null;
       this.onClosed = options.onClosed ?? null;
       this.keepButtonsDown = options.keepButtonsDown ?? null;
       this.isVisible = true;
@@ -75,13 +72,13 @@ export const useConfirmationModal = defineStore("confirmationModal", {
         .call(() => {
           if (options.timeout) {
             setTimeout(() => {
-              this.close("cancel");
+              this.close("B");
             }, options.timeout);
           }
         });
     },
 
-    close(choice: "confirm" | "cancel") {
+    close(choice: "A" | "B") {
       if (!this.isVisible || this.isClosing) return;
 
       this.isClosing = true;