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

// 卡牌系统功能
(function() {
    // 防止重复初始化
    if (window.cardSystemInitialized) return;
    window.cardSystemInitialized = true;
    
    // 创建遮罩层和容器
    function createCardOverlay() {
        // 创建遮罩
        var overlay = document.createElement('div');
        overlay.id = 'card-overlay';
        overlay.style.cssText = 'display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999;';
        
        // 创建容器
        var container = document.createElement('div');
        container.id = 'card-display-container';
        container.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);';
        
        overlay.appendChild(container);
        document.body.appendChild(overlay);
        
        // 点击遮罩关闭
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                closeCardDisplay();
            }
        });
        
        return { overlay: overlay, container: container };
    }
    
    // 关闭卡牌展示
    function closeCardDisplay() {
        var overlay = document.getElementById('card-overlay');
        if (overlay) {
            overlay.style.display = 'none';
            overlay.querySelector('#card-display-container').innerHTML = '';
        }
    }
    
    // 获取卡牌HTML（通过API调用模块）
    function fetchCardHTML(character, cardName, deckType, callback) {
        var api = new mw.Api();
        var wikitext = '{{#invoke:卡牌|main|' + character + '|' + cardName + '|' + (deckType || '') + '}}';
        
        api.parse(wikitext).done(function(html) {
            callback(html);
        }).fail(function() {
            callback('<div style="color: white;">加载失败</div>');
        });
    }
    
    // 放大显示卡牌
    function showEnlargedCard(cardElement) {
        var elements = createCardOverlay();
        var container = elements.container;
        var cardName = cardElement.dataset.cardName;
        var character = cardElement.dataset.character;
        var deckType = cardElement.dataset.deckType;
        var derivedCards = cardElement.dataset.derivedCards;
        
        // 创建主卡牌容器
        var mainCardWrapper = document.createElement('div');
        mainCardWrapper.style.cssText = 'position: relative; display: inline-block;';
        
        // 克隆并放大主卡牌
        var enlargedCard = cardElement.cloneNode(true);
        enlargedCard.style.cssText = 'transform: scale(2); transform-origin: center; position: relative; cursor: default;';
        enlargedCard.onclick = null; // 移除点击事件
        
        // 创建主卡牌的包装
        var mainCardContainer = document.createElement('div');
        mainCardContainer.style.cssText = 'display: inline-block; position: relative; width: 336px; height: 460px;';
        mainCardContainer.appendChild(enlargedCard);
        
        // 处理衍生卡牌
        if (derivedCards && derivedCards.trim() !== '') {
            var derivedCardsList = derivedCards.split('、');
            
            // 创建左侧容器
            var leftContainer = document.createElement('div');
            leftContainer.style.cssText = 'position: absolute; right: 356px; bottom: 0; display: flex; align-items: flex-end; gap: 10px;';
            
            if (derivedCardsList.length > 1) {
                // 多张衍生卡牌，添加查看所有按钮
                var viewAllBtn = document.createElement('div');
                viewAllBtn.style.cssText = 'padding: 8px 16px; background: #4a90e2; color: white; border-radius: 4px; cursor: pointer; margin-right: 10px; white-space: nowrap;';
                viewAllBtn.textContent = '查看所有衍生卡牌';
                viewAllBtn.onclick = function() {
                    showAllDerivedCards(character, derivedCardsList, leftContainer);
                };
                leftContainer.appendChild(viewAllBtn);
            }
            
            // 显示第一张衍生卡牌
            var firstDerivedCard = document.createElement('div');
            firstDerivedCard.id = 'derived-cards-display';
            firstDerivedCard.style.cssText = 'display: flex; gap: 10px; align-items: flex-end;';
            
            fetchCardHTML(character, derivedCardsList[0].trim(), '', function(html) {
                firstDerivedCard.innerHTML = html;
                // 移除衍生卡牌的点击事件
                var cards = firstDerivedCard.querySelectorAll('.game-card');
                cards.forEach(function(card) {
                    card.style.cursor = 'default';
                    card.onclick = null;
                });
            });
            
            leftContainer.appendChild(firstDerivedCard);
            mainCardWrapper.appendChild(leftContainer);
        }
        
        mainCardWrapper.appendChild(mainCardContainer);
        
        // 检查是否有灵光一闪或神之一闪变体
        var hasLingguang = false;
        var hasShenguang = false;
        
        // 通过API检查变体卡牌
        checkCardVariants(character, cardName, function(variants) {
            if (variants.lingguang || variants.shenguang) {
                var buttonsContainer = document.createElement('div');
                buttonsContainer.style.cssText = 'position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px;';
                
                if (variants.lingguang) {
                    var lingguangBtn = document.createElement('div');
                    lingguangBtn.style.cssText = 'padding: 8px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 4px; cursor: pointer; font-weight: bold;';
                    lingguangBtn.textContent = '灵光一闪';
                    lingguangBtn.onclick = function() {
                        showVariantCards(character, cardName, '灵光一闪');
                    };
                    buttonsContainer.appendChild(lingguangBtn);
                }
                
                if (variants.shenguang) {
                    var shenguangBtn = document.createElement('div');
                    shenguangBtn.style.cssText = 'padding: 8px 20px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 4px; cursor: pointer; font-weight: bold;';
                    shenguangBtn.textContent = '神之一闪';
                    shenguangBtn.onclick = function() {
                        showVariantCards(character, cardName, '神之一闪');
                    };
                    buttonsContainer.appendChild(shenguangBtn);
                }
                
                mainCardContainer.appendChild(buttonsContainer);
            }
        });
        
        container.appendChild(mainCardWrapper);
        elements.overlay.style.display = 'block';
    }
    
    // 显示所有衍生卡牌
    function showAllDerivedCards(character, derivedCardsList, container) {
        var display = container.querySelector('#derived-cards-display');
        if (!display) {
            display = document.createElement('div');
            display.id = 'derived-cards-display';
            display.style.cssText = 'display: flex; gap: 10px; align-items: flex-end;';
            container.appendChild(display);
        }
        
        display.innerHTML = '';
        
        // 加载所有衍生卡牌
        var loadedCount = 0;
        derivedCardsList.forEach(function(cardName) {
            fetchCardHTML(character, cardName.trim(), '', function(html) {
                var cardWrapper = document.createElement('div');
                cardWrapper.innerHTML = html;
                var cards = cardWrapper.querySelectorAll('.game-card');
                cards.forEach(function(card) {
                    card.style.cursor = 'default';
                    card.onclick = null;
                    display.appendChild(card);
                });
            });
        });
    }
    
    // 检查卡牌变体
    function checkCardVariants(character, cardName, callback) {
        // 这里通过解析模块返回的HTML来判断是否有变体
        // 实际实现中可能需要调用特定的API
        var variants = { lingguang: false, shenguang: false };
        
        // 检查灵光一闪
        fetchCardHTML(character, cardName, '灵光一闪', function(html) {
            if (html && !html.includes('找不到卡组')) {
                variants.lingguang = true;
            }
            
            // 检查神之一闪
            fetchCardHTML(character, cardName, '神之一闪', function(html) {
                if (html && !html.includes('找不到卡组')) {
                    variants.shenguang = true;
                }
                callback(variants);
            });
        });
    }
    
    // 显示变体卡牌
    function showVariantCards(character, cardName, variantType) {
        var overlay = document.getElementById('card-overlay');
        var container = document.getElementById('card-display-container');
        
        // 清空当前内容
        container.innerHTML = '';
        
        // 创建标题
        var title = document.createElement('div');
        title.style.cssText = 'color: white; font-size: 24px; font-weight: bold; margin-bottom: 20px; text-align: center;';
        title.textContent = cardName + ' - ' + variantType;
        container.appendChild(title);
        
        // 创建卡牌容器
        var cardsContainer = document.createElement('div');
        cardsContainer.style.cssText = 'display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px;';
        
        // 加载变体卡牌
        fetchCardHTML(character, cardName, variantType, function(html) {
            cardsContainer.innerHTML = html;
            
            // 移除所有卡牌的点击事件
            var cards = cardsContainer.querySelectorAll('.game-card');
            cards.forEach(function(card) {
                card.style.cursor = 'default';
                card.onclick = null;
            });
        });
        
        container.appendChild(cardsContainer);
        
        // 添加返回按钮
        var backBtn = document.createElement('div');
        backBtn.style.cssText = 'position: absolute; top: 20px; left: 20px; padding: 8px 16px; background: #4a90e2; color: white; border-radius: 4px; cursor: pointer;';
        backBtn.textContent = '返回';
        backBtn.onclick = function() {
            closeCardDisplay();
            // 重新显示原卡牌
            var originalCard = document.querySelector('.game-card[data-card-name="' + cardName + '"][data-character="' + character + '"]:not([data-deck-type="灵光一闪"]):not([data-deck-type="神之一闪"])');
            if (originalCard) {
                showEnlargedCard(originalCard);
            }
        };
        container.appendChild(backBtn);
    }
    
    // 初始化卡牌点击事件
    function initCardClickEvents() {
        // 使用事件委托
        document.addEventListener('click', function(e) {
            var card = e.target.closest('.game-card');
            if (card && !card.closest('#card-overlay')) {
                e.preventDefault();
                e.stopPropagation();
                showEnlargedCard(card);
            }
        });
    }
    
    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCardClickEvents);
    } else {
        initCardClickEvents();
    }
})();