feat: twitch badges

3 files changed, 40 insertions, 0 deletions

diff --git a/scripts/badges.js b/scripts/badges.js
new file mode 100644
index 0000000..3f8b8da
--- /dev/null
+++ b/scripts/badges.js
@@ -0,0 +1,24 @@
+function getTwitchBadges(name, badges) {
+    const bb = [];
+    fetch("https://api.ivr.fi/v2/twitch/badges/global")
+        .then((r) => r.json())
+        .then((b) => {
+            for (const badge of b) {
+                for (const version of badge["versions"]) {
+                    badges[`${badge["set_id"]}/${version["id"]}`] = version["image_url_1x"];
+                }
+            }
+            addSystemMessage("Loaded Twitch global badges.");
+        });
+    
+    fetch(`https://api.ivr.fi/v2/twitch/badges/channel?login=${name}`)
+        .then((r) => r.json())
+        .then((b) => {
+            for (const badge of b) {
+                for (const version of badge["versions"]) {
+                    badges[`${badge["set_id"]}/${version["id"]}`] = version["image_url_1x"];
+                }
+            }
+            addSystemMessage("Loaded Twitch channel badges.");
+        });
+}
\ No newline at end of file
diff --git a/scripts/chat.js b/scripts/chat.js
index 83d7445..2c0eaad 100644
--- a/scripts/chat.js
+++ b/scripts/chat.js
@@ -50,6 +50,18 @@ function addMessage(message) {
     const elem = document.createElement("p");
     elem.classList.add("message");
     
+    // badges
+    if ("badges" in message.tags && message.tags["badges"].length > 0) {
+        for (const b of message.tags["badges"].split(",")) {
+            if (b in badges) {
+                const badgeImg = document.createElement("img");
+                badgeImg.src = badges[b];
+                badgeImg.loading = 'lazy';
+                elem.append(badgeImg);
+            }
+        }
+    }
+    
     // username
     const usernameElem = document.createElement("span");
     elem.append(usernameElem);
diff --git a/twitch.html b/twitch.html
index a2cd48d..f5df236 100644
--- a/twitch.html
+++ b/twitch.html
@@ -11,9 +11,13 @@
     </body>
 
     <script src="/scripts/chat.js"></script>
+    <script src="/scripts/badges.js"></script>
     <script>
+        const badges = {};
+        
         window.addEventListener("load", () => {
             connectToChat("wss://irc-ws.chat.twitch.tv", "justinfan12345", "65432", "forsen");
+            getTwitchBadges("forsen", badges);
         });
     </script>
 </html>
\ No newline at end of file