[UX] Alt action to launch games with and without logs (#4220)

* [UX] Alt "Play now" action to disable/enable logs with one click

* A bit of refactor of the new code

Author: arielj

public/locales/en/gamepage.json

@@ -176,6 +176,7 @@
         "launching": "Launching",
         "playing": {
             "start": "Play Now",
+            "start_with_logs": "Play Now (with logs)",
             "stop": "Playing (Stop)"
         },
         "redist": "Installing Redistributables",

src/backend/config.ts

@@ -357,7 +357,7 @@ class GlobalConfigV0 extends GlobalConfig {
       beforeLaunchScriptPath: '',
       afterLaunchScriptPath: '',
       disableUMU: false,
-      verboseLogs: false,
+      verboseLogs: true,
       downloadProtonToSteam: false,
       advertiseAvxForRosetta: isMac && defaultWine.type === 'toolkit',
       noTrayIcon: false

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

@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import GameContext from '../../GameContext'
 import {
+  ArrowBackIosNew,
   Cancel,
   CloudQueue,
   Download,
@@ -13,6 +14,7 @@ import {
 } from '@mui/icons-material'
 import classNames from 'classnames'
 import { GameInfo } from 'common/types'
+import useSetting from 'frontend/hooks/useSetting'
 
 interface Props {
   gameInfo: GameInfo
@@ -25,6 +27,7 @@ interface Props {
 const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
   const { t } = useTranslation('gamepage')
   const { is } = useContext(GameContext)
+  const [verboseLogs, setVerboseLogs] = useSetting('verboseLogs', true)
 
   function getPlayLabel(): React.ReactNode {
     if (is.syncing) {
@@ -54,6 +57,15 @@ const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
       )
     }
 
+    if (verboseLogs) {
+      return (
+        <span className="buttonWithIcon">
+          <PlayArrow data-icon="play" />
+          {t('label.playing.start_with_logs', 'Play (with logs)')}
+        </span>
+      )
+    }
+
     return (
       <span className="buttonWithIcon">
         <PlayArrow data-icon="play" />
@@ -62,6 +74,34 @@ const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
     )
   }
 
+  function altPlayAction() {
+    if (
+      is.syncing ||
+      is.installingRedist ||
+      is.installingWinetricksPackages ||
+      is.launching ||
+      is.playing
+    ) {
+      return <></>
+    }
+
+    const label = verboseLogs
+      ? t('label.playing.start')
+      : t('label.playing.start_with_logs', 'Play Now (with logs)')
+
+    return (
+      <button className="button altPlay is-success">
+        <ArrowBackIosNew />
+        <a className="button" onClick={handleAltLaunch}>
+          <span className="buttonWithIcon">
+            <PlayArrow data-icon="play" />
+            {label}
+          </span>
+        </a>
+      </button>
+    )
+  }
+
   function getButtonLabel() {
     if (is.notInstallable) {
       return (
@@ -109,45 +149,53 @@ const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
     )
   }
 
+  const handleAltLaunch = async () => {
+    setVerboseLogs(!verboseLogs)
+    await handlePlay(gameInfo)
+  }
+
   const is_installed = gameInfo.is_installed
 
   return (
-    <>
+    <div className="playButtons">
       {is_installed && !is.queued && (
-        <button
-          disabled={
-            is.reparing ||
-            is.moving ||
-            is.updating ||
-            is.uninstalling ||
-            is.syncing ||
-            is.launching ||
-            is.installingWinetricksPackages ||
-            is.installingRedist
-          }
-          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
-            },
-            'mainBtn'
-          )}
-        >
-          {getPlayLabel()}
-        </button>
+        <>
+          <button
+            disabled={
+              is.reparing ||
+              is.moving ||
+              is.updating ||
+              is.uninstalling ||
+              is.syncing ||
+              is.launching ||
+              is.installingWinetricksPackages ||
+              is.installingRedist
+            }
+            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
+              },
+              'mainBtn'
+            )}
+          >
+            {getPlayLabel()}
+          </button>
+          {altPlayAction()}
+        </>
       )}
       {(!is_installed || is.queued) && (
         <button
@@ -179,7 +227,7 @@ const MainButton = ({ gameInfo, handlePlay, handleInstall }: Props) => {
           {getButtonLabel()}
         </button>
       )}
-    </>
+    </div>
   )
 }
 

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

@@ -272,11 +272,47 @@
           align-self: center;
         }
 
+        & .playButtons {
+          display: flex;
+          justify-content: center;
+
+          .altPlay {
+            position: relative;
+            margin-inline-start: 1px;
+            padding-inline: 8px;
+
+            & > svg {
+              rotate: 90deg;
+              font-size: 0.7rem;
+            }
+
+            a {
+              display: none;
+              position: absolute;
+              bottom: 100%;
+              right: -10px;
+              white-space: nowrap;
+            }
+
+            &:focus,
+            &:hover,
+            &:focus-within {
+              a {
+                display: block;
+              }
+            }
+          }
+        }
+
         & .mainBtn {
           min-width: 200px;
           font-size: var(--text-md);
           white-space: nowrap;
 
+          span {
+            white-space: nowrap;
+          }
+
           & svg {
             transform: scale(1.2);
             height: 16px;