Fix wc2026_v2.js: render fixtures as infographic images (from tienphong.vn)"

static/wc2026_v2.js

@@ -1,12 +1,10 @@
-// === WORLD CUP 2026 - Render from JSON data + LIVE refresh ===
-// Fixtures rendered from structured JSON (no raw HTML = no broken fonts/CSS)
-// BXH/Stats still use bongda.com.vn pre-rendered HTML (with inline CSS override)
+// === WORLD CUP 2026 - Render + LIVE refresh ===
 
 let _wc2026Data = null;
 let _wcRefreshInterval = null;
 
-const WC_CSS = `<style>
-.wc-bongda-content{font-size:12px;color:#ddd;max-height:400px;overflow-y:auto}
+const WC_INLINE_CSS = `<style>
+.wc-bongda-content{font-size:12px;color:#ddd;max-height:450px;overflow-y:auto;padding:4px}
 .wc-bongda-content *{color:#ddd!important;border-color:#1a3a5a!important}
 .wc-bongda-content a{color:#8ab4d8!important;text-decoration:none!important}
 .wc-bongda-content table{width:100%;border-collapse:collapse;font-size:11px;background:transparent!important}
@@ -17,17 +15,19 @@ const WC_CSS = `<style>
 .wc-bongda-content ul{list-style:none;padding:0;margin:0}
 .wc-bongda-content li{padding:6px;border-bottom:1px solid #1a2a3a}
 .wc-bongda-content .title-content{display:flex;gap:6px;align-items:center;background:#0d1a2a;border-radius:4px;margin:4px 0;padding:5px 8px}
-.wc-bongda-content .title-content strong{color:#8ab4d8!important}
-.wc-bongda-content .match-detail{padding:6px;border-bottom:1px solid #1a2a3a;cursor:pointer}
-.wc-bongda-content .match-detail:hover{background:#0d1a2a}
-.wc-bongda-content .teams{display:flex;width:100%;align-items:center;gap:4px}
-.wc-bongda-content .team{flex:1;display:flex;align-items:center;gap:4px}
+.wc-bongda-content .title-content strong{font-size:11px;color:#8ab4d8!important}
+.wc-bongda-content .match,.wc-bongda-content .teams{display:flex;align-items:center;gap:4px}
+.wc-bongda-content .team{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
 .wc-bongda-content .team .name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .wc-bongda-content .home-team{justify-content:flex-end;text-align:right}
 .wc-bongda-content .status{flex:0 0 54px;text-align:center}
-.wc-bongda-content .status a{font-weight:800;font-size:12px;color:#fff!important}
+.wc-bongda-content .status a{font-weight:800;font-size:12px}
 .wc-bongda-content .info,.wc-bongda-content .btns{display:none!important}
-.wc-bongda-content strong{color:#f0c040!important}
+.wc-bongda-content strong,.wc-bongda-content b{color:#f0c040!important}
+.wc-bongda-content h3,.wc-bongda-content h4{color:#8ab4d8!important;font-size:12px;padding:6px 0}
+.wc-fixtures-images{display:flex;flex-direction:column;gap:8px;max-height:450px;overflow-y:auto;padding:4px}
+.wc-fixtures-images img{width:100%;border-radius:6px;display:block}
+.wc-fixtures-images .wc-img-caption{font-size:10px;color:#6a9fca;text-align:center;padding:2px 0}
 </style>`;
 
 function switchWCTab(tab) {
@@ -57,7 +57,7 @@ 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...</div>'; return; }
+  if (!combined.length) { el.innerHTML = '<div class="loading">Đang cập nhật tin tức...</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>';
@@ -71,39 +71,29 @@ function renderWCNews(el) {
 
 function renderWCFixtures(el) {
   const d = _wc2026Data.fixtures || {};
-  const matches = d.matches || [];
-  
-  if (!matches.length) {
+  // New format: images array (infographic from tienphong.vn)
+  if (d.type === 'infographic' && d.images && d.images.length) {
+    let h = WC_INLINE_CSS + '<div class="wc-fixtures-images">';
+    h += '<div style="font-size:11px;color:#8ab4d8;padding:4px 0;text-align:center">📅 Lịch thi đấu World Cup 2026 (giờ Việt Nam) — Nguồn: Tiền Phong</div>';
+    d.images.forEach(img => {
+      h += `<img src="${esc(img.src)}" alt="${esc(img.alt)}" loading="lazy" onerror="this.style.display='none'">`;
+      if (img.alt) h += `<div class="wc-img-caption">${esc(img.alt)}</div>`;
+    });
+    h += '</div>';
+    el.innerHTML = h;
+  } else if (d.html && d.html.length > 50) {
+    // Fallback: raw HTML
+    el.innerHTML = WC_INLINE_CSS + '<div class="wc-bongda-content">' + d.html + '</div>';
+    el.querySelectorAll('a').forEach(a => a.addEventListener('click', e => e.preventDefault()));
+  } else {
     el.innerHTML = '<div class="loading">Chưa có lịch thi đấu World Cup 2026<br><small style="color:#6a9fca">Giải khởi tranh 11/06/2026</small></div>';
-    return;
   }
-  
-  // Render matches with own CSS (no external fonts)
-  let h = '<div style="max-height:400px;overflow-y:auto">';
-  let currentGroup = '';
-  matches.forEach(m => {
-    if (m.group && m.group !== currentGroup) {
-      currentGroup = m.group;
-      h += `<div style="font-size:11px;font-weight:800;color:#8ab4d8;padding:8px 0 4px;border-bottom:1px solid #1a3a5a;margin-top:6px">${esc(m.group)}</div>`;
-    }
-    const isLive = (m.score || '').includes('-') && m.score !== 'vs';
-    h += `<div style="display:flex;align-items:center;padding:8px 4px;border-bottom:1px solid #0d1a2a;${isLive?'background:#0d1520;':''}">`;
-    h += `<div style="flex:1;text-align:right;font-size:11px;color:#eee;padding-right:6px">${esc(m.home)}</div>`;
-    h += `<div style="min-width:50px;text-align:center;font-weight:900;font-size:12px;color:${isLive?'#f0c040':'#fff'};background:#1a2a3a;border-radius:4px;padding:3px 6px">${esc(m.score || 'vs')}</div>`;
-    h += `<div style="flex:1;font-size:11px;color:#eee;padding-left:6px">${esc(m.away)}</div>`;
-    if (m.time) h += `<div style="font-size:9px;color:#6a9fca;min-width:60px;text-align:right">${esc(m.time)}</div>`;
-    h += '</div>';
-  });
-  h += '</div>';
-  h += `<div style="font-size:9px;color:#555;padding:6px;text-align:center">Nguồn: ${esc(d.source || 'vietnamnet/thethaovanhoa')}</div>`;
-  el.innerHTML = h;
 }
 
 function renderWCStandings(el) {
   const d = _wc2026Data.standings || {};
-  const html = d.html || '';
-  if (html && html.length > 50) {
-    el.innerHTML = WC_CSS + '<div class="wc-bongda-content">' + html + '</div>';
+  if (d.html && d.html.length > 50) {
+    el.innerHTML = WC_INLINE_CSS + '<div class="wc-bongda-content">' + d.html + '</div>';
     el.querySelectorAll('a').forEach(a => a.addEventListener('click', e => e.preventDefault()));
   } else {
     el.innerHTML = '<div class="loading">Chưa có BXH World Cup 2026<br><small style="color:#6a9fca">Giải khởi tranh 11/06/2026</small></div>';
@@ -112,9 +102,8 @@ function renderWCStandings(el) {
 
 function renderWCStats(el) {
   const d = _wc2026Data.stats || {};
-  const html = d.html || '';
-  if (html && html.length > 50) {
-    el.innerHTML = WC_CSS + '<div class="wc-bongda-content">' + html + '</div>';
+  if (d.html && d.html.length > 50) {
+    el.innerHTML = WC_INLINE_CSS + '<div class="wc-bongda-content">' + d.html + '</div>';
     el.querySelectorAll('a').forEach(a => a.addEventListener('click', e => e.preventDefault()));
   } else {
     el.innerHTML = '<div class="loading">Chưa có thống kê World Cup 2026<br><small style="color:#6a9fca">Giải khởi tranh 11/06/2026</small></div>';