127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import NOTIFICATION_IMAGE from "/assets/images/settings/top-screen/notification.webp";
|
|
import SETTINGS_IMAGE from "/assets/images/settings/top-screen/settings.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";
|
|
import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
|
|
import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
|
|
import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
|
|
|
|
const store = useSettingsStore();
|
|
|
|
const [
|
|
notificationImage,
|
|
settingsImage,
|
|
optionsImage,
|
|
clockImage,
|
|
userImage,
|
|
touchScreenImage,
|
|
startUpImage,
|
|
languageImage,
|
|
gbaModeImage,
|
|
] = useImages(
|
|
NOTIFICATION_IMAGE,
|
|
SETTINGS_IMAGE,
|
|
OPTIONS_IMAGE,
|
|
CLOCK_IMAGE,
|
|
USER_IMAGE,
|
|
TOUCH_SCREEN_IMAGE,
|
|
START_UP_IMAGE,
|
|
LANGUAGE_IMAGE,
|
|
GBA_MODE_IMAGE,
|
|
);
|
|
|
|
const activeMenu = computed(() => {
|
|
if (!store.activeMenu) return null;
|
|
|
|
if (/^options[A-Z]/.test(store.activeMenu)) {
|
|
return { id: "options", image: optionsImage };
|
|
}
|
|
if (/^clock[A-Z]/.test(store.activeMenu)) {
|
|
return { id: "clock", image: clockImage };
|
|
}
|
|
if (/^user[A-Z]/.test(store.activeMenu)) {
|
|
return { id: "user", image: userImage };
|
|
}
|
|
if (/^touchScreen[A-Z]/.test(store.activeMenu)) {
|
|
return { id: "touchScreen", image: touchScreenImage };
|
|
}
|
|
|
|
return null;
|
|
});
|
|
|
|
const renderNotification = (
|
|
ctx: CanvasRenderingContext2D,
|
|
image: HTMLImageElement,
|
|
title: string,
|
|
description: string,
|
|
) => {
|
|
ctx.drawImage(notificationImage!, 0, 0);
|
|
ctx.drawImage(image, 2, 2);
|
|
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#282828";
|
|
ctx.fillText(title, 52, 13);
|
|
|
|
ctx.fillStyle = "#fbfbfb";
|
|
const lines = description.split("\n");
|
|
const textY = lines.length === 1 ? 36 : 28;
|
|
for (let i = 0; i < lines.length; i += 1) {
|
|
ctx.fillText(lines[i]!, 52, textY + 14 * i);
|
|
}
|
|
};
|
|
|
|
const notificationStack = computed(() => {
|
|
const stack: Array<{ id: string; image: HTMLImageElement }> = [
|
|
{ id: "main", image: settingsImage! },
|
|
];
|
|
|
|
if (activeMenu.value) {
|
|
stack.push({ id: activeMenu.value.id, image: activeMenu.value.image! });
|
|
}
|
|
|
|
for (const view of store.navigationStack) {
|
|
const menuMatch = view.match(/^(options|clock|user|touchScreen)(.+)$/);
|
|
if (menuMatch) {
|
|
const [, menu, submenu] = menuMatch;
|
|
const submenuKey = submenu!.charAt(0).toLowerCase() + submenu!.slice(1);
|
|
const imageMap: Record<string, HTMLImageElement> = {
|
|
optionsStartUp: startUpImage!,
|
|
optionsLanguage: languageImage!,
|
|
optionsGbaMode: gbaModeImage!,
|
|
};
|
|
if (imageMap[view]) {
|
|
stack.push({ id: `${menu}.${submenuKey}`, image: imageMap[view]! });
|
|
}
|
|
}
|
|
}
|
|
|
|
return stack;
|
|
});
|
|
|
|
useRender((ctx) => {
|
|
const stackSize = notificationStack.value.length;
|
|
|
|
ctx.translate(0, 144 - (stackSize - 1) * 16);
|
|
|
|
for (let i = 0; i < stackSize; i++) {
|
|
const notification = notificationStack.value[i]!;
|
|
|
|
renderNotification(
|
|
ctx,
|
|
notification.image,
|
|
$t(`settings.${notification.id}.title`),
|
|
$t(`settings.${notification.id}.description`),
|
|
);
|
|
|
|
ctx.translate(0, 16);
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|