Started work on chat autocomplete

www/js/channel/chat.js

@@ -34,6 +34,8 @@ class chatBox{
         this.flairSelect = document.querySelector("#chat-panel-flair-select");
         this.chatBuffer = document.querySelector("#chat-panel-buffer-div");
         this.chatPrompt = document.querySelector("#chat-panel-prompt");
+        this.autocompletePlaceholder = document.querySelector("#chat-panel-prompt-autocomplete-filler");
+        this.autocompleteDisplay = document.querySelector("#chat-panel-prompt-autocomplete-display");
         this.settingsIcon = document.querySelector("#chat-panel-settings-icon");
         this.adminIcon = document.querySelector("#chat-panel-admin-icon");
         this.emoteIcon = document.querySelector("#chat-panel-emote-icon");
@@ -52,6 +54,7 @@ class chatBox{
     setupInput(){
         //Chat bar
         this.chatPrompt.addEventListener("keydown", this.send.bind(this));
+        this.chatPrompt.addEventListener("input", this.checkAutocomplete.bind(this));
         this.sendButton.addEventListener("click", this.send.bind(this));
         this.settingsIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
         this.adminIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
@@ -130,6 +133,11 @@ class chatBox{
         this.resizeAspect();
     }
 
+    catChat(text){
+        this.chatPrompt.value += text;
+        this.checkAutocomplete();
+    }
+
     send(event){
         if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
             this.commandPreprocessor.preprocess(this.chatPrompt.value);
@@ -137,6 +145,14 @@ class chatBox{
         }
     }
 
+    checkAutocomplete(event){
+        //Rebuild this fucker every time because it really doesn't take that much compute power and emotes/used tokes change
+        //Worst case we could store it persistantly and update as needed but I think that might be much
+        const dictionary = this.commandPreprocessor.buildAutocompleteDictionary();
+        this.autocompletePlaceholder.innerHTML = this.chatPrompt.value;
+
+    }
+
     handleClientInfo(data){
         this.updateFlairSelect(data.flairList, data.user.flair);
         this.updateHighSelect(data.user.highLevel);

www/js/channel/commandPreprocessor.js

@@ -143,6 +143,27 @@ class commandPreprocessor{
         return foundEmote;
     }
 
+    buildAutocompleteDictionary(){
+        //This isn't complete, just a placeholder for now
+        let dictionary = {
+            tokes: [
+                "toke"
+            ],
+            serverCMD: [
+                "whisper",
+                "announce",
+                "serverannounce",
+                "clear",
+                "kick"
+            ],
+            localCMD:[
+                "high"
+            ]
+        };
+
+        return dictionary;
+    }
+
 }
 
 class commandProcessor{

www/js/channel/panels/emotePanel.js

@@ -106,7 +106,7 @@ class emotePanel extends panelObj{
         }
 
         //Add the emote to the chatbox prompt
-        this.client.chatBox.chatPrompt.value += `[${emote}]`;
+        this.client.chatBox.catChat(`[${emote}]`);
     }
 
     addPersonalEmote(event){