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();
    }
})();

// 卡牌模块相关的JavaScript功能
$(document).ready(function() {
    // 全局变量，跟踪当前打开的模态窗口
    var currentOpenModal = null;
    
    // 处理卡牌点击事件
    $(document).on('click', '.card-clickable', function(e) {
        e.stopPropagation();
        
        var modalId = $(this).data('modal-id');
        var modal = $('#' + modalId);
        
        if (modal.length) {
            // 如果有其他模态窗口打开，先关闭它
            if (currentOpenModal && currentOpenModal !== modalId) {
                $('#' + currentOpenModal).css('display', 'none');
            }
            
            // 检查是否有多个相同ID的模态窗口（这是问题的根源）
            var allModals = $('[id="' + modalId + '"]');
            if (allModals.length > 1) {
                // 如果有重复的模态窗口，只显示第一个，移除其他的
                allModals.slice(1).remove();
            }
            
            // 显示模态窗口
            modal.first().css('display', 'flex');
            currentOpenModal = modalId;
            
            // 确保主显示区域可见，变体区域隐藏
            var mainDisplay = modal.find('[id^="main-display-"]');
            var variantsDisplay = modal.find('.variants-display');
            var btn = modal.find('.lingguangyishan-btn');
            
            if (mainDisplay.length) mainDisplay.css('display', 'flex');
            if (variantsDisplay.length) variantsDisplay.css('display', 'none');
            if (btn.length) {
                btn.text('灵光一闪');
                btn.css('background-color', '#4a90e2');
            }
        }
    });
    
    // 处理灵光一闪按钮点击事件
    $(document).on('click', '.lingguangyishan-btn', function(e) {
        e.stopPropagation();
        var variantsId = $(this).data('variants-id');
        var modalId = $(this).data('modal-id');
        var variantsDisplay = $('#' + variantsId);
        var mainDisplay = $('#main-display-' + modalId);
        
        if (variantsDisplay.length && mainDisplay.length) {
            if (variantsDisplay.css('display') === 'none' || variantsDisplay.css('display') === '') {
                variantsDisplay.css('display', 'block');
                mainDisplay.css('display', 'none');
                $(this).text('返回');
                $(this).css('background-color', '#5cb85c');
            } else {
                variantsDisplay.css('display', 'none');
                mainDisplay.css('display', 'flex');
                $(this).text('灵光一闪');
                $(this).css('background-color', '#4a90e2');
            }
        }
    });
    
    // 处理模态窗口关闭事件
    $(document).on('click', '.card-modal', function(e) {
        if (e.target === this) {
            $(this).css('display', 'none');
            currentOpenModal = null;
            
            // 重置显示状态
            var mainDisplay = $(this).find('[id^="main-display-"]');
            var variantsDisplay = $(this).find('.variants-display');
            var btn = $(this).find('.lingguangyishan-btn');
            
            if (mainDisplay.length) mainDisplay.css('display', 'flex');
            if (variantsDisplay.length) variantsDisplay.css('display', 'none');
            if (btn.length) {
                btn.text('灵光一闪');
                btn.css('background-color', '#4a90e2');
            }
        }
    });
    
    // 阻止模态窗口内容区域的点击事件冒泡
    $(document).on('click', '.modal-main-content', function(e) {
        e.stopPropagation();
    });
    
    // 添加按钮悬停效果
    $(document).on('mouseenter', '.lingguangyishan-btn', function() {
        if ($(this).text() === '灵光一闪') {
            $(this).css('background-color', '#357abd');
        } else {
            $(this).css('background-color', '#449d44');
        }
    });
    
    $(document).on('mouseleave', '.lingguangyishan-btn', function() {
        if ($(this).text() === '灵光一闪') {
            $(this).css('background-color', '#4a90e2');
        } else {
            $(this).css('background-color', '#5cb85c');
        }
    });
    
    // 处理ESC键关闭模态窗口
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' || e.keyCode === 27) {
            if (currentOpenModal) {
                $('#' + currentOpenModal).css('display', 'none');
                currentOpenModal = null;
            }
        }
    });
    
    // 页面加载完成后，清理重复的模态窗口
    setTimeout(function() {
        $('.card-modal').each(function() {
            var modalId = $(this).attr('id');
            var duplicates = $('[id="' + modalId + '"]');
            if (duplicates.length > 1) {
                duplicates.slice(1).remove();
            }
        });
    }, 100);
});

/* 战斗员筛选系统 */
$(function() {
    if ($('#character-filter-system').length === 0) return;
    
    // 存储当前筛选条件
    var currentFilters = {
        rarity: 'all',
        class: 'all',
        attribute: 'all',
        search: ''
    };
    
    // 筛选按钮样式
    var buttonStyle = {
        normal: {
            'background-color': '#6c757d',
            'color': 'white',
            'border': 'none',
            'padding': '5px 15px',
            'border-radius': '4px',
            'cursor': 'pointer'
        },
        active: {
            'background-color': '#007bff',
            'color': 'white',
            'border': 'none',
            'padding': '5px 15px',
            'border-radius': '4px',
            'cursor': 'pointer'
        }
    };
    
    // 初始化按钮样式
    $('.filter-btn').css(buttonStyle.normal);
    $('.filter-btn[data-value="all"]').css(buttonStyle.active);
    
    // 筛选按钮点击事件
    $('.filter-btn').on('click', function() {
        var filterType = $(this).data('filter');
        var filterValue = $(this).data('value');
        
        // 更新当前筛选条件
        currentFilters[filterType] = filterValue;
        
        // 更新按钮样式
        $('.filter-' + filterType).css(buttonStyle.normal);
        $(this).css(buttonStyle.active);
        
        // 执行筛选
        applyFilters();
    });
    
    // 搜索框事件
    $('#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(buttonStyle.normal);
        $('.filter-btn[data-value="all"]').css(buttonStyle.active);
        
        // 清空搜索框
        $('#character-search').val('');
        
        // 显示所有角色
        $('.character-card').show();
        
        // 隐藏筛选显示
        $('#current-filters').hide();
    });
    
    // 应用筛选
    function applyFilters() {
        var hasFilter = false;
        var filterText = [];
        
        $('.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);
            } 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();
        }
        
        // 统计显示数量
        var visibleCount = $('.character-card:visible').length;
        var totalCount = $('.character-card').length;
        
        // 可以在这里添加计数显示
        console.log('显示 ' + visibleCount + ' / ' + totalCount + ' 个战斗员');
    }
});