Serve game logos directly from assets HTTP server

src/dashboard/scoreko-dev/stores/game-assets.ts

@@ -28,6 +28,7 @@ export const useGameAssetsStore = defineStore('game-assets', () => {
   const loadingByTitle = ref<Record<string, boolean>>({});
   const removingByTitle = ref<Record<string, boolean>>({});
   const progressByTitle = ref<Record<string, number>>({});
+  const assetsBaseUrl = ref('http://localhost');
 
   if (!progressListenerAttached) {
     nodecg.listenFor('scoreko-assets:downloadProgress', (payload: unknown) => {
@@ -63,6 +64,10 @@ export const useGameAssetsStore = defineStore('game-assets', () => {
   const refreshInstalledGames = async () => {
     const response = await sendNodecgMessage<string[]>('scoreko-assets:listInstalled');
     installedGames.value = Array.isArray(response) ? response : [];
+    const configResponse = await sendNodecgMessage<{ assetsBaseUrl?: string }>('scoreko-assets:getAssetsBaseUrl');
+    assetsBaseUrl.value = typeof configResponse?.assetsBaseUrl === 'string' && configResponse.assetsBaseUrl.trim()
+      ? configResponse.assetsBaseUrl
+      : 'http://localhost';
     await refreshCharacterNamesByGame();
     return installedGames.value;
   };
@@ -124,6 +129,7 @@ export const useGameAssetsStore = defineStore('game-assets', () => {
     loadingByTitle,
     removingByTitle,
     progressByTitle,
+    assetsBaseUrl,
     refreshInstalledGames,
     refreshCharacterNamesByGame,
     downloadGame,

src/dashboard/scoreko-dev/views/GameAssets.vue

@@ -8,13 +8,12 @@ const errorMessage = ref('');
 const selectedGameSlug = ref<string | null>(null);
 const search = ref('');
 
-const gameLogoModules = import.meta.glob('/src/shared/game-logos/*.png', {
+const getGameLogoUrl = (repoFolder: string, logoFile: string) => {
-  eager: true,
+  const cleanBaseUrl = gameAssetsStore.assetsBaseUrl.replace(/\/+$/, '');
-  import: 'default',
+  const cleanRepoFolder = repoFolder.replace(/^\/+|\/+$/g, '');
-  query: '?url',
+  const cleanLogoFile = logoFile.replace(/^\/+/, '');
-}) as Record<string, string>;
+  return `${cleanBaseUrl}/games/${cleanRepoFolder}/${cleanLogoFile}`;
-
+};
-const getGameLogoUrl = (logoFile: string) => gameLogoModules[`/src/shared/game-logos/${logoFile}`] ?? '';
 
 const normalizedSearch = computed(() => search.value.trim().toLowerCase());
 const filteredGames = computed(() => {
@@ -109,7 +108,7 @@ onMounted(async () => {
       >
         <div class="logo-tile">
           <QImg
-            :src="getGameLogoUrl(game.logoFile)"
+            :src="getGameLogoUrl(game.repoFolder, game.logoFile)"
             fit="contain"
             height="74px"
           />
@@ -168,7 +167,7 @@ onMounted(async () => {
         style="min-width: 360px; max-width: 480px"
       >
         <QImg
-          :src="getGameLogoUrl(selectedGame.logoFile)"
+          :src="getGameLogoUrl(selectedGame.repoFolder, selectedGame.logoFile)"
           fit="contain"
           height="80px"
           class="q-mb-md"

src/extension/game-assets.ts

@@ -267,6 +267,18 @@ nodecg.listenFor('scoreko-assets:listCharactersByGame', async (_payload: unknown
   }
 });
 
+nodecg.listenFor('scoreko-assets:getAssetsBaseUrl', async (_payload: unknown, ack) => {
+  if (typeof ack !== 'function') {
+    return;
+  }
+
+  try {
+    ack(null, { assetsBaseUrl: getConfiguredAssetsBaseUrl() });
+  } catch (error) {
+    ack((error as Error).message);
+  }
+});
+
 nodecg.listenFor('scoreko-assets:downloadGame', async (payload: unknown, ack) => {
   if (typeof ack !== 'function') {
     return;