[FEAT] Show Genres and Release date on Game Page

public/locales/en/translation.json

@@ -346,7 +346,8 @@
         }
     },
     "label": {
-        "loading": "Loading"
+        "loading": "Loading",
+        "releaseDate": "Release Date"
     },
     "library": {
         "refresh": "Refresh",

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

@@ -116,10 +116,12 @@ const testPCGamingWikiInfo = {
     score: '10',
     urlid: 'the-witcher-3-wild-hunt'
   },
+  genres: [''],
   opencritic: {
     score: '22',
     urlid: '463/the-witcher-3-wild-hunt'
   },
+  releaseDate: [],
   igdb: {
     score: '40',
     urlid: 'the-witcher-3-wild-hunt'

src/backend/wiki_game_info/pcgamingwiki/constants.ts

@@ -6,3 +6,5 @@ export const idgbRegEx = /game\/row\/reception\|IGDB\|(\S+)\|([0-9]+)/m
 export const steamIDRegEx = /steam appid {2}= ([0-9]+)/m
 export const howLongToBeatIDRegEx = /hltb {9}= ([0-9]+)/m
 export const direct3DVersionsRegEx = /direct3d versions {6}= (.+)/m
+export const genresRegEx = /game\/row\/taxonomy\/genres\s*\|\s*(.*?)\s*}}/
+export const releaseDateRegEx = /game\/row\/date\|([^|]+)\|([^}]*)/g

src/backend/wiki_game_info/pcgamingwiki/utils.ts

@@ -1,9 +1,11 @@
 import {
   direct3DVersionsRegEx,
+  genresRegEx,
   howLongToBeatIDRegEx,
   idgbRegEx,
   metacriticRegEx,
   opencriticRegEx,
+  releaseDateRegEx,
   steamIDRegEx
 } from './constants'
 import { logError, logInfo, LogPrefix } from '../../logger/logger'
@@ -37,14 +39,19 @@ export async function getInfoFromPCGamingWiki(
     const steamID = wikitext.match(steamIDRegEx)?.[1] ?? ''
     const howLongToBeatID = wikitext.match(howLongToBeatIDRegEx)?.[1] ?? ''
     const direct3DVersions = wikitext.match(direct3DVersionsRegEx)?.[1] ?? ''
+    const genres = wikitext.match(genresRegEx)?.[1] ?? ''
+
+    const releaseDates = getReleaseDates(wikitext)
 
     return {
       steamID,
       howLongToBeatID,
       metacritic,
       opencritic,
       igdb,
-      direct3DVersions: direct3DVersions.replaceAll(' ', '').split(',')
+      direct3DVersions: direct3DVersions.replaceAll(' ', '').split(','),
+      genres: genres.replaceAll(' ', '').split(','),
+      releaseDate: releaseDates
     }
   } catch (error) {
     logError(
@@ -55,6 +62,15 @@ export async function getInfoFromPCGamingWiki(
   }
 }
 
+function getReleaseDates(wikitext: string) {
+  const releaseDates = []
+  const matches = wikitext.matchAll(releaseDateRegEx)
+  for (const match of matches) {
+    releaseDates.push(`${match[1]}: ${match[2]}`)
+  }
+  return releaseDates
+}
+
 async function getPageID(title: string, id?: string): Promise<string | null> {
   if (id) {
     const { data } = await axios.get(

src/common/types.ts

@@ -611,6 +611,8 @@ export interface PCGamingWikiInfo {
   opencritic: GameScoreInfo
   igdb: GameScoreInfo
   direct3DVersions: string[]
+  genres: string[]
+  releaseDate: string[]
 }
 
 export interface AppleGamingWikiInfo {

src/frontend/screens/Game/GamePage/components/Genres.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+type GenresProps = {
+  genres: string[]
+}
+
+const Genres: React.FC<GenresProps> = ({ genres }) => {
+  if (genres[0] === '' || genres.length === 0) {
+    return null
+  }
+
+  return (
+    <span className="genres">
+      {genres.map((genre) => (
+        <span key={genre} className="genre">
+          {genre}
+        </span>
+      ))}
+    </span>
+  )
+}
+
+export default Genres

src/frontend/screens/Game/GamePage/components/ReleaseDate.tsx

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import GameContext from '../../GameContext'
+
+type ReleaseDateProps = {
+  date: string[] | undefined
+}
+
+// convert date to current locale using Intl module
+function convertDate(date: string) {
+  // Extract only the date part if the string contains extra information
+  const match = date.match(/(\w+ \d{1,2}, \d{4})/)
+  if (match) {
+    date = match[1]
+  }
+
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }
+
+  const dateObj = new Date(date)
+
+  // Check if dateObj is a valid date
+  if (isNaN(dateObj.getTime())) {
+    return null
+  }
+
+  return dateObj.toLocaleDateString(undefined, options)
+}
+
+const ReleaseDate: React.FC<ReleaseDateProps> = ({ date }) => {
+  const { is } = useContext(GameContext)
+
+  const { t } = useTranslation()
+
+  if (!date || date[0] === '' || date.length === 0) {
+    return null
+  }
+
+  const getReleaseDate = () => {
+    let windowsReleaseDate = ''
+
+    for (let i = 0; i < date.length; i++) {
+      const [platformName, releaseDate] = date[i].split(': ')
+
+      if (platformName === 'Windows') {
+        windowsReleaseDate = releaseDate
+      }
+
+      if (
+        (platformName === 'Linux' && is.linuxNative && is.linux) ||
+        (platformName === 'OS X' && is.macNative && is.mac)
+      ) {
+        return convertDate(releaseDate)
+      }
+    }
+
+    return convertDate(windowsReleaseDate)
+  }
+
+  if (!getReleaseDate()) {
+    return null
+  }
+
+  return (
+    <div className="releaseDate">
+      {t('label.releaseDate', 'Release Date')}: {getReleaseDate()}
+    </div>
+  )
+}
+
+export default ReleaseDate

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

@@ -250,8 +250,23 @@
       align-self: flex-start;
     }
 
+    .genres {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-xs);
+      margin-bottom: 0.5rem;
+
+      .genre {
+        background: var(--accent-overlay);
+        color: var(--text-tertiary);
+        padding: 1px 6px;
+        border-radius: 6px;
+        font-size: var(--text-sm);
+      }
+    }
+
     .developer {
-      padding: var(--space-md-fixed) 0;
+      padding: var(--space-md-fixed) 0 0 0;
       color: var(--text-default);
     }
 
@@ -275,6 +290,7 @@
       overflow: auto;
       height: 150px;
       line-height: 1.5;
+      padding-top: var(--space-md-fixed);
       b {
         font-weight: 700;
       }
@@ -561,6 +577,21 @@
         flex-grow: 1;
       }
 
+      .genres {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-xs);
+        margin-bottom: 0.5rem;
+
+        .genre {
+          background: var(--accent-overlay);
+          color: var(--text-tertiary);
+          padding: 1px 6px;
+          border-radius: 6px;
+          font-size: var(--text-sm);
+        }
+      }
+
       .gameStatus {
         text-align: left;
       }

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

@@ -64,6 +64,8 @@ import {
   SettingsButton
 } from './components'
 import { hasAnticheatInfo } from 'frontend/hooks/hasAnticheatInfo'
+import Genres from './components/Genres'
+import ReleaseDate from './components/ReleaseDate'
 
 export default React.memo(function GamePage(): JSX.Element | null {
   const { appName, runner } = useParams() as { appName: string; runner: Runner }
@@ -355,7 +357,9 @@ export default React.memo(function GamePage(): JSX.Element | null {
                     <DotsMenu gameInfo={gameInfo} handleUpdate={handleUpdate} />
                   </div>
                   <div className="infoWrapper">
+                    <Genres genres={wikiInfo?.pcgamingwiki?.genres || []} />
                     <Developer gameInfo={gameInfo} />
+                    <ReleaseDate date={wikiInfo?.pcgamingwiki?.releaseDate} />
                     <Description />
                     <CloudSavesSync gameInfo={gameInfo} />
                     <DownloadSizeInfo gameInfo={gameInfo} />
@@ -415,7 +419,9 @@ export default React.memo(function GamePage(): JSX.Element | null {
                       <StoreLogos runner={runner} />
                     </div>
                     <h1>{title}</h1>
+                    <Genres genres={wikiInfo?.pcgamingwiki?.genres || []} />
                     <Developer gameInfo={gameInfo} />
+                    <ReleaseDate date={wikiInfo?.pcgamingwiki?.releaseDate} />
                     <Description />
                     {!notInstallable && (
                       <TimeContainer runner={runner} game={appName} />