updates style & introduces results overlay

2025-02-09 22:51:31 +01:00
parent ca538e7980
commit 9d72d51013
7 changed files with 136 additions and 68 deletions
--- a/src/main/resources/templates/results.html
+++ b/src/main/resources/templates/results.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Results</title>
+</head>
+<body>
+<div id="results" style="padding: 25px; font-size: x-large">
+</div>
+<script type="module">
+    function url() {
+        return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
+    }
+    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;
+        name.replaceChildren(...[]);
+        let node = document.createElement('p');
+        let resultText = ''
+        if (!data.results) {
+            resultText = ' rolling...'
+        } else {
+            data.results.forEach(result => {
+                let values = []
+                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>) '
+            })
+        }
+        node.innerHTML = '<strong>' + data.name + ':</strong> &#127922;	' + resultText
+        name.appendChild(node)
+        document.getElementById('results').appendChild(name);
+    })
+</script>
+</body>
+</html>