40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
|
|
import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
|
|
import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
|
|
import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
|
|
import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user_name.webp";
|
|
|
|
const props = defineProps<{
|
|
x: number;
|
|
y: number;
|
|
isOpen: boolean;
|
|
}>();
|
|
|
|
const [menuImage, birthdayImage, colorImage, messageImage, userNameImage] =
|
|
useImages(
|
|
MENU_IMAGE,
|
|
BIRTHDAY_IMAGE,
|
|
COLOR_IMAGE,
|
|
MESSAGE_IMAGE,
|
|
USER_NAME_IMAGE,
|
|
);
|
|
|
|
useRender((ctx) => {
|
|
ctx.translate(props.x, props.y);
|
|
|
|
ctx.drawImage(menuImage!, 0, 0);
|
|
|
|
if (props.isOpen) {
|
|
ctx.drawImage(birthdayImage!, -48, -48);
|
|
ctx.drawImage(userNameImage!, 0, -48);
|
|
ctx.drawImage(messageImage!, 48, -48);
|
|
ctx.drawImage(colorImage!, 0, -96);
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|