Merge pull request 'adds buttons for simple commands' (#16 ) from adds-easy-way-to-roll into main

Reviewed-on: #16
fixes overlay tooltip
2025-02-10 18:39:00 +01:00 · 2025-02-10 18:26:44 +01:00 · 2025-02-10 18:19:54 +01:00 · 2025-02-10 18:01:57 +01:00 · 2025-02-10 17:46:10 +01:00
3 changed files with 91 additions and 22 deletions
--- a/src/main/resources/templates/overlay.html
+++ b/src/main/resources/templates/overlay.html
@ -61,7 +61,9 @@
    document.addEventListener("DOMContentLoaded", async() => {
        await diceBox.init()

+        let timeout = 0;
        evtSource.addEventListener("message", function (event) {
+            clearInterval(timeout);
            let data = JSON.parse(event.data);
            diceBox.onRollComplete = (rollResult) => {
                let httpRequest = new XMLHttpRequest();
@ -74,7 +76,7 @@
                    results: rollResult,
                } ))
                if ({clearAfter} > 0) {
-                    setTimeout(() => diceBox.clear(), {clearAfter} * 1000)
+                    timeout = setTimeout(() => diceBox.clear(), {clearAfter} * 1000)
                }

            }
--- a/src/main/resources/templates/pub/index.html
+++ b/src/main/resources/templates/pub/index.html
@ -13,7 +13,6 @@
        .collapsible {
            background-color: #333333;
            color: black;
-            cursor: pointer;
            margin-top: 10px;
            padding: 18px;
            width: 100%;
@ -39,6 +38,14 @@
            background: #333333;
            color: #fff
        }
+
+        button:hover {
+            background: #444444;
+        }
+        button:active {
+            background: #222222;
+        }
+
        input {
            margin: 10px;
        }
@ -106,6 +113,11 @@
            color: #000
        }

+
+        .overlayButton:hover {
+            background: transparent;
+        }
+
        .tooltip {
            position: fixed;
            border-radius: 0.5rem;
@ -133,10 +145,10 @@
 <body class="w3-theme-l1">
 <div class="w3-container w3-content" style="height: 95vh; display: flex; flex-direction: column; justify-content: space-between;  padding: 25px">
    <h1 style="text-align: center">Dice-Tower</h1>
-    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto">
-        <label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 75%" required onkeyup="start(event)"/><br/>
-        <label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 75%" required onkeyup="start(event)"/><br/>
-        <button id="start" onclick="start()" style="align-self: center">Start 🞂</button>
+    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto;">
+        <label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 50%; margin-top: 20px" required onkeyup="start(event)"/><br/>
+        <label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 50%" required onkeyup="start(event)"/><br/>
+        <button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Start 🞂</button>
    </div>
    <div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
        <button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs  <a>🞃</a></button>
@ -168,22 +180,40 @@
                <option value="smooth">Smooth</option>
                <option value="wooden">Wooden</option>
            </select>
-            <br/>
-            <color-picker id="themeColor"></color-picker><br/>
+            <color-picker id="themeColor"></color-picker>
            <div id="dice-box"></div>

-            <button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
-            <button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button>
+            <button style="margin: 10px" id="preview">Preview 🔎</button>
+            <button style="margin: 10px" onclick="saveDice()">Save 💾</button>
            <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
-        </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><br/><br/>
-        <label for="resultSwitch">Show all results </label>
-        <label class="switch">
-            <input type="checkbox" id="resultSwitch">
-            <span class="slider"></span>
-        </label>
+        </div>
+        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px 25px;">
+            <label style="font-size: x-large; font-weight: bold;">Roll </label>
+            <button style="border: transparent; border-radius: 100%; font-size: x-large; font-weight: bold; height: 50px; width: 50px" onclick="removeDice()">-</button>
+            <label style="font-size: x-large; font-weight: bold;" id="dice-amount">1</label>
+            <button style="border: transparent; border-radius: 100%; font-size: x-large; font-weight: bold; height: 50px; width: 50px" onclick="addDice()">+</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d4')">D4</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d6')">D6</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d8')">D8</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d10')">D10</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d12')">D12</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d20')">D20</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d100')">D100</button>
+        </div>
+        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px;">
+            <label for="command">Command </label>
+            <input type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
+            <button hidden id="roll" onclick="roll()">Roll 🎲</button>
+            <button popovertarget="command-hint" data-trigger="hover" class="overlayButton">🛈</button>
+        </div>
+
+        <div style="margin: 20px 25px">
+            <label for="resultSwitch">Show all results </label>
+            <label class="switch">
+                <input type="checkbox" id="resultSwitch">
+                <span class="slider"></span>
+            </label>
+        </div>
    </div>
    <div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container" style="padding: 25px; flex-grow: 1; margin-bottom: auto">
        <iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden; border: 0" onload="this.height=this.contentWindow.document.body.scrollHeight;" ></iframe>
@ -193,8 +223,8 @@
        <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>
+            <li><strong>scale</strong> changes the size of the dice (any value over 1)</li>
+            <li><strong>clearAfter</strong> time until dice are cleared (in seconds; remove param or set -1 to keep the dice)</li>
        </ul>
    </div>
    <div popover id="all-results-hint" class="tooltip">
@ -206,8 +236,39 @@
    <div popover id="save-dice-hint" class="tooltip">
        This saves your current theme and theme color for current Name
    </div>
+    <div popover id="command-hint" class="tooltip">
+        Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"
+    </div>
+
+    <div style="margin-top: 20px; flex-grow: 1" id="how-to">
+        <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
+            <h2 style="text-align: center">How-To</h2>
+            <ul>
+                <li>Join a room by entering your character name and the name of the room</li>
+                <li>Open your Dice-Overlay either in a new Tab or as a browser source in OBS</li>
+                <ul>
+                    <li>Only open your Dice-Overlay once!</li>
+                    <li>You can configure your Overlay with query parameters (more information at the info element next to the link)</li>
+                </ul>
+                <li>Configure your dice</li>
+                <li>Save your dice configuration</li>
+                <li>Start rolling</li>
+            </ul>
+        </div>
+    </div>
 </div>
 <script>
+    function addDice() {
+        let amount = +document.getElementById('dice-amount').innerText
+        document.getElementById('dice-amount').innerText = amount + 1
+    }
+
+    function removeDice() {
+        let amount = +document.getElementById('dice-amount').innerText
+        if (amount > 1) {
+            document.getElementById('dice-amount').innerText = amount - 1
+        }
+    }
    function url() {
        return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
    }
@ -222,6 +283,7 @@
            document.getElementById('dice-tower').hidden = false;
            document.getElementById('name').hidden = true;
            document.getElementById('room').hidden = true;
+            document.getElementById('how-to').hidden = true;
            document.getElementById('results').hidden = false;
            document.getElementById('nameLabel').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
            document.getElementById('roomLabel').innerHTML = '<strong style="font-size:medium;">' + document.getElementById('room').value + '</strong>';
@ -236,6 +298,11 @@
        }
    }

+    function rollEasy(dice) {
+        document.getElementById('command').value = document.getElementById('dice-amount').innerText + dice;
+        roll();
+    }
+
    function roll(event) {
        if((!event || event.keyCode === 13) && document.getElementById('command').value?.length > 0) {
            let httpRequest = new XMLHttpRequest();
--- a/src/main/resources/templates/results.html
+++ b/src/main/resources/templates/results.html
@ -31,7 +31,7 @@
                    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
+            node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> 🎲	' + resultText
            name.appendChild(node)
            document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
        }
Author	SHA1	Message	Date
arindy	80d331cdd3	Merge pull request 'adds buttons for simple commands' (#16 ) from adds-easy-way-to-roll into main All checks were successful CI / deploy (push) Successful in 4m18s Details Reviewed-on: #16	2025-02-10 18:39:00 +01:00
Arindy	0e3d88cd4a	fixes overlay tooltip All checks were successful CI / deploy (push) Successful in 4m14s Details CI / deploy (pull_request) Successful in 4m17s Details	2025-02-10 18:26:44 +01:00
Arindy	cb077b50de	adds how-to All checks were successful CI / deploy (push) Successful in 4m21s Details CI / deploy (pull_request) Successful in 4m19s Details	2025-02-10 18:19:54 +01:00
Arindy	9def3240b2	styles buttons All checks were successful CI / deploy (push) Successful in 4m29s Details CI / deploy (pull_request) Successful in 4m22s Details	2025-02-10 18:01:57 +01:00
Arindy	13eacc886d	adds buttons for simple commands All checks were successful CI / deploy (push) Successful in 4m18s Details CI / deploy (pull_request) Successful in 4m17s Details	2025-02-10 17:46:10 +01:00