creates chatoverlay

2025-02-12 15:48:24 +01:00
parent dd1497c432
commit 1eae3a8bbf
9 changed files with 294 additions and 3 deletions
--- a/src/main/resources/templates/chatoverlay.html
+++ b/src/main/resources/templates/chatoverlay.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Dice-Tower - Overlay</title>
+    <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="stylesheet" href="/overlay/style.css">
+    <script src="/vendor/comfy.js/comfy.min.js"></script>
+</head>
+<body>
+<div id="dice-box"></div>
+<div popover id="results" class="tooltip">
+</div>
+<script type="module">
+    import DiceBox from "/vendor/dice-box/dice-box.es.js";
+
+    const diceBox = new DiceBox("#dice-box", {
+        assetPath: "/vendor/assets/",
+        theme: '{theme}',
+        themeColor: '{themeColor}',
+        scale: {scale}
+    });
+    diceBox.init()
+    ComfyJS.Init('{channel}');
+
+    //maxDice
+
+    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})
+        ) {
+            toggleWait(true);
+
+            diceBox.onRollComplete = (rollResult) => {
+                rollResult.forEach(result => {
+                    let values = []
+                    result.rolls.forEach(roll => {
+                        values.push(roll.value);
+                    })
+                    document.getElementById('results').innerHTML = '<strong>' + message + '</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(() => {
+                    diceBox.clear();
+                    document.getElementById('results').hidePopover()
+                }, {clearAfter} * 1000)
+            }
+
+            diceBox.roll(message);
+            setTimeout(() => {
+                toggleWait(false);
+            }, {clearAfter} * 1000 + {timeout} * 1000)
+        } else {
+            console.log('Not a valid command or not ready yet');
+        }
+    };
+
+    let wait;
+
+    function shouldWait() {
+        return wait;
+    }
+
+    function toggleWait(value) {
+        wait = value;
+    }
+</script>
+</body>
+</html>