Frontend: render fixtures from JSON (group tables, stadium, VN time, live scores)"

static/wc2026_v2.js

@@ -1,4 +1,4 @@
-// === WORLD CUP 2026 - Render + LIVE ===
+// === WORLD CUP 2026 - Full render ===
 let _wc2026Data = null;
 let _wcRefreshInterval = null;
 
@@ -20,47 +20,71 @@ function switchWCTab(tab) {
   else if (tab === 'stats') renderWCStats(el);
 }
 
-function _disableLinks(root){ root.querySelectorAll('a').forEach(a => a.addEventListener('click', e => e.preventDefault())); }
-function _cleanupBox(root){
-  root.querySelectorAll('[style]').forEach(x => { if (x.tagName !== 'IMG') x.removeAttribute('style'); });
-  root.querySelectorAll('[bgcolor]').forEach(x => x.removeAttribute('bgcolor'));
-  root.querySelectorAll('[color]').forEach(x => x.removeAttribute('color'));
-  root.querySelectorAll('img').forEach(img => { img.onerror = function(){ this.style.display='none'; }; });
-  _disableLinks(root);
-}
-
+// === FIXTURES (JSON → beautiful table by group) ===
 function renderWCFixtures(el) {
   const d = _wc2026Data.fixtures || {};
-  if (d.html && d.html.length > 100) {
-    el.innerHTML = `<div class="wc-source-note">📅 Lịch thi đấu World Cup 2026 - Nguồn: ${esc(d.source || 'Tiền Phong')}</div><div class="wc-data-box">${d.html}</div>`;
-    const box = el.querySelector('.wc-data-box'); if (box) _cleanupBox(box);
+  const matches = d.matches || [];
+  if (!matches.length) {
+    el.innerHTML = '<div class="loading">Đang tải lịch thi đấu...</div>';
     return;
   }
-  if (d.images && d.images.length) {
-    let h = `<div class="wc-source-note">📅 Lịch thi đấu World Cup 2026 - Nguồn: ${esc(d.source || 'Tiền Phong')}</div><div class="wc-fixture-images">`;
-    d.images.forEach(img => {
-      h += `<img src="${esc(img.src)}" alt="${esc(img.alt||'Lịch thi đấu World Cup 2026')}" loading="lazy" onerror="this.style.display='none'">`;
-      if (img.alt) h += `<div class="wc-img-caption">${esc(img.alt)}</div>`;
+  // Group by 'group' field
+  const groups = {};
+  matches.forEach(m => {
+    const g = m.group || 'Vòng loại trực tiếp';
+    if (!groups[g]) groups[g] = [];
+    groups[g].push(m);
+  });
+
+  let h = '<div class="wc-fix-container">';
+  h += `<div class="wc-fix-header">📅 Lịch thi đấu World Cup 2026 <span>(${d.total || matches.length} trận · Giờ Việt Nam)</span></div>`;
+  
+  for (const [group, gMatches] of Object.entries(groups)) {
+    h += `<div class="wc-fix-group">${esc(group)}</div>`;
+    h += '<table class="wc-fix-table"><thead><tr><th>#</th><th>Giờ VN</th><th>Đội nhà</th><th>Tỉ số</th><th>Đội khách</th><th>Sân</th></tr></thead><tbody>';
+    gMatches.forEach(m => {
+      const score = (m.home_score !== null && m.away_score !== null) 
+        ? `<span class="wc-score-live">${m.home_score} - ${m.away_score}</span>` 
+        : '<span class="wc-score-vs">vs</span>';
+      const isLive = m.home_score !== null && m.away_score !== null;
+      h += `<tr class="${isLive ? 'wc-row-played' : ''}">`;
+      h += `<td class="wc-td-num">${m.match_number}</td>`;
+      h += `<td class="wc-td-time">${esc(m.date_vn)}</td>`;
+      h += `<td class="wc-td-team wc-td-home">${esc(m.home)}</td>`;
+      h += `<td class="wc-td-score">${score}</td>`;
+      h += `<td class="wc-td-team">${esc(m.away)}</td>`;
+      h += `<td class="wc-td-venue">${esc(m.location)}</td>`;
+      h += '</tr>';
     });
-    h += '</div>';
-    el.innerHTML = h;
-    return;
+    h += '</tbody></table>';
+  }
+  h += '</div>';
+  el.innerHTML = h;
+}
+
+// === STANDINGS (bongda.com.vn HTML) ===
+function renderWCStandings(el) {
+  const d = _wc2026Data.standings || {};
+  if (d.html && d.html.length > 100) {
+    el.innerHTML = '<div class="wc-data-box">' + d.html + '</div>';
+    el.querySelectorAll('a').forEach(a => a.addEventListener('click', e => e.preventDefault()));
+  } else {
+    el.innerHTML = '<div class="loading">Chưa có BXH (giải chưa bắt đầu)</div>';
   }
-  el.innerHTML = '<div class="loading">Chưa tải được lịch thi đấu World Cup 2026</div>';
 }
 
-function _wcRenderHTML(el, data, emptyMsg) {
-  const html = data?.html || '';
-  if (html && html.length > 100) {
-    el.innerHTML = '<div class="wc-data-box">' + html + '</div>';
-    const box = el.querySelector('.wc-data-box'); if (box) _cleanupBox(box);
+// === STATS ===
+function renderWCStats(el) {
+  const d = _wc2026Data.stats || {};
+  if (d.html && d.html.length > 100) {
+    el.innerHTML = '<div class="wc-data-box">' + d.html + '</div>';
+    el.querySelectorAll('a').forEach(a => a.addEventListener('click', e => e.preventDefault()));
   } else {
-    el.innerHTML = `<div class="loading">${emptyMsg}</div>`;
+    el.innerHTML = '<div class="loading">Chưa có thống kê (giải chưa bắt đầu)</div>';
   }
 }
-function renderWCStandings(el) { _wcRenderHTML(el, _wc2026Data.standings, 'Chưa tải được BXH World Cup 2026'); }
-function renderWCStats(el) { _wcRenderHTML(el, _wc2026Data.stats, 'Chưa có thống kê'); }
 
+// === NEWS (with images) ===
 function renderWCNews(el) {
   const news = _wc2026Data.news || [];
   const road = _wc2026Data.road || [];
@@ -70,18 +94,19 @@ function renderWCNews(el) {
     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 tin tức...</div>'; return; }
+  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, 24).forEach(a => {
+  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)}')">`;
-    h += `<div class="wc-news-img">${a.img ? `<img src="${esc(a.img)}" onerror="this.parentElement.style.display='none'">` : ''}</div>`;
+    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;
 }
 
+// === LIVE REFRESH ===
 function startWCLiveRefresh() {
   if (_wcRefreshInterval) clearInterval(_wcRefreshInterval);
   _wcRefreshInterval = setInterval(async () => {
@@ -90,6 +115,6 @@ function startWCLiveRefresh() {
       const data = await fetch('/api/wc2026').then(r => r.json()).catch(() => null);
       if (data) { _wc2026Data = data; }
     } catch(e) {}
-  }, 90000);
+  }, 60000); // 60s for live score updates
 }
 setTimeout(startWCLiveRefresh, 5000);