微件:配队模拟器
来自卡厄思梦境WIKI
<script> // 存储当前选择状态 let currentSelection = {
character: null, partner: null, cards: [], weapon: null, 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 = `
`;
break;
case 'partner':
content.innerHTML = `
`;
break;
case 'card':
// 需要先选择角色才能选择卡牌
if (!currentSelection.character) {
alert('请先选择角色');
return;
}
content.innerHTML = generateCardSelection();
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 `
选择卡牌 - ${currentSelection.character}
错误: 找不到模块 "Module:卡牌/角色模块"
错误: 找不到模块 "Module:卡牌/角色模块"
错误: 找不到模块 "Module:卡牌/角色模块"
错误: 找不到模块 "Module:卡牌/角色模块"
错误: 找不到模块 "Module:卡牌/角色模块"
错误: 找不到模块 "Module:卡牌/角色模块"
错误: 找不到模块 "Module:卡牌/角色模块"
错误: 找不到模块 "Module:卡牌/角色模块"
错误: 找不到模块 "Module:卡牌/角色模块"
`;
}
// 生成装备选择界面 function generateEquipmentSelection(type) {
return `
选择${type}
`;
}
// 添加选择事件 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 `
[[File:relic_${formattedId}.png|112px|center]]
${name}
`;
}
// 更新卡组显示 function updateDeckDisplay() {
const deckArea = document.getElementById('deck-area');
if (!deckArea) return;
if (currentSelection.cards.length === 0) {
deckArea.innerHTML = '
+
';
return; }
let cardsHTML = '
';
`;
currentSelection.cards.forEach(card => {
cardsHTML += ` 错误: 找不到模块 "Module:卡牌/角色模块"}
});cardsHTML += '
';
deckArea.innerHTML = cardsHTML;
}
// 安全的元素绑定函数 function safeAddEventListener(elementId, event, handler) {
const element = document.getElementById(elementId);
if (element) {
element.addEventListener(event, handler);
} else {
console.warn(`Element with id '${elementId}' not found`);
}
}
// 初始化点击事件 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>
<style> .selection-slot {
transition: all 0.3s ease; cursor: pointer;
}
.selection-slot:hover {
border-color: #666; background: #f8f8f8;
}
.selection-item {
cursor: pointer; transition: transform 0.2s ease; display: inline-block; margin: 5px;
}
.selection-item:hover {
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>