微件:配队模拟器

<script> (function() {

   // 等待DOM加载完成
   function initTeamSimulator() {
       // 保存当前选择的战斗员名称
       var currentCharacterName = null;
       
       // 点击角色槽位显示选择窗口
       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: 'expandtemplates',
               format: 'json',
               text: '错误: 找不到模块 "Module:卡牌/' + characterName + '"',
               prop: 'wikitext'
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.expandtemplates && data.expandtemplates.wikitext) {
                       deckArea.innerHTML = data.expandtemplates.wikitext;
                       deckArea.style.border = 'none';
                       deckArea.style.padding = '10px';
                       
                       // 为每张卡牌添加删除按钮
                       setTimeout(function() {
                           addDeleteButtons();
                           addCardClickEvents();
                       }, 100);
                   } else {

deckArea.innerHTML = '

加载卡牌失败

';

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

deckArea.innerHTML = '

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

';

               });
       }
       
       // 为卡牌添加删除按钮
       function addDeleteButtons() {
           var cards = document.querySelectorAll('#deck-area .card-small-wrapper');
           console.log('找到卡牌数量:', cards.length);
           
           cards.forEach(function(card) {
               // 检查是否已有删除按钮
               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();
                       // 删除整个卡牌包装器
                       var wrapper = card.closest('.deck-card-wrapper');
                       if (wrapper) {
                           wrapper.remove();
                       } else {
                           card.remove();
                       }
                   });
                   
                   card.style.position = 'relative';
                   card.appendChild(deleteBtn);
               }
           });
       }
       
       // 为卡牌添加点击事件（替换为灵光/神光一闪）
       function addCardClickEvents() {
           var cards = document.querySelectorAll('#deck-area .card-small-wrapper');
           
           cards.forEach(function(card) {
               card.style.cursor = 'pointer';
               
               card.addEventListener('click', function(e) {
                   // 如果点击的是删除按钮，不触发替换
                   if (e.target.classList.contains('card-delete-btn')) {
                       return;
                   }
                   
                   // 获取卡牌信息
                   var wrapper = this.closest('.deck-card-wrapper');
                   if (wrapper) {
                       var module = wrapper.getAttribute('data-module');
                       var cardName = wrapper.getAttribute('data-card');
                       if (module && cardName) {
                           showVariantSelection(wrapper, module, cardName);
                       }
                   }
               });
           });
       }
       
       // 显示变体选择弹窗
       function showVariantSelection(cardWrapper, module, cardName) {
           // 创建选择弹窗
           var modal = document.createElement('div');
           modal.className = 'variant-modal';
           modal.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;display:flex;align-items:center;justify-content:center;';
           
           var modalContent = document.createElement('div');
           modalContent.style.cssText = 'background:white;padding:20px;border-radius:10px;max-width:500px;';
           
           modalContent.innerHTML = `

选择卡牌变体

卡牌: ${cardName}

                   <button class="variant-btn" data-type="original" style="padding:10px 20px;background:#007bff;color:white;border:none;border-radius:5px;cursor:pointer;">保持原始卡牌</button>
                   <button class="variant-btn" data-type="inspiration" style="padding:10px 20px;background:#28a745;color:white;border:none;border-radius:5px;cursor:pointer;">替换为灵光一闪</button>
                   <button class="variant-btn" data-type="god" style="padding:10px 20px;background:#ffc107;color:black;border:none;border-radius:5px;cursor:pointer;">替换为神光一闪</button>

               <button class="close-modal" style="margin-top:20px;padding:10px 20px;background:#dc3545;color:white;border:none;border-radius:5px;cursor:pointer;width:100%;">关闭</button>
           `;
           
           modal.appendChild(modalContent);
           document.body.appendChild(modal);
           
           // 绑定事件
           modalContent.querySelector('.close-modal').onclick = function() {
               modal.remove();
           };
           
           modalContent.querySelectorAll('.variant-btn').forEach(function(btn) {
               btn.onclick = function() {
                   var type = this.getAttribute('data-type');
                   if (type === 'original') {
                       modal.remove();
                   } else if (type === 'inspiration') {
                       // 简化版：直接替换为第一个灵光一闪变体
                       replaceCardWithVariant(cardWrapper, module, cardName, '灵光一闪', '1');
                       modal.remove();
                   } else if (type === 'god') {
                       // 简化版：替换为默认的神光一闪变体
                       replaceCardWithVariant(cardWrapper, module, cardName, '神光一闪', 'circen', '1');
                       modal.remove();
                   }
               };
           });
           
           // 点击背景关闭
           modal.onclick = function(e) {
               if (e.target === modal) {
                   modal.remove();
               }
           };
       }
       
       // 替换卡牌为变体
       function replaceCardWithVariant(cardWrapper, module, cardName, variantType, param1, param2) {
           console.log('替换卡牌:', module, cardName, variantType, param1, param2);
           
           // 显示加载中

cardWrapper.innerHTML = '

加载中...

';

           // 构建invoke调用
           var invokeText = '错误: 找不到模块 "Module:卡牌/' + module + '"';
           
           // 通过API获取新卡牌HTML
           var apiUrl = mw.util.wikiScript('api');
           var params = {
               action: 'expandtemplates',
               format: 'json',
               text: invokeText,
               prop: 'wikitext'
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.expandtemplates && data.expandtemplates.wikitext) {
                       cardWrapper.innerHTML = data.expandtemplates.wikitext;
                       // 重新添加删除按钮和点击事件
                       setTimeout(function() {
                           var newCard = cardWrapper.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();
                                   cardWrapper.remove();
                               });
                               
                               newCard.style.position = 'relative';
                               newCard.style.cursor = 'pointer';
                               newCard.appendChild(deleteBtn);
                               
                               // 添加点击事件
                               newCard.addEventListener('click', function(e) {
                                   if (!e.target.classList.contains('card-delete-btn')) {
                                       showVariantSelection(cardWrapper, module, cardName);
                                   }
                               });
                           }
                       }, 100);
                   }
               })
               .catch(error => {
                   console.error('替换卡牌失败:', error);

cardWrapper.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');
               
               // 方式2: 从data-name属性获取
               if (!characterName) {
                   characterName = characterOption.getAttribute('data-name');
               }
               
               // 方式3: 从子元素的文本获取
               if (!characterName) {
                   var nameElement = characterOption.querySelector('.character-name, [class*="name"], span, div');
                   if (nameElement && nameElement.textContent) {
                       characterName = nameElement.textContent.trim();
                   }
               }
               
               // 方式4: 从title属性获取
               if (!characterName) {
                   characterName = characterOption.getAttribute('title');
               }
               
               // 方式5: 从整个元素的文本内容获取（最后的办法）
               if (!characterName) {
                   characterName = characterOption.textContent.trim();
                   // 如果文本太长或包含其他内容，可能需要进一步处理
                   if (characterName.length > 20) {
                       characterName = null;
                   }
               }
               
               console.log('选中的战斗员:', characterName);
               
               // 克隆整个角色卡片
               var clonedCard = characterOption.cloneNode(true);
               
               // 移除点击事件相关的类和样式
               clonedCard.classList.remove('character-option');
               clonedCard.style.cursor = 'default';
               clonedCard.style.transition = 'none';
               clonedCard.style.margin = '0';
               
               // 清空槽位并添加克隆的卡片
               var characterSlot = document.getElementById('character-slot');
               characterSlot.innerHTML = ;
               characterSlot.appendChild(clonedCard);
               characterSlot.style.border = 'none';
               characterSlot.style.padding = '0';
               characterSlot.style.display = 'block';
               
               // 关闭选择窗口
               document.getElementById('character-modal').style.display = 'none';
               
               // 加载该战斗员的卡牌
               if (characterName) {
                   loadCharacterCards(characterName);
               } else {
                   console.error('无法获取战斗员名称');
                   var deckArea = document.getElementById('deck-area');

deckArea.innerHTML = '

无法识别战斗员，请检查模板配置

';

               }
           }
       });
       
       // 点击伙伴槽位显示选择窗口
       document.getElementById('partner-slot').addEventListener('click', function() {
           document.getElementById('partner-modal').style.display = 'block';
       });
       
       // 关闭伙伴选择窗口
       document.getElementById('close-partner-modal').addEventListener('click', function() {
           document.getElementById('partner-modal').style.display = 'none';
       });
       
       // 点击遮罩层关闭伙伴窗口
       document.getElementById('partner-modal').addEventListener('click', function(e) {
           if (e.target === this) {
               this.style.display = 'none';
           }
       });
       
       // 选择伙伴 - 使用事件委托
       document.getElementById('partner-list').addEventListener('click', function(e) {
           var partnerOption = e.target.closest('.partner-option');
           if (partnerOption) {
               // 获取伙伴ID（从data属性或其他方式）
               var partnerId = partnerOption.dataset.partnerId || partnerOption.getAttribute('data-partner-id');
               
               // 创建伙伴显示图片
               var partnerImg = document.createElement('img');
               partnerImg.src = '/index.php?title=Special:Redirect/file/Portrait_character_wide_' + partnerId + '.png';
               partnerImg.style.width = '150px';
               partnerImg.style.height = '77px';
               partnerImg.style.objectFit = 'cover';
               
               // 清空槽位并添加图片
               var partnerSlot = document.getElementById('partner-slot');
               partnerSlot.innerHTML = ;
               partnerSlot.appendChild(partnerImg);
               partnerSlot.style.border = 'none';
               partnerSlot.style.padding = '0';
               
               // 关闭选择窗口
               document.getElementById('partner-modal').style.display = 'none';
           }
       });
   }
   
   // 确保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);

}

.partner-option {

   cursor: pointer;
   transition: transform 0.2s;

}

.partner-option:hover {

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

}

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>