diff --git a/app/components/Common/ConfirmationModal.vue b/app/components/Common/ConfirmationModal.vue index d56bf7f..825080d 100644 --- a/app/components/Common/ConfirmationModal.vue +++ b/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.close("confirm"); + confirmationModal.onActivateA?.(); + confirmationModal.close("A"); }; const handleActivateB = () => { - confirmationModal.onCancel?.(); - confirmationModal.close("cancel"); + confirmationModal.onActivateB?.(); + confirmationModal.close("B"); }; onRender((ctx) => { @@ -58,15 +58,15 @@ onRender((ctx) => { }, 100); onUnmounted(() => { - confirmationModal.close("cancel"); + confirmationModal.close("B"); }); diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Date.vue b/app/components/Settings/BottomScreen/Menus/Clock/Date.vue index c1d83fb..123f1a9 100644 --- a/app/components/Settings/BottomScreen/Menus/Clock/Date.vue +++ b/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-a="handleConfirm" + @activate-b="handleActivateB" + @activate-a="handleActivateA" /> diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Time.vue b/app/components/Settings/BottomScreen/Menus/Clock/Time.vue index 8d2f537..cce79c5 100644 --- a/app/components/Settings/BottomScreen/Menus/Clock/Time.vue +++ b/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-a="handleConfirm" + @activate-b="handleActivateB" + @activate-a="handleActivateA" /> diff --git a/app/components/Settings/BottomScreen/Menus/Options/2048.vue b/app/components/Settings/BottomScreen/Menus/Options/2048.vue index 35de3ae..5f0dc4d 100644 --- a/app/components/Settings/BottomScreen/Menus/Options/2048.vue +++ b/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(); } }, diff --git a/app/components/Settings/BottomScreen/Menus/Options/Language.vue b/app/components/Settings/BottomScreen/Menus/Options/Language.vue index 5d150e7..4357a5e 100644 --- a/app/components/Settings/BottomScreen/Menus/Options/Language.vue +++ b/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-a="handleConfirm" + @activate-b="handleActivateB" + @activate-a="handleActivateA" /> { +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-a="handleConfirm" + @activate-b="handleActivateB" + @activate-a="handleActivateA" /> { 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", }); }; diff --git a/app/components/Settings/BottomScreen/Menus/User/Snake.vue b/app/components/Settings/BottomScreen/Menus/User/Snake.vue index 2803f3f..8b022ea 100644 --- a/app/components/Settings/BottomScreen/Menus/User/Snake.vue +++ 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-a="handleConfirm" + @activate-b="handleActivateB" + @activate-a="handleActivateA" /> diff --git a/app/components/Settings/BottomScreen/Menus/User/UserName.vue b/app/components/Settings/BottomScreen/Menus/User/UserName.vue index 1ec056c..9c7fcf8 100644 --- a/app/components/Settings/BottomScreen/Menus/User/UserName.vue +++ b/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-a="handleConfirm" + @activate-b="handleActivateB" + @activate-a="handleActivateA" /> diff --git a/app/stores/confirmationModal.ts b/app/stores/confirmationModal.ts index 0341bc4..1fc140b 100644 --- a/app/stores/confirmationModal.ts +++ b/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, - onCancel: null as (() => void) | null, - onClosed: null as ((choice: "confirm" | "cancel") => void) | null, - keepButtonsDown: null as - | boolean - | ((choice: "confirm" | "cancel") => boolean) - | null, + onActivateA: null as (() => void) | null, + onActivateB: null as (() => void) | null, + onClosed: null as ((choice: "A" | "B") => void) | null, + keepButtonsDown: null as boolean | ((choice: "A" | "B") => 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; - onConfirm?: () => void; - onClosed?: (choice: "confirm" | "cancel") => void; - keepButtonsDown?: boolean | ((choice: "confirm" | "cancel") => boolean); + onActivateA?: () => void; + onActivateB?: () => void; + onClosed?: (choice: "A" | "B") => void; + 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.onCancel = options.onCancel ?? null; + this.onActivateA = options.onActivateA ?? 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;