1 files changed, 451 insertions, 0 deletions

diff --git a/chat/templates/room.html b/chat/templates/room.html
new file mode 100644
index 0000000..de76f67
--- /dev/null
+++ b/chat/templates/room.html
@@ -0,0 +1,451 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#c9b8ff">
+    <title>{{ room_name }} — dreamchat</title>
+    <style>
+        :root {
+            --grad-start: #c9b8ff;
+            --grad-end:   #f9b8e8;
+            --accent:     #8b6cef;
+            --bubble-in-bg:   #f0ebff;
+            --bubble-in-text: #2d2040;
+            --surface:    #ffffff;
+            --text-main:  #2d2040;
+            --text-muted: #8c7faa;
+            --radius-bubble: 18px;
+            --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        body {
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
+            background: linear-gradient(160deg, #ede7ff 0%, #fce4f6 100%);
+            font-family: var(--font);
+            overflow: hidden;
+        }
+
+        /* ---- Header ---- */
+        .room-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 16px;
+            padding-top: calc(10px + env(safe-area-inset-top));
+            background: rgba(255, 255, 255, 0.75);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border-bottom: 1px solid rgba(139, 108, 239, 0.12);
+            flex-shrink: 0;
+        }
+
+        .back-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            color: var(--accent);
+            text-decoration: none;
+            font-size: 1.2rem;
+            font-weight: 600;
+            transition: background 0.15s;
+            flex-shrink: 0;
+        }
+
+        .back-btn:hover { background: #f0ebff; }
+
+        .header-center {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .room-title {
+            font-size: 1.05rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--accent), #e06aba);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .username-row { display: flex; align-items: center; }
+
+        .username-chip {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            background: none;
+            border: none;
+            padding: 0;
+            font-size: 0.78rem;
+            font-family: var(--font);
+            color: var(--text-muted);
+            cursor: pointer;
+            transition: color 0.15s;
+        }
+
+        .username-chip:hover { color: var(--accent); }
+        .edit-icon { font-size: 0.7rem; }
+
+        .username-edit {
+            font-size: 0.78rem;
+            font-family: var(--font);
+            color: var(--text-main);
+            border: none;
+            border-bottom: 1.5px solid var(--accent);
+            outline: none;
+            background: transparent;
+            width: 130px;
+            padding: 1px 2px;
+        }
+
+        .disconnect-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            background: none;
+            border: 1.5px solid #d0c5f0;
+            color: var(--text-muted);
+            border-radius: 50%;
+            font-size: 0.85rem;
+            cursor: pointer;
+            flex-shrink: 0;
+            transition: background 0.15s, border-color 0.15s;
+        }
+
+        .disconnect-btn:hover { background: #f0ebff; border-color: var(--accent); }
+
+        /* ---- Message area ---- */
+        .chat-log {
+            flex: 1;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+            padding: 16px 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        /* ---- Bubbles ---- */
+        .bubble-row {
+            display: flex;
+            width: 100%;
+        }
+
+        .bubble-row.sent  { justify-content: flex-end; }
+        .bubble-row.recv  { justify-content: flex-start; }
+
+        .bubble-wrapper {
+            display: flex;
+            flex-direction: column;
+            max-width: 72%;
+            gap: 3px;
+        }
+
+        .bubble-row.sent .bubble-wrapper { align-items: flex-end; }
+        .bubble-row.recv .bubble-wrapper { align-items: flex-start; }
+
+        .bubble {
+            padding: 10px 15px;
+            border-radius: var(--radius-bubble);
+            font-size: 0.97rem;
+            line-height: 1.45;
+            word-wrap: break-word;
+            animation: pop-in 0.15s ease-out;
+        }
+
+        .sent .bubble {
+            background: linear-gradient(135deg, var(--accent), #b06add);
+            color: #ffffff;
+            border-bottom-right-radius: 4px;
+        }
+
+        .recv .bubble {
+            background: var(--bubble-in-bg);
+            color: var(--bubble-in-text);
+            border-bottom-left-radius: 4px;
+            box-shadow: 0 2px 8px rgba(139, 108, 239, 0.1);
+        }
+
+        .bubble-sender {
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--accent);
+            padding: 0 4px;
+        }
+
+        .bubble-time {
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            padding: 0 4px;
+        }
+
+        @keyframes pop-in {
+            from { opacity: 0; transform: scale(0.9) translateY(4px); }
+            to   { opacity: 1; transform: scale(1) translateY(0); }
+        }
+
+        /* ---- Input bar ---- */
+        .input-bar {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 12px 16px;
+            padding-bottom: calc(12px + env(safe-area-inset-bottom));
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border-top: 1px solid rgba(139, 108, 239, 0.12);
+            flex-shrink: 0;
+        }
+
+        .input-bar input {
+            flex: 1;
+            min-width: 0;
+            border: 2px solid #e8e0ff;
+            border-radius: 50px;
+            padding: 11px 18px;
+            font-size: 1rem;
+            font-family: var(--font);
+            color: var(--text-main);
+            background: #fff;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        .input-bar input:focus { border-color: var(--accent); }
+        .input-bar input::placeholder { color: var(--text-muted); }
+
+        .send-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 44px;
+            height: 44px;
+            background: linear-gradient(135deg, var(--accent), #b06add);
+            color: #fff;
+            border: none;
+            border-radius: 50%;
+            font-size: 1rem;
+            cursor: pointer;
+            flex-shrink: 0;
+            transition: opacity 0.15s, transform 0.1s;
+        }
+
+        .send-btn:hover  { opacity: 0.9; }
+        .send-btn:active { transform: scale(0.93); }
+
+        /* ---- System messages ---- */
+        .system-msg {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.72rem;
+            color: var(--text-muted);
+            padding: 4px 0;
+            animation: pop-in 0.2s ease-out;
+        }
+
+        .system-msg::before,
+        .system-msg::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: rgba(139, 108, 239, 0.2);
+        }
+    </style>
+</head>
+<body>
+    <header class="room-header">
+        <a href="/" class="back-btn" aria-label="Back to rooms">←</a>
+        <div class="header-center">
+            <span class="room-title">{{ room_name }}</span>
+            <div class="username-row">
+                <button id="username-display" class="username-chip" aria-label="Edit username">
+                    <span id="username-text"></span>
+                    <span class="edit-icon">✏️</span>
+                </button>
+                <input id="username-input" class="username-edit"
+                       aria-label="Your username" hidden
+                       maxlength="30" autocomplete="off" spellcheck="false">
+            </div>
+        </div>
+        <button id="chat-message-disconnect" class="disconnect-btn" hidden aria-label="Disconnect">✕</button>
+    </header>
+
+    <main id="chat-log" class="chat-log" aria-live="polite" aria-label="Chat messages"></main>
+
+    <footer class="input-bar">
+        <input id="chat-message-input" type="text" placeholder="Message…"
+               aria-label="Message"
+               autocomplete="off" autocapitalize="sentences">
+        <button id="chat-message-submit" class="send-btn" aria-label="Send">➤</button>
+    </footer>
+
+    {{ room_name|json_script:"room-name" }}
+    <script>
+        const ADJECTIVES = ['Dreamy','Cosmic','Fuzzy','Glowing','Misty','Silky','Starry','Velvet','Cozy','Dewy','Wispy','Breezy'];
+        const ANIMALS    = ['Fox','Moth','Owl','Bear','Deer','Lark','Lynx','Mink','Swan','Wolf','Wren','Panda'];
+
+        function generateUsername() {
+            const adj    = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)];
+            const animal = ANIMALS[Math.floor(Math.random() * ANIMALS.length)];
+            return adj + animal;
+        }
+
+        let username = localStorage.getItem('dreamchat_username') || generateUsername();
+        localStorage.setItem('dreamchat_username', username);
+        document.getElementById('username-text').textContent = username;
+
+        document.getElementById('username-display').onclick = function() {
+            const input = document.getElementById('username-input');
+            input.value = username;
+            input.removeAttribute('hidden');
+            this.setAttribute('hidden', '');
+            input.focus();
+            input.select();
+        };
+
+        function commitUsername() {
+            const input = document.getElementById('username-input');
+            const newName = input.value.trim();
+            if (newName && newName !== username) {
+                username = newName;
+                localStorage.setItem('dreamchat_username', username);
+                document.getElementById('username-text').textContent = username;
+                if (chatSocket.readyState === WebSocket.OPEN) {
+                    chatSocket.send(JSON.stringify({ type: 'rename', username }));
+                }
+            }
+            input.setAttribute('hidden', '');
+            document.getElementById('username-display').removeAttribute('hidden');
+        }
+
+        document.getElementById('username-input').onblur = commitUsername;
+        document.getElementById('username-input').onkeyup = function(event) {
+            if (event.key === 'Enter')  { this.blur(); }
+            if (event.key === 'Escape') {
+                this.setAttribute('hidden', '');
+                document.getElementById('username-display').removeAttribute('hidden');
+            }
+        };
+
+        function formatTime(date) {
+            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
+
+        const roomName = JSON.parse(document.getElementById('room-name').textContent);
+        const chatLog = document.getElementById('chat-log');
+        const pendingEchoes = new Set();
+
+        function appendSystemMessage(text) {
+            const el = document.createElement('div');
+            el.className = 'system-msg';
+            el.textContent = text;
+            chatLog.appendChild(el);
+            chatLog.scrollTop = chatLog.scrollHeight;
+        }
+
+        function appendBubble(text, direction, sender, time) {
+            const row = document.createElement('div');
+            row.className = 'bubble-row ' + direction;
+
+            const wrapper = document.createElement('div');
+            wrapper.className = 'bubble-wrapper';
+
+            if (direction === 'recv') {
+                const nameEl = document.createElement('div');
+                nameEl.className = 'bubble-sender';
+                nameEl.textContent = sender;
+                wrapper.appendChild(nameEl);
+            }
+
+            const bubble = document.createElement('div');
+            bubble.className = 'bubble';
+            bubble.textContent = text;
+            wrapper.appendChild(bubble);
+
+            const timeEl = document.createElement('div');
+            timeEl.className = 'bubble-time';
+            timeEl.textContent = time;
+            wrapper.appendChild(timeEl);
+
+            row.appendChild(wrapper);
+            chatLog.appendChild(row);
+            chatLog.scrollTop = chatLog.scrollHeight;
+        }
+
+        const chatSocket = new WebSocket(
+            'ws://'
+            + window.location.host
+            + '/ws/chat/'
+            + roomName
+            + '/'
+            + '?token=123'
+        );
+
+        chatSocket.onopen = function() {
+            document.querySelector('#chat-message-disconnect').removeAttribute('hidden');
+            chatSocket.send(JSON.stringify({ type: 'join', username }));
+        };
+
+        chatSocket.onmessage = function(e) {
+            const data = JSON.parse(e.data);
+
+            if (data.type === 'system') {
+                appendSystemMessage(data.text);
+                return;
+            }
+
+            const key = data.username + '|' + data.message;
+            if (pendingEchoes.has(key)) {
+                pendingEchoes.delete(key);
+                return;
+            }
+            appendBubble(data.message, 'recv', data.username, formatTime(new Date()));
+        };
+
+        chatSocket.onclose = function() {
+            console.error('Chat socket closed unexpectedly');
+            document.querySelector('#chat-message-disconnect').setAttribute('hidden', '');
+        };
+
+        document.querySelector('#chat-message-input').focus();
+        document.querySelector('#chat-message-input').onkeyup = function(event) {
+            if (event.key === 'Enter') {
+                document.querySelector('#chat-message-submit').click();
+            }
+        };
+
+        document.querySelector('#chat-message-submit').onclick = function() {
+            const messageInputDom = document.querySelector('#chat-message-input');
+            const message = messageInputDom.value.trim();
+            if (!message) return;
+            const time = formatTime(new Date());
+            pendingEchoes.add(username + '|' + message);
+            appendBubble(message, 'sent', username, time);
+            chatSocket.send(JSON.stringify({ message, username }));
+            messageInputDom.value = '';
+        };
+
+        document.querySelector('#chat-message-disconnect').onclick = function() {
+            chatSocket.close();
+        };
+    </script>
+</body>
+</html>