feat: show emotes!!!

2 files changed, 64 insertions, 5 deletions

diff --git a/chat.js b/chat.js
index 080fb4c..f3e81ef 100644
--- a/chat.js
+++ b/chat.js
@@ -2,4 +2,34 @@ function getChannelName() {
     const path = window.location.pathname.split('/').filter(Boolean);
     if (path.length == 1) return path[path.length - 1];
     return null;
+}
+
+function replaceEmotes(node, emotes) {
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null);
+
+    const textNodes = [];
+    while (walker.nextNode()) textNodes.push(walker.currentNode);
+
+    textNodes.forEach(x => {
+        const parent = x.parentNode;
+        const frag = document.createDocumentFragment();
+        const words = x.textContent.split(/(\s+)/);
+
+        words.forEach(word => {
+            if (emotes[word]) {
+                const emote = emotes[word];
+
+                const img = document.createElement("img");
+                img.src = emote.miniatureurl;
+                img.alt = word;
+                img.classList.add("tiny-emote");
+                img.addEventListener("mouseenter", () => console.log(word));
+                frag.appendChild(img);
+            } else {
+                frag.appendChild(document.createTextNode(word));
+            }
+        });
+
+        parent.replaceChild(frag, x);
+    });
 }
\ No newline at end of file
diff --git a/extension.js b/extension.js
index 756c75e..dd7d229 100644
--- a/extension.js
+++ b/extension.js
@@ -1,4 +1,4 @@
-const start = () => {
+const start = async () => {
     // if there is no chat
     if (document.querySelector("div[data-a-target=chat-input]") == null) {
         return;
@@ -8,11 +8,40 @@ const start = () => {
     if (!channelName) {
         return;
     }
+
+    const emotes = {};
+
+    // fetching instances
+    const instances = ["https://alright.party"];
+    for (const instanceUrl of instances) {
+        const data = await getTinyEmotesUserByName(instanceUrl, channelName);
+        const user = data.data;
+
+        // adding emotes
+        const emote_set = user.emote_sets.find((x) => x.id === user.active_emote_set_id);
+        for (const emote of emote_set.emotes) {
+            emotes[emote.code] = {
+                miniatureurl: `${instanceUrl}/static/userdata/emotes/${emote.id}/1x.${emote.ext}`,
+                fullurl: `${instanceUrl}/static/userdata/emotes/${emote.id}/3x.${emote.ext}`,
+                uploader: emote.uploaded_by ? emote.uploaded_by.username : "Anonymous*",
+                instance: instanceUrl
+            };
+        }
+    }
     
-    getTinyEmotesUserByName("https://alright.party", channelName)
-        .then((x) => {
-            console.log(x);
-        });
+    const observer = new MutationObserver(mutations => {
+        for (const m of mutations) {
+            m.addedNodes.forEach(node => {
+                if (node.nodeType !== 1) return;
+                const textEl = node.querySelector('[data-a-target=chat-message-text]');
+                if (textEl) {
+                    replaceEmotes(textEl, emotes);
+                }
+            });
+        }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
 };
 
 function onPageReady(cb) {