highLevel syncs across chans, shows in userlist

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{
-    position: absolute;
-    height: 1.7em;
+span.user-entry{
+    display: flex;
+    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.innerHTML = `${chat.high}`;
+        highLevel.classList.add("chat-panel-buffer","chat-entry-high-level","high-level");
+        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){
-        var userEntry = document.createElement('p');
+    renderUser(user, flair){
 
+        //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"){