Compare commits

...

7 Commits

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
5 changed files with 73 additions and 10 deletions

View File

@ -5,6 +5,9 @@ import {
} from "./watch-session.mjs?v=048af96"; } from "./watch-session.mjs?v=048af96";
import { emojify, findEmojis } from "./emojis.mjs?v=048af96"; import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
let nickname = "";
let kisses = {};
function setCaretPosition(elem, caretPos) { function setCaretPosition(elem, caretPos) {
if (elem.createTextRange) { if (elem.createTextRange) {
var range = elem.createTextRange(); var range = elem.createTextRange();
@ -184,6 +187,24 @@ const setupChatboxEvents = (socket) => {
); );
handled = true; handled = true;
break; 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": case "/help":
const helpMessageContent = document.createElement("span"); const helpMessageContent = document.createElement("span");
helpMessageContent.innerHTML = helpMessageContent.innerHTML =
@ -191,7 +212,8 @@ const setupChatboxEvents = (socket) => {
"&emsp;<code>/help</code> - display this help message<br>" + "&emsp;<code>/help</code> - display this help message<br>" +
"&emsp;<code>/ping [message]</code> - ping all viewers<br>" + "&emsp;<code>/ping [message]</code> - ping all viewers<br>" +
"&emsp;<code>/sync</code> - resyncs you with other 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( printChatMessage(
"command-message", "command-message",
@ -224,7 +246,8 @@ const setupChatboxEvents = (socket) => {
/** /**
* @param {WebSocket} 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"; document.querySelector("#chatbox-container").style["display"] = "flex";
setupChatboxEvents(socket); setupChatboxEvents(socket);
@ -327,6 +350,31 @@ const formatTime = (ms) => {
}:${seconds < 10 ? "0" + seconds : seconds}`; }:${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) => { export const logEventToChat = async (event) => {
if (checkDebounce(event)) { if (checkDebounce(event)) {
return; return;
@ -349,12 +397,15 @@ export const logEventToChat = async (event) => {
event.colour, event.colour,
document.createTextNode("left") document.createTextNode("left")
); );
for (let kissed in kisses) delete kisses[kissed][event.user];
break; break;
} }
case "ChatMessage": { case "ChatMessage": {
const messageContent = document.createElement("span"); const messageContent = document.createElement("span");
messageContent.classList.add("message-content"); messageContent.classList.add("message-content");
if (handleClientCommand(event.data, event.user)) break;
messageContent.append(...(await emojify(event.data))); messageContent.append(...(await emojify(event.data)));
printChatMessage( printChatMessage(
"chat-message", "chat-message",
event.user, event.user,
@ -433,7 +484,10 @@ const beep = () => {
oscillator.stop(context.currentTime + 0.22); oscillator.stop(context.currentTime + 0.22);
}; };
export const updateViewerList = (viewers) => { let viewers = [];
export const updateViewerList = (_viewers) => {
viewers = _viewers;
const listContainer = document.querySelector("#viewer-list"); const listContainer = document.querySelector("#viewer-list");
// empty out the current list // empty out the current list

View File

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

View File

@ -26,9 +26,9 @@ export default class ReconnectingWebSocket {
} }
this._socket.addEventListener("close", () => this._reconnect()); this._socket.addEventListener("close", () => this._reconnect());
this._socket.addEventListener("error", () => 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) => { this._socket.addEventListener("open", (e) => {
if (first) this._eventTarget.dispatchEvent(new Event("open")); if (first) this._eventTarget.dispatchEvent(new Event("open"));
if (this._reconnecting) if (this._reconnecting)

View File

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

View File

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