+
${home ? home.flag : '๐ด'}
${match.home}
- VS
+ ${scoreDisplayHTML}
โบ
-
+
${away ? away.flag : '๐ด'}
${match.away}
+ ${scorersHTML}
๐Kick-off${match.time} local time${userLocalTimeStr ? ' / ' + userLocalTimeStr + ' your time' : ''}
๐Venue${venue ? venue.stadium : match.venue}
๐๏ธCity${match.venue}${venue ? ', ' + venue.country : ''}
๐ฅCapacity${venue ? venue.capacity : 'โ'}
+
+
+
๐ฎ Simulate Match Score
+
+
+ ${home ? home.flag : ''}
+
+
+
โ
+
+
+ ${away ? away.flag : ''}
+
+
+
+
+ ${isFinished ? `` : ''}
+
+
`;
@@ -154,6 +299,61 @@ function buildSquadHTML(group) {
}).join('');
}
+function buildStandingsHTML(group) {
+ const standings = calculateStandings(group);
+ const rowsHTML = standings.map((item, idx) => {
+ const rank = idx + 1;
+ const rankClass = rank <= 2 ? 'rank-adv' : rank === 3 ? 'rank-pot' : 'rank-el';
+ const rowClass = rank <= 2 ? 'row-adv' : rank === 3 ? 'row-pot' : 'row-el';
+ return `
+
+ | ${rank} |
+
+ ${item.flag}
+ ${item.name}
+ ${item.isHost ? '๐๏ธ' : ''}
+ |
+ ${item.played} |
+ ${item.won} |
+ ${item.drawn} |
+ ${item.lost} |
+ ${item.gf} |
+ ${item.ga} |
+ ${item.gd > 0 ? '+' + item.gd : item.gd} |
+ ${item.pts} |
+
+ `;
+ }).join('');
+
+ return `
+
+
+
+
+ | # |
+ Team |
+ P |
+ W |
+ D |
+ L |
+ GF |
+ GA |
+ GD |
+ Pts |
+
+
+
+ ${rowsHTML}
+
+
+
+
Top 2 advance to Round of 32
+
Best 3rd-place teams advance
+
+
+ `;
+}
+
// โโ Modal โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
function openModal(group) {
if (!group || !group.matches || group.matches.length === 0) return;
@@ -176,12 +376,16 @@ function openModal(group) {
${buildMatchdayHTML(group)}
+
+ ${buildStandingsHTML(group)}
+
${buildSquadHTML(group)}
@@ -211,6 +415,97 @@ function closeModal() {
}
}
+// โโ Simulation Handlers โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+window.saveMatchScore = function(groupId, matchday, matchIdx, cardId) {
+ const homeInput = document.getElementById(`input-${cardId}-home`);
+ const awayInput = document.getElementById(`input-${cardId}-away`);
+ if (!homeInput || !awayInput) return;
+
+ const homeVal = homeInput.value.trim();
+ const awayVal = awayInput.value.trim();
+
+ if (homeVal === '' || awayVal === '') {
+ alert('Please enter scores for both teams.');
+ return;
+ }
+
+ const homeScore = parseInt(homeVal, 10);
+ const awayScore = parseInt(awayVal, 10);
+
+ if (isNaN(homeScore) || isNaN(awayScore) || homeScore < 0 || awayScore < 0) {
+ alert('Scores must be non-negative integers.');
+ return;
+ }
+
+ const group = appGroups.find(g => g.id === groupId);
+ if (group) {
+ const dayMatches = group.matches.filter(m => m.matchday === matchday);
+ const match = dayMatches[matchIdx];
+ if (match) {
+ match.status = 'FT';
+ match.score = { home: homeScore, away: awayScore };
+
+ // Preserve or set scorers for Mexico vs South Africa if restored to 2 - 1
+ if (groupId === 'A' && matchday === 1 && matchIdx === 0 && homeScore === 2 && awayScore === 1) {
+ match.scorers = {
+ home: [
+ { name: 'Santiago Gimรฉnez', min: "24'" },
+ { name: 'Henry Martรญn', min: "78'" }
+ ],
+ away: [
+ { name: 'Percy Tau', min: "41' (pen)" }
+ ]
+ };
+ } else {
+ delete match.scorers;
+ }
+
+ saveState();
+ render();
+
+ const updatedGroup = appGroups.find(g => g.id === groupId);
+ const activeTab = document.querySelector('.modal-tab.active')?.id || 'tab-schedule';
+ const tabName = activeTab.replace('tab-', '');
+
+ openModal(updatedGroup);
+ switchTab(tabName);
+ }
+ }
+};
+
+window.clearMatchScore = function(groupId, matchday, matchIdx, cardId) {
+ const group = appGroups.find(g => g.id === groupId);
+ if (group) {
+ const dayMatches = group.matches.filter(m => m.matchday === matchday);
+ const match = dayMatches[matchIdx];
+ if (match) {
+ delete match.status;
+ delete match.score;
+ delete match.scorers;
+
+ saveState();
+ render();
+
+ const updatedGroup = appGroups.find(g => g.id === groupId);
+ const activeTab = document.querySelector('.modal-tab.active')?.id || 'tab-schedule';
+ const tabName = activeTab.replace('tab-', '');
+
+ openModal(updatedGroup);
+ switchTab(tabName);
+ }
+ }
+};
+
+window.resetAllScores = function() {
+ if (confirm('Are you sure you want to reset all simulated scores back to default?')) {
+ localStorage.removeItem('wc2026_groups');
+ loadState();
+ render();
+ closeModal();
+ animateCounters();
+ }
+};
+
// โโ Accordion toggle โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
window.toggleMatch = function(cardId) {
const card = document.getElementById(cardId);
@@ -232,7 +527,7 @@ function render() {
const grid = document.getElementById('groups-grid');
if (!grid) return;
- const filteredGroups = groups.map(group => {
+ const filteredGroups = appGroups.map(group => {
let filteredTeams = group.teams;
if (activeFilter !== 'all') {
filteredTeams = filteredTeams.filter(t => t.confederation === activeFilter);
@@ -264,10 +559,14 @@ function render() {
// โโ Global click handler (set ONCE on document.body) โโโโโโโโโโโโโโโโโโโโโโ
function setupGlobalClick() {
document.body.addEventListener('click', (e) => {
+ // If click is on simulation controls or buttons inside modal, don't trigger group open
+ if (e.target.closest('.sim-btn') || e.target.closest('.sim-input') || e.target.closest('.modal-tabs') || e.target.closest('.modal-close') || e.target.closest('.theme-toggle-btn') || e.target.closest('.reset-simulation-btn')) {
+ return;
+ }
const card = e.target.closest('.group-card');
if (card) {
const groupId = card.dataset.group;
- const group = groups.find(g => g.id === groupId);
+ const group = appGroups.find(g => g.id === groupId);
console.log('[WC2026] Card clicked, groupId:', groupId, 'found:', !!group);
openModal(group);
}
@@ -366,6 +665,7 @@ function buildShell() {
+