108 lines
4.6 KiB
JavaScript
108 lines
4.6 KiB
JavaScript
// 宇森官网 · 公开页数据打通（图鉴/规则/论坛/公告 从 Odoo 取数）
|
|
// 依赖 assets/game-api.js
|
|
|
|
// ---------- 页面板块（特色 / 背景 / 致玩家） ----------
|
|
async function loadPages(){
|
|
try {
|
|
const d = await API.pages();
|
|
const pages = (d && d.items) || [];
|
|
pages.forEach(p => {
|
|
if (p.key === 'features') renderFeatures(p);
|
|
else if (p.key === 'background') renderBackground(p);
|
|
else if (p.key === 'letter') renderLetter(p);
|
|
});
|
|
} catch (e) { /* 失败时保留 HTML 中的静态兜底内容 */ }
|
|
}
|
|
|
|
function renderFeatures(p){
|
|
const sec = document.getElementById('features');
|
|
if (!sec) return;
|
|
const items = (p.items || []).map(it =>
|
|
`<div class="card"><div class="ic">${it.icon || ''}</div><h3>${it.title || ''}</h3><p>${it.desc || ''}</p></div>`
|
|
).join('');
|
|
sec.innerHTML = `<div class="sec-title">${p.title || '游戏特色'}<small>${p.subtitle || ''}</small></div><div class="grid">${items}</div>`;
|
|
}
|
|
|
|
function renderBackground(p){
|
|
const sec = document.getElementById('background');
|
|
if (!sec) return;
|
|
const layers = (p.items || []).map((it, idx) =>
|
|
`<div class="layer l${idx + 1}"><div class="lt">${it.title || ''}</div><div class="ld">${it.desc || ''}</div><span class="star">${it.icon || '✦'}</span></div>`
|
|
).join('');
|
|
sec.innerHTML = `<div class="layers">${layers}</div><div class="bg-text"><h2>${p.title || '世界起源'}</h2>${p.body_html || ''}</div>`;
|
|
}
|
|
|
|
function renderLetter(p){
|
|
const sec = document.getElementById('letter');
|
|
if (!sec) return;
|
|
sec.innerHTML = `<div class="letter-wrap"><h2>${p.title || ''}</h2><div class="lt-sub">${p.subtitle || ''}</div><div class="lt-body">${p.body_html || ''}</div><div class="lt-sign">—— 宇森开发组</div></div>`;
|
|
}
|
|
|
|
// ---------- 规则 ----------
|
|
async function loadRules(){
|
|
const el = document.querySelector('#rules .rules-scroll');
|
|
if (!el) return;
|
|
try {
|
|
const d = await API.rules();
|
|
const groups = (d && d.groups) || [];
|
|
if (!groups.length){ return; }
|
|
el.innerHTML = groups.map(g => {
|
|
const rows = (g.items || []).map(it => {
|
|
const lvl = (it.level != null) ? ('Lv.' + it.level) : (g.key === 'world' ? '阶段' : '');
|
|
return `<div class="tier-row"><span class="tn">${lvl}</span><span class="tname">${it.name}</span><span class="tdesc">${it.desc || ''}</span></div>`;
|
|
}).join('');
|
|
return `<div class="rule-block"><h3>${g.label}</h3><div class="tier-list">${rows}</div></div>`;
|
|
}).join('');
|
|
} catch (e) { /* 保留静态兜底内容 */ }
|
|
}
|
|
|
|
// ---------- 论坛 ----------
|
|
async function loadForum(){
|
|
const threadsEl = document.getElementById('threads');
|
|
const catsEl = document.querySelector('#forum .f-cats');
|
|
if (!threadsEl) return;
|
|
try {
|
|
const list = await API.threads();
|
|
if (!list || !list.length){ threadsEl.innerHTML = '<div class="th"><span class="tt">暂无主题</span></div>'; return; }
|
|
// 分类筛选
|
|
const cats = [];
|
|
list.forEach(t => { if (t.category && cats.indexOf(t.category) < 0) cats.push(t.category); });
|
|
if (catsEl){
|
|
catsEl.innerHTML = `<div class="ch active" data-fcat="all">全部</div>` +
|
|
cats.map(c => `<div class="ch" data-fcat="${c}">${c}</div>`).join('');
|
|
catsEl.querySelectorAll('.ch').forEach(b => b.addEventListener('click', () => {
|
|
catsEl.querySelectorAll('.ch').forEach(x => x.classList.remove('active'));
|
|
b.classList.add('active');
|
|
const c = b.dataset.fcat;
|
|
threadsEl.querySelectorAll('.th').forEach(t => { t.style.display = (c === 'all' || t.dataset.fcat === c) ? '' : 'none'; });
|
|
}));
|
|
}
|
|
threadsEl.innerHTML = list.map(t =>
|
|
`<div class="th" data-fcat="${t.category || 'all'}">` +
|
|
(t.pinned ? `<span class="pin">置顶</span>` : '') +
|
|
`<span class="tt">${t.name}</span>` +
|
|
`<span class="meta"><span class="rp">${(t.replies || []).length}</span> 回复 · ${t.author_name || '匿名'}</span></div>`
|
|
).join('');
|
|
} catch (e) { /* 保留静态兜底内容 */ }
|
|
}
|
|
|
|
// ---------- 公告 ----------
|
|
async function loadAnnounce(){
|
|
const el = document.querySelector('#announce .notes');
|
|
if (!el) return;
|
|
try {
|
|
const list = await API.announcements();
|
|
if (!list || !list.length){ el.innerHTML = '<div class="note"><div class="body">暂无公告</div></div>'; return; }
|
|
el.innerHTML = list.map(n =>
|
|
`<div class="note"><div class="date">${n.date}</div><div class="body">${n.body_html || ''}</div></div>`
|
|
).join('');
|
|
} catch (e) { /* 保留静态兜底内容 */ }
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadPages();
|
|
loadRules();
|
|
loadForum();
|
|
loadAnnounce();
|
|
});
|