130 lines
3.2 KiB
Vue
130 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
const store = useSettingsStore();
|
|
|
|
const { assets } = useAssets();
|
|
|
|
const renderNotification = (
|
|
ctx: CanvasRenderingContext2D,
|
|
image: HTMLImageElement,
|
|
title: string,
|
|
description: string,
|
|
) => {
|
|
ctx.drawImage(assets.settings.topScreen.notification, 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 mainNotification = computed(() => ({
|
|
image: assets.settings.topScreen.settings,
|
|
title: $t("settings.title"),
|
|
description: $t("settings.description"),
|
|
}));
|
|
|
|
const menuNotification = computed(() => {
|
|
if (!store.currentMenu) return null;
|
|
|
|
let image: HTMLImageElement | null = null;
|
|
let id = "";
|
|
|
|
if (/^options[A-Z]/.test(store.currentMenu)) {
|
|
image = assets.settings.topScreen.options.options;
|
|
id = "options";
|
|
} else if (/^clock[A-Z]/.test(store.currentMenu)) {
|
|
image = assets.settings.topScreen.clock.clock;
|
|
id = "clock";
|
|
} else if (/^user[A-Z]/.test(store.currentMenu)) {
|
|
image = assets.settings.topScreen.user.user;
|
|
id = "user";
|
|
} else if (/^touchScreen[A-Z]/.test(store.currentMenu)) {
|
|
image = assets.settings.topScreen.touchScreen.touchScreen;
|
|
id = "touchScreen";
|
|
}
|
|
|
|
if (!image) return null;
|
|
|
|
return {
|
|
image,
|
|
title: $t(`settings.${id}.title`),
|
|
description: $t(`settings.${id}.description`),
|
|
};
|
|
});
|
|
|
|
// TODO: this could be computed instead
|
|
const IMAGES_MAP: Record<string, HTMLImageElement> = {
|
|
optionsStartUp: assets.settings.topScreen.options.startUp,
|
|
optionsLanguage: assets.settings.topScreen.options.language,
|
|
optionsGbaMode: assets.settings.topScreen.options.gbaMode,
|
|
userColor: assets.settings.topScreen.user.color,
|
|
};
|
|
|
|
const submenuNotification = computed(() => {
|
|
if (!store.currentSubMenu) return null;
|
|
|
|
const image = IMAGES_MAP[store.currentSubMenu];
|
|
if (!image) return null;
|
|
|
|
const menuMatch = store.currentSubMenu.match(
|
|
/^(options|clock|user|touchScreen)(.+)$/,
|
|
);
|
|
if (!menuMatch) return null;
|
|
|
|
const [, menu, submenu] = menuMatch;
|
|
const submenuKey = submenu!.charAt(0).toLowerCase() + submenu!.slice(1);
|
|
|
|
return {
|
|
image,
|
|
title: $t(`settings.${menu}.${submenuKey}.title`),
|
|
description: $t(`settings.${menu}.${submenuKey}.description`),
|
|
};
|
|
});
|
|
|
|
useRender((ctx) => {
|
|
let count = 1;
|
|
if (menuNotification.value) count++;
|
|
if (submenuNotification.value) count++;
|
|
|
|
ctx.translate(0, 144 - (count - 1) * 16);
|
|
|
|
renderNotification(
|
|
ctx,
|
|
mainNotification.value.image,
|
|
mainNotification.value.title,
|
|
mainNotification.value.description,
|
|
);
|
|
|
|
if (menuNotification.value) {
|
|
ctx.translate(0, 16);
|
|
renderNotification(
|
|
ctx,
|
|
menuNotification.value.image,
|
|
menuNotification.value.title,
|
|
menuNotification.value.description,
|
|
);
|
|
}
|
|
|
|
if (submenuNotification.value) {
|
|
ctx.translate(0, 16);
|
|
renderNotification(
|
|
ctx,
|
|
submenuNotification.value.image,
|
|
submenuNotification.value.title,
|
|
submenuNotification.value.description,
|
|
);
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|