sync

app/assets/css/index.css

@@ -92,7 +92,7 @@ img.logo {
 img.mascot {
     width: 50%;
     float: right;
-    margin-top: calc(300px - (50% + 12px));
+    margin-top: calc(300px - (50% + 32px));
 }
 
 fieldset {
@@ -372,7 +372,25 @@ div.checkboxes > input[type="checkbox"] {
     font-size: small;
 }
 
+button.load {
+    content: "";
+    transition: background-color 0.3s;
+}
+
+
 [hidden] {
     display: none;
     visibility: hidden;
-}
+}
+@keyframes backgroundAnimation {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+  }
+  

app/assets/js/index.js

@@ -86,10 +86,18 @@ system.result("server::ping", pong => {
 
 function handleOptionsChanges(key, value) {
     system.call("game::optionSet", { key, value })
+    const span = document.querySelector(`span#${key}`)
+    if (span) {
+        span.innerText = Math.floor(value)
+    }
 }
 
 function handleSettingsChanges(key, value) {
     system.call("settings::set", { key, value })
+    const span = document.querySelector(`span#${key == "ram" ? "currentRam" : key}`)
+    if (span) {
+        span.innerText = key == "ram" ? Math.floor(value.max / 1024) + " G" : value
+    }
 }
 
 system.result("game::parseOptions", options => {
@@ -121,6 +129,9 @@ system.result("player::profile", playerProfile => {
     console.log(playerProfile)
 })
 
+system.result("oculus::getdefaultshaderset", boolean => {
+    sildurs_shader.checked = boolean
+})
 
 window.onload = () => {
     system.call("hardware::ramInformation")
@@ -128,5 +139,6 @@ window.onload = () => {
     system.call("server::ping")
     system.call("player::profile")
     system.call("settings::read")
+    system.call("oculus::getdefaultshaderset")
     startAudio()
 }

app/logged.html

@@ -46,10 +46,10 @@
                         Ram alloué
                     </label>
                     <div class="ranges">
-                        <span>
+                        <span id="currentRam">
                             0.5GB
                         </span>
-                        <input type="range" name="ram" min="0" max="2048" id="ram" onchange="handleSettingsChanges(this.name, this.value)">
+                        <input type="range" name="ram" min="0" max="2048" id="ram" onchange="handleSettingsChanges('ram', { max: this.value })">
                         <span id="maxRam">
                             MAX
                         </span>
@@ -59,7 +59,7 @@
                         Distance de rendu
                     </label>
                     <div class="ranges">
-                        <span>
+                        <span id="renderDistance">
                             4
                         </span>
                         <input type="range" name="renderDistance" min="4" max="32" id="renderDistance" onchange="handleOptionsChanges(this.name, this.value)">
@@ -72,7 +72,7 @@
                         Taille de l'interface
                     </label>
                     <div class="ranges">
-                        <span>
+                        <span id="guiScale">
                             1
                         </span>
                         <input type="range" name="guiScale" min="1" max="4" id="guiScale" onchange="handleOptionsChanges(this.name, this.value)">
@@ -100,12 +100,12 @@
                                 Luminsoité max
                             </label>
                         </div>
-                        <!-- <div>
-                            <input type="checkbox" name="sildurs_shader" id="sildurs_shader">
+                        <div>
+                            <input type="checkbox" name="sildurs_shader" id="sildurs_shader" onclick="system.call('oculus::defaultshaderset', { boolean: this.checked })">
                             <label for="sildurs_shader">
                                 Sildur's Shader
                             </label>
-                        </div> -->
+                        </div>
                     </div>
                 </article>
             </details>
@@ -205,7 +205,7 @@
             <section class="center">
                 <img class="logo" src="./assets/img/logo.png" alt="">
                 <br>
-                <button class="play" name="play" onclick="system.call('game::launch')">
+                <button class="play load" name="play" onclick="system.call('game::launch')">
                     Jouer
                 </button>
             </section>