Adapt amazon games metadata to new design

src/backend/storeManagers/gog/library.ts

@@ -943,10 +943,14 @@ export async function gogToUnifiedInfo(
     // @ts-expect-error TODO: Handle this somehow
     return {}
   }
+  const background = info.game.background?.url_format
+    .replace('{formatter}', '')
+    .replace('{ext}', 'webp')
 
-  const art_cover = info.game?.logo?.url_format
-    ?.replace('{formatter}', '')
-    .replace('{ext}', 'jpg')
+  const art_cover =
+    info.game?.logo?.url_format
+      ?.replace('{formatter}', '')
+      .replace('{ext}', 'jpg') ?? background
 
   const icon = (
     info.game?.square_icon.url_format || info.game?.icon?.url_format
@@ -963,14 +967,13 @@ export async function gogToUnifiedInfo(
       info.game.vertical_cover?.url_format
         .replace('{formatter}', '')
         .replace('{ext}', 'jpg') || art_cover, // fallback to art_cover if undefined
-    art_background: info.game.background?.url_format
-      .replace('{formatter}', '')
-      .replace('{ext}', 'webp'),
+    art_background: background,
     cloud_save_enabled: false,
     art_icon: icon,
     extra: {
       about: { description: info.summary['*'], shortDescription: '' },
-      reqs: []
+      reqs: [],
+      genres: info.game.genres.map((genre) => genre.name['*'])
     },
     folder_name: '',
     install: {

src/backend/storeManagers/nile/games.ts

@@ -102,7 +102,8 @@ export async function getExtraInfo(appName: string): Promise<ExtraInfo> {
           description: info.description,
           shortDescription: info.description
         }
-      : undefined
+      : undefined,
+    releaseDate: info?.extra?.releaseDate
   }
 }
 

src/backend/storeManagers/nile/library.ts

@@ -57,7 +57,15 @@ function loadGamesInAccount() {
     const { product } = game
     const { title, productDetail } = product
     const {
-      details: { shortDescription, developer },
+      details: {
+        shortDescription,
+        developer,
+        genres,
+        releaseDate,
+        backgroundUrl1,
+        backgroundUrl2,
+        logoUrl
+      },
       iconUrl
     } = productDetail
 
@@ -66,7 +74,9 @@ function loadGamesInAccount() {
     const safeFolderName = removeSpecialcharacters(title ?? '')
     library.set(product.id, {
       app_name: product.id,
-      art_cover: iconUrl,
+      art_cover: backgroundUrl2 || iconUrl,
+      art_logo: logoUrl,
+      art_background: backgroundUrl1 || backgroundUrl2,
       art_square: iconUrl,
       canRunOffline: true, // Amazon Games only has offline games
       install: info
@@ -85,6 +95,11 @@ function loadGamesInAccount() {
       title: title ?? '???',
       description: shortDescription,
       developer,
+      extra: {
+        reqs: [],
+        genres,
+        releaseDate
+      },
       is_linux_native: false,
       is_mac_native: false
     })

src/common/types.ts

@@ -121,6 +121,7 @@ export interface ExtraInfo {
   releaseDate?: string
   storeUrl?: string
   changelog?: string
+  genres?: string[]
 }
 
 export type GameConfigVersion = 'auto' | 'v0' | 'v0.1'

src/frontend/screens/Game/GamePage/index.tsx

@@ -110,7 +110,9 @@ export default React.memo(function GamePage(): JSX.Element | null {
 
   const [progress, previousProgress] = hasProgress(appName)
 
-  const [extraInfo, setExtraInfo] = useState<ExtraInfo | null>(null)
+  const [extraInfo, setExtraInfo] = useState<ExtraInfo | null>(
+    gameInfo.extra || null
+  )
   const [notInstallable, setNotInstallable] = useState<boolean>(false)
   const [gameInstallInfo, setGameInstallInfo] = useState<InstallInfo | null>(
     null
@@ -171,7 +173,6 @@ export default React.memo(function GamePage(): JSX.Element | null {
       if (gameInfo && status) {
         const {
           install,
-          is_installed,
           is_linux_native = undefined,
           is_mac_native = undefined
         } = { ...gameInfo }
@@ -186,7 +187,6 @@ export default React.memo(function GamePage(): JSX.Element | null {
 
         if (
           runner !== 'sideload' &&
-          !is_installed &&
           !notSupportedGame &&
           !notInstallable &&
           !isOffline
@@ -361,7 +361,7 @@ export default React.memo(function GamePage(): JSX.Element | null {
               <>
                 <GamePicture
                   art_square={art_square}
-                  art_logo={art_logo}
+                  art_logo={runner === 'nile' ? undefined : art_logo}
                   store={runner}
                 />
                 <NavLink
@@ -381,7 +381,13 @@ export default React.memo(function GamePage(): JSX.Element | null {
                     <DotsMenu gameInfo={gameInfo} handleUpdate={handleUpdate} />
                   </div>
                   <div className="infoWrapper">
-                    <Genres genres={wikiInfo?.pcgamingwiki?.genres || []} />
+                    <Genres
+                      genres={
+                        gameInfo.extra?.genres ||
+                        wikiInfo?.pcgamingwiki?.genres ||
+                        []
+                      }
+                    />
                     <Developer gameInfo={gameInfo} />
                     <ReleaseDate
                       runnerDate={extraInfo?.releaseDate}
@@ -446,8 +452,14 @@ export default React.memo(function GamePage(): JSX.Element | null {
                     <div className="store-icon">
                       <StoreLogos runner={runner} />
                     </div>
-                    <h1>{title}</h1>
-                    <Genres genres={wikiInfo?.pcgamingwiki?.genres || []} />
+                    <h1 style={{ opacity: art_logo ? 0 : 1 }}>{title}</h1>
+                    <Genres
+                      genres={
+                        gameInfo.extra?.genres ||
+                        wikiInfo?.pcgamingwiki?.genres ||
+                        []
+                      }
+                    />
                     <Developer gameInfo={gameInfo} />
                     <ReleaseDate
                       runnerDate={extraInfo?.releaseDate}

src/frontend/screens/Game/GamePicture/index.css

@@ -27,6 +27,7 @@
 }
 
 .gamePicture > .gameImg {
+  min-height: 250px;
   height: 100%;
   width: 100%;
   border-radius: 0;
@@ -35,8 +36,9 @@
 
 .gamePicture > .gameLogo {
   position: absolute;
-  top: 50%;
+  top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 50%;
+  z-index: 2;
 }

src/frontend/screens/Library/components/GameCard/index.tsx

@@ -423,7 +423,7 @@ const GameCard = ({
                 alt="cover"
               />
             )}
-            {logo && (
+            {(justPlayed || runner !== 'nile') && logo && (
               <CachedImage
                 alt="logo"
                 src={`${logo}?h=400&resize=1&w=300`}