Mercurial

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Talk!</title>
  {{/parts/base_head.html}}
  <style>
    body { font-family: sans-serif; padding: var(--zenbu-sys-padding-lg); }
    #messages { height: 200px; border: 1px solid #ccc; overflow-y: scroll; margin-bottom: var(--zenbu-sys-space-control); padding: var(--zenbu-sys-padding-md); }
    #chat { display: flex; gap: 10px; }
    input { flex-grow: 1; }
  </style>
</head>
<body>
  {{/parts/header.html}}
  <main>
    <h1>Talk with strangers xDDD</h1>

    <div id="messages"></div>

    <div id="chat">
      <zen-input appearance="plain" size="md">
        <input type="text" id="messageInput" placeholder="Type a message...">
      </zen-input>
      <zen-button appearance="plain" size="md">
        <button id="sendBtn">Send</button>
      </zen-button>
    </div>
  </main>
  {{/parts/footer.html}}
  <script>
    const host = window.location.hostname;
    const port = '6969';
    const url = host === "mrjunejune.com" ? `wss://${host}/echo` : `ws://${host}:${port}/echo`;
    const ws = new WebSocket(url);
    const messagesDiv = document.getElementById('messages');

    ws.onopen = () => {
      console.log('Connected!');
      appendMessage('System: Connected to server');
    };

    ws.onmessage = (event) => {
      console.log('Received:', event.data);
      appendMessage('Server: ' + event.data);
    };

    // Function to send message
    sendBtn.onclick = () => {
      const message = messageInput.value;
      if (message) {
        ws.send(message);
        appendMessage('You: ' + message);
        messageInput.value = ''; // Clear input
      }
    };

    // Helper to show messages on screen
    function appendMessage(text) {
      const msg = document.createElement('p');
      msg.textContent = text;
      messagesDiv.appendChild(msg);
      messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }

    messageInput.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' && !event.shiftKey)
      {
        event.preventDefault();
        sendBtn.click();
      }
    });
  </script>
</body>
</html>
author	MrJuneJune <me@mrjunejune.com>
date	Mon, 17 Aug 2026 22:22:36 -0700
parents	60a876c4587a
children