58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<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>
|