// File switching functionality document.querySelectorAll('#fileList div').forEach(fileItem => { fileItem.addEventListener('click', function() { const fileName = this.querySelector('span').textContent; switchFile(fileName); }); }); let currentFileListener = null; function switchFile(fileName) { currentFile = fileName; // Clean up previous listener if exists if (currentFileListener) { currentFileListener(); // Unsubscribes the listener } // Update UI - set active file document.querySelectorAll('#fileList div').forEach(item => { if (item.querySelector('span').textContent === fileName) { item.classList.add('bg-[rgba(124,58,237,0.2)]'); const icon = item.querySelector('i'); icon.classList.add('glow-effect'); } else { item.classList.remove('bg-[rgba(124,58,237,0.2)]'); const icon = item.querySelector('i'); icon.classList.remove('glow-effect'); } }); // Change language mode based on file extension let language; if (fileName.endsWith('.js')) language = 'javascript'; if (fileName.endsWith('.css')) language = 'css'; if (editor && language) { monaco.editor.setModelLanguage(editor.getModel(), language); } // Switch Firebase listener to new file const { db, fb } = window; const fileRef = fb.ref(db, `rooms/cyber-room/files/${currentFile.replace(/\./g, '_')}/code`); // Update current file in presence data const cursorRef = fb.ref(db, `rooms/cyber-room/cursors/${userId}`); fb.set(cursorRef, { name: userName, color: userColor, currentFile: currentFile }); // Update editor content from new file currentFileListener = fb.onValue(fileRef, (snapshot) => { const data = snapshot.val(); if (data && data !== editor.getValue()) { isRemoteUpdate = true; editor.setValue(data || `// ${fileName}\n// Start coding...`); isRemoteUpdate = false; } }); } // Initialize with first file document.addEventListener('DOMContentLoaded', () => { setTimeout(() => { document.querySelector('#fileList div:first-child').click(); }, 100); });