creates chatoverlay

pom.xml

@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>de.arindy</groupId>
     <artifactId>dice-tower</artifactId>
-    <version>1.1.1</version>
+    <version>1.1.0-SNAPSHOT</version>
 
     <properties>
         <compiler-plugin.version>3.13.0</compiler-plugin.version>

src/main/resources/templates/chatoverlay.html

@@ -28,7 +28,7 @@
     ComfyJS.onCommand = async (user, command, message, flags) => {
         if ((
                 flags.broadcaster || ({modsAllowed} && flags.mod) || ({vipAllowed} && flags.vip) || ({subsAllowed} && flags.subscriber
-                )) && '{cmd}' === command && !shouldWait() && message.match(/^\d+d(4|6|8|10|12|20|100)$/) && (+message.split('d')[0] <= {maxDice})
+                )) && '{cmd}' === command && !shouldWait() && message.match(/\d+d(4|6|8|10|12|20|100)/) && (+message.split('d')[0] <= {maxDice})
         ) {
             toggleWait(true);
 
@@ -38,7 +38,7 @@
                     result.rolls.forEach(roll => {
                         values.push(roll.value);
                     })
-                    document.getElementById('results').innerHTML = '<strong>' + user + '</strong> rolls <strong>' + message + '</strong>:<br/> [' + values.map(value => value === 1 ? '<strong style="text-shadow: 2px 2px 10px red">' + value + '</strong>' : value === result.sides ? '<strong style="text-shadow: 2px 2px 10px 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>' + result.value + '</strong> '
+                    document.getElementById('results').innerHTML = '<strong>&ensp; D' + result.sides + '</strong>: [' + values.map(value => value === 1 ? '<strong style="text-shadow: 2px 2px 10px red">' + value + '</strong>' : value === result.sides ? '<strong style="text-shadow: 2px 2px 10px 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>' + result.value + '</strong> '
                 })
                 document.getElementById('results').showPopover()
                 setTimeout(() => {

src/main/resources/templates/chatoverlayconfig.html

@@ -38,8 +38,8 @@
         <div>
             <label for="channel">Channel </label>
             <input type="text" id="channel" style="width: 400px; margin-top: 20px" value="arindy"/>
-            <label for="cmd">Command !</label>
+            <label for="cmd">Command </label>
-            <input type="text" id="cmd" style="width: 100px; margin-top: 20px; margin-left: 0" value="roll"/>
+            <input type="text" id="cmd" style="width: 100px; margin-top: 20px" value="roll"/>
         </div>
         <div>
             <label class="checkbox" id="modsAllowed-container">Allow mods to roll
@@ -57,7 +57,7 @@
         </div>
         <div>
             <label for="scale">Dice-Scale </label>
-            <input type="number" id="scale" style="width: 50px; margin-top: 20px" value="9"/>
+            <input type="number" id="scale" style="width: 50px; margin-top: 20px" value="7"/>
             <label for="maxDice">Max number of dice </label>
             <input type="number" id="maxDice" style="width: 50px; margin-top: 20px" value="20"/>
         </div>
@@ -65,7 +65,7 @@
             <label for="clearAfter">Clear dice after (in seconds)</label>
             <input type="number" id="clearAfter" style="width: 50px; margin-top: 20px" value="10"/>
             <label for="timeout">Command-timeout (in seconds)</label>
-            <input type="number" id="timeout" style="width: 50px; margin-top: 20px" value="60"/>
+            <input type="number" id="timeout" style="width: 50px; margin-top: 20px" value="10"/>
         </div>
         <div id="dice-box" style="height: 400px"></div>
         <button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
@@ -127,7 +127,7 @@
                     "/chatoverlay/" + document.getElementById('channel').value +
                     "?cmd=" + document.getElementById('cmd').value +
                     "&theme=" + document.getElementById('theme').value +
-                    "&themeColor=" + encodeURIComponent(document.getElementById('themeColor').value) +
+                    "&themeColor=" + document.getElementById('themeColor').value +
                     "&scale=" + document.getElementById('scale').value +
                     "&maxDice=" + document.getElementById('maxDice').value +
                     "&clearAfter=" + document.getElementById('clearAfter').value +

src/main/resources/templates/index.html

@@ -176,7 +176,7 @@
     </div>
     <div style="margin-top: 20px; flex-grow: 1" id="chatOverlay">
         <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
-        If you are looking for a way to let your twitch chat roll click <a href target="_blank" id="chatOverlayLink">here</a>
+        If you are looking for a way to let chat roll click <a href target="_blank" id="chatOverlayLink">here</a>
         </div>
     </div>
 </div>