Update static/script.js

static/script.js

@@ -1,338 +1,214 @@
 document.addEventListener('DOMContentLoaded', async () => {
-    // --- STATE ---
     let currentUser = null;
-    let currentChannel = 'general';
     let supabase;
-    let peerConnection;
     let ws;
-    let localStream;
     let pingInterval;
-
-    // --- INIT CONFIG ---
-    const config = await (await fetch('/api/config')).json();
-    supabase = window.supabase.createClient(config.supabase_url, config.supabase_key);
-
-    // --- UI REFS ---
-    const loginModal = document.getElementById('login-modal');
-    const appInterface = document.getElementById('app-interface');
-    const msgContainer = document.getElementById('messages-container');
     
-    // --- 1. AUTH SYSTEM ---
+    // --- 0. INIT ---
+    try {
+        const config = await (await fetch('/api/config')).json();
+        supabase = window.supabase.createClient(config.supabase_url, config.supabase_key);
+    } catch(e) { console.error("Config failed", e); }
+
+    // --- 1. LOGIN ---
     document.getElementById('login-form').addEventListener('submit', async (e) => {
         e.preventDefault();
-        const username = document.getElementById('login-user').value.trim();
-        const pass = document.getElementById('login-pass').value.trim();
-
-        // Check DB
-        const { data: user, error } = await supabase
-            .from('users')
-            .select('*')
-            .eq('username', username)
-            .single();
-
-        if (error || !user) {
-            showError("USER NOT FOUND");
-            return;
-        }
-
-        // Compare Hash (Client-side verify for simplicity in this demo, usually server-side)
-        const isValid = dcodeIO.bcrypt.compareSync(pass, user.password_hash);
+        const u = document.getElementById('login-user').value.trim();
+        const p = document.getElementById('login-pass').value.trim();
+        
+        const { data: user } = await supabase.from('users').select('*').eq('username', u).single();
         
-        if (isValid) {
+        if (user && dcodeIO.bcrypt.compareSync(p, user.password_hash)) {
             currentUser = user;
-            loginModal.classList.remove('open');
-            appInterface.classList.remove('hidden');
+            document.getElementById('login-modal').classList.remove('open');
+            document.getElementById('app-interface').classList.remove('hidden');
             document.getElementById('current-username').textContent = user.username;
+            
+            // Инициализация чекбокса настроек
+            document.getElementById('setting-discovery').checked = user.is_looking_for_friends || false;
+            
             initApp();
         } else {
-            showError("INVALID CREDENTIALS");
+            const err = document.getElementById('login-error');
+            err.textContent = "INVALID ACCESS"; err.classList.remove('hidden');
         }
     });
 
-    function showError(msg) {
-        const err = document.getElementById('login-error');
-        err.textContent = msg;
-        err.classList.remove('hidden');
-    }
+    // --- 2. TABS LOGIC ---
+    const navBtns = document.querySelectorAll('.nav-btn[data-tab]');
+    const viewChats = document.getElementById('view-chats');
+    const viewDiscovery = document.getElementById('view-discovery');
+    const sidebarTitle = document.getElementById('sidebar-title');
+
+    navBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            // Remove active class
+            navBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            
+            const tab = btn.dataset.tab;
+            if (tab === 'chats') {
+                viewChats.classList.remove('hidden');
+                viewDiscovery.classList.add('hidden');
+                sidebarTitle.textContent = "CHANNELS";
+            } else if (tab === 'discovery') {
+                viewChats.classList.add('hidden');
+                viewDiscovery.classList.remove('hidden');
+                sidebarTitle.textContent = "FIND FRIENDS";
+                loadDiscoveryUsers();
+            }
+        });
+    });
 
-    // --- 2. ADMIN SYSTEM ---
-    const adminModal = document.getElementById('admin-modal');
-    const adminTrigger = document.getElementById('admin-trigger');
+    // --- 3. DISCOVERY & SETTINGS ---
+    const settingsModal = document.getElementById('settings-modal');
+    document.getElementById('open-settings').addEventListener('click', () => settingsModal.classList.add('open'));
     
-    adminTrigger.addEventListener('click', () => {
-        adminModal.classList.add('open');
-        document.getElementById('admin-code').focus();
+    document.getElementById('save-settings').addEventListener('click', async () => {
+        const isLooking = document.getElementById('setting-discovery').checked;
+        
+        // Update DB
+        await supabase.from('users').update({ is_looking_for_friends: isLooking }).eq('id', currentUser.id);
+        currentUser.is_looking_for_friends = isLooking; // local update
+        
+        settingsModal.classList.remove('open');
+        if(isLooking) alert("You are now visible in Discovery!");
     });
 
-    // Check Code Input
+    async function loadDiscoveryUsers() {
+        const list = document.getElementById('discovery-list');
+        list.innerHTML = '<div class="text-white/30 text-xs italic">Scanning sector...</div>';
+        
+        const { data: users } = await supabase
+            .from('users')
+            .select('*')
+            .eq('is_looking_for_friends', true)
+            .neq('username', currentUser.username); // Exclude self
+            
+        list.innerHTML = '';
+        if (!users || users.length === 0) {
+            list.innerHTML = '<div class="text-white/30 text-xs p-2">No signals found.</div>';
+            return;
+        }
+
+        users.forEach(u => {
+            const div = document.createElement('div');
+            div.className = 'flex items-center justify-between p-2 bg-white/5 rounded hover:bg-white/10 transition cursor-pointer';
+            div.innerHTML = `
+                <div class="flex items-center gap-2">
+                    <div class="w-6 h-6 rounded-full bg-gray-500"></div>
+                    <span class="text-sm font-bold">${u.username}</span>
+                </div>
+                <button class="text-[10px] border border-cyan-400 text-cyan-400 px-2 py-1 rounded hover:bg-cyan-400 hover:text-black">
+                    CONNECT
+                </button>
+            `;
+            // Logic for "Connect" -> Create DM channel would go here
+            list.appendChild(div);
+        });
+    }
+
+    // --- 4. ADMIN & CHAT ---
+    // (Admin Logic code from previous answer remains similar but linked to new modals)
+    document.getElementById('admin-trigger').addEventListener('click', () => {
+        document.getElementById('admin-modal').classList.add('open');
+    });
+    
     document.getElementById('admin-code').addEventListener('input', (e) => {
-        if (e.target.value.length === 4) {
-            // Check secret with backend (fake check first in UI, logic in backend)
-            // Just reveal form for UX, real check happens on submit
-            document.getElementById('admin-step-1').classList.add('hidden');
-            document.getElementById('admin-create-form').classList.remove('hidden');
+        if(e.target.value.length >= 4) {
+             document.getElementById('admin-create-form').classList.remove('hidden');
         }
     });
 
-    // Create User
     document.getElementById('admin-create-form').addEventListener('submit', async (e) => {
         e.preventDefault();
         const code = document.getElementById('admin-code').value;
         const newU = document.getElementById('new-user').value;
         const newP = document.getElementById('new-pass').value;
-
+        
         try {
             const res = await fetch('/api/admin/create_user', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({ admin_code: code, new_username: newU, new_password: newP })
+                method: 'POST', headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({admin_code: code, new_username: newU, new_password: newP})
             });
-            
-            if (!res.ok) throw new Error("ACCESS DENIED");
-
+            if(!res.ok) throw new Error("DENIED");
             const data = await res.json();
             
-            // Push to Supabase
             await supabase.from('users').insert({
                 username: data.username,
                 password_hash: data.password_hash,
-                badge: data.badge,
-                is_admin: false
+                badge: "BETA"
             });
-
-            alert(`ENTITY ${data.username} CREATED`);
-            adminModal.classList.remove('open');
-            // Reset form
-            document.getElementById('admin-create-form').reset();
-            document.getElementById('admin-step-1').classList.remove('hidden');
-            document.getElementById('admin-create-form').classList.add('hidden');
-            document.getElementById('admin-code').value = '';
-
-        } catch (err) {
-            alert(err.message);
-            document.getElementById('admin-code').value = '';
-            document.getElementById('admin-step-1').classList.remove('hidden');
-            document.getElementById('admin-create-form').classList.add('hidden');
-        }
+            alert("CREATED");
+            document.getElementById('admin-modal').classList.remove('open');
+        } catch(e) { alert("ACCESS DENIED"); }
     });
 
-    // Close admin modal on click outside
-    adminModal.addEventListener('click', (e) => {
-        if(e.target === adminModal) adminModal.classList.remove('open');
-    });
-
-    // --- 3. APP LOGIC ---
+    // --- 5. APP INIT & WEBSOCKET FIX ---
     function initApp() {
-        subscribeToMessages();
-        loadUsers();
-    }
-
-    async function subscribeToMessages() {
-        // Load history
-        const { data } = await supabase.from('messages').select('*').order('created_at', { ascending: true });
-        data.forEach(renderMessage);
+        const msgContainer = document.getElementById('messages-container');
+        
+        // Load Chat History
+        supabase.from('messages').select('*').eq('channel_id', 'general').order('created_at')
+            .then(({data}) => { if(data) data.forEach(renderMessage); });
 
-        // Realtime
+        // Realtime Subscription
         supabase.channel('public:messages')
             .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, payload => {
-                renderMessage(payload.new);
+                if(payload.new.channel_id === 'general') renderMessage(payload.new);
             })
             .subscribe();
+
+        // WebSocket for Voice/Signaling
+        connectWebSocket();
     }
 
-    async function loadUsers() {
-        const list = document.getElementById('users-list');
-        const { data } = await supabase.from('users').select('*');
+    function connectWebSocket() {
+        // Secure WebSocket handling for HF Spaces
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        // Remove trailing slash if present
+        const host = window.location.host;
+        const wsUrl = `${protocol}//${host}/ws/signal`;
         
-        list.innerHTML = '';
-        data.forEach(u => {
-            if (u.username === currentUser.username) return;
-            const div = document.createElement('div');
-            div.className = 'channel-item text-sm opacity-70 hover:opacity-100';
-            div.innerHTML = `
-                <div class="w-2 h-2 rounded-full bg-gray-500 mr-2"></div>
-                ${u.username} ${u.badge === 'BETA' ? '<span class="text-yellow-500 text-[10px] ml-1">★</span>' : ''}
-            `;
-            list.appendChild(div);
-        });
+        console.log("Attempting WS connect to:", wsUrl);
+        
+        ws = new WebSocket(wsUrl);
+        ws.onopen = () => console.log("Signal Line Established");
+        ws.onerror = (e) => console.log("Signal Error (Ignore if not using Voice)", e);
     }
 
-    // --- 4. MESSAGING ---
-    const form = document.getElementById('chat-form');
-    form.addEventListener('submit', async (e) => {
+    const chatForm = document.getElementById('chat-form');
+    chatForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        const input = document.getElementById('msg-input');
-        const text = input.value.trim();
-        if (!text) return;
-        input.value = '';
+        const inp = document.getElementById('msg-input');
+        const text = inp.value.trim();
+        if(!text) return;
+        inp.value = '';
 
-        // Mood Analysis
         const moodRes = await fetch('/api/analyze_mood', {
-            method: 'POST', 
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({text})
+            method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({text})
         });
         const mood = await moodRes.json();
 
-        // Save
         await supabase.from('messages').insert({
-            content: text,
-            user_id: currentUser.id,
-            username: currentUser.username,
-            mood_color: mood.mood_color,
-            channel_id: currentChannel
+            content: text, user_id: currentUser.id, username: currentUser.username,
+            mood_color: mood.mood_color, channel_id: 'general'
         });
     });
 
     function renderMessage(msg) {
         const div = document.createElement('div');
-        
-        if (msg.is_system) {
-            div.className = 'message w-full justify-center my-2';
-            div.innerHTML = `<div class="system">🤖 CLEAN: ${msg.content}</div>`;
-        } else {
-            const isOwn = msg.username === currentUser.username;
-            div.className = `message ${isOwn ? 'flex-row-reverse self-end' : ''}`;
-            
-            // Badge Logic
-            // Note: In real app we fetch user badge, here we assume all are beta for demo visual
-            const badgeHtml = `<span class="badge-beta">BETA</span>`;
-
-            div.innerHTML = `
-                <div class="flex flex-col ${isOwn ? 'items-end' : 'items-start'}">
-                    <div class="text-[10px] text-white/40 mb-1 px-1">
-                        ${msg.username} ${badgeHtml}
-                    </div>
-                    <div class="message-content" style="border-left: 3px solid ${msg.mood_color || '#fff'}">
-                        ${msg.content}
-                    </div>
-                </div>
-            `;
-        }
-        msgContainer.appendChild(div);
-        msgContainer.scrollTop = msgContainer.scrollHeight;
-    }
-
-    // --- 5. WEBRTC PRO (Discord style) ---
-    const voiceBtn = document.getElementById('voice-toggle');
-    const voiceUI = document.getElementById('voice-ui');
-    const voiceDot = document.getElementById('voice-dot');
-    const voiceText = document.getElementById('voice-text');
-    const voicePing = document.getElementById('voice-ping');
-    let isVoiceActive = false;
-
-    voiceBtn.addEventListener('click', async () => {
-        if (isVoiceActive) disconnectVoice();
-        else await connectVoice();
-    });
-
-    async function connectVoice() {
-        isVoiceActive = true;
-        voiceUI.classList.remove('hidden');
-        updateVoiceStatus('connecting', 'Connecting to RTC...');
-        
-        try {
-            localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            ws = new WebSocket(`${protocol}//${window.location.host}/ws/signal`);
-            
-            peerConnection = new RTCPeerConnection({
-                iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
-            });
-
-            // Add Tracks
-            localStream.getTracks().forEach(t => peerConnection.addTrack(t, localStream));
-
-            // On Track
-            peerConnection.ontrack = e => {
-                const audio = new Audio();
-                audio.srcObject = e.streams[0];
-                audio.play();
-            };
-
-            // Signaling
-            ws.onmessage = async (e) => {
-                const data = JSON.parse(e.data);
-                if (data.type === 'offer') {
-                    await peerConnection.setRemoteDescription(data);
-                    const answer = await peerConnection.createAnswer();
-                    await peerConnection.setLocalDescription(answer);
-                    ws.send(JSON.stringify(peerConnection.localDescription));
-                } else if (data.type === 'answer') {
-                    await peerConnection.setRemoteDescription(data);
-                } else if (data.candidate) {
-                    await peerConnection.addIceCandidate(data.candidate);
-                }
-            };
-
-            peerConnection.oniceconnectionstatechange = () => {
-                const state = peerConnection.iceConnectionState;
-                if (state === 'connected' || state === 'completed') {
-                    updateVoiceStatus('connected', 'Voice Connected');
-                    startPingStats();
-                } else if (state === 'failed' || state === 'disconnected') {
-                    botCleanReport("Connection lost to RTC Server.");
-                    disconnectVoice();
-                }
-            };
-
-            ws.onopen = async () => {
-                const offer = await peerConnection.createOffer();
-                await peerConnection.setLocalDescription(offer);
-                ws.send(JSON.stringify(offer));
-            };
-
-        } catch (e) {
-            console.error(e);
-            botCleanReport("Failed to initialize audio device.");
-            disconnectVoice();
-        }
-    }
-
-    function disconnectVoice() {
-        isVoiceActive = false;
-        voiceUI.classList.add('hidden');
-        if (peerConnection) peerConnection.close();
-        if (ws) ws.close();
-        if (localStream) localStream.getTracks().forEach(t => t.stop());
-        clearInterval(pingInterval);
-        voiceBtn.classList.remove('bg-red-500/20');
-    }
-
-    function updateVoiceStatus(state, text) {
-        voiceDot.className = `status-dot ${state}`;
-        voiceText.textContent = text;
-        if (state === 'connected') {
-            voiceBtn.classList.add('bg-green-500/20');
-            document.getElementById('mic-icon').classList.add('text-green-400');
-        }
-    }
-
-    // --- PING SYSTEM ---
-    function startPingStats() {
-        pingInterval = setInterval(async () => {
-            if (!peerConnection) return;
-            const stats = await peerConnection.getStats();
-            let rtt = 0;
-            stats.forEach(report => {
-                if (report.type === 'candidate-pair' && report.state === 'succeeded') {
-                    rtt = report.currentRoundTripTime * 1000; // ms
-                }
-            });
-            if (rtt > 0) {
-                voicePing.textContent = `${Math.round(rtt)}ms`;
-                if (rtt > 200) voicePing.style.color = 'red';
-                else voicePing.style.color = 'lime';
-            }
-        }, 1000);
-    }
-
-    // --- BOT CLEAN ---
-    async function botCleanReport(errorMsg) {
-        await supabase.from('messages').insert({
-            content: `ERR_RTC: ${errorMsg}`,
-            is_system: true,
-            channel_id: currentChannel
-        });
+        const isOwn = msg.username === currentUser.username;
+        div.className = `flex gap-2 mb-4 ${isOwn ? 'flex-row-reverse' : ''} px-4`;
+        div.innerHTML = `
+            <div class="bg-white/5 border border-white/5 p-3 rounded-xl max-w-[80%] text-sm" 
+                 style="border-left: 3px solid ${msg.mood_color}">
+                <div class="text-[10px] text-white/40 mb-1">${msg.username}</div>
+                ${msg.content}
+            </div>
+        `;
+        const c = document.getElementById('messages-container');
+        c.appendChild(div);
+        c.scrollTop = c.scrollHeight;
     }
 });