whoops i forgor a newline

fix votekiss
oh no aaaa
2022-02-18 17:33:19 -05:00 · 2022-02-18 17:28:56 -05:00 · 2022-02-18 17:14:54 -05:00 · 2022-02-18 17:13:49 -05:00 · 2022-02-18 16:52:37 -05:00 · 2022-02-18 14:48:56 -05:00
5 changed files with 158 additions and 250 deletions
--- a/frontend/lib/chat.mjs
+++ b/frontend/lib/chat.mjs
@ -4,7 +4,9 @@ import {
  setPlaying,
 } from "./watch-session.mjs?v=048af96";
 import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
-import { linkify } from "./links.mjs";
+
+let nickname = "";
+let kisses = {};

 function setCaretPosition(elem, caretPos) {
  if (elem.createTextRange) {
@ -36,81 +38,77 @@ const setupChatboxEvents = (socket) => {
  };
  async function autocomplete(fromListTimeout) {
    if (autocompleting) return;
-    try {
-      clearInterval(showListTimer);
-      emojiAutocomplete.textContent = "";
-      autocompleting = true;
-      let text = messageInput.value.slice(0, messageInput.selectionStart);
-      const match = text.match(/(:[^\s:]+)?:([^\s:]*)$/);
-      if (!match || match[1]) return (autocompleting = false); // We don't need to autocomplete.
-      const prefix = text.slice(0, match.index);
-      const search = text.slice(match.index + 1);
-      if (search.length < 1 && !fromListTimeout) {
-        autocompleting = false;
-        showListTimer = setTimeout(() => autocomplete(true), 500);
-        return;
-      }
-      const suffix = messageInput.value.slice(messageInput.selectionStart);
-      let selected;
-      const select = (button) => {
-        if (selected) selected.classList.remove("selected");
-        selected = button;
-        button.classList.add("selected");
-      };
-      let results = await findEmojis(search);
-      let yieldAt = performance.now() + 13;
-      for (let i = 0; i < results.length; i += 100) {
-        emojiAutocomplete.append.apply(
-          emojiAutocomplete,
-          results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
-            const button = Object.assign(document.createElement("button"), {
-              className: "emoji-option",
-              onmousedown: (e) => e.preventDefault(),
-              onclick: () => {
-                messageInput.value = prefix + replaceWith + " " + suffix;
-                setCaretPosition(
-                  messageInput,
-                  (prefix + " " + replaceWith).length
-                );
-              },
-              onmouseover: () => select(button),
-              onfocus: () => select(button),
-              type: "button",
-              title: name,
-            });
-            button.append(
-              replaceWith[0] !== ":"
-                ? Object.assign(document.createElement("span"), {
-                    textContent: replaceWith,
-                    className: "emoji",
-                  })
-                : Object.assign(new Image(), {
-                    loading: "lazy",
-                    src: `/emojis/${name}${ext}`,
-                    className: "emoji",
-                  }),
-              Object.assign(document.createElement("span"), {
-                textContent: name,
-                className: "emoji-name",
-              })
-            );
-            return button;
-          })
-        );
-        if (i == 0 && emojiAutocomplete.children[0]) {
-          emojiAutocomplete.children[0].scrollIntoView();
-          select(emojiAutocomplete.children[0]);
-        }
-        const now = performance.now();
-        if (now > yieldAt) {
-          yieldAt = now + 13;
-          await new Promise((cb) => setTimeout(cb, 0));
-        }
-      }
-      autocompleting = false;
-    } catch (e) {
+    clearInterval(showListTimer);
+    emojiAutocomplete.textContent = "";
+    autocompleting = true;
+    let text = messageInput.value.slice(0, messageInput.selectionStart);
+    const match = text.match(/(:[^\s:]+)?:([^\s:]*)$/);
+    if (!match || match[1]) return (autocompleting = false); // We don't need to autocomplete.
+    const prefix = text.slice(0, match.index);
+    const search = text.slice(match.index + 1);
+    if (search.length < 1 && !fromListTimeout) {
      autocompleting = false;
+      showListTimer = setTimeout(() => autocomplete(true), 500);
+      return;
    }
+    const suffix = messageInput.value.slice(messageInput.selectionStart);
+    let selected;
+    const select = (button) => {
+      if (selected) selected.classList.remove("selected");
+      selected = button;
+      button.classList.add("selected");
+    };
+    let results = await findEmojis(search);
+    let yieldAt = performance.now() + 13;
+    for (let i = 0; i < results.length; i += 100) {
+      emojiAutocomplete.append.apply(
+        emojiAutocomplete,
+        results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
+          const button = Object.assign(document.createElement("button"), {
+            className: "emoji-option",
+            onmousedown: (e) => e.preventDefault(),
+            onclick: () => {
+              messageInput.value = prefix + replaceWith + " " + suffix;
+              setCaretPosition(
+                messageInput,
+                (prefix + " " + replaceWith).length
+              );
+            },
+            onmouseover: () => select(button),
+            onfocus: () => select(button),
+            type: "button",
+            title: name,
+          });
+          button.append(
+            replaceWith[0] !== ":"
+              ? Object.assign(document.createElement("span"), {
+                  textContent: replaceWith,
+                  className: "emoji",
+                })
+              : Object.assign(new Image(), {
+                  loading: "lazy",
+                  src: `/emojis/${name}${ext}`,
+                  className: "emoji",
+                }),
+            Object.assign(document.createElement("span"), {
+              textContent: name,
+              className: "emoji-name",
+            })
+          );
+          return button;
+        })
+      );
+      if (i == 0 && emojiAutocomplete.children[0]) {
+        emojiAutocomplete.children[0].scrollIntoView();
+        select(emojiAutocomplete.children[0]);
+      }
+      const now = performance.now();
+      if (now > yieldAt) {
+        yieldAt = now + 13;
+        await new Promise((cb) => setTimeout(cb, 0));
+      }
+    }
+    autocompleting = false;
  }
  messageInput.addEventListener("input", () => autocomplete());
  messageInput.addEventListener("selectionchange", () => autocomplete());
@ -189,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 =
@ -196,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",
@ -229,9 +246,17 @@ 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);
+
+  window.addEventListener("keydown", (event) => {
+    try {
+      const isSelectionEmpty = window.getSelection().toString().length === 0;
+      if (event.code.match(/Key\w/) && isSelectionEmpty) messageInput.focus();
+    } catch (_err) {}
+  });
 };

 const addToChat = (node) => {
@ -325,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;
@ -347,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");
-      messageContent.append(...(await linkify(event.data, emojify)));
+      if (handleClientCommand(event.data, event.user)) break;
+      messageContent.append(...(await emojify(event.data)));
+
      printChatMessage(
        "chat-message",
        event.user,
@ -431,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
--- a/frontend/lib/emojis.mjs
+++ b/frontend/lib/emojis.mjs
@ -5,10 +5,7 @@ export async function emojify(text) {
  text.replace(/:([^\s:]+):/g, (match, name, index) => {
    if (last <= index)
      nodes.push(document.createTextNode(text.slice(last, index)));
-    let emoji;
-    try {
-      emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
-    } catch (e) {}
+    let emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
    if (!emoji) {
      nodes.push(document.createTextNode(match));
    } else {
--- a/frontend/lib/links.mjs
+++ b/frontend/lib/links.mjs
@ -1,115 +0,0 @@
-export async function linkify(
-  text,
-  next = async (t) => [document.createTextNode(t)]
-) {
-  let last = 0;
-  let nodes = [];
-  let promise = Promise.resolve();
-  // matching non-urls isn't a problem, we use the browser's url parser to filter them out
-  text.replace(
-    /[^:/?#\s]+:\/\/\S+/g,
-    (match, index) =>
-      (promise = promise.then(async () => {
-        if (last <= index) nodes.push(...(await next(text.slice(last, index))));
-        let url;
-        try {
-          url = new URL(match);
-          if (url.protocol === "javascript:") throw new Error();
-        } catch (e) {
-          url = null;
-        }
-        if (!url) {
-          nodes.push(...(await next(match)));
-        } else {
-          let s;
-          if (
-            url.origin == location.origin &&
-            url.pathname == "/" &&
-            url.hash.length > 1
-          ) {
-            nodes.push(
-              Object.assign(document.createElement("a"), {
-                href: url.href,
-                textContent: "Join Session",
-                className: "chip join-chip",
-              })
-            );
-          } else if (
-            url.hostname == "xiv.st" &&
-            (s = url.pathname.match(/(\d?\d).?(\d\d)/))
-          ) {
-            if (s) {
-              const date = new Date();
-              date.setUTCSeconds(0);
-              date.setUTCMilliseconds(0);
-              date.setUTCHours(s[1]), date.setUTCMinutes(s[2]);
-              nodes.push(
-                Object.assign(document.createElement("a"), {
-                  href: url.href,
-                  textContent: date.toLocaleString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
-                  }),
-                  className: "chip time-chip",
-                  target: "_blank",
-                })
-              );
-            }
-          } else {
-            nodes.push(
-              Object.assign(document.createElement("a"), {
-                href: url.href,
-                textContent: url.href,
-                target: "_blank",
-              })
-            );
-          }
-        }
-        last = index + match.length;
-      }))
-  );
-  await promise;
-  if (last < text.length) nodes.push(...(await next(text.slice(last))));
-  return nodes;
-}
-const emojis = {};
-
-export const emojisLoaded = Promise.all([
-  fetch("/emojis")
-    .then((e) => e.json())
-    .then((a) => {
-      for (let e of a) {
-        const name = e.slice(0, -4),
-          lower = name.toLowerCase();
-        emojis[lower[0]] = emojis[lower[0]] || [];
-        emojis[lower[0]].push([name, ":" + name + ":", e.slice(-4), lower]);
-      }
-    }),
-  fetch("/emojis/unicode.json")
-    .then((e) => e.json())
-    .then((a) => {
-      for (let e of a) {
-        emojis[e[0][0]] = emojis[e[0][0]] || [];
-        emojis[e[0][0]].push([e[0], e[1], null, e[0]]);
-      }
-    }),
-]);
-
-export async function findEmojis(search) {
-  await emojisLoaded;
-  let groups = [[], []];
-  if (search.length < 1) {
-    for (let letter of Object.keys(emojis).sort())
-      for (let emoji of emojis[letter]) {
-        (emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
-      }
-  } else {
-    search = search.toLowerCase();
-    for (let emoji of emojis[search[0]]) {
-      if (search.length == 1 || emoji[3].startsWith(search)) {
-        (emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
-      }
-    }
-  }
-  return [...groups[0], ...groups[1]];
-}
--- a/frontend/lib/watch-session.mjs
+++ b/frontend/lib/watch-session.mjs
@ -220,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...");
--- a/frontend/styles.css
+++ b/frontend/styles.css
@ -1,6 +1,4 @@
-*,
-*:before,
-*:after {
+* {
  box-sizing: border-box;
 }

@ -19,12 +17,6 @@
      var(--fg-transparent)
    ),
    linear-gradient(var(--bg), var(--bg));
-  --chip-bg: linear-gradient(
-      var(--accent-transparent),
-      var(--accent-transparent)
-    ),
-    linear-gradient(var(--bg), var(--bg));
-  --accent-transparent: rgba(var(--accent-rgb), 0.25);
 }

 html {
@ -66,45 +58,6 @@ a {
  color: var(--accent);
 }

-.chip {
-  color: var(--fg);
-  background: var(--chip-bg);
-  text-decoration: none;
-  padding: 0 0.5rem 0 1.45rem;
-  display: inline-flex;
-  position: relative;
-  font-size: 0.9rem;
-  height: 1.125rem;
-  align-items: center;
-  border-radius: 2rem;
-  overflow: hidden;
-}
-
-.chip::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 1.125rem;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  background: var(--accent-transparent);
-  background-repeat: no-repeat;
-  background-size: 18px;
-  background-position: center;
-}
-
-.join-chip::before {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTggNXYxNGwxMS03eiIvPjwvc3ZnPg==");
-}
-
-.time-chip::before {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTExLjk5IDJDNi40NyAyIDIgNi40OCAyIDEyczQuNDcgMTAgOS45OSAxMEMxNy41MiAyMiAyMiAxNy41MiAyMiAxMlMxNy41MiAyIDExLjk5IDJ6TTEyIDIwYy00LjQyIDAtOC0zLjU4LTgtOHMzLjU4LTggOC04IDggMy41OCA4IDgtMy41OCA4LTggOHoiLz48cGF0aCBkPSJNMTIuNSA3SDExdjZsNS4yNSAzLjE1Ljc1LTEuMjMtNC41LTIuNjd6Ii8+PC9zdmc+");
-}
-
 label {
  display: block;
 }
@ -211,7 +164,6 @@ button.small-button {

 .chat-message {
  overflow-wrap: break-word;
-  margin-bottom: 0.125rem;
 }

 .chat-message > strong,
@ -219,12 +171,32 @@ button.small-button {
  color: var(--user-color, var(--default-user-color));
 }

+/*
+@supports (-webkit-background-clip: text) {
+  .chat-message > strong,
+  #viewer-list strong {
+    background: linear-gradient(var(--fg-transparent), var(--fg-transparent)),
+      linear-gradient(
+        var(--user-color, var(--default-user-color)),
+        var(--user-color, var(--default-user-color))
+      );
+    -webkit-background-clip: text;
+    color: transparent !important;
+  }
+}
+*/
+
 .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;
@ -313,11 +285,9 @@ button.small-button {
  padding: 0.25rem 0.5rem;
  scroll-margin: 0.25rem;
 }
-
 .emoji-option:first-child {
  margin-top: 0.25rem;
 }
-
 .emoji-option:last-child {
  margin-bottom: 0.25rem;
 }
Author	SHA1	Message	Date
easrng	fbedc0ba23	whoops i forgor a newline	2022-02-18 17:33:19 -05:00
easrng	437004fb9b	fix votekiss	2022-02-18 17:28:56 -05:00
easrng	fb136a1899	oh no aaaa	2022-02-18 17:14:54 -05:00
easrng	1bf13d9776	fix broken things	2022-02-18 17:13:49 -05:00
easrng	a514241bee	fix emoji name overflow (again) and sorting	2022-02-18 16:52:37 -05:00
easrng	cdec8b72a9	Merge branch 'main' of lavender.software:lavender/watch-party	2022-02-18 14:48:56 -05:00
easrng	92860f1ae6	add votekiss	2022-02-18 14:48:36 -05:00