game/assets/site-app.js

// 宇森官网 · 公开页数据打通（图鉴/规则/论坛/公告 从 Odoo 取数）
// 依赖 assets/game-api.js

// ---------- 页面板块：特色 / 背景 / 致玩家 合并进「背景」单页（平铺，非子菜单） ----------
function featuresHTML(p){
  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('');
  return `<div class="sec-title">${p.title || '游戏特色'}<small>${p.subtitle || ''}</small></div><div class="grid">${items}</div>`;
}

function backgroundHTML(p){
  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('');
  return `<div class="layers">${layers}</div><div class="bg-text"><h2>${p.title || '世界起源'}</h2>${p.body_html || ''}</div>`;
}

function letterHTML(p){
  return `<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 loadPages(){
  try {
    const d = await API.pages();
    const pages = (d && d.items) || [];
    const bg = document.getElementById('background');
    let html = '';
    pages.forEach(p => {
      if (p.key === 'features')       html += featuresHTML(p);
      else if (p.key === 'background') html += backgroundHTML(p);
      else if (p.key === 'letter')     html += letterHTML(p);
    });
    if (bg) bg.innerHTML = html;   // 特色 + 背景 + 致玩家 平铺进同一页，无子菜单切换

    const story = document.getElementById('story');
    if (story) story.innerHTML = '<div class="sec-title">剧情<small>STORY</small></div><div style="text-align:center;padding:80px 20px;color:#556677;font-size:15px;"><div style="font-size:48px;margin-bottom:16px;">📖</div>剧情内容正在筹备中…<div style="font-size:13px;margin-top:8px;color:#445566;">敬请期待</div></div>';
  } catch (e) { /* 失败时保留 HTML 中的静态兜底内容 */ }
}

// ---------- 规则 ----------
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();
});