whoops i forgor a newline

frontend/lib/chat.mjs

@@ -5,6 +5,9 @@ import {
 } from "./watch-session.mjs?v=048af96";
 import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
 
+let nickname = "";
+let kisses = {};
+
 function setCaretPosition(elem, caretPos) {
   if (elem.createTextRange) {
     var range = elem.createTextRange();
@@ -184,6 +187,24 @@ const setupChatboxEvents = (socket) => {
             );
             handled = true;
             break;
+          case "/votekiss":
+		    if(kisses[args]&&kisses[args][nickname])
+              printChatMessage(
+                "vote-kiss",
+                "/votekiss",
+                "b57fdc",
+                document.createTextNode("you already voted to kiss " + args)
+              );
+			else
+              printChatMessage(
+                "vote-kiss",
+                "/votekiss",
+                "b57fdc",
+                document.createTextNode("you voted to kiss " + args)
+              );
+            handled = false;
+            // we also handle this on receive
+            break;
           case "/help":
             const helpMessageContent = document.createElement("span");
             helpMessageContent.innerHTML =
@@ -191,7 +212,8 @@ const setupChatboxEvents = (socket) => {
               "&emsp;<code>/help</code> - display this help message<br>" +
               "&emsp;<code>/ping [message]</code> - ping all viewers<br>" +
               "&emsp;<code>/sync</code> - resyncs you with other viewers<br>" +
-              "&emsp;<code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message";
+              "&emsp;<code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message<br>" +
+              "&emsp;<code>/votekiss</code> - like votekick but gay";
 
             printChatMessage(
               "command-message",
@@ -224,7 +246,8 @@ const setupChatboxEvents = (socket) => {
 /**
  * @param {WebSocket} socket
  */
-export const setupChat = async (socket) => {
+export const setupChat = async (socket, _nickname) => {
+  nickname = _nickname; // We need this for commands
   document.querySelector("#chatbox-container").style["display"] = "flex";
   setupChatboxEvents(socket);
 
@@ -327,6 +350,31 @@ const formatTime = (ms) => {
   }:${seconds < 10 ? "0" + seconds : seconds}`;
 };
 
+function handleClientCommand(content, user) {
+  let handled = false;
+  if (content.startsWith("/")) {
+    const command = content.toLowerCase().match(/^\/\S+/)[0];
+    const args = content.slice(command.length).trim();
+    switch (command) {
+      case "/votekiss":
+        kisses[args] = kisses[args] || {};
+        kisses[args][user] = true;
+        if (Object.keys(kisses[args]).length >= 3) {
+          printChatMessage(
+            "user-kissed",
+            args,
+            "ff6094",
+            document.createTextNode("was kissed 💋")
+          );
+          kisses[args] = {};
+        }
+        handled = true;
+        break;
+    }
+  }
+  return handled;
+}
+
 export const logEventToChat = async (event) => {
   if (checkDebounce(event)) {
     return;
@@ -349,12 +397,15 @@ export const logEventToChat = async (event) => {
         event.colour,
         document.createTextNode("left")
       );
+      for (let kissed in kisses) delete kisses[kissed][event.user];
       break;
     }
     case "ChatMessage": {
       const messageContent = document.createElement("span");
       messageContent.classList.add("message-content");
+      if (handleClientCommand(event.data, event.user)) break;
       messageContent.append(...(await emojify(event.data)));
+
       printChatMessage(
         "chat-message",
         event.user,
@@ -433,7 +484,10 @@ const beep = () => {
   oscillator.stop(context.currentTime + 0.22);
 };
 
-export const updateViewerList = (viewers) => {
+let viewers = [];
+
+export const updateViewerList = (_viewers) => {
+  viewers = _viewers;
   const listContainer = document.querySelector("#viewer-list");
 
   // empty out the current list

frontend/lib/emojis.mjs

@@ -53,7 +53,7 @@ export async function findEmojis(search) {
   await emojisLoaded;
   let groups = [[], []];
   if (search.length < 1) {
-    for (let letter in emojis)
+    for (let letter of Object.keys(emojis).sort())
       for (let emoji of emojis[letter]) {
         (emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
       }

frontend/lib/reconnecting-web-socket.mjs

@@ -26,9 +26,9 @@ export default class ReconnectingWebSocket {
     }
     this._socket.addEventListener("close", () => this._reconnect());
     this._socket.addEventListener("error", () => this._reconnect());
-    this._socket.addEventListener("message", ({ data }) =>
+    this._socket.addEventListener("message", ({ data }) => {
-      this._eventTarget.dispatchEvent(new MessageEvent("message", { data }))
+      this._eventTarget.dispatchEvent(new MessageEvent("message", { data }));
-    );
+    });
     this._socket.addEventListener("open", (e) => {
       if (first) this._eventTarget.dispatchEvent(new Event("open"));
       if (this._reconnecting)

frontend/lib/watch-session.mjs

@@ -71,7 +71,6 @@ const setupIncomingEvents = (video, socket) => {
   socket.addEventListener("message", async (messageEvent) => {
     try {
       const event = JSON.parse(messageEvent.data);
-
       if (!event.reflected) {
         switch (event.op) {
           case "SetPlaying":
@@ -221,7 +220,7 @@ export const joinSession = async (nickname, sessionId, colour) => {
 
     setupOutgoingEvents(video, socket);
     setupIncomingEvents(video, socket);
-    setupChat(socket);
+    setupChat(socket, nickname);
   });
   socket.addEventListener("reconnecting", (e) => {
     console.log("Reconnecting...");

frontend/styles.css

@@ -188,10 +188,15 @@ button.small-button {
 
 .chat-message.user-join,
 .chat-message.user-leave,
-.chat-message.ping {
+.chat-message.ping,
+.chat-message.user-kissed {
   font-style: italic;
 }
 
+.chat-message.user-kissed {
+  color: #ff6094;
+}
+
 .chat-message.set-time,
 .chat-message.set-playing {
   font-style: italic;
@@ -299,6 +304,11 @@ button.small-button {
   flex-shrink: 0;
 }
 
+.emoji-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .emoji-option.selected {
   background: var(--fg-transparent);
 }