[Feature]: Fetch steam deck comaptibility

public/locales/en/gamepage.json

@@ -114,19 +114,13 @@
         "apple-gaming-wiki": "AppleGamingWiki Rating",
         "canRunOffline": "Online Required",
         "clickToOpen": "Click to open",
-        "compatibility-info": "Proton Compatibility Tier",
         "game-scores": "Game Scores",
         "installedInfo": "Installed Information",
         "installedPlatform": "Installed Platform",
         "path": "Install Path",
+        "protondb-compatibility-info": "Proton Compatibility Tier",
         "size": "Size",
-        "steam-deck": "Steam Deck:",
-        "steam-deck-compat": {
-            "level0": "Unknown",
-            "level1": "Unsupported",
-            "level2": "Playable",
-            "level3": "Verified"
-        },
+        "steamdeck-compatibility-info": "SteamDeck Compatibility",
         "syncsaves": "Sync Saves",
         "version": "Version"
     },

src/backend/wiki_game_info/__tests__/wiki_game_info.test.ts

@@ -97,9 +97,9 @@ describe('getWikiGameInfo', () => {
     expect(mockHowLongToBeat).toBeCalled()
     expect(mockGamesDB).toBeCalled()
     expect(mockProtonDB).toBeCalled()
-    expect(mockProtonDB).toBeCalledWith('123')
+    expect(mockProtonDB).toBeCalledWith('100')
     expect(mockSteamDeck).toBeCalled()
-    expect(mockSteamDeck).toBeCalledWith('123')
+    expect(mockSteamDeck).toBeCalledWith('100')
   })
 
   test('cached data outdated - not mac not linux', async () => {
@@ -132,16 +132,14 @@ describe('getWikiGameInfo', () => {
       timestampLastFetch: oneMonthAgo.toString()
     })
 
-    const result = await await getWikiGameInfo('The Witcher 3', '1234', 'gog')
+    const result = await getWikiGameInfo('The Witcher 3', '1234', 'gog')
     expect(result).toStrictEqual(testExtraGameInfoNoMac)
     expect(mockPCGamingWiki).toBeCalled()
     expect(mockAppleGamingWiki).not.toBeCalled()
     expect(mockHowLongToBeat).toBeCalled()
     expect(mockGamesDB).toBeCalled()
-    expect(mockProtonDB).toBeCalled()
-    expect(mockProtonDB).toBeCalledWith('')
-    expect(mockSteamDeck).toBeCalled()
-    expect(mockSteamDeck).toBeCalledWith('')
+    expect(mockProtonDB).not.toBeCalled()
+    expect(mockSteamDeck).not.toBeCalled()
   })
   test('catches throws', async () => {
     jest

src/backend/wiki_game_info/protondb/utils.ts

@@ -3,12 +3,13 @@ import axios, { AxiosError } from 'axios'
 import { logDebug, logError, LogPrefix } from 'backend/logger/logger'
 
 export async function getInfoFromProtonDB(
-  steamID: string
+  steamID: string | undefined
 ): Promise<ProtonDBCompatibilityInfo | null> {
-  if (steamID === '') {
+  if (!steamID) {
     logDebug('No SteamID, not getting ProtonDB info')
     return null
   }
+
   const url = `https://www.protondb.com/api/v1/reports/summaries/${steamID}.json`
 
   const response = await axios

src/backend/wiki_game_info/steamdeck/utils.ts

@@ -3,9 +3,9 @@ import axios, { AxiosError } from 'axios'
 import { logDebug, logError, LogPrefix } from 'backend/logger/logger'
 
 export async function getSteamDeckComp(
-  steamID: string
+  steamID: string | undefined
 ): Promise<SteamDeckComp | null> {
-  if (steamID === '') {
+  if (!steamID) {
     logDebug('No SteamID, not getting Stem Deck info')
     return null
   }

src/backend/wiki_game_info/wiki_game_info.ts

@@ -50,19 +50,21 @@ export async function getWikiGameInfo(
         isMac ? getInfoFromAppleGamingWiki(title) : null
       ])
 
-    const steamID = gamesdb?.steamID ? gamesdb.steamID : ''
-    const [protondb, steamdeck] = await Promise.all([
-      getInfoFromProtonDB(isLinux ? steamID : ''),
-      getSteamDeckComp(isLinux ? steamID : '')
-    ])
+    let steamInfo = null
+    if (isLinux) {
+      const steamID = pcgamingwiki?.steamID ?? gamesdb?.steamID
+      const [protondb, steamdeck] = await Promise.all([
+        getInfoFromProtonDB(steamID),
+        getSteamDeckComp(steamID)
+      ])
 
-    const steamInfo =
-      protondb || steamdeck
-        ? ({
-            compatibilityLevel: protondb?.level,
-            steamDeckCatagory: steamdeck?.category
-          } as SteamInfo)
-        : null
+      if (protondb || steamdeck) {
+        steamInfo = {
+          compatibilityLevel: protondb?.level,
+          steamDeckCatagory: steamdeck?.category
+        } as SteamInfo
+      }
+    }
 
     const wikiGameInfo = {
       timestampLastFetch: Date(),

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

@@ -19,7 +19,11 @@ import {
   Pause,
   Warning,
   Hardware,
-  Error
+  Error,
+  CheckCircleOutline,
+  ErrorOutline,
+  DoNotDisturb,
+  HelpOutline
 } from '@mui/icons-material'
 import {
   createNewWindow,
@@ -78,7 +82,6 @@ import PopoverComponent from 'frontend/components/UI/PopoverComponent'
 import HowLongToBeat from 'frontend/components/UI/WikiGameInfo/components/HowLongToBeat'
 import GameScore from 'frontend/components/UI/WikiGameInfo/components/GameScore'
 import DLCList from 'frontend/components/UI/DLCList'
-
 export default React.memo(function GamePage(): JSX.Element | null {
   const { appName, runner } = useParams() as { appName: string; runner: Runner }
   const location = useLocation() as {
@@ -314,12 +317,25 @@ export default React.memo(function GamePage(): JSX.Element | null {
       pcgamingwiki?.opencritic.score
     const hasAppleInfo = applegamingwiki?.crossoverRating
     const appLocation = install_path || folder_name
-    const hasCompat = steamInfo && steamInfo.compatibilityLevel !== null
+    const hasProtonDB = steamInfo?.compatibilityLevel
+    const hasSteamDeckCompat = steamInfo?.steamDeckCatagory
     const steamLevelNames = [
-      t('info.steam-deck-compat.level0', 'Unknown'),
-      t('info.steam-deck-compat.level1', 'Unsupported'),
-      t('info.steam-deck-compat.level2', 'Playable'),
-      t('info.steam-deck-compat.level3', 'Verified')
+      <HelpOutline
+        key={0}
+        style={{ marginLeft: '5px', cursor: 'not-allowed' }}
+      />,
+      <DoNotDisturb
+        key={1}
+        style={{ marginLeft: '5px', cursor: 'not-allowed' }}
+      />,
+      <ErrorOutline
+        key={2}
+        style={{ marginLeft: '5px', cursor: 'not-allowed' }}
+      />,
+      <CheckCircleOutline
+        key={3}
+        style={{ marginLeft: '5px', cursor: 'not-allowed' }}
+      />
     ]
 
     let protonDBurl = `https://www.protondb.com/search?q=${title}`
@@ -617,7 +633,7 @@ export default React.memo(function GamePage(): JSX.Element | null {
                     </div>
                   </PopoverComponent>
                 )}
-                {hasCompat && (
+                {hasProtonDB && (
                   <a
                     role="button"
                     onClick={() => {
@@ -628,20 +644,22 @@ export default React.memo(function GamePage(): JSX.Element | null {
                   >
                     <WineBar />
                     {t(
-                      'info.compatibility-info',
+                      'info.protondb-compatibility-info',
                       'Proton Compatibility Tier'
-                    )}:{' '}
+                    )}
+                    :{' '}
                     {steamInfo!.compatibilityLevel!.charAt(0).toUpperCase() +
-                      steamInfo!.compatibilityLevel!.slice(1) +
-                      (Number.isFinite(steamInfo?.steamDeckCatagory) &&
-                      steamInfo?.steamDeckCatagory !== null
-                        ? ', ' +
-                          t('info.steam-deck', 'Steam Deck') +
-                          ' ' +
-                          steamInfo.steamDeckCatagory +
-                          ' - ' +
-                          steamLevelNames[steamInfo.steamDeckCatagory]
-                        : '')}
+                      steamInfo!.compatibilityLevel!.slice(1)}
+                  </a>
+                )}
+                {hasSteamDeckCompat && (
+                  <a className="iconWithText" style={{ cursor: 'unset' }}>
+                    <WineBar />
+                    {t(
+                      'info.steamdeck-compatibility-info',
+                      'SteamDeck Compatibility'
+                    )}
+                    : {steamLevelNames[steamInfo?.steamDeckCatagory ?? 3]}
                   </a>
                 )}
                 {hasAppleInfo && (