Finished up with css-only flair implementation.

src/app/channel/activeChannel.js

@@ -14,6 +14,10 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
+//local imports
+const flairModel = require('../../schemas/flairSchema');
+const permissionModel = require('../../schemas/permissionSchema');
+
 module.exports = class{
     constructor(server, name){
         this.server = server;
@@ -21,7 +25,7 @@ module.exports = class{
         this.userList = new Map();
     }
 
-    handleConnection(userDB, socket){
+    async handleConnection(userDB, socket){
         //get current user object from the userlist
         var userObj = this.userList.get(userDB.user);
 
@@ -45,6 +49,9 @@ module.exports = class{
         //if everything looks good, admit the connection to the channel
         socket.join(socket.chan);
 
+        //Make sure the client receives important client-info before userlist
+        await this.sendClientMetadata(userDB, socket);
+
         //Send out the userlist
         this.broadcastUserList(socket.chan);
     }
@@ -71,13 +78,59 @@ module.exports = class{
         this.broadcastUserList(socket.chan);
     }
 
+    async sendClientMetadata(userObj, socket){
+        const flairListDB = await flairModel.find({});
+        var flairList = [];
+
+        const user = {
+            id: userObj.id,
+            user: userObj.user,
+            rank: userObj.rank,
+            flair: userObj.flair
+        }
+
+        flairListDB.forEach((flair)=>{
+            if(permissionModel.rankToNum(flair.rank) <= permissionModel.rankToNum(userObj.rank)){
+                flairList.push({
+                    name: flair.name,
+                    displayName: flair.displayName
+                });
+            }
+        });
+
+        socket.emit("clientMetadata", {user, flairList});
+    }
+
     broadcastUserList(){
         var userList = [];
         
         this.userList.forEach((userObj, user) => {
-            userList.push(user);
+            userList.push({
+                user: user,
+                flair: userObj.flair
+            });
         });
 
-        this.server.io.in(this.name).emit("user-list", userList);
+        this.server.io.in(this.name).emit("userList", userList);
+    }
+
+    updateFlair(user, flair){
+        const userObj = this.userList.get(user);
+
+        userObj.flair = flair;
+
+        this.userList.set(user, userObj);
+
+        //Quick hack to make this compatible with sendClientMetadata. make sure we do this AFTER setting the object in the userList map...
+        userObj.name = user;
+
+        //Crawl through user's sockets (lol)
+        userObj.sockets.forEach((sockid) => {
+            //Send metadata to each one
+            const socket = this.server.io.sockets.sockets.get(sockid);
+            this.sendClientMetadata(userObj, socket);
+        });
+
+        this.broadcastUserList();
     }
 }