001code-html--cocos/scratch-gui/static/js/leaderboard.js

// 这个文件主要用于加载Bootstrap的JavaScript功能
// 主要的排行榜逻辑在 src/playground/leaderboard.js 中实现

document.addEventListener('DOMContentLoaded', function() {
    // 检测是否是移动设备
    const isMobile = window.innerWidth <= 576 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    // 在移动设备上禁用特定功能
    if (isMobile) {
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const autoRefreshSwitch = document.getElementById('auto-refresh-switch');
        
        // 如果存在全屏按钮，禁用它
        if (fullscreenBtn) {
            fullscreenBtn.style.display = 'none';
        }
        
        // 如果存在自动刷新开关，禁用它
        if (autoRefreshSwitch) {
            autoRefreshSwitch.disabled = true;
            const label = document.querySelector('label[for="auto-refresh-switch"]');
            if (label) {
                label.parentElement.style.display = 'none';
            }
        }
    }
    
    // 初始化所有Bootstrap组件
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // 添加平滑滚动效果
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // 检测是否是iPhone
    const isIPhone = /iPhone/i.test(navigator.userAgent);
    
    // 响应式调整
    function adjustLayout() {
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const tableContainer = document.querySelector('.leaderboard-table-container');
        const isFullscreen = document.body.classList.contains('fullscreen-mode');
        
        // 设置安全区域边距
        if (isIPhone) {
            document.body.style.paddingBottom = 'env(safe-area-inset-bottom)';
            
            // 处理刘海屏和底部条
            if (windowWidth < windowHeight) { // 竖屏
                document.body.style.paddingTop = 'env(safe-area-inset-top)';
                document.body.style.paddingLeft = 'env(safe-area-inset-left)';
                document.body.style.paddingRight = 'env(safe-area-inset-right)';
            }
        }
        
        if (windowWidth < 768 && !isFullscreen) {
            // 小屏幕适配
            if (tableContainer) {
                tableContainer.classList.add('table-responsive-sm');
            }
        } else {
            // 大屏幕或全屏模式适配
            if (tableContainer) {
                tableContainer.classList.remove('table-responsive-sm');
            }
        }
        
        // 全屏模式下的额外调整
        if (isFullscreen && !isMobile) {
            const table = document.querySelector('.leaderboard-table');
            if (table) {
                // 确保表格足够大以填充屏幕
                const viewportHeight = window.innerHeight;
                const headerHeight = document.querySelector('.header').offsetHeight;
                const infoHeight = document.querySelector('.leaderboard-header').offsetHeight;
                const paginationHeight = document.querySelector('.pagination-container')?.offsetHeight || 0;
                
                // 为iPhone底部栏预留空间
                const bottomInset = isIPhone ? 34 : 0;
                
                const availableHeight = viewportHeight - headerHeight - infoHeight - paginationHeight - 40 - bottomInset;
                
                if (availableHeight > 300) {
                    tableContainer.style.maxHeight = `${availableHeight}px`;
                    tableContainer.style.overflowY = 'auto';
                }
            }
        } else {
            // 非全屏模式下重置样式
            if (tableContainer) {
                tableContainer.style.maxHeight = '';
                tableContainer.style.overflowY = '';
            }
        }
    }
    
    // 初始调整和窗口大小变化时调整
    adjustLayout();
    window.addEventListener('resize', adjustLayout);
    
    // 处理屏幕方向变化
    window.addEventListener('orientationchange', function() {
        setTimeout(adjustLayout, 300); // 延迟执行以确保浏览器完成方向变化
    });
    
    // 观察DOM变化以检测全屏模式切换
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                if (mutation.target === document.body) {
                    adjustLayout();
                }
            }
        });
    });
    
    observer.observe(document.body, { attributes: true });
});