[UI] Cleanup App and Game Settings (#1055)

* ui: remove set all titles in color setting

* ui: disable anticheat and ignore updates for hyperplay games

* ui: remove altgogdl and altlegendary settings

* ui: disable DisableController setting

* ui: use TextInput from HP-UI for TextInputField

* fix: EGS sync button

* Revert "ui: remove set all titles in color setting"

This reverts commit 7e9b60b.

* fix: lint

* Revert "ui: use TextInput from HP-UI for TextInputField"

This reverts commit 3658530.

* fix: don't show Epic Overlay settings on macOS

* i18n: updated keys

---------

Co-authored-by: Flavio F Lima <[email protected]>
Co-authored-by: Brett <[email protected]>

Author: flavioislima

public/locales/en/translation.json

@@ -35,8 +35,6 @@
         },
         "choose": "Choose",
         "choose-egs-prefix": "Choose Prefix where EGS is installed",
-        "choose-gogdl-binary": "Select GOGDL Binary (needs restart)",
-        "choose-legendary-binary": "Select Legendary binary",
         "customWine": "Select the Wine or Proton binary",
         "default-install-path": "Choose Default Install Path",
         "default-steam-path": "Steam path.",
@@ -710,8 +708,6 @@
         }
     },
     "other": {
-        "gogdl-version": "GOGDL Version: ",
-        "legendary-version": "Legendary Version: ",
         "weblate": "Help Translate HyperPlay."
     },
     "Other": "Other",
@@ -729,8 +725,6 @@
         "WALLET_DISCONNECTED": "You do not have a wallet connected to HyperPlay."
     },
     "placeholder": {
-        "alt-gogdl-bin": "Using built-in GOGDL binary...",
-        "alt-legendary-bin": "Using built-in Legendary binary...",
         "custom_themes_path": "Select the path to look for custom CSS files",
         "dxvkfpsvalue": "Positive integer value (e.g. 30, 60, ...)",
         "egs-prefix": "Prefix where EGS is installed",
@@ -823,8 +817,6 @@
         "addgamestoapplications": "Add games to Applications automatically",
         "addgamestostartmenu": "Add games to start menu automatically",
         "addgamestosteam": "Add games to Steam automatically",
-        "alt-gogdl-bin": "Choose an Alternative GOGDL Binary to use",
-        "alt-legendary-bin": "Choose an Alternative Legendary Binary",
         "autodxvk": "Auto Install/Update DXVK on Prefix",
         "autodxvknvapi": "Auto Install/Update DXVK-NVAPI on Prefix",
         "autoLaunchHyperPlay": "Auto Launch HyperPlay",

src/backend/utils.ts

@@ -419,20 +419,12 @@ function splitPathAndName(fullPath: string): { dir: string; bin: string } {
 }
 
 function getLegendaryBin(): { dir: string; bin: string } {
-  const settings = GlobalConfig.get().getSettings()
-  if (settings?.altLegendaryBin) {
-    return splitPathAndName(settings.altLegendaryBin)
-  }
   return splitPathAndName(
     fixAsarPath(join(publicDir, 'bin', process.platform, 'legendary'))
   )
 }
 
 function getGOGdlBin(): { dir: string; bin: string } {
-  const settings = GlobalConfig.get().getSettings()
-  if (settings?.altGogdlBin) {
-    return splitPathAndName(settings.altGogdlBin)
-  }
   return splitPathAndName(
     fixAsarPath(join(publicDir, 'bin', process.platform, 'gogdl'))
   )

src/common/types.ts

@@ -82,8 +82,6 @@ export interface AppSettings extends GameSettings {
   addDesktopShortcuts: boolean
   addStartMenuShortcuts: boolean
   addSteamShortcuts: boolean
-  altGogdlBin: string
-  altLegendaryBin: string
   autoUpdateGames: boolean
   checkForUpdatesOnStartup: boolean
   autoLaunchHyperPlay: boolean

src/frontend/components/UI/TextInputField/index.scss

@@ -1,11 +1,12 @@
 .textInputFieldWrapper.withRightButton {
-  grid-template-areas: 'label label' 'input button';
+  display: grid;
+  grid-template-areas: 'input after';
   grid-template-columns: auto min-content;
   grid-column-gap: var(--space-xs-fixed);
 }
 
-.textInputFieldWrapper.withRightButton .rightButton {
-  grid-area: button;
+.textInputFieldWrapper.withRightButton .afterInput {
+  grid-area: after;
 }
 
 .textInputFieldWrapper .smallMessage {

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

@@ -63,8 +63,8 @@ const TextInputField = ({
         label={label}
         {...textInputProps}
       />
-      {value && warning}
-      {afterInput}
+      {afterInput && <span className="afterInput">{afterInput}</span>}
+      {value && <span className="smallMessage">{value && warning}</span>}
     </div>
   )
 }

src/frontend/screens/Settings/components/AltGOGdlBin.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ToggleSwitch } from 'frontend/components/UI'
 import useSetting from 'frontend/hooks/useSetting'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
+import SettingsContext from '../SettingsContext'
 
 const BattlEyeRuntime = () => {
   const { t } = useTranslation()
@@ -13,6 +14,12 @@ const BattlEyeRuntime = () => {
     false
   )
 
+  const { gameInfo } = useContext(SettingsContext)
+
+  if (gameInfo?.runner === 'hyperplay') {
+    return null
+  }
+
   const handleBattlEyeRuntime = async () => {
     if (!battlEyeRuntime) {
       const isInstalled = await window.api.isRuntimeInstalled(

src/frontend/screens/Settings/components/AltLegendaryBin.tsx

@@ -5,13 +5,19 @@ import useSetting from 'frontend/hooks/useSetting'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
 import ContextProvider from 'frontend/state/ContextProvider'
+import SettingsContext from '../SettingsContext'
 
 const EacRuntime = () => {
   const { t } = useTranslation()
   const [installing, setInstalling] = useState(false)
   const [eacRuntime, setEacRuntime] = useSetting('eacRuntime', false)
   const [useGameMode, setUseGameMode] = useSetting('useGameMode', false)
   const { showDialogModal } = useContext(ContextProvider)
+  const { gameInfo } = useContext(SettingsContext)
+
+  if (gameInfo?.runner === 'hyperplay') {
+    return null
+  }
 
   const handleEacRuntime = async () => {
     if (!eacRuntime) {

src/frontend/screens/Settings/components/BattlEyeRuntime.tsx

@@ -12,6 +12,7 @@ import {
   ToggleSwitch
 } from 'frontend/components/UI'
 import libraryState from 'frontend/state/libraryState'
+import { Button } from '@hyperplay/ui'
 
 const EgsSettings = () => {
   const { t } = useTranslation()
@@ -113,17 +114,11 @@ const EgsSettings = () => {
           afterInput={
             <>
               <span className="rightButton">
-                <button
+                <Button
                   data-testid="syncButton"
                   onClick={async () => handleSync()}
                   disabled={isSyncing || !egsPath.length}
-                  className={`button is-small ${
-                    isLinked
-                      ? 'is-danger'
-                      : isSyncing
-                      ? 'is-primary'
-                      : 'settings'
-                  }`}
+                  style={{ display: 'flex', marginTop: '27px' }}
                 >
                   {`${
                     isLinked
@@ -132,17 +127,17 @@ const EgsSettings = () => {
                       ? t('button.syncing')
                       : t('button.sync')
                   }`}
-                </button>
+                </Button>
               </span>
-              <div>
-                {!isWindows && (
-                  <InfoBox text="infobox.help">{t('help.general')}</InfoBox>
-                )}
-              </div>
             </>
           }
         />
       )}
+      <div>
+        {!isWindows && (
+          <InfoBox text="infobox.help">{t('help.general')}</InfoBox>
+        )}
+      </div>
       {isWindows && (
         <ToggleSwitch
           htmlId="syncToggle"