diff --git a/src/main/kotlin/de/arindy/dicetower/OverlayResource.kt b/src/main/kotlin/de/arindy/dicetower/OverlayResource.kt index a9331e7..cfee467 100644 --- a/src/main/kotlin/de/arindy/dicetower/OverlayResource.kt +++ b/src/main/kotlin/de/arindy/dicetower/OverlayResource.kt @@ -5,6 +5,7 @@ import jakarta.ws.rs.GET import jakarta.ws.rs.Path import jakarta.ws.rs.PathParam import jakarta.ws.rs.Produces +import jakarta.ws.rs.QueryParam import jakarta.ws.rs.core.MediaType @Path("overlay/{diceid}") @@ -12,14 +13,14 @@ class OverlayResource { @GET @Produces(MediaType.TEXT_HTML) - fun get(@PathParam("diceid") diceid: String): TemplateInstance { - return Templates.overlay(diceid) + fun get(@PathParam("diceid") diceid: String, @QueryParam("scale") scale: Int? = 7): TemplateInstance { + return Templates.overlay(diceid, scale ?: 7) } @GET @Path("/results") @Produces(MediaType.TEXT_HTML) - fun results(@PathParam("diceid") room: String): TemplateInstance { - return Templates.results(room) + fun results(@PathParam("diceid") room: String, @QueryParam("name") name: String?, @QueryParam("user") user: String?): TemplateInstance { + return Templates.results(room, name ?: "all", user ?: "all") } } diff --git a/src/main/kotlin/de/arindy/dicetower/ResultsResource.kt b/src/main/kotlin/de/arindy/dicetower/ResultsResource.kt deleted file mode 100644 index fcc883a..0000000 --- a/src/main/kotlin/de/arindy/dicetower/ResultsResource.kt +++ /dev/null @@ -1,18 +0,0 @@ -package de.arindy.dicetower - -import io.quarkus.qute.TemplateInstance -import jakarta.ws.rs.GET -import jakarta.ws.rs.Path -import jakarta.ws.rs.PathParam -import jakarta.ws.rs.Produces -import jakarta.ws.rs.core.MediaType - -@Path("results/{room}") -class ResultsResource { - - @GET - @Produces(MediaType.TEXT_HTML) - fun get(@PathParam("room") room: String): TemplateInstance { - return Templates.results(room) - } -} diff --git a/src/main/kotlin/de/arindy/dicetower/Templates.kt b/src/main/kotlin/de/arindy/dicetower/Templates.kt index c4343f8..787f4ca 100644 --- a/src/main/kotlin/de/arindy/dicetower/Templates.kt +++ b/src/main/kotlin/de/arindy/dicetower/Templates.kt @@ -6,7 +6,7 @@ import io.quarkus.qute.TemplateInstance @CheckedTemplate object Templates { @JvmStatic - external fun overlay(diceid: String): TemplateInstance + external fun overlay(diceid: String, scale: Int?): TemplateInstance @JvmStatic - external fun results(room: String): TemplateInstance + external fun results(room: String, name: String?, user: String?): TemplateInstance } diff --git a/src/main/resources/templates/overlay.html b/src/main/resources/templates/overlay.html index 7621b04..295cef4 100644 --- a/src/main/resources/templates/overlay.html +++ b/src/main/resources/templates/overlay.html @@ -41,7 +41,6 @@ } import DiceBox from "/vendor/dice-box/dice-box.es.js"; const evtSource = new EventSource(url() + "/dice/{diceid??}/stream"); - const diceBox = new DiceBox("#dice-box", { assetPath: "/vendor/assets/", theme: 'default', @@ -56,7 +55,7 @@ 'smooth', 'wooden' ], - scale: 7 + scale: {scale} }); document.addEventListener("DOMContentLoaded", async() => { @@ -76,8 +75,6 @@ } )) } diceBox.roll(data.roll, { theme: data.theme?.length > 0 ? data.theme : 'default', themeColor: data.themeColor.length > 0 ? data.themeColor : '#4545FF' }); - - }) }) diff --git a/src/main/resources/templates/pub/index.html b/src/main/resources/templates/pub/index.html index 3d8e59d..4264059 100644 --- a/src/main/resources/templates/pub/index.html +++ b/src/main/resources/templates/pub/index.html @@ -37,6 +37,60 @@ input { margin: 10px; } + + /* The switch - the box around the slider */ + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 25px; + } + + /* Hide default HTML checkbox */ + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + content: ""; + height: 18px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + } + + input:checked + .slider { + background-color: #333333; + } + + input:focus + .slider { + box-shadow: 0 0 1px #333333; + } + + input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } @@ -50,8 +104,9 @@ @@ -89,17 +149,26 @@ } function start(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('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId') + '?scale=7'; document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results'; - document.getElementById('resultFrame').src = url() + '/overlay/' + document.getElementById('room').value + '/results'; + document.getElementById('myResultsId').value = document.getElementById('resultsId').value + '?name=' + encodeURIComponent(document.getElementById('name').value) + '&user=' + localStorage.getItem('userId'); + document.getElementById('resultFrame').src = document.getElementById('myResultsId').value; document.getElementById('roll').hidden = false; document.getElementById('start').hidden = true; document.getElementById('dice-tower').hidden = false; document.getElementById('name').hidden = true; document.getElementById('room').hidden = true; document.getElementById('results').hidden = false; - document.getElementById('nameLabel').innerHTML = 'Name: ' + document.getElementById('name').value + ''; - document.getElementById('roomLabel').innerHTML = 'Room: ' + document.getElementById('room').value + ''; + document.getElementById('nameLabel').innerHTML = '' + document.getElementById('name').value + ''; + document.getElementById('roomLabel').innerHTML = '' + document.getElementById('room').value + ''; + document.title = document.getElementById('name').value + ' - Dice-Tower'; + + if (localStorage.getItem(document.getElementById('name').value + "-theme")) { + document.getElementById('theme').value = localStorage.getItem(document.getElementById('name').value + "-theme") + } + if (localStorage.getItem(document.getElementById('name').value + "-themeColor")) { + document.getElementById('themeColor').setColor(localStorage.getItem(document.getElementById('name').value + "-themeColor")); + } } } @@ -121,8 +190,8 @@ for (let i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { - localStorage.setItem("theme", document.getElementById('theme').value) - localStorage.setItem("themeColor", document.getElementById('themeColor').value) + localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value) + localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value) const content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; @@ -131,16 +200,19 @@ } }); } + + document.getElementById('resultSwitch').addEventListener('change', function() { + if (!this.checked) { + document.getElementById('resultFrame').src = document.getElementById('myResultsId').value; + } else { + document.getElementById('resultFrame').src = document.getElementById('resultsId').value; + } + }) + 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")); - } }) diff --git a/src/main/resources/templates/results.html b/src/main/resources/templates/results.html index 03b02d5..926dd1a 100644 --- a/src/main/resources/templates/results.html +++ b/src/main/resources/templates/results.html @@ -14,25 +14,27 @@ const evtSource = new EventSource(url() + '/dice/{room}/results'); evtSource.addEventListener('message', function (event) { let data = JSON.parse(event.data); - let name = document.getElementById(data.user) ?? document.createElement('div'); - name.id = data.user; - 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); + if ("{name}" === "all" && "{user}" === "all" || "{name}" === data.name && "{user}" === data.user || "{name}" === "all" && "{user}" === data.user || "{name}" === data.name && "{user}" === "all") { + let name = document.getElementById(data.user + '-' + data.name) ?? document.createElement('div'); + name.id = data.user + '-' + 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 += '
  D' + result.sides + ': [' + values.map(value => value === 1 ? '' + value + '' : value === result.sides ? '' + value + '' : value).join(' + ') + (result.modifier > 0 ? ' +' + result.modifier + '' : result.modifier < 0 ? ' ' + result.modifier + '' : '') + '] = ' + result.value + ' ' }) - resultText += '
  D' + result.sides + ': [' + values.map(value => value === 1 ? '' + value + '' : value === result.sides ? '' + value + '' : value).join(' + ') + (result.modifier > 0 ? ' +' + result.modifier + '': result.modifier < 0 ? ' ' + result.modifier + '': '') + '] = ' + result.value + ' ' - }) + } + node.innerHTML = '' + data.name + ': 🎲 ' + resultText + name.appendChild(node) + document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild); } - node.innerHTML = '' + data.name + ': 🎲 ' + resultText - name.appendChild(node) - document.getElementById('results').appendChild(name); })