sync

app/assets/css/banned.css

@@ -11,6 +11,14 @@ body {
     background-color: #262626;
 }
 
+main {
+    app-region: drag;
+}
+
+main > * {
+    app-region: no-drag;
+}
+
 main > article > section > img {
     width: 150px;
 }

app/assets/css/index.css

@@ -4,6 +4,8 @@
 * {
     margin: 0px;
     padding: 0px;
+    outline: none;
+    user-select: none;
     box-sizing: border-box;
     font-family: "Roboto", sans-serif;
 }
@@ -16,6 +18,11 @@ body {
     background-attachment: fixed;
 }
 
+img {
+    app-region: drag;
+    pointer-events: none;
+}
+
 main {
     position: absolute;
     top: 0px;
@@ -24,6 +31,11 @@ main {
     bottom: 0px;
     width: 100%;
     height: 100%;
+    app-region: drag;
+}
+
+main > * {
+    app-region: no-drag;
 }
 
 main > nav {
@@ -372,25 +384,43 @@ div.checkboxes > input[type="checkbox"] {
     font-size: small;
 }
 
-button.load {
+div.loader {
-    content: "";
+    overflow: hidden;
-    transition: background-color 0.3s;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 10px;
 }
 
+div.loader > div.full {
+    height: 10px;
+    width: 100%;
+    background-color: #3e3e3ee6;
+}
+
+div.loader > div.full > div.progress,
+div.loader > div.full > div.loading {
+    height: 10px;
+    width: 50%;
+    transition: 1s width;
+    background-color: #39aa6d;
+}
+
+div.loader > div.full > div.loading {
+    animation: animateLoadingEffect 1s linear infinite;
+}
 
 [hidden] {
     display: none;
     visibility: hidden;
 }
-@keyframes backgroundAnimation {
+@keyframes animateLoadingEffect {
     0% {
-        background-position: 0% 50%;
+        transform: translateX(-100%);
-    }
-    50% {
-        background-position: 100% 50%;
     }
     100% {
-        background-position: 0% 50%;
+        transform: translateX(200%);
     }
-  }
+}
-  

app/assets/js/index.js

@@ -58,18 +58,32 @@ function toggleAudio(element) {
 
 function toggleMusic(element) {
     if (element.getAttribute("state") == 0) {
-        system.call("audio::mute")
+        audio.pause()
         element.setAttribute("state", 1)
         element.children[0].classList.replace("fa-pause", "fa-play")
         element.children[1].innerText = "Reprendre"
     } else {
-        system.call("audio::unmute")
+        audio.play()
         element.setAttribute("state", 0)
         element.children[0].classList.replace("fa-play", "fa-pause")
         element.children[1].innerText = "Pause"
     }
 }
 
+function toggleMusicVolume(element) {
+    if (element.getAttribute("state") == 0) {
+        system.call("audio::mute")
+        element.setAttribute("state", 1)
+        element.children[0].classList.replace("fa-volume", "fa-volume-slash")
+        element.children[1].innerText = "Activer le son"
+    } else {
+        system.call("audio::unmute")
+        element.setAttribute("state", 0)
+        element.children[0].classList.replace("fa-volume-slash", "fa-volume")
+        element.children[1].innerText = "Couper le son"
+    }
+}
+
 function updateVolume(value) {
     audio.volume = value / 100
     audioPourcentageLabel.innerText = `${value}%`
@@ -86,7 +100,7 @@ system.result("server::ping", pong => {
 
 function handleOptionsChanges(key, value) {
     system.call("game::optionSet", { key, value })
-    const span = document.querySelector(`span#${key}`)
+    const span = document.querySelector(`span#current${key.replace(/./, c => c.toUpperCase())}`)
     if (span) {
         span.innerText = Math.floor(value)
     }
@@ -100,16 +114,66 @@ function handleSettingsChanges(key, value) {
     }
 }
 
+function setLoadingType(type) {
+    const loader = document.querySelector(".loader")
+    switch (type) {
+        case "continuous":
+            loader.children[0].children[0].classList.remove("progress")
+            loader.children[0].children[0].classList.add("loading")
+            break
+        case "progress":
+            loader.children[0].children[0].classList.remove("loading")
+            loader.children[0].children[0].classList.add("progress")
+            break
+        default:
+            break
+    }
+}
+
+function setLoadingProgress(pourcentage) {
+    const loader = document.querySelector(".loader")
+    const progress = loader.querySelector(".progress")
+    if (progress) {
+        progress.setAttribute("style", `width: ${pourcentage}%`)
+    }
+}
+
+function toggleLoadingBar() {
+    const loader = document.querySelector(".loader")
+    if (loader.hasAttribute("hidden")) {
+        loader.removeAttribute("hidden")
+    } else {
+        loader.setAttribute("hidden", "")
+    }
+}
+
+function showLoadingBar() {
+    const loader = document.querySelector(".loader")
+    if (loader.hasAttribute("hidden")) {
+        loader.removeAttribute("hidden")
+    }
+}
+
+function hideLoadingBar() {
+    const loader = document.querySelector(".loader")
+    if (!loader.hasAttribute("hidden")) {
+        loader.setAttribute("hidden", "")
+    }
+}
+
 system.result("game::parseOptions", options => {
     gamma.checked = options.gamma == 1 ? true : false
     renderClouds.checked = options.renderrenderClouds == false ? false : true 
     guiScale.value = options.guiScale
+    currentGuiScale.innerText = options.guiScale
     graphicsMode.checked = options.graphicsMode == 0 ? true : false
     renderDistance.value = options.renderDistance
+    currentRenderDistance.innerText = options.renderDistance
 })
 
 system.result("settings::read", settings => {
     ram.value = settings.ram.max
+    currentRam.innerText = `${Math.floor(settings.ram.max / 1024)} G`
 })
 
 system.result("hardware::ramInformation", $ram => {
@@ -120,11 +184,17 @@ system.result("hardware::ramInformation", $ram => {
 system.result("game::launch", info => {
     if (info.disablePlayButton) {
         playButton.removeAttribute("hidden")
+        hideLoadingBar()
     } else {
         playButton.setAttribute("hidden", "")
     }
 })
 
+system.result("game::launched", info => {
+    muteAudio()
+    hideLoadingBar()
+})
+
 system.result("player::profile", playerProfile => {
     console.log(playerProfile)
 })
@@ -133,6 +203,26 @@ system.result("oculus::getdefaultshaderset", boolean => {
     sildurs_shader.checked = boolean
 })
 
+system.result("progress::update", info => {
+    showLoadingBar()
+    setLoadingType(info.type)
+    if (info.type == "progress" && typeof info.pourcentage == "number") {
+        setLoadingProgress(info.pourcentage)
+    }
+})
+
+system.result("progress::hide", () => {
+    hideLoadingBar()
+})
+
+system.result("izitoast::error", info => {
+    iziToast.error(info)
+})
+
+system.result("progress::info", info => {
+    iziToast.error(info)
+})
+
 window.onload = () => {
     system.call("hardware::ramInformation")
     system.call("game::parseOptions")
@@ -140,5 +230,6 @@ window.onload = () => {
     system.call("player::profile")
     system.call("settings::read")
     system.call("oculus::getdefaultshaderset")
+    hideLoadingBar()
     startAudio()
 }

app/logged.html

@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.css">
     <link rel="stylesheet" href="./assets/css/index.css">
     <title>NyanLauncher</title>
 </head>
@@ -11,6 +12,9 @@
         <button class="close" onclick="system.call('window::close')">
             <i class="fas fa-times"></i>
         </button>
+        <button class="close" onclick="system.call('window::reduce')">
+            <i class="fas fa-minus"></i>
+        </button>
         <nav hidden>
             <button class="close" onclick="hideNavBar()">
                 <i class="fas fa-times"></i>
@@ -59,7 +63,7 @@
                         Distance de rendu
                     </label>
                     <div class="ranges">
-                        <span id="renderDistance">
+                        <span id="currentRenderDistance">
                             4
                         </span>
                         <input type="range" name="renderDistance" min="4" max="32" id="renderDistance" onchange="handleOptionsChanges(this.name, this.value)">
@@ -72,7 +76,7 @@
                         Taille de l'interface
                     </label>
                     <div class="ranges">
-                        <span id="guiScale">
+                        <span id="currentGuiScale">
                             1
                         </span>
                         <input type="range" name="guiScale" min="1" max="4" id="guiScale" onchange="handleOptionsChanges(this.name, this.value)">
@@ -125,6 +129,12 @@
                             100%
                         </label>
                     </div>
+                    <button class="classic" onclick="toggleMusicVolume(this)" state="0">
+                        <i class="fas fa-volume"></i>
+                        <span>
+                            Couper le son
+                        </span>
+                    </button>
                     <button class="classic" onclick="toggleMusic(this)" state="0">
                         <i class="fas fa-pause"></i>
                         <span>
@@ -213,8 +223,15 @@
                 <img class="mascot" src="./assets/img/sulli.png" alt="">
             </section>
         </footer>
+        <div class="loader">
+            <div class="full">
+                <div class="loading">
+                </div>
+            </div>
+        </div>
     </main>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
     <script src="./assets/js/index.js"></script>
 
 </body>

app/login.html

@@ -12,6 +12,9 @@
         <button class="close" onclick="system.call('window::close')">
             <i class="fas fa-times"></i>
         </button>
+        <button class="close" onclick="system.call('window::reduce')">
+            <i class="fas fa-minus"></i>
+        </button>
         <article class="loginchoice">
             <div frame="select">
                 <h2>

main.js

@@ -47,7 +47,7 @@ async function createLauncherWindow() {
                     contextIsolation: true,
                     preload: path.join(__dirname, "modules", "preload.js"),
                     webviewTag: true,
-                    devTools: false
+                    devTools: true
                 }
             })
             if (os.platform() == "darwin") {
@@ -160,6 +160,9 @@ ipcMain.on("call", async (event, data) => {
             launcherWindow.close()
             app.quit()
             break
+        case "window::reduce":
+            launcherWindow.minimize()
+            break
         case "skin::set":
             const file = await dialog.showOpenDialog(launcherWindow, {
                 filters: [
@@ -277,6 +280,7 @@ ipcMain.on("call", async (event, data) => {
 })
 
 async function launchGame(restartGame) {
+    let sendToRenderer = true
     launcherWindow.webContents.send("Response<game::launch>", { disablePlayButton: false })
     const downloadQueue = []
     const remoteFiles = await fileManager.getRemoteFiles()
@@ -313,11 +317,13 @@ async function launchGame(restartGame) {
         try {
             await download(url, path.join(app.getPath("appData"), ".catboat", path.dirname(item)))
             if (launcherWindow instanceof BrowserWindow) {
-                launcherWindow.webContents.send("Response<progress::update>", { type: "landing" })
+                launcherWindow.webContents.send("Response<izitoast::info>", { title: "Lancement du jeu", message: "Ce processus peut être plus ou moins long selon votre configuration." })
+                launcherWindow.webContents.send("Response<progress::update>", { type: "continuous" })
             }
         } catch (error) {
             if (launcherWindow instanceof BrowserWindow) {
-                launcherWindow.webContents.send("Response<progress::error>", { type: "landing" })
+                launcherWindow.webContents.send("Response<progress::hide>")
+                launcherWindow.webContents.send("Response<izitoast::error>", { title: "Erreur", message: new String(error) })
             }
             dialog.showErrorBox("Erreur lors du téléchargement des fichiers", error.toString())
             continue
@@ -332,6 +338,11 @@ async function launchGame(restartGame) {
         console.log(log)
     })
     launcher.on("data", (log) => {
+        if (sendToRenderer) {
+            console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
+            launcherWindow.webContents.send("Response<game::launched>")
+            sendToRenderer = false
+        }
         console.log(log)
     })
     launcher.on("data", (log) => {