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

Merge pull request 'update-styling' (#4) from update-styling into main
All checks were successful
CI / deploy (push) Successful in 4m24s
Details

Browse Source 
Reviewed-on: #4
This commit is contained in:
arindy 2025-02-10 03:35:38 +01:00
commit bdbc120e61
6 changed files with 114 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

5
src/main/resources/templates/overlay.html
View File

@ -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' });
})
})
</script>

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

@ -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);
}
</style>
</head>
<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">
<button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs</button>
<div class="content">
<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/>
<label for="overlayId">Dice-Overlay (Only open once) </label><input type="text" readonly id="overlayId" style="width: 70%"/><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>
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice</button>
<div class="content">
@ -72,7 +127,12 @@
</div><br/>
<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>
<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>
<button id="start" onclick="start()">Start</button>
@ -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: <strong>' + document.getElementById('name').value + '</strong>';
document.getElementById('roomLabel').innerHTML = 'Room: <strong>' + document.getElementById('room').value + '</strong>';
document.getElementById('nameLabel').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
document.getElementById('roomLabel').innerHTML = '<strong style="font-size:large;">' + document.getElementById('room').value + '</strong>';
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"));
}
})
</script>
</body>

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

@ -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 += '<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').appendChild(name);
})
</script>
</body>