Move all of the translations to this repo

.prettierignore

@@ -1,6 +1,7 @@
 # Some prettier-specific files so it doesn't die.
 **/*.png
 **/*.ico
+**/*.woff
 LICENSE
 .gitignore
 

assets/lang/en_US.json

@@ -0,0 +1,28 @@
+{
+  "loading_screen_start": "Starting ArmCord…",
+  "loading_screen_offline": "You appear to be offline. Please connect to the Internet and try again.",
+  "loading_screen_update": "A new version of ArmCord is available. Please update to the latest version.",
+  "setup_question1": "Select what kind of setup you want to perform:",
+  "setup_question1_answer1": "Express setup",
+  "setup_question1_answer2": "Full setup",
+  "setup_offline": "You appear to be offline. Please connect to the Internet and restart the ArmCord setup.",
+  "setup_question2": "Choose your Discord channel/instance:",
+  "setup_question3": "Should ArmCord handle client mods installation?",
+  "yes": "Yes",
+  "no": "No",
+  "next": "Next",
+  "setup_question4": "Select a client mod you want to install:",
+  "setup_question4_clientmodnotice": "Why not all of them? Having many client mods at the same time can cause issues. If you really want to do it though, check our documentation.",
+  "settings-theme": "ArmCord Theme:",
+  "settings-theme-glasstron": "Glasstron (experimental)",
+  "settings-theme-tabs": "Tabs (experimental)",
+  "settings-theme-default": "Default",
+  "settings-theme-native": "Native",
+  "settings-tray": "Minimize to tray",
+  "settings-patches": "Automatic Patches",
+  "settings-channel": "Discord channel:",
+  "settings-invitewebsocket": "discord.gg support",
+  "settings-mod": "Client mod:",
+  "settings-save": "Save settings",
+  "settings-updater": "Check for updates"
+}

assets/lang/fr-FR.json

@@ -0,0 +1,28 @@
+{
+    "loading_screen_start": "Démarrage d'ArmCord…",
+    "loading_screen_update": "Une nouvelle version de ArmCord est disponible. Veuillez mettre à jour la dernière version.",
+    "setup_question1": "Sélectionnez le type de configuration que vous souhaitez effectuer :",
+    "setup_question1_answer1": "Configuration express",
+    "setup_question1_answer2": "Configuration complète",
+    "setup_question2": "Choisissez votre canal/instance Discord :",
+    "setup_question3": "ArmCord doit-il s'occuper de l'installation des mods clients ?",
+    "yes": "Oui",
+    "no": "Non",
+    "next": "Suivant",
+    "setup_question4": "Sélectionnez le mod client que vous souhaitez installer :",
+    "setup_question4_clientmodnotice": "Pourquoi pas tous ? Le fait d'avoir plusieurs mods clients en même temps peut causer des problèmes. Si vous voulez vraiment le faire, consultez notre documentation.",
+    "loading_screen_offline": "Vous semblez être hors ligne. Veuillez vous connecter à internet et réessayer.",
+    "setup_offline": "Vous semblez être hors ligne. Veuillez vous connecter à internet et redémarrer ArmCord Setup.",
+    "settings-tray": "Minimize to tray",
+    "settings-channel": "Discord channel:",
+    "settings-mod": "Client mod:",
+    "settings-save": "Save settings",
+    "settings-updater": "Check for updates",
+    "settings-theme": "ArmCord Theme:",
+    "settings-theme-tabs": "Tabs (experimental)",
+    "settings-theme-default": "Default",
+    "settings-theme-glasstron": "Glasstron (experimental)",
+    "settings-theme-native": "Native",
+    "settings-patches": "Automatic Patches",
+    "settings-invitewebsocket": "discord.gg support"
+}

assets/lang/it-IT.json

@@ -0,0 +1,28 @@
+{
+    "loading_screen_update": "Una nuova versione di ArmCord è disponibile. Per favore aggiorna all'ultima versione.",
+    "setup_question1_answer1": "Configurazione veloce",
+    "loading_screen_start": "Avviando Armcord…",
+    "loading_screen_offline": "Sembri essere offline. Per favore connettiti all'Internet e riprova.",
+    "setup_question1": "Seleziona quale tipo di setup vuoi eseguire:",
+    "setup_question2": "Seleziona il tuo canale/istanza di Discord:",
+    "setup_question3": "ArmCord dovrebbe gestire l'installazione di client mod?",
+    "yes": "Sì",
+    "no": "No",
+    "next": "Avanti",
+    "setup_question4": "Seleziona una client mod che vuoi installare:",
+    "setup_question1_answer2": "Configurazione completa",
+    "setup_offline": "Sembri essere offline. Per favore connettiti all'Internet e riavvia la configurazione di ArmCord.",
+    "setup_question4_clientmodnotice": "Perché non tutti? Avere molte client mod allo stesso tempo puo causare problemi. Se davvero vuoi farlo, vedi la nostra documentazione.",
+    "settings-tray": "Riduci ad icona",
+    "settings-channel": "Canale Discord:",
+    "settings-save": "Salva impostazioni",
+    "settings-updater": "Controlla gli aggiornamenti",
+    "settings-mod": "Client mod:",
+    "settings-theme": "ArmCord Theme:",
+    "settings-theme-glasstron": "Glasstron (experimental)",
+    "settings-theme-tabs": "Tabs (experimental)",
+    "settings-theme-default": "Default",
+    "settings-theme-native": "Native",
+    "settings-patches": "Automatic Patches",
+    "settings-invitewebsocket": "discord.gg support"
+}

assets/lang/nb-NO.json

@@ -0,0 +1,28 @@
+{
+    "loading_screen_start": "Starter ArmCord …",
+    "loading_screen_offline": "Koble til Internett og prøv igjen.",
+    "loading_screen_update": "En ny versjon av ArmCord er tilgjengelig. Oppgrader til siste versjon.",
+    "setup_question1": "Velg hvilket oppsett du ønsker å utføre:",
+    "setup_question1_answer2": "Fullt oppsett",
+    "setup_question2": "Velg din Discor-kanal/instans:",
+    "yes": "Ja",
+    "no": "Nei",
+    "setup_question1_answer1": "Hurtigoppsett",
+    "setup_question3": "Skal ArmCord håndtere installasjon av klient-modifikasjoner?",
+    "setup_offline": "Koble til Internett og start ArmCord-oppsett på ny.",
+    "next": "Neste",
+    "setup_question4": "Velg en klient-modifikasjon du ønsker å installere:",
+    "setup_question4_clientmodnotice": "Hvorfor ikke alle? Å ha mange klient-modifikasjoner samtidig kan forårsake problemer. Hvis du vil gjøre det likevel bør du lese dokumentasjonen vår.",
+    "settings-tray": "Minimize to tray",
+    "settings-channel": "Discord channel:",
+    "settings-mod": "Client mod:",
+    "settings-save": "Save settings",
+    "settings-updater": "Check for updates",
+    "settings-theme": "ArmCord Theme:",
+    "settings-theme-glasstron": "Glasstron (experimental)",
+    "settings-theme-tabs": "Tabs (experimental)",
+    "settings-theme-default": "Default",
+    "settings-theme-native": "Native",
+    "settings-patches": "Automatic Patches",
+    "settings-invitewebsocket": "discord.gg support"
+}

assets/lang/nl-NL.json

@@ -0,0 +1,28 @@
+{
+    "setup_question1": "Selecteer wat voor soort setup je wilt starten:",
+    "setup_question1_answer1": "Express setup",
+    "setup_question1_answer2": "Volledige setup",
+    "setup_question3": "Moet ArmCord client mods installeren?",
+    "yes": "Ja",
+    "no": "Nee",
+    "setup_offline": "Het lijkt erop alsof je offline bent. Verbind met het Internet en herstart ArmCord setup.",
+    "loading_screen_start": "ArmCord starten…",
+    "next": "Volgende",
+    "setup_question4": "Selecteer een client mod om te installeren:",
+    "setup_question4_clientmodnotice": "Waarom niet allemaal? Meerdere client mods installeren kan problemen veroorzaken. Als je dit echt wilt doen, kan je de documentatie bekijken.",
+    "loading_screen_offline": "Het lijkt erop alsof je offline bent. Verbind met het Internet en probeer opnieuw.",
+    "loading_screen_update": "Een nieuwe versie van ArmCord is beschikbaar. Update alstublieft naar de nieuwste versie.",
+    "setup_question2": "Kies je Discord kanaal/instantie:",
+    "settings-tray": "Minimaliseer naar pictogram in het systeemvak",
+    "settings-channel": "Discord kanaal:",
+    "settings-mod": "Client mod:",
+    "settings-save": "Instellingen opslaan",
+    "settings-updater": "Check voor updates",
+    "settings-patches": "Automatische Patches",
+    "settings-theme": "ArmCord Thema:",
+    "settings-theme-glasstron": "Glasstron (experimenteel)",
+    "settings-theme-tabs": "Tabs (experimenteel)",
+    "settings-theme-default": "Standaard",
+    "settings-theme-native": "Native",
+    "settings-invitewebsocket": "discord.gg support"
+}

assets/lang/pl-PL.json

@@ -0,0 +1,28 @@
+{
+    "loading_screen_update": "Nowa wersja ArmCord jest dostępna. Proszę zaktualizować aplikację do najnowszej wersji.",
+    "setup_question1_answer2": "Pełna konfiguracja",
+    "setup_question2": "Wybierz swój kanał/odmianę Discorda:",
+    "setup_question3": "Czy ArmCord powinienem zajmować sie instalacją modyfikacji klienta?",
+    "yes": "Tak",
+    "no": "Nie",
+    "next": "Dalej",
+    "setup_question4": "Wybierz modyfikację klienta którą chcesz zainstalować:",
+    "setup_question4_clientmodnotice": "Dlaczego nie wszystkie na raz? Posiadanie wielu modyfikacji może spowodować wiele błędów. Jeśli jednak nalegasz możesz sprawdzić naszą dokumentację.",
+    "loading_screen_start": "Ładowanie ArmCord…",
+    "loading_screen_offline": "Wydaje nam się, że nie jesteś połączony z Internetem. Połącz się z internetem i spróbuj ponownie.",
+    "setup_question1_answer1": "Ekspresowa konfiguracja",
+    "setup_question1": "Wybierz w jaki sposób chcesz skonfigurować ArmCord:",
+    "setup_offline": "Wydaje nam się że nie jesteś połączony z internetem. Połącz się z internetem i uruchom ponownie konfiguracje ArmCord .",
+    "settings-channel": "Kanał Discorda:",
+    "settings-updater": "Sprawdź aktualizacje",
+    "settings-tray": "Zminimalizuj do zasobnika zadań",
+    "settings-save": "Zapisz ustawienia",
+    "settings-mod": "Modyfikacja klienta:",
+    "settings-theme": "Motyw ArmCord:",
+    "settings-theme-glasstron": "Glasstron (eksperymentalne)",
+    "settings-theme-tabs": "Karty (eksperymentalne)",
+    "settings-theme-default": "Domyślny",
+    "settings-theme-native": "Natywny",
+    "settings-patches": "Automatyczne łatki",
+    "settings-invitewebsocket": "Wsparcie linków discord.gg"
+}

src/content/css/setup.css

@@ -1,91 +1,148 @@
-/*CSS ONLY FOR INTERNAL USE (setup and loading)*/
 @import url("https://armcord.smartfridge.space/logofont.css");
 
+/* Meta {{{ */
 :root {
-    background-color: #2c2f33 !important;
-    --header-secondary: #b9bbbe !important;
-    --header-primary: #fff !important;
-    --background-tertiary: #202225 !important;
+    --background-primary: #282b30;
+    --background-secondary: rgba(255, 255, 255, 0.1);
+    --brand-experiment: #7289da;
+    --header-primary: #fff;
+    --text-muted: #72767d;
+    --font-primary: "Whitney";
 }
+
+@font-face {
+    font-family: Whitney;
+    font-weight: 400;
+    font-style: normal;
+    src: url(https://armcord.smartfridge.space/whitney_400.woff) format("woff");
+}
+
+html,
 body {
-    background-color: #2c2f33;
-    color: white;
+    overflow: hidden;
+
+    margin: 0;
+    padding-top: 30px;
+    width: 100%;
+    height: 100%;
+
+    background: var(--background-primary);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
-p {
-    color: white;
+* {
+    font-family: var(--font-primary), sans-serif;
+
+    box-sizing: border-box;
+    user-select: none;
+    cursor: default;
+}
+/* }}} */
+
+/* Utility classes {{{ */
+.hidden {
+    display: none !important;
+}
+.text-center {
     text-align: center;
-    font-weight: 100;
-    font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
-    text-rendering: optimizeLegibility;
-}
-
-.logo {
-    font-size: 0px;
-    text-align: center;
-    transform: translateY(-105%);
-}
-
-.logo:before {
-    content: "ARM";
-    color: #7289da;
-    font-weight: normal;
-    font-family: Helvetica, sans-serif;
-    font-size: 32px;
-}
-
-.logo:after {
-    content: "Cord";
-    color: #ffffff;
-    font-weight: normal;
-    font-family: Discordinated;
-    font-size: 32px;
-}
-
-span {
-    text-align: center;
-}
-
-.logo {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    max-height: 204px;
-    max-width: 204px;
-    transform: translateY(5%);
-}
-
-.container {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    color: #fff;
-    transform: translate(-50%, -50%);
-}
-button#express {
-    margin-right: 84px;
-}
-button {
-    background-color: #7289da;
-    font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #ffffff;
-    padding: 4px;
-    border-radius: 5px;
-    margin-top: 5px;
-
-    text-align: center;
-    border-style: none;
-    outline: none;
 }
 .setup-ask {
     font-size: 20px;
 }
+
+.center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+/* }}} */
+
+#setup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    color: white;
+}
+
+/* Warning {{{ */
+#warning {
+    font-size: 1.5em;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    max-width: 328px;
+    background-color: rgba(255, 0, 0, 0.1);
+
+    border: red solid 2px;
+    border-radius: 0.5rem;
+}
+#warning > p {
+    color: white;
+    font-weight: bold;
+    margin: 1rem;
+}
+/* }}} */
+
+/* Logo {{{ */
+#logo {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+#logo p:first-child {
+    color: #7289da;
+    margin: 0;
+    font-weight: normal;
+    font-family: Helvetica, sans-serif;
+    font-size: 32px;
+}
+#logo p:last-child {
+    color: white;
+    margin: 0;
+    font-weight: normal;
+    font-family: Discordinated;
+    font-size: 32px;
+}
+/* }}} */
+
+/* Buttons {{{ */
+#buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+
+    user-select: all !important;
+
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+button {
+    background: var(--brand-experiment);
+    color: var(--header-primary);
+
+    border: none;
+    border-radius: 4px;
+
+    padding: 8px 20px;
+}
 button:hover {
-    background-color: #687dc6;
-    border-style: none;
-    outline: none;
+    filter: brightness(85%);
     cursor: pointer;
 }
+/* }}} */
+
+/* Dropdowns {{{ */
 select {
     -webkit-appearance: button;
     -moz-appearance: button;
@@ -106,6 +163,4 @@ select {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.center {
-    text-align: center;
-}
+/* }}} */

src/content/setup.html

@@ -1,62 +1,33 @@
-<!--- This is awful and should be replaced in later versions. Possibly based of current settings as of 3.1.0 version. If you have time please PR a better setup screen. --->
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css" />
         <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>ArmCord Setup</title>
         <style>
             @import url("css/setup.css");
         </style>
     </head>
-
     <body>
         <div class="container">
-            <h1 class="logo"></h1>
+            <div id="warning" class="hidden">
+                <p>You appear to be offline. Please connect to the internet and restart ArmCord Setup.</p>
+            </div>
             <div id="setup">
-                <p>Select what kind of setup you want to perform:</p>
-                <button id="express" class="center">Express setup</button>
-                <button id="full" class="center">Full setup</button>
+                <div id="logo" class="hidden">
+                    <p>ARM</p>
+                    <p>Cord</p>
+                </div>
+                <div id="page1" class="hidden">
+                    <p>Select the type of setup you want to perform.</p>
+                    <div id="buttons">
+                        <button id="express" class="center">Express</button>
+                        <button id="full" class="center">Full</button>
                     </div>
                 </div>
-        <script>
-            function fade(element) {
-                var op = 1; // initial opacity
-                var timer = setInterval(function () {
-                    if (op <= 0.1) {
-                        clearInterval(timer);
-                        element.style.display = "none";
-                    }
-                    element.style.opacity = op;
-                    element.style.filter = "alpha(opacity=" + op * 100 + ")";
-                    op -= op * 0.1;
-                }, 50);
-            }
 
-            if (window.navigator.onLine === false) {
-                document.getElementById("setup").innerHTML =
-                    "You appear to be offline. Please connect to the internet and restart ArmCord Setup.";
-            } else {
-                console.log("Starting ArmCord Setup...");
-                document.getElementById("express").addEventListener("click", function () {
-                    window.armcordinternal.saveSettings({
-                        windowStyle: "default",
-                        channel: "stable",
-                        armcordCSP: true,
-                        minimizeToTray: true,
-                        automaticPatches: false,
-                        mods: "cumcord",
-                        blurType: "acrylic",
-                        inviteWebsocket: true,
-                        doneSetup: true
-                    });
-                    fade(document.getElementById("setup"));
-                    setTimeout(function () {
-                        window.armcordinternal.restart();
-                    }, 5000);
-                });
-                document.getElementById("full").addEventListener("click", function () {
-                    document.getElementById("setup").innerHTML = `
+                <div id="page2" class="hidden">
                     <p class="text-center setup-ask">Choose your Discord channel/instance:</p>
                     <div class="center">
                         <select name="channel" id="channel" class="dropdown-button">
@@ -73,13 +44,12 @@
                             <option value="false">No</option>
                         </select>
                     </div>
+                    <div id="buttons">
                         <button id="next" class="center">Next</button>
-      `;
-                    document.getElementById("next").addEventListener("click", function () {
-                        var branch = document.getElementById("channel").value;
-                        var csp = document.getElementById("csp").value;
-                        if (csp === "true") {
-                            document.getElementById("setup").innerHTML = `
+                    </div>
+                </div>
+
+                <div id="page3" class="hidden">
                     <p class="text-center setup-ask">Select a client mod you want to install:</p>
                     <div class="center">
                         <select name="mod" id="mod" class="dropdown-button">
@@ -88,47 +58,93 @@
                             <option value="flicker">Flicker (Heavily WIP)</option>
                         </select>
                     </div>
-      <p>Why not all of them? Having many client mods at the same time can cause issues. If you really want to do it though, check our documentation ;)</p>
+                    <p>
+                        Why not all of them? Having many client mods at the same time can cause issues. If you really
+                        want to do it though, check our documentation ;)
+                    </p>
+                    <div id="buttons">
                         <button id="next" class="center">Next</button>
-      `;
-                            document.getElementById("next").addEventListener("click", function () {
-                                var mod = document.getElementById("mod").value;
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            // Accessors {{{
+            let options = {};
+
+            let logo = document.getElementById("logo");
+            logo.classList.remove("hidden");
+
+            let page1 = document.getElementById("page1");
+            page1.classList.remove("hidden");
+            page1.buttons = document.querySelectorAll("#page1 > #buttons > button");
+
+            // Connection check
+            let warning = document.getElementById("warning");
+            if (window.navigator.onLine === false) {
+                warning.classList.remove("hidden");
+            }
+
+            let page2 = document.getElementById("page2");
+            let page3 = document.getElementById("page3");
+            // }}}
+
+            // Express
+            page1.buttons[0].addEventListener("click", () => {
                 window.armcordinternal.saveSettings({
                     windowStyle: "default",
-                                    channel: branch,
+                    channel: "stable",
                     armcordCSP: true,
                     minimizeToTray: true,
                     automaticPatches: false,
-                                    mods: mod,
-                                    blurType: "acrylic",
-                                    inviteWebsocket: true,
-                                    doneSetup: true
+                    mods: "cumcord",
+                    blurType: "acrylic"
                 });
-                                fade(document.getElementById("setup"));
-                                setTimeout(function () {
-                                    window.armcordinternal.restart();
-                                }, 5000);
+                setTimeout(() => window.armcordinternal.restart(), 5000);
+            });
+
+            // Full
+            page1.buttons[1].addEventListener("click", () => {
+                page1.classList.add("hidden");
+                page2.classList.remove("hidden");
+            });
+
+            page2.buttons = document.querySelectorAll("#page2 > #buttons > button");
+            page2.buttons[0].addEventListener("click", () => {
+                options.channel = document.getElementById("channel").value;
+                options.csp = document.getElementById("csp").value;
+                page2.classList.add("hidden");
+
+                page3.buttons = document.querySelectorAll("#page3 > #buttons > button");
+                if (options.csp === "true") {
+                    page3.classList.remove("hidden");
+                    page3.buttons[0].addEventListener("click", () => {
+                        options.mod = document.getElementById("mod").value;
+                        window.armcordinternal.saveSettings({
+                            windowStyle: "default",
+                            channel: options.channel,
+                            armcordCSP: true,
+                            minimizeToTray: true,
+                            automaticPatches: false,
+                            mods: options.mod,
+                            blurType: "acrylic"
+                        });
+                        setTimeout(() => window.armcordinternal.restart(), 500);
                     });
                 } else {
                     window.armcordinternal.saveSettings({
                         windowStyle: "default",
-                                channel: branch,
+                        channel: options.channel,
                         armcordCSP: true,
                         minimizeToTray: true,
                         automaticPatches: false,
                         mods: "none",
-                                blurType: "acrylic",
-                                inviteWebsocket: true,
-                                doneSetup: true
+                        blurType: "acrylic"
                     });
-                            fade(document.getElementById("setup"));
-                            setTimeout(function () {
-                                window.armcordinternal.restart();
-                            }, 5000);
+                    setTimeout(() => window.armcordinternal.restart(), 500);
                 }
             });
-                });
-            }
         </script>
     </body>
 </html>

src/window.ts

@@ -68,8 +68,8 @@ async function doAfterDefiningTheWindow() {
 }
 export function createCustomWindow() {
     mainWindow = new BrowserWindow({
-        width: 300,
-        height: 350,
+        width: 390,
+        height: 470,
         title: "ArmCord",
         darkTheme: true,
         icon: path.join(__dirname, "/assets/icon_transparent.png"),