查看“︁微件:Card”︁的源代码

<noinclude>
此Widget为卡牌显示提供交互功能，包括悬停动画、点击放大和闪光卡牌列表显示。
[[分类:Widget]]
</noinclude><includeonly>
<style>
/* 卡牌悬停和点击动画 */
.card-deck-trans {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-deck-trans:hover {
    transform: translateY(-5px);
    filter: brightness(1.1);
}

.card-deck-trans:active {
    transform: translateY(-2px) scale(0.98);
}

/* 模态框基础样式 */
.card-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.card-modal-overlay.active {
    display: flex;
}

/* 关闭按钮 */
.card-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.2s ease, transform 0.2s ease;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.card-modal-close:hover {
    color: #ff6b6b;
    transform: scale(1.2);
}

/* 模态框内容容器 */
.card-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* 放大后的卡牌容器 */
.card-modal-card {
    position: relative;
    width: 270px;
    height: 384px;
    display: inline-block;
}

.card-modal-card .card-deck {
    position: absolute;
    width: 450px;
    height: 640px;
    transform: scale(0.6);
    transform-origin: top left;
}

/* 闪光按钮 */
.card-spark-button {
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 175, 25, 0.4);
    margin-top: 10px;
}

.card-spark-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(245, 175, 25, 0.6);
}

.card-spark-button:active {
    transform: scale(0.98);
}

/* 闪光卡牌模态框 */
.spark-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10002;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 60px 20px 20px;
}

.spark-modal-overlay.active {
    display: flex;
}

.spark-modal-close {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 10003;
    transition: color 0.2s ease, transform 0.2s ease;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.spark-modal-close:hover {
    color: #ff6b6b;
    transform: scale(1.2);
}

/* 闪光卡牌列表容器 */
.spark-modal-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    padding: 20px;
}

.spark-modal-title {
    width: 100%;
    text-align: center;
    color: #f5af19;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(245, 175, 25, 0.5);
}

/* 闪光卡牌列表内的卡牌样式 */
.spark-card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.spark-card-list .card-deck-trans {
    cursor: default;
}

.spark-card-list .card-deck-trans:hover {
    transform: none;
    filter: none;
}

/* 加载动画 */
.spark-loading {
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 50px;
}

.spark-loading::after {
    content: '';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}
</style>

<script>
(function() {
    'use strict';
    
    // 等待DOM加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCardWidget);
    } else {
        initCardWidget();
    }
    
    function initCardWidget() {
        // 创建主模态框
        var mainModal = document.createElement('div');
        mainModal.className = 'card-modal-overlay';
        mainModal.id = 'cardMainModal';
        mainModal.innerHTML = '<span class="card-modal-close">&times;</span><div class="card-modal-content"></div>';
        document.body.appendChild(mainModal);
        
        // 创建闪光模态框
        var sparkModal = document.createElement('div');
        sparkModal.className = 'spark-modal-overlay';
        sparkModal.id = 'cardSparkModal';
        sparkModal.innerHTML = '<span class="spark-modal-close">&times;</span><div class="spark-modal-content"><div class="spark-modal-title">✨ 闪光卡牌 ✨</div><div class="spark-card-container"></div></div>';
        document.body.appendChild(sparkModal);
        
        // 获取所有卡牌元素
        var cards = document.querySelectorAll('.card-deck-trans');
        
        cards.forEach(function(card) {
            // 跳过闪光列表中的卡牌
            if (card.closest('.spark-card-list') || card.closest('.card-modal-content')) {
                return;
            }
            
            card.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                openCardModal(this);
            });
        });
        
        // 关闭主模态框
        mainModal.querySelector('.card-modal-close').addEventListener('click', function() {
            closeMainModal();
        });
        
        mainModal.addEventListener('click', function(e) {
            if (e.target === mainModal) {
                closeMainModal();
            }
        });
        
        // 关闭闪光模态框
        sparkModal.querySelector('.spark-modal-close').addEventListener('click', function() {
            closeSparkModal();
        });
        
        sparkModal.addEventListener('click', function(e) {
            if (e.target === sparkModal) {
                closeSparkModal();
            }
        });
        
        // ESC键关闭
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                if (sparkModal.classList.contains('active')) {
                    closeSparkModal();
                } else if (mainModal.classList.contains('active')) {
                    closeMainModal();
                }
            }
        });
    }
    
    function openCardModal(cardElement) {
        var modal = document.getElementById('cardMainModal');
        var content = modal.querySelector('.card-modal-content');
        
        // 克隆卡牌
        var cardClone = cardElement.cloneNode(true);
        
        // 创建放大容器
        var enlargedContainer = document.createElement('div');
        enlargedContainer.className = 'card-modal-card';
        
        // 获取内部的card-deck
        var cardDeck = cardClone.querySelector('.card-deck');
        if (cardDeck) {
            enlargedContainer.appendChild(cardDeck);
        } else {
            enlargedContainer.appendChild(cardClone);
        }
        
        // 清空并添加新内容
        content.innerHTML = '';
        content.appendChild(enlargedContainer);
        
        // 检查是否需要显示闪光按钮
        var sparkEnable = cardElement.getAttribute('data-spark-enable');
        var sortType = cardElement.getAttribute('data-sort');
        
        // 如果没有data属性，尝试从其他地方获取
        if (!sparkEnable || !sortType) {
            // 尝试从页面数据或其他来源获取
            var cardData = getCardDataFromElement(cardElement);
            sparkEnable = cardData.sparkEnable;
            sortType = cardData.sort;
        }
        
        // 判断是否显示闪光按钮
        if (sparkEnable === '1' && sortType !== '中立卡牌' && sortType !== '怪物卡牌') {
            var sparkButton = document.createElement('button');
            sparkButton.className = 'card-spark-button';
            sparkButton.innerHTML = '✨ 闪光 ✨';
            sparkButton.addEventListener('click', function() {
                openSparkModal(cardElement);
            });
            content.appendChild(sparkButton);
        }
        
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
    
    function closeMainModal() {
        var modal = document.getElementById('cardMainModal');
        modal.classList.remove('active');
        document.body.style.overflow = '';
    }
    
    function openSparkModal(cardElement) {
        var modal = document.getElementById('cardSparkModal');
        var container = modal.querySelector('.spark-card-container');
        
        // 显示加载状态
        container.innerHTML = '<div class="spark-loading">正在加载闪光卡牌</div>';
        
        modal.classList.add('active');
        
        // 获取卡牌ID
        var cardId = cardElement.getAttribute('data-card-id');
        if (!cardId) {
            cardId = getCardIdFromElement(cardElement);
        }
        
        if (cardId) {
            // 通过API加载闪光卡牌列表
            loadSparkCards(cardId, container);
        } else {
            container.innerHTML = '<div style="color: #fff; text-align: center; padding: 50px;">无法获取卡牌信息</div>';
        }
    }
    
    function closeSparkModal() {
        var modal = document.getElementById('cardSparkModal');
        modal.classList.remove('active');
    }
    
    function getCardDataFromElement(element) {
        // 尝试从元素的class或子元素中推断数据
        var data = {
            sparkEnable: '0',
            sort: ''
        };
        
        // 检查是否有闪光标记
        if (element.querySelector('.card-spark-flag')) {
            // 有闪光图标意味着spark_flag为真，但我们需要spark_enable
        }
        
        // 检查是否有禁忌装饰
        if (element.querySelector('.card-deco-taboo')) {
            data.sort = '禁忌卡牌';
        }
        
        // 检查职业图标来判断是否为中立卡牌
        if (element.querySelector('.card-job1') && element.querySelector('.card-job2')) {
            data.sort = '中立卡牌';
        }
        
        return data;
    }
    
    function getCardIdFromElement(element) {
        // 尝试从图片名称获取卡牌ID
        var artImg = element.querySelector('.card-art img');
        if (artImg) {
            var src = artImg.getAttribute('src') || '';
            var match = src.match(/\/([^\/]+)\.png/);
            if (match) {
                return match[1];
            }
        }
        return null;
    }
    
    function loadSparkCards(cardId, container) {
        // 使用MediaWiki API进行解析
        var api = mw.config.get('wgScriptPath') + '/api.php';
        var wikitext = '{{Card/display/spark|' + cardId + '}}';
        
        fetch(api + '?action=parse&text=' + encodeURIComponent(wikitext) + '&contentmodel=wikitext&format=json&disablelimitreport=1', {
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            }
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            if (data.parse && data.parse.text) {
                var html = data.parse.text['*'];
                container.innerHTML = html;
                
                // 如果没有卡牌
                if (!container.querySelector('.card-deck-trans')) {
                    container.innerHTML = '<div style="color: #fff; text-align: center; padding: 50px;">暂无闪光卡牌</div>';
                }
            } else {
                container.innerHTML = '<div style="color: #fff; text-align: center; padding: 50px;">加载失败，请重试</div>';
            }
        })
        .catch(function(error) {
            console.error('加载闪光卡牌失败:', error);
            container.innerHTML = '<div style="color: #fff; text-align: center; padding: 50px;">加载失败，请重试</div>';
        });
    }
})();
</script>
</includeonly>