diff --git a/www/css/theme/the-network.css b/www/css/theme/the-network.css index d8f427e..e85da5e 100644 --- a/www/css/theme/the-network.css +++ b/www/css/theme/the-network.css @@ -17,21 +17,22 @@ along with this program. If not, see .*/ /* Theme Variables */ :root{ --main-font: "open-sans", system-ui; - --bg0: rgb(14, 14, 14); - --bg0-alpha0: rgba(158, 158, 158, 0.4); - --bg0-alpha1: rgba(158, 158, 158, 0.75); - --bg1: rgb(70, 70, 70); - --bg2: rgb(220, 220, 220); + --bg0: rgb(37, 37, 37); + --bg0-alpha0: rgba(37, 37, 37, 0.4); + --bg0-alpha1: rgba(37, 37, 37, 0.75); + --bg1: rgb(1, 1, 1); + --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-alt0: rgb(34, 34, 34); - --accent0-alt1: rgb(70, 70, 70); - --accent1: rgb(245, 245, 245); - --accent1-alt0: rgb(185, 185, 185); - --accent1-alt1: rgb(124, 124, 124); + --accent0: rgb(212, 212, 212); + --accent0-alt0: rgb(185, 185, 185); + --accent0-alt1: rgb(124, 124, 124); + --accent1: var(--accent0); + --accent1-alt0: var(--accent0-alt0); + --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{ - background-color: var(--bg2); - border-bottom: 1px solid var(--bg2-alt1); +#chat-panel-control-div{ + margin: 0; + 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{ diff --git a/www/js/channel/chatPostprocessor.js b/www/js/channel/chatPostprocessor.js index 138cb1c..1ab660c 100644 --- a/www/js/channel/chatPostprocessor.js +++ b/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; diff --git a/www/js/channel/userlist.js b/www/js/channel/userlist.js index 86b51c2..89abe90 100644 --- a/www/js/channel/userlist.js +++ b/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