feat: betterttv emotes

3 files changed, 43 insertions, 1 deletions

diff --git a/scripts/chat.js b/scripts/chat.js
index 2c0eaad..6f48a6b 100644
--- a/scripts/chat.js
+++ b/scripts/chat.js
@@ -72,7 +72,14 @@ function addMessage(message) {
     usernameElem.textContent = `${message.nick}:`;
     
     // message text
-    elem.innerHTML += ' ' + message.params[1];
+    let msgWords = message.params[1].split(" ");
+    for (let i = 0; i < msgWords.length; i++) {
+        if (msgWords[i] in emotes) {
+            msgWords[i] = `<img src="${emotes[msgWords[i]]}" loading="lazy" alt="${msgWords[i]}" />`;
+        }
+    }
+    
+    elem.innerHTML += ' ' + msgWords.join(" ");
     
     messages.append(elem);
     
diff --git a/scripts/emotes.js b/scripts/emotes.js
new file mode 100644
index 0000000..96bc103
--- /dev/null
+++ b/scripts/emotes.js
@@ -0,0 +1,24 @@
+function getBetterTTVChannelEmotes(twitchId, emotes) {
+    return fetch(`https://api.betterttv.net/3/cached/users/twitch/${twitchId}`)
+        .then((r) => r.json())
+        .then((json) => {
+            if ("message" in json) {
+                addSystemMessage(`${json["message"]} (BetterTTV)`);
+                return;
+            }
+            
+            for (const e of [...json["channelEmotes"], ...json["sharedEmotes"]]) {
+                emotes[e["code"]] = `https://cdn.betterttv.net/emote/${e["id"]}/1x.webp`;
+            }
+        });
+}
+
+function getBetterTTVGlobalEmotes(emotes) {
+    return fetch(`https://api.betterttv.net/3/cached/emotes/global`)
+        .then((r) => r.json())
+        .then((json) => {
+            for (const e of json) {
+                emotes[e["code"]] = `https://cdn.betterttv.net/emote/${e["id"]}/1x.webp`;
+            }
+        });
+}
\ No newline at end of file
diff --git a/twitch.html b/twitch.html
index fb65ce1..d606b48 100644
--- a/twitch.html
+++ b/twitch.html
@@ -10,12 +10,14 @@
         </noscript>
     </body>
 
+    <script src="/scripts/emotes.js"></script>
     <script src="/scripts/chat.js"></script>
     <script src="/scripts/badges.js"></script>
     <script>
         let user = null;
         const params = {};
         const badges = {};
+        const emotes = {};
         
         window.addEventListener("load", () => {
             for (const [k, v] of new URLSearchParams(window.location.search)) {
@@ -37,6 +39,15 @@
                     user = json[0];
                     connectToChat("wss://irc-ws.chat.twitch.tv", "justinfan12345", "65432", user["login"]);
                     getTwitchBadges(user["login"], badges);
+                    
+                    // adding emotes
+                    const emotePromises = [
+                        () => getBetterTTVChannelEmotes(user["id"], emotes),
+                        () => getBetterTTVGlobalEmotes(emotes)
+                    ];
+                    emotePromises
+                        .reduce((p, fn) => p.then(fn), Promise.resolve())
+                        .then(() => addSystemMessage("All emotes loaded"));
                 });
         });
     </script>