Continued work on 'The Network' theme, fixed username colors for buffered chats from offline users.
This commit is contained in:
parent
3ea702b96d
commit
90e3589591
3 changed files with 100 additions and 40 deletions
|
|
@ -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-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{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue