arindy/dice-tower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

update-styling #4

Merged
arindy merged 5 commits from update-styling into main 2025-02-10 03:35:39 +01:00
Conversation 0 Commits 5 Files Changed 6 +97 -43
5 changed files with 97 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9b25a69636 - Show all commits

4
src/main/kotlin/de/arindy/dicetower/OverlayResource.kt
View File

@ -20,7 +20,7 @@ class OverlayResource {
@GET @GET
@Path("/results") @Path("/results")
@Produces(MediaType.TEXT_HTML) @Produces(MediaType.TEXT_HTML)
fun results(@PathParam("diceid") room: String): TemplateInstance { fun results(@PathParam("diceid") room: String, @QueryParam("name") name: String?, @QueryParam("user") user: String?): TemplateInstance {
return Templates.results(room) return Templates.results(room, name ?: "all", user ?: "all")
} }
} }

18
src/main/kotlin/de/arindy/dicetower/ResultsResource.kt
View File

@ -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)
}
}

4
src/main/kotlin/de/arindy/dicetower/Templates.kt
View File

@ -6,7 +6,7 @@ import io.quarkus.qute.TemplateInstance
@CheckedTemplate @CheckedTemplate
object Templates { object Templates {
@JvmStatic @JvmStatic
external fun overlay(diceid: String, scale: Int): TemplateInstance external fun overlay(diceid: String, scale: Int?): TemplateInstance
@JvmStatic @JvmStatic
external fun results(room: String): TemplateInstance external fun results(room: String, name: String?, user: String?): TemplateInstance
} }

78
src/main/resources/templates/pub/index.html
View File

@ -37,6 +37,60 @@
input { input {
margin: 10px; 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);
}
</style> </style>
</head> </head>
<body class="w3-theme-l1"> <body class="w3-theme-l1">
@ -50,8 +104,9 @@
<div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px"> <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> <button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs</button>
<div class="content"> <div class="content">
<label for="overlayId">Dice-Overlay </label><input type="text" readonly id="overlayId" style="width: 75%"/><br/> <label for="overlayId">Dice-Overlay (Only open once) </label><input type="text" readonly id="overlayId" style="width: 70%"/><br/>
<label for="resultsId">Results-Overlay </label><input type="text" readonly id="resultsId" style="width: 75%"/><br/> <label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="width: 75%"/><br/>
<label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="width: 75%"/><br/>
</div> </div>
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice</button> <button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice</button>
<div class="content"> <div class="content">
@ -72,7 +127,12 @@
</div><br/> </div><br/>
<p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "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)"/> <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
<button hidden id="roll" onclick="roll()">Roll</button> <button hidden id="roll" onclick="roll()">Roll</button><br/><br/>
<label for="resultSwitch">Show all results </label>
<label class="switch">
<input type="checkbox" id="resultSwitch">
<span class="slider"></span>
</label>
</div> </div>
<button id="start" onclick="start()">Start</button> <button id="start" onclick="start()">Start</button>
@ -91,7 +151,8 @@
if((!event || event.keyCode === 13) && document.getElementById('name').value.length > 0 && document.getElementById('room').value.length > 0) { 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') + '?scale=7'; 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('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('roll').hidden = false;
document.getElementById('start').hidden = true; document.getElementById('start').hidden = true;
document.getElementById('dice-tower').hidden = false; document.getElementById('dice-tower').hidden = false;
@ -139,6 +200,15 @@
} }
}); });
} }
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() => { document.addEventListener("DOMContentLoaded", async() => {
if (!localStorage.getItem("userId")) { if (!localStorage.getItem("userId")) {
localStorage.setItem("userId", self.crypto.randomUUID()); localStorage.setItem("userId", self.crypto.randomUUID());

36
src/main/resources/templates/results.html
View File

@ -14,25 +14,27 @@
const evtSource = new EventSource(url() + '/dice/{room}/results'); const evtSource = new EventSource(url() + '/dice/{room}/results');
evtSource.addEventListener('message', function (event) { evtSource.addEventListener('message', function (event) {
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
let name = document.getElementById(data.user + '-' + data.name) ?? document.createElement('div'); if ("{name}" === "all" && "{user}" === "all" || "{name}" === data.name && "{user}" === data.user || "{name}" === "all" && "{user}" === data.user || "{name}" === data.name && "{user}" === "all") {
name.id = data.user + '-' + data.name; let name = document.getElementById(data.user + '-' + data.name) ?? document.createElement('div');
name.replaceChildren(...[]); name.id = data.user + '-' + data.name;
let node = document.createElement('p'); name.replaceChildren(...[]);
let resultText = '' let node = document.createElement('p');
if (!data.results) { let resultText = ''
resultText = ' rolling...' if (!data.results) {
} else { resultText = ' rolling...'
data.results.forEach(result => { } else {
let values = [] data.results.forEach(result => {
result.rolls.forEach(roll => { let values = []
values.push(roll.value); result.rolls.forEach(roll => {
values.push(roll.value);
})
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> '
}) })
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 style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> &#127922; ' + resultText
name.appendChild(node)
document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
} }
node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> &#127922; ' + resultText
name.appendChild(node)
document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
}) })
</script> </script>
</body> </body>