ui: add fallback images for Steam game art

Author: flavioislima

src/backend/storeManagers/steam/library.ts

@@ -130,11 +130,21 @@ export async function refresh(): Promise<null> {
         continue
       }
 
+      let artSquare = `${steamDBBaseURL}/${steamGame.appid}/library_600x900.jpg`
+      let artCover = `${steamDBBaseURL}/${steamGame.appid}/header.jpg`
+
+      try {
+        await axios.head(artSquare)
+      } catch (e) {
+        artSquare = 'fallback'
+        artCover = 'fallback'
+      }
+
       const newGameObject: GameInfo = {
         app_name: steamGame.appid.toString(),
         runner: 'steam',
-        art_square: `${steamDBBaseURL}/${steamGame.appid}/library_600x900.jpg`,
-        art_cover: `${steamDBBaseURL}/${steamGame.appid}/header.jpg`,
+        art_square: artSquare,
+        art_cover: artCover,
         canRunOffline: false,
         title: steamGame.name,
         is_installed: false,

src/frontend/assets/steam-fallback-card.png

@@ -3,15 +3,20 @@ import { CachedImage } from 'frontend/components/UI'
 
 import './index.css'
 import fallbackImage from 'frontend/assets/fallback_card.jpg'
+import steamFallBackImage from 'frontend/assets/steam-fallback-card.png'
 
 type Props = {
   art_square: string
   store: string
 }
 
 export function getImageFormattingForArtSquare({ art_square, store }: Props) {
+  const isSteam = store === 'steam'
   if (art_square === 'fallback' || !art_square)
-    return { src: fallbackImage, fallback: fallbackImage }
+    return {
+      src: isSteam ? steamFallBackImage : fallbackImage,
+      fallback: fallbackImage
+    }
   if (store === 'legendary') {
     return {
       src: `${art_square}?h=800&resize=1&w=600`,