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 {
-    content: "";
-    transition: background-color 0.3s;
+div.loader {
+    overflow: hidden;
+    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%;
-    }
-    50% {
-        background-position: 100% 50%;
+        transform: translateX(-100%);
     }
     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()
 }