highLevel syncs across chans, shows in userlist

src/app/channel/activeChannel.js

@@ -39,7 +39,7 @@ module.exports = class{
             userObj.sockets.push(socket.id);
         }else{
             await userDB.populate('flair');
-            userObj = new connectedUser(userDB.user, userDB.id, userDB.rank, chanRank, userDB.flair.name, this, socket);
+            userObj = new connectedUser(userDB, chanRank, this, socket);
         }
 
         //Set user entry in userlist
@@ -84,7 +84,8 @@ module.exports = class{
         this.userList.forEach((userObj, user) => {
             userList.push({
                 user: user,
-                flair: userObj.flair
+                flair: userObj.flair,
+                highLevel: userObj.highLevel
             });
         });
 

src/app/channel/chatHandler.js

@@ -28,15 +28,13 @@ module.exports = class{
 
     defineListeners(socket){
         socket.on("chatMessage", (data) => {this.relayChat(socket, data)});
-        socket.on("setFlair", async (data) => {this.setFlair(socket, data)});
+        socket.on("setFlair", (data) => {this.setFlair(socket, data)});
+        socket.on("setHighLevel", (data) => {this.setHighLevel(socket, data)});
     }
 
     relayChat(socket, data){
         //Trim and Sanatize for XSS
         const msg = validator.trim(validator.escape(data.msg));
-        //make sure high is an int
-        const high = validator.toInt(data.high);
-        
         const user = this.server.getSocketInfo(socket);
 
         //nuke the message if its empty or huge
@@ -44,12 +42,7 @@ module.exports = class{
             return;
         }
 
-        //nuke the message if the high number is wrong
+        this.server.io.in(socket.chan).emit("chatMessage", {user: user.user, flair: user.flair, highLevel: user.highLevel, msg});
-        if(high < 0 || high > 10){
-            return;
-        }
-
-        this.server.io.in(socket.chan).emit("chatMessage", {user: socket.user.user, flair: user.flair, high, msg});
     }
 
     async setFlair(socket, data){
@@ -60,8 +53,10 @@ module.exports = class{
                 //We can take this data raw since our schema checks it against existing flairs, and mongoose sanatizes queries
                 const flairDB = await userDB.setFlair(data.flair);
 
+                //GetConnects across all channels
                 const connections = this.server.getConnections(socket.user.user);
 
+                //For each connection
                 connections.forEach((conn) => {
                     conn.updateFlair(flairDB.name);
                 });
@@ -70,4 +65,27 @@ module.exports = class{
             }
         }
     }
+
+    async setHighLevel(socket, data){
+        var userDB = await userModel.findOne({user: socket.user.user});
+
+        if(userDB){
+            try{
+                //Set high level
+                userDB.highLevel = data.highLevel;
+                //Save user DB Document
+                await userDB.save();
+
+                //GetConnects across all channels
+                const connections = this.server.getConnections(socket.user.user);
+
+                //For each connection
+                connections.forEach((conn) => {
+                    conn.updateHighLevel(userDB.highLevel);
+                });
+            }catch(err){
+                return loggerUtils.socketExceptionHandler(socket, err);
+            }
+        }
+    }
 }

src/app/channel/connectedUser.js

@@ -19,12 +19,13 @@ const flairModel = require('../../schemas/flairSchema');
 const permissionModel = require('../../schemas/permissionSchema');
 
 module.exports = class{
-    constructor(id, name, rank, chanRank, flair, channel, socket){
+    constructor(userDB, chanRank, channel, socket){
-        this.id = id;
+        this.id = userDB.id;
-        this.name = name;
+        this.user = userDB.user;
-        this.rank = rank;
+        this.rank = userDB.rank;
+        this.highLevel = userDB.highLevel;
+        this.flair = userDB.flair.name;
         this.chanRank = chanRank;
-        this.flair = flair;
         this.channel = channel;
         this.sockets = [socket.id];
     }
@@ -59,6 +60,8 @@ module.exports = class{
             id: this.id,
             user: this.user,
             rank: this.rank,
+            chanRank: this.chanRank,
+            highLevel: this.highLevel,
             flair: this.flair
         }
 
@@ -79,12 +82,17 @@ module.exports = class{
     }
 
     updateFlair(flair){
-        //This will run multiple times in a row, we don't need to broadcast the userlist every time
-        if(this.flair != flair){
         this.flair = flair;
+
         this.channel.broadcastUserList();
+        this.sendClientMetadata();
     }
 
+    updateHighLevel(highLevel){
+        this.highLevel = highLevel;
+
+        //TODO: show high-level in userlist
+        this.channel.broadcastUserList();
         this.sendClientMetadata();
     }
 }

src/schemas/userSchema.js

@@ -77,6 +77,13 @@ const userSchema = new mongoose.Schema({
         required: true,
         default: "Signature not set!"
     },
+    highLevel: {
+        type: mongoose.SchemaTypes.Number,
+        required: true,
+        min: 0,
+        max: 10,
+        default: 0
+    },
     flair: {
         type: mongoose.SchemaTypes.ObjectID,
         default: null,
@@ -93,8 +100,6 @@ userSchema.pre('save', async function (next){
         this.pass = hashUtil.hashPassword(this.pass);
     }
 
-    
-
     //If the flair was changed
     if(this.isModified("flair")){
         //Get flair properties 

www/css/channel.css

@@ -185,9 +185,16 @@ input#chat-panel-prompt{
     margin: 0.2em;
 }
 
+.user-list-high-level{
+    margin: auto;
+}
+
 .chat-entry-high-level{
     margin: 0.2em;
     margin-right: 0;
+}
+
+.high-level{
     z-index: 2;
     background-image: url("/img/sweet_leaf_simple.png");
     background-size: 1.3em;
@@ -199,13 +206,14 @@ input#chat-panel-prompt{
     flex-shrink: 0;
 }
 
-.chat-entry-high-level-img{
+span.user-entry{
-    position: absolute;
+    display: flex;
-    height: 1.7em;
+    margin-bottom: 0.1em;
 }
 
 .user-entry{
-    margin: 0.2em;
+    margin: 0;
+    margin-left: 0.1em;
     font-size: 1em;
     width: fit-content;
 }

www/css/theme/movie-night.css

@@ -242,7 +242,7 @@ div#chat-panel-control-div{
      text-shadow: none;
 }
 
-.chat-entry-high-level{
+.high-level{
     text-shadow: 1px 1px 1px white, -1px -1px 1px white, 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white;
 }
 

www/js/channel/chat.js

@@ -59,6 +59,7 @@ class chatBox{
         this.aspectLockIcon.addEventListener("click", this.lockAspect.bind(this));
         this.showChatIcon.addEventListener("click", ()=>{this.toggleUI()});
         this.hideChatIcon.addEventListener("click", ()=>{this.toggleUI()});
+        this.highSelect.addEventListener("change", this.setHighLevel.bind(this));
         this.flairSelect.addEventListener("change", this.setFlair.bind(this));
 
         //Clickdragger/Resize
@@ -79,8 +80,8 @@ class chatBox{
 
         //Create high-level label
         var highLevel = document.createElement('p');
-        highLevel.classList.add("chat-panel-buffer","chat-entry-high-level");
+        highLevel.classList.add("chat-panel-buffer","chat-entry-high-level","high-level");
-        highLevel.innerHTML = `${chat.high}`;
+        highLevel.innerHTML = `${chat.highLevel}`;
         chatEntry.appendChild(highLevel);
 
         //Create username label
@@ -113,13 +114,20 @@ class chatBox{
 
     async send(event){
         if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
-            this.client.socket.emit("chatMessage",{msg: this.chatPrompt.value, high: this.highSelect.value});
+            this.client.socket.emit("chatMessage",{msg: this.chatPrompt.value});
             this.chatPrompt.value = "";
         }
     }
 
     handleClientInfo(data){
         this.updateFlairSelect(data.flairList, data.user.flair);
+        this.updateHighSelect(data.user.highLevel);
+    }
+
+    setHighLevel(event){
+        const highLevel = event.target.value;
+
+        this.client.socket.emit("setHighLevel", {highLevel});
     }
 
     setFlair(event){
@@ -128,7 +136,9 @@ class chatBox{
         this.client.socket.emit("setFlair", {flair});
     }
 
-
+    updateHighSelect(highLevel){
+        this.highSelect.value = highLevel;
+    }
 
     updateFlairSelect(flairList, flair){
         //clear current flair select

www/js/channel/userlist.js

@@ -88,20 +88,34 @@ class userList{
         this.colorMap = newMap;
     }
 
-    renderUser(user, color){
+    renderUser(user, flair){
-        var userEntry = document.createElement('p');
 
+        //Create user span
+        var userSpan = document.createElement('span');
+        userSpan.classList.add('chat-panel-users', 'user-entry');
+
+        //Create high-level label
+        var highLevel = document.createElement('p');
+        highLevel.classList.add("user-list-high-level","high-level");
+        highLevel.innerHTML = `${user.highLevel}`;
+        userSpan.appendChild(highLevel);
+
+        //Create nameplate
+        var userEntry = document.createElement('p');
         userEntry.innerText = user.user;
         userEntry.id = `user-entry-${user.user}`;
 
         //Override color with flair
         if(user.flair != "classic"){
-            color = `flair-${user.flair}`;
+            flair = `flair-${user.flair}`;
         }
+        //Add classes to classList
+        userEntry.classList.add("chat-panel-users","user-entry",flair); 
 
-        userEntry.classList.add("chat-panel-users","user-entry",color);
+        userSpan.appendChild(userEntry);
 
-        this.userList.appendChild(userEntry);
+
+        this.userList.appendChild(userSpan);
     }
 
     toggleUI(show = this.userDiv.style.display == "none"){