Fix Issue #2466 GamePage image is missing logo when available (#3245)

* Add logo support in GamePage and GamePicture In GamePage component, add logo variable and pass it to GamePicture component. In GamePicture component, add logo parameter; add logo element (same as the CachedImage logo element in GameCard) There was no need to add CSS, since there was already CSS for logo in GamePicture that positions it at the bottom center. * Rename 'logo' variables to 'art_logo' Purpose of this is to maintain naming consistency with other variables, such as 'art_cover' or other 'art_...' * Clean up unnecessary code * Update logo CSS to look like library's logo
Heroic-Games-Launcher · Nov 25, 2023 · 177d480 · 177d480
1 parent 630e523
commit 177d480
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/frontend/screens/Game/GamePage/index.tsx b/src/frontend/screens/Game/GamePage/index.tsx
@@ -238,6 +238,7 @@ export default React.memo(function GamePage(): JSX.Element | null {
       art_square,
       art_cover,
       art_background,
+      art_logo,
       install: { platform: installPlatform },
       is_installed
     } = gameInfo
@@ -332,7 +333,11 @@ export default React.memo(function GamePage(): JSX.Element | null {
             {/* OLD DESIGN */}
             {!experimentalFeatures.enableNewDesign && (
               <>
-                <GamePicture art_square={art_square} store={runner} />
+                <GamePicture
+                  art_square={art_square}
+                  art_logo={art_logo}
+                  store={runner}
+                />
                 <NavLink
                   className="backButton"
                   to={backRoute}
@@ -401,7 +406,11 @@ export default React.memo(function GamePage(): JSX.Element | null {
                   <DotsMenu gameInfo={gameInfo} handleUpdate={handleUpdate} />
                   {!isBrowserGame && <SettingsButton gameInfo={gameInfo} />}
                   <div className="mainInfo">
-                    <GamePicture art_square={art_cover} store={runner} />
+                    <GamePicture
+                      art_square={art_cover}
+                      art_logo={art_logo}
+                      store={runner}
+                    />
                     <div className="store-icon">
                       <StoreLogos runner={runner} />
                     </div>

diff --git a/src/frontend/screens/Game/GamePicture/index.css b/src/frontend/screens/Game/GamePicture/index.css
@@ -35,7 +35,8 @@
 
 .gamePicture > .gameLogo {
   position: absolute;
-  bottom: 0;
-  width: 70%;
-  min-width: 140px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
 }
diff --git a/src/frontend/screens/Game/GamePicture/index.tsx b/src/frontend/screens/Game/GamePicture/index.tsx
@@ -6,10 +6,17 @@ import fallbackImage from 'frontend/assets/heroic_card.jpg'
 
 interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {
   art_square: string
+  art_logo?: string | undefined
   store: string
 }
 
-function GamePicture({ art_square, store, className, ...props }: Props) {
+function GamePicture({
+  art_square,
+  art_logo,
+  store,
+  className,
+  ...props
+}: Props) {
   function getImageFormatting() {
     if (art_square === 'fallback' || !art_square)
       return { src: fallbackImage, fallback: fallbackImage }
@@ -34,6 +41,13 @@ function GamePicture({ art_square, store, className, ...props }: Props) {
         fallback={fallback}
         {...props}
       />
+      {art_logo && (
+        <CachedImage
+          alt="logo"
+          src={`${art_logo}?h=400&resize=1&w=300`}
+          className={`gameLogo`}
+        />
+      )}
     </div>
   )
 }