modals fully translated

assets/jsons/translations/en-EN.json

@@ -4,7 +4,8 @@
       "verify": "Verify",
       "launch": "Launch",
       "mods": "Mods",
-      "maps": "Maps"
+      "maps": "Maps",
+      "cancel": "Cancel"
    },
    "pages":{
       "version-viewer":{
@@ -152,5 +153,52 @@
             }
          }
       }
+   },
+   "modals":{
+      "guard":{
+         "title": "Steam Guard",
+         "inputs":{
+            "guard-code":{
+               "label": "Guard Code",
+               "placeholder": "Enter your Guard code"
+            }
+         },
+         "buttons":{
+            "submit": "Login"
+         }
+      },
+      "steam-login":{
+         "title": "Steam Login",
+         "inputs":{
+            "username":{
+               "label": "Username",
+               "placeholder": "Enter your username"
+            },
+            "password":{
+               "label": "Password",
+               "placeholder": "Enter your password"
+            },
+            "stay":{
+               "label": "Stay connected"
+            }
+         },
+         "buttons":{
+            "submit": "Login"
+         }  
+      },
+      "bs-uninstall":{
+         "title": "Uninstall",
+         "description": "Are you sure you want to uninstall BeatSaber {version} ? You will have to download it again to play it.",
+         "buttons":{
+            "submit": "Uninstall"
+         }
+      },
+      "install-folder":{
+         "title": "Installation folder",
+         "description": "Changing the default installation folder will result in moving all installed data to the new folder.",
+         "buttons":{
+            "submit": "Choose folder"
+         }
+      }
    }
 }

assets/jsons/translations/en-US.json

@@ -4,7 +4,8 @@
       "verify": "Verify",
       "launch": "Launch",
       "mods": "Mods",
-      "maps": "Maps"
+      "maps": "Maps",
+      "cancel": "Cancel"
    },
    "pages":{
       "version-viewer":{
@@ -152,5 +153,52 @@
             }
          }
       }
+   },
+   "modals":{
+      "guard":{
+         "title": "Steam Guard",
+         "inputs":{
+            "guard-code":{
+               "label": "Guard Code",
+               "placeholder": "Enter your Guard code"
+            }
+         },
+         "buttons":{
+            "submit": "Login"
+         }
+      },
+      "steam-login":{
+         "title": "Steam Login",
+         "inputs":{
+            "username":{
+               "label": "Username",
+               "placeholder": "Enter your username"
+            },
+            "password":{
+               "label": "Password",
+               "placeholder": "Enter your password"
+            },
+            "stay":{
+               "label": "Stay connected"
+            }
+         },
+         "buttons":{
+            "submit": "Login"
+         }  
+      },
+      "bs-uninstall":{
+         "title": "Uninstall",
+         "description": "Are you sure you want to uninstall BeatSaber {version} ? You will have to download it again to play it.",
+         "buttons":{
+            "submit": "Uninstall"
+         }
+      },
+      "install-folder":{
+         "title": "Installation folder",
+         "description": "Changing the default installation folder will result in moving all installed data to the new folder.",
+         "buttons":{
+            "submit": "Choose folder"
+         }
+      }
    }
 }

assets/jsons/translations/es-ES.json

@@ -4,7 +4,8 @@
       "verify": "Verificar",
       "launch": "Lanzar",
       "mods": "Mods",
-      "maps": "Maps"
+      "maps": "Maps",
+      "cancel": "Cancelar"
    },
 	"pages":{
       "version-viewer":{
@@ -63,7 +64,7 @@
       	}
     	}
   	},
-   
+
      "notifications":{
       "types":{
          "error": "🚨 Error",
@@ -153,5 +154,52 @@
             }
          }
       }
+   },
+   "modals":{
+      "guard":{
+         "title": "Steam Guard",
+         "inputs":{
+            "guard-code":{
+               "label": "Guard Código",
+               "placeholder": "Introduzca su código Guard"
+            }
+         },
+         "buttons":{
+            "submit": "Conéctate"
+         }
+      },
+      "steam-login":{
+         "title": "Steam Conectar",
+         "inputs":{
+            "username":{
+               "label": "Nombre de usuario",
+               "placeholder": "Introduzca su nombre de usuario"
+            },
+            "password":{
+               "label": "Contraseña",
+               "placeholder": "Introduzca su contraseña"
+            },
+            "stay":{
+               "label": "Manténgase conectado"
+            }
+         },
+         "buttons":{
+            "submit": "Inicio de sesión"
+         }  
+      },
+      "bs-uninstall":{
+         "title": "Desinstalar",
+         "description": "¿Estás seguro de que quieres desinstalar BeatSaber {version}? Tendrás que descargarlo de nuevo para poder jugar.",
+         "buttons":{
+            "submit": "Desinstalar"
+         }
+      },
+      "install-folder":{
+         "title": "Instalación Carpeta",
+         "description": "Al cambiar la carpeta de instalación por defecto, se moverán todos los datos instalados a la nueva carpeta.",
+         "buttons":{
+            "submit": "Elija la carpeta"
+         }
+      }
    }
 }

assets/jsons/translations/fr-FR.json

@@ -4,7 +4,8 @@
       "verify": "Vérifier",
       "launch": "Lancer",
       "mods": "Modes",
-      "maps": "Maps"
+      "maps": "Maps",
+      "cancel": "Annuler"
    },
    "pages":{
       "version-viewer":{
@@ -152,5 +153,52 @@
             }
          }
       }
+   },
+   "modals":{
+      "guard":{
+         "title": "Steam Guard",
+         "inputs":{
+            "guard-code":{
+               "label": "Code Guard",
+               "placeholder": "Entre ton code Guard"
+            }
+         },
+         "buttons":{
+            "submit": "Se connecter"
+         }
+      },
+      "steam-login":{
+         "title": "Connexion Steam",
+         "inputs":{
+            "username":{
+               "label": "Nom d'utilisateur",
+               "placeholder": "Entre ton nom d'utilisateur"
+            },
+            "password":{
+               "label": "Mot de passe",
+               "placeholder": "Entre ton mot de passe"
+            },
+            "stay":{
+               "label": "Rester connecté"
+            }
+         },
+         "buttons":{
+            "submit": "Se connecter"
+         }  
+      },
+      "bs-uninstall":{
+         "title": "Désinstaller",
+         "description": "Est tu sûr de vouloir désinstaller BeatSaber {version} ? Tu vas devoir la retélécharger pour y jouer.",
+         "buttons":{
+            "submit": "Désinstaller"
+         }
+      },
+      "install-folder":{
+         "title": "Dossier d'installation",
+         "description": "Changer le dossier d'installation par défaut, va engendrer le déplacement de toutes les données installer vers le nouveau dossier.",
+         "buttons":{
+            "submit": "Choisir un dossier"
+         }
+      }
    }
 }

src/renderer/components/modal/modal-types/guard-modal.component.tsx

@@ -3,10 +3,12 @@ import { useState } from "react";
 import BeatConflict from "../../../../../assets/images/apngs/beat-conflict.png"
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
     const [guardCode, setGuardCode] = useState('');
+    const t = useTranslation();
 
     const login = () => {
       if(!guardCode){ return; }
@@ -15,15 +17,15 @@ export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); login();}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Steam Guard</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.guard.title")}</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
         <div className="mb-4">
-            <label className="block font-bold tracking-wide text-gray-800 dark:text-gray-200" htmlFor="guard">Guard Code</label>
-            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-2 rounded-md py-[2px]" onChange={e => setGuardCode(e.target.value.toUpperCase())} value={guardCode} type="guard" name="guard" id="guard" placeholder="Enter your Guard code"/>
+            <label className="block font-bold tracking-wide text-gray-800 dark:text-gray-200" htmlFor="guard">{t("modals.guard.inputs.guard-code.label")}</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-2 rounded-md py-[2px]" onChange={e => setGuardCode(e.target.value.toUpperCase())} value={guardCode} type="guard" name="guard" id="guard" placeholder={t("modals.guard.inputs.guard-code.placeholder")}/>
         </div>
         <div className="grid grid-flow-col grid-cols-2 gap-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="Login"/>
+            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text={t("misc.cancel")}/>
+            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text={t("modals.guard.buttons.submit")}/>
         </div>
     </form>
   )

src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx

@@ -1,21 +1,22 @@
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { ModalExitCode, ModalResponse } from "renderer/services/modale.service";
 import BeatConflict from "../../../../../assets/images/apngs/beat-conflict.png"
 
 export function InstallationFolderModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
-
+   const t = useTranslation();
 
   return (
     <>
         <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">installation folder</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.install-folder.title")}</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
-        <p className="max-w-sm text-gray-800 dark:text-gray-200">Changing the default installation folder for Beat Saber instances will cause all installed data to be moved to the new folder.</p>
+        <p className="max-w-sm text-gray-800 dark:text-gray-200">{t("modals.install-folder.description")}</p>
         <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="Cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED})} withBar={false} text="Choose Folder"/>
+            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="misc.cancel"/>
+            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED})} withBar={false} text="modals.install-folder.buttons.submit"/>
         </div>
     </>
   )

src/renderer/components/modal/modal-types/login-modal.component.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { ModalExitCode, ModalResponse } from "renderer/services/modale.service";
 import BeatImpatient from '../../../../../assets/images/apngs/beat-impatient.png'
 
@@ -9,6 +10,7 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [stay, setStay] = useState(true);
+    const t = useTranslation();
 
     const loggin = () => {
         if(!username || !password){ return; }
@@ -17,23 +19,23 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); loggin();}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Steam Login</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.steam-login.title")}</h1>
         <BsmImage className="mx-auto h-20" image={BeatImpatient} />
         <div className="mb-2">
-            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="username">Username</label>
-            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder="Enter your username"/>
+            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="username">{t("modals.steam-login.inputs.username.label")}</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder={t("modals.steam-login.inputs.username.placeholder")}/>
         </div>
         <div className="mb-2">
-            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="password">Password</label>
-            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder="Enter your password"/>
+            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="password">{t("modals.steam-login.inputs.password.label")}</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder={t("modals.steam-login.inputs.password.placeholder")}/>
         </div>
         <div className="flex items-center content-center justify-start mb-3">
             <input onChange={e => setStay(e.target.checked)} checked={stay} className="mr-1" type="checkbox" name="stay" id="stay" />
-            <label className="cursor-pointer text-gray-800 dark:text-gray-200" htmlFor="stay">Stay connected</label>
+            <label className="cursor-pointer text-gray-800 dark:text-gray-200" htmlFor="stay">{t("modals.steam-login.inputs.stay.label")}</label>
         </div>
         <div className="grid grid-flow-col grid-cols-2 gap-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="Login"/>
+            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
+            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text={t("modals.steam-login.buttons.submit")}/>
         </div>
     </form>
   )

src/renderer/components/modal/modal-types/uninstall-modal.component.tsx

@@ -3,19 +3,21 @@ import BeatConflict from "../../../../../assets/images/apngs/beat-conflict.png"
 import { BSVersion } from "main/services/bs-version-manager.service";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function UninstallModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
     const version = ModalService.getInsance().getModalData<BSVersion>();
+    const t = useTranslation();
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); resolver({exitCode: ModalExitCode.COMPLETED})}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Uninstall</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.bs-uninstall.title")}</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
-        <p className="max-w-sm text-gray-800 dark:text-gray-200">Are you sure you want to uninstall BeatSaber {version.BSVersion} ? You will have to re-download it to play it.</p>
+        <p className="max-w-sm text-gray-800 dark:text-gray-200">{t("modals.bs-uninstall.description", {version: version.BSVersion})}</p>
         <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="Uninstall"/>
+            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
+            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="modals.bs-uninstall.buttons.submit"/>
         </div>
     </form>
   )

src/renderer/hooks/use-translation.hook.ts

@@ -1,12 +1,11 @@
 import { I18nService } from "renderer/services/i18n.service"
 
-export function useTranslation(): (translationKey: string) => string{
+export function useTranslation(): (translationKey: string, args?: Record<string, string>) => string{
    
    const i18nService = I18nService.getInstance();
 
-   return (key: string) => {
-      if(!key){ return ""; }
+   return (key: string, args?: Record<string, string>) => {
       const tranlatables = key.split(" ");
-      return tranlatables.map((key) => i18nService.translate(key)).join(" ");
+      return tranlatables.map((key) => i18nService.translate(key, args)).join(" ");
    }
 }

src/renderer/services/i18n.service.ts

@@ -44,12 +44,14 @@ export class I18nService {
       this.configService.set("language" as DefaultConfigKey, this.getSupportedLanguages().includes(lang) ? lang : this.LANG_FALLBACK);
    }
 
-   public translate(translationKey: string): string{
-      const cachedTranlation = this.cache.get(translationKey);
-      if(!!cachedTranlation){ return cachedTranlation; }
-      const tranlated = getProperty(this.dictionary, translationKey);
-      tranlated && this.cache.set(translationKey, tranlated);
-      return tranlated || translationKey;
+   public translate(translationKey: string, args?: Record<string, string>): string{
+      let translated = this.cache.get(translationKey);
+      if(!translated){
+         translated = getProperty(this.dictionary, translationKey);
+         translated ? this.cache.set(translated, translationKey) : translated = translationKey;
+      }
+      args && Object.keys(args).forEach(key => translated = translated.replaceAll(`{${key}}`, args[key]));
+      return translated;
    }