Finished up with css-only flair implementation.

www/css/channel.css

@@ -202,6 +202,7 @@ input#chat-panel-prompt{
 .user-entry{
     margin: 0.2em;
     font-size: 1em;
+    width: fit-content;
 }
 
 #media-panel-aspect-lock-icon{

www/css/flair.css

@@ -0,0 +1,16 @@
+.flair-gold, .flair-black-gold, .flair-lightning{
+    background-image: url('/img/flair/gold.gif');
+    border-radius: 0.3em;
+    box-shadow: 0.1em 0.1em 3px #fff4b6 inset, -0.1em 0.1em 3px #fff4b6 inset, 0.1em -0.1em 3px #fff4b6 inset, -0.1em -0.1em 3px #fff4b6 inset;
+    color: rgb(121, 106, 23);
+    text-shadow: 1px 1px 1px #fff4b6, -1px 1px 1px #fff4b6, 1px -1px 1px #fff4b6, -1px -1px 1px #fff4b6;
+    padding: 0.1em 0.4em;
+}
+
+.flair-black-gold{
+    filter: invert(1) grayscale(0.9);
+}
+
+.flair-lightning{
+    filter: invert(1) grayscale(0.5);
+}

www/js/channel/channel.js

@@ -43,9 +43,19 @@ class channel{
             document.title = `${this.channelName} - Connected`
         });
 
-        this.socket.on("error", (data) => {
-            console.log(data);
-        });
+        this.socket.on("clientMetadata", this.handleClientInfo.bind(this));
+
+        this.socket.on("error", console.log);
+    }
+
+    handleClientInfo(data){
+        this.user = {
+            id: data.user.id,
+            name: data.user.name,
+            rank: data.user.rank
+        }
+
+        this.chatBox.handleClientInfo(data);
     }
 }
 

www/js/channel/chat.js

@@ -27,7 +27,8 @@ class chatBox{
 
         //Element Nodes
         this.chatPanel = document.querySelector("#chat-panel-div");
-        this.highLevel = document.querySelector("#chat-panel-high-level-select");
+        this.highSelect = document.querySelector("#chat-panel-high-level-select");
+        this.flairSelect = document.querySelector("#chat-panel-flair-select");
         this.chatBuffer = document.querySelector("#chat-panel-buffer-div");
         this.chatPrompt = document.querySelector("#chat-panel-prompt");
         this.settingsIcon = document.querySelector("#chat-panel-settings-icon");
@@ -57,6 +58,7 @@ class chatBox{
         this.aspectLockIcon.addEventListener("click", this.lockAspect.bind(this));
         this.showChatIcon.addEventListener("click", ()=>{this.toggleUI()});
         this.hideChatIcon.addEventListener("click", ()=>{this.toggleUI()});
+        this.flairSelect.addEventListener("change", this.setFlair.bind(this));
 
         //Clickdragger/Resize
         this.clickDragger.handle.addEventListener("mousedown", this.unlockAspect.bind(this));
@@ -69,6 +71,92 @@ class chatBox{
         });
     }
 
+    displayChat(chat){
+        //Create chat-entry span
+        var chatEntry = document.createElement('span');
+        chatEntry.classList.add("chat-panel-buffer","chat-entry",`chat-entry-${chat.user}`);
+
+        //Create high-level label
+        var highLevel = document.createElement('p');
+        highLevel.classList.add("chat-panel-buffer","chat-entry-high-level");
+        highLevel.innerHTML = `${chat.high}`;
+        chatEntry.appendChild(highLevel);
+
+        //Create username label
+        var userLabel = document.createElement('p');
+        userLabel.classList.add("chat-panel-buffer","chat-entry-username");
+
+        if(chat.flair != ""){
+            var flair = `flair-${chat.flair}`;
+        }else{
+            var flair =  this.client.userList.colorMap.get(chat.user);
+        }
+
+        //Create color span
+        var colorSpan = document.createElement('span');
+        colorSpan.classList.add("chat-entry-flair-span", flair);
+        colorSpan.innerHTML = `${chat.user}`;
+        userLabel.innerHTML = `${colorSpan.outerHTML}: `;
+
+        chatEntry.appendChild(userLabel);
+
+        //Create chat body
+        var chatBody = document.createElement('p');
+        chatBody.classList.add("chat-panel-buffer","chat-entry-body");
+        chatBody.innerHTML = chat.msg;
+        chatEntry.appendChild(chatBody);
+
+        this.chatBuffer.appendChild(chatEntry);
+    }
+
+    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.chatPrompt.value = "";
+        }
+    }
+
+    handleClientInfo(data){
+        this.updateFlairSelect(data.flairList, data.user.flair);
+    }
+
+    setFlair(event){
+        const flair = event.target.value;
+
+        this.client.socket.emit("setFlair", {flair});
+    }
+
+
+
+    updateFlairSelect(flairList, flair){
+        //clear current flair select
+        this.flairSelect.innerHTML = "";
+
+        //Inject flair object for standard flair like the hack we are
+        flairList.push({
+                name: "",
+                displayName: "Classic"
+        });
+
+        //For each flair in flairlist
+        flairList.forEach((flair) => {
+            //Create an option
+            var flairOption = document.createElement('option');
+            //Set the name and innerHTML
+            flairOption.value = flair.name;
+            flairOption.innerHTML = flair.displayName;
+
+            //Append it to the select
+            this.flairSelect.appendChild(flairOption);
+        });
+
+        //Set the selected flair in the UI
+        this.flairSelect.value = flair;
+        //Re-style the UI, do this in two seperate steps in-case we're running for the first time and have nothing to replace.
+        this.flairSelect.className = this.flairSelect.className.replace(/flair-\S*/, "");
+        this.flairSelect.classList.add(`flair-${flair}`);
+    }
+
     lockAspect(event){
         //prevent the user from breaking shit :P
         if(this.chatPanel.style.display != "none"){
@@ -112,44 +200,4 @@ class chatBox{
             this.client.player.hideVideoIcon.style.display = "none";
         }
     }
-
-    displayChat(chat){
-        //Create chat-entry span
-        var chatEntry = document.createElement('span');
-        chatEntry.classList.add("chat-panel-buffer","chat-entry",`chat-entry-${chat.user}`);
-
-        //Create high-level label
-        var highLevel = document.createElement('p');
-        highLevel.classList.add("chat-panel-buffer","chat-entry-high-level");
-        highLevel.innerHTML = `${chat.high}`;
-        chatEntry.appendChild(highLevel);
-
-        //Create username label
-        var userLabel = document.createElement('p');
-        userLabel.classList.add("chat-panel-buffer","chat-entry-username");
-
-        //Create color span
-        var colorSpan = document.createElement('span');
-        colorSpan.classList.add(this.client.userList.colorMap.get(chat.user));
-        colorSpan.innerHTML = `${chat.user}`;
-        userLabel.innerHTML = `${colorSpan.outerHTML}: `;
-
-        chatEntry.appendChild(userLabel);
-
-        //Create chat body
-        var chatBody = document.createElement('p');
-        chatBody.classList.add("chat-panel-buffer","chat-entry-body");
-        chatBody.innerHTML = chat.msg;
-        chatEntry.appendChild(chatBody);
-
-        this.chatBuffer.appendChild(chatEntry);
-    }
-
-    async send(event){
-        if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
-            this.client.socket.emit("chatMessage",{msg: this.chatPrompt.value, high: this.highLevel.value});
-            this.chatPrompt.value = "";
-        }
-    }
-
 }

www/js/channel/userlist.js

@@ -53,7 +53,7 @@ class userList{
     }
 
     defineListeners(){
-        this.client.socket.on('user-list', (data) => {
+        this.client.socket.on('userList', (data) => {
             this.updateList(data);
         });
     }
@@ -72,12 +72,12 @@ class userList{
             var color = this.userColors[Math.floor(Math.random()*this.userColors.length)]
 
             //if this user was in the previous colormap
-            if(this.colorMap.get(user) != null){
+            if(this.colorMap.get(user.user) != null){
                 //Override with previous color
-                color = this.colorMap.get(user);
+                color = this.colorMap.get(user.user);
             }
 
-            newMap.set(user, color);
+            newMap.set(user.user, color);
             this.renderUser(user, color);
         });
 
@@ -87,8 +87,14 @@ class userList{
     renderUser(user, color){
         var userEntry = document.createElement('p');
 
-        userEntry.innerText = user;
-        userEntry.id = `user-entry-${user}`;
+        userEntry.innerText = user.user;
+        userEntry.id = `user-entry-${user.user}`;
+
+        //Override color with flair
+        if(user.flair != ""){
+            color = `flair-${user.flair}`;
+        }
+
         userEntry.classList.add("chat-panel-users","user-entry",color);
 
         this.userList.appendChild(userEntry);