// function switchTab(tabId) { // document.querySelectorAll(".tab-btn").forEach((btn) => btn.classList.remove("active")); // document.querySelectorAll(".tab-content").forEach((content) => content.classList.remove("active")); // document.getElementById(`tab-${tabId}`).classList.add("active"); // document.getElementById(`content-${tabId}`).classList.add("active"); // } function toggleDetails(matchId) { const detailsDiv = document.getElementById(`details-${matchId}`); if (detailsDiv) { detailsDiv.style.display = detailsDiv.style.display === "block" ? "none" : "block"; } } function translatePlaceholder(engStr) { if (!engStr) return "待定"; const str = engStr.trim(); const groupMatch = str.match(/(1st|2nd|3rd)\s+Group\s+([a-zA-Z\/]+)/i); if (groupMatch) { const rankMap = { "1st": "第一", "2nd": "第二", "3rd": "第三" }; const rank = rankMap[groupMatch[1].toLowerCase()]; const group = groupMatch[2].toUpperCase(); return `${group}组${rank}`; } if (str.toLowerCase().includes("winner") || str.toLowerCase().includes("match") || str.toLowerCase().includes("loser")) { return "待定"; } return str; } // --- PENALTY SHOOTOUT TRACKER --- function getPenaltyShootoutTimeline(events, homeTeamId, awayTeamId) { if (!events || events.length === 0) return null; const shootoutEvents = events.filter((e) => [22, 23].includes(e.type_id)); if (shootoutEvents.length === 0) return null; shootoutEvents.sort((a, b) => a.id - b.id); const homePenalties = []; const awayPenalties = []; shootoutEvents.forEach((event) => { const icon = event.type_id === 23 ? "✅" : "❌"; if (event.participant_id === homeTeamId) { homePenalties.push(icon); } else if (event.participant_id === awayTeamId) { awayPenalties.push(icon); } }); return { homePenalties, awayPenalties }; } function getTeamName(participant) { if (!participant) return "待定"; if (typeof TEAM_DICT !== "undefined" && participant.id && TEAM_DICT[participant.id]) { return TEAM_DICT[participant.id].team_name_zh; } if (typeof TEAM_LIST !== "undefined") { const found = TEAM_LIST.find((t) => t.team_name_en === participant.name); if (found) return found.team_name_zh; } return participant.name || "待定"; } // Exact 7 PM SGT UTC Timestamp Logic function getCutoffTimeMs() { // todo // const nowUtc = new Date("2026-06-14T08:00:00Z"); const nowUtc = new Date(); // -------------------------------- // 19:00 SGT is exactly 11:00 UTC let cutoffUtc = new Date(Date.UTC(nowUtc.getUTCFullYear(), nowUtc.getUTCMonth(), nowUtc.getUTCDate(), 11, 0, 0)); if (nowUtc.getUTCHours() < 11) { // If it's currently before 7 PM SGT, the cutoff is YESTERDAY 7 PM SGT cutoffUtc.setUTCDate(cutoffUtc.getUTCDate() - 1); } return cutoffUtc.getTime(); } async function loadFixtures() { try { // 1. FAST PARALLEL LOADING const fetchPromises = [1].map((page) => // todo: // fetch(`http://localhost:3000/api/wc-fixtures?page=${page}`) fetch(`${apiPath}fixtures/all.json`) // fetch(`https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/data/fixtures_page${page}.json`) // fetch(`/data/fixtures_page${page}.json`) .then((res) => res.json()) .catch(() => ({})), ); const results = await Promise.all(fetchPromises); let allMatches = []; results.forEach((json) => { if (json.data && json.data.length > 0) allMatches = allMatches.concat(json.data); }); // todo: // Inject Dummy Data if available // if (typeof applyDummyRoadmapFixtures !== "undefined") { // allMatches = applyDummyRoadmapFixtures(allMatches); // } // SPLIT INTO LATEST VS PAST const cutoffMs = getCutoffTimeMs(); let latestMatches = []; let pastMatches = []; let liveMatches = []; allMatches.forEach((m) => { const matchTimeMs = new Date(m.starting_at.replace(" ", "T") + "Z").getTime(); const isLive = [2, 3, 4, 6, 9, 18, 19, 21, 22, 25].includes(m.state_id); if (isLive) { liveMatches.push(m); } else if (matchTimeMs < cutoffMs) { pastMatches.push(m); // Matches played before 7 PM SGT today (or yesterday) } else { latestMatches.push(m); // Matches scheduled after the cutoff } }); // RENDER TABS renderGroupedMatches(latestMatches, liveMatches, "content-latest", false); renderGroupedMatches(pastMatches, [], "content-past", true); const tabsContainer = document.querySelector(".tabs-container"); if (tabsContainer) { tabsContainer.style.display = pastMatches.length === 0 ? "none" : "flex"; } } catch (err) { console.error(err); document.getElementById("content-latest").innerHTML = "

赛程加载失败

"; } } function renderGroupedMatches(matches, liveMatches, containerId, isDescending) { const container = document.getElementById(containerId); if (matches.length === 0 && liveMatches.length === 0) { container.innerHTML = "

暂无比赛数据

"; return; } let html = ""; // --- PINNED LIVE MATCHES --- if (liveMatches.length > 0) { html += `

🔴 进行中

${liveMatches.map((m) => renderCard(m)).join("")}

`; } // --- STANDARD GROUPING (Stage -> Date) --- const stagesDict = {}; matches.forEach((m) => { const stageName = m.stage?.name || "未知"; let stageZh = translateStageName(stageName); if (!stagesDict[stageZh]) stagesDict[stageZh] = []; stagesDict[stageZh].push(m); }); // Sort Stages const stageOrder = ["小组赛", "32强", "16强", "八强", "半决赛", "季殿赛", "决赛"]; const sortedStages = Object.keys(stagesDict).sort((a, b) => { let indexA = stageOrder.indexOf(a); let indexB = stageOrder.indexOf(b); if (indexA === -1) indexA = 99; if (indexB === -1) indexB = 99; return isDescending ? indexB - indexA : indexA - indexB; }); sortedStages.forEach((stage) => { html += `

`; html += `

${stage}

`; // Group by Date inside the Stage const dateDict = {}; stagesDict[stage].forEach((m) => { const formattedDate = formatMatchDate(m.starting_at); if (!dateDict[formattedDate]) dateDict[formattedDate] = []; dateDict[formattedDate].push(m); }); // Sort Dates const sortedDates = Object.keys(dateDict).sort((a, b) => { const timeA = new Date(dateDict[a][0].starting_at.replace(" ", "T") + "Z").getTime(); const timeB = new Date(dateDict[b][0].starting_at.replace(" ", "T") + "Z").getTime(); return isDescending ? timeB - timeA : timeA - timeB; }); sortedDates.forEach((dateLabel) => { html += `

${dateLabel}

`; html += `

`; // Sort Matches within Date dateDict[dateLabel].sort((a, b) => { const tA = new Date(a.starting_at).getTime(); const tB = new Date(b.starting_at).getTime(); return isDescending ? tB - tA : tA - tB; }); dateDict[dateLabel].forEach((m) => { html += renderCard(m); }); html += `

`; }); html += `

`; }); container.innerHTML = html; } function renderCard(match) { const home = match.participants?.find((p) => p.meta.location === "home"); const away = match.participants?.find((p) => p.meta.location === "away"); // Extract Placeholders from match name if available let placeholderHome = ""; let placeholderAway = ""; if (match.name && match.name.includes(" vs ")) { const parts = match.name.split(" vs "); placeholderHome = parts[0]; placeholderAway = parts[1]; } const homeTeamObj = (home && typeof TEAM_DICT !== "undefined" && TEAM_DICT[home.id]) || (home && typeof TEAM_LIST !== "undefined" && TEAM_LIST.find((t) => t.team_name_en === home.name)) || null; const awayTeamObj = (away && typeof TEAM_DICT !== "undefined" && TEAM_DICT[away.id]) || (away && typeof TEAM_LIST !== "undefined" && TEAM_LIST.find((t) => t.team_name_en === away.name)) || null; // Resolve Names (Force translator for anything not in the JSON) const fallbackHome = home?.name || placeholderHome; const fallbackAway = away?.name || placeholderAway; const homeName = homeTeamObj ? homeTeamObj.team_name_zh : translatePlaceholder(fallbackHome); const awayName = awayTeamObj ? awayTeamObj.team_name_zh : translatePlaceholder(fallbackAway); const homeClass = homeTeamObj ? "" : "placeholder-text"; const awayClass = awayTeamObj ? "" : "placeholder-text"; const hFlag = getTeamFlag(homeTeamObj); const aFlag = getTeamFlag(awayTeamObj); const utcDateString = match.starting_at.replace(" ", "T") + "Z"; const dateObj = new Date(utcDateString); const formattedTime = dateObj.toLocaleTimeString("en-SG", { timeZone: "Asia/Singapore", hour: "2-digit", minute: "2-digit", hour12: false }); // --- STATUS LOGIC --- const status = getMatchStatus(match); const isFinished = status.isFinished; const isLive = status.isLive; const badgeText = status.badgeText; const badgeClass = status.badgeClass; // Determine if we should allow expanding the details panel const hasCurrentScore = match.scores && match.scores.some((s) => s.description === "CURRENT"); const shouldShowDetails = isFinished || isLive || hasCurrentScore; let centerHTML = ""; let detailsHTML = ""; if (shouldShowDetails) { // Fetch Main Score const hScoreObj = match.scores?.find((s) => s.participant_id === home?.id && s.description === "CURRENT"); const aScoreObj = match.scores?.find((s) => s.participant_id === away?.id && s.description === "CURRENT"); const hScore = hScoreObj?.score?.participant_1 ?? hScoreObj?.score?.goals ?? hScoreObj?.score ?? 0; const aScore = aScoreObj?.score?.participant_2 ?? aScoreObj?.score?.goals ?? aScoreObj?.score ?? 0; // Fetch Penalty Shootout Score (If it exists) const testHomeId = home?.id; const testAwayId = away?.id; match.events = [ { id: 101, type_id: 23, participant_id: testHomeId }, // Home ✅ { id: 102, type_id: 23, participant_id: testAwayId }, // Away ✅ { id: 103, type_id: 22, participant_id: testHomeId }, // Home ❌ (Miss) { id: 104, type_id: 23, participant_id: testAwayId }, // Away ✅ { id: 105, type_id: 23, participant_id: testHomeId }, // Home ✅ { id: 106, type_id: 22, participant_id: testAwayId }, // Away ❌ (Miss) { id: 107, type_id: 23, participant_id: testHomeId }, // Home ✅ { id: 108, type_id: 22, participant_id: testAwayId }, // Away ❌ (Miss) ]; let penHTML = ""; const hPenObj = match.scores?.find((s) => s.participant_id === home?.id && s.description === "PENALTIES"); const aPenObj = match.scores?.find((s) => s.participant_id === away?.id && s.description === "PENALTIES"); if (hPenObj && aPenObj) { const hPen = hPenObj?.score?.participant_1 ?? hPenObj?.score?.goals ?? hPenObj?.score ?? 0; const aPen = aPenObj?.score?.participant_2 ?? aPenObj?.score?.goals ?? aPenObj?.score ?? 0; // Generate the dynamic ✅ / ❌ tracker const shootoutData = getPenaltyShootoutTimeline(match.events, home?.id, away?.id); let trackerHTML = ""; if (shootoutData) { const homeTracker = shootoutData.homePenalties.join(" "); const awayTracker = shootoutData.awayPenalties.join(" "); // Adds the trackers wrapping the text trackerHTML = `

${homeTracker} 点球 (${hPen} - ${aPen}) ${awayTracker}

`; } else { // Fallback if events are missing but the score exists trackerHTML = `

点球 (${hPen} - ${aPen})

`; } penHTML = trackerHTML; } // Button and Display Logic const toggleBtn = isLive ? "" : ``; const displayStyle = isLive ? "display: block;" : "display: none;"; // Inject penHTML right between the main score and the toggle button centerHTML = `

${hScore} - ${aScore}

${penHTML}${toggleBtn}`; // --- EVENTS TIMELINE --- let timelineLines = "

暂无关键事件

"; if (match.events && match.events.length > 0) { const allowedEvents = [14, 15, 16, 20, 21]; const filteredEvents = match.events.filter((e) => allowedEvents.includes(e.type_id)); if (filteredEvents.length > 0) { filteredEvents.sort((a, b) => a.minute - b.minute); const homeEvents = filteredEvents.filter((e) => e.participant_id === home?.id); const awayEvents = filteredEvents.filter((e) => e.participant_id === away?.id); const renderEvent = (ev) => { let icon = getEventIcon(ev.type_id); const time = `${ev.minute}${ev.extra_minute ? "+" + ev.extra_minute : ""}'`; let pName = ev.player_name || "未知球员"; if (ev.type_id === 15) { pName += ' (乌龙)'; } else if (ev.type_id === 16) { pName += ' (点球)'; } return `

${icon}

${time}

${pName}

`; }; timelineLines = `

${homeEvents.map(renderEvent).join("")}

${awayEvents.map(renderEvent).join("")}

`; } } // --- STATISTICS --- let statsLines = "

暂无统计数据

"; const hasStats = match.statistics && match.statistics.length > 0; if (hasStats) { const statsMap = [ { id: 45, code: "ball-possession", label: "控球率 (%)" }, { id: 86, code: "shots-on-target", label: "射正" }, { id: 84, code: "shots-off-target", label: "射偏" }, { id: 34, code: "corners", label: "角球" }, { id: 56, code: "fouls", label: "犯规" }, ]; statsLines = statsMap .map((statItem) => { let hVal = 0, aVal = 0; const homeDummyObj = match.statistics.find((s) => s.participant_id === home?.id)?.details; const awayDummyObj = match.statistics.find((s) => s.participant_id === away?.id)?.details; if (homeDummyObj || awayDummyObj) { const hObj = (homeDummyObj || []).find((d) => d.type?.code === statItem.code); const aObj = (awayDummyObj || []).find((d) => d.type?.code === statItem.code); hVal = hObj ? (hObj.value.total ?? hObj.value) : 0; aVal = aObj ? (aObj.value.total ?? aObj.value) : 0; } else { const homeStats = match.statistics.filter((s) => s.participant_id === home?.id); const awayStats = match.statistics.filter((s) => s.participant_id === away?.id); const hObj = homeStats.find((d) => d.type_id === statItem.id); const aObj = awayStats.find((d) => d.type_id === statItem.id); hVal = hObj ? hObj.data.value : 0; aVal = aObj ? aObj.data.value : 0; } let total = (parseInt(hVal) || 0) + (parseInt(aVal) || 0); let homePercent = total > 0 ? (hVal / total) * 100 : 50; return `

${hVal}

${statItem.label}

${aVal}

`; }) .join(""); } // --- LINEUPS & SUBSTITUTIONS --- const subs = match.events?.filter((e) => e.type_id === 18) || []; const hasLineups = (match.lineups && match.lineups.length > 0) || subs.length > 0; let lineupsHtml = ""; if (hasLineups) { let subsHtml = ""; if (subs.length > 0) { const homeSubs = subs.filter((e) => e.participant_id === home?.id); const awaySubs = subs.filter((e) => e.participant_id === away?.id); const renderSub = (e) => `

${e.minute}'

↑ ${e.player_name}
↓ ${e.related_player_name}

`; subsHtml = `

换人调整

${homeSubs.map(renderSub).join("")}

${awaySubs.map(renderSub).join("")}

`; } let startersHtml = "

首发尚未公布

"; if (match.lineups && match.lineups.length > 0) { const homeLineup = match.lineups.filter((l) => (l.participant_id === home?.id || l.team_id === home?.id) && l.type_id === 11); const awayLineup = match.lineups.filter((l) => (l.participant_id === away?.id || l.team_id === away?.id) && l.type_id === 11); const posOrder = { 24: 1, 25: 2, 26: 3, 27: 4 }; const sortFn = (a, b) => (posOrder[a.position_id] || 99) - (posOrder[b.position_id] || 99); homeLineup.sort(sortFn); awayLineup.sort(sortFn); const getPosition = (id) => { const posMap = { 24: "门将", 25: "后卫", 26: "中场", 27: "前锋" }; return posMap[id] ? `(${posMap[id]})` : ""; }; const getPlayerIcons = (p, isAway) => { if (!match.events) return ""; let icons = ""; const pName = p.player_name || p.player?.name || ""; const pEvents = match.events.filter( (e) => (e.participant_id === p.participant_id || e.participant_id === p.team_id) && (e.player_name === pName || (e.player && e.player.display_name === pName) || (e.player && e.player.name === pName)), ); pEvents.forEach((e) => { if ([14, 16, 17, 19, 20, 21, 52, 84, 85, 97].includes(e.type_id)) { icons += getEventIcon(e.type_id) + " "; } }); if (!icons) return ""; return `${icons.trim()}`; }; const renderPlayer = (p, isAway) => { const pName = p.player_name || p.player?.name || "未知球员"; const positionHtml = getPosition(p.position_id); const iconsHtml = getPlayerIcons(p, isAway); if (isAway) { return `

${iconsHtml}${pName} ${positionHtml}

`; } else { return `

${pName} ${positionHtml}${iconsHtml}

`; } }; startersHtml = `

${homeLineup.map((p) => renderPlayer(p, false)).join("")}

${awayLineup.map((p) => renderPlayer(p, true)).join("")}

`; } lineupsHtml = startersHtml + subsHtml; } // --- DYNAMIC TABS RENDERER --- let tabsHTML = ""; if (hasStats && hasLineups) { tabsHTML = `

${statsLines}

${lineupsHtml}

`; } else if (hasStats && !hasLineups) { tabsHTML = `

比赛数据

${statsLines}

`; } else if (!hasStats && hasLineups) { tabsHTML = `

首发阵容

${lineupsHtml}

`; } detailsHTML = `

${timelineLines}

${tabsHTML}

`; } else { centerHTML = `

${formattedTime}

`; } let topLabel = match.stage?.name ? translateStageName(match.stage.name) : "淘汰赛"; if (match.group_id && WC_GROUPS[match.group_id]) { topLabel = `${WC_GROUPS[match.group_id]}`; } return `

${topLabel} ${badgeText}

${homeName}

${centerHTML}

${awayName}

${detailsHTML}

`; } // Handle internal match card tabs window.switchCardTab = function (btn, targetPanelId) { const detailsContainer = btn.closest(".match-details"); detailsContainer.querySelectorAll(".detail-tab-btn").forEach((b) => b.classList.remove("active")); detailsContainer.querySelectorAll(".detail-panel").forEach((p) => p.classList.remove("active")); btn.classList.add("active"); document.getElementById(targetPanelId).classList.add("active"); }; loadFixtures(); // loadFixtures().then(() => { // if (typeof startLivescoreEngine === "undefined") return; // startLivescoreEngine(renderCard); // });