微件:Card：修订间差异

来自卡厄思梦境WIKI
跳转到导航 跳转到搜索
←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
328次编辑
功能测试
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
328次编辑
功能测试
第1行： 第1行：
<noinclude>
<noinclude>
此Widget为卡牌显示提供交互功能，包括悬停动画、点击放大和闪光卡牌列表显示。
此Widget用于为卡牌添加交互功能。
使用方法：在页面底部添加 {{#widget:Card}}
[[分类:Widget]]
[[分类:Widget]]
</noinclude><includeonly>
</noinclude><includeonly>
第11行： 第12行：


.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;
    transition: color 0.2s ease;
}
}


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


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


第84行： 第82行：
/* 闪光按钮 */
/* 闪光按钮 */
.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行： 第105行：
     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行： 第124行：
     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;
    transition: color 0.2s ease;
}
}


.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行： 第139行：
     gap: 20px;
     gap: 20px;
     max-width: 1200px;
     max-width: 1200px;
    padding: 20px;
}
}


.spark-modal-content .card-deck-trans {
    cursor: default;
}
.spark-modal-content .card-deck-trans:hover {
    transform: none;
}
/* 闪光模态框标题 */
.spark-modal-title {
.spark-modal-title {
     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">
     60%, 100% { content: '...'; }
     </div>
}
</div>
</style>


<script>
<script>
第206行： 第182行：
      
      
     // 等待DOM加载完成
     // 等待DOM加载完成
     if (document.readyState === 'loading') {
     function init() {
         document.addEventListener('DOMContentLoaded', initCardWidget);
         var cardModal = document.getElementById('card-modal-overlay');
    } else {
         var cardModalContent = document.getElementById('card-modal-content');
         initCardWidget();
         var cardModalClose = document.getElementById('card-modal-close');
    }
         var sparkModal = document.getElementById('spark-modal-overlay');
   
         var sparkModalContent = document.getElementById('spark-modal-content');
    function initCardWidget() {
         var sparkModalClose = document.getElementById('spark-modal-close');
        // 创建主模态框
         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');
         function bindCardEvents() {
        sparkModal.className = 'spark-modal-overlay';
            var cards = document.querySelectorAll('.card-deck-trans');
        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>';
            cards.forEach(function(card) {
        document.body.appendChild(sparkModal);
                // 跳过已绑定事件的卡牌和模态框内的卡牌
                if (card.dataset.bound || card.closest('.spark-modal-content')) {
                    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 = this.cloneNode(true);
                    clonedCard.classList.add('card-modal-card');
                    clonedCard.classList.remove('card-deck-trans');
                    clonedCard.style.width = '270px';
                    clonedCard.style.height = '384px';
                    clonedCard.style.cursor = 'default';
                   
                    var clonedDeck = clonedCard.querySelector('.card-deck');
                    if (clonedDeck) {
                        clonedDeck.style.transform = 'scale(0.6)';
                    }
                   
                    // 清空并添加内容
                    cardModalContent.innerHTML = '';
                   
                    var cardContainer = document.createElement('div');
                    cardContainer.className = 'card-modal-card-container';
                    cardContainer.appendChild(clonedCard);
                    cardModalContent.appendChild(cardContainer);
                   
                    // 检查是否显示闪光按钮
                    var sparkEnable = this.dataset.sparkEnable;
                    var sort = this.dataset.sort;
                    var cardId = this.dataset.cardId;
                   
                    // 判断条件：spark_enable=1 且 sort不是中立卡牌/怪物卡牌
                    if (sparkEnable === '1' && sort !== '中立卡牌' && sort !== '怪物卡牌') {
                        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';
                });
            });
        }
          
          
         // 获取所有卡牌元素
         // 打开闪光卡牌模态框
         var cards = document.querySelectorAll('.card-deck-trans');
         function openSparkModal(cardId) {
            sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div class="spark-loading">加载中...</div>';
            sparkModal.classList.add('active');
           
            // 使用MediaWiki API加载闪光卡牌
            var apiUrl = mw.config.get('wgScriptPath') + '/api.php';
            var params = {
                action: 'parse',
                text: '{{Card/display/spark|' + cardId + '}}',
                prop: 'text',
                format: 'json',
                contentmodel: 'wikitext'
            };
           
            var url = apiUrl + '?' + Object.keys(params).map(function(key) {
                return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
            }).join('&');
           
            fetch(url)
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (data.parse && data.parse.text) {
                        var html = data.parse.text['*'];
                        sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div>' + html;
                       
                        // 为新加载的卡牌禁用点击事件
                        var sparkCards = sparkModalContent.querySelectorAll('.card-deck-trans');
                        sparkCards.forEach(function(card) {
                            card.style.cursor = 'default';
                            card.addEventListener('click', function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                            });
                        });
                    } 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);
                });
        }
          
          
         cards.forEach(function(card) {
         // 关闭卡牌模态框
            // 跳过闪光列表中的卡牌
        cardModalClose.addEventListener('click', function() {
            if (card.closest('.spark-card-list') || card.closest('.card-modal-content')) {
            cardModal.classList.remove('active');
                return;
            sparkModal.classList.remove('active');
            }
             document.body.style.overflow = '';
           
            card.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                openCardModal(this);
             });
         });
         });
          
          
         // 关闭主模态框
         // 关闭闪光模态框
         mainModal.querySelector('.card-modal-close').addEventListener('click', function() {
         sparkModalClose.addEventListener('click', function() {
             closeMainModal();
             sparkModal.classList.remove('active');
         });
         });
          
          
         mainModal.addEventListener('click', function(e) {
         // 点击模态框背景关闭
             if (e.target === mainModal) {
        cardModal.addEventListener('click', function(e) {
                 closeMainModal();
             if (e.target === cardModal) {
                 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键关闭
         // 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');
          
          
         // 克隆卡牌
         // 初始化绑定事件
         var cardClone = cardElement.cloneNode(true);
         bindCardEvents();
          
          
         // 创建放大容器
         // 监听DOM变化，为动态加载的卡牌绑定事件
         var enlargedContainer = document.createElement('div');
         var observer = new MutationObserver(function(mutations) {
         enlargedContainer.className = 'card-modal-card';
            bindCardEvents();
         });
          
          
         // 获取内部的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() {
     // 页面加载完成后初始化
        var modal = document.getElementById('cardMainModal');
    if (document.readyState === 'loading') {
        modal.classList.remove('active');
         document.addEventListener('DOMContentLoaded', init);
        document.body.style.overflow = '';
     } else {
    }
         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日 (六) 16:52的版本

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

×
×

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