feat(common): implement buttons and confirmation modal

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>