Add World Cup 2026 LIVE section with auto-refresh + interleaved news/road content

static/wc2026_v2.js

@@ -0,0 +1,200 @@
+// === WORLD CUP 2026 LIVE SECTION ===
+// Auto-refreshes every 90s, shows on homepage
+// News + Đường tới World Cup interleaved by newest
+
+let _wc2026Data = null;
+let _wcRefreshInterval = null;
+
+async function loadWC2026Section() {
+  try {
+    const data = await fetch('/api/wc2026').then(r => r.json()).catch(() => null);
+    if (!data) return;
+    _wc2026Data = data;
+    renderWC2026();
+  } catch(e) {}
+}
+
+function renderWC2026() {
+  const data = _wc2026Data;
+  if (!data) return;
+  const home = document.getElementById('view-home');
+  if (!home) return;
+  
+  // Remove old WC section if exists
+  document.getElementById('wc2026-live-section')?.remove();
+  
+  const section = document.createElement('div');
+  section.id = 'wc2026-live-section';
+  section.className = 'wc2026-section';
+  
+  let h = '<div class="wc-header"><h2>🏆 World Cup 2026</h2><span class="wc-live-badge">● LIVE</span></div>';
+  
+  // === Tabs ===
+  h += '<div class="wc-tabs">';
+  h += '<span class="wc-tab active" onclick="switchWCTab(\'news\')">📰 Tin tức</span>';
+  h += '<span class="wc-tab" onclick="switchWCTab(\'fixtures\')">📅 Lịch thi đấu</span>';
+  h += '<span class="wc-tab" onclick="switchWCTab(\'standings\')">🏆 BXH</span>';
+  h += '<span class="wc-tab" onclick="switchWCTab(\'stats\')">📊 Thống kê</span>';
+  h += '</div>';
+  h += '<div class="wc-content" id="wc-content"></div>';
+  
+  section.innerHTML = h;
+  
+  // Insert after livescore section
+  const lsSection = home.querySelector('.ls-section');
+  if (lsSection) lsSection.after(section);
+  else home.appendChild(section);
+  
+  // Default: show news + road interleaved
+  switchWCTab('news');
+}
+
+function switchWCTab(tab) {
+  document.querySelectorAll('.wc-tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.wc-tab').forEach(t => {
+    if ((tab === 'news' && t.textContent.includes('Tin')) ||
+        (tab === 'fixtures' && t.textContent.includes('Lịch')) ||
+        (tab === 'standings' && t.textContent.includes('BXH')) ||
+        (tab === 'stats' && t.textContent.includes('Thống')))
+      t.classList.add('active');
+  });
+  const el = document.getElementById('wc-content');
+  if (!el || !_wc2026Data) return;
+  
+  if (tab === 'news') renderWCNews(el);
+  else if (tab === 'fixtures') renderWCFixtures(el);
+  else if (tab === 'standings') renderWCStandings(el);
+  else if (tab === 'stats') renderWCStats(el);
+}
+
+function renderWCNews(el) {
+  const news = _wc2026Data.news || [];
+  const road = _wc2026Data.road || [];
+  
+  // Interleave news + road by newest (alternate)
+  const combined = [];
+  let ni = 0, ri = 0;
+  while (ni < news.length || ri < road.length) {
+    if (ni < news.length) combined.push({...news[ni++], _type: 'news'});
+    if (ri < road.length) combined.push({...road[ri++], _type: 'road'});
+  }
+  
+  if (!combined.length) { el.innerHTML = '<div class="loading">Đang cập nhật...</div>'; return; }
+  
+  let h = '<div class="wc-news-grid">';
+  combined.slice(0, 20).forEach(a => {
+    const badge = a._type === 'road' ? '<span class="badge badge-wc">Đường tới WC</span>' : '<span class="badge badge-fpt">Tin WC</span>';
+    h += `<div class="wc-news-item" onclick="readArticle('${esc(a.link)}')">`;
+    if (a.img) h += `<div class="wc-news-img"><img src="${esc(a.img)}" onerror="this.style.display='none'"></div>`;
+    h += `<div class="wc-news-text">${badge}<div class="wc-news-title">${esc(a.title)}</div><div class="wc-news-via">${esc(a.source || '')}</div></div></div>`;
+  });
+  h += '</div>';
+  el.innerHTML = h;
+}
+
+function renderWCFixtures(el) {
+  const fixtures = _wc2026Data.fixtures || [];
+  
+  if (fixtures.length && fixtures[0].html) {
+    el.innerHTML = fixtures[0].html;
+    return;
+  }
+  
+  if (!fixtures.length) { el.innerHTML = '<div class="loading">Chưa có lịch thi đấu</div>'; return; }
+  
+  let h = '<div class="wc-fixtures">';
+  let currentGroup = '';
+  fixtures.forEach(m => {
+    if (m.group && m.group !== currentGroup) {
+      currentGroup = m.group;
+      h += `<div class="wc-group-header">${esc(m.group)}</div>`;
+    }
+    const isLive = (m.status || '').toLowerCase().includes('live') || (m.status || '').includes('đang');
+    h += `<div class="wc-match ${isLive ? 'wc-match-live' : ''}">`;
+    h += `<div class="wc-match-date">${esc(m.date)}</div>`;
+    h += `<div class="wc-match-teams"><span class="wc-team-home">${esc(m.home)}</span><span class="wc-match-score">${esc(m.score || 'vs')}</span><span class="wc-team-away">${esc(m.away)}</span></div>`;
+    if (isLive) h += '<div class="wc-match-live-badge">🔴 LIVE</div>';
+    h += '</div>';
+  });
+  h += '</div>';
+  el.innerHTML = h;
+}
+
+function renderWCStandings(el) {
+  const standings = _wc2026Data.standings || {};
+  
+  if (standings.html) {
+    el.innerHTML = standings.html;
+    return;
+  }
+  
+  const groups = Object.entries(standings);
+  if (!groups.length) { el.innerHTML = '<div class="loading">Chưa có BXH</div>'; return; }
+  
+  let h = '';
+  groups.forEach(([name, teams]) => {
+    h += `<div class="wc-group-header">${esc(name)}</div>`;
+    h += '<table class="wc-table"><tr><th>Đội</th><th>Tr</th><th>Đ</th></tr>';
+    (teams || []).forEach(t => {
+      h += `<tr><td class="wc-team-name">${esc(t.team)}</td><td>${esc(t.played)}</td><td class="wc-pts">${esc(t.pts)}</td></tr>`;
+    });
+    h += '</table>';
+  });
+  el.innerHTML = h;
+}
+
+function renderWCStats(el) {
+  const stats = _wc2026Data.stats || {};
+  
+  if (stats.html) {
+    el.innerHTML = stats.html;
+    return;
+  }
+  
+  let h = '';
+  if (stats.top_scorers && stats.top_scorers.length) {
+    h += '<div class="wc-group-header">⚽ Vua phá lưới</div><div class="wc-stats-list">';
+    stats.top_scorers.forEach((p, i) => {
+      h += `<div class="wc-stat-row"><span class="wc-stat-rank">${i + 1}</span><span class="wc-stat-name">${esc(p.player)}</span><span class="wc-stat-team">${esc(p.team)}</span><span class="wc-stat-val">${esc(p.goals)}</span></div>`;
+    });
+    h += '</div>';
+  }
+  if (stats.top_assists && stats.top_assists.length) {
+    h += '<div class="wc-group-header">🎯 Kiến tạo</div><div class="wc-stats-list">';
+    stats.top_assists.forEach((p, i) => {
+      h += `<div class="wc-stat-row"><span class="wc-stat-rank">${i + 1}</span><span class="wc-stat-name">${esc(p.player)}</span><span class="wc-stat-team">${esc(p.team)}</span><span class="wc-stat-val">${esc(p.assists)}</span></div>`;
+    });
+    h += '</div>';
+  }
+  if (!h) h = '<div class="loading">Chưa có thống kê chi tiết</div>';
+  el.innerHTML = h;
+}
+
+// === LIVE AUTO-REFRESH (every 90s) ===
+function startWCLiveRefresh() {
+  if (_wcRefreshInterval) clearInterval(_wcRefreshInterval);
+  _wcRefreshInterval = setInterval(async () => {
+    if (!document.getElementById('view-home')?.classList.contains('active')) return;
+    try {
+      const data = await fetch('/api/wc2026').then(r => r.json()).catch(() => null);
+      if (data) {
+        _wc2026Data = data;
+        // Only re-render if WC section is visible
+        const wcSection = document.getElementById('wc2026-live-section');
+        if (wcSection) {
+          const activeTab = document.querySelector('.wc-tab.active');
+          if (activeTab) {
+            const txt = activeTab.textContent;
+            if (txt.includes('Tin')) renderWCNews(document.getElementById('wc-content'));
+            else if (txt.includes('Lịch')) renderWCFixtures(document.getElementById('wc-content'));
+            else if (txt.includes('BXH')) renderWCStandings(document.getElementById('wc-content'));
+            else if (txt.includes('Thống')) renderWCStats(document.getElementById('wc-content'));
+          }
+        }
+      }
+    } catch(e) {}
+  }, 90000); // 90 seconds
+}
+
+// Load WC2026 after homepage loads
+setTimeout(() => { loadWC2026Section(); startWCLiveRefresh(); }, 3000);