Finished work on chat nameplate format settings.

www/js/channel/channel.js

@@ -327,6 +327,26 @@ class channel{
                 //Set theme
                 ThemeManager.setTheme(value);
                 //We're fuckin' done here
+                return;
+            case 'nameplateFormat':
+                switch(value){
+                    //If we're throwin' the nameplate to the left
+                    case 'left':
+                        console.log("FUCK")
+                        document.body.style.setProperty("--chat-entry-flex-direction", "row");
+                        break;
+                    //If we're throwin' er' up top, or someones bein' some sorta smartass
+                    default:
+                        document.body.style.setProperty("--chat-entry-flex-direction", "column");
+                        break;
+                }
+
+                //If the chatbox is loaded in
+                if(this.chatBox != null){
+                    //Re render any existing chats
+                    this.chatBox.rerenderBuffer();
+                }
+
                 return;
             case 'chatWidthMin':
                 //If the chat isn't loaded
@@ -391,6 +411,7 @@ class channel{
         ["liveSyncTolerance", 10],
         ["syncDelta", 6],
         ["theme", "The Network (Classic)"],
+        ["nameplateFormat", "left"],
         ["chatWidthMin", 20],
         ["disablePortrait", false],
         ["disableSendButton", false],

www/js/channel/chat.js

@@ -680,4 +680,24 @@ class chatBox{
             this.chatBuffer.scrollTop = this.chatBuffer.scrollHeight - Math.round(this.chatBuffer.getBoundingClientRect().height);
         }
     }
+
+    /**
+     * Re-render buffer from raw data (useful for settings changes)
+     */
+    rerenderBuffer(){
+        //Yank existing messages from buffer, converting nodelist to array to avoid annoying behavior in for loops
+        const buffer = Array.from(this.chatBuffer.children);
+
+        //Iterate through all received messages
+        for(const message of buffer){
+            //Pull raw message data from saved message
+            const rawData = JSON.parse(message.dataset.rawData);
+
+            //Nuke the message
+            message.remove();
+
+            //Re-render chat out to the buffer
+            this.displayChat(rawData);
+        }
+    }
 }

www/js/channel/chatPostprocessor.js

@@ -97,8 +97,9 @@ class chatPostprocessor{
         const classSuffix = pm ? 'pm-panel-sesh' : 'chat';
         const classSuffixAlt = pm ? classSuffix : 'chat-panel';
 
-        //Create chat-entry span
+        //Create chat-entry span, and store raw message data
         this.chatEntry = document.createElement('span');
+        this.chatEntry.dataset.rawData = JSON.stringify(this.rawData);
 
         //Add classes to classlist
         this.chatEntry.classList.add(
@@ -137,8 +138,19 @@ class chatPostprocessor{
         flairSpan.classList.add(`${classSuffix}-entry-flair-span`, flair);
         flairSpan.innerHTML = this.rawData.user;
 
-        //Inject flair span into user label before the colon
-        userLabel.innerHTML = `${flairSpan.outerHTML}: `;
+        let colonSpan = document.createElement('span');
+        colonSpan.classList.add(`${classSuffix}-entry-colon-span`);
+        if(localStorage.getItem('nameplateFormat') == "left"){
+            colonSpan.innerHTML = ': ';
+        }else if(localStorage.getItem('nameplateFormat') == "timestamp"){
+            colonSpan.classList.add(`${classSuffix}-entry-timestamp`);
+            colonSpan.innerHTML = ` (${timestamp.toLocaleString()})`;
+        }
+
+
+        //Append flair and colon(or timestamp) spans to userLabel
+        userLabel.appendChild(flairSpan);
+        userLabel.appendChild(colonSpan);
 
         //Append user label to the nameplate
         nameplate.appendChild(userLabel);

www/js/channel/panels/settingsPanel.js

@@ -62,6 +62,11 @@ class settingsPanel extends panelObj{
          */
         this.theme = this.panelDocument.querySelector("#settings-panel-theme");
 
+        /**
+         *  Chat nameplate format
+         */
+        this.nameplateFormat = this.panelDocument.querySelector("#settings-panel-nameplate-format");
+
         /**
          * Chat Width Minimum while Size-Locked to Media Aspect Ratio
          */
@@ -144,6 +149,7 @@ class settingsPanel extends panelObj{
         this.liveSyncTolerance.addEventListener('change', this.updateLiveSyncTolerance.bind(this));
         this.syncDelta.addEventListener('change', this.updateSyncDelta.bind(this));
         this.theme.addEventListener('change', this.updateTheme.bind(this));
+        this.nameplateFormat.addEventListener('change', this.updateNameplateFormat.bind(this));
         this.chatWidthMinimum.addEventListener('change', this.updateChatWidthMinimum.bind(this));
         this.disablePortrait.addEventListener('change', this.updateDisablePortrait.bind(this));
         this.disableSendButton.addEventListener('change', this.updateDisableSendButton.bind(this));
@@ -163,6 +169,7 @@ class settingsPanel extends panelObj{
         this.liveSyncTolerance.value = localStorage.getItem("liveSyncTolerance");
         this.syncDelta.value = localStorage.getItem("syncDelta");
         this.theme.querySelector('select').value = localStorage.getItem("theme");
+        this.nameplateFormat.querySelector('select').value = localStorage.getItem("nameplateFormat");
         this.chatWidthMinimum.value = localStorage.getItem("chatWidthMin");
         this.disablePortrait.checked = localStorage.getItem("disablePortrait") == 'true';
         this.disableSendButton.checked = localStorage.getItem("disableSendButton") == 'true';
@@ -261,6 +268,15 @@ class settingsPanel extends panelObj{
         client.processConfig("theme", theme);
     }
 
+    /**
+     * Update nameplate format
+     */
+    updateNameplateFormat(){
+        let format = this.nameplateFormat.querySelector('select').value;
+        localStorage.setItem("nameplateFormat", format);
+        client.processConfig("nameplateFormat", format);
+    }
+
     /**
      * Handles Chat Width minimum Changes
      */