微件:配队模拟器
来自卡厄思梦境WIKI
<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) {
currentCharacterName = characterName;
// 通过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) {
var deckArea = document.getElementById('deck-area');
deckArea.innerHTML = data.expandtemplates.wikitext;
deckArea.style.border = 'none';
deckArea.style.padding = '10px';
// 为每张卡牌添加删除按钮
addDeleteButtons();
// 为每张卡牌添加点击事件
addCardClickEvents();
}
})
.catch(error => {
console.error('加载卡牌失败:', error);
});
}
// 为卡牌添加删除按钮
function addDeleteButtons() {
var cards = document.querySelectorAll('#deck-area .card-small-wrapper');
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;';
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation();
card.remove();
});
card.style.position = 'relative';
card.appendChild(deleteBtn);
}
});
}
// 为卡牌添加点击事件（替换为灵光/神光一闪）
function addCardClickEvents() {
var cards = document.querySelectorAll('#deck-area .card-small-wrapper');
cards.forEach(function(card) {
// 移除之前的点击事件
var newCard = card.cloneNode(true);
card.parentNode.replaceChild(newCard, card);
newCard.addEventListener('click', function(e) {
// 如果点击的是删除按钮，不触发替换
if (e.target.classList.contains('card-delete-btn')) {
return;
}
// 获取卡牌信息
var cardId = this.getAttribute('data-card-id');
if (cardId) {
showVariantSelection(this, cardId);
}
});
});
}
// 显示变体选择弹窗
function showVariantSelection(cardElement, cardId) {
// 创建选择弹窗
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;max-height:80vh;overflow:auto;';
modalContent.innerHTML = `
选择卡牌变体
<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:white;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;">关闭</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 === 'inspiration' || type === 'god') {
// 这里需要进一步的选择界面
showVariantSubSelection(cardElement, cardId, type, modal);
} else {
modal.remove();
}
};
});
// 点击背景关闭
modal.onclick = function(e) {
if (e.target === modal) {
modal.remove();
}
};
}
// 显示具体变体选择
function showVariantSubSelection(cardElement, cardId, type, parentModal) {
// 这里需要根据实际的卡牌数据来生成选项
// 暂时使用示例代码
parentModal.remove();
var modal = document.createElement('div');
modal.className = 'variant-sub-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:800px;max-height:80vh;overflow:auto;';
if (type === 'inspiration') {
modalContent.innerHTML = `
选择灵光一闪变体
<button class="insp-variant" data-index="1" style="padding:10px;border:1px solid #ccc;background:white;cursor:pointer;">变体 1</button>
<button class="insp-variant" data-index="2" style="padding:10px;border:1px solid #ccc;background:white;cursor:pointer;">变体 2</button>
<button class="insp-variant" data-index="3" style="padding:10px;border:1px solid #ccc;background:white;cursor:pointer;">变体 3</button>
<button class="insp-variant" data-index="4" style="padding:10px;border:1px solid #ccc;background:white;cursor:pointer;">变体 4</button>
<button class="insp-variant" data-index="5" style="padding:10px;border:1px solid #ccc;background:white;cursor:pointer;">变体 5</button>
<button class="close-modal" style="margin-top:20px;padding:10px 20px;background:#dc3545;color:white;border:none;border-radius:5px;cursor:pointer;">关闭</button>
`;
} else if (type === 'god') {
modalContent.innerHTML = `
选择神光一闪变体
<label>选择战斗员：</label>
<select id="god-character-select">
<option value="circen">Circen</option>
<option value="diallos">Diallos</option>
<option value="nihilum">Nihilum</option>
<option value="secred">Secred</option>
<option value="vitor">Vitor</option>
</select>
<button class="close-modal" style="margin-top:20px;padding:10px 20px;background:#dc3545;color:white;border:none;border-radius:5px;cursor:pointer;">关闭</button>
`;
}
modal.appendChild(modalContent);
document.body.appendChild(modal);
// 绑定事件
modalContent.querySelector('.close-modal').onclick = function() {
modal.remove();
};
// 灵光一闪变体选择
if (type === 'inspiration') {
modalContent.querySelectorAll('.insp-variant').forEach(function(btn) {
btn.onclick = function() {
var index = this.getAttribute('data-index');
replaceCard(cardElement, cardId, 'inspiration', index);
modal.remove();
};
});
}
// 神光一闪变体选择
if (type === 'god') {
var characterSelect = modalContent.querySelector('#god-character-select');
characterSelect.onchange = function() {
// 这里需要动态加载对应战斗员的变体
// 暂时使用示例
};
}
modal.onclick = function(e) {
if (e.target === modal) {
modal.remove();
}
};
}
// 替换卡牌
function replaceCard(cardElement, cardId, variantType, variantParam) {
// 这里需要调用API获取新的卡牌HTML
console.log('替换卡牌:', cardId, variantType, variantParam);
// 实际实现需要调用模块来获取新卡牌的HTML
}
// 选择角色 - 使用事件委托
document.getElementById('character-list').addEventListener('click', function(e) {
var characterOption = e.target.closest('.character-option');
if (characterOption) {
// 克隆整个角色卡片
var clonedCard = characterOption.cloneNode(true);
// 获取战斗员名称
var characterName = characterOption.getAttribute('data-character-name') ||
characterOption.querySelector('.character-name').textContent;
// 移除点击事件相关的类和样式
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);
}
}
});
// 选择角色 - 使用事件委托
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?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);
}
- character-slot .character-option:hover {
transform: none !important; box-shadow: none !important;
} </style>