From 776783237beb129d60a6892d0a6d6531f27bfb5e Mon Sep 17 00:00:00 2001 From: Pihkaal Date: Fri, 30 Jan 2026 23:14:51 +0100 Subject: [PATCH] feat(common): improve confirmation modal api --- app/components/Common/ConfirmationModal.vue | 6 +++--- .../BottomScreen/Menus/Options/2048.vue | 19 ++++++------------- .../BottomScreen/Menus/Options/Language.vue | 3 +-- .../BottomScreen/Menus/Options/StartUp.vue | 2 +- .../BottomScreen/Menus/User/Birthday.vue | 4 +--- .../BottomScreen/Menus/User/Color.vue | 4 +--- app/stores/confirmationModal.ts | 19 ++++++++++++++----- 7 files changed, 27 insertions(+), 30 deletions(-) diff --git a/app/components/Common/ConfirmationModal.vue b/app/components/Common/ConfirmationModal.vue index 3c254ea..8b7ba90 100644 --- a/app/components/Common/ConfirmationModal.vue +++ b/app/components/Common/ConfirmationModal.vue @@ -18,12 +18,12 @@ const CLIP_HEIGHT = LOGICAL_HEIGHT - BOTTOM_BAR_HEIGHT; const handleActivateA = () => { confirmationModal.onConfirm?.(); - confirmationModal.close(); + confirmationModal.close("confirm"); }; const handleActivateB = () => { confirmationModal.onCancel?.(); - confirmationModal.close(); + confirmationModal.close("cancel"); }; onRender((ctx) => { @@ -45,7 +45,7 @@ onRender((ctx) => { }, 100); onUnmounted(() => { - confirmationModal.close(); + confirmationModal.close("cancel"); }); diff --git a/app/components/Settings/BottomScreen/Menus/Options/2048.vue b/app/components/Settings/BottomScreen/Menus/Options/2048.vue index 0778dda..ed46274 100644 --- a/app/components/Settings/BottomScreen/Menus/Options/2048.vue +++ b/app/components/Settings/BottomScreen/Menus/Options/2048.vue @@ -14,17 +14,13 @@ const handleActivateB = () => { const handleActivateA = () => { if (isDead()) { resetBoard(); - confirmationModal.close(); return; } - let confirmed = false; confirmationModal.open({ text: $t("settings.options.2048.restartConfirmation"), - onConfirm: () => { - confirmed = true; - }, - onClosed: () => { - if (confirmed) { + onConfirm: () => {}, + onClosed: (choice) => { + if (choice === "confirm") { resetBoard(); } }, @@ -93,14 +89,11 @@ let tiles: VisualTile[] = []; let animating = false; const showRestartModal = () => { - let confirmed = false; confirmationModal.open({ text: $t("settings.options.2048.gameOver"), - onConfirm: () => { - confirmed = true; - }, - onClosed: () => { - if (confirmed) { + onConfirm: () => {}, + onClosed: (choice) => { + if (choice === "confirm") { resetBoard(); } }, diff --git a/app/components/Settings/BottomScreen/Menus/Options/Language.vue b/app/components/Settings/BottomScreen/Menus/Options/Language.vue index 56e1fac..42d5431 100644 --- a/app/components/Settings/BottomScreen/Menus/Options/Language.vue +++ b/app/components/Settings/BottomScreen/Menus/Options/Language.vue @@ -93,9 +93,8 @@ const handleConfirm = () => { { locale: selectedLocale.code }, ), onClosed: () => store.closeSubMenu(), + timeout: 2000, }); - // TODO: add "timeout" to confirmationModal.open - setTimeout(() => confirmationModal.close(), 2000); }; onRender((ctx) => { diff --git a/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue b/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue index ea7ee3f..794a511 100644 --- a/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue +++ b/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue @@ -42,8 +42,8 @@ const handleConfirm = () => { onClosed: () => { store.closeSubMenu(); }, + timeout: 2000, }); - setTimeout(() => confirmationModal.close(), 2000); }; until(() => app.ready) diff --git a/app/components/Settings/BottomScreen/Menus/User/Birthday.vue b/app/components/Settings/BottomScreen/Menus/User/Birthday.vue index 5071a17..42a0625 100644 --- a/app/components/Settings/BottomScreen/Menus/User/Birthday.vue +++ b/app/components/Settings/BottomScreen/Menus/User/Birthday.vue @@ -43,10 +43,8 @@ const handleActivateA = () => { confirmationModal.open({ text, onClosed: () => store.closeSubMenu(), + timeout: 2000, }); - setTimeout(() => { - confirmationModal.close(); - }, 2000); }; defineOptions({ render: () => null }); diff --git a/app/components/Settings/BottomScreen/Menus/User/Color.vue b/app/components/Settings/BottomScreen/Menus/User/Color.vue index ee9b860..cde98c1 100644 --- a/app/components/Settings/BottomScreen/Menus/User/Color.vue +++ b/app/components/Settings/BottomScreen/Menus/User/Color.vue @@ -125,10 +125,8 @@ const handleConfirm = () => { confirmationModal.open({ text: $t("settings.user.color.confirmation"), onClosed: () => store.closeSubMenu(), + timeout: 2000, }); - setTimeout(() => { - confirmationModal.close(); - }, 2000); }; diff --git a/app/stores/confirmationModal.ts b/app/stores/confirmationModal.ts index acc97c7..9f8adc0 100644 --- a/app/stores/confirmationModal.ts +++ b/app/stores/confirmationModal.ts @@ -10,8 +10,8 @@ export const useConfirmationModal = defineStore("confirmationModal", { isOpen: false, text: "", onConfirm: null as (() => void) | null, - onClosed: null as (() => void) | null, onCancel: null as (() => void) | null, + onClosed: null as ((choice: "confirm" | "cancel") => void) | null, offsetY: MODAL_MAX_Y_OFFSET, buttonsYOffset: 0, modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET, @@ -24,7 +24,8 @@ export const useConfirmationModal = defineStore("confirmationModal", { text: string; onCancel?: () => void; onConfirm?: () => void; - onClosed?: () => void; + onClosed?: (choice: "confirm" | "cancel") => void; + timeout?: number; }) { gsap.killTweensOf(this); this.text = options.text; @@ -58,10 +59,17 @@ export const useConfirmationModal = defineStore("confirmationModal", { this, { modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET }, { modalButtonsYOffset: 0, duration: BUTTONS_TIME, ease: "none" }, - ); + ) + .call(() => { + if (options.timeout) { + setTimeout(() => { + this.close("cancel"); + }, options.timeout); + } + }); }, - close() { + close(choice: "confirm" | "cancel") { if (!this.isVisible || this.isClosing) return; this.isClosing = true; @@ -89,6 +97,7 @@ export const useConfirmationModal = defineStore("confirmationModal", { .call(() => { const closedCallback = this.onClosed; + // TODO: this.$reset() ? this.isVisible = false; this.isClosing = false; this.isOpen = false; @@ -96,7 +105,7 @@ export const useConfirmationModal = defineStore("confirmationModal", { this.onConfirm = null; this.onClosed = null; - closedCallback?.(); + closedCallback?.(choice); }); }, },