pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(assets): new assets loading system (currently only for images)

Browse Source
This commit is contained in:
Stevan
2025-12-17 12:28:48 +01:00
parent 05398d5252
commit b85899617b
106 changed files with 359 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/components/Settings/TopScreen/Notifications.vue
View File

@@ -1,37 +1,7 @@
<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 { assets } = useAssets();
const renderNotification = (
ctx: CanvasRenderingContext2D,
@@ -39,7 +9,7 @@ const renderNotification = (
title: string,
description: string,
) => {
ctx.drawImage(notificationImage!, 0, 0);
ctx.drawImage(assets.settings.topScreen.notification, 0, 0);
ctx.drawImage(image, 2, 2);
ctx.font = "10px NDS10";
@@ -55,7 +25,7 @@ const renderNotification = (
};
const mainNotification = computed(() => ({
image: settingsImage!,
image: assets.settings.topScreen.settings,
title: $t("settings.title"),
description: $t("settings.description"),
}));
@@ -67,16 +37,16 @@ const menuNotification = computed(() => {
let id = "";
if (/^options[A-Z]/.test(store.currentMenu)) {
image = optionsImage!;
image = assets.settings.topScreen.options.options;
id = "options";
} else if (/^clock[A-Z]/.test(store.currentMenu)) {
image = clockImage!;
image = assets.settings.topScreen.clock.clock;
id = "clock";
} else if (/^user[A-Z]/.test(store.currentMenu)) {
image = userImage!;
image = assets.settings.topScreen.user.user;
id = "user";
} else if (/^touchScreen[A-Z]/.test(store.currentMenu)) {
image = touchScreenImage!;
image = assets.settings.topScreen.touchScreen.touchScreen;
id = "touchScreen";
}
@@ -90,9 +60,9 @@ const menuNotification = computed(() => {
});
const IMAGES_MAP: Record<string, HTMLImageElement> = {
optionsStartUp: startUpImage!,
optionsLanguage: languageImage!,
optionsGbaMode: gbaModeImage!,
optionsStartUp: assets.settings.topScreen.options.startUp,
optionsLanguage: assets.settings.topScreen.options.language,
optionsGbaMode: assets.settings.topScreen.options.gbaMode,
};
const submenuNotification = computed(() => {