MediaWiki:Common.js

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

// 切换标签
(function() {
    'use strict';
    
    function initTabSwitcher() {
        var tabContainers = document.querySelectorAll('.resp-tabs');
        
        tabContainers.forEach(function(container) {
            var tabButtons = container.querySelectorAll('.czn-list-style');
            if (tabButtons.length === 0) return;
            
            // 检测模式
            var tabContents = container.querySelectorAll('.resp-tab-content');
            var portraitImages = document.querySelectorAll('.portrait-image');
            
            // 初始化
            tabButtons.forEach(function(button, index) {
                button.classList.toggle('active', index === 0);
            });
            
            if (tabContents.length > 0) {
                tabContents.forEach(function(content, index) {
                    content.style.display = index === 0 ? 'block' : 'none';
                });
            }
            
            if (portraitImages.length > 0) {
                portraitImages.forEach(function(image, index) {
                    image.style.display = index === 0 ? 'block' : 'none';
                });
            }
            
            // 点击事件
            tabButtons.forEach(function(button, index) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 更新标签状态
                    tabButtons.forEach(function(btn, i) {
                        btn.classList.toggle('active', i === index);
                    });
                    
                    // 传统模式切换
                    if (tabContents.length > 0) {
                        tabContents.forEach(function(content, i) {
                            content.style.display = i === index ? 'block' : 'none';
                        });
                    }
                    
                    // 立绘模式切换
                    if (portraitImages.length > 0) {
                        portraitImages.forEach(function(image) {
                            image.style.display = 'none';
                        });
                        var targetImage = document.querySelector('.portrait-image[data-index="' + index + '"]');
                        if (targetImage) {
                            targetImage.style.display = 'block';
                        }
                    }
                });
            });
        });
    }
    
    // 初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTabSwitcher);
    } else {
        initTabSwitcher();
    }
})();

/* 战斗员筛选系统 */
$(function() {
    if ($('#character-filter-system').length === 0) return;
    
    // 存储当前筛选条件
    var currentFilters = {
        rarity: 'all',
        class: 'all',
        attribute: 'all',
        search: ''
    };
    
    // 定义颜色
    var colors = {
        normal: '#6c757d',
        active: '#007bff',
        hover: '#0056b3',
        reset: '#dc3545',
        resetHover: '#c82333'
    };
    
    // 初始化统计
    updateStats();
    
    // 筛选按钮点击事件
    $('.filter-btn').on('click', function() {
        var filterType = $(this).data('filter');
        var filterValue = $(this).data('value');
        
        // 更新当前筛选条件
        currentFilters[filterType] = filterValue;
        
        // 更新按钮样式 - 使用内联样式
        $('.filter-' + filterType.replace('attribute', 'attr')).each(function() {
            $(this).css('background-color', colors.normal);
        });
        $(this).css('background-color', colors.active);
        
        // 执行筛选
        applyFilters();
    });
    
    // 筛选按钮悬停效果
    $('.filter-btn').on('mouseenter', function() {
        var currentBg = $(this).css('background-color');
        $(this).data('original-bg', currentBg);
        
        if (currentBg === 'rgb(108, 117, 125)' || currentBg === colors.normal) {
            $(this).css({
                'background-color': colors.hover,
                'transform': 'scale(1.05)'
            });
        } else {
            $(this).css('transform', 'scale(1.05)');
        }
    }).on('mouseleave', function() {
        var originalBg = $(this).data('original-bg');
        if (originalBg) {
            $(this).css({
                'background-color': originalBg,
                'transform': 'scale(1)'
            });
        } else {
            $(this).css('transform', 'scale(1)');
        }
    });
    
    // 搜索框事件
    $('#character-search').on('input', function() {
        currentFilters.search = $(this).val().toLowerCase();
        applyFilters();
    });
    
    // 重置按钮
    $('#reset-filters').on('click', function() {
        currentFilters = {
            rarity: 'all',
            class: 'all',
            attribute: 'all',
            search: ''
        };
        
        // 重置所有按钮样式
        $('.filter-btn').css('background-color', colors.normal);
        $('.filter-btn[data-value="all"]').css('background-color', colors.active);
        
        // 清空搜索框
        $('#character-search').val('');
        
        // 显示所有角色
        $('.character-card').show();
        
        // 隐藏筛选显示
        $('#current-filters').hide();
        
        // 更新统计
        updateStats();
    });
    
    // 重置按钮悬停效果
    $('#reset-filters').on('mouseenter', function() {
        $(this).css({
            'background-color': colors.resetHover,
            'transform': 'scale(1.05)'
        });
    }).on('mouseleave', function() {
        $(this).css({
            'background-color': colors.reset,
            'transform': 'scale(1)'
        });
    });
    
    // 应用筛选
    function applyFilters() {
        var hasFilter = false;
        var filterText = [];
        var visibleCount = 0;
        
        $('.character-card').each(function() {
            var $card = $(this);
            var show = true;
            
            // 检查稀有度
            if (currentFilters.rarity !== 'all') {
                if ($card.data('rarity') !== currentFilters.rarity) {
                    show = false;
                }
                hasFilter = true;
            }
            
            // 检查职业
            if (currentFilters.class !== 'all') {
                if ($card.data('class') !== currentFilters.class) {
                    show = false;
                }
                hasFilter = true;
            }
            
            // 检查属性
            if (currentFilters.attribute !== 'all') {
                if ($card.data('attribute') !== currentFilters.attribute) {
                    show = false;
                }
                hasFilter = true;
            }
            
            // 检查搜索
            if (currentFilters.search !== '') {
                var name = $card.data('name').toLowerCase();
                if (name.indexOf(currentFilters.search) === -1) {
                    show = false;
                }
                hasFilter = true;
            }
            
            // 显示或隐藏卡片
            if (show) {
                $card.fadeIn(200);
                visibleCount++;
            } else {
                $card.fadeOut(200);
            }
        });
        
        // 更新筛选条件显示
        if (hasFilter) {
            if (currentFilters.rarity !== 'all') filterText.push('稀有度:' + currentFilters.rarity);
            if (currentFilters.class !== 'all') filterText.push('职业:' + currentFilters.class);
            if (currentFilters.attribute !== 'all') filterText.push('属性:' + currentFilters.attribute);
            if (currentFilters.search !== '') filterText.push('搜索:' + currentFilters.search);
            
            $('#filter-display').text(filterText.join(' | '));
            $('#current-filters').show();
        } else {
            $('#current-filters').hide();
        }
        
        // 更新统计
        updateStats();
    }
    
    // 更新统计信息
    function updateStats() {
        var visibleCount = $('.character-card:visible').length;
        var totalCount = $('.character-card').length;
        $('#visible-count').text(visibleCount);
        $('#total-count').text(totalCount);
    }
});