Sync

app/assets/js/index.js

@@ -2,7 +2,7 @@ const navBar = document.querySelector("nav")
 const uiButtons = document.querySelector("footer>section.left")
 const footer = document.querySelector("footer")
 const leftSection = document.querySelector("section.left")
-const audioPourcentageLabel = document.querySelector("label[for='audioVolume']")  
+const audioPourcentageLabel = document.querySelector("label[for='audioVolume']")
 const audio = new Audio()
 
 function startAudio() {
@@ -79,18 +79,46 @@ function logout() {
     document.location.href = './login.html'
 }
 
-window.onload = () => {
-    system.call("server::ping")
-    system.call("player::profile")
-    startAudio()
-}
-
-system.result("server::ping", (data) => {
-    playersStatus.innerText = `${data.players.online}/${data.players.max}`
+system.result("server::ping", (pong) => {
+    playersStatus.innerText = `${pong.players.online}/${pong.players.max}`
 })
 
-system.result("player::profile", (data) => {
+system.result("player::profile", (playerProfile) => {
     if (!localStorage.getItem("user")) {
-        localStorage.setItem("user", JSON.stringify(data))
+        localStorage.setItem("user", JSON.stringify(playerProfile))
     }
-})
+})
+
+function handleOptionsChanges(key, value) {
+    system.call("game::optionSet", { key, value })
+}
+
+function handleSettingsChanges(key, value) {
+    system.call("settings::set", { key, value })
+}
+
+system.result("game::parseOptions", (options) => {
+    gamma.checked = options.gamma == 1 ? true : false
+    renderClouds.checked = options.renderrenderClouds == false ? false : true 
+    guiScale.value = options.guiScale
+    graphicsMode.checked = options.graphicsMode == 0 ? true : false
+    renderDistance.value = options.renderDistance
+})
+
+system.result("settings::read", (settings) => {
+    ram.value = settings.ram.max
+})
+
+system.result("hardware::ramInformation", ($ram) => {
+    ram.setAttribute("max", $ram.avaibleRam)
+    maxRam.innerText = `${Math.floor($ram.avaibleRam / 1024)} G`
+})
+
+window.onload = () => {
+    system.call("hardware::ramInformation")
+    system.call("game::parseOptions")
+    system.call("server::ping")
+    system.call("player::profile")
+    system.call("settings::read")
+    startAudio()
+}

app/logged.html

@@ -49,8 +49,8 @@
                         <span>
                             0.5GB
                         </span>
-                        <input type="range" name="ram" min="0" max="2048" id="ram">
-                        <span>
+                        <input type="range" name="ram" min="0" max="2048" id="ram" onchange="handleSettingsChanges(this.name, this.value)">
+                        <span id="maxRam">
                             MAX
                         </span>
                     </div>
@@ -62,20 +62,20 @@
                         <span>
                             4
                         </span>
-                        <input type="range" name="ram" min="4" max="32" id="renderDistance">
+                        <input type="range" name="renderDistance" min="4" max="32" id="renderDistance" onchange="handleOptionsChanges(this.name, this.value)">
                         <span>
                             32
                         </span>
                     </div>
                     <br>
                     <label>
-                        Ram alloué
+                        Taille de l'interface
                     </label>
                     <div class="ranges">
                         <span>
                             1
                         </span>
-                        <input type="range" name="ram" min="1" max="4" id="guiScale">
+                        <input type="range" name="guiScale" min="1" max="4" id="guiScale" onchange="handleOptionsChanges(this.name, this.value)">
                         <span>
                             4
                         </span>
@@ -83,29 +83,29 @@
                     <br>
                     <div class="checkboxes">
                         <div>
-                            <input type="checkbox" name="clouds" id="clouds">
-                            <label for="clouds">
+                            <input type="checkbox" name="renderClouds" id="renderClouds" onchange="handleOptionsChanges(this.name, this.checked)">
+                            <label for="renderClouds">
                                 Nuages
                             </label>
                         </div>
                         <div>
-                            <input type="checkbox" name="lowGraphism" id="lowGraphism">
-                            <label for="lowGraphism">
+                            <input type="checkbox" name="graphicsMode" id="graphicsMode" onchange="handleOptionsChanges(this.name, this.checked)">
+                            <label for="graphicsMode">
                                 Graphisme bas
                             </label>
                         </div>
                         <div>
-                            <input type="checkbox" name="fullbright" id="fullbright">
-                            <label for="fullbright">
+                            <input type="checkbox" name="gamma" id="gamma" onchange="handleOptionsChanges(this.name, this.checked)">
+                            <label for="gamma">
                                 Luminsoité max
                             </label>
                         </div>
-                        <div>
+                        <!-- <div>
                             <input type="checkbox" name="sildurs_shader" id="sildurs_shader">
                             <label for="sildurs_shader">
                                 Sildur's Shader
                             </label>
-                        </div>
+                        </div> -->
                     </div>
                 </article>
             </details>