微件:配队模拟器

<script> (function() {

   // 等待DOM加载完成
   function initTeamSimulator() {
       // 保存当前选择的战斗员名称
       var currentCharacterName = null;
       var selectedCards = {}; // 记录每个位置的卡牌状态
       
       // 点击角色槽位显示选择窗口
       document.getElementById('character-slot').addEventListener('click', function() {
           document.getElementById('character-modal').style.display = 'block';
       });
       
       // 关闭角色选择窗口
       document.getElementById('close-character-modal').addEventListener('click', function() {
           document.getElementById('character-modal').style.display = 'none';
       });
       
       // 点击遮罩层关闭窗口
       document.getElementById('character-modal').addEventListener('click', function(e) {
           if (e.target === this) {
               this.style.display = 'none';
           }
       });
       
       // 加载战斗员卡牌
       function loadCharacterCards(characterName) {
           if (!characterName) {
               console.error('战斗员名称为空');
               return;
           }
           
           currentCharacterName = characterName;
           console.log('加载战斗员卡牌:', characterName);
           
           // 清空卡组区域并显示加载中
           var deckArea = document.getElementById('deck-area');

deckArea.innerHTML = '

加载中...

';

           // 通过API调用模块获取卡牌HTML
           var apiUrl = mw.util.wikiScript('api');
           var params = {
               action: 'parse',
               format: 'json',
               text: '错误: 找不到模块 "Module:卡牌/' + characterName + '"',
               contentmodel: 'wikitext',
               disablelimitreport: true,
               wrapoutputclass: 
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.parse && data.parse.text) {
                       deckArea.innerHTML = data.parse.text['*'];
                       deckArea.style.border = 'none';
                       deckArea.style.padding = '10px';
                       
                       // 重置selectedCards
                       selectedCards = {};
                       
                       // 为每张卡牌添加功能
                       setTimeout(function() {
                           initializeCardFeatures();
                       }, 100);
                   } else {

deckArea.innerHTML = '

加载卡牌失败

';

                   }
               })
               .catch(error => {
                   console.error('加载卡牌失败:', error);

deckArea.innerHTML = '

加载卡牌出错：' + error.message + '

';

               });
       }
       
       // 初始化卡牌功能
       function initializeCardFeatures() {
           var wrappers = document.querySelectorAll('#deck-area .deck-card-wrapper');
           
           wrappers.forEach(function(wrapper, index) {
               var card = wrapper.querySelector('.card-small-wrapper');
               if (!card) return;
               
               // 记录原始状态
               selectedCards[index] = {
                   module: wrapper.getAttribute('data-module') || currentCharacterName,
                   cardName: wrapper.getAttribute('data-card'),
                   variantType: null,
                   variantParam: null,
                   variantIndex: null
               };
               
               // 添加删除按钮
               if (!card.querySelector('.card-delete-btn')) {
                   var deleteBtn = document.createElement('div');
                   deleteBtn.className = 'card-delete-btn';
                   deleteBtn.innerHTML = '×';
                   deleteBtn.style.cssText = 'position:absolute;top:5px;right:5px;width:20px;height:20px;background:rgba(255,0,0,0.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:16px;line-height:1;font-weight:bold;';
                   
                   deleteBtn.addEventListener('click', function(e) {
                       e.stopPropagation();
                       wrapper.remove();
                       delete selectedCards[index];
                   });
                   
                   card.style.position = 'relative';
                   card.appendChild(deleteBtn);
               }
               
               // 监听卡牌上的按钮点击
               setupCardModalListeners(card, index);
           });
       }
       
       // 设置卡牌模态框的监听器
       function setupCardModalListeners(cardElement, cardIndex) {
           // 当点击卡牌时，会自动打开模态框，我们需要监听模态框内的按钮
           var observer = new MutationObserver(function(mutations) {
               mutations.forEach(function(mutation) {
                   if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                       var modal = document.querySelector('.card-modal[style*="display: block"]');
                       if (modal && !modal.hasAttribute('data-enhanced')) {
                           modal.setAttribute('data-enhanced', 'true');
                           enhanceCardModal(modal, cardIndex);
                       }
                   }
               });
           });
           
           // 观察所有模态框的显示状态变化
           document.querySelectorAll('.card-modal').forEach(function(modal) {
               observer.observe(modal, { attributes: true, attributeFilter: ['style'] });
           });
       }
       
       // 增强卡牌模态框
       function enhanceCardModal(modal, cardIndex) {
           // 找到灵光一闪视图中的变体卡牌
           var inspirationView = modal.querySelector('.inspiration-view');
           if (inspirationView) {
               var variantCards = inspirationView.querySelectorAll('.inspiration-variant-card');
               variantCards.forEach(function(variantCard, variantIndex) {
                   // 为每个变体卡牌添加"选择"按钮
                   if (!variantCard.querySelector('.select-variant-btn')) {
                       var selectBtn = document.createElement('div');
                       selectBtn.className = 'select-variant-btn';
                       selectBtn.innerHTML = '选择此卡牌';
                       selectBtn.style.cssText = 'margin-top:10px;padding:8px 15px;background:linear-gradient(135deg,#28a745 0%,#218838 100%);color:white;font-size:14px;font-weight:bold;border-radius:6px;cursor:pointer;text-align:center;';
                       
                       selectBtn.addEventListener('click', function() {
                           replaceCard(cardIndex, '灵光一闪', variantIndex + 1);
                           // 关闭模态框
                           modal.style.display = 'none';
                       });
                       
                       variantCard.parentElement.appendChild(selectBtn);
                   }
               });
           }
           
           // 找到神光一闪视图中的变体卡牌
           var godView = modal.querySelector('.god-inspiration-view');
           if (godView) {
               var godGroups = godView.querySelectorAll('.god-group');
               godGroups.forEach(function(group) {
                   var groupName = group.querySelector('div[style*="color:#ffd36a"]').textContent.trim();
                   var godVariants = group.querySelectorAll('.god-variant-card-inner');
                   
                   godVariants.forEach(function(variantCard, variantIndex) {
                       if (!variantCard.parentElement.querySelector('.select-variant-btn')) {
                           var selectBtn = document.createElement('div');
                           selectBtn.className = 'select-variant-btn';
                           selectBtn.innerHTML = '选择';
                           selectBtn.style.cssText = 'margin-top:5px;padding:6px 12px;background:linear-gradient(135deg,#28a745 0%,#218838 100%);color:white;font-size:12px;font-weight:bold;border-radius:4px;cursor:pointer;text-align:center;';
                           
                           selectBtn.addEventListener('click', function() {
                               replaceCard(cardIndex, '神光一闪', groupName, variantIndex + 1);
                               // 关闭模态框
                               modal.style.display = 'none';
                           });
                           
                           variantCard.parentElement.appendChild(selectBtn);
                       }
                   });
               });
           }
       }
       
       // 替换卡牌
       function replaceCard(cardIndex, variantType, param1, param2) {
           var cardData = selectedCards[cardIndex];
           if (!cardData) return;
           
           var wrapper = document.querySelectorAll('#deck-area .deck-card-wrapper')[cardIndex];
           if (!wrapper) return;
           
           console.log('替换卡牌:', cardData.cardName, variantType, param1, param2);
           
           // 更新记录
           if (variantType) {
               cardData.variantType = variantType;
               cardData.variantParam = param1;
               cardData.variantIndex = param2;
           } else {
               cardData.variantType = null;
               cardData.variantParam = null;
               cardData.variantIndex = null;
           }
           
           // 显示加载中

wrapper.innerHTML = '

加载中...

';

           // 构建invoke调用
           var invokeText = '错误: 找不到模块 "Module:卡牌/' + cardData.module + '"';
           
           // 通过API获取新卡牌HTML
           var apiUrl = mw.util.wikiScript('api');
           var params = {
               action: 'parse',
               format: 'json',
               text: invokeText,
               contentmodel: 'wikitext',
               disablelimitreport: true
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.parse && data.parse.text) {
                       wrapper.innerHTML = data.parse.text['*'];
                       
                       // 重新添加删除按钮和事件
                       setTimeout(function() {
                           var newCard = wrapper.querySelector('.card-small-wrapper');
                           if (newCard) {
                               // 添加删除按钮
                               var deleteBtn = document.createElement('div');
                               deleteBtn.className = 'card-delete-btn';
                               deleteBtn.innerHTML = '×';
                               deleteBtn.style.cssText = 'position:absolute;top:5px;right:5px;width:20px;height:20px;background:rgba(255,0,0,0.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:16px;line-height:1;font-weight:bold;';
                               
                               deleteBtn.addEventListener('click', function(e) {
                                   e.stopPropagation();
                                   wrapper.remove();
                                   delete selectedCards[cardIndex];
                               });
                               
                               newCard.style.position = 'relative';
                               newCard.appendChild(deleteBtn);
                               
                               // 重新设置监听器
                               setupCardModalListeners(newCard, cardIndex);
                           }
                       }, 100);
                   }
               })
               .catch(error => {
                   console.error('替换卡牌失败:', error);

wrapper.innerHTML = '

替换失败

';

               });
       }
       
       // 选择角色 - 使用事件委托
       document.getElementById('character-list').addEventListener('click', function(e) {
           var characterOption = e.target.closest('.character-option');
           if (characterOption) {
               // 获取战斗员名称 - 尝试多种方式
               var characterName = null;
               
               // 方式1: 从data属性获取
               characterName = characterOption.getAttribute('data-character-name') || 
                              characterOption.getAttribute('data-name') ||
                              characterOption.getAttribute('title');
               
               // 方式2: 从子元素获取
               if (!characterName) {
                   var nameElement = characterOption.querySelector('.character-name, [class*="name"], span, div');
                   if (nameElement && nameElement.textContent) {
                       characterName = nameElement.textContent.trim();
                   }
               }
               
               console.log('选中的战斗员:', characterName);
               
               // 克隆整个角色卡片
               var clonedCard = characterOption.cloneNode(true);
               clonedCard.classList.remove('character-option');
               clonedCard.style.cursor = 'default';
               
               // 更新槽位
               var characterSlot = document.getElementById('character-slot');
               characterSlot.innerHTML = ;
               characterSlot.appendChild(clonedCard);
               characterSlot.style.border = 'none';
               characterSlot.style.padding = '0';
               
               // 关闭选择窗口
               document.getElementById('character-modal').style.display = 'none';
               
               // 加载该战斗员的卡牌
               if (characterName) {
                   loadCharacterCards(characterName);
               }
           }
       });
       
       // 伙伴选择相关代码保持不变...
   }
   
   // 确保DOM加载完成后执行
   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initTeamSimulator);
   } else {
       initTeamSimulator();
   }

})(); </script>

<style> .character-option:hover {

   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}

.card-delete-btn:hover {

   background: rgba(255,0,0,1) !important;
   transform: scale(1.1);

}

.select-variant-btn:hover {

   opacity: 0.9;
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0,0,0,0.3);

}

1. character-slot .character-option:hover {

   transform: none !important;
   box-shadow: none !important;

}

.card-delete-btn:hover {

   background: rgba(255,0,0,1) !important;
   transform: scale(1.1);

}

.deck-card-wrapper {

   position: relative;
   display: inline-block;

} </style>