MediaWiki:Common.js

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

$(function() {
    if (mw.config.get('wgPageName') === 'MediaWiki:Card') {
        mw.loader.load('/index.php?title=MediaWiki:Card.js&action=raw&ctype=text/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');
            
            // 初始化
            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';
                });
            }
            
            // 点击事件
            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 (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTabSwitcher);
    } else {
        initTabSwitcher();
    }
})();

/* 战斗员筛选 */
$(function() {
    // 初始化筛选系统
    function initFilterSystem() {
        // 清理数据并设置属性
        $('.战斗员卡片').each(function() {
            var $card = $(this);
            
            var rarity = ($card.attr('data-rarity') || '').trim();
            var profession = ($card.attr('data-profession') || '').trim();
            var attribute = ($card.attr('data-attribute') || '').trim();
            
            $card.attr({
                'data-rarity': rarity,
                'data-profession': profession,
                'data-attribute': attribute
            });
        });
        
        // 存储当前筛选状态
        var activeFilters = {};
        
        // 筛选按钮点击事件
        $('.filter-button').off('click').on('click', function(e) {
            e.preventDefault();
            
            var $button = $(this);
            var group = String($button.data('filter-group'));
            var value = String($button.data('filter-value')).trim();
            
            // 切换按钮状态
            if (group === '0' && value === '0') {
                // 查看全部按钮
                $('.filter-button').removeClass('active');
                $button.addClass('active');
                activeFilters = {};
            } else {
                // 其他筛选按钮
                $('.filter-button[data-filter-group="0"]').removeClass('active');
                
                // 同组内只能选择一个
                $('.filter-button[data-filter-group="' + group + '"]').removeClass('active');
                
                if (activeFilters[group] === value) {
                    // 如果点击已激活的按钮，则取消选择
                    delete activeFilters[group];
                    $button.removeClass('active');
                } else {
                    // 激活新的筛选
                    $button.addClass('active');
                    activeFilters[group] = value;
                }
                
                // 如果没有任何筛选项，激活"查看全部"
                if (Object.keys(activeFilters).length === 0) {
                    $('.filter-button[data-filter-group="0"][data-filter-value="0"]').addClass('active');
                }
            }
            
            // 应用筛选
            applyFilters();
        });
        
        // 应用筛选函数
        function applyFilters() {
            $('.战斗员卡片').each(function() {
                var $card = $(this);
                var shouldShow = true;
                
                // 检查每个激活的筛选条件
                for (var group in activeFilters) {
                    var filterValue = String(activeFilters[group]).trim();
                    var cardValue = '';
                    
                    // 根据组号获取对应的卡片属性
                    switch(group) {
                        case '1': // 稀有度
                            cardValue = String($card.attr('data-rarity') || '').trim();
                            break;
                        case '2': // 职业
                            cardValue = String($card.attr('data-profession') || '').trim();
                            break;
                        case '3': // 属性
                            cardValue = String($card.attr('data-attribute') || '').trim();
                            break;
                        default:
                            cardValue = String($card.attr('data-filter-' + group) || '').trim();
                    }
                    
                    if (cardValue !== filterValue) {
                        shouldShow = false;
                        break;
                    }
                }
                
                // 显示或隐藏卡片
                if (shouldShow) {
                    $card.fadeIn(200);
                } else {
                    $card.fadeOut(200);
                }
            });
            
            // 更新显示数量
            updateCount();
        }
        
        // 更新显示数量
        function updateCount() {
            var visibleCount = $('.战斗员卡片:visible').length;
            var totalCount = $('.战斗员卡片').length;
            
            if ($('#filter-count').length === 0) {
                $('.filter-container').prepend('<div id="filter-count"></div>');
            }
            
            $('#filter-count').text('显示 ' + visibleCount + ' / ' + totalCount + ' 个战斗员');
        }
        
        // 初始化筛选按钮的data属性（清理空格）
        $('.filter-button').each(function() {
            var $button = $(this);
            var value = String($button.data('filter-value') || '').trim();
            $button.attr('data-filter-value', value);
        });
        
        // 初始化时激活"查看全部"按钮
        $('.filter-button[data-filter-group="0"][data-filter-value="0"]').addClass('active');
        updateCount();
    }
    
    // 等待页面加载完成
    var checkInterval = setInterval(function() {
        if ($('.战斗员卡片').length > 0 && $('.filter-button').length > 0) {
            clearInterval(checkInterval);
            initFilterSystem();
        }
    }, 500);
    
    // 10秒后停止检查
    setTimeout(function() {
        clearInterval(checkInterval);
    }, 10000);
});

/* 卡牌 */
(function() {
    // 防止重复初始化
    if (window.cardSystemInitialized) return;
    window.cardSystemInitialized = true;
    
    // 缓存DOM元素
    var overlayCache = null;
    var containerCache = null;
    
    // 保存当前卡牌信息，用于返回
    var currentCardInfo = null;
    
    // 创建遮罩层和容器
    function createCardOverlay() {
        if (overlayCache && containerCache) {
            return { overlay: overlayCache, container: containerCache };
        }
        
        // 创建遮罩
        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; overflow-y: auto;';
        
        // 创建容器
        var container = document.createElement('div');
        container.id = 'card-display-container';
        container.style.cssText = 'position: relative; min-height: 100vh; padding: 40px 20px; display: flex; align-items: center; justify-content: center;';
        overlay.appendChild(container);
        document.body.appendChild(overlay);
        
        // 点击遮罩关闭
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                closeCardDisplay();
            }
        });
        
        overlayCache = overlay;
        containerCache = container;
        
        return { overlay: overlay, container: container };
    }
    
    // 创建关闭按钮
    function createCloseButton() {
        var closeBtn = document.createElement('div');
        closeBtn.style.cssText = 'position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border: 2px solid white; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10001; transition: all 0.3s;';
        closeBtn.innerHTML = '<span style="color: white; font-size: 24px; font-weight: bold; line-height: 1;">×</span>';
        closeBtn.onmouseover = function() { 
            this.style.background = 'rgba(255,255,255,0.2)'; 
            this.style.transform = 'scale(1.1)';
        };
        closeBtn.onmouseout = function() { 
            this.style.background = 'rgba(255,255,255,0.1)'; 
            this.style.transform = 'scale(1)';
        };
        closeBtn.onclick = function() {
            closeCardDisplay();
        };
        return closeBtn;
    }
    
    // 关闭卡牌展示
    function closeCardDisplay() {
        var overlay = document.getElementById('card-overlay');
        if (overlay) {
            overlay.style.display = 'none';
            var container = overlay.querySelector('#card-display-container');
            if (container) {
                container.innerHTML = '';
            }
        }
        currentCardInfo = null; // 清空当前卡牌信息
    }
    
    // 缓存API调用结果
    var apiCache = {};
    
    // 获取卡牌HTML
    function fetchCardHTML(character, cardName, deckType, callback) {
        var cacheKey = character + '|' + cardName + '|' + (deckType || '');
        
        // 检查缓存
        if (apiCache[cacheKey]) {
            callback(apiCache[cacheKey]);
            return;
        }
        
        var api = new mw.Api();
        var wikitext = '{{#invoke:卡牌|main|' + character + '|' + cardName + '|' + (deckType || '') + '}}';
        
        api.parse(wikitext).done(function(html) {
            apiCache[cacheKey] = 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 hasMechanism = cardElement.dataset.hasMechanism === 'true';
      
        // 保存当前卡牌信息
        currentCardInfo = {
            element: cardElement,
            cardName: cardName,
            character: character,
            deckType: deckType,
            derivedCards: derivedCards
        };
    
        // 重置容器样式
        container.style.cssText = 'position: relative; min-height: 100vh; padding: 40px 20px; display: flex; align-items: center; justify-content: center;';
    
        // 创建内容包装器
        var contentWrapper = document.createElement('div');
        contentWrapper.style.cssText = 'display: flex; align-items: flex-start; gap: 40px; position: relative;';
    
        // 处理衍生卡牌（左侧）
        if (derivedCards && derivedCards.trim() !== '') {
            var leftContainer = document.createElement('div');
            leftContainer.style.cssText = 'display: flex; flex-direction: column; gap: 20px; align-items: center;';
        
            var derivedCardsList = derivedCards.split('、');
        
            var derivedCardWrapper = document.createElement('div');
            derivedCardWrapper.style.cssText = 'width: 252px; height: 345px; display: flex; align-items: center; justify-content: center;';
        
            var firstDerivedCard = document.createElement('div');
            firstDerivedCard.id = 'derived-cards-display';
            firstDerivedCard.style.cssText = 'transform: scale(1.5); transform-origin: center center;';
        
            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 = function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                    };
                });
            });
        
            derivedCardWrapper.appendChild(firstDerivedCard);
            leftContainer.appendChild(derivedCardWrapper);
        
            if (derivedCardsList.length > 1) {
                var viewAllBtn = document.createElement('div');
                viewAllBtn.style.cssText = 'padding: 10px 20px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border-radius: 6px; cursor: pointer; white-space: nowrap; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.2s; margin-top: 0px;';
                viewAllBtn.textContent = '查看所有衍生卡牌';
                viewAllBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
                viewAllBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
                viewAllBtn.onclick = function() {
                    showAllDerivedCards(character, derivedCardsList);
                };
                leftContainer.appendChild(viewAllBtn);
            }
        
            contentWrapper.appendChild(leftContainer);
        }
    
        // 创建中间主卡牌区域
        var centerContainer = document.createElement('div');
        centerContainer.style.cssText = 'display: flex; flex-direction: column; align-items: center; gap: 30px;';
    
        var mainCardContainer = document.createElement('div');
        mainCardContainer.style.cssText = 'width: 336px; height: 460px; display: flex; align-items: center; justify-content: center; position: relative;';
    
        var cardInner = document.createElement('div');
        cardInner.style.cssText = 'transform: scale(2); position: relative;';
    
        var enlargedCard = cardElement.cloneNode(true);
        enlargedCard.style.width = '168px';
        enlargedCard.style.height = '230px';
        enlargedCard.style.cursor = 'default';
        enlargedCard.style.position = 'relative';
        enlargedCard.style.display = 'block';
        enlargedCard.onclick = null;
    
        cardInner.appendChild(enlargedCard);
        mainCardContainer.appendChild(cardInner);
        centerContainer.appendChild(mainCardContainer);
    
        // 创建按钮容器
        var buttonsContainer = document.createElement('div');
        buttonsContainer.style.cssText = 'display: flex; gap: 15px; white-space: nowrap;';
    
        checkCardVariants(character, cardName, function(variants) {
            if (variants.lingguang) {
                var lingguangBtn = document.createElement('div');
                lingguangBtn.style.cssText = 'padding: 10px 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.2s; white-space: nowrap; min-width: 120px; text-align: center;';
                lingguangBtn.textContent = '灵光一闪';
                lingguangBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
                lingguangBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
                lingguangBtn.onclick = function() {
                    showVariantCards(character, cardName, '灵光一闪');
                };
                buttonsContainer.appendChild(lingguangBtn);
            }
        
            if (variants.shenguang) {
                var shenguangBtn = document.createElement('div');
                shenguangBtn.style.cssText = 'padding: 10px 30px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.2s; white-space: nowrap; min-width: 120px; text-align: center;';
                shenguangBtn.textContent = '神之一闪';
                shenguangBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
                shenguangBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
                shenguangBtn.onclick = function() {
                    showVariantCards(character, cardName, '神之一闪');
                };
                buttonsContainer.appendChild(shenguangBtn);
            }
        
            if (buttonsContainer.children.length > 0) {
                centerContainer.appendChild(buttonsContainer);
            }
        });
    
        contentWrapper.appendChild(centerContainer);
    
        // 添加右侧机制说明（从隐藏的容器中获取）
        if (hasMechanism) {
            // 查找与当前卡牌相邻的机制容器
            var mechanismContainer = cardElement.nextElementSibling;
            if (mechanismContainer && mechanismContainer.classList.contains('mechanism-container')) {
                var mechanismDisplay = document.createElement('div');
                mechanismDisplay.style.cssText = 'display: flex; flex-direction: column; gap: 0px; max-width: 320px; min-width: 280px;';
                mechanismDisplay.innerHTML = mechanismContainer.innerHTML;
                mechanismDisplay.style.display = 'flex'; // 显示内容
            
                contentWrapper.appendChild(mechanismDisplay);
            }
        }
    
        container.innerHTML = '';
        container.appendChild(contentWrapper);
        container.appendChild(createCloseButton());
    
        elements.overlay.style.display = 'block';
    }

    // 显示所有衍生卡牌
    function showAllDerivedCards(character, derivedCardsList) {
        var overlay = document.getElementById('card-overlay');
        var container = document.getElementById('card-display-container');
        
        // 清空当前内容
        container.innerHTML = '';
        container.style.cssText = 'position: relative; padding: 40px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;';
        
        // 创建标题
        var title = document.createElement('div');
        title.style.cssText = 'color: white; font-size: 28px; font-weight: bold; margin-bottom: 30px; text-align: center;';
        title.textContent = '衍生卡牌';
        container.appendChild(title);
        
        // 创建卡牌容器
        var cardsContainer = document.createElement('div');
        cardsContainer.style.cssText = 'display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; max-width: 1400px; transform: scale(1.5); transform-origin: center center; padding: 40px;';
        
        // 加载所有衍生卡牌
        var uniqueCards = [...new Set(derivedCardsList.map(function(name) { return name.trim(); }))];
        var loadedCount = 0;
        
        uniqueCards.forEach(function(cardName) {
            fetchCardHTML(character, cardName, '', 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 = function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                    };
                    
                    // 检查是否有衍生卡牌
                    var derivedCards = card.dataset.derivedCards;
                    if (derivedCards && derivedCards.trim() !== '') {
                        // 创建衍生卡牌按钮容器
                        var buttonContainer = document.createElement('div');
                        buttonContainer.style.cssText = 'display: flex; flex-direction: column; align-items: center; gap: 10px;';
                        
                        // 创建卡片容器
                        var cardContainer = document.createElement('div');
                        cardContainer.appendChild(card.cloneNode(true));
                        buttonContainer.appendChild(cardContainer);
                        
                        // 创建查看衍生卡牌按钮
                        var viewDerivedBtn = document.createElement('div');
                        viewDerivedBtn.style.cssText = 'padding: 8px 15px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border-radius: 6px; cursor: pointer; white-space: nowrap; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.2s; font-size: 12px;';
                        viewDerivedBtn.textContent = '查看衍生卡牌';
                        viewDerivedBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
                        viewDerivedBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
                        viewDerivedBtn.onclick = function(e) {
                            e.stopPropagation();
                            showAllDerivedCards(character, derivedCards.split('、'));
                        };
                        
                        buttonContainer.appendChild(viewDerivedBtn);
                        cardsContainer.appendChild(buttonContainer);
                    } else {
                        cardsContainer.appendChild(card);
                    }
                });
                
                loadedCount++;
                if (loadedCount === uniqueCards.length) {
                    // 所有卡牌加载完成
                }
            });
        });
        
        container.appendChild(cardsContainer);
        
        // 添加返回按钮
        var backBtn = document.createElement('div');
        backBtn.style.cssText = 'position: fixed; top: 20px; left: 20px; padding: 10px 20px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 10001; transition: transform 0.2s;';
        backBtn.textContent = '← 返回';
        backBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
        backBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
        backBtn.onclick = function() {
            // 返回到放大的卡牌页面
            if (currentCardInfo && currentCardInfo.element) {
                showEnlargedCard(currentCardInfo.element);
            }
        };
        container.appendChild(backBtn);
        
        // 添加关闭按钮
        container.appendChild(createCloseButton());
    }
    
    // 检查卡牌变体
    function checkCardVariants(character, cardName, callback) {
        var variants = { lingguang: false, shenguang: false };
        var checkCount = 0;
        var totalChecks = 2;
        
        function checkComplete() {
            checkCount++;
            if (checkCount === totalChecks) {
                callback(variants);
            }
        }
        
        // 并行检查两种变体
        fetchCardHTML(character, cardName, '灵光一闪', function(html) {
            if (html && !html.includes('找不到卡组')) {
                variants.lingguang = true;
            }
            checkComplete();
        });
        
        fetchCardHTML(character, cardName, '神之一闪', function(html) {
            if (html && !html.includes('找不到卡组')) {
                variants.shenguang = true;
            }
            checkComplete();
        });
    }
    
    // 显示变体卡牌
    function showVariantCards(character, cardName, variantType) {
        var overlay = document.getElementById('card-overlay');
        var container = document.getElementById('card-display-container');
        
        // 重置容器样式
        container.style.cssText = 'position: relative; padding: 40px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;';
        container.innerHTML = '';
        
        // 创建标题
        var title = document.createElement('div');
        title.style.cssText = 'color: white; font-size: 28px; font-weight: bold; margin-bottom: 30px; text-align: center; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;';
        title.textContent = cardName + ' - ' + variantType;
        container.appendChild(title);
        
        // 创建卡牌容器
        var cardsContainer = document.createElement('div');
        cardsContainer.style.cssText = 'display: flex; flex-wrap: nowrap; gap: 30px; justify-content: center; max-width: 1400px; overflow-x: auto; padding: 40px; transform: scale(1.5); transform-origin: center center;';
        
        // 加载变体卡牌
        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;
                card.style.flexShrink = '0'; // 防止卡牌缩小
            });
        });
        
        container.appendChild(cardsContainer);
        
        // 添加返回按钮
        var backBtn = document.createElement('div');
        backBtn.style.cssText = 'position: fixed; top: 20px; left: 20px; padding: 10px 20px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 10001; transition: transform 0.2s;';
        backBtn.textContent = '← 返回';
        backBtn.onmouseover = function() { this.style.transform = 'scale(1.05)'; };
        backBtn.onmouseout = function() { this.style.transform = 'scale(1)'; };
        backBtn.onclick = function() {
            // 返回到放大的卡牌页面
            if (currentCardInfo && currentCardInfo.element) {
                showEnlargedCard(currentCardInfo.element);
            }
        };
        container.appendChild(backBtn);
        
        // 添加关闭按钮
        container.appendChild(createCloseButton());
    }
    
    // 初始化卡牌点击事件
    function initCardClickEvents() {
        // 使用事件委托
        document.addEventListener('click', function(e) {
            var card = e.target.closest('.game-card');
            if (card && !card.closest('#card-overlay')) {
                e.preventDefault();
                showEnlargedCard(card);
            }
        });
    }
    
    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            initCardClickEvents();
        });
    } else {
        initCardClickEvents();
    }
})();

/* 角色立绘切换 */
$(document).ready(function() {
    // 使用事件委托来确保动态内容也能响应
    $(document).on('click', '.character-switch-btn', function() {
        // 如果点击的是已经激活的按钮，不执行任何操作
        if ($(this).hasClass('active')) {
            return;
        }
        
        var targetType = $(this).attr('data-target');
        var container = $(this).closest('#character-container');
        var imageWrapper = container.find('.character-image-wrapper');
        var allImages = imageWrapper.find('.character-image');
        
        // 先将所有图片淡出
        allImages.each(function() {
            $(this).css('opacity', '0');
        });
        
        // 延迟后切换显示状态
        setTimeout(function() {
            allImages.each(function() {
                $(this).css('display', 'none');
            });
            
            // 显示目标图片
            imageWrapper.find('[data-image-type="' + targetType + '"]').each(function() {
                $(this).css('display', 'block');
                // 强制重绘
                $(this)[0].offsetHeight;
                $(this).css('opacity', '1');
            });
        }, 300);
        
        // 更新按钮样式
        container.find('.character-switch-btn').each(function() {
            $(this).removeClass('active');
            $(this).css({
                'background': 'rgba(0,0,0,0.5)',
                'cursor': 'pointer'
            });
        });
        
        // 设置当前按钮为激活状态
        $(this).addClass('active');
        $(this).css({
            'background': 'rgba(70, 130, 255, 0.8)',
            'cursor': 'default'
        });
    });
    
    // 鼠标悬停效果（仅对非激活按钮有效）
    $(document).on('mouseenter', '.character-switch-btn:not(.active)', function() {
        $(this).css('background', 'rgba(70, 130, 255, 0.5)');
    });
    
    $(document).on('mouseleave', '.character-switch-btn:not(.active)', function() {
        $(this).css('background', 'rgba(0,0,0,0.5)');
    });
});

/* 轮播图 */
$(function() {
    $('.carousel-container').each(function() {
        var $container = $(this);
        var $wrapper = $container.find('.carousel-wrapper');
        var $slides = $container.find('.carousel-slide');
        var $titleItems = $container.find('.carousel-title-item');
        var slideCount = $slides.length;
        var currentSlide = 0;
        var autoPlayInterval;
        var isTransitioning = false;
        
        // 切换到指定幻灯片
        function goToSlide(index) {
            if (isTransitioning) return;
            
            if (index < 0) index = slideCount - 1;
            if (index >= slideCount) index = 0;
            
            isTransitioning = true;
            currentSlide = index;
            $wrapper.css('transform', 'translateX(-' + (index * 100) + '%)');
            
            // 更新标题状态
            $titleItems.each(function(i) {
                var $item = $(this);
                var $text = $item.find('.title-text');
                var $indicator = $item.find('.title-indicator');
                
                if (i === index) {
                    $item.addClass('active');
                    $text.css('opacity', '1').css('font-weight', 'bold');
                    $indicator.css('background', '#ff6600');
                } else {
                    $item.removeClass('active');
                    $text.css('opacity', '0.7').css('font-weight', 'normal');
                    $indicator.css('background', 'transparent');
                }
            });
            
            setTimeout(function() {
                isTransitioning = false;
            }, 500);
        }
        
        // 下一张
        function nextSlide() {
            goToSlide(currentSlide + 1);
        }
        
        // 上一张
        function prevSlide() {
            goToSlide(currentSlide - 1);
        }
        
        // 自动播放
        function startAutoPlay() {
            autoPlayInterval = setInterval(nextSlide, 10000);
        }
        
        // 停止自动播放
        function stopAutoPlay() {
            clearInterval(autoPlayInterval);
        }
        
        // 绑定左右切换按钮事件（处理图片点击）
        $container.find('.carousel-next').click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            stopAutoPlay();
            nextSlide();
            startAutoPlay();
        });
        
        $container.find('.carousel-prev').click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            stopAutoPlay();
            prevSlide();
            startAutoPlay();
        });
        
        // 防止按钮内的图片链接跳转
        $container.find('.carousel-btn img, .carousel-btn a').click(function(e) {
            e.preventDefault();
            return false;
        });
        
        // 绑定标题点击事件
        $titleItems.click(function() {
            var slideIndex = parseInt($(this).attr('data-slide'));
            stopAutoPlay();
            goToSlide(slideIndex);
            startAutoPlay();
        });
        
        // 鼠标悬停在容器时暂停
        $container.hover(
            function() { stopAutoPlay(); },
            function() { startAutoPlay(); }
        );
        
        // 触摸滑动支持（移动设备）
        var touchStartX = 0;
        var touchEndX = 0;
        
        $container.on('touchstart', function(e) {
            touchStartX = e.originalEvent.changedTouches[0].screenX;
        });
        
        $container.on('touchend', function(e) {
            touchEndX = e.originalEvent.changedTouches[0].screenX;
            handleSwipe();
        });
        
        function handleSwipe() {
            if (touchEndX < touchStartX - 50) {
                stopAutoPlay();
                nextSlide();
                startAutoPlay();
            }
            if (touchEndX > touchStartX + 50) {
                stopAutoPlay();
                prevSlide();
                startAutoPlay();
            }
        }
        
        // 键盘控制
        $(document).keydown(function(e) {
            if ($container.is(':hover')) {
                if (e.keyCode === 37) { // 左箭头
                    stopAutoPlay();
                    prevSlide();
                    startAutoPlay();
                } else if (e.keyCode === 39) { // 右箭头
                    stopAutoPlay();
                    nextSlide();
                    startAutoPlay();
                }
            }
        });
        
        // 启动自动播放
        if (slideCount > 1) {
            startAutoPlay();
        }
    });
});

/* 悬浮目录 */
$(document).ready(function() {
    // 只在有目录的页面上执行
    if ($('.toc').length > 0) {
        // 创建侧边目录
        var $sidebar = $('<div id="toc-sidebar"><div id="toc-sidebar-trigger">展开目录</div><div id="toc-sidebar-content"></div></div>');
        $('body').append($sidebar);
        
        // 提取并修复目录内容
        var tocUl = $('<ul></ul>');
        
        // 避免重复的目录项
        var processedItems = new Set();
        
        // 从原始目录构建新目录
        $('.toc ul li').each(function() {
            var $link = $(this).find('a').first();
            var href = $link.attr('href');
            var $number = $link.find('.tocnumber').first();
            var $text = $link.find('.toctext').first();
            
            // 创建唯一标识符，避免重复添加
            var itemId = $number.text() + '-' + $text.text();
            
            if (!processedItems.has(itemId)) {
                processedItems.add(itemId);
                
                // 创建新的目录项
                var $li = $('<li></li>');
                var $newLink = $('').attr('href', href);
                
                // 如果有编号，则添加编号
                if ($number.length) {
                    $newLink.append($('<span class="tocnumber"></span>').text($number.text()));
                    $newLink.append(' ');
                }
                
                $newLink.append($('<span class="toctext"></span>').text($text.text()));
                $li.append($newLink);
                tocUl.append($li);
            }
        });
        
        $('#toc-sidebar-content').append(tocUl);
        
        // 点击展开/折叠事件处理
        $('#toc-sidebar-trigger').click(function() {
            $('#toc-sidebar').toggleClass('expanded');
            
            // 根据展开/折叠状态更改按钮文字
            if ($('#toc-sidebar').hasClass('expanded')) {
                $('#toc-sidebar-trigger').text('隐藏目录');
            } else {
                $('#toc-sidebar-trigger').text('展开目录');
            }
        });
    }
});

/* 卡牌悬浮 */
$(function() {
  // 初始化所有卡牌悬浮
  function initCardHoverElements() {
    $('.card-hover-container').each(function() {
      var $container = $(this);
      
      // 只初始化尚未处理的元素
      if ($container.data('initialized')) return;
      
      $container.data('initialized', true);
      
      // 获取卡牌数据
      var character = $container.data('character');
      var cardName = $container.data('card');
      var deckType = $container.data('deck') || '';
      var index = $container.data('index') || 0;
      var $popup = $container.find('.card-popup');
      
      // 预加载卡牌数据
      $container.on('mouseenter', function() {
        // 如果卡牌数据已经加载过，直接显示
        if ($popup.data('loaded')) {
          // 调整位置到右下方
          positionCardPopup($container);
          return;
        }
        
        // 加载卡牌数据
        var params = {
          action: 'parse',
          text: '{{#invoke:卡牌|main|' + character + '|' + cardName + '|' + deckType + '|' + index + '}}',
          prop: 'text',
          disablelimitreport: true,
          format: 'json'
        };
        
        $.ajax({
          url: mw.util.wikiScript('api'),
          data: params,
          dataType: 'json',
          success: function(data) {
            if (data && data.parse && data.parse.text) {
              var cardHtml = data.parse.text['*'];
              $popup.html(cardHtml).data('loaded', true);
              
              // 调整位置到右下方
              positionCardPopup($container);
            }
          },
          error: function() {
            $popup.html('<div style="color: #721c24;">无法加载卡牌数据</div>').data('loaded', true);
          }
        });
      });
    });
  }
  
  // 调整卡牌弹出位置到右下方
  function positionCardPopup($container) {
    var $popupContainer = $container.find('.card-popup-container');
    var containerWidth = $container.width();
    var windowWidth = $(window).width();
    var containerOffset = $container.offset();
    var rightSpace = windowWidth - containerOffset.left - containerWidth;
    
    // 重置位置
    $popupContainer.css({
      'left': 'auto',
      'right': 'auto',
      'top': '100%',
      'margin-top': '5px'
    });
    
    // 如果右侧空间足够，放在右下方
    if (rightSpace >= 168) { // 卡牌宽度大约168px
      $popupContainer.css({
        'left': '0',
      });
    } 
    // 如果右侧空间不够，但左侧空间足够，放在左下方
    else if (containerOffset.left >= 168) {
      $popupContainer.css({
        'right': '0',
      });
    }
    // 如果两侧都不够，尝试居中并确保完全可见
    else {
      var leftPosition = Math.max(0, Math.min(containerOffset.left - (168/2), windowWidth - 168));
      $popupContainer.css({
        'left': (leftPosition - containerOffset.left) + 'px'
      });
    }
  }
  
  // 初次加载页面时初始化
  $(document).ready(function() {
    initCardHoverElements();
  });
  
  // 使用 MutationObserver 监听 DOM 变化，处理动态加载的内容
  if (window.MutationObserver) {
    var observer = new MutationObserver(function(mutations) {
      var shouldInit = false;
      mutations.forEach(function(mutation) {
        if (mutation.addedNodes && mutation.addedNodes.length) {
          shouldInit = true;
        }
      });
      
      if (shouldInit) {
        initCardHoverElements();
      }
    });
    
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }
});