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>

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];
 

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),
+});

app/utils/async.ts

@@ -0,0 +1,2 @@
+export const sleep = (ms: number) =>
+  new Promise<void>((resolve) => setTimeout(resolve, ms));