Started work on personal emotes.

www/css/channel.css

@@ -216,7 +216,6 @@ span.user-entry{
 #chat-panel-user-count{
     white-space: nowrap;
     user-select: none;
-    cursor:pointer;
 }
 
 #media-panel-show-chat-icon{

www/css/global.css

@@ -69,6 +69,11 @@ div.dynamic-container{
     overflow: auto;
 }
 
+.interactive{
+    cursor: pointer;
+    user-select: none;
+}
+
 /* Navbar */
 #navbar{
     display: flex;

www/css/panel/emote.css

@@ -22,10 +22,10 @@
 div.emote-panel-list-emote{
     width: 9em;
     display: flex;
+    position: relative;
     flex-direction:  column;
     padding: 0.5em 0;
     margin: 0.5em;
-    user-select: none;
     cursor: pointer;
 }
 
@@ -43,6 +43,7 @@ p.emote-list-title{
     max-height: 8em;
     max-width: 8em;
     margin: auto;
+    object-fit: contain;
 }
 
 .emote-list-big-media{
@@ -62,4 +63,20 @@ div.panel-control-prompt{
 
 #new-emote-button{
     margin-left: 0.3em;
+}
+
+span.emote-list-trash-icon{
+    position: absolute;
+    display: flex;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 1em;
+    top: -0.5em;
+    right: -0.5em;
+}
+
+i.emote-list-trash-icon{
+    flex: 1;
+    text-align: center;
+    margin: auto;
 }

www/css/theme/movie-night.css

@@ -365,4 +365,9 @@ div.emote-panel-list-emote{
     text-shadow: var(--focus-glow0-alt0);
     border: 1px solid var(--focus0-alt1);
     box-shadow: var(--focus-glow0-alt0), var(--focus-glow0-alt0-inset);
+}
+
+span.emote-list-trash-icon{
+    background-color: var(--bg2);
+    border: 1px solid var(--accent0)
 }

www/js/channel/chatPostprocessor.js

@@ -32,6 +32,7 @@ class chatPostprocessor{
         
         //Inject the pre-processed chat into the chatEntry node
         this.injectBody();
+
         //Return the pre-processed node
         return this.chatEntry;
     }

www/js/channel/commandPreprocessor.js

@@ -16,6 +16,7 @@ class commandPreprocessor{
         //When we receive site-wide emote list
         this.client.socket.on("siteEmotes", this.setSiteEmotes.bind(this));
         this.client.socket.on("chanEmotes", this.setChanEmotes.bind(this));
+        this.client.socket.on("personalEmotes", this.setPersonalEmotes.bind(this));
     }
 
     preprocess(command){
@@ -104,6 +105,10 @@ class commandPreprocessor{
         this.emotes.chan = data;
     }
 
+    setPersonalEmotes(data){
+        this.emotes.personal = data;
+    }
+
     getEmoteByLink(link){
         //Create an empty variable to hold the found emote
         var foundEmote = null;

www/js/channel/cpanel.js

@@ -73,7 +73,11 @@ class cPanel{
         this.activePanel.docSwitch();
     }
 
-    hideActivePanel(){
+    hideActivePanel(event, keepAlive = false){
+        if(!keepAlive){
+            this.activePanel.closer();
+        }
+
         //Hide the panel
         this.activePanelDiv.style.display = "none";
         //Clear out the panel
@@ -84,12 +88,12 @@ class cPanel{
 
     pinPanel(){
         this.setPinnedPanel(this.activePanel, this.activePanelDoc.innerHTML);
-        this.hideActivePanel();
+        this.hideActivePanel(null, true);
     }
 
     popActivePanel(){
         this.popPanel(this.activePanel, this.activePanelDoc.innerHTML);
-        this.hideActivePanel();
+        this.hideActivePanel(null, true);
     }
 
     async setPinnedPanel(panel, panelBody){
@@ -113,19 +117,24 @@ class cPanel{
         this.pinnedPanelDragger.fixCutoff();
     }
 
-    hidePinnedPanel(){
+    hidePinnedPanel(event, keepAlive = false){
         this.pinnedPanelDiv.style.display = "none";
+
+        if(!keepAlive){
+            this.pinnedPanel.closer();
+        }
+
         this.pinnedPanel = null;
     }
 
     unpinPanel(){
         this.setActivePanel(this.pinnedPanel, this.pinnedPanelDoc.innerHTML);
-        this.hidePinnedPanel();
+        this.hidePinnedPanel(null, true);
     }
 
     popPinnedPanel(){
         this.popPanel(this.pinnedPanel, this.pinnedPanelDoc.innerHTML);
-        this.hidePinnedPanel();
+        this.hidePinnedPanel(null, true);
     }
 
     popPanel(panel, panelBody){
@@ -154,6 +163,10 @@ class panelObj{
 
     docSwitch(){
     }
+
+    closer(){
+        console.log('closer');
+    }
 }
 
 class poppedPanel{
@@ -174,6 +187,8 @@ class poppedPanel{
         //Functions
         this.cPanel = cPanel;
 
+        this.keepAlive = false;
+
         //Continue constructor asynchrnously
         this.asyncConstructor();
     }
@@ -221,13 +236,19 @@ class poppedPanel{
     }
 
     closer(){
-           this.cPanel.poppedPanels.splice(this.cPanel.poppedPanels.indexOf(this),1);
+        if(!this.keepAlive){
+            this.panel.closer();
+        }
+
+        this.cPanel.poppedPanels.splice(this.cPanel.poppedPanels.indexOf(this),1);
     }
 
     unpop(){
         //Set active panel
         this.cPanel.setActivePanel(this.panel, this.panelDoc.innerHTML);
 
+        this.keepAlive = true;
+
         //Close the popped window
         this.window.close();
     }
@@ -235,6 +256,8 @@ class poppedPanel{
     pin(){
         this.cPanel.setPinnedPanel(this.panel, this.panelDoc.innerHTML);
 
+        this.keepAlive = true;
+
         this.window.close();
     }
 

www/js/channel/panels/emotePanel.js

@@ -1,6 +1,13 @@
 class emotePanel extends panelObj{
     constructor(client, panelDocument){
         super(client, "Emote Palette", "/panel/emote", panelDocument);
+
+        this.client.socket.on("personalEmotes", this.renderEmoteLists.bind(this));
+    }
+
+    closer(){
+        this.client.socket.off("personalEmotes", this.renderEmoteLists.bind(this));
+        console.log('emote closer');
     }
 
     docSwitch(){
@@ -19,6 +26,10 @@ class emotePanel extends panelObj{
 
         this.searchPrompt = this.panelDocument.querySelector('#emote-panel-search-prompt');
 
+        this.personalEmoteLinkPrompt = this.panelDocument.querySelector('#new-emote-link-input');
+        this.personalEmoteNamePrompt = this.panelDocument.querySelector('#new-emote-name-input');
+        this.personalEmoteAddButton = this.panelDocument.querySelector('#new-emote-button');
+
         this.setupInput();
 
         this.renderEmoteLists();
@@ -46,6 +57,9 @@ class emotePanel extends panelObj{
 
         this.searchPrompt.removeEventListener('keyup', this.renderEmoteLists.bind(this));
         this.searchPrompt.addEventListener('keyup', this.renderEmoteLists.bind(this));
+
+        this.personalEmoteAddButton.removeEventListener("click", this.addPersonalEmote.bind(this));
+        this.personalEmoteAddButton.addEventListener("click", this.addPersonalEmote.bind(this));
     }
 
     toggleSiteEmotes(event){
@@ -72,7 +86,7 @@ class emotePanel extends panelObj{
 
     useEmote(emote){
         //If we're using this from the active panel
-        if(client.cPanel.activePanel == this){
+        if(this.client.cPanel.activePanel == this){
             //Close it
             this.client.cPanel.hideActivePanel();
         }
@@ -81,6 +95,19 @@ class emotePanel extends panelObj{
         this.client.chatBox.chatPrompt.value += `[${emote}]`;
     }
 
+    addPersonalEmote(event){
+        //Collect input
+        const name = this.personalEmoteNamePrompt.value;
+        const link = this.personalEmoteLinkPrompt.value;
+
+        //Empty out prompts
+        this.personalEmoteNamePrompt.value = '';
+        this.personalEmoteLinkPrompt.value = '';
+
+        //Send emote to server
+        this.client.socket.emit("addPersonalEmote", {name, link});
+    }
+
     renderEmoteLists(){
         var search = this.searchPrompt.value;
 
@@ -102,10 +129,10 @@ class emotePanel extends panelObj{
 
         this.renderEmotes(siteEmotes, this.siteEmoteList);
         this.renderEmotes(chanEmotes, this.chanEmoteList);
-        this.renderEmotes(personalEmotes, this.personalEmoteList);
+        this.renderEmotes(personalEmotes, this.personalEmoteList, true);
     }
 
-    renderEmotes(emoteList, container){
+    renderEmotes(emoteList, container, personal = false){
         //Clear out the container
         container.innerHTML = '';
 
@@ -164,6 +191,23 @@ class emotePanel extends panelObj{
             emoteTitle.classList.add('emote-list-title');
             //Set emote title
             emoteTitle.innerHTML = `[${emote.name}]`;
+
+            //if we're rendering personal emotes
+            if(personal){
+                //create span to hold trash icon
+                const trashSpan = document.createElement('span');
+                trashSpan.classList.add('emote-list-trash-icon');
+
+                //Create trash icon
+                const trashIcon = document.createElement('i');
+                trashIcon.classList.add('emote-list-trash-icon', 'bi-trash-fill');
+                
+                //Add trash icon to trash span
+                trashSpan.appendChild(trashIcon);
+
+                //append trash span to emote div
+                emoteDiv.appendChild(trashSpan);
+            }
             
             //Add the emote media to the emote span
             emoteDiv.appendChild(emoteMedia);