微件:Card：修订间差异

来自卡厄思梦境WIKI
跳转到导航 跳转到搜索
←上一编辑
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
328次编辑
功能测试
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
328次编辑
功能测试
 
（未显示同一用户的1个中间版本）
第1行： 第1行：
<noinclude>
<noinclude>
此Widget为卡牌显示提供交互功能，包括悬停动画、点击放大和闪光卡牌列表显示。
此Widget用于为卡牌添加交互功能。
使用方法：在页面底部添加 {{#widget:Card}}
[[分类:Widget]]
[[分类:Widget]]
</noinclude><includeonly>
</noinclude><includeonly>
第7行： 第8行：
.card-deck-trans {
.card-deck-trans {
     cursor: pointer;
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     transition: transform 0.2s ease;
}
}


.card-deck-trans:hover {
.card-deck-trans:hover {
     transform: translateY(-5px);
     transform: scale(1.05);
     filter: brightness(1.1);
     z-index: 10;
}
}


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


/* 模态框基础样式 */
/* 模态框样式 */
.card-modal-overlay {
.card-modal-overlay {
     display: none;
     display: none;
第27行： 第28行：
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.85);
     background-color: rgba(0, 0, 0, 0.8);
     z-index: 9999;
     z-index: 9999;
     justify-content: center;
     justify-content: center;
第47行： 第48行：
     cursor: pointer;
     cursor: pointer;
     z-index: 10001;
     z-index: 10001;
    transition: color 0.2s ease, transform 0.2s ease;
    font-family: Arial, sans-serif;
     line-height: 1;
     line-height: 1;
}
}
第54行： 第53行：
.card-modal-close:hover {
.card-modal-close:hover {
     color: #ff6b6b;
     color: #ff6b6b;
    transform: scale(1.2);
}
}


第63行： 第61行：
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
    gap: 20px;
}
}


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


.card-spark-button:hover {
.card-spark-button:hover {
     transform: scale(1.05);
     background-color: #5a5a5a;
    box-shadow: 0 6px 20px rgba(245, 175, 25, 0.6);
}
 
.card-spark-button:active {
    transform: scale(0.98);
}
}


第115行： 第104行：
     height: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     background-color: rgba(0, 0, 0, 0.9);
     z-index: 10002;
     z-index: 10000;
     justify-content: center;
     justify-content: center;
     align-items: flex-start;
     align-items: flex-start;
     overflow-y: auto;
     overflow-y: auto;
     padding: 60px 20px 20px;
     padding: 60px 20px 20px 20px;
    box-sizing: border-box;
}
}


第133行： 第123行：
     color: #fff;
     color: #fff;
     cursor: pointer;
     cursor: pointer;
     z-index: 10003;
     z-index: 10002;
    transition: color 0.2s ease, transform 0.2s ease;
    font-family: Arial, sans-serif;
     line-height: 1;
     line-height: 1;
}
}
第141行： 第129行：
.spark-modal-close:hover {
.spark-modal-close:hover {
     color: #ff6b6b;
     color: #ff6b6b;
    transform: scale(1.2);
}
}


/* 闪光卡牌列表容器 */
.spark-modal-content {
.spark-modal-content {
     display: flex;
     display: flex;
第151行： 第137行：
     gap: 20px;
     gap: 20px;
     max-width: 1200px;
     max-width: 1200px;
     padding: 20px;
}
 
.spark-modal-content .card-deck-trans {
     cursor: default;
    pointer-events: none;
}
 
.spark-modal-content .card-deck-trans:hover {
    transform: none;
}
}


第157行： 第151行：
     width: 100%;
     width: 100%;
     text-align: center;
     text-align: center;
     color: #f5af19;
     color: #ffd700;
     font-size: 28px;
     font-size: 24px;
    font-weight: bold;
     margin-bottom: 20px;
     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 {
.spark-loading {
     color: #fff;
     color: #fff;
     font-size: 20px;
     font-size: 18px;
    text-align: center;
    padding: 50px;
}
}
</style>


.spark-loading::after {
<div id="card-modal-overlay" class="card-modal-overlay">
     content: '';
     <span class="card-modal-close" id="card-modal-close">&times;</span>
     animation: dots 1.5s infinite;
     <div class="card-modal-content" id="card-modal-content"></div>
}
</div>


@keyframes dots {
<div id="spark-modal-overlay" class="spark-modal-overlay">
     0%, 20% { content: '.'; }
     <span class="spark-modal-close" id="spark-modal-close">&times;</span>
     40% { content: '..'; }
     <div class="spark-modal-content" id="spark-modal-content"></div>
    60%, 100% { content: '...'; }
</div>
}
</style>


<script>
<script>
第205行： 第176行：
     'use strict';
     'use strict';
      
      
     // 等待DOM加载完成
     function init() {
    if (document.readyState === 'loading') {
         var cardModal = document.getElementById('card-modal-overlay');
         document.addEventListener('DOMContentLoaded', initCardWidget);
         var cardModalContent = document.getElementById('card-modal-content');
    } else {
         var cardModalClose = document.getElementById('card-modal-close');
         initCardWidget();
         var sparkModal = document.getElementById('spark-modal-overlay');
    }
         var sparkModalContent = document.getElementById('spark-modal-content');
   
         var sparkModalClose = document.getElementById('spark-modal-close');
    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);
          
          
         // 创建闪光模态框
         function bindCardEvents() {
        var sparkModal = document.createElement('div');
            var cards = document.querySelectorAll('.card-deck-trans');
        sparkModal.className = 'spark-modal-overlay';
           
        sparkModal.id = 'cardSparkModal';
            cards.forEach(function(card) {
        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>';
                if (card.dataset.bound || card.closest('.spark-modal-content') || card.closest('.card-modal-content')) {
        document.body.appendChild(sparkModal);
                    return;
                }
               
                card.dataset.bound = 'true';
               
                card.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                   
                    var cardDeck = this.querySelector('.card-deck');
                    if (!cardDeck) return;
                   
                    var clonedCard = document.createElement('div');
                    clonedCard.className = 'card-modal-card';
                    clonedCard.innerHTML = '<div class="card-deck">' + cardDeck.innerHTML + '</div>';
                   
                    cardModalContent.innerHTML = '';
                    cardModalContent.appendChild(clonedCard);
                   
                    var sparkEnable = this.dataset.sparkEnable;
                    var sort = this.dataset.sort;
                    var cardId = this.dataset.cardId;
                   
                    if (sparkEnable === '1' && sort !== '中立卡牌' && sort !== '怪物卡牌' && cardId) {
                        var sparkButton = document.createElement('button');
                        sparkButton.className = 'card-spark-button';
                        sparkButton.textContent = '闪光';
                        sparkButton.addEventListener('click', function(e) {
                            e.stopPropagation();
                            openSparkModal(cardId);
                        });
                        cardModalContent.appendChild(sparkButton);
                    }
                   
                    cardModal.classList.add('active');
                    document.body.style.overflow = 'hidden';
                });
            });
        }
          
          
         // 获取所有卡牌元素
         function openSparkModal(cardId) {
        var cards = document.querySelectorAll('.card-deck-trans');
             sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div class="spark-loading">加载中...</div>';
       
            sparkModal.classList.add('active');
        cards.forEach(function(card) {
             // 跳过闪光列表中的卡牌
            if (card.closest('.spark-card-list') || card.closest('.card-modal-content')) {
                return;
            }
              
              
             card.addEventListener('click', function(e) {
             var apiUrl = mw.config.get('wgScriptPath') + '/api.php';
                 e.preventDefault();
            var params = new URLSearchParams({
                 e.stopPropagation();
                action: 'parse',
                 openCardModal(this);
                text: '{{Card/display/spark|' + cardId + '}}',
                 prop: 'text',
                 format: 'json',
                 contentmodel: 'wikitext'
             });
             });
           
            fetch(apiUrl + '?' + params.toString())
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (data.parse && data.parse.text) {
                        var html = data.parse.text['*'];
                        if (html.trim() === '' || html.indexOf('card-deck-trans') === -1) {
                            sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div style="color: #fff;">暂无闪光卡牌</div>';
                        } else {
                            sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div>' + html;
                        }
                    } else {
                        sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div style="color: #fff;">暂无闪光卡牌</div>';
                    }
                })
                .catch(function(error) {
                    sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div style="color: #ff6b6b;">加载失败，请重试</div>';
                    console.error('Error loading spark cards:', error);
                });
        }
       
        cardModalClose.addEventListener('click', function() {
            cardModal.classList.remove('active');
            sparkModal.classList.remove('active');
            document.body.style.overflow = '';
         });
         });
          
          
         // 关闭主模态框
         sparkModalClose.addEventListener('click', function() {
        mainModal.querySelector('.card-modal-close').addEventListener('click', function() {
             sparkModal.classList.remove('active');
             closeMainModal();
         });
         });
          
          
         mainModal.addEventListener('click', function(e) {
         cardModal.addEventListener('click', function(e) {
             if (e.target === mainModal) {
             if (e.target === cardModal) {
                 closeMainModal();
                 cardModal.classList.remove('active');
                sparkModal.classList.remove('active');
                document.body.style.overflow = '';
             }
             }
        });
       
        // 关闭闪光模态框
        sparkModal.querySelector('.spark-modal-close').addEventListener('click', function() {
            closeSparkModal();
         });
         });
          
          
         sparkModal.addEventListener('click', function(e) {
         sparkModal.addEventListener('click', function(e) {
             if (e.target === sparkModal) {
             if (e.target === sparkModal) {
                 closeSparkModal();
                 sparkModal.classList.remove('active');
             }
             }
         });
         });
          
          
        // ESC键关闭
         document.addEventListener('keydown', function(e) {
         document.addEventListener('keydown', function(e) {
             if (e.key === 'Escape') {
             if (e.key === 'Escape') {
                 if (sparkModal.classList.contains('active')) {
                 if (sparkModal.classList.contains('active')) {
                     closeSparkModal();
                     sparkModal.classList.remove('active');
                 } else if (mainModal.classList.contains('active')) {
                 } else if (cardModal.classList.contains('active')) {
                     closeMainModal();
                     cardModal.classList.remove('active');
                    document.body.style.overflow = '';
                 }
                 }
             }
             }
         });
         });
    }
   
    function openCardModal(cardElement) {
        var modal = document.getElementById('cardMainModal');
        var content = modal.querySelector('.card-modal-content');
          
          
         // 克隆卡牌
         bindCardEvents();
        var cardClone = cardElement.cloneNode(true);
          
          
        // 创建放大容器
         var observer = new MutationObserver(function() {
         var enlargedContainer = document.createElement('div');
            bindCardEvents();
         enlargedContainer.className = 'card-modal-card';
         });
          
          
         // 获取内部的card-deck
         observer.observe(document.body, {
        var cardDeck = cardClone.querySelector('.card-deck');
             childList: true,
        if (cardDeck) {
             subtree: true
            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() {
     if (document.readyState === 'loading') {
        var modal = document.getElementById('cardMainModal');
         document.addEventListener('DOMContentLoaded', init);
        modal.classList.remove('active');
     } else {
        document.body.style.overflow = '';
         init();
    }
   
    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>
</script>
</includeonly>
</includeonly>

2026年1月17日 (六) 17:01的最新版本

此Widget用于为卡牌添加交互功能。 使用方法：在页面底部添加

×
×

检索自“http://dovewiki.me/index.php?title=微件:Card&oldid=825”