rAlfee/geometry-dash-demonlist-extreme

1 2// Main application logic3// Initialize dark mode from localStorage4if (localStorage.getItem('darkMode') === 'true') {5    document.documentElement.classList.add('dark');6} else if (localStorage.getItem('darkMode') === 'false') {7    document.documentElement.classList.remove('dark');8}9 10// Global auth state11let currentUser = null;12 13// Initialize auth state from localStorage14function initializeAuth() {15    const savedUser = localStorage.getItem('gd_demonlist_current_user');16    if (savedUser) {17        currentUser = JSON.parse(savedUser);18        updateNavbarAuthState();19    }20}21 22// Update navbar based on auth state23function updateNavbarAuthState() {24    const navbar = document.querySelector('custom-navbar');25    if (!navbar) return;26    27    const authButtons = navbar.shadowRoot.querySelector('.auth-buttons');28    if (!authButtons) return;29    30    if (currentUser) {31        // User is logged in32        authButtons.innerHTML = `33            <span class="auth-button" style="background: transparent; border: none; color: #94a3b8; cursor: default;">34                <i data-feather="user"></i>35                ${currentUser.username}36            </span>37            <button class="auth-button settings" id="settings-btn">38                <i data-feather="settings"></i>39            </button>40            <button class="auth-button login" id="logout-btn">41                <i data-feather="log-out"></i>42                Logout43            </button>44        `;45        feather.replace();46        47        // Re-setup settings button48        const settingsBtn = navbar.shadowRoot.getElementById('settings-btn');49        if (settingsBtn) {50            settingsBtn.addEventListener('click', () => {51                const event = new CustomEvent('open-settings-modal', {52                    bubbles: true,53                    composed: true54                });55                navbar.dispatchEvent(event);56            });57        }58        59        // Setup logout button60        const logoutBtn = navbar.shadowRoot.getElementById('logout-btn');61        if (logoutBtn) {62            logoutBtn.addEventListener('click', handleLogout);63        }64    } else {65        // User is logged out66        authButtons.innerHTML = `67            <button class="auth-button login" id="login-btn">68                <i data-feather="log-in"></i>69                Login70            </button>71            <button class="auth-button register" id="register-btn">72                <i data-feather="user-plus"></i>73                Register74            </button>75            <button class="auth-button settings" id="settings-btn">76                <i data-feather="settings"></i>77            </button>78        `;79        feather.replace();80        navbar.setupAuthButtons();81    }82}83 84// Handle logout85function handleLogout() {86    localStorage.removeItem('gd_demonlist_current_user');87    currentUser = null;88    updateNavbarAuthState();89    90    // Show success message91    showNotification('Logged out successfully', 'success');92}93 94// Show notification95function showNotification(message, type = 'info') {96    // Create notification element97    const notification = document.createElement('div');98    notification.style.cssText = `99        position: fixed;100        top: 1rem;101        right: 1rem;102        padding: 1rem 1.5rem;103        border-radius: 0.5rem;104        color: white;105        font-weight: 500;106        z-index: 1001;107        transform: translateX(100%);108        transition: transform 0.3s ease;109        background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'};110    `;111    notification.textContent = message;112    113    document.body.appendChild(notification);114    115    // Animate in116    setTimeout(() => {117        notification.style.transform = 'translateX(0)';118    }, 100);119    120    // Remove after 3 seconds121    setTimeout(() => {122        notification.style.transform = 'translateX(100%)';123        setTimeout(() => {124            document.body.removeChild(notification);125        }, 300);126    }, 3000);127}128 129document.addEventListener('DOMContentLoaded', () => {130    // Initialize authentication131    initializeAuth();132    133    // Auth modal system134    const authModal = document.querySelector('custom-auth-modal');135    const submitLevelBtn = document.getElementById('submit-level-btn');136    const settingsModal = document.querySelector('custom-settings-modal');137    138    // Handle settings modal139    document.addEventListener('open-settings-modal', () => {140        settingsModal.classList.add('active');141    });142    143    // Handle auth modal opening from submit level button144    if (submitLevelBtn) {145        submitLevelBtn.addEventListener('click', () => {146            if (currentUser) {147                showNotification('Level submission feature coming soon!', 'info');148            } else {149                authModal.setMode('login');150                authModal.classList.add('active');151            }152        });153    }154    155    // Handle auth modal opening from navbar events156    document.addEventListener('open-auth-modal', (e) => {157        const mode = e.detail?.mode || 'login';158        authModal.setMode(mode);159        authModal.classList.add('active');160    });161 162    // Listen for auth success event163    document.addEventListener('auth-success', (e) => {164        const { mode, user } = e.detail;165        console.log(`${mode} successful for user:`, user);166        167        currentUser = user;168        updateNavbarAuthState();169        170        // Show success message171        showNotification(172            mode === 'login' ? 'Logged in successfully!' : 'Registered successfully!',173            'success'174        );175    });176 177    // Simulate loading levels from API178    async function loadDemonlist() {179        try {180            const difficulties = [181                'Extreme Demon',182                'Insane Demon',183                'Hard Demon',184                'Medium Demon',185                'Easy Demon'186            ];187            188            const container = document.getElementById('demonlist-container');189            container.innerHTML = '';190            191            const levelNames = [192                'Sonic Wave', 'Bloodbath', 'Artificial Ascent', 'Cataclysm', 'Sakupen Hell',193                'Phobos', 'Athanalos', 'Renevant', 'Sedulous', 'Thanatophopia',194                'Kenos', 'Firework', 'Silent Clubstep', 'Slaughterhouse', 'Acheron'195            ];196            197            const creators = [198                'Cyclic', 'Riot', 'G4lvatron', 'Gboy', 'Sakupen',199                'Zoroa', 'KrmaL', 'GD Jose', 'ZenthicAlpha', 'TrusTa',200                'Npesta', 'Iris', 'Sailent', 'Iris', 'Exen'201            ];202            203            const videoIds = [204                'dQw4w9WgXcQ', '9bZkp7q19f0', 'kJQP7kiw5Fk', 'JGwWNGJdvx8', 'RgKAFK5djSk',205                'fJ9rUzIMcZQ', 'OPf0YbXqDm0', 'hT_nvWreIhg', 'kOkQ4T5WO9E', 'pRpeEdMmmb0'206            ];207            208            for (let i = 1; i <= 12; i++) {209                const levelCard = document.createElement('level-card');210                const difficulty = difficulties[Math.floor(Math.random() * difficulties.length)];211                levelCard.setAttribute('position', i);212                levelCard.setAttribute('name', levelNames[i - 1] || `Awesome Level ${i}`);213                levelCard.setAttribute('creator', creators[i - 1] || `Creator${i}`);214                levelCard.setAttribute('difficulty', difficulty);215                levelCard.setAttribute('video-id', videoIds[i - 1] || 'dQw4w9WgXcQ');216                container.appendChild(levelCard);217            }218        } catch (error) {219            console.error('Failed to load demonlist:', error);220        }221    }222    223    loadDemonlist();224});225 226// Utility functions227function formatNumber(num) {228    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");229}230 231function getYoutubeThumbnail(videoId) {232    return `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;233}234