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

src/main/resources/templates/pub/index.html

@@ -168,22 +168,40 @@
                 <option value="smooth">Smooth</option>
                 <option value="wooden">Wooden</option>
             </select>
-            <br/>
+            <color-picker id="themeColor"></color-picker>
-            <color-picker id="themeColor"></color-picker><br/>
             <div id="dice-box"></div>
 
             <button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
             <button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button>
             <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
-        </div><br/>
+        </div>
-        <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
+        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px 25px;">
-        <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
+            <label style="font-size: x-large; font-weight: bold;">Roll </label>
-        <button hidden id="roll" onclick="roll()">Roll 🞂</button><br/><br/>
+            <button style="border: transparent; border-radius: 100%; font-size: x-large; font-weight: bold; height: 50px; width: 50px" onclick="removeDice()">-</button>
-        <label for="resultSwitch">Show all results </label>
+            <label style="font-size: x-large; font-weight: bold;" id="dice-amount">1</label>
-        <label class="switch">
+            <button style="border: transparent; border-radius: 100%; font-size: x-large; font-weight: bold; height: 50px; width: 50px" onclick="addDice()">+</button>
-            <input type="checkbox" id="resultSwitch">
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d4')">D4</button>
-            <span class="slider"></span>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d6')">D6</button>
-        </label>
+            <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>
@@ -206,8 +224,22 @@
     <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>
 <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 : '');
     }
@@ -236,6 +268,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();