custom emoji reaction rendering support

.dist/emoji.js

@@ -1,6 +1,43 @@
 import { Contextmenu } from "./contextmenu.js";
+import { Guild } from "./guild.js";
 class Emoji {
     static emojis;
+    name;
+    id;
+    animated;
+    owner;
+    get guild() {
+        if (this.owner instanceof Guild) {
+            return this.owner;
+        }
+    }
+    get localuser() {
+        if (this.owner instanceof Guild) {
+            return this.guild.localuser;
+        }
+        else {
+            return this.owner;
+        }
+    }
+    get info() {
+        return this.owner.info;
+    }
+    constructor(json, owner) {
+        this.name = json.name;
+        this.id = json.id;
+        this.animated = json.animated;
+        this.owner = owner;
+    }
+    getHTML(bigemoji = false) {
+        const emojiElem = document.createElement("img");
+        emojiElem.classList.add("md-emoji");
+        emojiElem.classList.add(bigemoji ? "bigemoji" : "smallemoji");
+        emojiElem.crossOrigin = "anonymous";
+        emojiElem.src = this.info.cdn + "/emojis/" + this.id + "." + (this.animated ? "gif" : "png") + "?size=32";
+        emojiElem.alt = this.name;
+        emojiElem.loading = "lazy";
+        return emojiElem;
+    }
     static decodeEmojiList(buffer) {
         const view = new DataView(buffer, 0);
         let i = 0;

.dist/markdown.js

@@ -1,3 +1,5 @@
+import { Channel } from "./channel.js";
+import { Emoji } from "./emoji.js";
 export { MarkDown };
 class MarkDown {
     txt;
@@ -451,14 +453,9 @@ class MarkDown {
                         appendcurrent();
                         i = j;
                         const isEmojiOnly = txt.join("").trim() === buildjoin.trim();
-                        const emojiElem = document.createElement("img");
+                        const owner = (this.owner instanceof Channel) ? this.owner.guild : this.owner;
-                        emojiElem.classList.add("md-emoji");
+                        const emoji = new Emoji({ name: buildjoin, id: parts[2], animated: !!parts[1] }, owner);
-                        emojiElem.classList.add(isEmojiOnly ? "bigemoji" : "smallemoji");
+                        span.appendChild(emoji.getHTML(isEmojiOnly));
-                        emojiElem.crossOrigin = "anonymous";
-                        emojiElem.src = this.info.cdn + "emojis/" + parts[2] + "." + (parts[1] ? "gif" : "png") + "?size=32";
-                        emojiElem.alt = buildjoin;
-                        emojiElem.loading = "lazy";
-                        span.appendChild(emojiElem);
                         continue;
                     }
                 }

.dist/message.js

@@ -6,7 +6,6 @@ import { Embed } from "./embed.js";
 import { File } from "./file.js";
 import { SnowFlake } from "./snowflake.js";
 import { Emoji } from "./emoji.js";
-new Emoji();
 class Message {
     static contextmenu = new Contextmenu("message menu");
     owner;
@@ -383,8 +382,15 @@ class Message {
             if (thing.me) {
                 reaction.classList.add("meReacted");
             }
-            const emoji = document.createElement("p");
+            let emoji;
+            if (thing.emoji.id) {
+                const emo = new Emoji(thing.emoji, this.guild);
+                emoji = emo.getHTML(false);
+            }
+            else {
+                emoji = document.createElement("p");
                 emoji.textContent = thing.emoji.name;
+            }
             const count = document.createElement("p");
             count.textContent = "" + thing.count;
             count.classList.add("reactionCount");

webpage/emoji.ts

@@ -1,4 +1,6 @@
 import { Contextmenu } from "./contextmenu.js";
+import { Guild } from "./guild.js";
+import { Localuser } from "./localuser.js";
 
 class Emoji{
     static emojis:{
@@ -8,6 +10,42 @@ class Emoji{
             emoji:string,
         }[]
     }[];
+    name:string;
+    id:string;
+    animated:boolean;
+    owner:Guild|Localuser;
+    get guild(){
+        if(this.owner instanceof Guild){
+            return this.owner;
+        }
+    }
+    get localuser(){
+        if(this.owner instanceof Guild){
+            return this.guild.localuser;
+        }else{
+            return this.owner;
+        }
+    }
+    get info(){
+        return this.owner.info;
+    }
+    constructor(json:{name:string,id:string,animated:boolean},owner:Guild|Localuser){
+        this.name=json.name;
+        this.id=json.id;
+        this.animated=json.animated
+        this.owner=owner;
+    }
+    getHTML(bigemoji:boolean=false){
+        const emojiElem=document.createElement("img");
+        emojiElem.classList.add("md-emoji");
+        emojiElem.classList.add(bigemoji ? "bigemoji" : "smallemoji");
+        emojiElem.crossOrigin="anonymous";
+        emojiElem.src=this.info.cdn + "/emojis/" + this.id + "." + (this.animated ? "gif" : "png") + "?size=32";
+
+        emojiElem.alt=this.name;
+        emojiElem.loading="lazy";
+        return emojiElem;
+    }
     static decodeEmojiList(buffer:ArrayBuffer){
         const view = new DataView(buffer, 0);
         let i=0;
@@ -74,7 +112,7 @@ class Emoji{
     }
     static async emojiPicker(x:number,y:number):Promise<Emoji|string>{
         let res:(r:Emoji|string)=>void;
-        const promise=new Promise((r)=>{res=r;})
+        const promise:Promise<Emoji|string>=new Promise((r)=>{res=r;})
         const menu=document.createElement("div");
         menu.classList.add("flextttb", "emojiPicker")
         menu.style.top=y+"px";

webpage/jsontypes.ts

@@ -275,7 +275,9 @@ type messagejson={
     reactions: {
         count:number,
         emoji:{
-            name:string
+            name:string,
+            id?:string,
+            animated?:boolean
         },//very likely needs expanding
         me:boolean,
     }[],

webpage/markdown.ts

@@ -1,5 +1,6 @@
-import { Channel } from "./channel";
+import { Channel } from "./channel.js";
-import { Localuser } from "./localuser";
+import { Emoji } from "./emoji.js";
+import { Localuser } from "./localuser.js";
 
 export {MarkDown};
 class MarkDown{
@@ -416,16 +417,9 @@ class MarkDown{
                         appendcurrent();
                         i=j;
                         const isEmojiOnly = txt.join("").trim()===buildjoin.trim();
-
+                        const owner=(this.owner instanceof Channel)?this.owner.guild:this.owner
-                        const emojiElem=document.createElement("img");
+                        const emoji=new Emoji({name:buildjoin,id:parts[2],animated:!!parts[1]},owner);
-                        emojiElem.classList.add("md-emoji");
+                        span.appendChild(emoji.getHTML(isEmojiOnly));
-                        emojiElem.classList.add(isEmojiOnly ? "bigemoji" : "smallemoji");
-                        emojiElem.crossOrigin="anonymous";
-                        emojiElem.src=this.info.cdn + "emojis/" + parts[2] + "." + (parts[1] ? "gif" : "png") + "?size=32";
-
-                        emojiElem.alt=buildjoin;
-                        emojiElem.loading="lazy";
-                        span.appendChild(emojiElem);
 
                         continue;
                     }

webpage/message.ts

@@ -10,7 +10,6 @@ import {File} from "./file.js";
 import { SnowFlake } from "./snowflake.js";
 import { messagejson } from "./jsontypes.js";
 import {Emoji} from "./emoji.js";
-new Emoji();
 
 class Message{
     static contextmenu=new Contextmenu("message menu");
@@ -387,9 +386,14 @@ class Message{
             if(thing.me){
                 reaction.classList.add("meReacted")
             }
-            const emoji=document.createElement("p");
+            let emoji:HTMLElement;
+            if(thing.emoji.id){
+                const emo=new Emoji(thing.emoji as {name:string,id:string,animated:boolean},this.guild);
+                emoji=emo.getHTML(false);
+            }else{
+                emoji=document.createElement("p");
                 emoji.textContent=thing.emoji.name;
-
+            }
             const count=document.createElement("p");
             count.textContent=""+thing.count;
             count.classList.add("reactionCount");