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

implements timed clearing of dice
All checks were successful
CI / deploy (push) Successful in 4m20s
Details
CI / deploy (pull_request) Successful in 4m22s
Details

Browse Source
This commit is contained in:
Arindy 2025-02-10 15:05:33 +01:00
parent 1518783090
commit 3cd43ddcc5
4 changed files with 60 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,8 +13,8 @@ class OverlayResource {
@GET
@Produces(MediaType.TEXT_HTML)
fun get(@PathParam("diceid") diceid: String, @QueryParam("scale") scale: Int? = 7): TemplateInstance {
return Templates.overlay(diceid, scale ?: 7)
fun get(@PathParam("diceid") diceid: String, @QueryParam("scale") scale: Int? = 7, @QueryParam("clearAfter") clearAfter: Long? = -1): TemplateInstance {
return Templates.overlay(diceid, scale ?: 7, clearAfter ?: -1)
}
@GET

2
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, scale: Int?): TemplateInstance
external fun overlay(diceid: String, scale: Int?, clearAfter: Long?): TemplateInstance
@JvmStatic
external fun results(room: String, name: String?, user: String?): TemplateInstance
}

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

@ -73,6 +73,10 @@
themeColor: data.themeColor,
results: rollResult,
} ))
if ({clearAfter} > 0) {
setTimeout(() => diceBox.clear(), {clearAfter} * 1000)
}
}
diceBox.roll(data.roll, { theme: data.theme?.length > 0 ? data.theme : 'default', themeColor: data.themeColor.length > 0 ? data.themeColor : '#4545FF' });
})

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

@ -91,6 +91,22 @@
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.overlayButton {
background: transparent;
border: none;
width: 5px;
height: 5px;
font-size: large;
}
.tooltip {
position: fixed;
border-radius: 0.5rem;
padding: 15px;
color:#fff !important;
background-color:#333333dd !important
}
</style>
</head>
<body class="w3-theme-l1">
@ -105,9 +121,29 @@
<button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs <a>🞃</a></button>
<div class="content">
<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 style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
<label for="overlayId">Dice-Overlay (Only open once) </label><input type="text" readonly id="overlayId" style="flex-grow: 1"/><button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">?</button><br/>
<div popover id="overlay-hint" class="tooltip">
<p style="color: red; font-weight: bold">Only open Overlay once, unless you want multiple results</p>
<p>Query Params you can Change:</p>
<ul>
<li><strong>scale</strong> changes the size of the dice (any value over 1; remove param or set -1 to keep the dice)</li>
<li><strong>clearAfter</strong> time until dice are cleared (in seconds)</li>
</ul>
</div>
</div>
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
<label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">?</button><br/>
<div popover id="all-results-hint" class="tooltip">
<p>Shows all Results in this room</p>
</div>
</div>
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
<label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">?</button><br/>
<div popover id="my-results-hint" class="tooltip">
<p>Shows only my Results in this room</p>
</div>
</div>
</div>
<button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice <a>🞃</a></button>
<div class="content">
@ -146,7 +182,7 @@
}
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') + '?scale=7';
document.getElementById('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId') + '?scale=7&clearAfter=30';
document.getElementById('resultsId').value = 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;
@ -200,6 +236,19 @@
});
}
const popover = document.querySelectorAll("[popovertarget][data-trigger='hover']");
popover.forEach((e) => {
const target = document.querySelector("#" + e.getAttribute("popovertarget"));
e.addEventListener("mouseover",()=>{
target.showPopover();
});
e.addEventListener("mouseout",()=>{
target.hidePopover();
});
});
document.getElementById('resultSwitch').addEventListener('change', function() {
if (!this.checked) {
document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;