[FIX] Add offline warning dialog for games that are not playable offline

Author: flavioislima

public/locales/en/gamepage.json

@@ -14,6 +14,12 @@
             "title": "Move Game Installation"
         },
         "no": "NO",
+        "offline_warning": {
+            "message": "This game might not work properly offline. Do you want to play anyway?",
+            "playAnyway": "Play Anyway",
+            "title": "Offline Warning"
+        },
+        "ok": "OK",
         "repair": {
             "message": "Do you want to try to repair this game? This can take a long time.",
             "title": "Verify and Repair"

src/frontend/helpers/library.ts

@@ -169,6 +169,7 @@ type LaunchOptions = {
   hasUpdate: boolean
   showDialogModal: (options: DialogModalOptions) => void
   args?: string[]
+  notPlayableOffline?: boolean
 }
 
 const launch = async ({
@@ -178,29 +179,33 @@ const launch = async ({
   runner,
   hasUpdate,
   showDialogModal,
-  args
+  args,
+  notPlayableOffline
 }: LaunchOptions): Promise<{ status: 'done' | 'error' | 'abort' }> => {
-  // First handle update dialog if needed
-  if (hasUpdate) {
-    const { ignoreGameUpdates } = await window.api.requestGameSettings(appName)
-
-    if (ignoreGameUpdates) {
-      // If updates are ignored, proceed to check launch options
-      return checkLaunchOptionsAndLaunch({
-        appName,
-        t,
-        launchArguments,
-        runner,
-        showDialogModal,
-        args,
-        skipVersionCheck: true,
-        hasUpdate
-      })
-    }
+  const proceedToLaunch = async () => {
+    // First handle update dialog if needed
+    if (hasUpdate) {
+      const { ignoreGameUpdates } =
+        await window.api.requestGameSettings(appName)
+
+      if (ignoreGameUpdates) {
+        // If updates are ignored, proceed to check launch options
+        return checkLaunchOptionsAndLaunch({
+          appName,
+          t,
+          launchArguments,
+          runner,
+          showDialogModal,
+          args,
+          skipVersionCheck: true,
+          hasUpdate
+        })
+      }
 
-    // promisifies the showDialogModal button click callbacks
-    const launchFinished = new Promise<{ status: 'done' | 'error' | 'abort' }>(
-      (res) => {
+      // promisifies the showDialogModal button click callbacks
+      const launchFinished = new Promise<{
+        status: 'done' | 'error' | 'abort'
+      }>((res) => {
         showDialogModal({
           message: t('gamepage:box.update.message'),
           title: t('gamepage:box.update.title'),
@@ -236,25 +241,55 @@ const launch = async ({
             }
           ]
         })
-      }
-    )
+      })
+
+      return launchFinished
+    }
+
+    // No update needed, proceed to check launch options
+    return checkLaunchOptionsAndLaunch({
+      appName,
+      t,
+      launchArguments,
+      runner,
+      showDialogModal,
+      args,
+      hasUpdate
+    })
+  }
 
-    return launchFinished
+  if (notPlayableOffline) {
+    return new Promise((res) => {
+      showDialogModal({
+        title: t('gamepage:box.offline_warning.title', 'Offline Warning'),
+        message: t(
+          'gamepage:box.offline_warning.message',
+          'This game might not work properly offline. Do you want to play anyway?'
+        ),
+        type: 'MESSAGE',
+        buttons: [
+          {
+            text: t('box.ok', 'OK'),
+            onClick: () => {
+              showDialogModal({ showDialog: false })
+              res({ status: 'abort' })
+            }
+          },
+          {
+            text: t('gamepage:box.offline_warning.playAnyway', 'Play Anyway'),
+            onClick: async () => {
+              showDialogModal({ showDialog: false })
+              res(await proceedToLaunch())
+            }
+          }
+        ]
+      })
+    })
   }
 
-  // No update needed, proceed to check launch options
-  return checkLaunchOptionsAndLaunch({
-    appName,
-    t,
-    launchArguments,
-    runner,
-    showDialogModal,
-    args,
-    hasUpdate
-  })
+  return proceedToLaunch()
 }
 
-// Helper function to check for launch options and show dialog if needed
 async function checkLaunchOptionsAndLaunch({
   appName,
   t,

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

@@ -196,8 +196,7 @@ const MainButton = ({
               is.syncing ||
               is.launching ||
               is.installingWinetricksPackages ||
-              is.installingRedist ||
-              is.notPlayableOffline
+              is.installingRedist
             }
             autoFocus={true}
             onClick={async () => handlePlay(gameInfo)}

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

@@ -541,7 +541,8 @@ export default React.memo(function GamePage(): JSX.Element | null {
       launchArguments,
       runner: gameInfo.runner,
       hasUpdate,
-      showDialogModal
+      showDialogModal,
+      notPlayableOffline
     })
   }
 

src/frontend/screens/Library/components/GameCard/index.tsx

@@ -101,8 +101,13 @@ const GameCard = ({
 
   const navigate = useNavigate()
 
-  const { hiddenGames, favouriteGames, showDialogModal, activeController } =
-    useContext(ContextProvider)
+  const {
+    hiddenGames,
+    favouriteGames,
+    showDialogModal,
+    activeController,
+    connectivity
+  } = useContext(ContextProvider)
   const { openGameSettingsModal, openGameLogsModal, openGameCategoriesModal } =
     useGlobalState.keys(
       'openGameSettingsModal',
@@ -545,12 +550,15 @@ const GameCard = ({
 
     if (isInstalled) {
       setIsLaunching(true)
+      const isOffline = connectivity.status !== 'online'
+      const notPlayableOffline = isOffline && !gameInfo.canRunOffline
       return launch({
         appName,
         t,
         runner,
         hasUpdate,
-        showDialogModal
+        showDialogModal,
+        notPlayableOffline
       })
     }
     return