1 files changed, 53 insertions, 1 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));