Minor fixes 6

electron/main.ts

@@ -21,6 +21,7 @@ import {
   iconDark,
   getSettings,
   iconLight,
+  getLatestDxvk,
 } from './utils'
 
 import { spawn, exec } from 'child_process'
@@ -69,6 +70,10 @@ function createWindow(): BrowserWindow {
     },
   })
 
+  setTimeout(() => {
+    getLatestDxvk()
+  }, 2500)
+
   //load the index.html from a url
   if (isDev) {
     //@ts-ignore
@@ -156,13 +161,6 @@ if (!gotTheLock) {
           mainWindow.show()
         },
       },
-      {
-        label: i18next.t('tray.reload', 'Reload'),
-        click: function () {
-          mainWindow.reload()
-        },
-        accelerator: 'ctrl + R',
-      },
       {
         label: i18next.t('tray.about', 'About'),
         click: function () {
@@ -181,6 +179,13 @@ if (!gotTheLock) {
           exec(`xdg-open ${kofiURL}`)
         },
       },
+      {
+        label: i18next.t('tray.reload', 'Reload'),
+        click: function () {
+          mainWindow.reload()
+        },
+        accelerator: 'ctrl + R',
+      },
       {
         label: i18next.t('tray.quit', 'Quit'),
         click: function () {
@@ -193,8 +198,8 @@ if (!gotTheLock) {
     appIcon.setToolTip('Heroic')
     ipcMain.on('changeLanguage', async (event, language: string) => {
       await i18next.changeLanguage(language)
-      appIcon.setContextMenu(contextMenu)
     })
+
     return
   })
 }
@@ -387,7 +392,7 @@ interface Tools {
 
 ipcMain.on('callTool', async (event, { tool, wine, prefix, exe }: Tools) => {
   const wineBin = wine.replace("/proton'", "/dist/bin/wine'")
-  let winePrefix: string = prefix
+  let winePrefix: string = prefix.replace('~', home)
 
   if (wine.includes('proton')) {
     const protonPrefix = winePrefix.replaceAll("'", '')

electron/utils.ts

@@ -156,8 +156,7 @@ const updateGame = (game: string) => {
 
 const launchGame = async (appName: string) => {
   let envVars = ''
-  let dxvkPrefix = ''
-  let gameMode
+  let gameMode: string
 
   const {
     winePrefix,
@@ -171,13 +170,12 @@ const launchGame = async (appName: string) => {
     autoInstallDxvk,
   } = await getSettings(appName)
 
-  const wineTricksCommand = `WINE=${wineVersion.bin} WINEPREFIX=${dxvkPrefix} winetricks`
-  let wine = `--wine ${wineVersion.bin}`
+  const fixedWinePrefix = winePrefix.replace('~', home)
+  const wineTricksCommand = `WINE=${wineVersion.bin} WINEPREFIX=${fixedWinePrefix} winetricks`
+  let wineCommand = `--wine ${wineVersion.bin}`
 
   // We need to keep replacing the ' to keep compatibility with old configs
-  let prefix = `--wine-prefix '${winePrefix
-    .replaceAll("'", '')
-    .replace('~', home)}'`
+  let prefix = `--wine-prefix '${fixedWinePrefix.replaceAll("'", '')}'`
 
   const isProton =
     wineVersion.name.startsWith('Proton') ||
@@ -206,26 +204,35 @@ const launchGame = async (appName: string) => {
   }
 
   // start the new prefix if it doesn't exists
-  if (!existsSync(`'${winePrefix}'`)) {
+  if (!existsSync(fixedWinePrefix)) {
+    // Create a sandbox wine prefix by default
+    // TODO: Add an option to disable that
     let command = `${wineTricksCommand} sandbox`
 
     if (isProton) {
-      command = `mkdir '${winePrefix}' -p`
+      command = `mkdir '${fixedWinePrefix}' -p`
       await execAsync(command)
-    }
+    } else {
+      // Start a new prefix with wine to avoid breaking the dxvk installation
+      const wineBoot = wineVersion.bin
+        .replace('wine', 'wineboot')
+        .replace('wine64', 'wineboot')
 
-    await execAsync(command)
+      await execAsync(`WINEPREFIX=${fixedWinePrefix}  ${wineBoot}`)
+      await execAsync(command)
+    }
   }
 
   // Install DXVK for non Proton Prefixes
   if (!isProton && autoInstallDxvk) {
-    dxvkPrefix = winePrefix
-    await execAsync(`${wineTricksCommand} dxvk`)
+    await installDxvk(winePrefix)
   }
 
   if (wineVersion.name !== 'Wine Default') {
     const { bin } = wineVersion
-    wine = isProton ? `--no-wine --wrapper "${bin} run"` : `--wine ${bin}`
+    wineCommand = isProton
+      ? `--no-wine --wrapper "${bin} run"`
+      : `--wine ${bin}`
   }
 
   // check if Gamemode is installed
@@ -235,7 +242,7 @@ const launchGame = async (appName: string) => {
 
   const runWithGameMode = useGameMode && gameMode ? gameMode : ''
 
-  const command = `${envVars} ${runWithGameMode} ${legendaryBin} launch ${appName}  ${wine} ${prefix} ${launcherArgs}`
+  const command = `${envVars} ${runWithGameMode} ${legendaryBin} launch ${appName}  ${wineCommand} ${prefix} ${launcherArgs}`
   console.log('\n Launch Command:', command)
 
   return execAsync(command)
@@ -265,6 +272,87 @@ const launchGame = async (appName: string) => {
     })
 }
 
+async function getLatestDxvk() {
+  const {
+    data: { assets },
+  } = await axios.default.get(
+    'https://api.github.com/repos/lutris/dxvk/releases/latest'
+  )
+  const current = assets[0]
+  const pkg = current.name
+  const name = pkg.replace('.tar.gz', '')
+  const downloadUrl = current.browser_download_url
+
+  const dxvkLatest = `${heroicToolsPath}/DXVK/${pkg}`
+  const pastVersionCheck = `${heroicToolsPath}/DXVK/latest_dxvk`
+  let pastVersion = ''
+
+  if (existsSync(pastVersionCheck)) {
+    pastVersion = readFileSync(pastVersionCheck).toString().split('\n')[0]
+  }
+
+  if (pastVersion === name) {
+    return
+  }
+
+  const downloadCommand = `curl -L ${downloadUrl} -o ${dxvkLatest} --create-dirs`
+  const extractCommand = `tar -zxf ${dxvkLatest} -C ${heroicToolsPath}/DXVK/`
+  const echoCommand = `echo ${name} > ${heroicToolsPath}/DXVK/latest_dxvk`
+  const cleanCommand = `rm ${dxvkLatest}`
+
+  console.log('Updating DXVK to:', name)
+
+  return execAsync(downloadCommand)
+    .then(async () => {
+      console.log('downloaded DXVK')
+      console.log('extracting DXVK')
+      exec(echoCommand)
+      await execAsync(extractCommand)
+      console.log('DXVK updated!')
+      exec(cleanCommand)
+    })
+    .catch(() => console.log('Error when downloading DXVK'))
+}
+
+async function installDxvk(prefix: string) {
+  if (!prefix) {
+    return
+  }
+  const winePrefix = prefix.replace('~', home)
+
+  if (!existsSync(`${heroicToolsPath}/DXVK/latest_dxvk`)) {
+    console.log('dxvk not found!')
+    await getLatestDxvk()
+  }
+
+  const globalVersion = readFileSync(`${heroicToolsPath}/DXVK/latest_dxvk`)
+    .toString()
+    .split('\n')[0]
+  const dxvkPath = `${heroicToolsPath}/DXVK/${globalVersion}/`
+  const currentVersionCheck = `${winePrefix}/current_dxvk`
+  let currentVersion = ''
+
+  if (existsSync(currentVersionCheck)) {
+    currentVersion = readFileSync(currentVersionCheck).toString().split('\n')[0]
+  }
+
+  if (currentVersion === globalVersion) {
+    return
+  }
+
+  const installCommand = `WINEPREFIX=${winePrefix} bash ${dxvkPath}setup_dxvk.sh install`
+  const echoCommand = `echo '${globalVersion}' > ${currentVersionCheck}`
+  console.log(`installing DXVK on ${winePrefix}`, installCommand)
+  await execAsync(`WINEPREFIX=${winePrefix} wineboot`)
+  await execAsync(installCommand, { shell: '/bin/bash' })
+    .then(() => exec(echoCommand))
+    .catch(() =>
+      console.log(
+        'error when installing DXVK, please try launching the game again'
+      )
+    )
+}
+
 const writeDefaultconfig = async () => {
   const { account_id } = getUserInfo()
   const userName = user().username
@@ -285,6 +373,7 @@ const writeDefaultconfig = async () => {
       },
     },
   }
+
   if (!existsSync(heroicConfigPath)) {
     writeFileSync(heroicConfigPath, JSON.stringify(config, null, 2))
   }
@@ -376,6 +465,7 @@ export {
   getSettings,
   isLoggedIn,
   launchGame,
+  getLatestDxvk,
   writeDefaultconfig,
   writeGameconfig,
   checkForUpdates,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroic",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "private": true,
   "main": "public/main.js",
   "homepage": "./",
@@ -74,6 +74,7 @@
   },
   "scripts": {
     "start": "nf start -p 3000 && electron-start",
+    "electron-start": "ELECTRON_IS_DEV=1 node public/start-react",
     "electron": "yarn build-electron && electron .",
     "react-start": "BROWSER=none react-scripts start",
     "build": "react-scripts build",

src/App.css

@@ -1,5 +1,5 @@
-@import "~@fontsource/rubik/index.css";
-@import "~@fontsource/cabin/index.css";
+@import '~@fontsource/rubik/index.css';
+@import '~@fontsource/cabin/index.css';
 
 * {
   box-sizing: border-box;
@@ -390,6 +390,7 @@
   display: grid;
   place-self: center;
   place-items: flex-start;
+  width: 569px;
 }
 
 .settingsTools {
@@ -988,7 +989,7 @@
   color: var(--primary);
 }
 .more .hidden {
-  opacity: 0;
+  display: none;
   cursor: default;
 }
 
@@ -999,6 +1000,8 @@
 
 .more.clicked > .hidden {
   opacity: 1;
+  display: block;
+
   cursor: pointer;
 }
 

src/components/GamePage/GamePage.tsx

@@ -362,7 +362,10 @@ export default function GamePage() {
         if (!err) {
           return
         }
-        if (err.includes('ERROR: Game is out of date')) {
+        if (
+          typeof err === 'string' &&
+          err.includes('ERROR: Game is out of date')
+        ) {
           const { response } = await showMessageBox({
             title: t('box.update.title'),
             message: t('box.update.message'),

src/components/GamePage/GamesSubmenu.tsx

@@ -81,7 +81,7 @@ export default function GamesSubmenu({
             className="hidden link"
             to={{
               pathname: `/settings/${appName}/wine`,
-              state: { fromGameCard: false, title },
+              state: { fromGameCard: false },
             }}
           >
             {t('submenu.settings')}

src/components/Library.tsx

@@ -1,5 +1,4 @@
 import React, { lazy, useContext } from 'react'
-import { useTranslation } from 'react-i18next'
 import cx from 'classnames'
 import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
 import ContextProvider from '../state/ContextProvider'
@@ -19,7 +18,6 @@ window.onscroll = () => {
 }
 
 export const Library = ({ library }: Props) => {
-  const { t } = useTranslation()
   const { layout } = useContext(ContextProvider)
   const backToTop = () => {
     const anchor = document.getElementById('top')
@@ -37,7 +35,7 @@ export const Library = ({ library }: Props) => {
           gameList: layout === 'grid',
         })}
       >
-        {!!library.length && (
+        {!!library.length &&
           library.map(
             ({
               title,
@@ -67,8 +65,7 @@ export const Library = ({ library }: Props) => {
                 />
               )
             }
-          )
-        )}
+          )}
       </div>
       <button id="backToTopBtn" onClick={backToTop}>
         <ArrowDropUp className="material-icons" />