微件:配队模拟器

<script> (function() {

   // 等待DOM加载完成
   function initTeamSimulator() {
       // 点击角色槽位显示选择窗口
       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';
           }
       });
       
       // 选择角色 - 使用事件委托
       document.getElementById('character-list').addEventListener('click', function(e) {
           var characterOption = e.target.closest('.character-option');
           if (characterOption) {
               // 克隆整个角色卡片
               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';
           }
       });
       
       // 点击伙伴槽位显示选择窗口
       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/File:face_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;

} </style>