script.js

// Main JavaScript for DroidDrop

class DroidDropApp {
    constructor() {
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.initializeComponents();
        this.loadEmulators();
    }

    setupEventListeners() {
        // Launch emulator buttons
        document.addEventListener('click', (e) => {
            if (e.target.closest('button') && e.target.closest('button').textContent.includes('Launch Emulator')) {
                this.handleEmulatorLaunch(e);
            }
        });

        // Smooth scroll for anchor links
        document.addEventListener('click', (e) => {
            if (e.target.matches('a[href^="#"]')) {
                e.preventDefault();
                const target = document.querySelector(e.target.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            }
        });
    }

    initializeComponents() {
        // Initialize any third-party libraries or components
        console.log('DroidDrop initialized');
    }

    async loadEmulators() {
        try {
            // In a real implementation, this would fetch from an API
            const emulators = await this.fetchEmulators();
            this.renderEmulators(emulators);
        } catch (error) {
            console.error('Failed to load emulators:', error);
        }
    }

    async fetchEmulators() {
        // Mock data - in production, this would be an API call
        return [
            {
                id: 1,
                name: 'Pixel 6 Pro',
                androidVersion: 'Android 13',
                resolution: '1440x3120px',
                ram: '4GB',
                image: 'http://static.photos/technology/640x360/1',
                popular: true
            },
            {
                id: 2,
                name: 'Samsung Galaxy S23',
                androidVersion: 'Android 14',
                resolution: '1080x2340px',
                ram: '8GB',
                image: 'http://static.photos/technology/640x360/2',
                popular: false
            },
            {
                id: 3,
                name: 'OnePlus 11',
                androidVersion: 'Android 12',
                resolution: '1440x3216px',
                ram: '6GB',
                image: 'http://static.photos/technology/640x360/3',
                popular: false
            }
        ];
    }

    renderEmulators(emulators) {
        // This would update the emulator cards with dynamic data
        console.log('Emulators loaded:', emulators);
    }

    handleEmulatorLaunch(event) {
        const button = event.target.closest('button');
        const card = button.closest('.bg-white');
        const deviceName = card.querySelector('h3').textContent;

        // Show loading state
        const originalText = button.textContent;
        button.innerHTML = '<div class="loading-spinner mx-auto"></div>';
        button.disabled = true;

        // Simulate emulator launch
        setTimeout(() => {
            button.innerHTML = originalText;
            button.disabled = false;
            
            // Show success message
            this.showNotification(`Launching ${deviceName} emulator...`, 'success');
            
            // In a real implementation, this would redirect to the emulator page
            // window.location.href = `/emulator/${deviceName.toLowerCase().replace(/\s+/g, '-')}`;
        }, 2000);
    }

    showNotification(message, type = 'info') {
        // Create and show a toast notification
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-all duration-300 ${
            type === 'success' ? 'bg-green-500 text-white' : 
            type === 'error' ? 'bg-red-500 text-white' : 
            'bg-blue-500 text-white'
        }`;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        // Remove after 3 seconds
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }
}

// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new DroidDropApp();
});

// Utility functions
const utils = {
    formatDeviceName: (name) => {
        return name.replace(/\s+/g, '-').toLowerCase();
    },

    getRandomColor: () => {
        const colors = ['blue', 'purple', 'green', 'red', 'yellow'];
        return colors[Math.floor(Math.random() * colors.length)];
    },

    debounce: (func, wait) => {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
};

// Export for use in other modules
window.DroidDropApp = DroidDropApp;
window.utils = utils;