From 97409793e0d24b590101540cb9b5abcb15cc2588 Mon Sep 17 00:00:00 2001
From: ilotterytea <iltsu@alright.party>
Date: Fri, 12 Dec 2025 01:32:14 +0500
Subject: feat: emote popups

---
 chat.js      | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 extension.js |  3 ++-
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/chat.js b/chat.js
index f3e81ef..ed466e8 100644
--- a/chat.js
+++ b/chat.js
@@ -4,6 +4,58 @@ function getChannelName() {
     return null;
 }
 
+function addEmotePopup(node, emote) {
+    let popup;
+    console.log("added");
+
+    node.addEventListener("mouseenter", () => {
+        const img = document.createElement("img");
+        img.src = emote.fullurl;
+        img.alt = emote.code;
+
+        const code = document.createElement("p");
+        code.textContent = emote.code;
+        code.style.fontWeight = 'bold';
+
+        const type = document.createElement("p");
+        type.textContent = `Channel ${emote.instance} emote`;
+
+        const uploader = document.createElement("p");
+        uploader.textContent = `By: ${emote.uploader}`;
+
+        popup = document.createElement("div");
+        popup.append(img, code, type, uploader);
+
+        popup.style.position = 'absolute';
+        popup.style.display = 'flex';
+        popup.style.flexDirection = 'column';
+        popup.style.justifyContent = 'center';
+        popup.style.alignItems = 'center';
+        popup.style.padding = '8px';
+        popup.style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 20, 0.8))';
+        popup.style.color = '#fff';
+        popup.style.borderRadius = '4px';
+        popup.style.border = 'solid 1px rgba(10, 10, 10, 0.8)';
+        popup.style.fontSize = '12px';
+        popup.style.pointerEvents = 'none';
+        popup.style.zIndex = '10';
+
+        document.body.appendChild(popup);
+
+        const rect = node.getBoundingClientRect();
+        const popupRect = popup.getBoundingClientRect();
+        popup.style.top = `${rect.bottom + window.scrollY + 2}px`;
+        popup.style.left = `${rect.left + window.scrollX - (popupRect.width / 2)}px`;
+    });
+
+    node.addEventListener("mouseleave", () => {
+        if (popup) {
+            popup.remove();
+            popup = null;
+        }
+    });
+}
+
 function replaceEmotes(node, emotes) {
     const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null);
 
@@ -23,7 +75,7 @@ function replaceEmotes(node, emotes) {
                 img.src = emote.miniatureurl;
                 img.alt = word;
                 img.classList.add("tiny-emote");
-                img.addEventListener("mouseenter", () => console.log(word));
+                addEmotePopup(img, emote);
                 frag.appendChild(img);
             } else {
                 frag.appendChild(document.createTextNode(word));
diff --git a/extension.js b/extension.js
index 4771baa..ba741a9 100644
--- a/extension.js
+++ b/extension.js
@@ -28,7 +28,8 @@ const start = async () => {
                 miniatureurl: `${url}/static/userdata/emotes/${emote.id}/1x.${emote.ext}`,
                 fullurl: `${url}/static/userdata/emotes/${emote.id}/3x.${emote.ext}`,
                 uploader: emote.uploaded_by ? emote.uploaded_by.username : "Anonymous*",
-                instance: instanceUrl
+                instance: instanceUrl,
+                code: emote.code
             };
         }
     }
-- 
cgit v1.2.3