From b51d1eb1d2518202a671deb3d9df27dee95f2e03 Mon Sep 17 00:00:00 2001
From: choelzl <cedric.hoelzl@helcel.net>
Date: Wed, 23 Feb 2022 20:41:12 +0100
Subject: [PATCH] WIP

---
 twitch/customEmoteWall.js | 14 +++++------
 web/emotewall/index.js    | 53 ++++++++++++++++++++++++++-------------
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/twitch/customEmoteWall.js b/twitch/customEmoteWall.js
index 5741389..20847ee 100644
--- a/twitch/customEmoteWall.js
+++ b/twitch/customEmoteWall.js
@@ -40,7 +40,7 @@
         message = event.getMessage();
         tags = event.getTags();
         if(message.indexOf('!')!=0)
-            sendData('bounce',event.getTags().get('emotes'), getNoTwitchEmotes(event,message).split(/\s+/))
+            sendData('bounce',event.getTags().get('emotes').split('/'), getNoTwitchEmotes(event,message).split(/\s+/))
     })
 
     $.bind('command', function(event) {
@@ -53,15 +53,15 @@
             if (!action) {
                 $.say($.whisperPrefix(sender) + $.lang.get('ew.help', ' Use "!ew [rain | firework | volcano | bomb | explosion] emote" to render emotes.'));
             } else if (action.equalsIgnoreCase('rain')) {
-                sendData('rain',event.getTags().get('emotes'), getNoTwitchEmotes(event,event.getMessage()))
+                sendData('rain',event.getTags().get('emotes').split('/'), getNoTwitchEmotes(event,event.getMessage()).split(/\s+/))
             } else if (action.equalsIgnoreCase('firework')) {
-                sendData('firework',event.getTags().get('emotes'), getNoTwitchEmotes(event,event.getMessage()))
+                sendData('firework',event.getTags().get('emotes').split('/'), getNoTwitchEmotes(event,event.getMessage()).split(/\s+/))
             } else if (action.equalsIgnoreCase('volcano')) {
-                sendData('volcano',event.getTags().get('emotes'), getNoTwitchEmotes(event,event.getMessage()))
+                sendData('volcano',event.getTags().get('emotes').split('/'), getNoTwitchEmotes(event,event.getMessage()).split(/\s+/))
             } else if (action.equalsIgnoreCase('bomb')) {
-                sendData('bomb',event.getTags().get('emotes'), getNoTwitchEmotes(event,event.getMessage()))
+                sendData('bomb',event.getTags().get('emotes').split('/'), getNoTwitchEmotes(event,event.getMessage()).split(/\s+/))
             } else if (action.equalsIgnoreCase('explosion')) {
-                sendData('explosion',event.getTags().get('emotes'), getNoTwitchEmotes(event,event.getMessage()))
+                sendData('explosion',event.getTags().get('emotes').split('/'), getNoTwitchEmotes(event,event.getMessage()).split(/\s+/))
             } else {
                 $.say($.whisperPrefix(sender) + $.lang.get('ew.help', ' Use "!ew [rain | firework | volcano | bomb | explosion] emote" to render emotes.'));
             }
@@ -77,7 +77,7 @@
     });
 
     $.bind('initReady', function() {
-        $.registerChatCommand('./custom/custom/customOverlay.js', 'ew');
+        $.registerChatCommand('./custom/custom/customEmoteWall.js', 'ew');
         $.registerChatSubcommand('ew', 'rain', 2);
         $.registerChatSubcommand('ew', 'firework', 2);
         $.registerChatSubcommand('ew', 'volcano', 2);
diff --git a/web/emotewall/index.js b/web/emotewall/index.js
index 43288d3..51da4d9 100644
--- a/web/emotewall/index.js
+++ b/web/emotewall/index.js
@@ -62,8 +62,13 @@ const canvasSizing = (cnv) => {
     resizeCanvas();
 }
 
-
-
+function waitFor(conditionFunction) {
+    const poll = resolve => {
+        if(conditionFunction()) resolve();
+        else setTimeout(_ => poll(resolve), 400);
+    }
+    return new Promise(poll);
+}
 
 
 
@@ -95,6 +100,23 @@ $(async function () {
         return loadedimages;
     }
 
+
+    const loadImagesTwitch = async(emotesId) => {
+        let loadcount = 0, loadtotal = emotesId.length;
+        let localPreloaded = false;
+        for (let i=0; i<emotesId.length; i++) {
+            var image = new Image();
+            image.onload = function () {
+                loadcount++;
+                if (loadcount == loadtotal) localPreloaded = true;
+            };
+            image.src = "https://static-cdn.jtvnw.net/emoticons/v2/" + emotesId[i] + "/default/dark/2.0";
+            img_map[emotesId[i]] = image;
+        }
+        await waitFor(_ => localPreloaded === true);
+        return true;
+    }
+
     const randEmote = (set) => {
         if(!Array.isArray(set))  
             set = Object.keys(img_map) || []
@@ -299,21 +321,6 @@ $(async function () {
           }, 100);
     }
 
-
-
-    async function init() {
-        main(0);
-        sleep(1000).then(()=>{
-        createParticule(BounceGP, randEmote(), {}, {})
-        createParticule(BounceP, randEmote(), {}, {})
-        createParticule(BounceP, randEmote(), {}, {})
-        createParticule(BombP, randEmote(), {}, {})
-        createParticule(FireworkP, randEmote(), {}, {})
-        genRain();
-        genVolcano();
-        })
-    }
-
     function main(tframe) {
         window.requestAnimationFrame(main);
         
@@ -329,7 +336,17 @@ $(async function () {
         }
     }
 
-    init()
+    main(0);
+
+    const handleEmoteData = (d) =>{
+        let te = d.twitch, ce = d.custom.filter(e=> img_map[e]);
+        if(!te || te.length == 0){
+            return ce;
+        }else{
+            let cleanTE = te.map(e => e.split(":")[0]);
+            return ce.concat(loadImagesTwitch(cleanTE))
+        }
+    }
 
     const handleSocketMessage = (e)=>{
         try {