伤害120%
目标的行动次数为5以上时，获得2点AP
配队模拟器：修订间差异
来自卡厄思梦境WIKI
无编辑摘要 |
无编辑摘要 |
||
| 第1,244行： | 第1,244行： | ||
.character-unit:hover { | .character-unit:hover { | ||
box-shadow: 0 2px 8px rgba(0,0,0,0.1); | box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||
} | |||
.card-type-tab { | |||
transition: all 0.3s; | |||
user-select: none; | |||
} | |||
.card-type-tab:hover { | |||
background: #f5f5f5; | |||
} | |||
.card-type-tab.active { | |||
color: #667eea; | |||
} | |||
#card-selection-list .card-small-wrapper { | |||
transition: transform 0.2s, box-shadow 0.2s; | |||
} | |||
#card-selection-list .card-small-wrapper:hover { | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.2); | |||
} | |||
.deck-card-wrapper { | |||
display: inline-block; | |||
} | } | ||
</style> | </style> | ||
2025年11月1日 (六) 15:35的版本
<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,
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['*'];
deckArea.style.border = 'none';
deckArea.style.padding = '0px';
// 重置该单元的卡牌状态
unitData.selectedCards = {};
unitData.cardIdCounter = 0;
// 为每张卡牌添加功能
setTimeout(function() {
initializeCardFeatures(unitIndex);
}, 100);
} else {
deckArea.innerHTML = '
加载卡牌失败
';
}
})
.catch(error => {
console.error('加载卡牌失败:', error);
deckArea.innerHTML = '
加载卡牌出错：' + error.message + '
';
});
}
// 初始化卡牌功能 - 支持多角色
function initializeCardFeatures(unitIndex) {
var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
var unitData = characterUnits[unitIndex];
var wrappers = unit.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-' + 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');
if (!characterName) {
var nameEl = characterOption.querySelector('.character-name, [class*="name"]');
if (nameEl) characterName = nameEl.textContent.trim();
}
console.log('选中的战斗员:', characterName, '单元:', currentActiveUnit);
// 克隆卡片显示
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')) {
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('.character-option') !== null;
if (!hasCharacter) {
alert('请先选择战斗员！');
return;
}
// 重置为战斗员卡牌选项
currentCardType = 'character';
document.querySelectorAll('.card-type-tab').forEach(function(tab) {
tab.classList.remove('active');
tab.style.borderBottomColor = 'transparent';
});
document.querySelector('.card-type-tab[data-type="character"]').classList.add('active');
document.querySelector('.card-type-tab[data-type="character"]').style.borderBottomColor = '#667eea';
// 显示弹窗
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 unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
var characterSlot = unit.querySelector('.character-slot .character-option');
var characterClass = characterSlot ? characterSlot.getAttribute('data-class') : null;
if (characterClass) {
invokeText = '脚本错误：没有“中立卡牌”这个模块。';
} 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 = '
加载卡牌出错：' + error.message + '
';
});
}
// 为卡牌添加选择事件
function addCardSelectionHandlers(cardType) {
var cards = document.querySelectorAll('#card-selection-list .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 addCardToDeck(cardElement, cardType) {
if (!currentDeckArea || !currentActiveUnit) return;
var unitData = characterUnits[currentActiveUnit];
// 获取卡牌信息
var cardName = cardElement.getAttribute('data-card-name') ||
cardElement.getAttribute('data-card') ||
cardElement.closest('[data-card]').getAttribute('data-card');
if (!cardName) {
console.error('无法获取卡牌名称');
return;
}
// 确定模块名称
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 = '错误: 找不到模块 "Module:卡牌/' + moduleName + '"';
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 isEmpty = currentDeckArea.querySelector('div[style*="font-size: 48px"]') !== null;
if (isEmpty) {
// 清空初始占位符
currentDeckArea.innerHTML = ;
currentDeckArea.style.border = 'none';
currentDeckArea.style.padding = '0px';
currentDeckArea.style.display = 'flex';
currentDeckArea.style.flexWrap = 'wrap';
currentDeckArea.style.gap = '10px';
}
// 创建卡牌包装器
var wrapper = document.createElement('div');
wrapper.className = 'deck-card-wrapper';
wrapper.innerHTML = data.parse.text['*'];
// 分配唯一ID
var uniqueId = 'deck-card-' + currentActiveUnit + '-' + (++unitData.cardIdCounter);
wrapper.setAttribute('data-unique-id', uniqueId);
wrapper.setAttribute('data-unit-index', currentActiveUnit);
wrapper.setAttribute('data-module', moduleName);
wrapper.setAttribute('data-card', cardName);
// 记录卡牌状态
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];
// 如果卡组为空，恢复占位符
if (currentDeckArea.children.length === 0) {
currentDeckArea.innerHTML = '
+
';
currentDeckArea.style.border = '2px dashed #ccc';
currentDeckArea.style.padding = '20px';
currentDeckArea.style.display = 'flex';
currentDeckArea.style.alignItems = 'center';
currentDeckArea.style.justifyContent = 'center';
}
});
card.style.position = 'relative';
card.appendChild(deleteBtn);
}
// 重新设置全局监听
setupGlobalModalListener();
}, 100);
// 关闭弹窗
document.getElementById('card-modal').style.display = 'none';
}
})
.catch(error => {
console.error('添加卡牌失败:', error);
alert('添加卡牌失败: ' + error.message);
});
}
// 关闭卡牌选择弹窗
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';
}
});
// 选择装备
// 装备类型映射
var equipmentTypes = {
'weapon': { type: '武器', title: '选择武器' },
'armor': { type: '装甲', title: '选择装甲' },
'ring': { type: '戒指', title: '选择戒指' }
};
// 当前选择的装备槽位
var currentEquipmentSlot = null;
// 装备槽位点击事件
document.querySelectorAll('.equipment-slot').forEach(function(slot) {
slot.addEventListener('click', function() {
currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
currentEquipmentSlot = this;
var equipmentType = this.getAttribute('data-equipment-type');
loadEquipmentList(equipmentTypes[equipmentType]);
});
});
// 加载装备列表
function loadEquipmentList(equipmentInfo) {
// 设置标题
document.getElementById('equipment-modal-title').textContent = equipmentInfo.title;
// 显示加载中
var equipmentList = document.getElementById('equipment-list');
equipmentList.innerHTML = '
加载中...
';
// 显示模态框
document.getElementById('equipment-modal').style.display = 'block';
// 通过API调用模块获取装备HTML
var apiUrl = mw.util.wikiScript('api');
var params = {
action: 'parse',
format: 'json',
text: '
',
contentmodel: 'wikitext',
disablelimitreport: true,
wrapoutputclass:
};
fetch(apiUrl + '?' + new URLSearchParams(params))
.then(response => response.json())
.then(data => {
if (data.parse && data.parse.text) {
equipmentList.innerHTML = data.parse.text['*'];
// 为每个装备添加点击事件
setTimeout(function() {
addEquipmentClickHandlers();
}, 100);
} else {
equipmentList.innerHTML = '
加载装备失败
';
}
})
.catch(error => {
console.error('加载装备失败:', error);
equipmentList.innerHTML = '
加载装备出错：' + error.message + '
';
});
}
// 为装备添加点击事件
function addEquipmentClickHandlers() {
var equipmentCards = document.querySelectorAll('#equipment-list > div > div[style*="position:relative"]');
equipmentCards.forEach(function(card) {
card.style.cursor = 'pointer';
card.addEventListener('click', function() {
selectEquipment(card);
});
});
}
// 选择装备
function selectEquipment(equipmentCard) {
if (!currentEquipmentSlot) return;
// 克隆装备卡片
var clonedCard = equipmentCard.cloneNode(true);
clonedCard.style.cursor = 'default';
clonedCard.style.margin = '0';
// 调整尺寸以适应槽位
clonedCard.style.width = '100px';
clonedCard.style.height = '100px';
// 调整内部元素尺寸
var innerElements = clonedCard.querySelectorAll('div');
innerElements.forEach(function(el) {
if (el.style.width === '124px') el.style.width = '100px';
if (el.style.height === '124px') el.style.height = '100px';
if (el.style.width === '112px') el.style.width = '88px';
if (el.style.height === '112px') el.style.height = '88px';
if (el.style.width === '110px') el.style.width = '86px';
if (el.style.height === '110px') el.style.height = '86px';
if (el.style.top === '7px') el.style.top = '6px';
if (el.style.left === '7px') el.style.left = '6px';
if (el.style.top === '6px') el.style.top = '5px';
if (el.style.left === '6px') el.style.left = '5px';
});
// 调整图片大小
var imgs = clonedCard.querySelectorAll('img');
imgs.forEach(function(img) {
if (img.style.width === '124px' || img.width === 124) {
img.style.width = '100px';
img.style.height = '100px';
}
if (img.style.width === '112px' || img.width === 112) {
img.style.width = '88px';
img.style.height = '88px';
}
});
// 隐藏或缩小装备名称
var nameDiv = clonedCard.querySelector('div[style*="bottom"]');
if (nameDiv) {
nameDiv.style.fontSize = '10px';
nameDiv.style.bottom = '2px';
nameDiv.style.left = '2px';
}
// 放置到对应槽位
currentEquipmentSlot.innerHTML = ;
currentEquipmentSlot.appendChild(clonedCard);
currentEquipmentSlot.style.border = 'none';
currentEquipmentSlot.style.padding = '0';
// 关闭模态框
document.getElementById('equipment-modal').style.display = 'none';
currentEquipmentSlot = null;
}
// 关闭装备选择窗口
document.getElementById('close-equipment-modal').addEventListener('click', function() {
document.getElementById('equipment-modal').style.display = 'none';
currentEquipmentSlot = null;
});
// 点击遮罩层关闭装备窗口
document.getElementById('equipment-modal').addEventListener('click', function(e) {
if (e.target === this) {
this.style.display = 'none';
currentEquipmentSlot = null;
}
});
// ========== 保存为图片功能 ==========
document.getElementById('save-team-btn').addEventListener('click', function() {
saveTeamAsImage();
});
function saveTeamAsImage() {
var button = document.getElementById('save-team-btn');
var originalText = button.textContent;
button.textContent = '正在生成图片...';
button.style.pointerEvents = 'none';
button.style.opacity = '0.6';
// 动态加载html2canvas库
if (typeof html2canvas === 'undefined') {
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
script.onload = function() {
captureTeam(button, originalText);
};
script.onerror = function() {
alert('加载图片生成库失败，请检查网络连接');
button.textContent = originalText;
button.style.pointerEvents = ;
button.style.opacity = ;
};
document.head.appendChild(script);
} else {
captureTeam(button, originalText);
}
}
function captureTeam(button, originalText) {
var teamContent = document.getElementById('team-content');
// 临时隐藏删除按钮
var deleteButtons = teamContent.querySelectorAll('.card-delete-btn');
deleteButtons.forEach(function(btn) {
btn.style.display = 'none';
});
// 预加载所有图片
var images = teamContent.querySelectorAll('img');
var imagePromises = [];
images.forEach(function(img) {
if (img.complete) return;
var promise = new Promise(function(resolve) {
if (img.complete) {
resolve();
} else {
img.onload = resolve;
img.onerror = resolve; // 即使失败也继续
// 5秒超时
setTimeout(resolve, 5000);
}
});
imagePromises.push(promise);
});
// 显示进度提示
var progressInterval = setInterval(function() {
var dots = button.textContent.match(/\./g);
var dotCount = dots ? dots.length : 0;
if (dotCount >= 3) {
button.textContent = '正在生成图片';
} else {
button.textContent += '.';
}
}, 500);
// 等待所有图片加载完成（或超时）
Promise.all(imagePromises).then(function() {
// 使用优化的配置
return html2canvas(teamContent, {
backgroundColor: '#ffffff',
scale: 1.5, // 降低到1.5倍，平衡质量和速度
logging: false,
useCORS: true,
allowTaint: true,
imageTimeout: 5000, // 5秒图片加载超时
removeContainer: true, // 渲染后立即清理
foreignObjectRendering: false, // 禁用可能较慢的外部对象渲染
// 忽略某些可能导致问题的元素
ignoreElements: function(element) {
// 忽略隐藏元素
if (element.style.display === 'none') return true;
// 忽略模态框
if (element.className && typeof element.className === 'string') {
if (element.className.includes('modal') ||
element.className.includes('card-delete-btn')) {
return true;
}
}
return false;
}
});
}).then(function(canvas) {
clearInterval(progressInterval);
// 恢复删除按钮
deleteButtons.forEach(function(btn) {
btn.style.display = ;
});
// 使用更高质量的图片格式
canvas.toBlob(function(blob) {
var url = URL.createObjectURL(blob);
var link = document.createElement('a');
var timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
link.download = '队伍配置_' + timestamp + '.png';
link.href = url;
link.click();
// 延迟释放URL，确保下载完成
setTimeout(function() {
URL.revokeObjectURL(url);
}, 100);
button.textContent = '保存成功!';
setTimeout(function() {
button.textContent = originalText;
button.style.pointerEvents = ;
button.style.opacity = ;
}, 2000);
}, 'image/png', 0.95); // 设置图片质量
}).catch(function(error) {
clearInterval(progressInterval);
console.error('生成图片失败:', error);
alert('生成图片失败: ' + error.message);
// 恢复删除按钮
deleteButtons.forEach(function(btn) {
btn.style.display = ;
});
button.textContent = originalText;
button.style.pointerEvents = ;
button.style.opacity = ;
});
}
// 页面卸载时清理
window.addEventListener('beforeunload', function() {
if (window.deckModalObserver) {
window.deckModalObserver.disconnect();
}
// 确保恢复滚动
document.body.style.overflow = ;
document.documentElement.style.overflow = ;
});
// 监听所有模态框关闭，确保滚动恢复
setInterval(function() {
var hasOpenModal = false;
document.querySelectorAll('.card-modal, #character-modal, #partner-modal, #equipment-modal').forEach(function(modal) {
if (modal.style.display !== 'none' && modal.style.display !== ) {
hasOpenModal = true;
}
});
if (!hasOpenModal) {
// 没有打开的模态框，确保滚动正常
document.body.style.overflow = ;
document.documentElement.style.overflow = ;
document.body.style.position = ;
}
}, 500);
}
// 确保DOM加载完成后执行
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTeamSimulator);
} else {
initTeamSimulator();
}
})(); </script>
<style> .character-option {
cursor: pointer; transition: transform 0.2s;
}
.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);
}
body.modal-open {
overflow: auto !important; position: static !important;
}
html.modal-open {
overflow: auto !important;
}
.card-modal {
position: fixed !important; overflow: auto !important;
}
- team-simulator {
position: relative; overflow: visible;
}
.deck-card-wrapper {
position: relative;
}
.select-variant-btn {
position: relative; z-index: 10;
}
.inspiration-view, .god-inspiration-view {
max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 20px 10px;
}
.inspiration-variants-container, .god-groups-container {
width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.inspiration-variant {
width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center;
}
.god-group {
width: 100%; max-width: 800px; display: flex; flex-direction: column; align-items: center;
}
.god-variants-row {
display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 10px;
}
.god-variant-card {
display: flex; flex-direction: column; align-items: center;
}
.card-modal-content {
position: relative; padding-top: 60px !important;
}
.card-modal .modal-back-button {
position: absolute; top: 10px; left: 10px; z-index: 1001;
}
.inspiration-view > *:first-child, .god-inspiration-view > *:first-child {
margin-top: 0;
}
- save-team-btn:hover {
transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); opacity: 0.95;
}
- save-team-btn:active {
transform: translateY(0); box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.character-unit {
transition: box-shadow 0.3s;
}
.character-unit:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-type-tab {
transition: all 0.3s; user-select: none;
}
.card-type-tab:hover {
background: #f5f5f5;
}
.card-type-tab.active {
color: #667eea;
}
- card-selection-list .card-small-wrapper {
transition: transform 0.2s, box-shadow 0.2s;
}
- card-selection-list .card-small-wrapper:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.deck-card-wrapper {
display: inline-block;
} </style>