Basic auto-complete functionality added. Just need to finish up with toke command memory and permission map system.

www/js/channel/chat.js

@@ -54,7 +54,9 @@ class chatBox{
     setupInput(){
         //Chat bar
         this.chatPrompt.addEventListener("keydown", this.send.bind(this));
-        this.chatPrompt.addEventListener("input", this.checkAutocomplete.bind(this));
+        this.chatPrompt.addEventListener("keydown", this.tabComplete.bind(this));
+        this.chatPrompt.addEventListener("input", this.displayAutocomplete.bind(this));
+        this.autocompleteDisplay.addEventListener("click", this.tabComplete.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))});
@@ -135,7 +137,7 @@ class chatBox{
 
     catChat(text){
         this.chatPrompt.value += text;
-        this.checkAutocomplete();
+        this.displayAutocomplete();
     }
 
     send(event){
@@ -145,12 +147,84 @@ class chatBox{
         }
     }
 
-    checkAutocomplete(event){
+    displayAutocomplete(event){
+        //Find current match
+        const match = this.checkAutocomplete();
+
+        //Set placeholder to space out the autocomplete display
+        this.autocompletePlaceholder.innerHTML = this.chatPrompt.value;
+        //Set the autocomplete display
+        this.autocompleteDisplay.innerHTML = match.match.replace(match.word, '');
+    }
+
+    tabComplete(event){
+        //If we hit tab or this isn't a keyboard event
+        if(event.key == "Tab" || event.key == null){
+            //Prevent default action
+            event.preventDefault();
+
+            //return focus to the chat prompt
+            this.chatPrompt.focus();
+
+            //Grab autocompletion match
+            const match = this.checkAutocomplete()
+
+            //If we have a match
+            if(match.match != ''){
+                //Autocomplete the current word
+                this.chatPrompt.value += match.match.replace(match.word, '');
+
+                //Clear out the autocomplete display
+                this.autocompleteDisplay.innerHTML = '';
+            }
+        }
+    }
+
+    checkAutocomplete(input = this.chatPrompt.value){
         //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;
+        const dictionary = this.commandPreprocessor.buildAutocompleteDictionary();       
 
+        //Split our input by whitespace
+        const splitInput = input.split(/\s/g);
+        //Get the current word we're working on
+        const word = splitInput[splitInput.length - 1];
+        let matches = [];
+
+
+        //Run through dictionary sets
+        for(let set of Object.keys(dictionary)){
+            //Go through the current definitions of the current dictionary set
+            //I went with a for loop instead of a filter beacuse I wanted to pull the processed definition with pre/postfix
+            //and also directly push it into a shared array :P
+            for(let cmd of dictionary[set].cmds){
+                //Append the proper prefix/postfix to the current command
+                const definition = (`${dictionary[set].prefix}${cmd}${dictionary[set].postfix}`)
+
+                //if definition starts with the current word
+                if(word == '' ? false : definition.indexOf(word) == 0){
+                    //Add definition to match list
+                    matches.push(definition);
+                }
+            }
+        }
+
+        //If we found jack shit
+        if(matches.length == 0){
+            //Return jack shit
+            return {
+                match: '',
+                word
+            };
+        //If we got something
+        }else{
+            //return our top match
+            return {
+                match: matches[0],
+                word
+            };
+
+        }
     }
 
     handleClientInfo(data){