rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Started work on personal emotes.

Browse source
This commit is contained in:
rainbow napkin 2024-12-22 13:46:08 -05:00
parent db5fac83ab
commit a4a1f6a65b
16 changed files with 248 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

50
www/js/channel/panels/emotePanel.js
View file

@ -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);