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

www/css/theme/the-network.css

@@ -17,21 +17,22 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 /* Theme Variables */
 :root{
     --main-font: "open-sans", system-ui;
-    --bg0: rgb(14, 14, 14);
+    --bg0: rgb(37, 37, 37);
-    --bg0-alpha0: rgba(158, 158, 158, 0.4);
+    --bg0-alpha0: rgba(37, 37, 37, 0.4);
-    --bg0-alpha1: rgba(158, 158, 158, 0.75);
+    --bg0-alpha1: rgba(37, 37, 37, 0.75);
-    --bg1: rgb(70, 70, 70);
+    --bg1: rgb(1, 1, 1);
-    --bg2: rgb(220, 220, 220);
+    --bg1-gradient: linear-gradient(to top, rgb(1, 1, 1), rgb(37, 37, 37));
+    --bg2: rgb(0, 0, 0);
     --bg1-alt0: rgb(30, 30, 30);
     --bg2-alt0: rgb(200, 200, 200);
     --bg2-alt1: rgb(180, 180, 180);
 
-    --accent0: rgb(47, 47, 47);
+    --accent0: rgb(212, 212, 212);
-    --accent0-alt0: rgb(34, 34, 34);
+    --accent0-alt0: rgb(185, 185, 185);
-    --accent0-alt1: rgb(70, 70, 70);
+    --accent0-alt1: rgb(124, 124, 124);
-    --accent1: rgb(245, 245, 245);
+    --accent1: var(--accent0);
-    --accent1-alt0: rgb(185, 185, 185);
+    --accent1-alt0: var(--accent0-alt0);
-    --accent1-alt1: rgb(124, 124, 124);
+    --accent1-alt1: var(--accent0-alt1);
     --accent2: var(--accent0-alt0);
 
     --focus0: rgb(51, 153, 51);
@@ -82,7 +83,6 @@ body{
     background-color: var(--bg0);
     font-family: var(--main-font);
     color: var(--accent0);
-    background-image: url('/img/background.png');
     background-size: 5em;
     scrollbar-color: var(--accent0-alt1) transparent;
 }
@@ -118,6 +118,7 @@ button i{
 
 select{
     background-color: var(--bg2);
+    color: var(--accent0);
     border-radius: 0.5em;
     border: none;
 }
@@ -273,7 +274,7 @@ a.admin-list-entry-item{
 
 div.control-prompt{
     border-radius: 1em;
-    background-color: white;
+    background-color: var(--bg0);
 }
 
 div.control-prompt:focus-within{
@@ -284,6 +285,8 @@ input.control-prompt, input.control-prompt:focus{
     border: none;
     outline: none;
     box-shadow: none;
+    background-color: var(--bg0);
+    color: var(--accent0);
 }
 
 
@@ -293,7 +296,7 @@ input.control-prompt, input.control-prompt:focus{
 
 /* navbar */
 #navbar{
-    background-color: var(--bg1);
+    background-image: var(--bg1-gradient);
 }
 
 .navbar-item{
@@ -351,7 +354,6 @@ p.channel-guide-entry-item{
 
 #chat-panel-head-spacer-span, #chat-panel-users-div{
     background-color: var(--bg0);
-    background-image: url("/img/background.png");
     background-size: 2.3em
 }
 
@@ -360,9 +362,17 @@ p.channel-guide-entry-item{
     text-shadow: var(--focus-glow0-alt0);
 }
 
-.chat-entry{
+#chat-panel-control-div{
-    background-color: var(--bg2);
+    margin: 0;
-    border-bottom: 1px solid var(--bg2-alt1);
+    border-radius: 0;
+}
+
+.chat-entry:nth-child(even){
+    background-color: var(--bg0);
+}
+
+.chat-entry:nth-child(odd){
+    background-color: var(--bg1-alt0);
 }
 
 .serverwhisper{
@@ -397,6 +407,34 @@ p.channel-guide-entry-item{
      color: var(--userlist-color6);
 }
 
+.chat-userlist-color0{/*green0*/
+     border-left: solid 5px var(--userlist-color0);
+}
+
+.chat-userlist-color1{/*red0*/
+     border-left: solid 5px var(--userlist-color1);
+}
+
+.chat-userlist-color2{/*blue0*/
+     border-left: solid 5px var(--userlist-color2);
+}
+
+.chat-userlist-color3{/*tan0*/
+     border-left: solid 5px var(--userlist-color3);
+}
+
+.chat-userlist-color4{/*pink0*/
+     border-left: solid 5px var(--userlist-color4);
+}
+
+.chat-userlist-color5{/*orange*/
+     border-left: solid 5px var(--userlist-color5);
+}
+
+.chat-userlist-color6{/*violet*/
+     border-left: solid 5px var(--userlist-color6);
+}
+
 [class*="userlist-color"].chat-panel-users{
      text-shadow: var(--userlist-contrast-glow);
 }
@@ -501,6 +539,7 @@ Begin each subsection with a materials and equipment manifest.*/
 
 .high-level{
     text-shadow: 1px 1px 1px white, -1px -1px 1px white, 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white;
+    color: var(--bg2);
 }
 
 #media-panel-head-div{

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}`;
+            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);
         }
 
         //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
+            //Assign color and render user
-            var color = this.userColors[Math.floor(Math.random()*this.userColors.length)]
+            this.renderUser(user, this.assignColor(user.user));
-
-            //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);
         });
 
         //Make sure we're not cutting the ux off