feat: add modal to warning user about wine/lutris binaries

src/locales/en/translation.json

@@ -107,5 +107,10 @@
   },
   "game_card": {
     "no_downloads": "No downloads available"
+  },
+  "binary_not_found_modal": {
+    "title": "Programs not installed",
+    "description": "Wine or Lutris executables were not found on your system",
+    "instructions": "Check the correct way to install any of them on your Linux distro so that the game can run normally"
   }
 }

src/locales/es/translation.json

@@ -107,5 +107,10 @@
   },
   "game_card": {
     "no_downloads": "No hay descargas disponibles"
+  },
+  "binary_not_found_modal": {
+    "title": "Programas no instalados",
+    "description": "Los ejecutables de Wine o Lutris no se encontraron en su sistema",
+    "instructions": "Comprueba la forma correcta de instalar cualquiera de ellos en tu distro Linux para que el juego pueda ejecutarse con normalidad"
   }
 }

src/locales/pt/translation.json

@@ -107,5 +107,10 @@
   },
   "game_card": {
     "no_downloads": "Sem downloads disponíveis"
+  },
+  "binary_not_found_modal": {
+    "title": "Programas não instalados",
+    "description": "Não foram encontrados no seu sistema os executáveis do Wine ou Lutris",
+    "instructions": "Verifique a forma correta de instalar algum deles na sua distro Linux para que o jogo possa ser executado normalmente"
   }
 }

src/renderer/declaration.d.ts

@@ -43,7 +43,7 @@ declare global {
     /* Library */
     getLibrary: () => Promise<Game[]>;
     getRepackersFriendlyNames: () => Promise<Record<string, string>>;
-    openGame: (gameId: number) => Promise<void>;
+    openGame: (gameId: number) => Promise<boolean>;
     removeGame: (gameId: number) => Promise<void>;
     deleteGameFolder: (gameId: number) => Promise<unknown>;
     getGameByObjectID: (objectID: string) => Promise<Game | null>;

src/renderer/pages/downloads/downloads.tsx

@@ -9,6 +9,7 @@ import type { Game } from "@types";
 
 import * as styles from "./downloads.css";
 import { useEffect, useState } from "react";
+import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
 
 export function Downloads() {
   const { library, updateLibrary } = useLibrary();
@@ -18,6 +19,7 @@ export function Downloads() {
   const navigate = useNavigate();
 
   const [filteredLibrary, setFilteredLibrary] = useState<Game[]>([]);
+  const [showBinaryNotFoundModal, setShowBinaryNotFoundModal] = useState<boolean>(false);
 
   const {
     game: gameDownloading,
@@ -37,7 +39,8 @@ export function Downloads() {
   }, [library]);
 
   const openGame = (gameId: number) =>
-    window.electron.openGame(gameId).then(() => {
+    window.electron.openGame(gameId).then(res => {
+      if (!res) setShowBinaryNotFoundModal(true);
       updateLibrary();
     });
 
@@ -202,6 +205,7 @@ export function Downloads() {
 
   return (
     <section className={styles.downloadsContainer}>
+      <BinaryNotFoundModal visible={showBinaryNotFoundModal} onClose={() => setShowBinaryNotFoundModal(false)} />
       <TextField placeholder={t("filter")} onChange={handleFilter} />
 
       <ul className={styles.downloads}>

src/renderer/pages/game-details/hero-panel.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import prettyBytes from "pretty-bytes";
 import { format } from "date-fns";
@@ -9,6 +9,7 @@ import type { Game, ShopDetails } from "@types";
 
 import * as styles from "./hero-panel.css";
 import { formatDownloadProgress } from "@renderer/helpers";
+import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
 
 export interface HeroPanelProps {
   game: Game | null;
@@ -27,6 +28,8 @@ export function HeroPanel({
 }: HeroPanelProps) {
   const { t } = useTranslation("game_details");
 
+  const [showBinaryNotFoundModal, setShowBinaryNotFoundModal] = useState<boolean>(false);
+
   const {
     game: gameDownloading,
     isDownloading,
@@ -46,7 +49,8 @@ export function HeroPanel({
   const isGameDownloading = isDownloading && gameDownloading?.id === game?.id;
 
   const openGame = (gameId: number) =>
-    window.electron.openGame(gameId).then(() => {
+    window.electron.openGame(gameId).then(res => {
+      if (!res) setShowBinaryNotFoundModal(true);
       updateLibrary();
     });
 
@@ -202,6 +206,7 @@ export function HeroPanel({
 
   return (
     <div style={{ backgroundColor: color }} className={styles.panel}>
+      <BinaryNotFoundModal visible={showBinaryNotFoundModal} onClose={() => setShowBinaryNotFoundModal(false)} />
       <div className={styles.content}>{getInfo()}</div>
       <div className={styles.actions}>{getActions()}</div>
     </div>

src/renderer/pages/shared-modals/binary-not-found-modal.tsx

@@ -0,0 +1,25 @@
+import { Modal } from "@renderer/components"
+import { useTranslation } from "react-i18next";
+
+interface BinaryNotFoundModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export const BinaryNotFoundModal = ({
+  visible,
+  onClose
+}: BinaryNotFoundModalProps) => {
+  const { t } = useTranslation("binary_not_found_modal");
+
+  return (
+    <Modal 
+      visible={visible}
+      title={t("title")}
+      description={t("description")}
+      onClose={onClose}
+    >
+      {t("instructions")}
+    </Modal>
+  )
+}