76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
yOffset: number;
|
|
opacity?: number;
|
|
bLabel: string;
|
|
aLabel: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
activateA: [];
|
|
activateB: [];
|
|
}>();
|
|
|
|
const { onRender, onClick } = useScreen();
|
|
|
|
const { assets } = useAssets();
|
|
|
|
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];
|
|
|
|
onRender((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);
|
|
});
|
|
|
|
onClick((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;
|
|
}
|
|
});
|
|
|
|
defineOptions({ render: () => null });
|
|
</script>
|