adds dice instead of just rolling

src/main/resources/templates/overlay.html

@@ -15,6 +15,16 @@
 
     import DiceBox from "/vendor/dice-box/dice-box-threejs.es.js";
 
+    function until(conditionFunction) {
+
+        const poll = resolve => {
+            if(conditionFunction()) resolve();
+            else setTimeout(_ => poll(resolve), 400);
+        }
+
+        return new Promise(poll);
+    }
+
     const evtSource = new EventSource(url() + "/dice/{diceid??}/stream");
     const diceBox = new DiceBox("#dice-box", {
         assetPath: "/vendor/dice-box/",
@@ -25,10 +35,12 @@
     });
     diceBox.initialize();
     let timeout = 0;
+    let finished = true;
     evtSource.addEventListener("message", function (event) {
         clearInterval(timeout);
         let data = JSON.parse(event.data);
         diceBox.onRollComplete = () => {
+            finished = true;
             if ({clearAfter} > 0) {
                 timeout = setTimeout(() => diceBox.clearDice(), {clearAfter} * 1000)
             }
@@ -39,8 +51,9 @@
                 background: data.faceColor,
                 foreground: data.numberColor
             }
-        }).then(() => {
+        }).then(async () => {
-            diceBox.roll(data.roll.filter(it => it.split('@')[0].split('d')[1] !== "2").join('&'));
+            await until(_ => finished)
+            diceBox.add(data.roll.filter(it => it.split('@')[0].split('d')[1] !== "2").join('&'));
         })
     })
 </script>