@@ -356,9 +572,10 @@ function buildStandingsHTML(group) {
// ── Modal ──────────────────────────────────────────────────────────────────
function openModal(group) {
- if (!group || !group.matches || group.matches.length === 0) return;
+ const fullGroup = appGroups.find(g => g.id === group.id) || group;
+ if (!fullGroup || !fullGroup.matches || fullGroup.matches.length === 0) return;
- const teamsHTML = group.teams.map(t =>
+ const teamsHTML = fullGroup.teams.map(t =>
`
`
).join('');
@@ -366,10 +583,10 @@ function openModal(group) {
modal.innerHTML = `
- `;
@@ -442,25 +659,11 @@ window.saveMatchScore = function(groupId, matchday, matchIdx, cardId) {
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();
+ const matchKey = getMatchKey(groupId, matchday, match.home, match.away);
+ userSimulations[matchKey] = { home: homeScore, away: awayScore };
+ saveUserSimulations();
+ resetMatchToBaseState(groupId, matchday, match.home, match.away);
+ updateMatchStates();
render();
const updatedGroup = appGroups.find(g => g.id === groupId);
@@ -479,11 +682,11 @@ window.clearMatchScore = function(groupId, matchday, matchIdx, cardId) {
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();
+ const matchKey = getMatchKey(groupId, matchday, match.home, match.away);
+ delete userSimulations[matchKey];
+ saveUserSimulations();
+ resetMatchToBaseState(groupId, matchday, match.home, match.away);
+ updateMatchStates();
render();
const updatedGroup = appGroups.find(g => g.id === groupId);
@@ -498,8 +701,10 @@ window.clearMatchScore = function(groupId, matchday, matchIdx, cardId) {
window.resetAllScores = function() {
if (confirm('Are you sure you want to reset all simulated scores back to default?')) {
- localStorage.removeItem('wc2026_groups');
- loadState();
+ localStorage.removeItem('wc2026_user_sims');
+ loadUserSimulations();
+ appGroups = JSON.parse(JSON.stringify(groups));
+ updateMatchStates();
render();
closeModal();
animateCounters();
@@ -522,11 +727,220 @@ window.toggleMatch = function(cardId) {
}
};
+// ── Rankings & Scorers Helpers ─────────────────────────────────────────────
+function calculateOverallRankings() {
+ let allStandings = [];
+ appGroups.forEach(group => {
+ const groupStandings = calculateStandings(group);
+ groupStandings.forEach((teamStandings, idx) => {
+ allStandings.push({
+ ...teamStandings,
+ groupId: group.id,
+ groupRank: idx + 1
+ });
+ });
+ });
+
+ return allStandings.sort((a, b) => {
+ if (b.pts !== a.pts) return b.pts - a.pts;
+ if (b.gd !== a.gd) return b.gd - a.gd;
+ if (b.gf !== a.gf) return b.gf - a.gf;
+ return a.name.localeCompare(b.name);
+ });
+}
+
+function buildOverallRankingsHTML() {
+ const sortedTeams = calculateOverallRankings();
+
+ let filtered = sortedTeams;
+ if (activeFilter !== 'all') {
+ filtered = filtered.filter(t => t.confederation === activeFilter);
+ }
+ if (searchQuery) {
+ filtered = filtered.filter(t =>
+ t.name.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+ }
+
+ if (filtered.length === 0) {
+ return `
`;
+ }
+
+ const rows = filtered.map((team, idx) => {
+ const overallRank = sortedTeams.findIndex(t => t.name === team.name) + 1;
+ const rankClass = overallRank <= 32 ? 'rank-adv' : 'rank-el';
+ return `
+
+ | ${overallRank} |
+
+ ${team.flag}
+ ${team.name}
+ Group ${team.groupId}
+ ${team.isHost ? '🏟️' : ''}
+ |
+ ${team.confederation} |
+ ${team.played} |
+ ${team.won} |
+ ${team.drawn} |
+ ${team.lost} |
+ ${team.gf} |
+ ${team.ga} |
+ ${team.gd > 0 ? '+' + team.gd : team.gd} |
+ ${team.pts} |
+
+ `;
+ }).join('');
+
+ return `
+
+
+
+
+
+
+ | # |
+ Team |
+ Conf. |
+ P |
+ W |
+ D |
+ L |
+ GF |
+ GA |
+ GD |
+ Pts |
+
+
+
+ ${rows}
+
+
+
+
+ `;
+}
+
+function getTopScorers() {
+ const scorersMap = {};
+
+ appGroups.forEach(group => {
+ group.matches.forEach(match => {
+ if (match.score && match.status && match.status !== 'Scheduled' && match.scorers) {
+ if (match.scorers.home) {
+ match.scorers.home.forEach(s => {
+ if (s.name.includes('(OG)') || s.name.includes('OG') || s.name.includes('Own Goal')) return;
+ const name = s.name.replace(/\s*\(pen\)/g, '').trim();
+ if (!scorersMap[name]) {
+ scorersMap[name] = { name, goals: 0, team: match.home, flag: '' };
+ const teamObj = group.teams.find(t => t.name === match.home);
+ if (teamObj) scorersMap[name].flag = teamObj.flag;
+ }
+ scorersMap[name].goals += 1;
+ });
+ }
+ if (match.scorers.away) {
+ match.scorers.away.forEach(s => {
+ if (s.name.includes('(OG)') || s.name.includes('OG') || s.name.includes('Own Goal')) return;
+ const name = s.name.replace(/\s*\(pen\)/g, '').trim();
+ if (!scorersMap[name]) {
+ scorersMap[name] = { name, goals: 0, team: match.away, flag: '' };
+ const teamObj = group.teams.find(t => t.name === match.away);
+ if (teamObj) scorersMap[name].flag = teamObj.flag;
+ }
+ scorersMap[name].goals += 1;
+ });
+ }
+ }
+ });
+ });
+
+ return Object.values(scorersMap).sort((a, b) => {
+ if (b.goals !== a.goals) return b.goals - a.goals;
+ return a.name.localeCompare(b.name);
+ });
+}
+
+function buildTopScorersHTML() {
+ const scorers = getTopScorers();
+
+ let filtered = scorers;
+ if (searchQuery) {
+ filtered = filtered.filter(s =>
+ s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ s.team.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+ }
+
+ if (filtered.length === 0) {
+ return `
`;
+ }
+
+ const rows = filtered.map((player, idx) => {
+ const rank = scorers.findIndex(s => s.name === player.name) + 1;
+ const rankClass = rank === 1 ? 'rank-gold' : rank === 2 ? 'rank-silver' : rank === 3 ? 'rank-bronze' : '';
+ const trophy = rank === 1 ? '🏆' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : `#${rank}`;
+
+ return `
+
+
${trophy}
+
+ ${player.name}
+ ${player.flag} ${player.team}
+
+
+ ${player.goals}
+ ${player.goals === 1 ? 'goal' : 'goals'}
+
+
+ `;
+ }).join('');
+
+ return `
+
+ `;
+}
+
// ── Render ─────────────────────────────────────────────────────────────────
-function render() {
+let renderCache = {};
+let lastFilterState = '';
+
+function render(forceFull = false) {
const grid = document.getElementById('groups-grid');
if (!grid) return;
+ const currentFilterState = `${activeView}-${activeFilter}-${searchQuery}`;
+ if (currentFilterState !== lastFilterState) {
+ forceFull = true;
+ lastFilterState = currentFilterState;
+ }
+
+ if (activeView === 'rankings') {
+ grid.style.display = 'block';
+ grid.innerHTML = buildOverallRankingsHTML();
+ renderCache = {};
+ return;
+ }
+
+ if (activeView === 'scorers') {
+ grid.style.display = 'block';
+ grid.innerHTML = buildTopScorersHTML();
+ renderCache = {};
+ return;
+ }
+
+ grid.style.display = 'grid';
+
const filteredGroups = appGroups.map(group => {
let filteredTeams = group.teams;
if (activeFilter !== 'all') {
@@ -542,18 +956,49 @@ function render() {
if (filteredGroups.length === 0) {
grid.innerHTML = `
`;
+ renderCache = {};
return;
}
- grid.innerHTML = filteredGroups.map(groupCard).join('');
+ if (forceFull || Object.keys(renderCache).length === 0) {
+ renderCache = {};
+ grid.innerHTML = filteredGroups.map(group => {
+ const html = groupCard(group);
+ renderCache[group.id] = html;
+ return html;
+ }).join('');
- // Animate cards in
- requestAnimationFrame(() => {
- document.querySelectorAll('.group-card').forEach((card, i) => {
- card.style.animationDelay = `${i * 60}ms`;
- card.classList.add('animate-in');
+ // Animate cards in
+ requestAnimationFrame(() => {
+ document.querySelectorAll('.group-card').forEach((card, i) => {
+ card.style.animationDelay = `${i * 60}ms`;
+ card.classList.add('animate-in');
+ });
});
- });
+ } else {
+ // Targeted update: only re-render groups that actually changed
+ filteredGroups.forEach(group => {
+ const html = groupCard(group);
+ if (renderCache[group.id] !== html) {
+ const cardEl = document.querySelector(`.group-card[data-group="${group.id}"]`);
+ if (cardEl) {
+ cardEl.outerHTML = html;
+ // Re-trigger animate-in on updated card
+ const newCardEl = document.querySelector(`.group-card[data-group="${group.id}"]`);
+ if (newCardEl) {
+ newCardEl.classList.add('animate-in');
+ }
+ } else {
+ forceFull = true;
+ }
+ renderCache[group.id] = html;
+ }
+ });
+
+ if (forceFull) {
+ render(true);
+ }
+ }
}
// ── Global click handler (set ONCE on document.body) ──────────────────────
@@ -573,6 +1018,28 @@ function setupGlobalClick() {
});
}
+// ── View Switcher Tabs ─────────────────────────────────────────────────────
+function setupViewTabs() {
+ document.querySelectorAll('.view-tab-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ document.querySelectorAll('.view-tab-btn').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ activeView = btn.dataset.view;
+
+ const filterNav = document.querySelector('.filter-nav');
+ if (filterNav) {
+ if (activeView === 'scorers') {
+ filterNav.style.display = 'none';
+ } else {
+ filterNav.style.display = 'flex';
+ }
+ }
+
+ render(true);
+ });
+ });
+}
+
// ── Filter buttons ─────────────────────────────────────────────────────────
function setupFilters() {
document.querySelectorAll('.filter-btn').forEach(btn => {
@@ -653,9 +1120,15 @@ function buildShell() {
+
+
+
+
+
+
🔍
-
+