Mercurial

annotate mrjunejune/src/talk/index.html @ 145:c1eab8c0b0f9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Small improvement UX and tests passes now.
author June Park <parkjune1995@gmail.com>
date Fri, 09 Jan 2026 13:42:35 -0800
parents 276bb3555034
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
125
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
1 <!DOCTYPE html>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
2 <html lang="en">
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
3 <head>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
4 <meta charset="UTF-8">
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
5 <title>Talk!</title>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
6 {{/parts/base_head.html}}
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
7 <style>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
8 body { font-family: sans-serif; padding: 20px; }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
9 #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: 10px; padding: 10px; }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
10 #chat { display: flex; gap: 10px; }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
11 input { flex-grow: 1; }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
12 </style>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
13 </head>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
14 <body>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
15 {{/parts/header.html}}
145
c1eab8c0b0f9 [MrJuneJune] Small improvement UX and tests passes now.
June Park <parkjune1995@gmail.com>
parents: 143
diff changeset
16 <main>
c1eab8c0b0f9 [MrJuneJune] Small improvement UX and tests passes now.
June Park <parkjune1995@gmail.com>
parents: 143
diff changeset
17 <h1>Talk with strangers xDDD</h1>
125
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
18
145
c1eab8c0b0f9 [MrJuneJune] Small improvement UX and tests passes now.
June Park <parkjune1995@gmail.com>
parents: 143
diff changeset
19 <div id="messages"></div>
125
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
20
145
c1eab8c0b0f9 [MrJuneJune] Small improvement UX and tests passes now.
June Park <parkjune1995@gmail.com>
parents: 143
diff changeset
21 <div id="chat">
c1eab8c0b0f9 [MrJuneJune] Small improvement UX and tests passes now.
June Park <parkjune1995@gmail.com>
parents: 143
diff changeset
22 <input type="text" id="messageInput" placeholder="Type a message...">
c1eab8c0b0f9 [MrJuneJune] Small improvement UX and tests passes now.
June Park <parkjune1995@gmail.com>
parents: 143
diff changeset
23 <button id="sendBtn">Send</button>
c1eab8c0b0f9 [MrJuneJune] Small improvement UX and tests passes now.
June Park <parkjune1995@gmail.com>
parents: 143
diff changeset
24 </div>
c1eab8c0b0f9 [MrJuneJune] Small improvement UX and tests passes now.
June Park <parkjune1995@gmail.com>
parents: 143
diff changeset
25 </main>
125
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
26 {{/parts/footer.html}}
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
27 <script>
136
75c144fd6964 [MrJuneJune] Fix the js file to hit correct endpoints.
June Park <parkjune1995@gmail.com>
parents: 125
diff changeset
28 const host = window.location.hostname;
75c144fd6964 [MrJuneJune] Fix the js file to hit correct endpoints.
June Park <parkjune1995@gmail.com>
parents: 125
diff changeset
29 const port = '6969';
143
276bb3555034 Should work now.
June Park <parkjune1995@gmail.com>
parents: 139
diff changeset
30 const url = host === "mrjunejune.com" ? `wss://${host}/echo` : `ws://${host}:${port}/echo`;
138
June Park <parkjune1995@gmail.com>
parents: 137
diff changeset
31 const ws = new WebSocket(url);
125
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
32 const messagesDiv = document.getElementById('messages');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
33
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
34 ws.onopen = () => {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
35 console.log('Connected!');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
36 appendMessage('System: Connected to server');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
37 };
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
38
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39 ws.onmessage = (event) => {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
40 console.log('Received:', event.data);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
41 appendMessage('Server: ' + event.data);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
42 };
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
43
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
44 // Function to send message
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
45 sendBtn.onclick = () => {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
46 const message = messageInput.value;
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
47 if (message) {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
48 ws.send(message);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
49 appendMessage('You: ' + message);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
50 messageInput.value = ''; // Clear input
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
51 }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
52 };
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
53
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
54 // Helper to show messages on screen
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
55 function appendMessage(text) {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
56 const msg = document.createElement('p');
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
57 msg.textContent = text;
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
58 messagesDiv.appendChild(msg);
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
59 messagesDiv.scrollTop = messagesDiv.scrollHeight;
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
60 }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
61
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
62 messageInput.addEventListener('keydown', (event) => {
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
63 if (event.key === 'Enter' && !event.shiftKey)
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
64 {
136
75c144fd6964 [MrJuneJune] Fix the js file to hit correct endpoints.
June Park <parkjune1995@gmail.com>
parents: 125
diff changeset
65 event.preventDefault();
75c144fd6964 [MrJuneJune] Fix the js file to hit correct endpoints.
June Park <parkjune1995@gmail.com>
parents: 125
diff changeset
66 sendBtn.click();
125
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
67 }
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
68 });
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
69 </script>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
70 </body>
f236c895604e [MrJuneJune] Added web socket for chat to this.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
71 </html>