Squash: Emojis!

* Emojis!
* fix bug
* no more discord
* maia: proper cache bustin

frontend/lib/chat.mjs

@@ -1,4 +1,5 @@
-import { setDebounce, setVideoTime, setPlaying } from "./watch-session.mjs";
+import { setDebounce, setVideoTime, setPlaying } from "./watch-session.mjs?v=9";
+import { emojify } from "./emojis.mjs?v=9";
 
 const setupChatboxEvents = (socket) => {
   // clear events by just reconstructing the form
@@ -236,7 +237,7 @@ export const logEventToChat = (event) => {
     case "ChatMessage": {
       const messageContent = document.createElement("span");
       messageContent.classList.add("message-content");
-      messageContent.textContent = event.data;
+      messageContent.append(...emojify(event.data));
       printChatMessage(
         "chat-message",
         event.user,

frontend/lib/emojis.mjs

@@ -0,0 +1,11 @@
+export function emojify(text) {
+  let last = 0;
+  let nodes = [];
+  text.replace(/:([^\s:]+):/g, (match, name, index) => {
+    if(last <= index) nodes.push(document.createTextNode(text.slice(last, index)))
+    nodes.push(Object.assign(new Image(), {src: `/emojis/${name}.png`, className: "emoji", alt: name}))
+    last = index + match.length
+  })
+  if(last < text.length) nodes.push(document.createTextNode(text.slice(last)))
+  return nodes
+}

frontend/styles.css

@@ -159,6 +159,13 @@ button.small-button {
   color: unset !important;
 }
 
+.emoji {
+  width: 2ch;
+  height: 2ch;
+  object-fit: contain;
+  margin-bottom: -0.35ch;
+}
+
 #chatbox {
   padding: 0.5em 2em;
   min-height: 8em;