配队模拟器：修订间差异
来自卡厄思梦境WIKI
无编辑摘要 |
无编辑摘要 |
||
| 第15行： | 第15行： | ||
const modal = document.getElementById('selection-modal'); | const modal = document.getElementById('selection-modal'); | ||
const content = document.getElementById('modal-content'); | const content = document.getElementById('modal-content'); | ||
if (!modal || !content) { | |||
console.error('Modal elements not found'); | |||
return; | |||
} | |||
switch(type) { | switch(type) { | ||
| 第86行： | 第91行： | ||
function closeSelectionModal() { | function closeSelectionModal() { | ||
const modal = document.getElementById('selection-modal'); | const modal = document.getElementById('selection-modal'); | ||
modal.style.display = 'none'; | if (modal) { | ||
modal.style.display = 'none'; | |||
document.body.style.overflow = 'auto'; | |||
} | |||
} | } | ||
| 第186行： | 第193行： | ||
currentSelection.character = name; | currentSelection.character = name; | ||
const slot = document.getElementById('character-slot'); | const slot = document.getElementById('character-slot'); | ||
slot.innerHTML = `[[File:战斗员图鉴_${name}.png|150px|link=]]`; | if (slot) { | ||
slot.innerHTML = `[[File:战斗员图鉴_${name}.png|150px|link=]]`; | |||
slot.style.justifyContent = 'center'; | |||
} | |||
} | } | ||
| 第194行： | 第203行： | ||
currentSelection.partner = name; | currentSelection.partner = name; | ||
const slot = document.getElementById('partner-slot'); | const slot = document.getElementById('partner-slot'); | ||
slot.innerHTML = `[[File:face_character_wide_${id}.png|150px|link=]]`; | if (slot) { | ||
slot.innerHTML = `[[File:face_character_wide_${id}.png|150px|link=]]`; | |||
slot.style.justifyContent = 'center'; | |||
} | |||
} | } | ||
| 第208行： | 第219行： | ||
currentSelection.weapon = name; | currentSelection.weapon = name; | ||
const slot = document.getElementById('weapon-slot'); | const slot = document.getElementById('weapon-slot'); | ||
slot.innerHTML = generateEquipmentDisplay(name, id); | if (slot) { | ||
slot.innerHTML = generateEquipmentDisplay(name, id); | |||
slot.style.justifyContent = 'center'; | |||
} | |||
} | } | ||
| 第216行： | 第229行： | ||
currentSelection.armor = name; | currentSelection.armor = name; | ||
const slot = document.getElementById('armor-slot'); | const slot = document.getElementById('armor-slot'); | ||
slot.innerHTML = generateEquipmentDisplay(name, id); | if (slot) { | ||
slot.innerHTML = generateEquipmentDisplay(name, id); | |||
slot.style.justifyContent = 'center'; | |||
} | |||
} | } | ||
| 第224行： | 第239行： | ||
currentSelection.ring = name; | currentSelection.ring = name; | ||
const slot = document.getElementById('ring-slot'); | const slot = document.getElementById('ring-slot'); | ||
slot.innerHTML = generateEquipmentDisplay(name, id); | if (slot) { | ||
slot.innerHTML = generateEquipmentDisplay(name, id); | |||
slot.style.justifyContent = 'center'; | |||
} | |||
} | } | ||
// 生成装备显示 | // 生成装备显示 | ||
function generateEquipmentDisplay(name, id) { | function generateEquipmentDisplay(name, id) { | ||
const formattedId = id.toString().padStart(4, '0'); | |||
return ` | return ` | ||
<div style="position:relative;width:124px;height:124px"> | <div style="position:relative;width:124px;height:124px"> | ||
<div style="position:absolute;top:0px;left:0px">[[File:frame_item_rarity_金.png|124px]]</div> | <div style="position:absolute;top:0px;left:0px">[[File:frame_item_rarity_金.png|124px]]</div> | ||
<div style="position:absolute;top:8px;left:8px;width:108px;height:108px;border:1px solid #fff;"></div> | <div style="position:absolute;top:8px;left:8px;width:108px;height:108px;border:1px solid #fff;"></div> | ||
<div style="position:absolute;top:6px;left:6px;">[[File:relic_${ | <div style="position:absolute;top:6px;left:6px;">[[File:relic_${formattedId}.png|112px|center]]</div> | ||
<div style="position:absolute;bottom:2px;left:6px;">{{描边|黑|${name}}}</div> | <div style="position:absolute;bottom:2px;left:6px;">{{描边|黑|${name}}}</div> | ||
</div>`; | </div>`; | ||
| 第242行： | 第260行： | ||
function updateDeckDisplay() { | function updateDeckDisplay() { | ||
const deckArea = document.getElementById('deck-area'); | const deckArea = document.getElementById('deck-area'); | ||
if (!deckArea) return; | |||
if (currentSelection.cards.length === 0) { | if (currentSelection.cards.length === 0) { | ||
deckArea.innerHTML = '<div style="font-size: 48px; color: #ccc;">+</div>'; | deckArea.innerHTML = '<div style="font-size: 48px; color: #ccc;">+</div>'; | ||
| 第256行： | 第276行： | ||
deckArea.innerHTML = 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'); | openSelectionModal('character'); | ||
}); | }); | ||
// 伙伴选择 | // 伙伴选择 | ||
safeAddEventListener('partner-slot', 'click', function() { | |||
openSelectionModal('partner'); | openSelectionModal('partner'); | ||
}); | }); | ||
// 卡组选择 | // 卡组选择 | ||
safeAddEventListener('deck-area', 'click', function() { | |||
openSelectionModal('card'); | openSelectionModal('card'); | ||
}); | }); | ||
// 装备选择 | // 装备选择 | ||
safeAddEventListener('weapon-slot', 'click', function() { | |||
openSelectionModal('weapon'); | openSelectionModal('weapon'); | ||
}); | }); | ||
safeAddEventListener('armor-slot', 'click', function() { | |||
openSelectionModal('armor'); | openSelectionModal('armor'); | ||
}); | }); | ||
safeAddEventListener('ring-slot', 'click', function() { | |||
openSelectionModal('ring'); | 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> | </script> | ||
| 第293行： | 第358行： | ||
.selection-slot { | .selection-slot { | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
cursor: pointer; | |||
} | } | ||
| 第303行： | 第369行： | ||
cursor: pointer; | cursor: pointer; | ||
transition: transform 0.2s ease; | transition: transform 0.2s ease; | ||
display: inline-block; | |||
margin: 5px; | |||
} | } | ||
| 第315行： | 第383行： | ||
.card-in-deck:hover { | .card-in-deck:hover { | ||
opacity: 0.8; | opacity: 0.8; | ||
} | |||
/* 模态框样式改进 */ | |||
#selection-modal { | |||
transition: opacity 0.3s ease; | |||
} | |||
#selection-modal > div { | |||
transition: transform 0.3s ease; | |||
} | } | ||
</style> | </style> | ||
2025年10月18日 (六) 20:12的版本
<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>