feat(settings): render title and menu image in notification

This commit is contained in:
2025-11-25 18:13:52 +01:00
parent 9f1e2015c6
commit 2e06600293
8 changed files with 128 additions and 53 deletions

View File

@@ -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({