public/script.js

// DOM Elements
const elements = {
    authSection: document.getElementById('auth-section'),
    botSection: document.getElementById('bot-section'),
    output: document.getElementById('output'),
    status: document.getElementById('connection-status'),
    loginBtn: document.getElementById('login-btn'),
    registerBtn: document.getElementById('register-btn'),
    deployBtn: document.getElementById('deploy-btn'),
    commandInput: document.getElementById('command-input'),
    sendCommand: document.getElementById('send-command'),
    themeToggle: document.getElementById('theme-toggle'),
    musicToggle: document.getElementById('music-toggle'),
    videoElement: document.getElementById('funk-video')
};

// State
let currentUser = null;
let isMusicPlaying = false;
let isDarkMode = true;

// Funk/Phunk videos
const funkVideos = [
    "https://example.com/funk1.mp4",
    "https://example.com/funk2.mp4",
    "https://example.com/phunk1.mp4"
];

// Initialize Socket.io with robust settings
const socket = io({
    reconnection: true,
    reconnectionAttempts: Infinity,
    reconnectionDelay: 1000,
    timeout: 20000
});

// 1. Force terminal visibility on load
window.addEventListener('load', () => {
    elements.botSection.style.display = 'block';
    elements.authSection.style.display = 'none';
    updateStatus('System loaded');
    playRandomVideo();
});

// 2. Play random funk video
function playRandomVideo() {
    const randomVideo = funkVideos[Math.floor(Math.random() * funkVideos.length)];
    elements.videoElement.src = randomVideo;
    elements.videoElement.play().catch(e => console.log("Video play error:", e));
    elements.videoElement.onended = playRandomVideo;
}

// 3. Connection monitoring
function updateStatus(message, isError = false) {
    elements.status.textContent = message;
    elements.status.style.background = isError ? '#e74c3c' : '#2ecc71';
    appendToOutput(message, isError ? 'error' : 'info');
}

// 4. Socket event handlers
socket.on('connect', () => {
    updateStatus('Connected to server');
    socket.emit('terminal-ready');
});

socket.on('disconnect', () => {
    updateStatus('Disconnected', true);
});

socket.on('connect_error', (err) => {
    updateStatus(`Connection error: ${err.message}`, true);
});

socket.on('terminal-output', (data) => {
    appendToOutput(data, 'output');
});

socket.on('terminal-init', (data) => {
    appendToOutput(`Terminal initialized at ${new Date().toLocaleTimeString()}`, 'success');
});

// 5. Append to terminal
function appendToOutput(text, type = 'output') {
    const line = document.createElement('div');
    line.className = type;
    line.textContent = text;
    elements.output.appendChild(line);
    elements.output.scrollTop = elements.output.scrollHeight;
}

// 6. Command handling
elements.sendCommand.addEventListener('click', sendCommand);
elements.commandInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') sendCommand();
});

function sendCommand() {
    const command = elements.commandInput.value.trim();
    if (!command) return;
    
    appendToOutput(`$ ${command}`, 'command');
    socket.emit('terminal-command', { command, userId: currentUser });
    elements.commandInput.value = '';
}

// 7. Fallback: If no connection after 5 seconds
setTimeout(() => {
    if (elements.output.children.length === 0) {
        appendToOutput('Running in offline mode. Some features may be limited.', 'warning');
    }
}, 5000);

// 8. Force terminal visibility (redundant check)
setInterval(() => {
    elements.botSection.style.display = 'block';
}, 3000);