Added basic browser-side chat pre-processor.

src/views/channel.ejs

@@ -121,6 +121,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
     <footer>
         <%- include('partial/scripts', {user}); %>
         <script src="/lib/socket.io/socket.io.min.js"></script>
+        <script src="/js/channel/chatPreprocessor.js"></script>
         <script src="/js/channel/chat.js"></script>
         <script src="/js/channel/userlist.js"></script>
         <script src="/js/channel/player.js"></script>

www/js/channel/chat.js

@@ -24,6 +24,7 @@ class chatBox{
 
         //clickDragger object
         this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div");
+        this.chatPreprocessor = new chatPreprocessor();
 
         //Element Nodes
         this.chatPanel = document.querySelector("#chat-panel-div");
@@ -106,7 +107,8 @@ class chatBox{
         chatBody.innerHTML = chat.msg;
         chatEntry.appendChild(chatBody);
 
-        this.chatBuffer.appendChild(chatEntry);
+
+        this.chatBuffer.appendChild(this.chatPreprocessor.preprocess(chatEntry));
     }
 
     async send(event){

www/js/channel/chatPreprocessor.js

@@ -0,0 +1,65 @@
+class chatPreprocessor{
+    constructor(){
+    }
+
+    preprocess(chatEntry){
+        //Set current chat nodes
+        this.chatEntry = chatEntry;
+        this.chatBody = this.chatEntry.querySelector(".chat-entry-body");
+
+        //Split the chat body into an array of objects representing each word
+        //We could pass this through arguments but these functions wont be very interoperable anyways since they expect a purpose-made hashtable
+        this.splitBody();
+
+        //Inject whitespace into un-processed words
+        this.addWhitespace();
+        
+        //Inject the pre-processed chat into the chatEntry node
+        this.injectBody();
+        //Return the pre-processed node
+        return this.chatEntry;
+    }
+
+    splitBody(){
+        //Create an empty array to hold the body
+        this.bodyArray = [];
+        //Split string by words
+        const splitString = this.chatBody.innerHTML.split(/(\W)+/g); //Group not-words together 
+
+        //for each word in the splitstring
+        splitString.forEach((string) => {
+            //create a word object
+            const wordObj = {
+                string: string,
+                type: "word"
+            }
+
+            //Add it to our body array
+            this.bodyArray.push(wordObj);
+        });
+    }
+
+    injectBody(){
+        //Create empty array to hold strings
+        var stringArray = [];
+        
+        //Extract strings into the empty array
+        this.bodyArray.forEach((wordObj) => {
+            stringArray.push(wordObj.string);
+        });
+
+        //Join the strings to fill the chat entry
+        this.chatBody.innerHTML = stringArray.join("");
+    }
+
+    addWhitespace(){
+        //for each word object in the body
+        this.bodyArray.forEach((wordObj, index) => {
+            //if the word object hasn't been pre-processed elsewhere
+            if(wordObj.type == "word"){
+                //Add invisible whitespace in-between characters to keep it from breaking page layout
+                this.bodyArray[index].string = wordObj.string.split("").join("ㅤ");
+            }
+        });
+    }
+}