Update index.html

2025-06-16 07:14:21 -06:00 · 2025-03-11 09:30:39 -04:00 · 2025-03-11 09:30:39 -04:00 · 70b634f7cf
commit 70b634f7cf
parent ba128e3d2a
1 changed files with 91 additions and 22 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,24 +1,93 @@
-<script>
-    const socket = io();
-    const messages = document.getElementById('messages');
-    const input = document.getElementById('message-input');
-    const button = document.getElementById('send-button');
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat Service</title>
+    <script src="/socket.io/socket.io.js"></script>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        ul { list-style-type: none; padding: 0; }
+        li { margin: 5px 0; }
+        #messages { max-height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; }
+        #message-input, #username-input { width: 70%; margin-right: 5px; }
+        #username-button, #send-button { margin-top: 5px; }
+    </style>
+</head>
+<body>
+    <h1>Chat Service</h1>
+    <ul id="messages"></ul>

-    button.addEventListener('click', () => {
-        const message = input.value.trim();
-        if (message) {
-            console.log(`Message sent: ${message}`); // Log message to console
-            const item = document.createElement('li'); // Create a new list item
-            item.textContent = message;
-            messages.appendChild(item); // Append to chat box locally
-            socket.emit('chat message', message); // Send to server
-            input.value = ''; // Clear input box
-        }
-    });
+    <!-- Username Input -->
+    <input id="username-input" placeholder="Set your username..." autocomplete="off">
+    <button id="username-button">Set Username</button>
+    <br>
+
+    <!-- Chat Input -->
+    <input id="message-input" autocomplete="off" placeholder="Type your message...">
+    <button id="send-button">Send</button>
+
+    <script>
+        const socket = io();
+        const messages = document.getElementById('messages');
+        const usernameInput = document.getElementById('username-input');
+        const usernameButton = document.getElementById('username-button');
+        const messageInput = document.getElementById('message-input');
+        const sendButton = document.getElementById('send-button');
+
+        let isChatLocked = false;
+
+        // Default username
+        let username = "Anonymous";
+
+        // Handle username updates
+        usernameButton.addEventListener('click', () => {
+            const newUsername = usernameInput.value.trim();
+            if (newUsername) {
+                username = newUsername; // Update username locally
+                socket.emit('set username', username); // Notify the server of the username change
+                alert(`Your username is now set to: ${username}`);
+                usernameInput.value = ''; // Clear input field
+            }
+        });
+
+        // Send chat messages
+        sendButton.addEventListener('click', () => {
+            const message = messageInput.value.trim();
+            if (message) {
+                socket.emit('chat message', message); // Send message to the server
+                messageInput.value = ''; // Clear input field
+            }
+        });
+
+        // Display incoming chat messages
+        socket.on('chat message', (msg) => {
+            const item = document.createElement('li');
+            item.textContent = msg;
+            messages.appendChild(item);
+        });
+
+        // Handle chat lock status
+        socket.on('chat lock status', (lockStatus) => {
+            isChatLocked = lockStatus;
+            alert(`Chat is now ${lockStatus ? 'locked' : 'unlocked'}.`);
+        });
+
+        // Clear all messages
+        socket.on('chat history', (history) => {
+            messages.innerHTML = ''; // Clear all messages
+            history.forEach((msg) => {
+                const item = document.createElement('li');
+                item.textContent = msg;
+                messages.appendChild(item);
+            });
+        });
+
+        // Notify if chat is locked
+        socket.on('chat locked', () => {
+            alert('Chat is currently locked. You cannot send messages.');
+        });
+    </script>
+</body>
+</html>

-    socket.on('chat message', (msg) => {
-        const item = document.createElement('li');
-        item.textContent = msg;
-        messages.appendChild(item);
-    });
-</script>