62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
|
|
import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/options/options-active.png";
|
|
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/options/options-disabled.png";
|
|
import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
|
|
import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
|
|
import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
|
|
|
|
const props = defineProps<{
|
|
x: number;
|
|
y: number;
|
|
isOpen: boolean;
|
|
isAnyOtherMenuOpen: boolean;
|
|
}>();
|
|
|
|
const [
|
|
menuImage,
|
|
menuActiveImage,
|
|
menuDisabledImage,
|
|
gbaModeImage,
|
|
languageImage,
|
|
startUpImage,
|
|
] = useImages(
|
|
MENU_IMAGE,
|
|
MENU_ACTIVE_IMAGE,
|
|
MENU_DISABLED_IMAGE,
|
|
GBA_MODE_IMAGE,
|
|
LANGUAGE_IMAGE,
|
|
START_UP_IMAGE,
|
|
);
|
|
|
|
const animation = useMenuAnimation(toRef(() => props.isOpen));
|
|
|
|
useRender((ctx) => {
|
|
ctx.translate(props.x, props.y);
|
|
|
|
if (props.isOpen || animation.playing) {
|
|
ctx.drawImage(languageImage!, 0, -48 + animation.stage1Offset);
|
|
ctx.drawImage(
|
|
gbaModeImage!,
|
|
48 - animation.stage2Offset,
|
|
-48 + animation.stage1Offset,
|
|
);
|
|
ctx.drawImage(
|
|
startUpImage!,
|
|
0,
|
|
-96 + animation.stage2Offset + animation.stage1Offset,
|
|
);
|
|
|
|
ctx.drawImage(menuActiveImage!, 0, 0);
|
|
} else if (props.isAnyOtherMenuOpen) {
|
|
ctx.drawImage(menuDisabledImage!, 0, 0);
|
|
} else {
|
|
ctx.drawImage(menuImage!, 0, 0);
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|