Start fixing js files to fit to vue v3

src/client/assets/js/index.js

@@ -1,9 +1,9 @@
 const os = require('os')
 const totalMem = os.totalmem() / (1.049 * Math.pow(10, 6))
 
-let app = new vue({
+app = vue.createApp({
-    el: "#vue",
+    data() {
-    data: {
+        return {
             minMemValue: localStorage.getItem("minMem") != null ? localStorage.getItem("minMem") : 1024 ,
             maxMemValue: localStorage.getItem("maxMem") != null ? localStorage.getItem("maxMem") : 2048,
             memStep: 128,
@@ -20,11 +20,12 @@ let app = new vue({
             fullprogressbarHidden: true,
             progressbarWidth: 0,
             sidebarContent: "<hr><p>Chargement en cours</p>",
-        notificationTitle: "",
+            modsInformations: [],
-        notificationMessage: ""
+            modsInformationsLoaded: true
+        }
+        
     },
-    mounted: function () {
+    mounted () {
-        this.demandModsInformations()
         iziToast.settings({
             close: false,
             closeOnClick: true,
@@ -32,9 +33,19 @@ let app = new vue({
             position: 'topRight',
             resetOnHover: true,
         })
+        ipcRenderer.on("modsInformations", (e, args) => {
+            console.log("loaded")
+            if(args === null) {
+                this.modsInformationsLoaded = false
+            } else {
+                this.modsInformationsLoaded = true
+            }
+            this.updateModsInformations(args)
+        })
+        ipcRenderer.on("nick", (_, args) => root.nick = args.name)
     },
     methods: {
-        invalidateData: function () {
+        invalidateData () {
             this.invalidateButtonDisabled = true
             this.invalidateButtonText = "Opération en cours"
             this.notificationTitle = "Opération en cours"
@@ -42,115 +53,108 @@ let app = new vue({
             this.showInfo()
             ipcRenderer.send('invalidateData')
         },
-        launchBtnClick: function () {
+        launchBtnClick () {
             this.launchBtnHidden = true
             this.fullprogressbarHidden = false
-            app.loadingMessageHidden = false
+            this.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
+                this.launchBtnDisable = true
                 localStorage.setItem("minMem", this.minMemValue)
                 localStorage.setItem("maxMem", this.maxMemValue)
                 gameLaunching = true
             } else {
-                app.notificationTitle = "Erreur de lancement"
+                this.showError("Erreur de lancement", "La mémoire minimale doit être inférieure ou égale à la mémoire maximale.")
-                app.notificationMessage = "La mémoire minimale doit être inférieure ou égale à la mémoire maximale."
-                this.showError()
             }
         },
-        disconnectBtn: function () {
+        disconnectBtn () {
             ipcRenderer.send('disconnect')
         },
-        options: function () {
+        options () {
             if(!gameLaunching)
                 this.displayFullscreen = "block"
         },
-        discord: () => shell.openExternal("https://discord.gg/b923tMhmRE"),
+        discord() {
-        web: () => shell.openExternal("https://altarik.fr"),
+            shell.openExternal("https://discord.gg/b923tMhmRE") }
-        closeFullscreen: function () {
+            ,
+        web() {
+            shell.openExternal("https://altarik.fr")
+        },
+        closeFullscreen () {
             this.displayFullscreen = "none"
         },
-        demandModsInformations: function () {
+        updateModsInformations(content) {
-            ipcRenderer.send('demandModsInformations')
+            this.modsInformations = content
+            nextTick(() => {})
         },
-        showInfo: function () {
+        getModsInformations() {
+            return this.modsInformations
+        },
+        showInfo(title, body) {
             iziToast.info({
-                title: this.notificationTitle,
+                title: title,
-                message: this.notificationMessage,
+                message: body,
+                color: 'blue'
             })
         },
-        showError: function() {
+        showError(title, body) {
-            iziToast.show({
+            iziToast.error({
-                title: this.notificationTitle,
+                title: title,
-                message: this.notificationMessage,
+                message: body,
-                color: 'red'
+                color: 'red',
-
             })
         },
-        showWarning: function() {
+        showWarning(title, body) {
             iziToast.warning({
-                title: this.notificationTitle,
+                title: title,
-                message: this.notificationMessage,
+                message: body,
+                color: 'yellow'
             })
         },
-        showSuccess: function () {
+        showSuccess(title, body) {
             iziToast.success({
-                title: this.notificationTitle,
+                title: title,
-                message: this.notificationMessage,
+                message: body,
+                color: 'green'
             })
         }
     }
 })
+
+let root = app.mount("#vue")
+
 let gameLaunching = false
 
 let selectedChapter = -1;
 
-ipcRenderer.on("nick", (_, args) => app.nick = args.name)
-
 ipcRenderer.on("invalidated", () => {
-    app.invalidateButtonDisabled = false
+    root.invalidateButtonDisabled = false
-    app.invalidateButtonText = "Supprimer et retélécharger les bibliothèques"
+    root.invalidateButtonText = "Supprimer et retélécharger les bibliothèques"
-    app.notificationTitle = "Opération terminée"
+    root.showSuccess("Opération terminée", "Les données du jeu ont été supprimé avec succès")
-    app.notificationMessage = "Les données du jeu ont été supprimé avec succès"
-    app.showSuccess()
 })
 
 ipcRenderer.on("progress", (e, args) => {
-    app.progressbarWidth =  (args.task / Math.max(args.total, args.task)) * 100
+    root.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)
+    root.loadingMessageText =  "Téléchargement de " + args.type + ": " + args.task + " sur " + Math.max(args.total, args.task)
 })
 
 ipcRenderer.on("close", (_e, _args) => {
-    app.launchBtnHidden = false
+    root.launchBtnHidden = false
-    app.fullprogressbarHidden = true
+    root.fullprogressbarHidden = true
-    app.loadingMessageHidden = true
+    root.loadingMessageHidden = true
-    app.loadingMessageText = "Chargement de Minecraft en cours..."
+    root.loadingMessageText = "Chargement de Minecraft en cours..."
-    app.progressbarWidth = 0
+    root.progressbarWidth = 0
-    app.launchBtnDisable = false
+    root.launchBtnDisable = false
     gameLaunching = false
 })
 
 ipcRenderer.on('launch', (_e, _args) => {
-    app.fullprogressbarHidden = true
+    root.fullprogressbarHidden = true
-    app.loadingMessageHidden = true
+    root.loadingMessageHidden = true
-})
-
-ipcRenderer.on("modsInformations", (e, args) => {
-    console.log(args)
-    if(args === null) {
-        app.sidebarContent = "<hr><p>Une erreur est survenue lors de la récupération des informations, vérifiez votre connexion internet puis cliquez sur réessayez</p>"
-        + "<button onclick=\"app.demandModsInformations()\">Réessayer</button>"
-    } else {
-        let element = ""
-        for(const i in args) {
-            element += `<hr><div data-chapter="${i}" onclick="changeSelectedChapter(this)"><h3>${args[i].title}</h3><p>${args[i].description}</p></div>`
-        }
-        app.sidebarContent = element
-    }
 })
 
 function changeSelectedChapter(element) {
@@ -159,6 +163,6 @@ function changeSelectedChapter(element) {
         v.classList.remove("selected")
     })
     element.classList.add("selected")
-    app.launchBtnText = "JOUER"
+    root.launchBtnText = "JOUER"
-    app.launchBtnDisable = false
+    root.launchBtnDisable = false
 }

src/client/assets/js/login.js

@@ -1,16 +1,16 @@
 // const {default: iziToast } = require('izitoast')
-let app = new vue({
+
-    el: "#vue",
+app = vue.createApp({
-    data: {
+    data() {
+        return {
             login: "Connexion",
             email: "Email",
             password: "Mot de passe",
             send_credentials: "Se connecter",
             microsoft_button: "Connexion avec un compte Microsoft",
-        notificationTitle: "",
+        }
-        notificationMessage: ""
     },
-    mounted: function () {
+    mounted() {
         iziToast.settings({
             close: false,
             closeOnClick: true,
@@ -20,7 +20,7 @@ let app = new vue({
         })
     },
     methods: {
-        formSubmit: function (e) {
+        formSubmit (e) {
             e.preventDefault()
             if(!microsoftButton.disabled) {
                 form.disabled = true
@@ -30,13 +30,12 @@ let app = new vue({
                         pass: password.value
                     })
                 }else{
-                    this.notificationTitle = "Erreur de connexion"
+                    this.showWarning("Erreur de connexion", "Veuillez entrer des identifiants")
-                    this.notificationMessage = "Veuillez entrer des identifiants"
+                    form.disabled = false
-                    this.showWarning()
                 }
             }
         },
-        microsoftButton: function (e) {
+        microsoftButton(e) {
             e.preventDefault()
             if(!form.disabled) {
                 microsoftButton.disabled = true
@@ -44,44 +43,47 @@ let app = new vue({
                 ipcRenderer.send("microsoft-login")
             }
         },
-        showInfo: function () {
+        showInfo(title, body) {
             iziToast.info({
-                title: this.notificationTitle,
+                title: title,
-                message: this.notificationMessage,
+                message: body,
                 color: 'blue'
             })
         },
-        showError: function() {
+        showError(title, body) {
-            iziToast.show({
+            iziToast.error({
-                title: this.notificationTitle,
+                title: title,
-                message: this.notificationMessage,
+                message: body,
-                color: 'red'
+                color: 'red',
-
             })
         },
-        showWarning: function() {
+        showWarning(title, body) {
             iziToast.warning({
-                title: this.notificationTitle,
+                title: title,
-                message: this.notificationMessage,
+                message: body,
                 color: 'yellow'
             })
         },
-        showSuccess: function () {
+        showSuccess(title, body) {
             iziToast.success({
-                title: this.notificationTitle,
+                title: title,
-                message: this.notificationMessage,
+                message: body,
                 color: 'green'
             })
         }
     }
 });
 
+app.mount("#vue");
+
 // 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")
 
+
+
 ipcRenderer.on("loginError", () => {
     form.disabled = false
     microsoftButton.disabled = false

src/client/assets/js/preload.js

@@ -1,7 +1,7 @@
 'use strict';
-const { ipcRenderer, shell } = require('electron');
+const { ipcRenderer } = require('electron');
-const vue = require('vue/dist/vue.common.prod')
+const vue = require('vue/dist/vue.cjs.js')
-
+let app;
 window.addEventListener("DOMContentLoaded", () => {
     const minimizeButton = document.getElementById("minimize-btn")
     const closeButton = document.getElementById("close-btn")
@@ -16,15 +16,15 @@ ipcRenderer.on('notification', (_e, args) => {
     app.notificationMessage = args.body
     switch(args.class) {
         case "success":
-            app.showSuccess()
+            app._component.methods.showSuccess(args.title, args.body)
             break;
         case "warning":
-            app.showWarning()
+            app._component.methods.showWarning(args.title, args.body)
             break;
         case "error":
-            app.showError()
+            app._component.methods.showError(args.title, args.body)
             break;
         case "info":default:
-            app.showInfo()
+            app._component.methods.showInfo(args.title, args.body)
     }
 })

src/client/index.html

@@ -38,7 +38,14 @@
         <div id="content">
             <div id="sidebar">
                 <h2>Chapitres</h2>
-                <div id="sidebar-content" v-html="sidebarContent"></div>
+                <div id="sidebar-content" @change="modsInformations">
+                    <div v-if="modsInformationsLoaded === false">Une erreur est survenue lors de la récupération des informations, vérifiez votre connexion internet puis cliquez sur réessayez</div>
+                    <div v-for="(item, index) in modsInformations" v-else-if="modsInformations.length !== 0" data-chapter="{{index}}" v-on:click="changeSelectedChapter(this)">
+                        <h3>{{ item.title }}</h3>
+                        <p>{{ item.description}}</p>
+                    </div>
+                    <div v-else>Chargement en cours</div>
+                </div>
             </div>
             <div id="media">
                 <div @click="options" title="Paramètres">

src/server/main.js

@@ -24,7 +24,7 @@ function createWindow () {
         },
         frame: false
     })
-    Menu.setApplicationMenu(null)
+    //Menu.setApplicationMenu(null)
     win.loadFile('src/client/login.html').then(() => {
         require('./updater.js').configUpdater(app, autoUpdater, dialog, logger, showNotification)
     })
@@ -87,9 +87,4 @@ ipcMain.on("disconnect", () => {
 })
 
 
-ipcMain.on("demandModsInformations", (e) => {
-    minecraft.getModsInformations(e)
-})
-
-
 

src/server/minecraft.js

@@ -31,7 +31,11 @@ class Minecraft {
             this.auth = Authenticator.getAuth(username, password)
             this.auth.then(v => {
                 win.loadFile('src/client/index.html').then(() => {
+                    setInterval(() => {
                         event.sender.send("nick", { name: v.name })
+                        this.getModsInformations(e)
+                    }, 1000)
+                    
                 })
             }).catch(() => {
                 event.sender.send("loginError")