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

2025-12-17 12:28:48 +01:00
parent a31f72f41d
commit 2f16f382e5
106 changed files with 359 additions and 366 deletions
--- a/app/components/Settings/TopScreen/Background.vue
+++ b/app/components/Settings/TopScreen/Background.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.webp";
-
-const [backgroundImage] = useImages(BACKGROUND_IMAGE);
+const { assets } = useAssets();

 useRender((ctx) => {
-  ctx.drawImage(backgroundImage!, 0, 0);
+  ctx.drawImage(assets.home.topScreen.background, 0, 0);
 });

 defineOptions({
--- a/app/components/Settings/TopScreen/Calendar.vue
+++ b/app/components/Settings/TopScreen/Calendar.vue
@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import CALENDAR_IMAGE from "/assets/images/home/top-screen/calendar/calendar.webp";
-import LAST_ROW_IMAGE from "/assets/images/home/top-screen/calendar/last-row.webp";
-import DAY_SELECTOR_IMAGE from "/assets/images/home/top-screen/calendar/day-selector.webp";
-
-const [calendarImage, lastRowImage, daySelectorImage] = useImages(
-  CALENDAR_IMAGE,
-  LAST_ROW_IMAGE,
-  DAY_SELECTOR_IMAGE,
-);
+const { assets } = useAssets();

 useRender((ctx) => {
  ctx.fillStyle = "black";
@@ -29,11 +21,19 @@ useRender((ctx) => {
  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();

-  ctx.drawImage(calendarImage!, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
+  ctx.drawImage(
+    assets.home.topScreen.calendar.calendar,
+    CALENDAR_LEFT - 3,
+    CALENDAR_TOP - 33,
+  );

  const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
  if (extraRow) {
-    ctx.drawImage(lastRowImage!, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
+    ctx.drawImage(
+      assets.home.topScreen.calendar.lastRow,
+      CALENDAR_LEFT - 3,
+      CALENDAR_TOP + 79,
+    );
  }

  for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) {
@@ -49,7 +49,11 @@ useRender((ctx) => {
        const cellTop = CALENDAR_TOP + col * 16;

        if (now.getDate() === day) {
-          ctx.drawImage(daySelectorImage!, cellLeft, cellTop);
+          ctx.drawImage(
+            assets.home.topScreen.calendar.daySelector,
+            cellLeft,
+            cellTop,
+          );
        }

        ctx.fillText(
--- a/app/components/Settings/TopScreen/Clock.vue
+++ b/app/components/Settings/TopScreen/Clock.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import CLOCK_IMAGE from "/assets/images/home/top-screen/clock.webp";
-
 const CENTER_X = 63;
 const CENTER_Y = 95;

-const [clockImage] = useImages(CLOCK_IMAGE);
+const { assets } = useAssets();

 function drawLine(
  ctx: CanvasRenderingContext2D,
@@ -54,7 +52,7 @@ function drawLine(
 useRender((ctx) => {
  ctx.translate(0, -16);

-  ctx.drawImage(clockImage!, 13, 45);
+  ctx.drawImage(assets.home.topScreen.clock, 13, 45);

  const now = new Date();

--- a/app/components/Settings/TopScreen/Notifications.vue
+++ b/app/components/Settings/TopScreen/Notifications.vue
@@ -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(() => {
--- a/app/components/Settings/TopScreen/StatusBar.vue
+++ b/app/components/Settings/TopScreen/StatusBar.vue
@@ -1,21 +1,10 @@
 <script setup lang="ts">
-import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.webp";
-import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.webp";
-import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.webp";
-import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.webp";
-
-const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
-  useImages(
-    STATUS_BAR_IMAGE,
-    GBA_DISPLAY_IMAGE,
-    STARTUP_MODE_IMAGE,
-    BATTERY_IMAGE,
-  );
+const { assets } = useAssets();

 useRender((ctx) => {
  const TEXT_Y = 11;

-  ctx.drawImage(statusBarImage!, 0, 0);
+  ctx.drawImage(assets.home.topScreen.statusBar.statusBar, 0, 0);

  ctx.fillStyle = "#ffffff";
  ctx.font = "7px NDS7";
@@ -45,9 +34,9 @@ useRender((ctx) => {
  fillNumberCell(now.getMonth() + 1, 12, -1);

  // icons
-  ctx.drawImage(gbaDisplayImage!, 210, 2);
-  ctx.drawImage(startupModeImage!, 226, 2);
-  ctx.drawImage(batteryImage!, 242, 4);
+  ctx.drawImage(assets.home.topScreen.statusBar.gbaDisplay, 210, 2);
+  ctx.drawImage(assets.home.topScreen.statusBar.startupMode, 226, 2);
+  ctx.drawImage(assets.home.topScreen.statusBar.battery, 242, 4);
 });

 defineOptions({