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>