67 lines
1.4 KiB
Vue
67 lines
1.4 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.images.common.button.rect.width;
|
|
const BUTTON_HEIGHT = assets.images.common.button.rect.height;
|
|
|
|
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.fillStyle = "#010101";
|
|
|
|
ctx.translate(0, props.yOffset);
|
|
|
|
const drawButton = (icon: string, text: string, x: number) => {
|
|
assets.images.common.button.draw(ctx, x, 172);
|
|
|
|
const label = `${icon} ${text}`;
|
|
fillTextHCentered(ctx, label, x, 185, BUTTON_WIDTH);
|
|
};
|
|
|
|
drawButton(ICONS.B, props.bLabel, 31);
|
|
drawButton(ICONS.A, props.aLabel, 144);
|
|
}, 60);
|
|
|
|
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>
|