From dae4bb380f7cd2637e3dad6cdb5ae16d3a0a87bd Mon Sep 17 00:00:00 2001
From: Maxwell Jeffress <max@maxwellj.xyz>
Date: Sun, 24 Nov 2024 16:07:45 +1100
Subject: [PATCH] Typing indicators, online users

---
 client-web/index.css  |   9 ++++
 client-web/index.html |   2 +
 client-web/index.js   | 107 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 118 insertions(+)

diff --git a/client-web/index.css b/client-web/index.css
index 67c72a4..47b1212 100644
--- a/client-web/index.css
+++ b/client-web/index.css
@@ -206,3 +206,12 @@ input {
     margin: 0; /* Remove default margins */
     white-space: nowrap; /* Prevent button text from wrapping */
 }
+
+.suttle {
+    text-align: left;
+    width: 100%;
+    padding-left: 10px;
+    margin-bottom: 5px;
+    font-size: 0.9em;
+    color: rgba(255, 255, 255, 0.7);  /* Makes it slightly subtle */
+}
diff --git a/client-web/index.html b/client-web/index.html
index 2ef4c6f..581b442 100644
--- a/client-web/index.html
+++ b/client-web/index.html
@@ -32,7 +32,9 @@
         </div>
         <div class="hidden" id="messaging">
                 <div class="box">
+                    <div id="users" class="suttle"></div>
                     <div id="messagebox" class="box" style="height: 600px;"><div></div></div>
+                    <div id="typing" class="suttle"></div>
                     <div class="input-container">
                         <input type="text" id="messageInput" placeholder="Send a message...">
                         <button onclick="sendMessage()" class="bluebutton">Send</button>
diff --git a/client-web/index.js b/client-web/index.js
index 91d9e08..7727e02 100644
--- a/client-web/index.js
+++ b/client-web/index.js
@@ -14,6 +14,8 @@ if (width < 512) {
 let ws;
 let username;
 let password;
+let typingTimeout;
+let typingPeople = new Array();
 
 function resizeMessaging() {
     const messagingDiv = document.getElementById('messaging');
@@ -93,6 +95,7 @@ function connect() {
             "content": `${username} joined the room!`
         }
         ws.send(JSON.stringify(connectMessage));
+        console.log(typingPeople);
         ws.onmessage = (event) => {
             if (event.data === "ping") {
                 ws.send("pong");
@@ -111,8 +114,39 @@ function connect() {
                         incorrectDetail = 1;
                         location.reload();
                     }
+                    if (message.content == "banned") {
+                        alert("kiddo you're banned lol what did you do to get banned lmaooo");
+                        incorrectDetail = 1;
+                        location.reload();
+                    }
                 }
             }
+            if (message.type == "typing" && message.content == "1") {
+                console.log(`${message.username} is typing`);
+                if (username !== message.username && !typingPeople.includes(message.username)) {
+                    typingPeople.push(message.username);
+                    console.log(typingPeople);
+                    updatePeopleTyping();
+                }
+                return;
+            }
+            if (message.type == "typing" && message.content == "0") {
+                console.log(`${message.username} is no longer typing`)
+                if (username !== message.username && typingPeople.includes(message.username)) {
+                    const index = typingPeople.indexOf(message.username);
+                    typingPeople.splice(index, 1);
+                    console.log(typingPeople);
+                    updatePeopleTyping();
+                }
+                return;
+            }
+            if (message.type == "users" && message.username == "system") {
+                usersDiv = document.getElementById("users");
+                if (usersDiv) {
+                    usersDiv.textContent = `Online users: ${message.content}`
+                }
+                return;
+            }
             const messagesDiv = document.getElementById('messagebox');
             const messageElement = document.createElement('div');
             if (messageElement) {
@@ -147,6 +181,28 @@ function sendMessage() {
     if (processedMessage && ws && ws.readyState === WebSocket.OPEN) {
         ws.send(JSON.stringify(processedMessage));
         messageInput.value = '';
+
+        if (typingTimeout) {
+            clearTimeout(typingTimeout);
+        }
+        const stoppedTypingMessage = {
+            "type": "typing",
+            "username": username,
+            "token": md5(password),
+            "content": "0"
+        };
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(stoppedTypingMessage));
+        }
+    }
+    const processedMessage2 = {
+        "type": "typing",
+        "username": username,
+        "token": md5(password),
+        "content": "0"
+    }
+    if (processedMessage && ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(processedMessage2));
     }
 }
 
@@ -173,3 +229,54 @@ function register() {
 
     window.open(`${getSignupUrl()}username:{${username}}token:{${md5(password)}}`);
 }
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function startTypingIndicator() {
+    if (typingTimeout) {
+        clearTimeout(typingTimeout);
+    }
+
+    const typingMessage = {
+        "type": "typing",
+        "username": username,
+        "token": md5(password),
+        "content": "1"
+    };
+
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(typingMessage));
+    }
+
+    typingTimeout = setTimeout(() => {
+        const stoppedTypingMessage = {
+            "type": "typing",
+            "username": username,
+            "token": md5(password),
+            "content": "0"
+        };
+
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(stoppedTypingMessage));
+        }
+    }, 5000);
+}
+
+function updatePeopleTyping() {
+    const typingDiv = document.getElementById('typing');
+    if (typingDiv) {
+        if (typingPeople.length === 0) {
+            typingDiv.textContent = '';
+        } else if (typingPeople.length === 1) {
+            typingDiv.textContent = `${typingPeople[0]} is typing...`;
+        } else if (typingPeople.length === 2) {
+            typingDiv.textContent = `${typingPeople[0]} and ${typingPeople[1]} are typing...`;
+        } else {
+            typingDiv.textContent = `${typingPeople.length} people are typing...`;
+        }
+    }
+}
+
+document.getElementById('messageInput').addEventListener('input', startTypingIndicator);