From 0ce6b32a125c38698113a1cb1ccdb7a788c616b2 Mon Sep 17 00:00:00 2001
From: easrng <me@easrng.net>
Date: Mon, 14 Feb 2022 12:31:30 -0500
Subject: [PATCH] Squash: Emojis!

* Emojis!
* fix bug
* no more discord
* maia: proper cache bustin
---
 frontend/emojis/blobcat.png | Bin 0 -> 2751 bytes
 frontend/lib/chat.mjs       |   5 +++--
 frontend/lib/emojis.mjs     |  11 +++++++++++
 frontend/styles.css         |   7 +++++++
 4 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 frontend/emojis/blobcat.png
 create mode 100644 frontend/lib/emojis.mjs

diff --git a/frontend/emojis/blobcat.png b/frontend/emojis/blobcat.png
new file mode 100644
index 0000000000000000000000000000000000000000..761b24c108b321e97827b6a6894701391787014e
GIT binary patch
literal 2751
zcmV;w3PAOVP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000VxNkl<ZXo2lo
zdr%zp9sm4x_ip!&J05`m;Sq?CfEgnsB$$#!Y{Wox3`VdT8z*XOtQx1|BRZxI`bQmS
z+R-{{wa%o`^r1C1R*8doSgUDbgF+;kJShqYgd^N>2i*H^_uJV$LV&v?M`9BH=;yeZ
z+u!{jpYQv7yYPsD^7&%%V{6Q7;^R2}XnUY5+Pohe1Rnfv9!%II@6B||do%s=-b~w{
z>ZU!OmCB2kn_DEXi38U!6pMDhnDQ9_^T-eZ@EmOq?pX1N^+C&kJb126?_M#o?*M=d
z02}}Z;FJK9UK=MEz>p5?+yk;$VkcZxmCl}6oA4uNuRU-5^R^vf0=)KE;)eUH<6eri
zxUDC+zx*NVEtUb<K6bo#E||##R4n279A3z#L~#!D^96ZVAbZK|xC};QCO{x!GC<C6
z2fU~EH!D3*(1Cv6H%OH`8aw><1I<L1??4u3_}S(2#YMl{n09|rmb@B3f~weEU-~`@
z6X4swr~f%8jb9T@14r6}jW<1Rt#u5_y-VkUl`Q9_Op{?=eu`AHuuxx-VCH5)rg&2I
zPMZC~&Hw{31`q*^gAW`V=;@aaf8Ol*sMqePZ}{BT({vI_kQge<&G|Lg2#;1TmDZRH
z%sgSIK)3}SPkQ$LRmP{I3812*KXADIfTKDuJFa5+)yDe_IxHjwf<`!kTgC`toaSz}
z&O`ofN9^v+SxJVKMOTSWf)E!zTRY4jc39m#@paGKW3HR*BvpH0U<!?B`TGYkPBRgK
zqMbn4f7riGnCi}qfvJ`!<-9c=(=nukd{1*VL>8l^E%0A%YTGhS-IpTy^+kZHDD^z1
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
FV1naMFV6q~

literal 0
HcmV?d00001

diff --git a/frontend/lib/chat.mjs b/frontend/lib/chat.mjs
index 46cb197..39c8178 100644
--- a/frontend/lib/chat.mjs
+++ b/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,
diff --git a/frontend/lib/emojis.mjs b/frontend/lib/emojis.mjs
new file mode 100644
index 0000000..b97c31e
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/frontend/styles.css b/frontend/styles.css
index f1b9d52..7f019fe 100644
--- a/frontend/styles.css
+++ b/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;