From 5bc57f5edcd7846f4bbfa48af855f7f43a3ede74 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Fri, 19 Dec 2025 19:15:24 +0100
Subject: [PATCH] feat(common): implement buttons and confirmation modal

---
 app/components/Common/Buttons.vue            |  71 ++++++++++++++
 app/components/Common/ConfirmationModal.vue  |  57 ++++++++++++
 app/composables/useButtonNavigation.ts       |   6 ++
 app/composables/useConfirmationModal.ts      |  93 +++++++++++++++++++
 app/utils/async.ts                           |   2 +
 public/images/common/A.webp                  | Bin 0 -> 58 bytes
 public/images/common/B.webp                  | Bin 0 -> 60 bytes
 public/images/common/button.webp             | Bin 0 -> 126 bytes
 public/images/common/confirmation-modal.webp | Bin 0 -> 116 bytes
 9 files changed, 229 insertions(+)
 create mode 100644 app/components/Common/Buttons.vue
 create mode 100644 app/components/Common/ConfirmationModal.vue
 create mode 100644 app/composables/useConfirmationModal.ts
 create mode 100644 app/utils/async.ts
 create mode 100644 public/images/common/A.webp
 create mode 100644 public/images/common/B.webp
 create mode 100644 public/images/common/button.webp
 create mode 100644 public/images/common/confirmation-modal.webp

diff --git a/app/components/Common/Buttons.vue b/app/components/Common/Buttons.vue
new file mode 100644
index 0000000..abf7c7d
--- /dev/null
+++ b/app/components/Common/Buttons.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const { assets } = useAssets();
+
+const props = defineProps<{
+  yOffset: number;
+  opacity?: number;
+  bLabel: string;
+  aLabel: string;
+}>();
+
+const emit = defineEmits<{
+  activateA: [];
+  activateB: [];
+}>();
+
+const BUTTON_WIDTH = assets.common.button.width;
+const BUTTON_HEIGHT = assets.common.button.height;
+const LETTER_WIDTH = assets.common.B.width;
+
+const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
+const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
+
+useRender((ctx) => {
+  ctx.globalAlpha = props.opacity ?? 1;
+  ctx.font = "10px NDS10";
+
+  ctx.translate(0, props.yOffset);
+
+  const drawButton = (
+    image: HTMLImageElement,
+    text: string,
+    x: number,
+    offset: number,
+  ) => {
+    ctx.drawImage(assets.common.button, x, 172);
+
+    const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);
+    const width = LETTER_WIDTH + 4 + textWidth;
+    const left = Math.ceil(x + BUTTON_WIDTH / 2 - width / 2 - offset / 2);
+
+    ctx.drawImage(image, left, 176);
+    ctx.fillText(text, left + LETTER_WIDTH + 4, 185);
+  };
+
+  drawButton(assets.common.B, props.bLabel, 31, 5);
+  drawButton(assets.common.A, props.aLabel, 144, 0);
+});
+
+useScreenClick((x, y) => {
+  if (props.yOffset !== 0) return;
+  if (rectContains(B_BUTTON, [x, y])) {
+    emit("activateB");
+  } else if (rectContains(A_BUTTON, [x, y])) {
+    emit("activateA");
+  }
+});
+
+useKeyDown((key) => {
+  if (props.yOffset !== 0) return;
+  switch (key) {
+    case "NDS_START":
+    case "NDS_A":
+      emit("activateA");
+      break;
+
+    case "NDS_B":
+      emit("activateB");
+      break;
+  }
+});
+</script>
diff --git a/app/components/Common/ConfirmationModal.vue b/app/components/Common/ConfirmationModal.vue
new file mode 100644
index 0000000..c57b2a9
--- /dev/null
+++ b/app/components/Common/ConfirmationModal.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import Buttons from "./Buttons.vue";
+
+const { assets } = useAssets();
+const { close, state } = useConfirmationModal();
+
+const BG_WIDTH = assets.common.confirmationModal.width;
+const BG_HEIGHT = assets.common.confirmationModal.height;
+const BG_X = Math.floor((SCREEN_WIDTH - BG_WIDTH) / 2);
+const BG_Y = Math.floor((SCREEN_HEIGHT - BG_HEIGHT) / 2);
+
+const TEXT_Y = BG_Y + Math.floor(BG_HEIGHT / 2) - 8 - 16 + 2 + 2;
+
+const BOTTOM_BAR_HEIGHT = 24;
+const CLIP_HEIGHT = SCREEN_HEIGHT - BOTTOM_BAR_HEIGHT;
+
+const handleActivateA = () => {
+  state.value.onConfirm?.();
+  close();
+};
+
+const handleActivateB = () => {
+  close();
+};
+
+useRender((ctx) => {
+  if (!state.value.isVisible) return;
+
+  ctx.beginPath();
+  ctx.rect(0, 0, SCREEN_WIDTH, CLIP_HEIGHT);
+  ctx.clip();
+
+  ctx.translate(0, state.value.offsetY);
+
+  ctx.drawImage(assets.common.confirmationModal, BG_X, BG_Y);
+
+  ctx.font = "16px Pokemon DP Pro";
+  ctx.textBaseline = "top";
+  ctx.fillStyle = "#ffffff";
+
+  fillTextCentered(ctx, state.value.text, BG_X, TEXT_Y, BG_WIDTH);
+});
+
+onUnmounted(() => {
+  close();
+});
+</script>
+
+<template>
+  <Buttons
+    :y-offset="state.modalButtonsYOffset"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-a="handleActivateA"
+    @activate-b="handleActivateB"
+  />
+</template>
diff --git a/app/composables/useButtonNavigation.ts b/app/composables/useButtonNavigation.ts
index ddd85aa..4413e5e 100644
--- a/app/composables/useButtonNavigation.ts
+++ b/app/composables/useButtonNavigation.ts
@@ -20,12 +20,16 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
     }
   >;
 }) => {
+  const { state: modalState } = useConfirmationModal();
+
   const selectedButton = ref(initialButton);
   const selectorPosition = computed(() => buttons[selectedButton.value]!);
 
   const nextButton = ref<keyof T | undefined>();
 
   useScreenClick((x: number, y: number) => {
+    if (modalState.value.isOpen) return;
+
     for (const [buttonName, config] of Object.entries(buttons) as [
       keyof T,
       ButtonConfig,
@@ -52,6 +56,8 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
   });
 
   useKeyDown((key) => {
+    if (modalState.value.isOpen) return;
+
     const currentButton = selectedButton.value as keyof T;
     const currentNav = navigation[currentButton];
 
diff --git a/app/composables/useConfirmationModal.ts b/app/composables/useConfirmationModal.ts
new file mode 100644
index 0000000..32adb3e
--- /dev/null
+++ b/app/composables/useConfirmationModal.ts
@@ -0,0 +1,93 @@
+import gsap from "gsap";
+
+const MODAL_MAX_Y_OFFSET = 106;
+const BUTTONS_MAX_Y_OFFSET = 20;
+const BUTTONS_TIME = 0.1;
+const MODAL_TIME = 0.225;
+
+const state = useState("confirmationModal", () =>
+  reactive({
+    isOpen: false,
+    text: "",
+    onConfirm: null as (() => void) | null,
+    offsetY: MODAL_MAX_Y_OFFSET,
+    buttonsYOffset: 0,
+    modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
+    isVisible: false,
+    isClosing: false,
+  }),
+);
+
+const open = (text: string, onConfirm?: (() => void) | null) => {
+  gsap.killTweensOf(state.value);
+  state.value.text = text;
+  state.value.onConfirm = onConfirm || null;
+  state.value.isVisible = true;
+  state.value.isClosing = false;
+  state.value.isOpen = true;
+
+  gsap
+    .timeline()
+    // standard buttons down
+    .fromTo(
+      state.value,
+      { buttonsYOffset: 0 },
+      {
+        buttonsYOffset: BUTTONS_MAX_Y_OFFSET,
+        duration: BUTTONS_TIME,
+        ease: "none",
+      },
+    )
+    // modal up
+    .fromTo(
+      state.value,
+      { offsetY: MODAL_MAX_Y_OFFSET },
+      { offsetY: 0, duration: MODAL_TIME, ease: "none" },
+    )
+    // modal buttons up
+    .fromTo(
+      state.value,
+      { modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET },
+      { modalButtonsYOffset: 0, duration: BUTTONS_TIME, ease: "none" },
+    );
+};
+
+const close = () => {
+  if (!state.value.isVisible || state.value.isClosing) return;
+
+  state.value.isClosing = true;
+
+  gsap
+    .timeline()
+    // modal buttons down
+    .to(state.value, {
+      modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
+      duration: BUTTONS_TIME,
+      ease: "none",
+    })
+    // modal down
+    .to(state.value, {
+      offsetY: MODAL_MAX_Y_OFFSET,
+      duration: MODAL_TIME,
+      ease: "none",
+    })
+    // standard buttons up
+    .to(state.value, {
+      buttonsYOffset: 0,
+      duration: BUTTONS_TIME,
+      ease: "none",
+    })
+    .call(() => {
+      state.value.isVisible = false;
+      state.value.isClosing = false;
+      state.value.isOpen = false;
+      state.value.text = "";
+      state.value.onConfirm = null;
+    });
+};
+
+export const useConfirmationModal = () => ({
+  open,
+  close,
+  state: readonly(state),
+});
diff --git a/app/utils/async.ts b/app/utils/async.ts
new file mode 100644
index 0000000..7ce4b40
--- /dev/null
+++ b/app/utils/async.ts
@@ -0,0 +1,2 @@
+export const sleep = (ms: number) =>
+  new Promise<void>((resolve) => setTimeout(resolve, ms));
diff --git a/public/images/common/A.webp b/public/images/common/A.webp
new file mode 100644
index 0000000000000000000000000000000000000000..2b1889c33db7b31d2af2ab80db9197e6027f9ba5
GIT binary patch
literal 58
zcmWIYbaOLeU|<M$bqWXzu<%g@vh_I_m;_jxw&gzl(7yNWask8t!VICTue?H6g=zjx
NC<|G6Mf3#&0|4N96LkOp

literal 0
HcmV?d00001

diff --git a/public/images/common/B.webp b/public/images/common/B.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e09d99fc8854655218dc1af8b800911e04f8d947
GIT binary patch
literal 60
zcmWIYbaOLdU|<M$bqWXzu<+3Uvh_I_m;_pzw&kj{+rND)$0qpM-@r3C_qao7<0>uD
P1yL)5_V=yQI>P_}=)n_f

literal 0
HcmV?d00001

diff --git a/public/images/common/button.webp b/public/images/common/button.webp
new file mode 100644
index 0000000000000000000000000000000000000000..85e6f03df23ea1ac44ffd82853864727fb465cfe
GIT binary patch
literal 126
zcmV-^0D=EfNk&F?00012MM6+kP&iC!0000lPe23^b+CzKw+=oFZYTsoAP9oGxYSd3
z0Q{Yq|LDKbwr!GXD0oMV2Ie@wj-@&Gfl_#Z#PUJh><XJP=?WYx4so+nrejRHsc@_W
g#Lcb{7?ZBRQE^>BT<KhA>~)hd=@Q(Z9QLpr0OcVyr~m)}

literal 0
HcmV?d00001

diff --git a/public/images/common/confirmation-modal.webp b/public/images/common/confirmation-modal.webp
new file mode 100644
index 0000000000000000000000000000000000000000..deeed979c273a32dee940689ecd67be112575ce9
GIT binary patch
literal 116
zcmV-)0E_=pNk&F&00012MM6+kP&iCr0000l&43UPbts7>$$5J(<^4Oj1aH`dM<Y3x
z{YM<ZaIzQ$<mnn1<$%C=J_M290Ei+(DDY1oEALDC*q;z}iu$!9@Ph|I`ycIpR71hD
W^`+Ti!))Yn?iZ{e%yjoN!{Gra%rjX4

literal 0
HcmV?d00001