Finished up with personal emotes.

src/app/channel/chatHandler.js

@@ -32,6 +32,7 @@ module.exports = class{
         socket.on("setFlair", (data) => {this.setFlair(socket, data)});
         socket.on("setHighLevel", (data) => {this.setHighLevel(socket, data)});
         socket.on("addPersonalEmote", (data) => {this.addPersonalEmote(socket, data)});
+        socket.on("deletePersonalEmote", (data) => {this.deletePersonalEmote(socket, data)});
     }
 
     handleChat(socket, data){
@@ -112,6 +113,16 @@ module.exports = class{
         }
     }
 
+    async deletePersonalEmote(socket, data){
+        //Get user doc from DB based on socket
+        const userDB = await userModel.findOne({user: socket.user.user});
+
+        //if we found a user
+        if(userDB != null){
+            await userDB.deleteEmote(data.name);
+        }
+    }
+
     relayUserChat(socket, msg, type, links){
         const user = this.server.getSocketInfo(socket);
         this.relayChat(user.user, user.flair, user.highLevel, msg, type, socket.chan, links)

src/schemas/userSchema.js

@@ -268,40 +268,6 @@ userSchema.statics.tattooToke = function(tokemap){
     });
 }
 
-//methods
-userSchema.methods.checkPass = function(pass){
-    return hashUtil.comparePassword(pass, this.pass);
-}
-
-userSchema.methods.getAuthenticatedSessions = async function(){
-    var returnArr = [];
-
-    //retrieve active sessions (they really need to implement this shit async already)
-    return new Promise((resolve) => {
-        server.store.all((err, sessions) => {
-            //You guys ever hear of a 'not my' problem? Fucking y33tskies lmao, better use a try/catch
-            if(err){
-                throw err;
-
-            }
-
-            //crawl through active sessions
-            sessions.forEach((session) => {
-                //if a session matches the current user
-                if(session.user.id == this.id){
-                    //we return it
-                    returnArr.push(session);
-                }
-            });
-
-
-            resolve(returnArr);
-
-        });
-    });
-
-}
-
 userSchema.statics.getUserList = async function(fullList = false){
     var userList = [];
     //Get all of our users
@@ -337,6 +303,39 @@ userSchema.statics.getUserList = async function(fullList = false){
 }
 
 //methods
+userSchema.methods.checkPass = function(pass){
+    return hashUtil.comparePassword(pass, this.pass);
+}
+
+userSchema.methods.getAuthenticatedSessions = async function(){
+    var returnArr = [];
+
+    //retrieve active sessions (they really need to implement this shit async already)
+    return new Promise((resolve) => {
+        server.store.all((err, sessions) => {
+            //You guys ever hear of a 'not my' problem? Fucking y33tskies lmao, better use a try/catch
+            if(err){
+                throw err;
+
+            }
+
+            //crawl through active sessions
+            sessions.forEach((session) => {
+                //if a session matches the current user
+                if(session.user.id == this.id){
+                    //we return it
+                    returnArr.push(session);
+                }
+            });
+
+
+            resolve(returnArr);
+
+        });
+    });
+
+}
+
 userSchema.methods.getProfile = function(){
     //Create profile hashtable
     const profile = {
@@ -397,6 +396,22 @@ userSchema.methods.getEmotes = function(){
     return emoteList;
 }
 
+userSchema.methods.deleteEmote = async function(name){
+    //Get index by emote name
+    const emoteIndex = this.emotes.findIndex(checkName);
+
+    //Splice out found emote
+    this.emotes.splice(emoteIndex, 1);
+    
+    //Save the user doc
+    await this.save();
+
+    function checkName(emote){
+        //return emotes
+        return emote.name == name;
+    }
+}
+
 //note: if you gotta call this from a request authenticated by it's user, make sure to kill that session first!
 userSchema.methods.killAllSessions = async function(reason = "A full log-out from all devices was requested for your account."){
     //get authenticated sessions

www/css/panel/emote.css

@@ -19,17 +19,22 @@
     justify-items: center;
 }
 
+
 div.emote-panel-list-emote{
+    position: relative;
+    margin: 0.5em;
+}
+
+span.emote-panel-list-emote{
     width: 9em;
     display: flex;
-    position: relative;
     flex-direction:  column;
     padding: 0.5em 0;
-    margin: 0.5em;
+    margin: 0;
     cursor: pointer;
 }
 
-div.emote-panel-list-big-emote{
+span.emote-panel-list-big-emote{
     width: 100%;
     margin: 0.5em auto;
 }
@@ -47,7 +52,7 @@ p.emote-list-title{
 }
 
 .emote-list-big-media{
-    max-height: 80VH;
+    max-height: 30VH;
     max-width: 100%;
     margin: 0.5em;
 }

www/css/theme/movie-night.css

@@ -349,18 +349,18 @@ select.panel-head-element{
     background-color: var(--accent0);
 }
 
-div.emote-panel-list-emote{
+span.emote-panel-list-emote{
     border: 1px solid var(--accent0);
 }
 
-.emote-panel-list-emote:hover{
+span.emote-panel-list-emote:hover, span.emote-list-trash-icon:hover{
     color: var(--focus0-alt0);
     border: 1px solid var(--focus0-alt0);
     text-shadow: var(--focus-glow0);
     box-shadow: var(--focus-glow0), var(--focus-glow0-inset);
 }
 
-.emote-panel-list-emote:active{
+span.emote-panel-list-emote:active, span.emote-list-trash-icon:active{
     color: var(--focus0-alt1);
     text-shadow: var(--focus-glow0-alt0);
     border: 1px solid var(--focus0-alt1);

www/js/channel/panels/emotePanel.js

@@ -7,7 +7,6 @@ class emotePanel extends panelObj{
 
     closer(){
         this.client.socket.off("personalEmotes", this.renderEmoteLists.bind(this));
-        console.log('emote closer');
     }
 
     docSwitch(){
@@ -108,15 +107,26 @@ class emotePanel extends panelObj{
         this.client.socket.emit("addPersonalEmote", {name, link});
     }
 
-    renderEmoteLists(){
+    deletePersonalEmote(name){
-        var search = this.searchPrompt.value;
+        //send out delete
+        this.client.socket.emit('deletePersonalEmote', {name});
+    }
 
+    renderEmoteLists(){
+        //if we've initialized the search prompt (wont happen yet first run)
+        if(this.searchPrompt != null){
+            //Get the search value
+            var search = this.searchPrompt.value;
+        }
+
+        //pull emote lists from the command preprocessor
         var siteEmotes = this.client.chatBox.commandPreprocessor.emotes.site;
         var chanEmotes = this.client.chatBox.commandPreprocessor.emotes.chan;
         var personalEmotes = this.client.chatBox.commandPreprocessor.emotes.personal;
 
-
+        //If we have a search bar and a search in the search bar 
-        if(search != ''){
+        if(search != null && search != ''){
+            //filter emote lists using the filterQuery function
             siteEmotes = siteEmotes.filter(filterQuery);
             chanEmotes = chanEmotes.filter(filterQuery);
             personalEmotes = personalEmotes.filter(filterQuery);
@@ -127,6 +137,7 @@ class emotePanel extends panelObj{
             }
         }
 
+        //render out the emote lists
         this.renderEmotes(siteEmotes, this.siteEmoteList);
         this.renderEmotes(chanEmotes, this.chanEmoteList);
         this.renderEmotes(personalEmotes, this.personalEmoteList, true);
@@ -148,14 +159,18 @@ class emotePanel extends panelObj{
 
         //For each emote
         emoteList.forEach((emote) => {
-            //Create div to hold emote
+            //Create div to hold emote span
             const emoteDiv = document.createElement('div');
             emoteDiv.classList.add('emote-panel-list-emote');
 
+            const emoteSpan = document.createElement('span');
+            emoteSpan.classList.add('emote-panel-list-emote');
+
             //If we have a low emote count
             if(emoteList.length <= 2){
                 //render them huuuuuge
                 emoteDiv.classList.add('emote-panel-list-big-emote');
+                emoteSpan.classList.add('emote-panel-list-big-emote');
             }
 
             //If the emote is an image
@@ -201,6 +216,10 @@ class emotePanel extends panelObj{
                 //Create trash icon
                 const trashIcon = document.createElement('i');
                 trashIcon.classList.add('emote-list-trash-icon', 'bi-trash-fill');
+                trashIcon.id = `emote-list-trash-icon-${emote.name}`;
+
+                //add deletePersonalEmote event listener
+                trashIcon.addEventListener('click', ()=>{this.deletePersonalEmote(emote.name)});
                 
                 //Add trash icon to trash span
                 trashSpan.appendChild(trashIcon);
@@ -210,12 +229,15 @@ class emotePanel extends panelObj{
             }
             
             //Add the emote media to the emote span
-            emoteDiv.appendChild(emoteMedia);
+            emoteSpan.appendChild(emoteMedia);
             //Add title paragraph node
-            emoteDiv.appendChild(emoteTitle);
+            emoteSpan.appendChild(emoteTitle);
 
             //Add useEmote event listener
-            emoteDiv.addEventListener('click', ()=>{this.useEmote(emote.name)});
+            emoteSpan.addEventListener('click', ()=>{this.useEmote(emote.name)});
+
+            //Add emote span to the emote div
+            emoteDiv.appendChild(emoteSpan);
 
             //Append the mote span to the emote list
             container.appendChild(emoteDiv);