diff --git a/app/assets/css/banned.css b/app/assets/css/banned.css index 7d34da5..3a45fa9 100644 --- a/app/assets/css/banned.css +++ b/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; } diff --git a/app/assets/css/index.css b/app/assets/css/index.css index a055621..aa83f55 100644 --- a/app/assets/css/index.css +++ b/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%); } - } - \ No newline at end of file +} \ No newline at end of file diff --git a/app/assets/js/index.js b/app/assets/js/index.js index e497fd2..d097a74 100644 --- a/app/assets/js/index.js +++ b/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() } \ No newline at end of file diff --git a/app/logged.html b/app/logged.html index e3b0e2e..d69e93a 100644 --- a/app/logged.html +++ b/app/logged.html @@ -3,6 +3,7 @@
+