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/BottomScreen/Background.vue
+++ b/app/components/Settings/BottomScreen/Background.vue
@@ -1,18 +1,10 @@
 <script setup lang="ts">
-import BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.webp";
-import TOP_BAR_IMAGE from "/assets/images/settings/bottom-screen/top-bar.webp";
-import BOTTOM_BAR_IMAGE from "/assets/images/settings/bottom-screen/bottom-bar.webp";
-
-const [backgroundImage, topBarImage, bottomBarImage] = useImages(
-  BACKGROUND_IMAGE,
-  TOP_BAR_IMAGE,
-  BOTTOM_BAR_IMAGE,
-);
+const { assets } = useAssets();

 useRender((ctx) => {
-  ctx.drawImage(backgroundImage!, 0, 0);
-  ctx.drawImage(topBarImage!, 0, 0);
-  ctx.drawImage(bottomBarImage!, 0, 168);
+  ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
+  ctx.drawImage(assets.settings.bottomScreen.topBar, 0, 0);
+  ctx.drawImage(assets.settings.bottomScreen.bottomBar, 0, 168);
 });

 defineOptions({
--- a/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
-import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/clock/clock-active.webp";
-import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/clock/clock-disabled.png";
-import ALARM_IMAGE from "/assets/images/settings/top-screen/clock/alarm.webp";
-import TIME_IMAGE from "/assets/images/settings/top-screen/clock/time.webp";
-import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
-
 const props = defineProps<{
  x: number;
  y: number;
@@ -13,21 +6,7 @@ const props = defineProps<{

 const settingsStore = useSettingsStore();

-const [
-  menuImage,
-  menuActiveImage,
-  menuDisabledImage,
-  alarmImage,
-  timeImage,
-  dateImage,
-] = useImages(
-  MENU_IMAGE,
-  MENU_ACTIVE_IMAGE,
-  MENU_DISABLED_IMAGE,
-  ALARM_IMAGE,
-  TIME_IMAGE,
-  DATE_IMAGE,
-);
+const { assets } = useAssets();

 const isOpen = computed(() => settingsStore.isMenuOpen("clock"));
 const isAnyOtherMenuOpen = computed(() =>
@@ -41,22 +20,26 @@ useRender((ctx) => {

  if (isOpen.value || animation.playing) {
    ctx.drawImage(
-      timeImage!,
+      assets.settings.topScreen.clock.time,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
    ctx.drawImage(
-      dateImage!,
+      assets.settings.topScreen.clock.date,
      0,
      -96 + animation.stage2Offset + animation.stage1Offset,
    );
-    ctx.drawImage(alarmImage!, 0, -48 + animation.stage1Offset);
+    ctx.drawImage(
+      assets.settings.topScreen.clock.alarm,
+      0,
+      -48 + animation.stage1Offset,
+    );

-    ctx.drawImage(menuActiveImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.clock.clockActive, 0, 0);
  } else if (isAnyOtherMenuOpen.value) {
-    ctx.drawImage(menuDisabledImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.clock.clockDisabled, 0, 0);
  } else {
-    ctx.drawImage(menuImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.clock.clock, 0, 0);
  }
 });

--- a/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
-import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/options/options-active.png";
-import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/options/options-disabled.png";
-import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
-import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
-import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
-
 const props = defineProps<{
  x: number;
  y: number;
@@ -13,21 +6,7 @@ const props = defineProps<{

 const settingsStore = useSettingsStore();

-const [
-  menuImage,
-  menuActiveImage,
-  menuDisabledImage,
-  gbaModeImage,
-  languageImage,
-  startUpImage,
-] = useImages(
-  MENU_IMAGE,
-  MENU_ACTIVE_IMAGE,
-  MENU_DISABLED_IMAGE,
-  GBA_MODE_IMAGE,
-  LANGUAGE_IMAGE,
-  START_UP_IMAGE,
-);
+const { assets } = useAssets();

 const isOpen = computed(() => settingsStore.isMenuOpen("options"));
 const isAnyOtherMenuOpen = computed(() =>
@@ -40,23 +19,27 @@ useRender((ctx) => {
  ctx.translate(props.x, props.y);

  if (isOpen.value || animation.playing) {
-    ctx.drawImage(languageImage!, 0, -48 + animation.stage1Offset);
    ctx.drawImage(
-      gbaModeImage!,
+      assets.settings.topScreen.options.language,
+      0,
+      -48 + animation.stage1Offset,
+    );
+    ctx.drawImage(
+      assets.settings.topScreen.options.gbaMode,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
    ctx.drawImage(
-      startUpImage!,
+      assets.settings.topScreen.options.startUp,
      0,
      -96 + animation.stage2Offset + animation.stage1Offset,
    );

-    ctx.drawImage(menuActiveImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.options.optionsActive, 0, 0);
  } else if (isAnyOtherMenuOpen.value) {
-    ctx.drawImage(menuDisabledImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.options.optionsDisabled, 0, 0);
  } else {
-    ctx.drawImage(menuImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.options.options, 0, 0);
  }
 });

--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import MENU_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen.webp";
-import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen-disabled.png";
-
 const props = defineProps<{
  x: number;
  y: number;
@@ -9,10 +6,7 @@ const props = defineProps<{

 const settingsStore = useSettingsStore();

-const [menuImage, menuDisabledImage] = useImages(
-  MENU_IMAGE,
-  MENU_DISABLED_IMAGE,
-);
+const { assets } = useAssets();

 const isAnyOtherMenuOpen = computed(() =>
  settingsStore.isAnyOtherMenuOpen("touchScreen"),
@@ -20,9 +14,17 @@ const isAnyOtherMenuOpen = computed(() =>

 useRender((ctx) => {
  if (isAnyOtherMenuOpen.value) {
-    ctx.drawImage(menuDisabledImage!, props.x, props.y);
+    ctx.drawImage(
+      assets.settings.topScreen.touchScreen.touchScreenDisabled,
+      props.x,
+      props.y,
+    );
  } else {
-    ctx.drawImage(menuImage!, props.x, props.y);
+    ctx.drawImage(
+      assets.settings.topScreen.touchScreen.touchScreen,
+      props.x,
+      props.y,
+    );
  }
 });

--- a/app/components/Settings/BottomScreen/Menus/User/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Menu.vue
@@ -1,12 +1,4 @@
 <script setup lang="ts">
-import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
-import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/user/user-active.webp";
-import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/user/user-disabled.png";
-import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
-import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
-import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
-import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user-name.webp";
-
 const props = defineProps<{
  x: number;
  y: number;
@@ -14,23 +6,7 @@ const props = defineProps<{

 const settingsStore = useSettingsStore();

-const [
-  menuImage,
-  menuActiveImage,
-  menuDisabledImage,
-  birthdayImage,
-  colorImage,
-  messageImage,
-  userNameImage,
-] = useImages(
-  MENU_IMAGE,
-  MENU_ACTIVE_IMAGE,
-  MENU_DISABLED_IMAGE,
-  BIRTHDAY_IMAGE,
-  COLOR_IMAGE,
-  MESSAGE_IMAGE,
-  USER_NAME_IMAGE,
-);
+const { assets } = useAssets();

 const isOpen = computed(() => settingsStore.isMenuOpen("user"));
 const isAnyOtherMenuOpen = computed(() =>
@@ -44,27 +20,31 @@ useRender((ctx) => {

  if (isOpen.value || animation.playing) {
    ctx.drawImage(
-      birthdayImage!,
+      assets.settings.topScreen.user.birthday,
      -48 + animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
-    ctx.drawImage(userNameImage!, 0, -48 + animation.stage1Offset);
    ctx.drawImage(
-      messageImage!,
+      assets.settings.topScreen.user.userName,
+      0,
+      -48 + animation.stage1Offset,
+    );
+    ctx.drawImage(
+      assets.settings.topScreen.user.message,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
    ctx.drawImage(
-      colorImage!,
+      assets.settings.topScreen.user.color,
      0,
      -96 + animation.stage2Offset + animation.stage1Offset,
    );

-    ctx.drawImage(menuActiveImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.user.userActive, 0, 0);
  } else if (isAnyOtherMenuOpen.value) {
-    ctx.drawImage(menuDisabledImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.user.userDisabled, 0, 0);
  } else {
-    ctx.drawImage(menuImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.user.user, 0, 0);
  }
 });

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