[UX] Improve gamepage

public/locales/en/gamepage.json

@@ -92,9 +92,11 @@
         },
         "changelogFor": "Changelog for {{gameTitle}}",
         "downloadSize": "Download Size",
+        "extra_info": "Extra info",
         "firstPlayed": "First Played",
         "getting-download-size": "Getting download size",
         "getting-install-size": "Getting install size",
+        "install_info": "Install info",
         "installSize": "Install Size",
         "language": "Language",
         "lastPlayed": "Last Played",

src/frontend/components/UI/TabPanel/index.tsx

@@ -0,0 +1,24 @@
+import React, { HTMLProps } from 'react'
+
+type TabPanelProps = HTMLProps<HTMLDivElement> & {
+  children?: React.ReactNode
+  index: string
+  value: string
+}
+
+function TabPanel(props: Readonly<TabPanelProps>) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div
+      role="tabpanel"
+      id={`tabpanel-${index}`}
+      aria-labelledby={`tab-${index}`}
+      {...other}
+    >
+      {value === index && <div>{children}</div>}
+    </div>
+  )
+}
+
+export default TabPanel

src/frontend/components/UI/WikiGameInfo/components/HowLongToBeat/index.scss

@@ -1,5 +1,7 @@
 .howLongToBeat {
   display: flex;
+  justify-content: space-around;
+  gap: var(--space-sm-fixed);
 
   .circle {
     width: 100px;
@@ -11,10 +13,10 @@
     border-radius: 50%; /* change to a circle */
     border: 2px solid; /* add a border */
     color: var(--text-secondary);
-    margin-inline-end: 10px;
     padding: 0 var(--space-xs);
     background-color: transparent;
     cursor: pointer;
+    position: relative;
 
     &.green {
       border: 3px solid green;
@@ -30,6 +32,9 @@
 
     .circle__title {
       font-size: 0.8rem;
+      white-space: normal;
+      max-width: 90%;
+      text-align: center;
     }
 
     .circle__value {
@@ -38,6 +43,9 @@
     }
   }
   .circle {
+    flex-basis: 33.3%;
+    aspect-ratio: 1 / 1;
+    height: auto;
     width: fit-content;
     min-width: 100px;
     justify-content: center;

src/frontend/components/UI/index.tsx

@@ -3,6 +3,7 @@ export { default as InfoBox } from './InfoBox'
 export { default as LanguageSelector } from './LanguageSelector'
 export { default as SelectField } from './SelectField'
 export { default as SmallInfo } from './SmallInfo'
+export { default as TabPanel } from './TabPanel'
 export { default as TextInputField } from './TextInputField'
 export { default as ToggleSwitch } from './ToggleSwitch'
 export { default as UpdateComponent } from './UpdateComponent'

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

@@ -0,0 +1,48 @@
+import React, { useContext, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import GameContext from '../../GameContext'
+import { Speed, ExpandMore } from '@mui/icons-material'
+import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
+import HowLongToBeat from 'frontend/components/UI/WikiGameInfo/components/HowLongToBeat'
+
+const HLTBInline = () => {
+  const { t } = useTranslation('gamepage')
+  const { wikiInfo } = useContext(GameContext)
+
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  function handleChange() {
+    setIsExpanded((prevExpanded) => !prevExpanded)
+  }
+
+  if (!wikiInfo) {
+    return null
+  }
+
+  const howlongtobeat = wikiInfo.howlongtobeat
+
+  if (!howlongtobeat) {
+    return null
+  }
+
+  return (
+    <div className="hltbWrapper">
+      <Accordion expanded={isExpanded} onChange={handleChange}>
+        <AccordionSummary
+          expandIcon={<ExpandMore />}
+          aria-control="hltb-content"
+          id="hltb-header"
+          title={t('info.clickToOpen', 'Click to open')}
+        >
+          <Speed />
+          <b>{t('howLongToBeat', 'How Long To Beat')}</b>
+        </AccordionSummary>
+        <AccordionDetails>
+          <HowLongToBeat info={howlongtobeat} />
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  )
+}
+
+export default HLTBInline

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

@@ -1,4 +1,8 @@
-import React, { useContext } from 'react'
+import React, {
+  useContext,
+  DetailedHTMLProps,
+  ButtonHTMLAttributes
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import GameContext from '../../GameContext'
 import {
@@ -14,15 +18,25 @@ import {
 import classNames from 'classnames'
 import { GameInfo } from 'common/types'
 
-interface Props {
+// we can't just use HTMLProps because of inconsistency in button's "type" attribute
+interface Props
+  extends DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
   gameInfo: GameInfo
   handlePlay: (gameInfo: GameInfo) => Promise<void>
   handleInstall: (
     is_installed: boolean
   ) => Promise<void | { status: 'done' | 'error' | 'abort' }>
 }
 
-const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
+const MainButton = ({
+  gameInfo,
+  handlePlay,
+  handleInstall,
+  ...other
+}: Props) => {
   const { t } = useTranslation('gamepage')
   const { is } = useContext(GameContext)
 
@@ -128,6 +142,13 @@ const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
 
   const is_installed = gameInfo.is_installed
 
+  const extraClassName = other.className
+
+  if (extraClassName) {
+    // do not override internal classNames
+    delete other.className
+  }
+
   return (
     <>
       {is_installed && !is.queued && (
@@ -144,17 +165,25 @@ const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
           }
           autoFocus={true}
           onClick={async () => handlePlay(gameInfo)}
-          className={classNames('button', {
-            'is-secondary': !is_installed && !is.queued,
-            'is-success':
-              is.syncing ||
-              (!is.updating && !is.playing && is_installed && !is.notAvailable),
-            'is-tertiary':
-              is.playing ||
-              (!is_installed && is.queued) ||
-              (is_installed && is.notAvailable),
-            'is-disabled': is.updating
-          })}
+          className={classNames(
+            'button',
+            {
+              'is-secondary': !is_installed && !is.queued,
+              'is-success':
+                is.syncing ||
+                (!is.updating &&
+                  !is.playing &&
+                  is_installed &&
+                  !is.notAvailable),
+              'is-tertiary':
+                is.playing ||
+                (!is_installed && is.queued) ||
+                (is_installed && is.notAvailable),
+              'is-disabled': is.updating
+            },
+            extraClassName
+          )}
+          {...other}
         >
           {getPlayLabel()}
         </button>
@@ -172,15 +201,20 @@ const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
             is.notInstallable
           }
           autoFocus={true}
-          className={classNames('button', {
-            'is-primary': is_installed,
-            'is-tertiary':
-              is.notAvailable ||
-              is.installing ||
-              is.queued ||
-              is.notInstallable,
-            'is-secondary': !is_installed && !is.queued
-          })}
+          className={classNames(
+            'button',
+            {
+              'is-primary': is_installed,
+              'is-tertiary':
+                is.notAvailable ||
+                is.installing ||
+                is.queued ||
+                is.notInstallable,
+              'is-secondary': !is_installed && !is.queued
+            },
+            extraClassName
+          )}
+          {...other}
         >
           {getButtonLabel()}
         </button>

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

@@ -3,6 +3,7 @@ export { default as DownloadSizeInfo } from './DownloadSizeInfo'
 export { default as InstalledInfo } from './InstalledInfo'
 export { default as Scores } from './Scores'
 export { default as HLTB } from './HLTB'
+export { default as HLTBInline } from './HLTBInline'
 export { default as AppleWikiInfo } from './AppleWikiInfo'
 export { default as Requirements } from './Requirements'
 export { default as MainButton } from './MainButton'