Update public/script.js

public/script.js

@@ -1,4 +1,32 @@
-// Initialize Socket.io with forced connection
+// 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,
@@ -6,29 +34,33 @@ const socket = io({
     timeout: 20000
 });
 
-// DOM Elements
-const elements = {
-    authSection: document.getElementById('auth-section'),
-    botSection: document.getElementById('bot-section'),
-    output: document.getElementById('output'),
-    status: document.getElementById('connection-status')
-};
+// 1. Force terminal visibility on load
+window.addEventListener('load', () => {
+    elements.botSection.style.display = 'block';
+    elements.authSection.style.display = 'none';
+    updateStatus('System loaded');
+    playRandomVideo();
+});
 
-// Immediately show terminal for debugging
-elements.botSection.style.display = 'block';
-elements.authSection.style.display = 'none';
+// 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;
+}
 
-// Connection monitoring
+// 3. 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>`;
+    appendToOutput(message, isError ? 'error' : 'info');
 }
 
-// Socket event handlers
+// 4. Socket event handlers
 socket.on('connect', () => {
     updateStatus('Connected to server');
-    socket.emit('force-terminal-visible');
+    socket.emit('terminal-ready');
 });
 
 socket.on('disconnect', () => {
@@ -40,24 +72,45 @@ socket.on('connect_error', (err) => {
 });
 
 socket.on('terminal-output', (data) => {
-    elements.output.innerHTML += `<div class="output">${data}</div>`;
-    elements.output.scrollTop = elements.output.scrollHeight;
+    appendToOutput(data, 'output');
 });
 
 socket.on('terminal-init', (data) => {
-    elements.output.innerHTML = `<div class="success">Terminal initialized at ${new Date().toLocaleTimeString()}</div>`;
+    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();
 });
 
-// Fallback: If no connection after 5 seconds, show terminal anyway
+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.innerHTML === '') {
-        elements.output.innerHTML = `<div class="warning">Running in offline mode. Some features may be limited.</div>`;
+    if (elements.output.children.length === 0) {
+        appendToOutput('Running in offline mode. Some features may be limited.', 'warning');
     }
 }, 5000);
 
-// Force terminal visibility on load
-window.addEventListener('load', () => {
+// 8. Force terminal visibility (redundant check)
+setInterval(() => {
     elements.botSection.style.display = 'block';
-    elements.authSection.style.display = 'none';
-    updateStatus('System loaded');
-});
+}, 3000);