Update public/script.js

public/script.js

@@ -1,246 +1,63 @@
-// DOM Elements
-const videoElement = document.getElementById('funk-video');
-const themeToggle = document.getElementById('theme-toggle');
-const musicToggle = document.getElementById('music-toggle');
-const authSection = document.getElementById('auth-section');
-const botSection = document.getElementById('bot-section');
-const loginForm = document.getElementById('login-form');
-const registerForm = document.getElementById('register-form');
-const loginBtn = document.getElementById('login-btn');
-const registerBtn = document.getElementById('register-btn');
-const deployBtn = document.getElementById('deploy-btn');
-const commandInput = document.getElementById('command-input');
-const sendCommand = document.getElementById('send-command');
-const outputDiv = document.getElementById('output');
-const tabs = document.querySelectorAll('.tab');
-
-// State
-let currentUser = null;
-let socket = null;
-let isMusicPlaying = false;
-let isDarkMode = true;
-
-// Funk/Phunk videos
-const funkVideos = [
-    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/funk1.mp4",
-    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/funk2.mp4",
-    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/funk3.mp4",
-    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/phunk1.mp4",
-    "https://cdn.glitch.global/6e2c1a9d-1e8a-4f4d-8a0b-5e5b5d5b5e5b/phunk2.mp4"
-];
-
-// Initialize
-function init() {
-    setupEventListeners();
-    setupSocket();
-    playRandomVideo();
-    updateUptime();
-    setInterval(updateUptime, 1000);
-}
-
-// Event Listeners
-function setupEventListeners() {
-    // Theme toggle
-    themeToggle.addEventListener('click', toggleTheme);
-    
-    // Music toggle
-    musicToggle.addEventListener('click', toggleMusic);
-    
-    // Tab switching
-    tabs.forEach(tab => {
-        tab.addEventListener('click', () => {
-            tabs.forEach(t => t.classList.remove('active'));
-            tab.classList.add('active');
-            
-            document.querySelectorAll('.form').forEach(form => {
-                form.classList.remove('active');
-            });
-            
-            document.getElementById(`${tab.dataset.tab}-form`).classList.add('active');
-        });
-    });
-    
-    // Login
-    loginBtn.addEventListener('click', handleLogin);
-    
-    // Register
-    registerBtn.addEventListener('click', handleRegister);
-    
-    // Deploy bot
-    deployBtn.addEventListener('click', deployBot);
-    
-    // Send command
-    sendCommand.addEventListener('click', sendBotCommand);
-    commandInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') sendBotCommand();
-    });
-}
-
-// Socket.io setup
-function setupSocket() {
-    socket = io();
-    
-    // Handle connection events
-    socket.on('connect', () => {
-        console.log("Connected to server");
-    });
-    
-    // Bot output
-    socket.on('bot-output', (data) => {
-        appendToOutput(data, 'output');
-    });
-    
-    socket.on('bot-error', (data) => {
-        appendToOutput(data, 'error');
-    });
-    
-    // Auth responses
-    socket.on('login-success', (data) => {
-        currentUser = data.userId;
-        authSection.classList.add('hidden');
-        botSection.classList.remove('hidden');
-        showMessage('login-message', `Welcome back!`, 'success');
-        
-        // Start playing music if enabled
-        if (isMusicPlaying) {
-            videoElement.muted = false;
-        }
-    });
-    
-    socket.on('login-error', (message) => {
-        showMessage('login-message', message, 'error');
-    });
-    
-    socket.on('register-success', () => {
-        showMessage('register-message', 'Registration successful! Please login.', 'success');
-        tabs[0].click();
-    });
-    
-    socket.on('register-error', (message) => {
-        showMessage('register-message', message, 'error');
-    });
-}
-
-// Play random funk/phunk video
-function playRandomVideo() {
-    const randomVideo = funkVideos[Math.floor(Math.random() * funkVideos.length)];
-    videoElement.src = randomVideo;
-    videoElement.play();
-    
-    // When video ends, play another random one
-    videoElement.onended = () => {
-        playRandomVideo();
-    };
-}
-
-// Toggle music
-function toggleMusic() {
-    isMusicPlaying = !isMusicPlaying;
-    videoElement.muted = !isMusicPlaying;
-    musicToggle.textContent = isMusicPlaying ? "🔊 Music On" : "🔇 Music Off";
-}
-
-// Toggle theme
-function toggleTheme() {
-    isDarkMode = !isDarkMode;
-    document.body.classList.toggle('light-theme', !isDarkMode);
-    themeToggle.textContent = isDarkMode ? "🌙 Dark Mode" : "☀️ Light Mode";
-}
-
-// Handle login
-function handleLogin() {
-    const username = document.getElementById('login-username').value;
-    const password = document.getElementById('login-password').value;
-    
-    if (!username || !password) {
-        showMessage('login-message', 'Please fill all fields', 'error');
-        return;
-    }
-    
-    socket.emit('login', { username, password });
-}
+// Initialize Socket.io with forced connection
+const socket = io({
+    reconnection: true,
+    reconnectionAttempts: Infinity,
+    reconnectionDelay: 1000,
+    timeout: 20000
+});
 
-// Handle registration
-function handleRegister() {
-    const username = document.getElementById('register-username').value;
-    const password = document.getElementById('register-password').value;
-    const confirm = document.getElementById('register-confirm').value;
-    
-    if (!username || !password || !confirm) {
-        showMessage('register-message', 'Please fill all fields', 'error');
-        return;
-    }
-    
-    if (password !== confirm) {
-        showMessage('register-message', 'Passwords do not match', 'error');
-        return;
-    }
-    
-    if (password.length < 8) {
-        showMessage('register-message', 'Password must be at least 8 characters', 'error');
-        return;
-    }
-    
-    socket.emit('register', { username, password });
-}
-
-// Deploy bot
-function deployBot() {
-    const repoUrl = document.getElementById('repo-url').value;
-    const entryFile = document.getElementById('entry-file').value;
-    
-    if (!repoUrl || !entryFile) {
-        alert('Please fill all fields');
-        return;
+// DOM Elements
+const elements = {
+    authSection: document.getElementById('auth-section'),
+    botSection: document.getElementById('bot-section'),
+    output: document.getElementById('output'),
+    status: document.getElementById('connection-status')
+};
+
+// Immediately show terminal for debugging
+elements.botSection.style.display = 'block';
+elements.authSection.style.display = 'none';
+
+// Connection monitoring
+function updateStatus(message, isError = false) {
+    elements.status.textContent = message;
+    elements.status.style.background = isError ? '#e74c3c' : '#2ecc71';
+    elements.output.innerHTML += `<div class="${isError ? 'error' : 'info'}">${message}</div>`;
+}
+
+// Socket event handlers
+socket.on('connect', () => {
+    updateStatus('Connected to server');
+    socket.emit('force-terminal-visible');
+});
+
+socket.on('disconnect', () => {
+    updateStatus('Disconnected', true);
+});
+
+socket.on('connect_error', (err) => {
+    updateStatus(`Connection error: ${err.message}`, true);
+});
+
+socket.on('terminal-output', (data) => {
+    elements.output.innerHTML += `<div class="output">${data}</div>`;
+    elements.output.scrollTop = elements.output.scrollHeight;
+});
+
+socket.on('terminal-init', (data) => {
+    elements.output.innerHTML = `<div class="success">Terminal initialized at ${new Date().toLocaleTimeString()}</div>`;
+});
+
+// Fallback: If no connection after 5 seconds, show terminal anyway
+setTimeout(() => {
+    if (elements.output.innerHTML === '') {
+        elements.output.innerHTML = `<div class="warning">Running in offline mode. Some features may be limited.</div>`;
     }
-    
-    socket.emit('deploy-bot', {
-        userId: currentUser,
-        repoUrl,
-        entryFile
-    });
-    
-    appendToOutput(`🚀 Starting deployment: ${repoUrl}\n`, 'info');
-}
-
-// Send command to bot
-function sendBotCommand() {
-    const command = commandInput.value.trim();
-    if (!command) return;
-    
-    appendToOutput(`$ ${command}\n`, 'command');
-    socket.emit('send-command', { userId: currentUser, command });
-    commandInput.value = '';
-}
-
-// Append to output terminal
-function appendToOutput(text, type = 'output') {
-    const line = document.createElement('div');
-    line.textContent = text;
-    line.className = type;
-    outputDiv.appendChild(line);
-    outputDiv.scrollTop = outputDiv.scrollHeight;
-}
-
-// Show message
-function showMessage(elementId, message, type) {
-    const element = document.getElementById(elementId);
-    element.textContent = message;
-    element.className = `message ${type}`;
-}
-
-// Update uptime counter
-function updateUptime() {
-    const uptimeElement = document.getElementById('uptime');
-    if (!uptimeElement) return;
-    
-    const now = new Date();
-    const hours = String(now.getHours()).padStart(2, '0');
-    const minutes = String(now.getMinutes()).padStart(2, '0');
-    const seconds = String(now.getSeconds()).padStart(2, '0');
-    
-    uptimeElement.textContent = `${hours}:${minutes}:${seconds}`;
-}
-
-// Initialize when DOM is loaded
-document.addEventListener('DOMContentLoaded', init);
+}, 5000);
+
+// Force terminal visibility on load
+window.addEventListener('load', () => {
+    elements.botSection.style.display = 'block';
+    elements.authSection.style.display = 'none';
+    updateStatus('System loaded');
+});