Continued work on 'The Network' theme, fixed username colors for buffered chats from offline users.

www/js/channel/chatPostprocessor.js

@@ -87,14 +87,29 @@ class chatPostprocessor{
     }
 
     buildEntry(pm){
+        //Define username color as syntatic sugar, assigning colors to usernames that don't already have one
+        let color = this.client.userList.assignColor(this.rawData.user);
+
+        //Set flair to username color
+        let flair = color;
+
+        //Set class suffix based on chat location
         const classSuffix = pm ? 'pm-panel-sesh' : 'chat';
         const classSuffixAlt = pm ? classSuffix : 'chat-panel';
+
         //Create chat-entry span
         this.chatEntry = document.createElement('span');
-        this.chatEntry.classList.add(`${classSuffixAlt}-buffer`,`${classSuffix}-entry`,`${classSuffix}-entry-${this.rawData.user}`);
+
+        //Add classes to classlist
+        this.chatEntry.classList.add(
+            `${classSuffixAlt}-buffer`,
+            `${classSuffix}-entry`,
+            `${classSuffix}-entry-${this.rawData.user}`,
+            `${classSuffix}-${color}`
+        );
 
         //Create high-level label
-        var highLevel = document.createElement('p');
+        let highLevel = document.createElement('p');
         highLevel.classList.add(`${classSuffixAlt}-buffer`,`${classSuffix}-entry-high-level`,"high-level");
         highLevel.textContent = utils.unescapeEntities(`${this.rawData.highLevel}`);
         this.chatEntry.appendChild(highLevel);
@@ -102,19 +117,15 @@ class chatPostprocessor{
         //If we're not using classic flair
         if(this.rawData.flair != "classic"){
             //Use flair
-            var flair = `flair-${this.rawData.flair}`;
-        //Otherwise
-        }else{
-            //Pull user's assigned color from the color map
-            var flair =  this.client.userList.colorMap.get(this.rawData.user);
+            flair = `flair-${this.rawData.flair}`;
         }
 
         //Create username label
-        var userLabel = document.createElement('p');
+        let userLabel = document.createElement('p');
         userLabel.classList.add(`${classSuffixAlt}-buffer`, `${classSuffix}-entry-username`, );
         
         //Create color span
-        var flairSpan = document.createElement('span');
+        let flairSpan = document.createElement('span');
         flairSpan.classList.add(`${classSuffix}-entry-flair-span`, flair);
         flairSpan.innerHTML = this.rawData.user;
 

www/js/channel/userlist.js

@@ -102,6 +102,27 @@ class userList{
         })
     }
 
+    /**
+     * Randomly assigns and gets a color to usernames that aren't on the colormap
+     * @param {String} user username to assign a color
+     */
+    assignColor(user){
+            //if this user wasn't in the previous colormap
+            if(this.colorMap.get(user) == null){
+                //randomly pick a color
+                let color = this.userColors[Math.floor(Math.random()*this.userColors.length)]
+
+                //Store new randomly selected color
+                this.colorMap.set(user, color);
+
+                //Return color
+                return color;
+            }else{
+                //Return color from previous entry
+                return this.colorMap.get(user);
+            }
+    }
+
     /**
      * Updates UX after user list change
      * @param {Array} list - Userlist data from server
@@ -116,19 +137,8 @@ class userList{
 
         //for each user
         list.forEach((user) => {
-            //randomly pick a color
-            var color = this.userColors[Math.floor(Math.random()*this.userColors.length)]
-
-            //if this user wasn't in the previous colormap
-            if(this.colorMap.get(user.user) == null){
-                //Store new randomly selected color
-                this.colorMap.set(user.user, color);
-            }else{
-                //Use color from previous entry
-                color = this.colorMap.get(user.user);
-            }
-
-            this.renderUser(user, color);
+            //Assign color and render user
+            this.renderUser(user, this.assignColor(user.user));
         });
 
         //Make sure we're not cutting the ux off