A Copa do Mundo de 2026 está chegando, mas você já pode entrar em campo com nosso Simulador do Sorteio da Copa do Mundo. A ferramenta dá asas à sua imaginação e permite descobrir, aleatoriamente, possíveis grupos para Mundial. O sorteio oficial ocorre nesta sexta-feira (5), a partir das 14h, nos Estados Unidos.

/* Reset e Base */ #worldcup-draw-simulator { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; max-width: 950px; margin: 0 auto; padding: 20px; color: #333; line-height: 1.6; } #worldcup-draw-simulator * { box-sizing: border-box; } /* Utilitários */ .wc-draw-hidden { display: none !important; } /* Introdução */ .wc-draw-intro { margin-bottom: 40px; text-align: center; } .wc-draw-title { font-size: 28px; margin-bottom: 20px; color: #009739; font-weight: 700; } .wc-draw-intro-text { font-size: 16px; line-height: 1.6; color: #555; margin-bottom: 25px; max-width: 800px; margin-left: auto; margin-right: auto; } .wc-draw-rules { background: #f5f5f5; border-radius: 8px; padding: 15px; margin-top: 20px; } .wc-draw-toggle-rules { background: none; border: none; color: #009739; font-size: 16px; font-weight: 600; cursor: pointer; padding: 10px; width: 100%; text-align: center; } .wc-draw-toggle-rules:hover { opacity: 0.8; } .wc-draw-rules-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; text-align: left; } .wc-draw-rules-content.active { max-height: 600px; margin-top: 15px; } .wc-draw-rules-content h3, .wc-draw-rules-content h4 { color: #009739; margin-top: 15px; margin-bottom: 10px; } .wc-draw-rules-content ul { padding-left: 20px; } .wc-draw-rules-content li { margin-bottom: 8px; } /* Seções */ .wc-draw-section { margin-bottom: 40px; } .wc-draw-section-title { font-size: 24px; color: #1a472a; margin-bottom: 15px; font-weight: 700; } .wc-draw-brazil-group { font-size: 16px; color: #996515; margin-bottom: 30px; text-align: left; font-weight: 700; background: #fff8dc; padding: 12px 20px; border-radius: 6px; border-left: 4px solid #FFDF00; } .wc-draw-subtitle { color: #666; margin-bottom: 20px; font-size: 14px; } /* Grid Repescagens */ .wc-draw-playoffs-grid { display: grid; gap: 20px; margin-bottom: 30px; } .wc-draw-playoff-card { background: white; border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; transition: border-color 0.3s; } .wc-draw-playoff-card.selected { border-color: #1a472a; box-shadow: 0 2px 8px rgba(26, 71, 42, 0.1); } .wc-draw-playoff-title { font-size: 18px; font-weight: 600; color: #1a472a; margin-bottom: 8px; } .wc-draw-playoff-subtitle { font-size: 13px; color: #666; margin-bottom: 15px; } .wc-draw-playoff-teams { display: grid; gap: 10px; } .wc-draw-team-option { background: #f5f5f5; border: 2px solid #e0e0e0; border-radius: 6px; padding: 12px 15px; cursor: pointer; transition: all 0.2s; font-size: 14px; text-align: center; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; } .wc-draw-team-option:hover { background: #e8e8e8; border-color: #ccc; } .wc-draw-team-option.selected { background: #1a472a; color: white; border-color: #1a472a; } .wc-draw-winner-badge { display: inline-block; background: #1a472a; color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; margin-top: 10px; font-weight: 600; } /* Grid Potes */ .wc-draw-pots-grid { display: grid; gap: 20px; margin-bottom: 30px; } .wc-draw-pot-card { background: white; border: 2px solid #e0e0e0; border-radius: 8px; padding: 15px; } .wc-draw-pot-header { font-size: 18px; font-weight: 700; color: #1a472a; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #1a472a; } .wc-draw-pot-teams { display: grid; gap: 8px; } .wc-draw-pot-team { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: #f9f9f9; border-radius: 4px; font-size: 12px; gap: 6px; } .wc-draw-pot-team-name { font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .wc-draw-confed-badge { display: inline-block; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; flex-shrink: 0; } .wc-draw-confed-badge.AFC { background: #ff6b6b; color: white; } .wc-draw-confed-badge.CAF { background: #ffd93d; color: #333; } .wc-draw-confed-badge.CONCACAF { background: #6bcf7f; color: white; } .wc-draw-confed-badge.CONMEBOL { background: #4d96ff; color: white; } .wc-draw-confed-badge.OFC { background: #95e1d3; color: #333; } .wc-draw-confed-badge.UEFA { background: #9d84b7; color: white; } /* Botões */ .wc-draw-actions { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .wc-draw-btn { padding: 14px 28px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; min-width: 200px; } .wc-draw-btn:disabled { opacity: 0.5; cursor: not-allowed; } .wc-draw-btn-primary { background: #1a472a; color: white; } .wc-draw-btn-primary:hover:not(:disabled) { background: #0d2817; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26, 71, 42, 0.3); } .wc-draw-btn-secondary { background: white; color: #1a472a; border: 2px solid #1a472a; } .wc-draw-btn-secondary:hover { background: #f5f5f5; } /* Grupos */ .wc-draw-groups-container { display: grid; gap: 20px; margin-bottom: 30px; } .wc-draw-group-card { background: white; border: 2px solid #e0e0e0; border-radius: 8px; padding: 15px; transition: all 0.3s; } .wc-draw-group-card.highlight { border-color: #1a472a; box-shadow: 0 4px 16px rgba(26, 71, 42, 0.2); transform: scale(1.02); } .wc-draw-group-header { font-size: 20px; font-weight: 700; color: #1a472a; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #e0e0e0; } .wc-draw-group-teams { display: grid; gap: 8px; } .wc-draw-group-slot { padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 8px; } .wc-draw-group-slot-label { flex-shrink: 0; font-size: 12px; color: #666; } .wc-draw-team-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .wc-draw-group-slot .wc-draw-confed-badge { flex-shrink: 0; margin-left: auto; } .wc-draw-group-slot.empty { background: #f5f5f5; color: #999; } .wc-draw-group-slot.filled { background: #e8f5e9; font-weight: 500; } .wc-draw-group-slot.brazil { background: #FFDF00; color: #1a472a; font-weight: 600; } .wc-draw-group-slot.brazil .wc-draw-group-slot-label { color: rgba(26, 71, 42, 0.8); } /* Seção Compartilhar */ .wc-draw-share-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid #e0e0e0; text-align: center; } .wc-draw-share-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px; } .wc-draw-share-instructions { font-size: 14px; color: #666; margin-bottom: 20px; } .wc-draw-share-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .wc-draw-share-btn { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; color: white; } .wc-draw-share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .wc-draw-share-btn svg { flex-shrink: 0; } .wc-draw-share-x { background: #000000; } .wc-draw-share-x:hover { background: #333333; } .wc-draw-share-facebook { background: #1877F2; } .wc-draw-share-facebook:hover { background: #0d65d9; } .wc-draw-share-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } .wc-draw-share-instagram:hover { background: linear-gradient(45deg, #e08323 0%, #d6582c 25%, #cc1733 50%, #bc1356 75%, #ac0878 100%); } .wc-draw-share-download { background: #1a472a; } .wc-draw-share-download:hover { background: #0d2817; } /* Responsivo Desktop */ @media (min-width: 768px) { .wc-draw-title { font-size: 36px; } .wc-draw-intro-text { font-size: 18px; } .wc-draw-playoffs-grid { grid-template-columns: repeat(2, 1fr); } .wc-draw-pots-grid { grid-template-columns: repeat(2, 1fr); } .wc-draw-groups-container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .wc-draw-playoffs-grid { grid-template-columns: repeat(3, 1fr); } .wc-draw-pots-grid { grid-template-columns: repeat(4, 1fr); } .wc-draw-groups-container { grid-template-columns: repeat(3, 1fr); } } (function() { ‘use strict’; // ============================================ // DADOS BASE // ============================================ // Definição das repescagens const PLAYOFFS = [ { id: ‘uefa_a’, name: ‘Repescagem UEFA A’, subtitle: ‘O vencedor vai para o Pote 4 (UEFA)’, teams: [‘País de Gales’, ‘Bósnia-Herzegovina’, ‘Itália’, ‘Irlanda do Norte’], confed: ‘UEFA’ }, { id: ‘uefa_b’, name: ‘Repescagem UEFA B’, subtitle: ‘O vencedor vai para o Pote 4 (UEFA)’, teams: [‘Ucrânia’, ‘Suécia’, ‘Polônia’, ‘Albânia’], confed: ‘UEFA’ }, { id: ‘uefa_c’, name: ‘Repescagem UEFA C’, subtitle: ‘O vencedor vai para o Pote 4 (UEFA)’, teams: [‘Eslováquia’, ‘Kosovo’, ‘Turquia’, ‘Romênia’], confed: ‘UEFA’ }, { id: ‘uefa_d’, name: ‘Repescagem UEFA D’, subtitle: ‘O vencedor vai para o Pote 4 (UEFA)’, teams: [‘República Tcheca’, ‘Irlanda’, ‘Dinamarca’, ‘Macedônia do Norte’], confed: ‘UEFA’ }, { id: ‘inter_1’, name: ‘Repescagem Inter 1’, subtitle: ‘O vencedor vai para o Pote 4’, teams: [‘Nova Caledônia’, ‘Jamaica’, ‘RD Congo’] }, { id: ‘inter_2’, name: ‘Repescagem Inter 2’, subtitle: ‘O vencedor vai para o Pote 4’, teams: [‘Suriname’, ‘Iraque’, ‘Bolívia’] } ]; // Mapeamento das confederações const CONFEDERATIONS = { ‘Estados Unidos’: ‘CONCACAF’, ‘México’: ‘CONCACAF’, ‘Canadá’: ‘CONCACAF’, ‘Panamá’: ‘CONCACAF’, ‘Curaçao’: ‘CONCACAF’, ‘Haiti’: ‘CONCACAF’, ‘Jamaica’: ‘CONCACAF’, ‘Nova Caledônia’: ‘OFC’, ‘Argentina’: ‘CONMEBOL’, ‘Brasil’: ‘CONMEBOL’, ‘Colômbia’: ‘CONMEBOL’, ‘Equador’: ‘CONMEBOL’, ‘Paraguai’: ‘CONMEBOL’, ‘Uruguai’: ‘CONMEBOL’, ‘Bolívia’: ‘CONMEBOL’, ‘Suriname’: ‘CONCACAF’, ‘Alemanha’: ‘UEFA’, ‘Inglaterra’: ‘UEFA’, ‘Áustria’: ‘UEFA’, ‘Bélgica’: ‘UEFA’, ‘Croácia’: ‘UEFA’, ‘Escócia’: ‘UEFA’, ‘França’: ‘UEFA’, ‘Espanha’: ‘UEFA’, ‘Noruega’: ‘UEFA’, ‘Países Baixos’: ‘UEFA’, ‘Portugal’: ‘UEFA’, ‘Suíça’: ‘UEFA’, ‘País de Gales’: ‘UEFA’, ‘Bósnia-Herzegovina’: ‘UEFA’, ‘Itália’: ‘UEFA’, ‘Irlanda do Norte’: ‘UEFA’, ‘Ucrânia’: ‘UEFA’, ‘Suécia’: ‘UEFA’, ‘Polônia’: ‘UEFA’, ‘Albânia’: ‘UEFA’, ‘Eslováquia’: ‘UEFA’, ‘Kosovo’: ‘UEFA’, ‘Turquia’: ‘UEFA’, ‘Romênia’: ‘UEFA’, ‘República Tcheca’: ‘UEFA’, ‘Irlanda’: ‘UEFA’, ‘Dinamarca’: ‘UEFA’, ‘Macedônia do Norte’: ‘UEFA’, ‘Arábia Saudita’: ‘AFC’, ‘Austrália’: ‘AFC’, ‘Japão’: ‘AFC’, ‘Jordânia’: ‘AFC’, ‘Uzbequistão’: ‘AFC’, ‘Catar’: ‘AFC’, ‘Coreia do Sul’: ‘AFC’, ‘Irã’: ‘AFC’, ‘Iraque’: ‘AFC’, ‘África do Sul’: ‘CAF’, ‘Argélia’: ‘CAF’, ‘Cabo Verde’: ‘CAF’, ‘Costa do Marfim’: ‘CAF’, ‘Egito’: ‘CAF’, ‘Gana’: ‘CAF’, ‘Marrocos’: ‘CAF’, ‘Senegal’: ‘CAF’, ‘Tunísia’: ‘CAF’, ‘RD Congo’: ‘CAF’, ‘Nova Zelândia’: ‘OFC’ }; // Potes base (sem os vencedores das repescagens) const BASE_POTS = { 1: [‘Estados Unidos’, ‘México’, ‘Canadá’, ‘Espanha’, ‘Argentina’, ‘França’, ‘Inglaterra’, ‘Brasil’, ‘Portugal’, ‘Países Baixos’, ‘Bélgica’, ‘Alemanha’], 2: [‘Croácia’, ‘Marrocos’, ‘Colômbia’, ‘Uruguai’, ‘Suíça’, ‘Japão’, ‘Senegal’, ‘Irã’, ‘Coreia do Sul’, ‘Equador’, ‘Áustria’, ‘Austrália’], 3: [‘Noruega’, ‘Panamá’, ‘Egito’, ‘Argélia’, ‘Escócia’, ‘Paraguai’, ‘Tunísia’, ‘Costa do Marfim’, ‘Uzbequistão’, ‘Catar’, ‘Arábia Saudita’, ‘África do Sul’], 4: [‘Jordânia’, ‘Cabo Verde’, ‘Gana’, ‘Curaçao’, ‘Haiti’, ‘Nova Zelândia’] }; // Grupos const GROUPS = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘I’, ‘J’, ‘K’, ‘L’]; // Cabeças de chave fixas const SEEDED_TEAMS = { ‘México’: ‘A’, ‘Canadá’: ‘B’, ‘Estados Unidos’: ‘D’ }; // ============================================ // ESTADO GLOBAL // ============================================ let state = { playoffWinners: {}, finalPots: null, currentDraw: null }; // ============================================ // INICIALIZAÇÃO // ============================================ function initWorldCupDrawSimulator(rootElement) { if (!rootElement) { console.error(‘Elemento raiz não encontrado’); return; } initEventListeners(); renderPlayoffs(); } function initEventListeners() { // Toggle das regras document.getElementById(‘toggleRules’).addEventListener(‘click’, toggleRules); // Repescagens document.getElementById(‘randomPlayoffsBtn’).addEventListener(‘click’, randomizePlayoffs); document.getElementById(‘validatePlayoffsBtn’).addEventListener(‘click’, validatePlayoffs); // Potes document.getElementById(‘backToPlayoffsBtn’).addEventListener(‘click’, backToPlayoffs); document.getElementById(‘startDrawBtn’).addEventListener(‘click’, startDraw); // Sorteio document.getElementById(‘restartDrawBtn’).addEventListener(‘click’, restartDraw); document.getElementById(‘backToPotsBtn’).addEventListener(‘click’, backToPlayoffs); // Compartilhar document.getElementById(‘downloadImage’).addEventListener(‘click’, downloadDrawImage); document.getElementById(‘shareX’).addEventListener(‘click’, shareOnX); document.getElementById(‘shareFacebook’).addEventListener(‘click’, shareOnFacebook); document.getElementById(‘shareInstagram’).addEventListener(‘click’, shareOnInstagram); } // ============================================ // INTERFACE – REGRAS // ============================================ function toggleRules() { const content = document.getElementById(‘rulesContent’); const btn = document.getElementById(‘toggleRules’); if (content.classList.contains(‘active’)) { content.classList.remove(‘active’); btn.textContent = ‘Saiba mais ▼’; } else { content.classList.add(‘active’); btn.textContent = ‘Menos detalhes ▲’; } } // ============================================ // INTERFACE – REPESCAGENS // ============================================ function renderPlayoffs() { const grid = document.getElementById(‘playoffsGrid’); grid.innerHTML = ”; PLAYOFFS.forEach(playoff => { const card = document.createElement(‘div’); card.className = ‘wc-draw-playoff-card’; card.id = `playoff-${playoff.id}`; const title = document.createElement(‘div’); title.className = ‘wc-draw-playoff-title’; title.textContent = playoff.name; const subtitle = document.createElement(‘div’); subtitle.className = ‘wc-draw-playoff-subtitle’; subtitle.textContent = playoff.subtitle; const teamsContainer = document.createElement(‘div’); teamsContainer.className = ‘wc-draw-playoff-teams’; playoff.teams.forEach(team => { const teamBtn = document.createElement(‘div’); teamBtn.className = ‘wc-draw-team-option’; teamBtn.textContent = team; teamBtn.addEventListener(‘click’, () => selectPlayoffWinner(playoff.id, team)); teamsContainer.appendChild(teamBtn); }); card.appendChild(title); card.appendChild(subtitle); card.appendChild(teamsContainer); grid.appendChild(card); }); } function selectPlayoffWinner(playoffId, team) { state.playoffWinners[playoffId] = team; // Atualizar a UI const card = document.getElementById(`playoff-${playoffId}`); const options = card.querySelectorAll(‘.wc-draw-team-option’); options.forEach(option => { if (option.textContent === team) { option.classList.add(‘selected’); } else { option.classList.remove(‘selected’); } }); // Verificar se o badge já existe let badge = card.querySelector(‘.wc-draw-winner-badge’); if (!badge) { badge = document.createElement(‘div’); badge.className = ‘wc-draw-winner-badge’; card.appendChild(badge); } badge.textContent = ‘Vencedor selecionado’; card.classList.add(‘selected’); // Verificar se todas as repescagens foram selecionadas checkPlayoffsComplete(); } function checkPlayoffsComplete() { const allSelected = PLAYOFFS.every(playoff => state.playoffWinners[playoff.id]); document.getElementById(‘validatePlayoffsBtn’).disabled = !allSelected; } function randomizePlayoffs() { PLAYOFFS.forEach(playoff => { const randomTeam = playoff.teams[Math.floor(Math.random() * playoff.teams.length)]; selectPlayoffWinner(playoff.id, randomTeam); }); } function validatePlayoffs() { generateFinalPots(); showSection(‘potsSection’); hideSection(‘playoffsSection’); } function backToPlayoffs() { showSection(‘playoffsSection’); hideSection(‘potsSection’); hideSection(‘drawSection’); state.currentDraw = null; } // ============================================ // GERAÇÃO DOS POTES // ============================================ function generateFinalPots() { state.finalPots = { 1: […BASE_POTS[1]], 2: […BASE_POTS[2]], 3: […BASE_POTS[3]], 4: […BASE_POTS[4]] }; // Adicionar os vencedores das repescagens ao pote 4 PLAYOFFS.forEach(playoff => { const winner = state.playoffWinners[playoff.id]; state.finalPots[4].push(winner); }); renderPots(); } function renderPots() { const grid = document.getElementById(‘potsGrid’); grid.innerHTML = ”; for (let pot = 1; pot { const teamDiv = document.createElement(‘div’); teamDiv.className = ‘wc-draw-pot-team’; const nameSpan = document.createElement(‘span’); nameSpan.className = ‘wc-draw-pot-team-name’; // Verificar se é um vencedor de repescagem const playoff = PLAYOFFS.find(p => state.playoffWinners[p.id] === team); if (playoff) { nameSpan.textContent = `${team} (${playoff.name})`; } else { nameSpan.textContent = team; } const confed = getTeamConfederation(team); const badge = document.createElement(‘span’); badge.className = `wc-draw-confed-badge ${confed}`; badge.textContent = confed; teamDiv.appendChild(nameSpan); teamDiv.appendChild(badge); teamsContainer.appendChild(teamDiv); }); card.appendChild(header); card.appendChild(teamsContainer); grid.appendChild(card); } } function getTeamConfederation(team) { // Verificar primeiro se é um vencedor de repescagem UEFA const playoff = PLAYOFFS.find(p => state.playoffWinners[p.id] === team); if (playoff && playoff.confed) { // Para repescagens UEFA, usar a confederação fixa return playoff.confed; } // Para todos os outros países (incluindo repescagens inter), usar a confederação real return CONFEDERATIONS[team] || ‘UEFA’; } // ============================================ // ALGORITMO DE SORTEIO // ============================================ function generateCompleteDraw() { const MAX_ATTEMPTS = 10000; let attempt = 0; while (attempt { groups[group] = { teams: [], confederations: {} }; }); // Criar a lista de seleções com suas propriedades const allTeams = []; for (let pot = 1; pot { const confed = getTeamConfederation(team); const seedGroup = SEEDED_TEAMS[team]; allTeams.push({ name: team, pot: pot, confed: confed, seedGroup: seedGroup }); }); } // Colocar primeiro os cabeças de chave const seededTeams = allTeams.filter(t => t.seedGroup); const unseededTeams = allTeams.filter(t => !t.seedGroup); seededTeams.forEach(team => { placeTeamInGroup(groups[team.seedGroup], team); }); // Ordenar as seleções não fixas por pote unseededTeams.sort((a, b) => a.pot – b.pot); // Embaralhar aleatoriamente em cada pote const teamsByPot = [[], [], [], []]; unseededTeams.forEach(team => { teamsByPot[team.pot – 1].push(team); }); teamsByPot.forEach(potTeams => { shuffleArray(potTeams); }); // Achatar a lista const shuffledTeams = teamsByPot.flat(); // Tentar colocar cada seleção for (let team of shuffledTeams) { const availableGroups = findAvailableGroups(groups, team); if (availableGroups.length === 0) { return null; // Falha, recomeçar } // Escolher um grupo aleatoriamente entre os disponíveis const targetGroup = availableGroups[Math.floor(Math.random() * availableGroups.length)]; placeTeamInGroup(groups[targetGroup], team); } return groups; } function findAvailableGroups(groups, team) { const available = []; for (let groupName of GROUPS) { const group = groups[groupName]; // Verificar se o grupo já tem uma seleção deste pote const hasPot = group.teams.some(t => t.pot === team.pot); if (hasPot) continue; // Verificar se o grupo está cheio if (group.teams.length >= 4) continue; // Verificar as restrições de confederação if (!canAddTeamToGroup(group, team)) continue; available.push(groupName); } return available; } function canAddTeamToGroup(group, team) { const confedCount = group.confederations[team.confed] || 0; if (team.confed === ‘UEFA’) { // UEFA: máx 2 return confedCount < 2; } else { // Outras confederações: máx 1 return confedCount 0; i–) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } // ============================================ // INTERFACE – SORTEIO // ============================================ function startDraw() { // Gerar o sorteio completo state.currentDraw = generateCompleteDraw(); if (!state.currentDraw) { alert(‘Erro ao gerar o sorteio. Por favor, tente novamente.’); return; } // Exibir a seção de sorteio showSection(‘drawSection’); hideSection(‘potsSection’); // Exibir o grupo do Brasil displayBrazilGroup(); // Exibir os grupos com o sorteio completo renderCompleteGroups(); } function displayBrazilGroup() { // Encontrar em qual grupo está o Brasil let brazilGroup = null; for (let groupName of GROUPS) { const group = state.currentDraw[groupName]; const hasBrazil = group.teams.some(team => team.name === ‘Brasil’); if (hasBrazil) { brazilGroup = groupName; break; } } // Exibir a informação const brazilGroupElement = document.getElementById(‘brazilGroup’); if (brazilGroup) { brazilGroupElement.textContent = `Com base no seu sorteio aleatório, o Brasil está no Grupo ${brazilGroup}`; } } function renderCompleteGroups() { const container = document.getElementById(‘groupsContainer’); container.innerHTML = ”; GROUPS.forEach(groupName => { const card = document.createElement(‘div’); card.className = ‘wc-draw-group-card’; const header = document.createElement(‘div’); header.className = ‘wc-draw-group-header’; header.textContent = `Grupo ${groupName}`; const teamsContainer = document.createElement(‘div’); teamsContainer.className = ‘wc-draw-group-teams’; // Recuperar as seleções deste grupo const group = state.currentDraw[groupName]; // Ordenar as seleções por pote const sortedTeams = […group.teams].sort((a, b) => a.pot – b.pot); sortedTeams.forEach(team => { const slot = document.createElement(‘div’); slot.className = ‘wc-draw-group-slot filled’ + (team.name === ‘Brasil’ ? ‘ brazil’ : ”); const label = document.createElement(‘span’); label.className = ‘wc-draw-group-slot-label’; label.textContent = `Pote ${team.pot}:`; const teamNameSpan = document.createElement(‘span’); teamNameSpan.className = ‘wc-draw-team-name’; teamNameSpan.textContent = team.name; // Adicionar badge da confederação (como elemento separado) const badge = document.createElement(‘span’); badge.className = `wc-draw-confed-badge ${team.confed}`; badge.textContent = team.confed; slot.appendChild(label); slot.appendChild(teamNameSpan); slot.appendChild(badge); teamsContainer.appendChild(slot); }); card.appendChild(header); card.appendChild(teamsContainer); container.appendChild(card); }); } function restartDraw() { startDraw(); } // ============================================ // COMPARTILHAMENTO NAS REDES SOCIAIS // ============================================ function generateShareText() { // Encontrar o grupo do Brasil let brazilGroup = null; let brazilTeams = []; for (let groupName of GROUPS) { const group = state.currentDraw[groupName]; const hasBrazil = group.teams.some(team => team.name === ‘Brasil’); if (hasBrazil) { brazilGroup = groupName; brazilTeams = group.teams.map(t => t.name); break; } } let text = `Meu sorteio para a Copa do Mundo 2026!nn`; text += `O Brasil está no Grupo ${brazilGroup} com: ${brazilTeams.filter(t => t !== ‘Brasil’).join(‘, ‘)}nn`; text += `Faça o seu próprio sorteio:`; return text; } function getShareUrl() { return window.location.href; } async function generateDrawImage() { const container = document.getElementById(‘groupsContainer’); const brazilGroupElement = document.getElementById(‘brazilGroup’); // Criar um container temporário para a captura const captureContainer = document.createElement(‘div’); captureContainer.style.cssText = ‘position: absolute; left: -9999px; top: 0; background: white; padding: 30px; width: 950px;’; document.body.appendChild(captureContainer); // Adicionar o logo no topo const logoContainer = document.createElement(‘div’); logoContainer.style.cssText = ‘text-align: center; margin-bottom: 20px;’; const logo = document.createElement(‘img’); logo.src = ‘https://pbs.twimg.com/profile_banners/67141807/1729195299/1500×500’; logo.style.cssText = ‘max-width: 100%; height: auto; border-radius: 8px;’; logo.crossOrigin = ‘anonymous’; logoContainer.appendChild(logo); captureContainer.appendChild(logoContainer); // Attendre que l’image soit chargée await new Promise((resolve) => { if (logo.complete) { resolve(); } else { logo.onload = resolve; logo.onerror = resolve; // Continuer même si l’image échoue } }); // Adicionar um título const title = document.createElement(‘h2’); title.textContent = ‘Meu sorteio – Copa do Mundo 2026’; title.style.cssText = ‘font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif; font-size: 24px; color: #333; text-align: center; margin-bottom: 20px;’; captureContainer.appendChild(title); // Adicionar o grupo do Brasil const brazilInfo = document.createElement(‘p’); brazilInfo.textContent = brazilGroupElement.textContent; brazilInfo.style.cssText = ‘font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif; font-size: 16px; color: #996515; font-weight: 700; background: #fff8dc; padding: 12px 20px; border-radius: 6px; border-left: 4px solid #FFDF00; margin-bottom: 25px;’; captureContainer.appendChild(brazilInfo); // Clonar o container dos grupos const groupsClone = container.cloneNode(true); groupsClone.style.cssText = ‘display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;’; captureContainer.appendChild(groupsClone); // Adicionar um rodapé const footer = document.createElement(‘p’); footer.textContent = ‘topmercato.com – Simulador de sorteio FIFA 2026’; footer.style.cssText = ‘font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif; font-size: 12px; color: #999; text-align: center; margin-top: 20px;’; captureContainer.appendChild(footer); try { const canvas = await html2canvas(captureContainer, { backgroundColor: ‘#ffffff’, scale: 2, useCORS: true }); document.body.removeChild(captureContainer); return canvas; } catch (error) { if (document.body.contains(captureContainer)) { document.body.removeChild(captureContainer); } console.error(‘Erro ao gerar a imagem:’, error); return null; } } async function downloadDrawImage() { const btn = document.getElementById(‘downloadImage’); const originalText = btn.innerHTML; btn.innerHTML = ‘Gerando…‘; btn.disabled = true; try { const canvas = await generateDrawImage(); if (canvas) { const link = document.createElement(‘a’); link.download = ‘sorteio-copa-do-mundo-2026.png’; link.href = canvas.toDataURL(‘image/png’); link.click(); } else { alert(‘Erro ao gerar a imagem. Por favor, tente novamente.’); } } catch (error) { console.error(‘Erro no download:’, error); alert(‘Erro ao gerar a imagem. Por favor, tente novamente.’); } btn.innerHTML = originalText; btn.disabled = false; } function shareOnX() { const text = generateShareText(); const url = getShareUrl(); alert(‘A imagem foi baixada!nnClique em “Baixar imagem” primeiro, depois anexe-a ao seu tweet.’); const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`; window.open(twitterUrl, ‘_blank’, ‘width=550,height=420’); } function shareOnFacebook() { const url = getShareUrl(); alert(‘Baixe primeiro a imagem com o botão “Baixar imagem”, depois adicione-a à sua publicação no Facebook.’); const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`; window.open(facebookUrl, ‘_blank’, ‘width=550,height=420’); } function shareOnInstagram() { const text = generateShareText() + ‘ ‘ + getShareUrl(); navigator.clipboard.writeText(text).then(() => { alert(‘Texto copiado para a área de transferência!nn1. Baixe a imagem com o botão “Baixar imagem”n2. Abra o Instagram e crie uma publicaçãon3. Selecione a imagem baixadan4. Cole o texto na legenda’); }).catch(() => { const textarea = document.createElement(‘textarea’); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand(‘copy’); document.body.removeChild(textarea); alert(‘Texto copiado para a área de transferência!nn1. Baixe a imagem com o botão “Baixar imagem”n2. Abra o Instagram e crie uma publicaçãon3. Selecione a imagem baixadan4. Cole o texto na legenda’); }); } // ============================================ // UTILITÁRIOS // ============================================ function showSection(sectionId) { document.getElementById(sectionId).classList.remove(‘wc-draw-hidden’); } function hideSection(sectionId) { document.getElementById(sectionId).classList.add(‘wc-draw-hidden’); } // ============================================ // INICIALIZAÇÃO // ============================================ // Inicialização automática if (document.readyState === ‘loading’) { document.addEventListener(‘DOMContentLoaded’, function() { initWorldCupDrawSimulator(document.getElementById(‘worldcup-draw-simulator’)); }); } else { initWorldCupDrawSimulator(document.getElementById(‘worldcup-draw-simulator’)); } })();

Siga o UmDois Esportes

• Instagram
• X
• YouTube
• Facebook
• WhatsApp