mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
635 lines
28 KiB
JavaScript
635 lines
28 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
||
// State
|
||
let currentStep = 1;
|
||
let selectedDevice = null;
|
||
let selectedEdition = 'java';
|
||
const totalSteps = 4;
|
||
|
||
// Elements
|
||
const prevBtn = document.getElementById('btn-prev');
|
||
const nextBtn = document.getElementById('btn-next');
|
||
// Updated selector for new sidebar structure
|
||
const stepIndicators = document.querySelectorAll('.progress-step');
|
||
const stepContents = document.querySelectorAll('.step-content');
|
||
const conventionContent = document.getElementById('convention-content');
|
||
|
||
if (!conventionContent) {
|
||
console.error('Critical Error: Element #convention-content not found in DOM');
|
||
return;
|
||
}
|
||
|
||
const agreeCheckbox = document.getElementById('agree-checkbox');
|
||
const deviceCards = document.querySelectorAll('.device-card');
|
||
const recommendationSection = document.getElementById('launcher-recommendation');
|
||
const recommendationContent = document.getElementById('recommendation-content');
|
||
const tutorialContent = document.getElementById('tutorial-content');
|
||
const step4Buttons = document.getElementById('step4-buttons');
|
||
const mainWizardActions = document.querySelector('.wizard-actions');
|
||
const editionSelector = document.getElementById('edition-selector');
|
||
const editionBtns = document.querySelectorAll('.edition-btn');
|
||
|
||
console.log('DOM Elements loaded. Step contents found:', stepContents.length);
|
||
|
||
// Fallback if marked is not loading correctly
|
||
if (typeof marked === 'undefined') {
|
||
console.warn("Marked not defined globally, checking for window.marked");
|
||
if (window.marked) {
|
||
console.log("Found window.marked");
|
||
// Assign to local variable if needed or just use window.marked
|
||
}
|
||
}
|
||
|
||
// --- Step 1: Convention Loading ---
|
||
console.log('Fetching convention from data/convention.md ...');
|
||
fetch('data/convention.md')
|
||
.then(response => {
|
||
console.log('Response status:', response.status);
|
||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||
return response.text();
|
||
})
|
||
.then(markdown => {
|
||
console.log('Convention loaded, length:', markdown.length);
|
||
|
||
let parser = null;
|
||
if (typeof marked !== 'undefined') {
|
||
if (typeof marked.parse === 'function') parser = marked.parse;
|
||
else if (typeof marked === 'function') parser = marked;
|
||
} else if (window.marked) {
|
||
if (typeof window.marked.parse === 'function') parser = window.marked.parse;
|
||
else if (typeof window.marked === 'function') parser = window.marked;
|
||
}
|
||
|
||
if (parser) {
|
||
try {
|
||
const result = parser(markdown);
|
||
if (result instanceof Promise) {
|
||
result.then(html => conventionContent.innerHTML = html);
|
||
} else {
|
||
conventionContent.innerHTML = result;
|
||
}
|
||
} catch (e) {
|
||
console.error('Parse error:', e);
|
||
conventionContent.innerHTML = '<pre>' + markdown + '</pre>';
|
||
}
|
||
} else {
|
||
console.error('No markdown parser found');
|
||
conventionContent.innerHTML = '<pre>' + markdown + '</pre>';
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Convention fetch error:', error);
|
||
conventionContent.innerHTML = `<p style="color:red">无法加载公约内容: ${error.message}</p>`;
|
||
});
|
||
|
||
// --- Navigation Logic ---
|
||
function updateWizard() {
|
||
console.log('UpdateWizard called, step:', currentStep);
|
||
|
||
// Update Indicators
|
||
stepIndicators.forEach(indicator => {
|
||
const step = parseInt(indicator.dataset.step);
|
||
if (step === currentStep) {
|
||
indicator.classList.add('active');
|
||
indicator.classList.remove('completed');
|
||
|
||
// Scroll into view on mobile
|
||
if (window.innerWidth <= 800) {
|
||
indicator.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'nearest',
|
||
inline: 'center'
|
||
});
|
||
}
|
||
} else if (step < currentStep) {
|
||
indicator.classList.add('completed');
|
||
indicator.classList.remove('active');
|
||
} else {
|
||
indicator.classList.remove('active', 'completed');
|
||
}
|
||
});
|
||
|
||
// Update Progress Bar Fill
|
||
const progressFill = document.getElementById('progress-fill');
|
||
if (progressFill) {
|
||
const progress = ((currentStep - 1) / (totalSteps - 1)) * 100;
|
||
progressFill.style.width = `${progress}%`;
|
||
}
|
||
|
||
// Update Content visibility with Animation timeout
|
||
stepContents.forEach(content => {
|
||
if (content.id === `step-${currentStep}`) {
|
||
content.classList.add('active');
|
||
// Optional: ensure display block if handled by CSS alone or JS
|
||
} else {
|
||
content.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// Buttons State
|
||
updateButtons();
|
||
}
|
||
|
||
function updateButtons() {
|
||
// Prev Button
|
||
if (prevBtn) prevBtn.disabled = currentStep === 1;
|
||
|
||
// Next Button logic
|
||
if (currentStep === 1) {
|
||
// Step 1: Checkbox required
|
||
if (nextBtn) nextBtn.disabled = !agreeCheckbox.checked;
|
||
} else if (currentStep === 2) {
|
||
// Step 2: Device selection required
|
||
if (nextBtn) nextBtn.disabled = !selectedDevice;
|
||
} else {
|
||
if (nextBtn) nextBtn.disabled = false;
|
||
}
|
||
|
||
// Step 4 special buttons visibility
|
||
if (currentStep === totalSteps) {
|
||
if (nextBtn) nextBtn.style.display = 'none';
|
||
if (step4Buttons) step4Buttons.classList.remove('hidden');
|
||
} else {
|
||
if (nextBtn) nextBtn.style.display = 'inline-flex';
|
||
if (step4Buttons) step4Buttons.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
if (prevBtn) {
|
||
prevBtn.addEventListener('click', () => {
|
||
if (currentStep > 1) {
|
||
currentStep--;
|
||
updateWizard();
|
||
}
|
||
});
|
||
}
|
||
|
||
if (nextBtn) {
|
||
nextBtn.addEventListener('click', () => {
|
||
if (currentStep < totalSteps) {
|
||
if (currentStep === 2) {
|
||
renderTutorial(); // Generate step 3 content before showing
|
||
// Also scroll to top for better ux
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
currentStep++;
|
||
updateWizard();
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
});
|
||
}
|
||
|
||
// Step 1 Checkbox
|
||
if (agreeCheckbox) {
|
||
agreeCheckbox.addEventListener('change', updateButtons);
|
||
}
|
||
|
||
// --- Step 2: Device Selection ---
|
||
const deviceData = {
|
||
pc: {
|
||
title: "电脑版 (Java Edition)",
|
||
recommendations: [
|
||
{
|
||
name: "PCL2",
|
||
icon: "fas fa-cube",
|
||
desc: "界面精美，功能强大的现代化启动器（仅Win）",
|
||
url: "https://afdian.net/p/0164034c016c11ebafcb52540025c377",
|
||
primary: true
|
||
},
|
||
{
|
||
name: "HMCL",
|
||
icon: "fas fa-horse-head",
|
||
desc: "历史悠久，跨平台支持好 (Win/Mac/Linux)",
|
||
url: "https://hmcl.huangyuhui.net/",
|
||
primary: false
|
||
}
|
||
],
|
||
note: "推荐使用 PCL2 或 HMCL，均支持极大改善游戏体验。"
|
||
},
|
||
ios: {
|
||
title: "iOS 设备",
|
||
recommendations: [
|
||
{
|
||
name: "PojavLauncher",
|
||
icon: "fab fa-app-store-ios",
|
||
desc: "iOS 上运行 Java 版的唯一选择",
|
||
url: "https://apps.apple.com/us/app/pojavlauncher/id6443526546",
|
||
primary: true
|
||
}
|
||
],
|
||
note: "需要 iOS 14.0 或更高版本。若未越狱，请保持 JIT 开启以获得最佳性能（部分版本可能需要）。"
|
||
},
|
||
android: {
|
||
title: "安卓设备",
|
||
recommendations: [
|
||
{
|
||
name: "FCL 启动器",
|
||
icon: "fab fa-android",
|
||
desc: "基于 FoldCraft 的高性能启动器",
|
||
url: "https://github.com/FoldCraftLauncher/FoldCraftLauncher/releases",
|
||
primary: true
|
||
},
|
||
{
|
||
name: "PojavLauncher",
|
||
icon: "fas fa-gamepad",
|
||
desc: "经典的移动端 Java 版启动器",
|
||
url: "https://play.google.com/store/apps/details?id=net.kdt.pojavlaunch",
|
||
primary: false
|
||
}
|
||
],
|
||
note: "建议设备拥有至少 4GB 运存以流畅运行 1.21 版本。"
|
||
}
|
||
};
|
||
|
||
const bedrockDeviceData = {
|
||
pc: {
|
||
title: "电脑版 (Bedrock Edition)",
|
||
recommendations: [
|
||
{
|
||
name: "Minecraft 基岩版",
|
||
icon: "fas fa-cube",
|
||
desc: "从 Microsoft Store 获取 Minecraft（需 Windows 10/11）",
|
||
url: "https://www.xbox.com/games/store/minecraft/9NBLGGH2JHXJ",
|
||
primary: true
|
||
}
|
||
],
|
||
note: "基岩版通过 Microsoft Store 购买，使用 Xbox / Microsoft 账号登录即可游玩。"
|
||
},
|
||
ios: {
|
||
title: "iOS 基岩版",
|
||
recommendations: [
|
||
{
|
||
name: "Minecraft",
|
||
icon: "fas fa-cube",
|
||
desc: "从 App Store 购买并下载 Minecraft",
|
||
url: "https://apps.apple.com/app/minecraft/id479516143",
|
||
primary: true
|
||
}
|
||
],
|
||
note: "基岩版是 iOS 上的原生 Minecraft，性能最佳、操作体验最好。"
|
||
},
|
||
android: {
|
||
title: "安卓基岩版",
|
||
recommendations: [
|
||
{
|
||
name: "Minecraft",
|
||
icon: "fas fa-cube",
|
||
desc: "从 Google Play 购买并下载 Minecraft",
|
||
url: "https://play.google.com/store/apps/details?id=com.mojang.minecraftpe",
|
||
primary: true
|
||
}
|
||
],
|
||
note: "基岩版是安卓上的原生 Minecraft，性能最佳、操作体验最好。"
|
||
}
|
||
};
|
||
|
||
deviceCards.forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
// UI Update
|
||
deviceCards.forEach(c => c.classList.remove('selected'));
|
||
card.classList.add('selected');
|
||
|
||
const deviceType = card.dataset.device;
|
||
selectedDevice = deviceType;
|
||
selectedEdition = 'java';
|
||
|
||
// Show edition selector and reset to Java
|
||
if (editionSelector) {
|
||
editionSelector.classList.remove('hidden');
|
||
editionBtns.forEach(btn => {
|
||
btn.classList.toggle('active', btn.dataset.edition === 'java');
|
||
});
|
||
}
|
||
|
||
// Show Recommendation
|
||
showRecommendation(deviceType);
|
||
|
||
// Re-enable next button
|
||
updateButtons();
|
||
});
|
||
});
|
||
|
||
// Edition toggle handlers
|
||
editionBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
editionBtns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
selectedEdition = btn.dataset.edition;
|
||
if (selectedDevice) {
|
||
showRecommendation(selectedDevice);
|
||
}
|
||
});
|
||
});
|
||
|
||
function showRecommendation(device) {
|
||
const data = selectedEdition === 'bedrock' ? bedrockDeviceData[device] : deviceData[device];
|
||
if (!data) return;
|
||
|
||
if (recommendationSection) {
|
||
recommendationSection.classList.remove('hidden');
|
||
// Little fade-in effect
|
||
recommendationSection.style.opacity = '0';
|
||
setTimeout(() => recommendationSection.style.opacity = '1', 50);
|
||
}
|
||
|
||
let cardsHtml = data.recommendations.map(req => `
|
||
<a href="${req.url}" target="_blank" class="launcher-card ${req.primary ? 'primary' : ''}">
|
||
<div class="launcher-icon">
|
||
<i class="${req.icon}"></i>
|
||
</div>
|
||
<div class="launcher-details">
|
||
<h4>${req.name} ${req.primary ? '<span class="badge-rec">推荐</span>' : ''}</h4>
|
||
<p>${req.desc}</p>
|
||
</div>
|
||
<div class="launcher-action">
|
||
<i class="fas fa-download"></i>
|
||
</div>
|
||
</a>
|
||
`).join('');
|
||
|
||
const html = `
|
||
<div class="recommendation-header">
|
||
<h3>为 ${data.title} 准备启动器</h3>
|
||
<p>${data.note}</p>
|
||
</div>
|
||
<div class="launcher-grid">
|
||
${cardsHtml}
|
||
</div>
|
||
`;
|
||
|
||
if (recommendationContent) recommendationContent.innerHTML = html;
|
||
}
|
||
|
||
// --- Step 3: Tutorial Rendering ---
|
||
const deviceTutorials = {
|
||
pc: [
|
||
{
|
||
title: '登录账号',
|
||
desc: '打开启动器（PCL2/HMCL），选择“添加账号”。推荐使用 Microsoft 账号登录拥有正版 Minecraft 的账户。'
|
||
},
|
||
{
|
||
title: '安装游戏',
|
||
desc: '在启动器中创建一个新游戏配置，选择游戏版本 <strong>1.21.x</strong>。强烈建议安装 <a href="https://fabricmc.net/" target="_blank">Fabric</a> 加载器以获得更好的模组支持和性能优化。'
|
||
},
|
||
{
|
||
title: '启动游戏',
|
||
desc: '等待游戏资源文件下载完成，点击启动游戏直到看到 Minecraft 主界面。'
|
||
},
|
||
{
|
||
title: '加入服务器',
|
||
desc: `点击“多人游戏” -> “添加服务器”。<br>
|
||
服务器名称：<span class="highlight-text">白鹿原</span><br>
|
||
输入以下服务器地址，点击“完成”并双击服务器即可加入。
|
||
<div class="server-address-box">
|
||
<code id="server-address">mcpure.lunadeer.cn</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('mcpure.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
</div>
|
||
`
|
||
}
|
||
],
|
||
ios: [
|
||
{
|
||
title: '准备环境',
|
||
desc: '打开 PojavLauncher。若您的设备未越狱，请确保已启用 JIT（Just-In-Time）以获得可玩的帧率。'
|
||
},
|
||
{
|
||
title: '登录账号',
|
||
desc: '点击“添加账户”，选择“Microsoft 账户”并完成登录流程。'
|
||
},
|
||
{
|
||
title: '下载并启动',
|
||
desc: '点击“创建新配置”，选择版本 <strong>1.21.x</strong>。建议调整内存分配至设备总内存的 50% 左右，然后点击“启动”。'
|
||
},
|
||
{
|
||
title: '加入服务器',
|
||
desc: `进入主界面后，选择 Multiplayer（多人游戏） -> Add Server（添加服务器）。<br>
|
||
Address（地址）填写以下内容，点击 Done 并加入。
|
||
<div class="server-address-box">
|
||
<code id="server-address-ios">mcpure.lunadeer.cn</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('mcpure.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
`
|
||
}
|
||
],
|
||
android: [
|
||
{
|
||
title: '配置启动器',
|
||
desc: '打开 FCL 或 PojavLauncher。给予必要的存储权限。'
|
||
},
|
||
{
|
||
title: '登录账号',
|
||
desc: '在账户设置中添加 Microsoft 账户。'
|
||
},
|
||
{
|
||
title: '安装版本',
|
||
desc: '下载 <strong>1.21.x</strong> 游戏核心。FCL 用户可直接使用内置下载源加速下载。建议安装 OptiFine 或 Fabric+Sodium 以提升帧率。'
|
||
},
|
||
{
|
||
title: '加入服务器',
|
||
desc: `启动游戏后，点击 Multiplayer（多人游戏） -> Add Server（添加服务器）。<br>
|
||
Address（地址）填写以下内容，点击 Done 并加入。
|
||
<div class="server-address-box">
|
||
<code id="server-address-android">mcpure.lunadeer.cn</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('mcpure.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
</div>
|
||
`
|
||
}
|
||
]
|
||
};
|
||
|
||
const bedrockTutorials = {
|
||
pc: [
|
||
{
|
||
title: '获取游戏',
|
||
desc: '从 <a href="https://www.xbox.com/games/store/minecraft/9NBLGGH2JHXJ" target="_blank">Microsoft Store</a> 购买并下载 Minecraft（基岩版/Bedrock Edition），需要 Windows 10 或 Windows 11。'
|
||
},
|
||
{
|
||
title: '登录账号',
|
||
desc: '打开 Minecraft，使用 Microsoft / Xbox 账号登录。'
|
||
},
|
||
{
|
||
title: '加入服务器',
|
||
desc: `点击"游戏" → 切换到"服务器"标签页 → 滚动到底部点击"添加服务器"。<br>
|
||
服务器名称：<span class="highlight-text">白鹿原</span><br>
|
||
填写以下服务器信息：
|
||
<div class="server-address-box">
|
||
<span>地址：</span><code>mcbe.lunadeer.cn</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('mcbe.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
</div>
|
||
<div class="server-address-box">
|
||
<span>端口：</span><code>15337</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('15337').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
</div>
|
||
填写完成后点击"保存"，然后选中该服务器加入即可。`
|
||
}
|
||
],
|
||
ios: [
|
||
{
|
||
title: '获取游戏',
|
||
desc: '从 <a href="https://apps.apple.com/app/minecraft/id479516143" target="_blank">App Store</a> 购买并下载 Minecraft。'
|
||
},
|
||
{
|
||
title: '登录账号',
|
||
desc: '打开 Minecraft，使用 Microsoft / Xbox 账号登录。'
|
||
},
|
||
{
|
||
title: '加入服务器',
|
||
desc: `点击"游戏" → 切换到"服务器"标签页 → 滚动到底部点击"添加服务器"。<br>
|
||
服务器名称：<span class="highlight-text">白鹿原</span><br>
|
||
填写以下服务器信息：
|
||
<div class="server-address-box">
|
||
<span>地址：</span><code>mcbe.lunadeer.cn</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('mcbe.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
</div>
|
||
<div class="server-address-box">
|
||
<span>端口：</span><code>15337</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('15337').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
</div>
|
||
填写完成后点击"保存"，然后选中该服务器加入即可。`
|
||
}
|
||
],
|
||
android: [
|
||
{
|
||
title: '获取游戏',
|
||
desc: '从 <a href="https://play.google.com/store/apps/details?id=com.mojang.minecraftpe" target="_blank">Google Play</a> 购买并下载 Minecraft。'
|
||
},
|
||
{
|
||
title: '登录账号',
|
||
desc: '打开 Minecraft，使用 Microsoft / Xbox 账号登录。'
|
||
},
|
||
{
|
||
title: '加入服务器',
|
||
desc: `点击"游戏" → 切换到"服务器"标签页 → 滚动到底部点击"添加服务器"。<br>
|
||
服务器名称：<span class="highlight-text">白鹿原</span><br>
|
||
填写以下服务器信息：
|
||
<div class="server-address-box">
|
||
<span>地址：</span><code>mcbe.lunadeer.cn</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('mcbe.lunadeer.cn').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
</div>
|
||
<div class="server-address-box">
|
||
<span>端口：</span><code>15337</code>
|
||
<button class="btn-copy" onclick="navigator.clipboard.writeText('15337').then(() => { this.innerHTML = '<i class=\\'fas fa-check\\'></i> 已复制'; setTimeout(() => this.innerHTML = '<i class=\\'fas fa-copy\\'></i> 复制', 2000); })">
|
||
<i class="fas fa-copy"></i> 复制
|
||
</button>
|
||
</div>
|
||
填写完成后点击"保存"，然后选中该服务器加入即可。`
|
||
}
|
||
]
|
||
};
|
||
|
||
function renderTutorial() {
|
||
const device = selectedDevice || 'pc';
|
||
let steps;
|
||
if (selectedEdition === 'bedrock') {
|
||
steps = bedrockTutorials[device] || bedrockTutorials['pc'];
|
||
} else {
|
||
steps = deviceTutorials[device] || deviceTutorials['pc'];
|
||
}
|
||
|
||
let content = '<div class="tutorial-steps">';
|
||
|
||
steps.forEach((step, index) => {
|
||
content += `
|
||
<div class="tutorial-step">
|
||
<div class="step-badge">${index + 1}</div>
|
||
<div class="step-text">
|
||
<h4>${step.title}</h4>
|
||
<p>${step.desc}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
content += '</div>';
|
||
if (tutorialContent) {
|
||
tutorialContent.innerHTML = content;
|
||
}
|
||
}
|
||
|
||
// --- Step 4: Playstyle Selection ---
|
||
const playstyleCards = document.querySelectorAll('.playstyle-card');
|
||
const playstyleDetails = document.getElementById('playstyle-details');
|
||
|
||
const playstyleData = {
|
||
'large-town': {
|
||
title: '融入大型城镇',
|
||
subtitle: '快速启航，共建繁华 (10+人)',
|
||
target: '希望跳过艰难的初期积累，快速投入大规模建造与合作的玩家。',
|
||
pros: ['资源无忧：可直接从公共仓库获取建材与工具。', '工业完善：享受成熟的自动化生产带来的便利。'],
|
||
cons: ['为了整体美观与规划，可能需要遵守城镇的建筑风格与管理安排，自由度相对受限。']
|
||
},
|
||
'small-town': {
|
||
title: '加入小型城镇',
|
||
subtitle: '共同成长，见证历史 (3-10人)',
|
||
target: '喜欢参与从零到一的建设过程，享受亲手打造家园成就感的玩家。',
|
||
pros: ['发展参与感：亲身参与城镇的规划与扩张。', '自由度较高：在发展初期通常有更多的个人发挥空间。'],
|
||
cons: ['初期资源相对有限，需要与同伴共同努力。']
|
||
},
|
||
'friends': {
|
||
title: '与朋友共建家园',
|
||
subtitle: '白手起家，开创时代 (1-3人)',
|
||
target: '拥有固定小团体，渴望一片完全属于自己的领地的玩家。',
|
||
pros: ['绝对自由：从选址到规划，一切由你定义。', '纯粹体验：体验最原始的协作与创造乐趣。'],
|
||
cons: ['这是一条充满挑战的道路，但从无到有建立的一切都将格外珍贵。']
|
||
},
|
||
'solo': {
|
||
title: '独狼求生',
|
||
subtitle: '自力更生，隐于山林',
|
||
target: '享受孤独，崇尚一切亲力亲为的硬核生存玩家。',
|
||
pros: ['极致的自由与独立，你的世界只属于你。', '可尝试与其他玩家进行贸易换取无法独自获得的资源。'],
|
||
cons: ['一切都需要亲力亲为，生存挑战较大。']
|
||
}
|
||
};
|
||
|
||
if (playstyleCards.length > 0 && playstyleDetails) {
|
||
playstyleCards.forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
// UI Visual Selection
|
||
playstyleCards.forEach(c => c.classList.remove('selected'));
|
||
card.classList.add('selected');
|
||
|
||
// Get Data
|
||
const styleKey = card.dataset.style;
|
||
const data = playstyleData[styleKey];
|
||
|
||
if (data) {
|
||
// Populate Details
|
||
document.getElementById('detail-title').textContent = data.title;
|
||
document.getElementById('detail-subtitle').textContent = data.subtitle;
|
||
document.getElementById('detail-target').textContent = data.target;
|
||
|
||
const prosList = document.getElementById('detail-pros');
|
||
const consList = document.getElementById('detail-cons');
|
||
|
||
prosList.innerHTML = data.pros.map(p => `<li>${p}</li>`).join('');
|
||
consList.innerHTML = data.cons.map(c => `<li>${c}</li>`).join('');
|
||
|
||
// Show Details
|
||
playstyleDetails.classList.add('visible');
|
||
|
||
// Optional: scroll into view gently if needed, or stick to bottom
|
||
playstyleDetails.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// Initial check
|
||
updateWizard();
|
||
});
|