Added site-wide emote support.

www/js/channel/chat.js

@@ -27,7 +27,7 @@ class chatBox{
         
         //Preprocessor objects
         this.commandPreprocessor = new commandPreprocessor(client);
-        this.chatPostprocessor = new chatPostprocessor();
+        this.chatPostprocessor = new chatPostprocessor(client);
 
         //Element Nodes
         this.chatPanel = document.querySelector("#chat-panel-div");

www/js/channel/chatPostprocessor.js

@@ -1,5 +1,6 @@
 class chatPostprocessor{
-    constructor(){
+    constructor(client){
+        this.client = client;
     }
 
     preprocess(chatEntry, rawData){
@@ -91,6 +92,15 @@ class chatPostprocessor{
                 img.classList.add('chat-img');
                 img.src = wordObj.link;
 
+                //Look for an emote by link since emotes are tx'd as bare links
+                const emote = this.client.chatBox.commandPreprocessor.getEmoteByLink(wordObj.link);
+
+                //If this is a known emote
+                if(emote != null){
+                    //Set the hover text to the emote's name
+                    img.title = `[${emote.name}]`;
+                }
+
                 //Append node to chatBody
                 injectNode(wordObj, img);
             }else if(wordObj.type == 'video'){
@@ -103,6 +113,15 @@ class chatPostprocessor{
                 vid.loop = true;
                 vid.muted = true;
 
+                //Look for an emote by link since emotes are tx'd as bare links
+                const emote = this.client.chatBox.commandPreprocessor.getEmoteByLink(wordObj.link);
+
+                //If this is a known emote
+                if(emote != null){
+                    //Set the hover text to the emote's name
+                    vid.title = `[${emote.name}]`;
+                }
+
                 injectNode(wordObj, vid);
             }
         });
@@ -216,7 +235,7 @@ class chatPostprocessor{
             userNode.classList.add('announcement-title');
             this.chatBody.classList.add('announcement-body');
             this.chatEntry.classList.add('announcement');
-        }else if(this.rawData.type == "toke" || this.rawData.type == "tokewhisper"){
+        }else if(this.rawData.type == "toke"){
             //Squash the high-level
             this.chatEntry.querySelector('.high-level').remove();
 
@@ -224,7 +243,16 @@ class chatPostprocessor{
             this.chatEntry.querySelector('.chat-entry-username').remove();
 
             //Add toke/tokewhisper class
-            this.chatBody.classList.add(this.rawData.type);
+            this.chatBody.classList.add("toke");
+        }else if(this.rawData.type == "tokewhisper"){
+            //Squash the high-level
+            this.chatEntry.querySelector('.high-level').remove();
+
+            //remove the username
+            this.chatEntry.querySelector('.chat-entry-username').remove();
+
+            //Add toke/tokewhisper class
+            this.chatBody.classList.add("tokewhisper","serverwhisper");
         }
     }
 }

www/js/channel/commandPreprocessor.js

@@ -2,6 +2,19 @@ class commandPreprocessor{
     constructor(client){
         this.client = client;
         this.commandProcessor = new commandProcessor(client);
+        this.emotes = {
+            site: [],
+            chan: [],
+            personal: []
+        }
+
+        //define listeners
+        this.defineListeners();
+    }
+
+    defineListeners(){
+        //When we receive site-wide emote list
+        this.client.socket.on("siteEmotes", this.setSiteEmotes.bind(this));
     }
 
     preprocess(command){
@@ -13,6 +26,7 @@ class commandPreprocessor{
 
         if(this.sendFlag){
             this.message = command;
+            this.processEmotes();
             this.processLinks();
             this.sendRemoteCommand();
         }
@@ -38,6 +52,14 @@ class commandPreprocessor{
         }
     }
 
+    processEmotes(){
+        //Does checking each word for an emote use more or less cycles than running replace against each emote?
+        //Not sure, but it's sure as fuck easier to write it that way lmao
+        this.emotes.site.forEach((emote) => {
+            this.message = this.message.replaceAll(`[${emote.name}]`, emote.link);
+        });
+    }
+
     processLinks(){
         //Strip out file seperators in-case the user is being a smart-ass
         this.message = this.message.replaceAll('␜','');
@@ -66,6 +88,25 @@ class commandPreprocessor{
         this.client.socket.emit("chatMessage",{msg: this.message, links: this.links});
     }
 
+    setSiteEmotes(data){
+        this.emotes.site = data;
+    }
+
+    getEmoteByLink(link){
+        //Create an empty variable to hold the found emote
+        var foundEmote = null;
+
+        //For every site-wide emote
+        this.emotes.site.forEach((emote) => {
+            //if we found a match
+            if(emote.link == link){
+                //return the match
+                 foundEmote = emote;
+            }
+        });
+
+        return foundEmote;
+    }
 
 }