From b959d35ee902d1826c779f07940e7f8a6059d283 Mon Sep 17 00:00:00 2001 From: Quentin Legot Date: Sun, 19 Sep 2021 17:31:08 +0200 Subject: [PATCH] added vue as front-end framework --- .gitignore | 1 + README.md | 5 - package-lock.json | 5 + package.json | 3 +- src/client/assets/css/index.css | 8 +- src/client/assets/css/menubar.css | 5 + src/client/assets/js/index.js | 197 ++++++++++++++---------------- src/client/assets/js/login.js | 70 ++++++----- src/client/assets/js/script.js | 2 + src/client/index.html | 93 +++++++------- src/client/login.html | 48 ++++---- src/server/main.js | 9 +- src/server/minecraft.js | 48 +++++--- 13 files changed, 259 insertions(+), 235 deletions(-) diff --git a/.gitignore b/.gitignore index 938aeb4..33d1e70 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ game out/ .vscode/ *.code-workspace +.idea \ No newline at end of file diff --git a/README.md b/README.md index cfef71a..a39f1cb 100644 --- a/README.md +++ b/README.md @@ -1,6 +1 @@ # Launcher - -## Dependencies - -- -- diff --git a/package-lock.json b/package-lock.json index a446496..d451316 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7500,6 +7500,11 @@ "extsprintf": "^1.2.0" } }, + "vue": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz", + "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==" + }, "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index 329a435..1e60f8b 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,8 @@ "extract-zip": "^2.0.1", "hasha": "^5.2.2", "minecraft-launcher-core": "^3.16.8", - "msmc": "^2.2.1" + "msmc": "^2.2.1", + "vue": "^2.6.14" }, "config": { "forge": "./config.forge.js" diff --git a/src/client/assets/css/index.css b/src/client/assets/css/index.css index 2b182fa..4aa3fed 100644 --- a/src/client/assets/css/index.css +++ b/src/client/assets/css/index.css @@ -148,7 +148,6 @@ h3 { width: 100%; height: calc(100% - 28px); background-color: rgba(0, 0, 0, 0.6); - display: none; z-index: 10; } @@ -212,3 +211,10 @@ h3 { border-width:0; border-top: 1px solid black; } + +/* .slider { + min-width: 60%; + position:relative; + left:50%; + transform: translateX(-50%); +} */ \ No newline at end of file diff --git a/src/client/assets/css/menubar.css b/src/client/assets/css/menubar.css index 5cc61b8..92422f4 100644 --- a/src/client/assets/css/menubar.css +++ b/src/client/assets/css/menubar.css @@ -64,4 +64,9 @@ .material-icons{ position: relative; top: 2px; +} + +#vue { + width: 100vw; + height: 100vh; } \ No newline at end of file diff --git a/src/client/assets/js/index.js b/src/client/assets/js/index.js index 430c637..c5e7c24 100644 --- a/src/client/assets/js/index.js +++ b/src/client/assets/js/index.js @@ -1,143 +1,126 @@ const os = require('os') -const launchBtn = document.querySelector('#launch-btn') -const launchText = document.querySelector("#launch-text") -const fullProgressBar = document.querySelector('#fullprogressbar') -const progressBar = document.querySelector('#progressbar') -const loadingMessage = document.querySelector('#loading-message') -const disconnectBtn = document.querySelector('#disconnect-btn') -const fullscreen = document.querySelector('#fullscreen') -const minMem = document.querySelector('#minMem') -const maxMem = document.querySelector('#maxMem') -const outputMinMem = document.querySelector('#outputMinMem') -const outputMaxMem = document.querySelector('#outputMaxMem') const totalMem = os.totalmem() / (1.049 * Math.pow(10, 6)) + +let app = new vue({ + el: "#vue", + data: { + minMemValue: localStorage.getItem("minMem") != null ? localStorage.getItem("minMem") : 1024 , + maxMemValue: localStorage.getItem("maxMem") != null ? localStorage.getItem("maxMem") : 2048, + memStep: 128, + memMax: totalMem, + invalidateButtonText: "Supprimer et retélécharger les bibliothèques", + invalidateButtonDisabled: false, + displayFullscreen: "none", + nick: "Chargement", + launchBtnText: "Selectionnez un chapitre", + launchBtnDisable: true, + launchBtnHidden: false, + loadingMessageHidden: true, + loadingMessageText: "Téléchargement de Minecraft en cours...", + fullprogressbarHidden: true, + progressbarWidth: 0, + sidebarContent: "

Chargement en cours

" + }, + mounted: function () { + this.demandModsInformations() + }, + methods: { + invalidateData: function () { + this.invalidateButtonDisabled = true + this.invalidateButtonText = "Opération en cours" + ipcRenderer.send('invalidateData') + }, + launchBtnClick: function () { + this.launchBtnHidden = true + this.fullprogressbarHidden = false + app.loadingMessageHidden = false + if(Number(this.minMemValue) <= Number(this.maxMemValue)){ + ipcRenderer.send('launch', { + minMem: this.minMemValue + "M", + maxMem: this.maxMemValue + "M", + chapter: selectedChapter + }) + app.launchBtnDisable = true + localStorage.setItem("minMem", this.minMemValue) + localStorage.setItem("maxMem", this.maxMemValue) + gameLaunching = true + } else{ + ipcRenderer.send('notification', { + title: "Erreur de lancement", + body: "La mémoire minimale doit être inférieure ou égale à la mémoire maximale" + }) + } + }, + disconnectBtn: function () { + ipcRenderer.send('disconnect') + }, + options: function () { + if(!gameLaunching) + this.displayFullscreen = "block" + }, + discord: () => shell.openExternal("https://discord.gg/b923tMhmRE"), + web: () => shell.openExternal("https://altarik.fr"), + closeFullscreen: function () { + this.displayFullscreen = "none" + }, + demandModsInformations: function () { + ipcRenderer.send('demandModsInformations') + } + } +}) + const sidebar = document.querySelector("#sidebar-content") -const invalidateButton = document.querySelector("#invalidateData") let gameLaunching = false let selectedChapter = -1; -document.body.onload = () => { - minMem.max = totalMem - maxMem.max = totalMem - minMem.value = localStorage.getItem("minMem") != null ? localStorage.getItem("minMem") : 1024 - outputMinMem.textContent = minMem.value - maxMem.value = localStorage.getItem("maxMem") != null ? localStorage.getItem("maxMem") : 2048 - outputMaxMem.textContent = maxMem.value - demandModsInformations() -} - -ipcRenderer.on("nick", (event, args) => { - console.log(args) - document.querySelector("#nick").innerHTML = args.name -}) - -launchBtn.addEventListener("click", e => { - launchText.classList.add('hidden') - fullProgressBar.classList.remove('hidden') - loadingMessage.classList.remove('hidden') - if(Number(minMem.value) <= Number(maxMem.value)){ - ipcRenderer.send('launch', { - minMem: minMem.value + "M", - maxMem: maxMem.value + "M", - chapter: selectedChapter - }) - launchBtn.disabled = true - localStorage.setItem("minMem", minMem.value) - localStorage.setItem("maxMem", maxMem.value) - gameLaunching = true - } else{ - ipcRenderer.send('notification', { - title: "Erreur de lancement", - body: "La mémoire minimale doit être inférieure ou égale à la mémoire maximale" - }) - } - -}) - -document.querySelector("#web").addEventListener("click", e => { - shell.openExternal("https://altarik.fr") -}) - -document.querySelector("#options").addEventListener("click", e => { - if(!gameLaunching) - fullscreen.style.display = "block" -}) - -document.querySelector("#discord").addEventListener("click", e => { - shell.openExternal("https://discord.gg/b923tMhmRE") -}) - -document.querySelector("#close").addEventListener("click", e => { - fullscreen.style.display = "none" -}); - -invalidateButton.addEventListener("click", e => { - invalidateButton.disabled = true - invalidateButton.childNodes[0].nodeValue = "Opération en cours" - ipcRenderer.send('invalidateData') -}) +ipcRenderer.on("nick", (_, args) => app.nick = args.name) ipcRenderer.on("invalidated", e => { - invalidateButton.disabled = false - invalidateButton.childNodes[0].nodeValue = "Supprimer et retélécharger les bibliothèques" + app.invalidateButtonDisabled = false + app.invalidateButtonText = "Supprimer et retélécharger les bibliothèques" }) ipcRenderer.on("progress", (e, args) => { - progressBar.style.width = (args.task / Math.max(args.total, args.task)) * 100 + "%" - loadingMessage.innerHTML = "Téléchargement de " + args.type + ": " + args.task + " sur " + Math.max(args.total, args.task) + app.progressbarWidth = (args.task / Math.max(args.total, args.task)) * 100 + app.loadingMessageText = "Téléchargement de " + args.type + ": " + args.task + " sur " + Math.max(args.total, args.task) }) -ipcRenderer.on("close", (e, args) => { - launchText.classList.remove('hidden') - fullProgressBar.classList.add('hidden') - loadingMessage.classList.add('hidden') - loadingMessage.innerHTML = "Chargement de Minecraft en cours..." - progressBar.style.width = "0" - launchBtn.disabled = false +ipcRenderer.on("close", (_e, _args) => { + app.launchBtnHidden = false + app.fullprogressbarHidden = true + app.loadingMessageHidden = true + app.loadingMessageText = "Chargement de Minecraft en cours..." + app.progressbarWidth = 0 + app.launchBtnDisable = false gameLaunching = false }) -ipcRenderer.on('launch', (e, args) => { - fullProgressBar.classList.add('hidden') - loadingMessage.classList.add('hidden') +ipcRenderer.on('launch', (_e, _args) => { + app.fullprogressbarHidden = true + app.loadingMessageText = true }) ipcRenderer.on("modsInformations", (e, args) => { + console.log(args) if(args === null) { - sidebar.innerHTML = "

Une erreur est survenue lors de la récupération des informations, vérifiez votre connexion internet puis cliquez sur réessayez

" - + "" + app.sidebarContent = "

Une erreur est survenue lors de la récupération des informations, vérifiez votre connexion internet puis cliquez sur réessayez

" + + "" } else { let element = "" for(const i in args) { element += `

${args[i].title}

${args[i].description}

` } - sidebar.innerHTML = element + app.sidebarContent = element } }) -function demandModsInformations() { - ipcRenderer.send('demandModsInformations') -} - function changeSelectedChapter(element) { selectedChapter = Number(element.dataset.chapter) document.querySelectorAll("#sidebar-content > div").forEach((v, key) => { v.classList.remove("selected") }) element.classList.add("selected") - launchText.innerHTML = "JOUER" - launchBtn.disabled = false + app.launchBtnText = "JOUER" + app.launchBtnDisable = false } - -disconnectBtn.addEventListener('click', e => { - ipcRenderer.send('disconnect') -}) - -minMem.addEventListener("input", e => { - outputMinMem.textContent = e.target.value -}) - -maxMem.addEventListener("input", e => { - outputMaxMem.textContent = e.target.value -}) \ No newline at end of file diff --git a/src/client/assets/js/login.js b/src/client/assets/js/login.js index a5f1f87..8bd73e1 100644 --- a/src/client/assets/js/login.js +++ b/src/client/assets/js/login.js @@ -1,36 +1,50 @@ + + +let app = new vue({ + el: "#vue", + data: { + login: "Connexion", + email: "Email", + password: "Mot de passe", + send_credentials: "Se connecter", + microsoft_button: "Connexion avec un compte Microsoft" + }, + methods: { + formSubmit: (e) => { + e.preventDefault() + if(!microsoftButton.disabled) { + form.disabled = true + if(user.value) { + ipcRenderer.send("login", { + user: user.value, + pass: password.value + }) + }else{ + ipcRenderer.send("notification", { + title: "error", + body: "Veuillez entrer des identifiants" + }) + } + } + }, + microsoftButton: (e) => { + e.preventDefault() + if(!form.disabled) { + microsoftButton.disabled = true + form.disabled = true + ipcRenderer.send("microsoft-login") + } + } + } +}); + +// theirs const are declared after vue cause vue modify them when declaring new vue instance const form = document.querySelector('#login-form') const user = document.querySelector('#nickname') const password = document.querySelector('#password') const microsoftButton = document.querySelector("#microsoft-button") -form.addEventListener("submit", (e) => { - e.preventDefault() - if(!microsoftButton.disabled) { - form.disabled = true - if(user.value) { - ipcRenderer.send("login", { - user: user.value, - pass: password.value - }) - }else{ - ipcRenderer.send("notification", { - title: "error", - body: "Veuillez entrer des identifiants" - }) - } - } -}) - -microsoftButton.addEventListener("click", (e) => { - e.preventDefault() - if(!form.disabled) { - microsoftButton.disabled = true - form.disabled = true - ipcRenderer.send("microsoft-login") - } -}) - -ipcRenderer.on("loginError", event => { +ipcRenderer.on("loginError", () => { form.disabled = false microsoftButton.disabled = false }) \ No newline at end of file diff --git a/src/client/assets/js/script.js b/src/client/assets/js/script.js index 8cd26f8..78d88e3 100644 --- a/src/client/assets/js/script.js +++ b/src/client/assets/js/script.js @@ -1,5 +1,7 @@ 'use strict'; const { ipcRenderer, shell } = require('electron'); +// const isDev = require("electron-is-dev") +const vue = require(/*isDev ? */ 'vue/dist/vue'/* : 'vue' */) window.addEventListener("DOMContentLoaded", () => { const minimizeButton = document.getElementById("minimize-btn") diff --git a/src/client/index.html b/src/client/index.html index ebb48d6..4e06c6e 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -3,66 +3,65 @@ Altarik Launcher - + - -
-
close
-
-

Modifier la configuration

- Se déconnecter -

Allocation mémoire

-
-
-
-
-

Au secours, mon jeu ne démarre pas

- +
+ -
-
-