微件

配队模拟器：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,067次编辑
无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,067次编辑
无编辑摘要
第1行： 第1行：
<!-- JavaScript -->
<script>
<script>
// 存储当前选择状态
        // 找到被点击的角色卡片（最外层div）
let currentSelection = {
        let target = e.target;
    character: null,
        while (target && target !== characterList) {
    partner: null,
            if (target.style && target.style.position === 'relative' && target.style.width === '150px') {
    cards: [],
                 selectCharacter(target);
    weapon: null,
                 break;
    armor: null,
    ring: null
};
 
// 打开选择模态框
function openSelectionModal(type) {
    const modal = document.getElementById('selection-modal');
    const content = document.getElementById('modal-content');
   
    if (!modal || !content) {
        console.error('Modal elements not found');
        return;
    }
   
    switch(type) {
        case 'character':
            content.innerHTML = `{{#ask:[[分类:战斗员]]
                |?名称
                |?稀有度
                |?职业
                |?属性
                |sort=实装日期,稀有度,id
                |order=desc,desc,desc
                |mainlabel=-
                |link=none
                |template=配队/战斗员
                |headers=hide
                |format=template
                |limit=1000
            }}`;
            break;
           
        case 'partner':
            content.innerHTML = `{{#ask:[[分类:伙伴]]
                |?名称
                |?稀有度
                |?职业
                |?属性
                |?id
                |sort=实装日期,稀有度,id
                |order=desc,desc,desc
                |mainlabel=-
                |link=none
                |template=配队/伙伴
                |headers=hide
                |format=template
                |limit=1000
            }}`;
            break;
           
        case 'card':
            // 需要先选择角色才能选择卡牌
            if (!currentSelection.character) {
                 alert('请先选择角色');
                 return;
             }
             }
             content.innerHTML = generateCardSelection();
             target = target.parentElement;
            break;
         }
           
        case 'weapon':
            content.innerHTML = generateEquipmentSelection('武器');
            break;
           
        case 'armor':
            content.innerHTML = generateEquipmentSelection('装甲');
            break;
           
        case 'ring':
            content.innerHTML = generateEquipmentSelection('戒指');
            break;
    }
   
    modal.style.display = 'block';
    document.body.style.overflow = 'hidden';
   
    // 为生成的元素添加点击事件
    setTimeout(() => {
        addSelectionEvents(type);
    }, 100);
}
 
// 关闭选择模态框
function closeSelectionModal() {
    const modal = document.getElementById('selection-modal');
    if (modal) {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    }
}
 
// 生成卡牌选择界面
function generateCardSelection() {
    if (!currentSelection.character) return '';
   
    // 这里需要根据选择的角色获取对应的卡牌数据
    // 假设从模板中获取卡牌信息
    return `
    <div>
        <h3>选择卡牌 - ${currentSelection.character}</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
            <!-- 自我意识技能 -->
            <div class="card-selection" data-card-type="ego">
                {{#invoke:卡牌|main|角色模块|自我意识技能卡牌}}
            </div>
           
            <!-- 起始卡牌 -->
            <div class="card-selection" data-card-type="start1">
                {{#invoke:卡牌|main|角色模块|起始卡牌_1}}
            </div>
            <div class="card-selection" data-card-type="start2">
                {{#invoke:卡牌|main|角色模块|起始卡牌_2}}
            </div>
            <div class="card-selection" data-card-type="start3">
                {{#invoke:卡牌|main|角色模块|起始卡牌_3}}
            </div>
            <div class="card-selection" data-card-type="start4">
                {{#invoke:卡牌|main|角色模块|起始卡牌_4}}
            </div>
           
            <!-- 独特卡牌 -->
            <div class="card-selection" data-card-type="unique1">
                {{#invoke:卡牌|main|角色模块|独特卡牌_1}}
            </div>
            <div class="card-selection" data-card-type="unique2">
                {{#invoke:卡牌|main|角色模块|独特卡牌_2}}
            </div>
            <div class="card-selection" data-card-type="unique3">
                {{#invoke:卡牌|main|角色模块|独特卡牌_3}}
            </div>
            <div class="card-selection" data-card-type="unique4">
                {{#invoke:卡牌|main|角色模块|独特卡牌_4}}
            </div>
        </div>
    </div>`;
}
 
// 生成装备选择界面
function generateEquipmentSelection(type) {
    return `
    <div>
        <h3>选择${type}</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
            {{#invoke:装备|generateCards}}
        </div>
    </div>`;
}
 
// 添加选择事件
function addSelectionEvents(type) {
    const items = document.querySelectorAll('.selection-item');
   
    items.forEach(item => {
         item.addEventListener('click', function() {
            const name = this.getAttribute('data-name');
            const id = this.getAttribute('data-id');
           
            switch(type) {
                case 'character':
                    selectCharacter(name, id);
                    break;
                case 'partner':
                    selectPartner(name, id);
                    break;
                case 'card':
                    selectCard(name, this.getAttribute('data-card-type'));
                    break;
                case 'weapon':
                    selectWeapon(name, id);
                    break;
                case 'armor':
                    selectArmor(name, id);
                    break;
                case 'ring':
                    selectRing(name, id);
                    break;
            }
           
            closeSelectionModal();
        });
    });
}
 
// 选择角色
function selectCharacter(name, id) {
    currentSelection.character = name;
    const slot = document.getElementById('character-slot');
    if (slot) {
        slot.innerHTML = `[[File:战斗员图鉴_${name}.png|150px|link=]]`;
        slot.style.justifyContent = 'center';
    }
}
 
// 选择伙伴
function selectPartner(name, id) {
    currentSelection.partner = name;
    const slot = document.getElementById('partner-slot');
    if (slot) {
        slot.innerHTML = `[[File:face_character_wide_${id}.png|150px|link=]]`;
        slot.style.justifyContent = 'center';
    }
}
 
// 选择卡牌
function selectCard(name, cardType) {
    currentSelection.cards.push({name, type: cardType});
    updateDeckDisplay();
}
 
// 选择武器
function selectWeapon(name, id) {
    currentSelection.weapon = name;
    const slot = document.getElementById('weapon-slot');
    if (slot) {
        slot.innerHTML = generateEquipmentDisplay(name, id);
        slot.style.justifyContent = 'center';
    }
}
 
// 选择装甲
function selectArmor(name, id) {
    currentSelection.armor = name;
    const slot = document.getElementById('armor-slot');
    if (slot) {
        slot.innerHTML = generateEquipmentDisplay(name, id);
        slot.style.justifyContent = 'center';
    }
}
 
// 选择戒指
function selectRing(name, id) {
    currentSelection.ring = name;
    const slot = document.getElementById('ring-slot');
    if (slot) {
        slot.innerHTML = generateEquipmentDisplay(name, id);
        slot.style.justifyContent = 'center';
    }
}
 
// 生成装备显示
function generateEquipmentDisplay(name, id) {
    const formattedId = id.toString().padStart(4, '0');
    return `
    <div style="position:relative;width:124px;height:124px">
        <div style="position:absolute;top:0px;left:0px">[[File:frame_item_rarity_金.png|124px]]</div>
        <div style="position:absolute;top:8px;left:8px;width:108px;height:108px;border:1px solid #fff;"></div>
        <div style="position:absolute;top:6px;left:6px;">[[File:relic_${formattedId}.png|112px|center]]</div>
        <div style="position:absolute;bottom:2px;left:6px;">{{描边|黑|${name}}}</div>
    </div>`;
}
 
// 更新卡组显示
function updateDeckDisplay() {
    const deckArea = document.getElementById('deck-area');
    if (!deckArea) return;
   
    if (currentSelection.cards.length === 0) {
        deckArea.innerHTML = '<div style="font-size: 48px; color: #ccc;">+</div>';
        return;
    }
   
    let cardsHTML = '<div style="display: flex; flex-wrap: wrap; gap: 10px;">';
    currentSelection.cards.forEach(card => {
        cardsHTML += `<div class="card-in-deck" data-card="${card.name}">
            {{#invoke:卡牌|main|角色模块|${card.name}}}
        </div>`;
     });
     });
    cardsHTML += '</div>';
      
      
     deckArea.innerHTML = cardsHTML;
     function selectCharacter(characterCard) {
}
        // 克隆角色卡片
 
        const clone = characterCard.cloneNode(true);
// 安全的元素绑定函数
       
function safeAddEventListener(elementId, event, handler) {
        // 提取角色名称
    const element = document.getElementById(elementId);
        const nameDiv = clone.querySelector('div[style*="bottom: 5px"]');
    if (element) {
        const characterName = nameDiv ? nameDiv.textContent.trim() : '';
         element.addEventListener(event, handler);
       
    } else {
        // 清空character-slot并添加选中的角色
         console.warn(`Element with id '${elementId}' not found`);
        characterSlot.innerHTML = '';
        characterSlot.style.border = '2px solid #28a745';
        characterSlot.appendChild(clone);
       
        // 存储选中的角色名称
         characterSlot.dataset.selectedCharacter = characterName;
       
        // 关闭弹窗
         characterModal.style.display = 'none';
     }
     }
}
})();
 
// 初始化点击事件
function initializeEventListeners() {
    // 战斗员选择
    safeAddEventListener('character-slot', 'click', function() {
        openSelectionModal('character');
    });
   
    // 伙伴选择
    safeAddEventListener('partner-slot', 'click', function() {
        openSelectionModal('partner');
    });
   
    // 卡组选择
    safeAddEventListener('deck-area', 'click', function() {
        openSelectionModal('card');
    });
   
    // 装备选择
    safeAddEventListener('weapon-slot', 'click', function() {
        openSelectionModal('weapon');
    });
   
    safeAddEventListener('armor-slot', 'click', function() {
        openSelectionModal('armor');
    });
   
    safeAddEventListener('ring-slot', 'click', function() {
        openSelectionModal('ring');
    });
   
    // 全局点击事件用于关闭模态框
    document.addEventListener('click', function(event) {
        const modal = document.getElementById('selection-modal');
        if (modal && modal.style.display === 'block') {
            // 如果点击的是模态框背景（不是内容区域）
            if (event.target === modal) {
                closeSelectionModal();
            }
        }
    });
   
    // ESC键关闭模态框
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeSelectionModal();
        }
    });
}
 
// 页面加载完成后初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeEventListeners);
} else {
    initializeEventListeners();
}
 
// MediaWiki页面内容加载完成后重新初始化（用于动态加载的内容）
if (typeof mw !== 'undefined' && mw.hook) {
    mw.hook('wikipage.content').add(function($content) {
        // 检查是否包含我们的模拟器元素
        if ($content.find('#team-simulator').length > 0) {
            setTimeout(initializeEventListeners, 100);
        }
    });
}
</script>
</script>


<style>
<style>
.selection-slot {
#character-modal button:hover {
     transition: all 0.3s ease;
     opacity: 0.8;
    cursor: pointer;
}
 
.selection-slot:hover {
    border-color: #666;
    background: #f8f8f8;
}
}


.selection-item {
#character-list > div {
     cursor: pointer;
     cursor: pointer;
     transition: transform 0.2s ease;
     transition: transform 0.2s;
    display: inline-block;
    margin: 5px;
}
}


.selection-item:hover {
#character-list > div:hover {
     transform: scale(1.05);
     transform: scale(1.05);
}
.card-in-deck {
    cursor: pointer;
}
.card-in-deck:hover {
    opacity: 0.8;
}
/* 模态框样式改进 */
#selection-modal {
    transition: opacity 0.3s ease;
}
#selection-modal > div {
    transition: transform 0.3s ease;
}
}
</style>
</style>

2025年10月18日 (六) 20:58的版本

<script> 

       // 找到被点击的角色卡片（最外层div）
       let target = e.target;
       while (target && target !== characterList) {
           if (target.style && target.style.position === 'relative' && target.style.width === '150px') {
               selectCharacter(target);
               break;
           }
           target = target.parentElement;
       }
   });
   
   function selectCharacter(characterCard) {
       // 克隆角色卡片
       const clone = characterCard.cloneNode(true);
       
       // 提取角色名称
       const nameDiv = clone.querySelector('div[style*="bottom: 5px"]');
       const characterName = nameDiv ? nameDiv.textContent.trim() : ;
       
       // 清空character-slot并添加选中的角色
       characterSlot.innerHTML = ;
       characterSlot.style.border = '2px solid #28a745';
       characterSlot.appendChild(clone);
       
       // 存储选中的角色名称
       characterSlot.dataset.selectedCharacter = characterName;
       
       // 关闭弹窗
       characterModal.style.display = 'none';
   }

})(); </script>

<style>

  1. character-modal button:hover {
   opacity: 0.8;

}

  1. character-list > div {
   cursor: pointer;
   transition: transform 0.2s;

}

  1. character-list > div:hover {
   transform: scale(1.05);

} </style>

检索自“http://cznwiki.com/index.php?title=微件:配队模拟器&oldid=3415”