Update static/script.js

static/script.js

@@ -1,172 +1,338 @@
-document.addEventListener('DOMContentLoaded', async () => {
-    let supabase;
-    let userId = 'user_' + Math.random().toString(36).substr(2, 9);
-    try {
-        const configRes = await fetch('/api/config');
-        const config = await configRes.json();
-        if (config.supabase_url) supabase = window.supabase.createClient(config.supabase_url, config.supabase_key);
-    } catch (e) { console.error("Config Error", e); }
-    const chatWindow = document.getElementById('chat-window');
-    const form = document.getElementById('message-form');
-    const input = document.getElementById('message-input');
-    const fileInput = document.getElementById('file-input');
-    const uploadStatus = document.getElementById('upload-status');
-    const moodIndicator = document.getElementById('mood-indicator');
-    const popSound = document.getElementById('pop-sound');
-    if (supabase) {
-        supabase.channel('room1').on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, payload => {
-            renderMessage(payload.new);
-            playPopSound();
-        }).subscribe();
-    }
-    let currentAttachment = null;
-    fileInput.addEventListener('change', async (e) => {
-        const file = e.target.files[0];
-        if (!file) return;
-        uploadStatus.classList.remove('hidden');
-        uploadStatus.textContent = `Загрузка ${file.name}...`;
-        const formData = new FormData();
-        formData.append('file', file);
-        try {
-            const res = await fetch('/api/upload_file', { method: 'POST', body: formData });
-            const data = await res.json();
-            if (data.error) throw new Error(data.error);
-            currentAttachment = data;
-            uploadStatus.textContent = "Файл прикреплен!";
-            uploadStatus.style.color = "#00f2ea";
-            input.placeholder = `Прикреплен: ${file.name}. Напиши сообщение...`;
-            input.focus();
-        } catch (err) {
-            console.error(err);
-            uploadStatus.textContent = "Ошибка загрузки";
-            uploadStatus.style.color = "#ff0055";
-        }
-    });
-    form.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const text = input.value.trim();
-        if (!text && !currentAttachment) return;
-        input.value = '';
-        input.placeholder = "Транслируй свои мысли...";
-        uploadStatus.classList.add('hidden');
-        let moodData = { mood_color: '#ffffff', emoji: '🌫️' };
-        if (text) {
-            try {
-                const res = await fetch('/api/analyze_mood', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }) });
-                moodData = await res.json();
-                updateTheme(moodData.mood_color, moodData.emoji);
-            } catch (err) { console.error(err); }
-        }
-        if (supabase) {
-            const payload = { content: text, user_id: userId, mood_color: moodData.mood_color, attachment_url: currentAttachment ? currentAttachment.url : null, attachment_type: currentAttachment ? currentAttachment.mime : null };
-            const { error } = await supabase.from('messages').insert(payload);
-            if (error) console.error(error);
-        }
-        currentAttachment = null;
-        fileInput.value = '';
-    });
-    
-    // Voice / WebRTC (Audio Only)
-    const voiceBtn = document.getElementById('voice-btn');
-    const micOff = document.getElementById('mic-icon-off');
-    const micOn = document.getElementById('mic-icon-on');
-    let localStream, remoteStream, peerConnection, audioContext, analyser, dataArray, ws, isVoiceActive = false;
-    const rtcConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
-    voiceBtn.addEventListener('click', toggleVoiceMode);
-    async function toggleVoiceMode() { if (isVoiceActive) stopVoice(); else await startVoice(); }
-    async function startVoice() {
-        try {
-            localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
-            setupAudioVisualizer(localStream);
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            ws = new WebSocket(`${protocol}//${window.location.host}/ws/signal`);
-            ws.onmessage = async (event) => {
-                const data = JSON.parse(event.data);
-                if (!peerConnection) createPeerConnection();
-                if (data.type === 'offer') {
-                    await peerConnection.setRemoteDescription(new RTCSessionDescription(data));
-                    const answer = await peerConnection.createAnswer();
-                    await peerConnection.setLocalDescription(answer);
-                    ws.send(JSON.stringify({ type: 'answer', sdp: answer.sdp }));
-                } else if (data.type === 'answer') { await peerConnection.setRemoteDescription(new RTCSessionDescription(data));
-                } else if (data.type === 'candidate') { if (data.candidate) await peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate)); }
-            };
-            ws.onopen = () => { createPeerConnection(); createOffer(); };
-            micOff.classList.add('hidden'); micOn.classList.remove('hidden'); voiceBtn.classList.add('border-cyan-400', 'shadow-[0_0_15px_rgba(0,242,234,0.5)]'); isVoiceActive = true;
-        } catch (err) { console.error("Voice Error", err); alert("Microphone access denied"); }
-    }
-    function stopVoice() {
-        if (peerConnection) peerConnection.close();
-        if (localStream) localStream.getTracks().forEach(t => t.stop());
-        if (ws) ws.close();
-        peerConnection = null; localStream = null;
-        micOff.classList.remove('hidden'); micOn.classList.add('hidden'); voiceBtn.classList.remove('border-cyan-400', 'shadow-[0_0_15px_rgba(0,242,234,0.5)]'); isVoiceActive = false;
-    }
-    function createPeerConnection() {
-        peerConnection = new RTCPeerConnection(rtcConfig);
-        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
-        peerConnection.ontrack = (event) => { const remoteAudio = new Audio(); remoteAudio.srcObject = event.streams[0]; remoteAudio.autoplay = true; };
-        peerConnection.onicecandidate = (event) => { if (event.candidate) ws.send(JSON.stringify({ type: 'candidate', candidate: event.candidate })); };
-    }
-    async function createOffer() { const offer = await peerConnection.createOffer(); await peerConnection.setLocalDescription(offer); ws.send(JSON.stringify({ type: 'offer', sdp: offer.sdp })); }
-    function setupAudioVisualizer(stream) {
-        if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        const source = audioContext.createMediaStreamSource(stream);
-        analyser = audioContext.createAnalyser();
-        analyser.fftSize = 64;
-        source.connect(analyser);
-        dataArray = new Uint8Array(analyser.frequencyBinCount);
-    }
-    
-    function renderMessage(msg) {
-        const div = document.createElement('div');
-        const isOwn = msg.user_id === userId;
-        div.className = `message ${isOwn ? 'own' : 'other'}`;
-        div.style.boxShadow = `0 0 15px ${msg.mood_color || '#fff'}40`;
-        let html = `<div>${msg.content || ''}</div>`;
-        if (msg.attachment_url) {
-            if (msg.attachment_type && msg.attachment_type.startsWith('image/')) { html += `<img src="${msg.attachment_url}" alt="Image">`; } 
-            else { html += `<a href="${msg.attachment_url}" target="_blank" class="file-link">📎 Скачать файл</a>`; }
-        }
-        div.innerHTML = html;
-        chatWindow.appendChild(div);
-        chatWindow.scrollTop = chatWindow.scrollHeight;
-    }
-    function updateTheme(color, emoji) {
-        document.documentElement.style.setProperty('--dynamic-bg-color', color);
-        moodIndicator.textContent = emoji;
-    }
-    function playPopSound() { if(popSound) { popSound.currentTime = 0; popSound.play().catch(e=>{}); } }
-    
-    // --- Visuals ---
-    const canvas = document.getElementById('particle-canvas');
-    const ctx = canvas.getContext('2d');
-    let particles = [];
-    function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
-    window.addEventListener('resize', resize); resize();
-    class Particle {
-        constructor() { this.reset(); }
-        reset() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 2; this.speedX = Math.random() * 0.5 - 0.25; this.speedY = Math.random() * 0.5 - 0.25; this.opacity = Math.random() * 0.5; }
-        update() { this.x += this.speedX; this.y += this.speedY; if(this.x<0 || this.x>canvas.width) this.speedX*=-1; if(this.y<0 || this.y>canvas.height) this.speedY*=-1; }
-        draw() { ctx.fillStyle = `rgba(255,255,255,${this.opacity})`; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI*2); ctx.fill(); }
-    }
-    for(let i=0; i<50; i++) particles.push(new Particle());
-    function animate() { 
-        ctx.clearRect(0,0,canvas.width,canvas.height);
-        let audioFactor = 0;
-        if (isVoiceActive && analyser && dataArray) {
-            analyser.getByteFrequencyData(dataArray);
-            audioFactor = (dataArray.reduce((a, b) => a + b) / dataArray.length) / 50;
-        }
-        particles.forEach(p => { 
-            if(isVoiceActive) {
-                p.x += p.speedX * (1+audioFactor); p.y += p.speedY * (1+audioFactor);
-                let ps = p.size + (audioFactor*2);
-                ctx.fillStyle = `rgba(255,255,255,${p.opacity})`; ctx.beginPath(); ctx.arc(p.x, p.y, ps>0?ps:0, 0, Math.PI*2); ctx.fill();
-            } else { p.update(); p.draw(); }
-            if(p.x<0 || p.x>canvas.width) p.speedX*=-1; if(p.y<0 || p.y>canvas.height) p.speedY*=-1;
-        }); 
-        requestAnimationFrame(animate); 
-    }
-    animate();
+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 ---
+    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);
+        
+        if (isValid) {
+            currentUser = user;
+            loginModal.classList.remove('open');
+            appInterface.classList.remove('hidden');
+            document.getElementById('current-username').textContent = user.username;
+            initApp();
+        } else {
+            showError("INVALID CREDENTIALS");
+        }
+    });
+
+    function showError(msg) {
+        const err = document.getElementById('login-error');
+        err.textContent = msg;
+        err.classList.remove('hidden');
+    }
+
+    // --- 2. ADMIN SYSTEM ---
+    const adminModal = document.getElementById('admin-modal');
+    const adminTrigger = document.getElementById('admin-trigger');
+    
+    adminTrigger.addEventListener('click', () => {
+        adminModal.classList.add('open');
+        document.getElementById('admin-code').focus();
+    });
+
+    // Check Code Input
+    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');
+        }
+    });
+
+    // 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 })
+            });
+            
+            if (!res.ok) throw new Error("ACCESS 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
+            });
+
+            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');
+        }
+    });
+
+    // Close admin modal on click outside
+    adminModal.addEventListener('click', (e) => {
+        if(e.target === adminModal) adminModal.classList.remove('open');
+    });
+
+    // --- 3. APP LOGIC ---
+    function initApp() {
+        subscribeToMessages();
+        loadUsers();
+    }
+
+    async function subscribeToMessages() {
+        // Load history
+        const { data } = await supabase.from('messages').select('*').order('created_at', { ascending: true });
+        data.forEach(renderMessage);
+
+        // Realtime
+        supabase.channel('public:messages')
+            .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, payload => {
+                renderMessage(payload.new);
+            })
+            .subscribe();
+    }
+
+    async function loadUsers() {
+        const list = document.getElementById('users-list');
+        const { data } = await supabase.from('users').select('*');
+        
+        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);
+        });
+    }
+
+    // --- 4. MESSAGING ---
+    const form = document.getElementById('chat-form');
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const input = document.getElementById('msg-input');
+        const text = input.value.trim();
+        if (!text) return;
+        input.value = '';
+
+        // Mood Analysis
+        const moodRes = await fetch('/api/analyze_mood', {
+            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
+        });
+    });
+
+    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
+        });
+    }
 });