update

2026-03-02 08:47:52 -05:00
parent a1b599d030
commit 661011485c
7 changed files with 184 additions and 42 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #chat-container {
+            width: 400px;
+            height: 500px;
+            border: 1px solid #ccc;
+            display: flex;
+            flex-direction: column;
+        }
+        #messages {
+            flex: 1;
+            overflow-y: auto; /* Enables scrolling */
+            padding: 10px;
+            background: #f9f9f9;
+        }
+        .msg { margin-bottom: 10px; }
+        .user { font-weight: bold; color: #2c3e50; }
+        .time { font-size: 0.7em; color: #999; }
+        .controls { display: flex; padding: 10px; border-top: 1px solid #eee; }
+        input { flex: 1; padding: 5px; }
+    </style>
+</head>
+<body>
+    <div id="chat-container">
+        <div id="messages"></div>
+        <div class="controls">
+            <input type="text" id="input" placeholder="Enter message...">
+            <button onclick="send()">Send</button>
+        </div>
+    </div>
+
+    <script>
+        const room = new URLSearchParams(window.location.search).get('room') || 'general';
+        const ws = new WebSocket(`ws://localhost:8080/ws?room=${room}`);
+        const msgDiv = document.getElementById('messages');
+
+        ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            appendMessage(data);
+        };
+
+        function appendMessage(data) {
+            const item = document.createElement('div');
+            item.className = 'msg';
+            const time = new Date(data.timestamp).toLocaleTimeString();
+            
+            item.innerHTML = `
+                <span class="user">${data.username}:</span> 
+                <span>${data.content}</span>
+                <div class="time">${time}</div>
+            `;
+            msgDiv.appendChild(item);
+            
+            // Auto-scroll to bottom when a new message arrives
+            msgDiv.scrollTop = msgDiv.scrollHeight;
+        }
+
+        function send() {
+            const input = document.getElementById('input');
+            ws.send(JSON.stringify({
+                content: input.value,
+                username: "User123" // In production, get this from auth
+            }));
+            input.value = '';
+        }
+    </script>
+</body>
+</html>