[UX] Improve Compatibility layer setup and handling (#761)

* Add compatibility warning for non-native games

* feat: download gptk even if wine is available

* fix: winetricks download on macos

* feat: set gptk as default on mac

* feat: style the warning on install dialog

* fix: lint

* feat: show warning dialog when running a game with compatibility layer

* feat: add method to check if mac is GPTK compatible

* feat: show a warning if system is not compatible with GPTK

* fix: lint

* fix: check for gptk on validWine as well

* fix: show correct dialog when wine not found

* feat: Add isRosettaAvailable function to check for Rosetta availability on macOS

* fix: PR Comments

* fix: pr comments

* fix: lint

---------

Co-authored-by: Flavio F Lima <flavioislima@users.noreply.github.com>

Author: flavioislima

public/locales/en/gamepage.json

@@ -1,18 +1,18 @@
-{
-    "button": {
-        "error": "Error, try a different Code",
-        "loading": "Loading",
-        "login": "Log in"
-    },
-    "message": {
-        "part1": "In order to log in and install your games, you first need to follow the steps below:",
-        "part2": "Open the",
-        "part3": "Epic Store here",
-        "part4": ", log in to your account and copy your",
-        "part5": "authorization code information number",
-        "part6": "Paste your",
-        "part7": "authorization code number",
-        "part8": "in the input box below and click on the login button."
-    },
-    "welcome": "Welcome!"
-}
+{
+    "button": {
+        "error": "Error, try a different Code",
+        "loading": "Loading",
+        "login": "Log in"
+    },
+    "message": {
+        "part1": "In order to log in and install your games, you first need to follow the steps below:",
+        "part2": "Open the",
+        "part3": "Epic Store here",
+        "part4": ", log in to your account and copy your",
+        "part5": "authorization code information number",
+        "part6": "Paste your",
+        "part7": "authorization code number",
+        "part8": "in the input box below and click on the login button."
+    },
+    "welcome": "Welcome!"
+}

public/locales/en/login.json

@@ -24,7 +24,8 @@ import {
   searchForExecutableOnPath,
   quoteIfNecessary,
   errorHandler,
-  removeQuoteIfNecessary
+  removeQuoteIfNecessary,
+  isMacSonomaOrHigher
 } from './utils'
 import {
   logDebug,
@@ -502,7 +503,7 @@ function setupWrappers(
  * @returns true if the wine version exists, false if it doesn't
  */
 export async function validWine(
-  wineVersion: WineInstallation
+  wineVersion: WineInstallation | undefined
 ): Promise<boolean> {
   if (!wineVersion) {
     return false
@@ -518,6 +519,13 @@ export async function validWine(
   const necessary = type === 'wine' ? [bin, wineserver] : [bin]
   const haveAll = necessary.every((binary) => existsSync(binary as string))
 
+  if (isMac && type === 'toolkit') {
+    const isGPTKCompatible = await isMacSonomaOrHigher()
+    if (!isGPTKCompatible) {
+      return false
+    }
+  }
+
   // if wine version does not exist, use the default one
   if (!haveAll) {
     return false

public/locales/en/translation.json

@@ -66,8 +66,10 @@ import {
   getSystemInfo,
   handleExit,
   isEpicServiceOffline,
+  checkRosettaInstall,
   openUrlOrFile,
   resetApp,
+  setGPTKDefaultOnMacOS,
   showAboutWindow,
   showItemInFolder,
   wait
@@ -90,6 +92,7 @@ import {
   isCLIFullscreen,
   isCLINoGui,
   isFlatpak,
+  isMac,
   isSteamDeckGameMode,
   onboardLocalStore,
   publicDir,
@@ -296,11 +299,19 @@ async function initializeWindow(): Promise<BrowserWindow> {
 
   setTimeout(async () => {
     // Will download Wine if none was found
-    const availableWine = await GlobalConfig.get().getAlternativeWine()
+    const availableWine = (await GlobalConfig.get().getAlternativeWine()) || []
+    const toolkitListDownloaded = availableWine.some(
+      (wine) => wine.type === 'toolkit'
+    )
+    const shouldDownloadWine =
+      !availableWine.length || (isMac && !toolkitListDownloaded)
+
     Promise.all([
       DXVK.getLatest(),
       Winetricks.download(),
-      !availableWine.length ? downloadDefaultWine() : null
+      shouldDownloadWine ? downloadDefaultWine() : null,
+      isMac && checkRosettaInstall(),
+      isMac && setGPTKDefaultOnMacOS()
     ])
   }, 2500)
 

src/backend/launcher.ts

@@ -393,15 +393,12 @@ export const DXVK = {
 
 export const Winetricks = {
   download: async () => {
-    if (!isLinux) {
+    if (isWindows) {
       return
     }
 
-    const linuxUrl =
+    const url =
       'https://raw.githubusercontent.com/Winetricks/winetricks/master/src/winetricks'
-    const macUrl =
-      'https://raw.githubusercontent.com/The-Wineskin-Project/winetricks/macOS/src/winetricks'
-    const url = isMac ? macUrl : linuxUrl
     const path = `${toolsPath}/winetricks`
 
     if (!isOnline()) {
@@ -432,7 +429,7 @@ export const Winetricks = {
     }
 
     return new Promise<void>((resolve) => {
-      const winetricks = `${toolsPath}/winetricks`
+      const winetricks = join(toolsPath, 'winetricks')
 
       const { winePrefix, wineBin } = getWineFromProton(
         wineVersion,

src/backend/main.ts

@@ -899,6 +899,27 @@ async function ContinueWithFoundWine(
   selectedWine: string,
   foundWine: string
 ): Promise<{ response: number }> {
+  const isGPTK = selectedWine.toLowerCase().includes('toolkit')
+  const isGPTKCompatible = await isMacSonomaOrHigher()
+
+  if (isMac && isGPTK && !isGPTKCompatible) {
+    const { response } = await dialog.showMessageBox({
+      title: i18next.t(
+        'box.warning.wine-change.title-gptk',
+        'Game Porting Toolkit Not Compatible '
+      ),
+      message: i18next.t('box.warning.wine-change.message-gptk', {
+        defaultValue:
+          'To be able to run games using the Apple Gaming porting toolkit you need to upgrade your macOS to 14 (Sonoma) or higher. {{newline}} We found Wine on your system, do you want to continue launching using {{foundWine}} ?',
+        newline: '\n',
+        foundWine: foundWine
+      }),
+      buttons: [i18next.t('box.yes'), i18next.t('box.no')],
+      icon: icon
+    })
+    return { response }
+  }
+
   const { response } = await dialog.showMessageBox({
     title: i18next.t('box.warning.wine-change.title', 'Wine not found!'),
     message: i18next.t('box.warning.wine-change.message', {
@@ -915,19 +936,79 @@ async function ContinueWithFoundWine(
   return { response }
 }
 
+export async function checkRosettaInstall() {
+  if (!isMac) {
+    return
+  }
+
+  // check if on arm64 macOS
+  const { stdout: archCheck } = await execAsync('arch')
+  const isArm64 = archCheck.trim() === 'arm64'
+
+  if (!isArm64) {
+    return
+  }
+
+  const { stdout: rosettaCheck } = await execAsync(
+    'arch -x86_64 /usr/sbin/sysctl sysctl.proc_translated'
+  )
+
+  const result = rosettaCheck.split(':')[1].trim() === '1'
+
+  logInfo(
+    `Rosetta is ${result ? 'available' : 'not available'} on this system.`,
+    LogPrefix.Backend
+  )
+
+  if (!result) {
+    // show a dialog saying that hyperplay wont run without rosetta and add information on how to install it
+    await dialog.showMessageBox({
+      title: i18next.t('box.warning.rosetta.title', 'Rosetta not found'),
+      message: i18next.t(
+        'box.warning.rosetta.message',
+        'HyperPlay requires Rosetta to run correctly on macOS with Apple Silicon chips. Please install it from the macOS terminal using the following command: "softwareupdate --install-rosetta" and restart HyperPlay. '
+      ),
+      buttons: ['OK'],
+      icon: icon
+    })
+
+    logInfo(
+      'Rosetta is not available, install it with softwareupdate --install-rosetta from the terminal',
+      LogPrefix.Backend
+    )
+  }
+}
+
+export async function isMacSonomaOrHigher() {
+  if (!isMac) {
+    return false
+  }
+  logInfo('Checking if macOS is Sonoma or higher', LogPrefix.Backend)
+
+  const { release } = await si.osInfo()
+  const [major] = release.split('.').map(Number)
+
+  return major >= 14
+}
+
 export async function downloadDefaultWine() {
   // refresh wine list
   await updateWineVersionInfos(true)
   // get list of wines on wineDownloaderInfoStore
   const availableWine = wineDownloaderInfoStore.get('wine-releases', [])
   // use Wine-GE type if on Linux and Wine-Crossover if on Mac
-  const release = availableWine.filter((version) => {
+  const release = availableWine.filter(async (version) => {
     if (isLinux) {
       return (
         version.type === 'Wine-GE' && version.version.includes('Wine-GE-Proton')
       )
     } else if (isMac) {
-      return version.type === 'Game-Porting-Toolkit'
+      const isGPTKCompatible = await isMacSonomaOrHigher()
+
+      if (isGPTKCompatible) {
+        return version.type === 'Game-Porting-Toolkit'
+      }
+      return version.type === 'Wine-Crossover'
     }
     return false
   })[0]
@@ -969,14 +1050,46 @@ export async function downloadDefaultWine() {
   return null
 }
 
+export async function setGPTKDefaultOnMacOS() {
+  const isGPTKCompatible = await isMacSonomaOrHigher()
+  if (!isGPTKCompatible) {
+    return
+  }
+
+  const wineList = await GlobalConfig.get().getAlternativeWine()
+  const gptk = wineList.find((wine) => wine.type === 'toolkit')
+  if (!gptk) {
+    await downloadDefaultWine()
+    return setGPTKDefaultOnMacOS()
+  }
+  if (gptk && existsSync(gptk.bin)) {
+    logInfo(`Changing wine version to ${gptk.name}`)
+    GlobalConfig.get().setSetting('wineVersion', gptk)
+    // update prefix to use the new one as well
+    const installPath = GlobalConfig.get().getSettings().defaultInstallPath
+    const newPrefix = join(installPath, 'Prefixes', 'GPTK')
+    GlobalConfig.get().setSetting('winePrefix', newPrefix)
+  }
+  return
+}
+
 export async function checkWineBeforeLaunch(
   appName: string,
   gameSettings: GameSettings,
   logFileLocation: string
 ): Promise<boolean> {
   const wineIsValid = await validWine(gameSettings.wineVersion)
 
-  if (wineIsValid) {
+  const isToolkit = gameSettings.wineVersion.type === 'toolkit'
+  const isGPTKCompatible = await isMacSonomaOrHigher()
+
+  const isValidOnLinux = isLinux && wineIsValid
+  const isValidtoolkitOnMac =
+    isMac && isToolkit && isGPTKCompatible && wineIsValid
+  const isValidWineOnMac = isMac && !isToolkit && wineIsValid
+  const isValidOnMac = isValidtoolkitOnMac || isValidWineOnMac
+
+  if (isValidOnMac || isValidOnLinux) {
     return true
   } else {
     if (!logsDisabled) {
@@ -1011,7 +1124,18 @@ export async function checkWineBeforeLaunch(
       }
     } else {
       const wineList = await GlobalConfig.get().getAlternativeWine()
-      const firstFoundWine = wineList[0]
+
+      // if Linux get the first element, if macOS and isGPTKCompatible is true get one with type 'toolkit', otherwise get the one with type 'wine'
+      const firstFoundWine = wineList.find((wine) => {
+        if (isLinux) {
+          return wine.type === 'wine'
+        } else if (isMac) {
+          return isGPTKCompatible
+            ? wine.type === 'toolkit'
+            : wine.type === 'wine'
+        }
+        return undefined
+      })
 
       const isValidWine = await validWine(firstFoundWine)
 

src/backend/tools.ts

@@ -17,6 +17,9 @@ interface MessageBoxModalProps {
   onClose: () => void
   buttons: Array<ButtonOptions>
   type: DialogType
+  showCheckbox?: boolean
+  checkboxLabel?: string
+  checkboxValue?: boolean
 }
 
 const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
@@ -72,7 +75,15 @@ const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
       <DialogHeader onClose={props.onClose}>{props.title}</DialogHeader>
       <DialogContent className="body dialogContent">
         {getContent()}
+        {props.showCheckbox && (
+          <div className="checkbox">
+            <input type="checkbox" checked={props.checkboxValue ? true : false}>
+              {props.checkboxLabel}
+            </input>
+          </div>
+        )}
       </DialogContent>
+
       <DialogFooter>{getButtons()}</DialogFooter>
     </Dialog>
   )

src/backend/utils.ts

@@ -25,6 +25,15 @@ export default function DialogHandler() {
     }
   }, [])
 
+  const handleClose = () => {
+    if (dialogModalOptions.onClose) {
+      // runs the optional onClose function and then closes the modal
+      dialogModalOptions.onClose()
+      return showDialogModal({ showDialog: false })
+    }
+    showDialogModal({ showDialog: false })
+  }
+
   return (
     <>
       {dialogModalOptions.showDialog && (
@@ -33,7 +42,7 @@ export default function DialogHandler() {
           title={dialogModalOptions.title ? dialogModalOptions.title : ''}
           message={dialogModalOptions.message ? dialogModalOptions.message : ''}
           buttons={dialogModalOptions.buttons ? dialogModalOptions.buttons : []}
-          onClose={() => showDialogModal({ showDialog: false })}
+          onClose={() => handleClose()}
         />
       )}
     </>