feat(common): implement buttons and confirmation modal

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>

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>