微件:配队模拟器
来自卡厄思梦境WIKI
<script> (function() {
// 等待DOM加载完成
function initTeamSimulator() {
// 为每个角色单元保存独立的状态
var characterUnits = {};
var currentActiveUnit = null;
// 初始化所有角色单元
document.querySelectorAll('.character-unit').forEach(function(unit) {
var unitIndex = unit.getAttribute('data-unit-index');
characterUnits[unitIndex] = {
characterName: null,
characterClass: null, // 新增:保存职业信息
cardIdCounter: 0,
selectedCards: {}
};
});
// 点击角色槽位显示选择窗口
document.querySelectorAll('.character-slot').forEach(function(slot) {
slot.addEventListener('click', function() {
currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
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, unitIndex) {
if (!characterName) {
console.error('战斗员名称为空');
return;
}
var unitData = characterUnits[unitIndex];
unitData.characterName = characterName;
console.log('加载战斗员卡牌:', characterName, '单元:', unitIndex);
// 找到对应单元的卡组区域
var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
var deckArea = unit.querySelector('.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['*'];
// 重置该单元的卡牌状态
unitData.selectedCards = {};
unitData.cardIdCounter = 0;
// 为每张卡牌添加功能
setTimeout(function() {
initializeCardFeatures(unitIndex);
}, 100);
} else {
deckArea.innerHTML = '
';
}
})
.catch(error => {
console.error('加载卡牌失败:', error);
deckArea.innerHTML = '
';
});
}
// 初始化卡牌功能 - 支持多角色
function initializeCardFeatures(unitIndex) {
var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
var unitData = characterUnits[unitIndex];
var deckArea = unit.querySelector('.deck-area');
// 明确设置卡组区域样式
deckArea.style.display = 'flex';
deckArea.style.flexWrap = 'wrap';
deckArea.style.gap = '10px';
deckArea.style.alignItems = 'flex-start';
deckArea.style.justifyContent = 'flex-start'; // 新增
deckArea.style.width = '960px'; // 新增:强制宽度
deckArea.style.padding = '10px';
deckArea.style.border = '2px dashed #e0e0e0';
deckArea.style.cursor = 'pointer';
deckArea.style.background = 'white';
deckArea.style.boxSizing = 'border-box'; // 新增
var wrappers = deckArea.querySelectorAll('.deck-card-wrapper');
wrappers.forEach(function(wrapper) {
var card = wrapper.querySelector('.card-small-wrapper');
if (!card) return;
// 给每个wrapper分配唯一ID(包含单元索引)
var uniqueId = 'deck-card-' + unitIndex + '-' + (++unitData.cardIdCounter);
wrapper.setAttribute('data-unique-id', uniqueId);
wrapper.setAttribute('data-unit-index', unitIndex);
// 记录原始状态
unitData.selectedCards[uniqueId] = {
module: wrapper.getAttribute('data-module') || unitData.characterName,
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 unitData.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;
var unitIndex = 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');
unitIndex = wrapper.getAttribute('data-unit-index');
}
});
if (!deckCard || !uniqueId || !unitIndex) {
console.log('未找到对应的deck卡牌');
return;
}
var cardData = characterUnits[unitIndex].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, unitIndex);
}, 100);
});
}
// 处理神光一闪
var godButton = modal.querySelector('.god-inspiration-button');
if (godButton) {
godButton.addEventListener('click', function() {
setTimeout(function() {
enhanceGodView(modal, uniqueId, unitIndex);
}, 100);
});
}
}
// 关闭模态框并恢复滚动
function closeModalAndRestoreScroll(modal) {
// 关闭模态框
modal.style.display = 'none';
// 移除可能存在的data属性
modal.removeAttribute('data-deck-enhanced');
// 确保body可以滚动
document.body.style.overflow = ;
document.body.style.position = ;
document.documentElement.style.overflow = ;
// 移除可能存在的其他样式
document.body.classList.remove('modal-open');
document.documentElement.classList.remove('modal-open');
// 触发resize事件,有些框架依赖这个
window.dispatchEvent(new Event('resize'));
}
// 增强灵光一闪视图
function enhanceInspirationView(modal, uniqueId, unitIndex) {
var inspirationView = modal.querySelector('.inspiration-view');
if (!inspirationView) return;
var cardData = characterUnits[unitIndex].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, unitIndex, '灵光一闪', index + 1);
closeModalAndRestoreScroll(modal);
});
variant.appendChild(selectBtn);
}
});
}
// 增强神光一闪视图
function enhanceGodView(modal, uniqueId, unitIndex) {
var godView = modal.querySelector('.god-inspiration-view');
if (!godView) return;
var cardData = characterUnits[unitIndex].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, unitIndex, '神光一闪', groupName, index + 1);
closeModalAndRestoreScroll(modal);
});
variant.appendChild(selectBtn);
}
});
});
}
// 替换卡牌
function replaceCard(uniqueId, unitIndex, variantType, param1, param2) {
var cardData = characterUnits[unitIndex].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 characterUnits[unitIndex].selectedCards[uniqueId];
});
newCard.style.position = 'relative';
newCard.appendChild(deleteBtn);
}
// 重新设置全局监听
setupGlobalModalListener();
// 确保滚动恢复
document.body.style.overflow = ;
document.documentElement.style.overflow = ;
}, 100);
} else {
console.error('API返回数据无效');
wrapper.innerHTML = oldContent;
}
})
.catch(error => {
console.error('替换卡牌失败:', error);
wrapper.innerHTML = oldContent;
// 恢复滚动
document.body.style.overflow = ;
document.documentElement.style.overflow = ;
});
}
// 选择角色
document.getElementById('character-list').addEventListener('click', function(e) {
var characterOption = e.target.closest('.character-option');
if (characterOption && currentActiveUnit) {
// 获取战斗员名称
var characterName = characterOption.getAttribute('data-character-name') ||
characterOption.getAttribute('data-name') ||
characterOption.getAttribute('title');
// 获取战斗员职业
var characterClass = characterOption.getAttribute('data-class') ||
characterOption.getAttribute('data-职业');
if (!characterName) {
var nameEl = characterOption.querySelector('.character-name, [class*="name"]');
if (nameEl) characterName = nameEl.textContent.trim();
}
console.log('选中的战斗员:', characterName, '职业:', characterClass, '单元:', currentActiveUnit);
// 保存职业信息
characterUnits[currentActiveUnit].characterClass = characterClass;
// 克隆卡片显示
var clonedCard = characterOption.cloneNode(true);
clonedCard.classList.remove('character-option');
clonedCard.style.cursor = 'default';
var unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
var characterSlot = unit.querySelector('.character-slot');
characterSlot.innerHTML = ;
characterSlot.appendChild(clonedCard);
characterSlot.style.border = 'none';
document.getElementById('character-modal').style.display = 'none';
if (characterName) {
loadCharacterCards(characterName, currentActiveUnit);
}
}
});
// 选择伙伴
document.querySelectorAll('.partner-slot').forEach(function(slot) {
slot.addEventListener('click', function() {
currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
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 && currentActiveUnit) {
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 unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
var partnerSlot = unit.querySelector('.partner-slot');
partnerSlot.innerHTML = ;
partnerSlot.appendChild(partnerImg);
partnerSlot.style.border = 'none';
document.getElementById('partner-modal').style.display = 'none';
}
});
// ========== 卡牌添加功能 ==========
var currentDeckArea = null;
var currentCardType = 'character'; // 当前选择的卡牌类型
// 点击卡组区域打开卡牌选择
document.querySelectorAll('.deck-area').forEach(function(deckArea) {
var originalClickHandler = function(e) {
// 如果点击的是卡牌本身或删除按钮,不触发
if (e.target.closest('.deck-card-wrapper') ||
e.target.closest('.card-small-wrapper') ||
e.target.closest('.card-delete-btn') ||
e.target.classList.contains('card-delete-btn')) {
return;
}
currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
currentDeckArea = this;
// 检查是否已选择战斗员
var unit = this.closest('.character-unit');
var characterSlot = unit.querySelector('.character-slot');
// 修正判断逻辑:检查是否有战斗员图片或内容
var hasCharacter = characterSlot.querySelector('img') !== null ||
characterSlot.innerHTML.indexOf('data-character-name') > -1 ||
!characterSlot.querySelector('.placeholder');
var unitData = characterUnits[currentActiveUnit];
if (!unitData.characterName) {
hasCharacter = false;
}
if (!hasCharacter) {
alert('请先选择战斗员!');
return;
}
// 重置为战斗员卡牌选项
currentCardType = 'character';
document.querySelectorAll('.card-type-tab').forEach(function(tab) {
tab.classList.remove('active');
tab.style.borderBottomColor = 'transparent';
tab.style.fontWeight = 'normal';
});
var characterTab = document.querySelector('.card-type-tab[data-type="character"]');
if (characterTab) {
characterTab.classList.add('active');
characterTab.style.borderBottomColor = '#667eea';
characterTab.style.fontWeight = 'bold';
}
// 显示弹窗
document.getElementById('card-modal').style.display = 'block';
loadCardList('character');
};
deckArea.addEventListener('click', originalClickHandler);
});
// 卡牌类型标签切换
document.querySelectorAll('.card-type-tab').forEach(function(tab) {
tab.addEventListener('click', function() {
var cardType = this.getAttribute('data-type');
currentCardType = cardType;
// 更新标签样式
document.querySelectorAll('.card-type-tab').forEach(function(t) {
t.classList.remove('active');
t.style.borderBottomColor = 'transparent';
t.style.fontWeight = 'normal';
});
this.classList.add('active');
this.style.borderBottomColor = '#667eea';
this.style.fontWeight = 'bold';
// 加载对应类型的卡牌
loadCardList(cardType);
});
});
// 加载卡牌列表
function loadCardList(cardType) {
var listContainer = document.getElementById('card-selection-list');
listContainer.innerHTML = '
';
var apiUrl = mw.util.wikiScript('api');
var invokeText = ;
if (cardType === 'character') {
// 战斗员卡牌 - 使用当前战斗员的卡牌
var unitData = characterUnits[currentActiveUnit];
if (!unitData.characterName) {
listContainer.innerHTML = '
';
return;
}
invokeText = '错误: 找不到模块 "Module:卡牌/' + unitData.characterName + '"';
} else if (cardType === 'neutral') {
// 中立卡牌 - 根据战斗员职业筛选
var unitData = characterUnits[currentActiveUnit];
var characterClass = unitData.characterClass;
if (characterClass) {
invokeText = '错误: 没有找到职业为 "' + characterClass + '" 的中立卡牌';
} else {
invokeText = '
';
}
} else if (cardType === 'monster') {
// 怪物卡牌
invokeText = '
';
}
var params = {
action: 'parse',
format: 'json',
text: invokeText,
contentmodel: 'wikitext',
disablelimitreport: true,
wrapoutputclass:
};
fetch(apiUrl + '?' + new URLSearchParams(params))
.then(response => response.json())
.then(data => {
if (data.parse && data.parse.text) {
listContainer.innerHTML = data.parse.text['*'];
// 为每张卡牌添加点击事件
setTimeout(function() {
addCardSelectionHandlers(cardType);
}, 100);
} else {
listContainer.innerHTML = '
';
}
})
.catch(error => {
console.error('加载卡牌失败:', error);
listContainer.innerHTML = '
';
});
}
function addCardSelectionHandlers(cardType) {
var listContainer = document.getElementById('card-selection-list');
if (cardType === 'character') {
var wrappers = listContainer.querySelectorAll('.deck-card-wrapper');
wrappers.forEach(function(wrapper) {
wrapper.style.cursor = 'pointer';
wrapper.style.transition = 'transform 0.2s';
wrapper.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
});
wrapper.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
// 战斗员卡牌点击后
wrapper.addEventListener('click', function(e) {
e.stopPropagation();
// 获取卡牌信息
var cardName = this.getAttribute('data-card');
var card = this.querySelector('.card-small-wrapper');
if (!cardName && card) {
cardName = card.getAttribute('data-card');
}
if (!cardName) {
console.error('无法获取卡牌名称');
return;
}
// 检查是否有变体
var hasInspiration = card && card.querySelector('.inspiration-button');
var hasGodInspiration = card && card.querySelector('.god-inspiration-button');
if (hasInspiration || hasGodInspiration) {
// 有变体,显示一个提示框让用户选择
showVariantSelectionDialog(cardName, 'character');
} else {
// 没有变体,直接添加
addCardToDeckByName(cardName, 'character');
}
});
});
} else {
var cards = listContainer.querySelectorAll('.card-small-wrapper');
cards.forEach(function(card) {
card.style.cursor = 'pointer';
card.style.transition = 'transform 0.2s';
card.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
card.addEventListener('click', function(e) {
e.stopPropagation();
addCardToDeck(this, cardType);
});
});
}
}
// 新增:显示变体选择对话框
function showVariantSelectionDialog(cardName, cardType) {
// 创建临时对话框
var dialog = document.createElement('div');
dialog.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:30px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.3);z-index:10001;min-width:300px;';
var html = '
选择添加方式
'; html += '
卡牌: ' + cardName + '
'; html += '
';
dialog.innerHTML = html;
// 添加背景遮罩
var overlay = document.createElement('div');
overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10000;';
document.body.appendChild(overlay);
document.body.appendChild(dialog);
// 按钮悬停效果
dialog.querySelectorAll('.variant-option-btn').forEach(function(btn) {
btn.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-2px)';
this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.2)';
});
btn.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = 'none';
});
});
// 处理选择
dialog.addEventListener('click', function(e) {
var btn = e.target.closest('.variant-option-btn');
if (!btn) return;
var action = btn.getAttribute('data-action');
if (action === 'base') {
// 添加基础卡牌
addCardToDeckByName(cardName, cardType);
document.body.removeChild(overlay);
document.body.removeChild(dialog);
document.getElementById('card-modal').style.display = 'none';
} else if (action === 'view') {
// 先添加基础卡牌到deck,然后让用户点击查看变体
addCardToDeckByName(cardName, cardType, function() {
document.body.removeChild(overlay);
document.body.removeChild(dialog);
document.getElementById('card-modal').style.display = 'none';
// 提示用户
setTimeout(function() {
alert('卡牌已添加!现在您可以点击卡牌查看并选择变体。');
}, 300);
});
} else {
// 取消
document.body.removeChild(overlay);
document.body.removeChild(dialog);
}
});
}
function addCardToDeckByName(cardName, cardType, callback) {
if (!currentDeckArea || !currentActiveUnit) return;
var unitData = characterUnits[currentActiveUnit];
// 确定模块名称
var moduleName = ;
if (cardType === 'character') {
moduleName = unitData.characterName;
} else if (cardType === 'neutral') {
moduleName = '中立'; // 改回原来的
} else if (cardType === 'monster') {
moduleName = '怪物'; // 改回原来的
}
console.log('添加卡牌:', cardName, '类型:', cardType, '模块:', moduleName);
// 构建invoke调用
var invokeText = ;
if (cardType === 'character') {
invokeText = '错误: 找不到模块 "Module:卡牌/' + moduleName + '"';
} else if (cardType === 'neutral') {
invokeText = '错误: 找不到中立卡牌 "' + cardName + '"';
} else if (cardType === 'monster') {
invokeText = '错误: 找不到怪物 "' + cardName + '"';
}
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) {
// 创建卡牌容器
var wrapper = document.createElement('div');
wrapper.className = 'deck-card-wrapper';
wrapper.innerHTML = data.parse.text['*'];
wrapper.setAttribute('data-module', moduleName);
wrapper.setAttribute('data-card', cardName);
// 分配唯一ID
var uniqueId = 'deck-card-' + currentActiveUnit + '-' + (++unitData.cardIdCounter);
wrapper.setAttribute('data-unique-id', uniqueId);
wrapper.setAttribute('data-unit-index', currentActiveUnit);
// 记录卡牌数据
unitData.selectedCards[uniqueId] = {
module: moduleName,
cardName: cardName,
variantType: null,
variantParam: null,
variantIndex: null
};
// 添加到卡组区域
currentDeckArea.appendChild(wrapper);
// 添加删除按钮
setTimeout(function() {
var card = wrapper.querySelector('.card-small-wrapper');
if (card) {
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 unitData.selectedCards[uniqueId];
});
card.style.position = 'relative';
card.appendChild(deleteBtn);
}
// 重新设置全局监听
setupGlobalModalListener();
// 执行回调
if (callback) callback();
}, 100);
} else {
alert('添加卡牌失败');
}
})
.catch(error => {
console.error('添加卡牌失败:', error);
alert('添加卡牌出错:' + error.message);
});
}
// 修复问题4:添加卡牌到卡组(从元素获取信息)
function addCardToDeck(cardElement, cardType) {
if (!currentDeckArea || !currentActiveUnit) return;
var unitData = characterUnits[currentActiveUnit];
// 修复:多种方式获取卡牌名称
var cardName = cardElement.getAttribute('data-card-name') ||
cardElement.getAttribute('data-card');
// 如果还获取不到,尝试从父元素获取
if (!cardName) {
var parent = cardElement.closest('[data-card]');
if (parent) {
cardName = parent.getAttribute('data-card');
}
}
// 如果还获取不到,尝试从 data-card-name
if (!cardName) {
var parent = cardElement.closest('[data-card-name]');
if (parent) {
cardName = parent.getAttribute('data-card-name');
}
}
// 如果还获取不到,尝试从wrapper的data-card属性
if (!cardName) {
var wrapper = cardElement.closest('.deck-card-wrapper');
if (wrapper) {
cardName = wrapper.getAttribute('data-card');
}
}
if (!cardName) {
console.error('无法获取卡牌名称,尝试的元素:', cardElement);
alert('错误:无法获取卡牌名称');
return;
}
console.log('获取到卡牌名称:', cardName);
// 使用统一的添加方法
addCardToDeckByName(cardName, cardType, function() {
// 关闭卡牌选择弹窗
document.getElementById('card-modal').style.display = 'none';
});
}
// 关闭卡牌选择窗口
document.getElementById('close-card-modal').addEventListener('click', function() {
document.getElementById('card-modal').style.display = 'none';
});
document.getElementById('card-modal').addEventListener('click', function(e) {
if (e.target === this) {
this.style.display = 'none';
}
});
// ========== 装备选择功能 ==========
document.querySelectorAll('.equipment-slot').forEach(function(slot) {
slot.addEventListener('click', function() {
currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
var equipmentType = this.getAttribute('data-equipment-type');
// 设置弹窗标题
var titleMap = {
'weapon': '选择武器',
'armor': '选择装甲',
'ring': '选择戒指'
};
document.getElementById('equipment-modal-title').textContent = titleMap[equipmentType] || '选择装备';
// 加载装备列表
loadEquipmentList(equipmentType);
document.getElementById('equipment-modal').style.display = 'block';
});
});
document.getElementById('close-equipment-modal').addEventListener('click', function() {
document.getElementById('equipment-modal').style.display = 'none';
});
document.getElementById('equipment-modal').addEventListener('click', function(e) {
if (e.target === this) {
this.style.display = 'none';
}
});
function loadEquipmentList(equipmentType) {
var listContainer = document.getElementById('equipment-list');
listContainer.innerHTML = '
';
var categoryMap = {
'weapon': '武器',
'armor': '装甲',
'ring': '戒指'
};
var category = categoryMap[equipmentType];
// 使用 SMW ask 查询装备
var apiUrl = mw.util.wikiScript('api');
var askQuery = ;
var params = {
action: 'parse',
format: 'json',
text: askQuery,
contentmodel: 'wikitext',
disablelimitreport: true
};
fetch(apiUrl + '?' + new URLSearchParams(params))
.then(response => response.json())
.then(data => {
if (data.parse && data.parse.text) {
listContainer.innerHTML = data.parse.text['*'];
// 为每个装备添加点击事件
setTimeout(function() {
addEquipmentSelectionHandlers(equipmentType);
}, 100);
} else {
listContainer.innerHTML = '
';
}
})
.catch(error => {
console.error('加载装备失败:', error);
listContainer.innerHTML = '
';
});
}
function addEquipmentSelectionHandlers(equipmentType) {
var equipmentOptions = document.querySelectorAll('#equipment-list .equipment-option');
equipmentOptions.forEach(function(option) {
option.style.cursor = 'pointer';
option.style.transition = 'all 0.3s';
option.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.boxShadow = '0 5px 20px rgba(102,126,234,0.4)';
});
option.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
});
option.addEventListener('click', function() {
var equipmentId = this.getAttribute('data-equipment-id');
var equipmentImg = this.querySelector('img');
if (equipmentImg && currentActiveUnit) {
var unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
var slot = unit.querySelector('.equipment-slot[data-equipment-type="' + equipmentType + '"]');
// 克隆图片
var clonedImg = equipmentImg.cloneNode(true);
clonedImg.style.width = '100px';
clonedImg.style.height = '100px';
clonedImg.style.objectFit = 'contain';
slot.innerHTML = ;
slot.appendChild(clonedImg);
slot.style.border = 'none';
document.getElementById('equipment-modal').style.display = 'none';
}
});
});
}
// ========== 生成代码功能 ==========
var generateBtn = document.getElementById('generate-code');
if (generateBtn) {
generateBtn.addEventListener('click', function() {
var code = '{{配队模拟器\n';
// 遍历所有角色单元
document.querySelectorAll('.character-unit').forEach(function(unit, index) {
var unitIndex = unit.getAttribute('data-unit-index');
var unitData = characterUnits[unitIndex];
// 获取战斗员信息
var characterSlot = unit.querySelector('.character-slot .character-option');
if (!characterSlot) return;
var characterName = characterSlot.getAttribute('data-character-name') ||
characterSlot.getAttribute('data-name') ||
unitData.characterName;
if (!characterName) return;
// 获取伙伴信息
var partnerSlot = unit.querySelector('.partner-slot img');
var partnerId = ;
if (partnerSlot) {
var src = partnerSlot.src;
var match = src.match(/Portrait_character_wide_(.+?)\.png/);
if (match) partnerId = match[1];
}
// 角色编号
var unitNum = parseInt(unitIndex) + 1;
code += '|角色' + unitNum + '=' + characterName + '\n';
if (partnerId) {
code += '|伙伴' + unitNum + '=' + partnerId + '\n';
}
// 获取卡组信息
var cardWrappers = unit.querySelectorAll('.deck-area .deck-card-wrapper');
var cardIndex = 1;
cardWrappers.forEach(function(wrapper) {
var uniqueId = wrapper.getAttribute('data-unique-id');
var cardData = unitData.selectedCards[uniqueId];
if (!cardData) return;
var cardParam = '|卡牌' + unitNum + '-' + cardIndex + '=' + cardData.cardName;
if (cardData.variantType === '灵光一闪') {
cardParam += '|灵光' + unitNum + '-' + cardIndex + '=' + cardData.variantParam;
} else if (cardData.variantType === '神光一闪') {
cardParam += '|神光' + unitNum + '-' + cardIndex + '=' + cardData.variantParam + '-' + cardData.variantIndex;
}
code += cardParam + '\n';
cardIndex++;
});
});
code += '}}';
// 显示生成的代码
var codeOutput = document.getElementById('generated-code');
if (codeOutput) {
codeOutput.value = code;
document.getElementById('code-output').style.display = 'block';
}
});
}
// 复制代码
var copyBtn = document.getElementById('copy-code');
if (copyBtn) {
copyBtn.addEventListener('click', function() {
var codeArea = document.getElementById('generated-code');
if (codeArea) {
codeArea.select();
document.execCommand('copy');
this.textContent = '已复制!';
var btn = this;
setTimeout(function() {
btn.textContent = '复制代码';
}, 2000);
}
});
}
// 初始化:设置默认角色1为激活单元
currentActiveUnit = '0';
}
// 页面加载完成后初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTeamSimulator);
} else {
initTeamSimulator();
}
})(); </script>
<style> .team-simulator {
max-width: 1400px; margin: 20px auto; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.team-container {
display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;
}
.character-unit {
background: white; border-radius: 12px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 400px; max-width: 450px;
}
.unit-header {
display: flex; gap: 15px; margin-bottom: 20px;
}
.character-slot, .partner-slot {
border: 2px dashed #ccc; border-radius: 8px; cursor: pointer; transition: all 0.3s; overflow: hidden; background: #f9f9f9;
}
.character-slot {
width: 150px; height: 150px;
}
.partner-slot {
width: 150px; height: 77px;
}
.character-slot:hover, .partner-slot:hover {
border-color: #667eea; background: #f0f0ff; transform: scale(1.02);
}
.placeholder {
display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 14px; text-align: center; padding: 10px;
}
/* 修复问题1:卡组区域样式 */ .deck-area {
display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: flex-start; min-height: 360px; width: 100%; padding: 10px; border: 2px dashed #e0e0e0; border-radius: 8px; background: white; cursor: pointer; transition: all 0.3s; box-sizing: border-box;
}
.deck-area:hover {
border-color: #667eea; background: #f9f9ff;
}
.deck-card-wrapper {
position: relative; flex-shrink: 0;
}
/* 模态框样式 */ .modal {
display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); overflow: auto;
}
.modal-content {
background-color: #fefefe; margin: 3% auto; padding: 0; border-radius: 15px; width: 90%; max-width: 1200px; box-shadow: 0 10px 50px rgba(0,0,0,0.3); max-height: 90vh; display: flex; flex-direction: column;
}
.modal-header {
padding: 20px 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 15px 15px 0 0; display: flex; justify-content: space-between; align-items: center;
}
.modal-header h2 {
margin: 0; font-size: 24px;
}
.modal-body {
padding: 30px; overflow-y: auto; flex: 1;
}
.close {
color: white; font-size: 32px; font-weight: bold; cursor: pointer; line-height: 1; transition: all 0.3s;
}
.close:hover {
transform: scale(1.2); text-shadow: 0 0 10px rgba(255,255,255,0.8);
}
/* 角色列表 */
- character-list, #partner-list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px;
}
.character-option, .partner-option {
cursor: pointer; padding: 10px; border: 2px solid transparent; border-radius: 12px; transition: all 0.3s; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.character-option:hover, .partner-option:hover {
border-color: #667eea; transform: translateY(-5px); box-shadow: 0 5px 20px rgba(102,126,234,0.4);
}
.character-option img, .partner-option img {
width: 100%; height: auto; border-radius: 8px;
}
/* 卡牌类型标签 */ .card-type-tabs {
display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #e0e0e0;
}
.card-type-tab {
padding: 12px 24px; cursor: pointer; border: none; background: none; font-size: 16px; font-weight: normal; color: #666; border-bottom: 3px solid transparent; transition: all 0.3s;
}
.card-type-tab:hover {
color: #667eea;
}
.card-type-tab.active {
color: #667eea; border-bottom-color: #667eea; font-weight: bold;
}
/* 卡牌选择列表 */
- card-selection-list {
display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;
}
/* 生成按钮 */ .generate-section {
text-align: center; margin-top: 30px;
}
- generate-code {
padding: 15px 40px; font-size: 18px; font-weight: bold; color: white; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 5px 15px rgba(102,126,234,0.4); transition: all 0.3s;
}
- generate-code:hover {
transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102,126,234,0.6);
}
/* 代码输出 */
- code-output {
display: none; margin-top: 20px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
- generated-code {
width: 100%; min-height: 200px; padding: 15px; font-family: 'Courier New', monospace; font-size: 14px; border: 2px solid #e0e0e0; border-radius: 8px; resize: vertical;
}
- copy-code {
margin-top: 10px; padding: 10px 30px; font-size: 16px; color: white; background: linear-gradient(135deg, #28a745 0%, #218838 100%); border: none; border-radius: 25px; cursor: pointer; transition: all 0.3s;
}
- copy-code:hover {
transform: scale(1.05); box-shadow: 0 5px 15px rgba(40,167,69,0.4);
}
/* 删除按钮 */ .card-delete-btn {
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; transition: all 0.2s;
}
.card-delete-btn:hover {
background: rgba(255,0,0,0.9); transform: scale(1.2);
}
/* 响应式设计 */ @media (max-width: 768px) {
.team-container {
flex-direction: column;
}
.character-unit {
min-width: 100%;
}
#character-list, #partner-list {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.modal-content {
width: 95%;
margin: 5% auto;
}
} </style>









































