feat: display joined/parted chatters

2 files changed, 41 insertions, 9 deletions

diff --git a/scripts/chat.js b/scripts/chat.js
index da54647..1bb889a 100644
--- a/scripts/chat.js
+++ b/scripts/chat.js
@@ -82,13 +82,15 @@ function addMessage(message) {
     }
     
     // username
-    const usernameElem = document.createElement("span");
-    elem.append(usernameElem);
-    if ("color" in message.tags) {
-        usernameElem.style.color = message.tags["color"];
+    if (message.nick != null && message.nick.length > 0) {
+        const usernameElem = document.createElement("span");
+        elem.append(usernameElem);
+        if ("color" in message.tags) {
+            usernameElem.style.color = message.tags["color"];
+        }
+        usernameElem.classList.add("author");
+        usernameElem.textContent = `${message.nick}:`;
     }
-    usernameElem.classList.add("author");
-    usernameElem.textContent = `${message.nick}:`;
     
     // message text
     let msgWords = message.params[1].split(" ");
@@ -112,10 +114,10 @@ function addMessage(message) {
     }
 }
 
-function addSystemMessage(message) {
+function addSystemMessage(message, nick = "System") {
     addMessage({
         "params": ["#", message],
-        "nick": "System",
+        "nick": nick,
         "prefix": "system",
         "tags": {},
         "command": "PRIVMSG",
@@ -124,11 +126,30 @@ function addSystemMessage(message) {
 
 function connectToChat(host, nick, password, room) {
     const socket = new WebSocket(host);
+    const membership = {
+        "joined": [],
+        "parted": []
+    };
+    
+    const membershipInterval = setInterval(() => {
+        if (membership.joined.length > 0) {
+            addSystemMessage(`Users joined: ${membership.joined.join(", ")}`, null);
+            membership.joined = [];
+        }
+        
+        if (membership.parted.length > 0) {
+            addSystemMessage(`Users parted: ${membership.parted.join(", ")}`, null);
+            membership.parted = [];
+        }
+    }, 10000);
     
     socket.addEventListener("open", () => {
         socket.send(`NICK ${nick}`);
         socket.send(`PASS ${password}`);
         socket.send("CAP REQ :twitch.tv/tags");
+        if (params["membership"] == "1") {
+            socket.send("CAP REQ :twitch.tv/membership");
+        }
         socket.send(`JOIN #${room}`);
         addSystemMessage("Connected to the chat!");
     });
@@ -144,12 +165,19 @@ function connectToChat(host, nick, password, room) {
             let m = parseIRCMessage(l);
             console.log(m);
             addMessage(m);
+            
+            if (m.command == "JOIN" && m.nick != "justinfan12345") {
+                membership.joined.push(m.nick);
+            } else if (m.command == "PART" && m.nick != "justinfan12345") {
+                membership.parted.push(m.nick);
+            }
         }
     });
     
     socket.addEventListener("close", (e) => {
         addMessage("Chat", `Disconnected from the chat: ${e.reason}`);
         addMessage("Chat", "Reconnecting to the chat in 5 seconds...");
+        clearInterval(membershipInterval);
         setTimeout(() => connectToChat(host, nick, password, room), 5000);
     });
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 44e5182..9776355 100644
--- a/style.css
+++ b/style.css
@@ -18,11 +18,15 @@
 .message {
     background: var(--message-background);
     text-shadow: 1px 1px 2px var(--message-shadow-color);
-    color: var(--message-color);
     padding: 4px;
     border-bottom: 1px solid var(--message-shadow-color);
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
+    color: gray;
+}
+
+.message:has(.author) {
+    color: var(--message-color);
 }
 
 .message .author {