feat(games): support non-steam games

polylan_submitter/src/Home.vue

@@ -15,12 +15,18 @@ const games = ref<GamesApiListGamesResponse | undefined>();
 const loading = ref(true);
 const imageErrors = ref<Set<number>>(new Set());
 
-const getHeaderImage = (appId: number) => {
-  return `https://cdn.akamai.steamstatic.com/steam/apps/${appId}/header.jpg`;
+const getHeaderImage = (game: GamesApiListGamesResponse[number]) => {
+  if (game.image) {
+    return game.image;
+  }
+  if (game.steam_app_id) {
+    return `https://cdn.akamai.steamstatic.com/steam/apps/${game.steam_app_id}/header.jpg`;
+  }
+  return null;
 };
 
-const onImageError = (appId: number) => {
-  imageErrors.value.add(appId);
+const onImageError = (gameId: number) => {
+  imageErrors.value.add(gameId);
 };
 
 const navigate = (path: string) => {
@@ -82,11 +88,11 @@ onMounted(async () => {
         </div>
 
         <!-- Game Cards -->
-        <div v-for="game in games" :key="game.steam_app_id" @click="navigate(game.path)"
+        <div v-for="game in games" :key="game.id" @click="navigate(game.path)"
           class="card card-xl bg-base-200 shadow-xl hover:shadow-2xl transition-all cursor-pointer transform hover:-translate-y-2 hover:scale-[1.05] hover:bg-base-100 overflow-hidden">
           <figure class="relative h-60 bg-base-300 overflow-hidden">
-            <img v-if="!imageErrors.has(game.steam_app_id)" :src="getHeaderImage(game.steam_app_id)" :alt="game.name"
-              @error="onImageError(game.steam_app_id)" class="w-full h-full object-cover" />
+            <img v-if="getHeaderImage(game) && !imageErrors.has(game.id)" :src="getHeaderImage(game)" :alt="game.name"
+              @error="onImageError(game.id)" class="w-full h-full object-cover" />
             <div v-else
               class="w-full h-full bg-gradient-to-br from-blue-600 to-blue-400 flex items-center justify-center text-white">
               <i class="mdi mdi-gamepad-variant text-5xl"></i>