saves dice config to localstorage

Reviewed-on: #2

src/main/resources/templates/pub/index.html

@@ -9,7 +9,7 @@
     <script src="/vendor/color-picker.js"></script>
     <style>
         .collapsible {
-            background-color: #b218cd;
+            background-color: grey;
             color: black;
             cursor: pointer;
             margin-top: 10px;
@@ -25,7 +25,7 @@
             padding: 0 18px;
             display: none;
             overflow: hidden;
-            background-color: black;
+            background-color: lightgrey;
         }
 
         button {
@@ -48,22 +48,22 @@
         <label for="overlayId">Dice-Overlay </label><input type="text" readonly id="overlayId" style="width: 75%"/><br/>
         <label for="resultsId">Results-Overlay </label><input type="text" readonly id="resultsId" style="width: 75%"/><br/>
         <hr style="width:100%;color:black;background-color:black;height:1px">
-        <label for="theme">Theme </label>
-        <select name="theme" id="theme">
-            <option value="default">Default</option>
-            <option value="blueGreenMetal">Blue-Green Metal</option>
-            <option value="diceOfRolling">Dice of Rolling</option>
-            <option value="gemstone">Gemstone</option>
-            <option value="gemstoneMarble">Marble Gemstone</option>
-            <option value="rock">Rock</option>
-            <option value="rust">Rust</option>
-            <option value="smooth">Smooth</option>
-            <option value="wooden">Wooden</option>
-        </select>
-        <br/>
-        <button type="button" class="collapsible">Theme Color</button>
+        <button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice</button>
         <div class="content">
-            <color-picker value="#b218cd" id="themeColor"></color-picker>
+            <label for="theme">Theme </label>
+            <select name="theme" id="theme" style="margin: 25px">
+                <option value="default">Default</option>
+                <option value="blueGreenMetal">Blue-Green Metal</option>
+                <option value="diceOfRolling">Dice of Rolling</option>
+                <option value="gemstone">Gemstone</option>
+                <option value="gemstoneMarble">Marble Gemstone</option>
+                <option value="rock">Rock</option>
+                <option value="rust">Rust</option>
+                <option value="smooth">Smooth</option>
+                <option value="wooden">Wooden</option>
+            </select>
+            <br/>
+            <color-picker id="themeColor"></color-picker><br/>
         </div><br/>
         <p>Example Commands: "1d6", "2d8 1d100", "5d6+10"</p>
         <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
@@ -83,7 +83,6 @@
         return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
     }
     function start(event) {
-        console.log(event)
         if((!event || event.keyCode === 13) && document.getElementById('name').value.length > 0 && document.getElementById('room').value.length > 0) {
             document.getElementById('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId');
             document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results';
@@ -117,27 +116,27 @@
 
     for (let i = 0; i < coll.length; i++) {
         coll[i].addEventListener("click", function () {
-            coll[i].style['background-color'] = document.getElementById('themeColor').value;
+            localStorage.setItem("theme", document.getElementById('theme').value)
+            localStorage.setItem("themeColor", document.getElementById('themeColor').value)
             const content = this.nextElementSibling;
             if (content.style.display === "block") {
                 content.style.display = "none";
-                this.classList.remove("active");
             } else {
-                this.classList.add("active");
-                for (let c of coll) {
-                    const cont = c.nextElementSibling;
-                    if (cont !== content) {
-                        c.classList.remove("active");
-                        cont.style.display = "none";
-                    }
-                }
                 content.style.display = "block";
             }
         });
     }
-    if (!localStorage.getItem("userId")) {
-        localStorage.setItem("userId", self.crypto.randomUUID());
-    }
+    document.addEventListener("DOMContentLoaded", async() => {
+        if (!localStorage.getItem("userId")) {
+            localStorage.setItem("userId", self.crypto.randomUUID());
+        }
+        if (localStorage.getItem("theme")) {
+            document.getElementById('theme').value = localStorage.getItem("theme")
+        }
+        if (localStorage.getItem("themeColor")) {
+            document.getElementById('themeColor').setColor(localStorage.getItem("themeColor"));
+        }
+    })
 </script>
 </body>
 </html>