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

Finished up with personal emotes.

Browse source
This commit is contained in:
rainbow napkin 2024-12-22 21:10:07 -05:00
parent a4a1f6a65b
commit 93cece48ea
5 changed files with 103 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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(){
var search = this.searchPrompt.value;
deletePersonalEmote(name){
//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(search != ''){
//If we have a search bar and a search in the search bar
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);