fix emojis (i broke them)

frontend/lib/chat.mjs

@@ -6,17 +6,15 @@ import {
 import { emojify, emojis } from "./emojis.mjs?v=1e57e6";
 
 function setCaretPosition(elem, caretPos) {
-        if(elem.createTextRange) {
+  if (elem.createTextRange) {
     var range = elem.createTextRange();
-            range.move('character', caretPos);
+    range.move("character", caretPos);
     range.select();
   } else {
-            if(elem.selectionStart) {
+    if (elem.selectionStart) {
       elem.focus();
       elem.setSelectionRange(caretPos, caretPos);
-            }
-            else
-                elem.focus();
+    } else elem.focus();
   }
 }
 
@@ -57,21 +55,27 @@ const setupChatboxEvents = (socket) => {
             className: "emoji-option" + (i === 0 ? " selected" : ""),
             onmousedown: (e) => e.preventDefault(),
             onclick: () => {
-			  messageInput.value=prefix+replaceWith+" "+suffix;
-			  setCaretPosition(messageInput, (prefix+" "+replaceWith).length)
+              messageInput.value = prefix + replaceWith + " " + suffix;
+              setCaretPosition(
+                messageInput,
+                (prefix + " " + replaceWith).length
+              );
             },
             onmouseover: () => select(button),
             onfocus: () => select(button),
+            type: "button",
           });
           button.append(
-            (replaceWith[0]!==":"?Object.assign(document.createElement("span"), {
+            replaceWith[0] !== ":"
+              ? Object.assign(document.createElement("span"), {
                   textContent: replaceWith,
                   className: "emoji",
-            }):Object.assign(new Image(), {
+                })
+              : Object.assign(new Image(), {
                   loading: "lazy",
                   src: `/emojis/${name}.png`,
                   className: "emoji",
-            })),
+                }),
             Object.assign(document.createElement("span"), { textContent: name })
           );
           return button;

frontend/lib/emojis.mjs

@@ -5,8 +5,12 @@ export async function emojify(text) {
   text.replace(/:([^\s:]+):/g, (match, name, index) => {
     if (last <= index)
       nodes.push(document.createTextNode(text.slice(last, index)));
-    if (!emojiList.includes(name)) {
+    let emoji = emojiList.find((e) => e[0] == name);
+    if (!emoji) {
       nodes.push(document.createTextNode(match));
+    } else {
+      if (emoji[1][0] !== ":") {
+        nodes.push(document.createTextNode(emoji[1]));
       } else {
         nodes.push(
           Object.assign(new Image(), {
@@ -16,6 +20,7 @@ export async function emojify(text) {
           })
         );
       }
+    }
     last = index + match.length;
   });
   if (last < text.length) nodes.push(document.createTextNode(text.slice(last)));
@@ -24,7 +29,6 @@ export async function emojify(text) {
 export const emojis = Promise.all([
   fetch("/emojis")
     .then((e) => e.json())
-    .then((e) => e.map((e) => [e.slice(0, -4), ":"+e.slice(0, -4)+":"])),
-  fetch('/emojis/unicode.json')
-    .then((e) => e.json())
-]).then(e=>e.flat(1));
+    .then((e) => e.map((e) => [e.slice(0, -4), ":" + e.slice(0, -4) + ":"])),
+  fetch("/emojis/unicode.json").then((e) => e.json()),
+]).then((e) => e.flat(1));

frontend/styles.css

@@ -13,7 +13,8 @@
   --fg-transparent: rgba(var(--fg-rgb), 0.25);
   --bg-transparent: rgba(var(--bg-rgb), 0.25);
   --autocomplete-bg: linear-gradient(
-      var(--fg-transparent), var(--fg-transparent)
+      var(--fg-transparent),
+      var(--fg-transparent)
     ),
     linear-gradient(var(--bg), var(--bg));
 }