diff --git a/src/main/kotlin/de/arindy/dicetower/OverlayResource.kt b/src/main/kotlin/de/arindy/dicetower/OverlayResource.kt index cfee467..85214ca 100644 --- a/src/main/kotlin/de/arindy/dicetower/OverlayResource.kt +++ b/src/main/kotlin/de/arindy/dicetower/OverlayResource.kt @@ -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 diff --git a/src/main/kotlin/de/arindy/dicetower/Templates.kt b/src/main/kotlin/de/arindy/dicetower/Templates.kt index 787f4ca..ef9a118 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, scale: Int?): TemplateInstance + external fun overlay(diceid: String, scale: Int?, clearAfter: Long?): TemplateInstance @JvmStatic 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 295cef4..bedb2a4 100644 --- a/src/main/resources/templates/overlay.html +++ b/src/main/resources/templates/overlay.html @@ -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' }); }) diff --git a/src/main/resources/templates/pub/index.html b/src/main/resources/templates/pub/index.html index 9d94216..711dd09 100644 --- a/src/main/resources/templates/pub/index.html +++ b/src/main/resources/templates/pub/index.html @@ -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 + } @@ -105,9 +121,29 @@
-
-
-
+
+
+
+

Only open Overlay once, unless you want multiple results

+

Query Params you can Change:

+
    +
  • scale changes the size of the dice (any value over 1; remove param or set -1 to keep the dice)
    • +
  • clearAfter time until dice are cleared (in seconds)
    • +
+
+
+
+
+
+

Shows all Results in this room

+
+
+
+
+
+

Shows only my Results in this room

+
+
@@ -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;