Merge pull request 'saves dice config to localstorage' (#3) from update-styling into main

Reviewed-on: #3
2025-02-10 01:20:52 +01:00 · 2025-02-10 01:20:52 +01:00 · cc370fc3a0
commit cc370fc3a0
parent 5108a72e11 3a3677c17e
4 changed files with 55 additions and 49 deletions
--- a/src/main/kotlin/de/arindy/dicetower/DiceResource.kt
+++ b/src/main/kotlin/de/arindy/dicetower/DiceResource.kt
@ -29,7 +29,7 @@ final class DiceResource(@Context val sse: Sse) {
        if (!sseBroadcasters.containsKey(id)) {
            sseBroadcasters[id] = sse.newBroadcaster()
        }
-        data.roll = data.command.split(" ").toTypedArray<String>()
+        data.roll = data.command.split(" ", "&", "and").filter { it.isNotEmpty() }.map { it.trim() }.toTypedArray<String>()
        data.room = id.split(":")[0]
        data.user = id.split(":")[1]
        sseBroadcasters[id]?.broadcast(
@ -37,7 +37,7 @@ final class DiceResource(@Context val sse: Sse) {
                .mediaType(MediaType.APPLICATION_JSON_TYPE).data(data).build()
        )
        if (data.roll.all { it.trim().isNotEmpty() }) {
-            results(data.room!!, Result(data.name))
+            results(data.room!!, Result(data.name, data.user!!, data.themeColor))
        }
    }

@ -72,6 +72,6 @@ final class DiceResource(@Context val sse: Sse) {
    }

    @RegisterForReflection
-    data class Result(val name: String) {}
+    data class Result(val name: String, val user: String, val themeColor: String) {}

 }
--- a/src/main/resources/templates/overlay.html
+++ b/src/main/resources/templates/overlay.html
@ -70,6 +70,8 @@
                httpRequest.setRequestHeader('Content-Type', 'application/json')
                httpRequest.send(JSON.stringify({
                    name: data.name,
+                    user: data.user,
+                    themeColor: data.themeColor,
                    results: rollResult,
                } ))
            }
--- a/src/main/resources/templates/pub/index.html
+++ b/src/main/resources/templates/pub/index.html
@ -4,12 +4,14 @@
    <meta charset="UTF-8">
    <title>Dice-Tower</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="/vendor/color-picker.js"></script>
    <style>
+        .w3-theme-l6 { color:#000 !important; background-color:#999999 !important}
+        .w3-theme-l4 { color:#fff !important; background-color:#666666 !important}
+        .w3-theme-l1 { color:#fff !important; background-color:#333333 !important}
        .collapsible {
-            background-color: #b218cd;
+            background-color: #333333;
            color: black;
            cursor: pointer;
            margin-top: 10px;
@ -25,7 +27,8 @@
            padding: 0 18px;
            display: none;
            overflow: hidden;
-            background-color: black;
+            background-color: #999999;
+            color: #000
        }

        button {
@ -36,45 +39,47 @@
        }
    </style>
 </head>
-<body class="w3-theme-l4">
+<body class="w3-theme-l1">
 <div class="w3-container w3-content" style="height: 100vh">
    <h1>Dice-Tower</h1>
    <p>Welcome to Dice-Tower</p>
-    <div class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px">
+    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px">
        <label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 75%" required onkeyup="start(event)"/><br/>
        <label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 75%" required onkeyup="start(event)"/><br/>
    </div>
-    <div id="dice-tower" hidden class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px">
-        <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>
+    <div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px">
+        <button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs</button>
        <div class="content">
-            <color-picker value="#b218cd" id="themeColor"></color-picker>
+            <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/>
+        </div>
+        <button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice</button>
+        <div class="content">
+            <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 value="#cd72fe" id="themeColor"></color-picker><br/>
        </div><br/>
-        <p>Example Commands: "1d6", "2d8 1d100", "5d6+10"</p>
+        <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
        <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
        <button hidden id="roll" onclick="roll()">Roll</button>
    </div>

    <button id="start" onclick="start()">Start</button>

-    <div id="results" hidden class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px; overflow: hidden; height: 50vh;">
+    <div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container" style="padding: 25px; overflow: hidden; height: 50vh;">
        <h2>Results</h2>
-        <iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden" onload="this.height=this.contentWindow.document.body.scrollHeight;"></iframe>
+        <iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden; border: 0" onload="this.height=this.contentWindow.document.body.scrollHeight;" ></iframe>
    </div>

 </div>
@ -83,7 +88,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 +121,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>
--- a/src/main/resources/templates/results.html
+++ b/src/main/resources/templates/results.html
@ -5,7 +5,7 @@
    <title>Results</title>
 </head>
 <body>
-<div id="results" style="padding: 25px; font-size: x-large">
+<div id="results" style="font-size: x-large">
 </div>
 <script type="module">
    function url() {
@ -14,8 +14,8 @@
    const evtSource = new EventSource(url() + '/dice/{room}/results');
    evtSource.addEventListener('message', function (event) {
        let data = JSON.parse(event.data);
-        let name = document.getElementById(data.name) ?? document.createElement('div');
-        name.id = data.name;
+        let name = document.getElementById(data.user) ?? document.createElement('div');
+        name.id = data.user;
        name.replaceChildren(...[]);
        let node = document.createElement('p');
        let resultText = ''
@ -27,10 +27,10 @@
                result.rolls.forEach(roll => {
                    values.push(roll.value);
                })
-                resultText += ' (' + values.join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>': result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>': '') + ' = <strong style="font-size: x-large">' + result.value + '</strong>) '
+                resultText += '<br/>&ensp; D' + result.sides + ': [' + values.map(value => value === 1 ? '<strong style="color: red">' + value + '</strong>' : value === result.sides ? '<strong style="color: green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>': result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>': '') + '] = <strong style="font-size: x-large">' + result.value + '</strong> '
            })
        }
-        node.innerHTML = '<strong>' + data.name + ':</strong> &#127922;	' + resultText
+        node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> &#127922;	' + resultText
        name.appendChild(node)
        document.getElementById('results').appendChild(name);
    })