diff --git a/.dist/emoji.js b/.dist/emoji.js index b546e49..510bf51 100644 --- a/.dist/emoji.js +++ b/.dist/emoji.js @@ -100,13 +100,66 @@ class Emoji { Emoji.decodeEmojiList(e); }); } - static async emojiPicker(x, y) { + static async emojiPicker(x, y, localuser) { let res; const promise = new Promise((r) => { res = r; }); const menu = document.createElement("div"); menu.classList.add("flextttb", "emojiPicker"); menu.style.top = y + "px"; menu.style.left = x + "px"; + const title = document.createElement("h2"); + title.textContent = Emoji.emojis[0].name; + title.classList.add("emojiTitle"); + menu.append(title); + console.log("menu :3"); + const selection = document.createElement("div"); + selection.classList.add("flexltr", "dontshrink", "emojirow"); + console.log("menu :3"); + const body = document.createElement("div"); + body.classList.add("emojiBody"); + let isFirst = true; + localuser.guilds.filter(guild => guild.id != "@me" && guild.emojis.length > 0).forEach(guild => { + const select = document.createElement("div"); + select.classList.add("emojiSelect"); + if (guild.properties.icon) { + const img = document.createElement("img"); + img.classList.add("pfp", "servericon", "emoji-server"); + img.crossOrigin = "anonymous"; + img.src = localuser.info.cdn + "/icons/" + guild.properties.id + "/" + guild.properties.icon + ".png?size=48"; + img.alt = "Server: " + guild.properties.name; + select.appendChild(img); + } + else { + const div = document.createElement("span"); + div.textContent = guild.properties.name.replace(/'s /g, " ").replace(/\w+/g, word => word[0]).replace(/\s/g, ""); + select.append(div); + } + selection.append(select); + const clickEvent = () => { + title.textContent = guild.properties.name; + body.innerHTML = ""; + for (const emojit of guild.emojis) { + const emojiElem = document.createElement("div"); + emojiElem.classList.add("emojiSelect"); + const emojiClass = new Emoji({ + id: emojit.id, + name: emojit.name, + animated: emojit.animated + }, localuser); + emojiElem.append(emojiClass.getHTML()); + body.append(emojiElem); + emojiElem.addEventListener("click", () => { + res(emojiClass); + Contextmenu.currentmenu.remove(); + }); + } + }; + select.addEventListener("click", clickEvent); + if (isFirst) { + clickEvent(); + isFirst = false; + } + }); setTimeout(() => { if (Contextmenu.currentmenu != "") { Contextmenu.currentmenu.remove(); @@ -115,16 +168,6 @@ class Emoji { Contextmenu.currentmenu = menu; Contextmenu.keepOnScreen(menu); }, 10); - const title = document.createElement("h2"); - title.textContent = Emoji.emojis[0].name; - title.classList.add("emojiTitle"); - menu.append(title); - console.log("menu :3"); - const selection = document.createElement("div"); - selection.classList.add("flexltr", "dontshrink"); - console.log("menu :3"); - const body = document.createElement("div"); - body.classList.add("emojiBody"); let i = 0; for (const thing of Emoji.emojis) { const select = document.createElement("div"); diff --git a/.dist/guild.js b/.dist/guild.js index 124ea07..023d43e 100644 --- a/.dist/guild.js +++ b/.dist/guild.js @@ -21,6 +21,7 @@ class Guild { parent_id; member; html; + emojis; get id() { return this.snowflake.id; } @@ -75,6 +76,7 @@ class Guild { if (json === -1) { return; } + this.emojis = json.emojis; this.owner = owner; this.headers = this.owner.headers; this.channels = []; diff --git a/.dist/message.js b/.dist/message.js index c193760..64a7e44 100644 --- a/.dist/message.js +++ b/.dist/message.js @@ -49,7 +49,7 @@ class Message { navigator.clipboard.writeText(this.id); }); Message.contextmenu.addsubmenu("Add reaction", function (e) { - Emoji.emojiPicker(e.x, e.y).then(_ => { + Emoji.emojiPicker(e.x, e.y, this.localuser).then(_ => { console.log(_, ":3"); this.reactionToggle(_); }); @@ -70,22 +70,24 @@ class Message { this.giveData(messagejson); } reactionToggle(emoji) { - if (typeof emoji === "string") { - let remove = false; - for (const thing of this.reactions) { - if (thing.emoji.name === emoji) { - remove = thing.me; - break; - } + let remove = false; + for (const thing of this.reactions) { + if (thing.emoji.name === emoji) { + remove = thing.me; + break; } - fetch(this.info.api + "/channels/" + this.channel.id + "/messages/" + this.id + "/reactions/" + encodeURIComponent(emoji) + "/@me", { - method: remove ? "DELETE" : "PUT", - headers: this.headers, - }); + } + let reactiontxt; + if (emoji instanceof Emoji) { + reactiontxt = emoji.id; } else { - emoji; + reactiontxt = encodeURIComponent(emoji); } + fetch(`${this.info.api}/channels/${this.channel.id}/messages/${this.id}/reactions/${reactiontxt}/@me`, { + method: remove ? "DELETE" : "PUT", + headers: this.headers + }); } giveData(messagejson) { for (const thing of Object.keys(messagejson)) { @@ -383,7 +385,9 @@ class Message { reaction.classList.add("meReacted"); } let emoji; - if (thing.emoji.id) { + if (thing.emoji.id || /\d{17,21}/.test(thing.emoji.name)) { + if (/\d{17,21}/.test(thing.emoji.name)) + thing.emoji.id = thing.emoji.name; //Should stop being a thing once the server fixes this bug const emo = new Emoji(thing.emoji, this.guild); emoji = emo.getHTML(false); } diff --git a/webpage/emoji.ts b/webpage/emoji.ts index 9035200..d63b4cd 100644 --- a/webpage/emoji.ts +++ b/webpage/emoji.ts @@ -110,7 +110,7 @@ class Emoji{ Emoji.decodeEmojiList(e); }) } - static async emojiPicker(x:number,y:number):Promise{ + static async emojiPicker(x:number,y:number, localuser:Localuser):Promise{ let res:(r:Emoji|string)=>void; const promise:Promise=new Promise((r)=>{res=r;}) const menu=document.createElement("div"); @@ -118,6 +118,65 @@ class Emoji{ menu.style.top=y+"px"; menu.style.left=x+"px"; + const title=document.createElement("h2"); + title.textContent=Emoji.emojis[0].name; + title.classList.add("emojiTitle"); + menu.append(title); + console.log("menu :3"); + const selection=document.createElement("div"); + selection.classList.add("flexltr","dontshrink","emojirow"); + console.log("menu :3"); + const body=document.createElement("div"); + body.classList.add("emojiBody"); + + let isFirst = true; + localuser.guilds.filter(guild => guild.id != "@me" && guild.emojis.length > 0).forEach(guild => { + const select = document.createElement("div") + select.classList.add("emojiSelect") + + if (guild.properties.icon) { + const img = document.createElement("img") + img.classList.add("pfp", "servericon", "emoji-server") + img.crossOrigin = "anonymous" + img.src = localuser.info.cdn + "/icons/" + guild.properties.id + "/" + guild.properties.icon + ".png?size=48" + img.alt = "Server: " + guild.properties.name + select.appendChild(img) + } else { + const div = document.createElement("span") + div.textContent = guild.properties.name.replace(/'s /g, " ").replace(/\w+/g, word => word[0]).replace(/\s/g, "") + select.append(div) + } + + selection.append(select) + + const clickEvent = () => { + title.textContent = guild.properties.name + body.innerHTML = "" + for (const emojit of guild.emojis) { + const emojiElem = document.createElement("div") + emojiElem.classList.add("emojiSelect") + + const emojiClass = new Emoji({ + id: emojit.id, + name: emojit.name, + animated: emojit.animated + },localuser) + emojiElem.append(emojiClass.getHTML()) + body.append(emojiElem) + + emojiElem.addEventListener("click", () => { + res(emojiClass) + Contextmenu.currentmenu.remove() + }) + } + } + + select.addEventListener("click", clickEvent) + if (isFirst) { + clickEvent() + isFirst = false + } + }) setTimeout(()=>{ if(Contextmenu.currentmenu!=""){ @@ -128,16 +187,7 @@ class Emoji{ Contextmenu.keepOnScreen(menu); },10) - const title=document.createElement("h2"); - title.textContent=Emoji.emojis[0].name; - title.classList.add("emojiTitle"); - menu.append(title); - console.log("menu :3"); - const selection=document.createElement("div"); - selection.classList.add("flexltr","dontshrink"); - console.log("menu :3"); - const body=document.createElement("div"); - body.classList.add("emojiBody"); + let i=0; for(const thing of Emoji.emojis){ const select=document.createElement("div"); diff --git a/webpage/guild.ts b/webpage/guild.ts index aeb65e9..1a4838d 100644 --- a/webpage/guild.ts +++ b/webpage/guild.ts @@ -7,7 +7,7 @@ import {Member} from "./member.js"; import {Settings,RoleList} from "./settings.js"; import {Permissions} from "./permissions.js"; import { SnowFlake } from "./snowflake.js"; -import { channeljson, guildjson } from "./jsontypes.js"; +import { channeljson, guildjson, emojijson } from "./jsontypes.js"; class Guild{ owner:Localuser; headers:Localuser["headers"]; @@ -24,6 +24,7 @@ class Guild{ parent_id:string; member:Member; html:HTMLElement; + emojis:emojijson[]; get id(){ return this.snowflake.id; } @@ -84,6 +85,7 @@ class Guild{ if(json===-1){ return; } + this.emojis = json.emojis this.owner=owner; this.headers=this.owner.headers; this.channels=[]; diff --git a/webpage/jsontypes.ts b/webpage/jsontypes.ts index 8330cec..1352964 100644 --- a/webpage/jsontypes.ts +++ b/webpage/jsontypes.ts @@ -156,12 +156,17 @@ type memberjson= { pending: boolean, last_message_id?: boolean//What??? } +type emojijson={ + name:string, + id?:string, + animated?:boolean + } type guildjson={ application_command_counts: {[key:string]:number}, channels: channeljson[], data_mode: string, - emojis: [], + emojis: emojijson[], guild_scheduled_events: [], id: string, large: boolean, @@ -274,11 +279,7 @@ type messagejson={ embeds: embedjson[], reactions: { count:number, - emoji:{ - name:string, - id?:string, - animated?:boolean - },//very likely needs expanding + emoji:emojijson,//very likely needs expanding me:boolean, }[], nonce: string, @@ -326,4 +327,4 @@ type embedjson={ name:string, } } -export {readyjson,dirrectjson,channeljson,guildjson,rolesjson,userjson,memberjson,mainuserjson,messagejson,filejson,embedjson}; +export {readyjson,dirrectjson,channeljson,guildjson,rolesjson,userjson,memberjson,mainuserjson,messagejson,filejson,embedjson,emojijson}; diff --git a/webpage/message.ts b/webpage/message.ts index 011e226..57f9d66 100644 --- a/webpage/message.ts +++ b/webpage/message.ts @@ -54,7 +54,7 @@ class Message{ navigator.clipboard.writeText(this.id); }); Message.contextmenu.addsubmenu("Add reaction",function(this:Message,e){ - Emoji.emojiPicker(e.x,e.y).then(_=>{ + Emoji.emojiPicker(e.x,e.y,this.localuser).then(_=>{ console.log(_,":3") this.reactionToggle(_); }); @@ -77,21 +77,24 @@ class Message{ } reactionToggle(emoji:string|Emoji){ - if(typeof emoji === "string"){ - let remove=false; - for(const thing of this.reactions){ - if(thing.emoji.name===emoji){ - remove=thing.me; - break; - } + let remove = false + for (const thing of this.reactions) { + if (thing.emoji.name === emoji) { + remove = thing.me + break } - fetch(this.info.api+ "/channels/"+this.channel.id+"/messages/"+this.id+"/reactions/"+encodeURIComponent(emoji)+"/@me",{ - method:remove?"DELETE":"PUT", - headers:this.headers, - }) - }else{ - emoji + } + let reactiontxt:string; + if(emoji instanceof Emoji){ + reactiontxt=emoji.id; + }else{ + reactiontxt=encodeURIComponent(emoji); + } + fetch(`${this.info.api}/channels/${this.channel.id}/messages/${this.id}/reactions/${reactiontxt}/@me`, { + method: remove ? "DELETE" : "PUT", + headers: this.headers + }) } giveData(messagejson:messagejson){ for(const thing of Object.keys(messagejson)){ @@ -387,7 +390,8 @@ class Message{ reaction.classList.add("meReacted") } let emoji:HTMLElement; - if(thing.emoji.id){ + if (thing.emoji.id || /\d{17,21}/.test(thing.emoji.name)) { + if (/\d{17,21}/.test(thing.emoji.name)) thing.emoji.id=thing.emoji.name;//Should stop being a thing once the server fixes this bug const emo=new Emoji(thing.emoji as {name:string,id:string,animated:boolean},this.guild); emoji=emo.getHTML(false); }else{ diff --git a/webpage/style.css b/webpage/style.css index caa5def..a61e9eb 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1594,6 +1594,7 @@ form div{ justify-content: space-evenly; border:solid var(--black) .03in; flex-shrink:0; + align-items: center; } .emojiTitle{ padding: .03in; @@ -1607,7 +1608,7 @@ form div{ display:flex; flex-wrap: wrap; flex-direction: row; - align-content: stretch; + align-content: flex-start; justify-content: space-evenly; /* height: 100%; */ overflow-y: scroll; @@ -1720,4 +1721,11 @@ form div{ #settings{ width:.225in; margin:.05in; +} +.emojiSelect > .emoji-server { + width: 32px; + height: 32px; +} +.emojirow{ + flex-grow:0; } \ No newline at end of file