` } } function showLoading() { if (matchesContainer) { matchesContainer.innerHTML = `` } } function renderMatches(matches) { if (!matchesContainer) return; if (!matches || matches.length === 0) { matchesContainer.innerHTML = ''; return } itemsToShow = ITEMS_TO_SHOW; matchesContainer.innerHTML = matches.map(match => renderMatchCard(match)).join(''); filterMatches(activeFilter) } function renderMatchCard(match) { const matchId = match.id || ''; const homeTeam = match.home_info?.name || match.home_name || 'Team A'; const awayTeam = match.away_info?.name || match.away_name || 'Team B'; const homeLogo = match.home_info?.logo || match.home_logo || ''; const awayLogo = match.away_info?.logo || match.away_logo || ''; const competitionName = match.competition?.name || match.competition_name || 'Competition'; const competitionLogo = match.competition?.logo || match.competition_logo || ''; // Normalize match time field (avoid mismatch between match_time / matchTime / kick_off_timestamp) const matchTime = Number( match.match_time ?? match.matchTime ?? match.kick_off_timestamp ?? match.kickoff_timestamp ?? Math.floor(Date.now() / 1000) ); const matchDatetime = formatMatchDatetime(matchTime); const matchDay = formatMatchDay(matchTime); const homeScore = match.full_time_home_score || 0; const awayScore = match.full_time_away_score || 0; const statusId = Number(match.status_id ?? 0); // const statusText = getStatusText(match); const isLive = [2, 3, 4, 5, 6, 7].includes(statusId); const isUpcoming = statusId === 1; const isFinished = statusId === 8; const filterClasses = getFilterClasses(match); // console.log("filterClasses", filterClasses, { matchId, matchTime }); const halfTimeHome = match.haft_time_home_score || 0; const halfTimeAway = match.haft_time_away_score || 0; const halfTimeScore = `${halfTimeHome} - ${halfTimeAway}`; const corners = (match.home_corners || 0) + (match.away_corners || 0); const yellowCards = (match.home_yellow_cards || 0) + (match.away_yellow_cards || 0); const matchUrl = generateMatchUrl(match); const gradientIdPrefix = isUpcoming ? `yellow_${matchId}` : `green_${matchId}`; const isDarkTheme = document.getElementById('cakhia-plugin-container')?.classList.contains('theme-dark') || document.querySelector('.cakhia-plugin-container')?.classList.contains('theme-dark'); const themeSuffix = isDarkTheme ? '-dark' : ''; let bgImage = `bg-match-live${themeSuffix}.png`; if (isUpcoming) { bgImage = `bg-match${themeSuffix}.png` } else if (isFinished) { bgImage = `bg-match${themeSuffix}.png` } else if (isLive != '' ) { bgImage = `bg-match-live${themeSuffix}.png` } return ` ` } function renderStatusBadge(statusText, gradientIdPrefix, isUpcoming) { return '' } function renderCommentators(match) { const commentators = match.commentator_info || []; const matchId = match.id || ''; if (!commentators || commentators.length === 0) { return `` } let matchSlug = match.slug || ''; if (!matchSlug) { const homeTeam = match.home_info?.name || match.home_name || 'home'; const awayTeam = match.away_info?.name || match.away_name || 'away'; const homeSlug = createSlug(homeTeam); const awaySlug = createSlug(awayTeam); matchSlug = `${homeSlug}-vs-${awaySlug}`; let datetimeSuffix = ''; if (match.matchTime && match.matchTime > 0) { const matchTimestamp = match.matchTime * 1000; const matchDate = new Date(matchTimestamp); const hours = matchDate.getHours(); const minutes = matchDate.getMinutes(); const day = matchDate.getDate(); const month = matchDate.getMonth() + 1; const year = matchDate.getFullYear(); const timeStr = String(hours).padStart(2, '0') + String(minutes).padStart(2, '0'); const dayStr = String(day).padStart(2, '0'); const monthStr = String(month).padStart(2, '0'); datetimeSuffix = `-vao-luc-${timeStr}-${dayStr}-${monthStr}-${year}`; matchSlug = `${matchSlug}${datetimeSuffix}` } } const generateCommentatorUrl = (commentator) => { const commentatorSlug = commentator.slug || ''; if (matchSlug && commentatorSlug) { const urlPath = `/truc-tiep/${matchSlug}/`; const queryParam = `?blv=${encodeURIComponent(commentatorSlug)}`; return `${window.location.origin}${urlPath}${queryParam}` } return `${window.location.origin}/truc-tiep/` } ; if (commentators.length === 1) { const commentator = commentators[0]; const commentatorName = commentator.full_name || 'Unknown'; const commentatorAvatar = commentator.avatar || ''; const commentatorSlug = commentator.slug || ''; const commentatorUrl = generateCommentatorUrl(commentator); return `` } const generateSlidesHtml = (commentatorsList) => { return commentatorsList.map( (commentator, index) => { const commentatorName = commentator.full_name || 'Unknown'; const commentatorAvatar = commentator.avatar || ''; const commentatorSlug = commentator.slug || ''; const commentatorUrl = generateCommentatorUrl(commentator); return `` } ).join('') }; if (commentators.length > 1) { const shuffled = [...commentators].sort(() => 0.5 - Math.random()); return generateSlidesHtml(shuffled); } return generateSlidesHtml(commentators); } function randomCommentators(match){ const commentators = match.commentator_info || []; const matchId = match.id || ''; let matchSlug = match.slug || ''; if (!matchSlug) { const homeTeam = match.home_info?.name || match.home_name || 'home'; const awayTeam = match.away_info?.name || match.away_name || 'away'; const homeSlug = createSlug(homeTeam); const awaySlug = createSlug(awayTeam); matchSlug = `${homeSlug}-vs-${awaySlug}`; let datetimeSuffix = ''; if (match.match_time && match.match_time > 0) { const matchTimestamp = match.match_time * 1000; const matchDate = new Date(matchTimestamp); const hours = matchDate.getHours(); const minutes = matchDate.getMinutes(); const day = matchDate.getDate(); const month = matchDate.getMonth() + 1; const year = matchDate.getFullYear(); const timeStr = String(hours).padStart(2, '0') + String(minutes).padStart(2, '0'); const dayStr = String(day).padStart(2, '0'); const monthStr = String(month).padStart(2, '0'); datetimeSuffix = `-vao-luc-${timeStr}-${dayStr}-${monthStr}-${year}`; matchSlug = `${matchSlug}${datetimeSuffix}` } } const generateCommentatorUrl = (commentator) => { const commentatorSlug = commentator.slug || ''; if (matchSlug && commentatorSlug) { return `${window.location.origin}/truc-tiep/${matchSlug}/?blv=${encodeURIComponent(commentatorSlug)}`; } return `${window.location.origin}/truc-tiep/`; }; if (commentators.length > 0) { const randomIndex = Math.floor(Math.random() * commentators.length); const randomCommentator = commentators[randomIndex]; return generateCommentatorUrl(randomCommentator); } return `${window.location.origin}/truc-tiep/`; } function renderHexagonAvatar(avatar, matchId, slug) { const clipId = `hexagonClip_${matchId}_${slug}`; const defaultLogo = getPluginUrl() + 'assets/img/logo_default.webp'; const avatarUrl = avatar || defaultLogo; return `` } function getFilterClasses(match) { const statusId = match.status_id || 0; const isLive = [2, 3, 4, 5, 6, 7].includes(statusId); const isHot = match.is_hot; const matchTime = match.match_time || 0; const now = Math.floor(Date.now() / 1000); const timezoneOffset = 0; const todayStart = Math.floor(new Date().setHours(0, 0, 0, 0) / 1000) - (timezoneOffset * 3600); const todayEnd = todayStart + 86400; const tomorrowStart = todayEnd; const tomorrowEnd = tomorrowStart + 86400; const isToday = matchTime >= todayStart && matchTime = tomorrowStart && matchTime 0) { const currentTime = Math.floor(Date.now() / 1000); const elapsedSeconds = currentTime - kickOffTimestamp; const elapsedMinutes = Math.floor(elapsedSeconds / 60) + 1; if (statusId === 2) { // First Half: 0' -> 45+' if (elapsedMinutes > 45) { statusText += ": 45+'"; } else { statusText += `: ${elapsedMinutes}'`; } } else if (statusId === 4) { // Second Half: 45' -> 90+' const adjustedTime = elapsedMinutes + 45; if (adjustedTime > 90) { statusText += ": 90+'"; } else { statusText += `: ${adjustedTime}'`; } } } return statusText; // Default: return status text } function getMatchStatusText(status) { switch (status) { case 1: return 'H1'; case 3: return 'H2'; case -10: return 'Hủy'; case -11: return 'TBD'; case -12: return 'Chấm dứt'; case -13: return 'Gián đoạn'; case -14: return 'Hoãn'; default: return 'TBD'; } } function formatMatchDatetime(timestamp) { const date = new Date(timestamp * 1000); const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0'); return `${hours}:${minutes} ${day}-${month}` } function formatMatchDay(timestamp) { const date = new Date(timestamp * 1000); const day = String(date.getDate()).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0');; const year = date.getFullYear(); return `${day}/${month}/${year}`; } function generateMatchUrl(match) { if (match.slug) { const urlPath = `/truc-tiep/${match.slug}/`; return `${window.location.origin}${urlPath}` } const homeTeam = match.home_info?.name || match.home_name || 'home'; const awayTeam = match.away_info?.name || match.away_name || 'away'; const homeSlug = createSlug(homeTeam); const awaySlug = createSlug(awayTeam); const teamSlug = `${homeSlug}-vs-${awaySlug}`; let datetimeSuffix = ''; if (match.match_time && match.match_time > 0) { const matchDate = new Date(match.match_time * 1000); const timeStr = String(matchDate.getHours()).padStart(2, '0') + String(matchDate.getMinutes()).padStart(2, '0'); const day = String(matchDate.getDate()).padStart(2, '0'); const month = String(matchDate.getMonth() + 1).padStart(2, '0'); const year = matchDate.getFullYear(); datetimeSuffix = `-vao-luc-${timeStr}-${day}-${month}-${year}` } if (teamSlug) { const urlPath = `/truc-tiep/${teamSlug}${datetimeSuffix}/`; return `${window.location.origin}${urlPath}` } return `${window.location.origin}/truc-tiep/` } function createSlug(str) { return str.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/đ/g, 'd').replace(/[^a-z0-9\s-]/g, '').trim().replace(/\s+/g, '-').replace(/-+/g, '-') } function getPluginUrl() { if (typeof window.cakhiaMatch1 !== 'undefined' && window.cakhiaMatch1.plugin_url) { return window.cakhiaMatch1.plugin_url } const scripts = document.querySelectorAll('script[src*="match-1.js"]'); for (let script of scripts) { const src = script.src; const match = src.match(/(.*\/plugins\/[^\/]+\/)/); if (match) { return match[1] } } const cakhiaScripts = document.querySelectorAll('script[src*="cakhia"]'); for (let script of cakhiaScripts) { const src = script.src; const match = src.match(/(.*\/plugins\/[^\/]+\/)/); if (match) { return match[1] } } return '/wp-content/plugins/cakhia/' } function updateStats() { const stats = { all: allMatches.length, live: 0, hot: 0, today: 0, tomorrow: 0 }; const now = Math.floor(Date.now() / 1000); const timezoneOffset = 0; const todayStart = Math.floor(new Date().setHours(0, 0, 0, 0) / 1000) - (timezoneOffset * 3600); const todayEnd = todayStart + 86400; const tomorrowStart = todayEnd; const tomorrowEnd = tomorrowStart + 86400; allMatches.forEach(match => { const matchTime = match.match_time || 0; const statusId = match.status_id || 0; // Trực tiếp = đang chơi (status 2,3,4,5,6,7) if ([2, 3, 4, 5, 6, 7].includes(statusId)) { stats.live++; } if (match.is_hot) { stats.hot++; } if (matchTime >= todayStart && matchTime = tomorrowStart && matchTime { const filter = tab.getAttribute('data-filter'); const spans = tab.querySelector('span[amount]'); const badge = spans.length >= 2 ? spans[1] : null; // Recompute filter classes on existing DOM nodes (useful when match data is updated without full re-render) function refreshFilterClassesFromData(matches) { const mapById = new Map((matches || []).map(m => [String(m.id ?? ''), m])); document.querySelectorAll('.match-item[data-match-id]').forEach(card => { const matchId = card.getAttribute('data-match-id'); const match = mapById.get(String(matchId)); if (!match) return; card.classList.remove('match-filter-all', 'match-filter-live', 'match-filter-hot', 'match-filter-today', 'match-filter-tomorrow'); const classes = getFilterClasses(match).split(/\s+/).filter(Boolean); classes.forEach(c => card.classList.add(c)); }); } if (stats[filter] !== undefined) { const count = stats[filter]; if (count === 0) { spans.setAttribute('amount', 0); } else { spans.setAttribute('amount', count); } } } ) } function filterMatches(type) { activeFilter = type; const cards = document.querySelectorAll('.match-item'); let visibleCount = 0; let shownCount = 0; cards.forEach(card => { let matchesFilter = !1; switch (type) { case 'all': matchesFilter = card.classList.contains('match-filter-all'); break; case 'live': matchesFilter = card.classList.contains('match-filter-live'); break; case 'hot': matchesFilter = card.classList.contains('match-filter-hot'); break; case 'today': matchesFilter = card.classList.contains('match-filter-today'); break; case 'tomorrow': matchesFilter = card.classList.contains('match-filter-tomorrow'); break } if (matchesFilter) { visibleCount++; if (shownCount = totalVisibleItems) { paginationContainer.innerHTML = ''; paginationContainer.style.display = 'none'; return } paginationContainer.style.display = ''; paginationContainer.className = 'mt-3 flex justify-center lg:mt-6'; const btnText = 'Xem thêm'; const iconPath = ''; paginationContainer.innerHTML = `Xem thêm trận đấu`; const btn = document.querySelector('#cakhia-pagination-btn'); if (btn) { const newBtn = btn.cloneNode(!0); btn.parentNode.replaceChild(newBtn, btn); newBtn.addEventListener('click', (e) => { e.preventDefault(); itemsToShow += ITEMS_TO_SHOW; filterMatches(activeFilter) } ) } } function updateActiveTab(type) { filterTabs.forEach(tab => { tab.classList.remove('active'); } ); const activeTab = document.querySelector(`.filter-tab-match[data-filter="${type}"]`); if (activeTab) { activeTab.classList.add('active'); } } function setupEventListeners() { filterTabs.forEach(tab => { tab.addEventListener('click', (e) => { e.preventDefault(); const filterType = tab.getAttribute('data-filter'); if (filterType) { itemsToShow = ITEMS_TO_SHOW; filterMatches(filterType) } } ) } ) } function escapeHtml(value) { if (value === null || value === undefined) { return ''; } const stringValue = String(value); return stringValue.replace(/[&"']/g, (char) => { switch (char) { case '&': return '&'; case '': return '>'; case '"': return '"'; case '\'': return '''; default: return char; } }); } async function init() { console.log('Init started, checking for preloaded data...'); showLoading(); setupEventListeners(); if (window.cakhiaMatchDataPreloaded && Array.isArray(window.cakhiaMatchDataPreloaded)) { console.log('Using preloaded data, count:', window.cakhiaMatchDataPreloaded.length); allMatches = window.cakhiaMatchDataPreloaded; renderMatches(allMatches); updateStats() } else if (window.cakhiaMatchDataPromise) { console.log('Waiting for promise to resolve...'); try { const data = await window.cakhiaMatchDataPromise; if (data && Array.isArray(data)) { console.log('Promise resolved, using data, count:', data.length); allMatches = data; renderMatches(allMatches); updateStats() } else { console.log('Promise resolved but no data, fetching again'); fetchMatches() } } catch (error) { console.error('Preloaded promise failed, fetching again:', error); fetchMatches() } } else { console.log('No preload found, fetching normally'); fetchMatches() } setInterval(fetchMatches, 30000) } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init) } else { init() } } )();