feat(settings): render title and menu image in notification
This commit is contained in:
@@ -1,10 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import NOTIFICATION_IMAGE from "/assets/images/settings/top-screen/notification.webp";
|
||||
import TITLE_IMAGE from "/assets/images/settings/top-screen/notification-title.webp";
|
||||
import OPTIONS_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
|
||||
import CLOCK_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
|
||||
import USER_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
|
||||
import TOUCH_SCREEN_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen.webp";
|
||||
|
||||
const [titleImage] = useImages(TITLE_IMAGE);
|
||||
const store = useSettingsStore();
|
||||
|
||||
const [
|
||||
notificationImage,
|
||||
titleImage,
|
||||
optionsImage,
|
||||
clockImage,
|
||||
userImage,
|
||||
touchScreenImage,
|
||||
] = useImages(
|
||||
NOTIFICATION_IMAGE,
|
||||
TITLE_IMAGE,
|
||||
OPTIONS_IMAGE,
|
||||
CLOCK_IMAGE,
|
||||
USER_IMAGE,
|
||||
TOUCH_SCREEN_IMAGE,
|
||||
);
|
||||
|
||||
const activeMenu = computed(() => {
|
||||
if (!store.activeMenu) return null;
|
||||
|
||||
if (/^options[A-Z]/.test(store.activeMenu)) {
|
||||
return { text: "Options", image: optionsImage };
|
||||
}
|
||||
if (/^clock[A-Z]/.test(store.activeMenu)) {
|
||||
return { text: "Clock", image: clockImage };
|
||||
}
|
||||
if (/^user[A-Z]/.test(store.activeMenu)) {
|
||||
return { text: "User", image: userImage };
|
||||
}
|
||||
if (/^touchScreen[A-Z]/.test(store.activeMenu)) {
|
||||
return { text: "Touch Screen", image: touchScreenImage };
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
useRender((ctx) => {
|
||||
ctx.drawImage(titleImage!, 0, 144);
|
||||
ctx.translate(0, activeMenu.value ? 144 - 16 : 144);
|
||||
|
||||
ctx.drawImage(titleImage!, 0, 0);
|
||||
|
||||
if (activeMenu.value) {
|
||||
ctx.translate(0, 16);
|
||||
|
||||
ctx.drawImage(notificationImage!, 0, 0);
|
||||
ctx.drawImage(activeMenu.value.image!, 2, 2);
|
||||
|
||||
ctx.font = "10px NDS10";
|
||||
ctx.fillStyle = "#282828";
|
||||
ctx.fillText(activeMenu.value.text, 52, 13);
|
||||
|
||||
ctx.fillStyle = "#fbfbfb";
|
||||
ctx.fillText("TODO", 52, 36);
|
||||
}
|
||||
});
|
||||
|
||||
defineOptions({
|
||||
|
||||
Reference in New Issue
Block a user