微件:配队模拟器
来自卡厄思梦境WIKI
<script> (function() {
// 等待DOM加载完成
function initTeamSimulator() {
// 保存当前选择的战斗员名称
var currentCharacterName = null;
var cardIdCounter = 0; // 用于生成唯一ID
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 = {};
cardIdCounter = 0;
// 为每张卡牌添加功能
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) {
var card = wrapper.querySelector('.card-small-wrapper');
if (!card) return;
// 给每个wrapper分配唯一ID
var uniqueId = 'deck-card-' + (++cardIdCounter);
wrapper.setAttribute('data-unique-id', uniqueId);
// 记录原始状态
selectedCards[uniqueId] = {
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[uniqueId];
});
card.style.position = 'relative';
card.appendChild(deleteBtn);
}
});
// 全局监听卡牌模态框的显示
setupGlobalModalListener();
}
// 设置全局模态框监听器
function setupGlobalModalListener() {
// 移除之前的全局监听器
if (window.deckModalObserver) {
window.deckModalObserver.disconnect();
}
// 创建新的观察器
window.deckModalObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
var modal = mutation.target;
if (modal.classList.contains('card-modal') && modal.style.display !== 'none') {
// 延迟处理，确保模态框内容已经渲染
setTimeout(function() {
enhanceActiveModal(modal);
}, 100);
}
}
});
});
// 观察所有模态框
document.querySelectorAll('.card-modal').forEach(function(modal) {
window.deckModalObserver.observe(modal, {
attributes: true,
attributeFilter: ['style']
});
});
}
// 增强当前活动的模态框
function enhanceActiveModal(modal) {
// 查找是哪张卡牌打开的模态框
var cardId = modal.id ? modal.id.replace('-modal', ) : null;
if (!cardId) return;
// 查找对应的deck卡牌
var deckCard = null;
var uniqueId = null;
// 遍历所有deck中的卡牌，找到匹配的那个
document.querySelectorAll('#deck-area .deck-card-wrapper').forEach(function(wrapper) {
var wrapperCard = wrapper.querySelector('.card-small-wrapper');
if (wrapperCard && wrapperCard.getAttribute('data-card-id') === cardId) {
deckCard = wrapper;
uniqueId = wrapper.getAttribute('data-unique-id');
}
});
if (!deckCard || !uniqueId) {
console.log('未找到对应的deck卡牌');
return;
}
var cardData = selectedCards[uniqueId];
if (!cardData) {
console.log('未找到卡牌数据:', uniqueId);
return;
}
console.log('增强模态框，卡牌:', cardData.cardName);
// 标记已处理
if (modal.hasAttribute('data-deck-enhanced')) {
return;
}
modal.setAttribute('data-deck-enhanced', 'true');
// 处理灵光一闪
var inspirationButton = modal.querySelector('.inspiration-button');
if (inspirationButton) {
inspirationButton.addEventListener('click', function() {
setTimeout(function() {
enhanceInspirationView(modal, uniqueId);
}, 100);
});
}
// 处理神光一闪
var godButton = modal.querySelector('.god-inspiration-button');
if (godButton) {
godButton.addEventListener('click', function() {
setTimeout(function() {
enhanceGodView(modal, uniqueId);
}, 100);
});
}
}
// 增强灵光一闪视图
function enhanceInspirationView(modal, uniqueId) {
var inspirationView = modal.querySelector('.inspiration-view');
if (!inspirationView) return;
var cardData = selectedCards[uniqueId];
if (!cardData) return;
console.log('增强灵光一闪视图，卡牌:', cardData.cardName);
var variants = inspirationView.querySelectorAll('.inspiration-variant');
variants.forEach(function(variant, index) {
if (!variant.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() {
console.log('选择灵光一闪变体', index + 1, '对于卡牌:', cardData.cardName);
replaceCard(uniqueId, '灵光一闪', index + 1);
modal.style.display = 'none';
});
variant.appendChild(selectBtn);
}
});
}
// 增强神光一闪视图
function enhanceGodView(modal, uniqueId) {
var godView = modal.querySelector('.god-inspiration-view');
if (!godView) return;
var cardData = selectedCards[uniqueId];
if (!cardData) return;
console.log('增强神光一闪视图，卡牌:', cardData.cardName);
var godGroups = godView.querySelectorAll('.god-group');
godGroups.forEach(function(group) {
var groupNameEl = group.querySelector('div[style*="color:#ffd36a"]');
if (!groupNameEl) return;
var groupName = groupNameEl.textContent.trim();
var variants = group.querySelectorAll('.god-variant-card');
variants.forEach(function(variant, index) {
if (!variant.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() {
console.log('选择神光一闪变体', groupName, index + 1, '对于卡牌:', cardData.cardName);
replaceCard(uniqueId, '神光一闪', groupName, index + 1);
modal.style.display = 'none';
});
variant.appendChild(selectBtn);
}
});
});
}
// 替换卡牌
function replaceCard(uniqueId, variantType, param1, param2) {
var cardData = selectedCards[uniqueId];
if (!cardData) {
console.error('找不到卡牌数据:', uniqueId);
return;
}
var wrapper = document.querySelector('[data-unique-id="' + uniqueId + '"]');
if (!wrapper) {
console.error('找不到卡牌容器:', uniqueId);
return;
}
console.log('替换卡牌:', cardData.cardName, '变体类型:', variantType, '参数:', param1, param2);
// 更新记录
cardData.variantType = variantType;
cardData.variantParam = param1;
cardData.variantIndex = param2;
// 显示加载中
var oldContent = wrapper.innerHTML;
wrapper.innerHTML = '
加载中...
';
// 构建invoke调用
var invokeText = '错误: 找不到模块 "Module:卡牌/' + cardData.module + '"';
console.log('调用文本:', invokeText);
// 通过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[uniqueId];
});
newCard.style.position = 'relative';
newCard.appendChild(deleteBtn);
}
// 重新设置全局监听
setupGlobalModalListener();
}, 100);
} else {
console.error('API返回数据无效');
wrapper.innerHTML = oldContent;
}
})
.catch(error => {
console.error('替换卡牌失败:', error);
wrapper.innerHTML = oldContent;
});
}
// 选择角色 - 使用事件委托
document.getElementById('character-list').addEventListener('click', function(e) {
var characterOption = e.target.closest('.character-option');
if (characterOption) {
// 获取战斗员名称
var characterName = characterOption.getAttribute('data-character-name') ||
characterOption.getAttribute('data-name') ||
characterOption.getAttribute('title');
if (!characterName) {
var nameEl = characterOption.querySelector('.character-name, [class*="name"]');
if (nameEl) characterName = nameEl.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';
document.getElementById('character-modal').style.display = 'none';
if (characterName) {
loadCharacterCards(characterName);
}
}
});
// 伙伴相关代码保持不变...
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) {
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';
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);
}
.card-delete-btn:hover {
background: rgba(255,0,0,1) !important; transform: scale(1.1);
}
.select-variant-btn {
transition: all 0.3s;
}
.select-variant-btn:hover {
opacity: 0.9; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.3);
} </style>