Escale o Cruzeiro para o jogo desta quarta, contra o Mushuc Runa

Na noite desta quarta-feira (9), Cruzeiro x Mushuc Runa se enfrentam pela 2ª rodada da Copa Sul-Americana. A partida acontecerá às 21h30, com transmissão da ESPN e da Disney+, apesar do confronto acontecer no Mineirão, o jogo será realizado com portões fechados. No campo tático do Diário Celeste você pode escalar a equipe para o duelo diante do time equatoriano.

O Cruzeiro ainda não conta com Juan Dinenno que segue aprimorando a parte física após a grave lesão sofrida em 2024. Além disso, João Marcelo que passou por um procedimento cirúrgico também não joga, assim como Japa que também se recupera de lesão.

No entanto, o técnico Leonardo Jardim conta com o retorno de Matheus Pereira, que está de volta após o nascimento do seu filho.

Escale o Cruzeiro para enfrentar o Mushuc Runa

/* Campo para Desktop */ #campo { display: block; position: relative; width: 100%; /* Responsividade horizontal */ max-width: 1228px; /* Tamanho máximo */ height: auto; /* Altura ajustada automaticamente */ aspect-ratio: 1228 / 768; /* Mantém a proporção do campo */ overflow: auto; /* Barra de rolagem para não perder conteúdo */ background: url(‘https://www.diarioceleste.com.br/wp-content/uploads/2024/12/campo-tatico-monte-escalacao-cruzeiro.jpg’) no-repeat center center; background-size: contain; margin: auto; /* Centraliza o campo no container */ } /* Campo para Mobile */ #campo-mobile { display: none; position: relative; width: 100%; max-width: 384px; height: 614px; margin: auto; background: url(‘https://www.diarioceleste.com.br/wp-content/uploads/2024/12/campo-tatico-mobile-monte-escalacao-cruzeiro.jpg’) no-repeat center center; background-size: cover; } /* Jogadores */ .jogador { position: absolute; width: 8.3%; /* Ajustado para caber melhor dentro do círculo */ height: 13%; /* Mantém proporção 1:1 */ background-color: rgba(0, 128, 255, 0.8); background-size: contain; /* Garante que as imagens não sejam cortadas */ background-position: center; /* Centraliza as imagens */ background-repeat: no-repeat; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; user-select: none; touch-action: none; white-space: nowrap; } .jogador.select-active { outline: 2px dashed rgba(255, 255, 255, 0.5); /* Destaca jogador selecionado */ } .jogador select { display: none; } /* Nome do jogador */ .nome-jogador { font-size: 1.2vw; /* Reduzido e escalável */ color: white; text-shadow: 1px 1px 0 blue, -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue; position: absolute; top: 105%; /* Posição ajustada logo abaixo do círculo */ left: 50%; transform: translate(-50%, 0%); white-space: nowrap; text-align: center; visibility: visible; /* Ocultar durante o arraste */ } .nome-jogador.hidden { visibility: hidden; /* Oculta o nome */ } /* Botão “NOVO” */ #btn-novo { position: absolute; top: 1.3%; /* Proporcional ao campo desktop (10px/768px) */ left: 0.81%; /* Proporcional ao campo desktop (10px/1228px) */ padding: 10px; background-color: #00BFFF; color: #fff; border: none; border-radius: 5px; cursor: pointer; z-index: 1000; } /* Estilos adaptativos */ @media (max-width: 768px) { #campo { display: none; } #campo-mobile { display: block; } .jogador { width: 50px; height: 50px; } .nome-jogador { font-size: 14px; } #btn-novo { top: 10px; left: 10px; } } Compartilhar const commonJogadores = [ {‘value’: ‘Bolasie’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1989/05/Bolasie_1.png’}, {‘value’: ‘Christian’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2000/12/Christian.png’}, {‘value’: ‘Dudu’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1992/01/Dudu.png’}, {‘value’: ‘Eduardo’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1989/10/Eduardo.png’}, {‘value’: ‘Fabrício Bruno’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1996/02/Fabricio_Bruno.png’}, {‘value’: ‘Fagner’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1989/06/Fagner.png’}, {‘value’: ‘Gabigol’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1996/08/Gabi.png’}, {‘value’: ‘Jonathan Jesus’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2004/05/Jonathan_Jesus.png’}, {‘value’: ‘Kaiki’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2003/03/Kaiki-3.png’}, {‘value’: ‘Kaio Jorge’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2002/01/Kaio_Jorge.png’}, {‘value’: ‘Lautaro Díaz’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1998/05/Lautaro_Diaz.png’}, {‘value’: ‘Lucas Romero’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1994/04/Lucas_Romero.png’}, {‘value’: ‘Lucas Silva’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1993/02/Lucas_Silva.png’}, {‘value’: ‘Lucas Villalba’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1994/08/Lucas_Villalba.png’}, {‘value’: ‘Marquinhos’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2003/04/Marquinhos.png’}, {‘value’: ‘Marlon’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1997/05/Marlon-1.png’}, {‘value’: ‘Matheus Henrique’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1997/12/Matheus_Henrique.png’}, {‘value’: ‘Mateo Gamarra’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2000/10/Gamarra.png’}, {‘value’: ‘Matheus Pereira’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1996/05/Matheus_Pereira_2.png’}, {‘value’: ‘Rodriguinho’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2003/06/Rodriguinho.png’}, {‘value’: ‘Wanderson’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1994/10/Wanderson.png’}, {‘value’: ‘Walace’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1995/04/Walace.png’}, {‘value’: ‘William’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1995/04/William-2.png’} ]; const jogadoresData = { 1: [ { value: “Cássio”, img: “https://www.diarioceleste.com.br/wp-content/uploads/1987/06/cassio-goleiro-do-cruzeiro.png” }, { value: “Léo Aragão”, img: “https://www.diarioceleste.com.br/wp-content/uploads/2002/04/LEO_ARAGAO_-_goleiro_site.png.webp” }, { value: “Otávio”, img: “https://www.diarioceleste.com.br/wp-content/uploads/2005/12/otavio-goleiro-cruzeiro.png” } ], 2: commonJogadores, 3: commonJogadores, 4: commonJogadores, 5: commonJogadores, 6: commonJogadores, 7: commonJogadores, 8: commonJogadores, 9: commonJogadores, 10: commonJogadores, 11: commonJogadores }; function updateAvailableOptions() { const allSelects = document.querySelectorAll(‘select[data-jogador]’); const selectedValues = new Set(); // Captura os valores já selecionados allSelects.forEach(select => { if (select.value) { selectedValues.add(select.value); } }); // Atualiza as opções disponíveis em cada select allSelects.forEach(select => { Array.from(select.options).forEach(option => { if (selectedValues.has(option.value) && option.value !== select.value) { option.disabled = true; // Desabilita opções já selecionadas por outros } else { option.disabled = false; // Habilita opções não selecionadas } }); }); } // Adiciona o evento de atualização às mudanças de seleção document.querySelectorAll(‘select[data-jogador]’).forEach(select => { select.addEventListener(‘change’, () => { updateAvailableOptions(); }); }); // Chama a função inicial para atualizar as opções no início updateAvailableOptions(); function setupJogadores(campoId) { const campo = document.getElementById(campoId); const jogadores = campo.querySelectorAll(‘.jogador’); jogadores.forEach(jogador => { const id = jogador.id.replace(/[^0-9]/g, ”); // Captura o ID do jogador const select = jogador.querySelector(‘select’); // Adicionar uma opção inicial const defaultOption = document.createElement(‘option’); defaultOption.value = “”; // Deixe o valor vazio para identificar defaultOption.textContent = “Selecione um jogador”; defaultOption.selected = true; select.appendChild(defaultOption); // Adicionar evento de mudança para ignorar a seleção da opção inicial select.addEventListener(‘change’, () => { if (select.value === “”) { // Caso a opção inicial seja selecionada novamente, ignorar return; } const selectedOption = select.options[select.selectedIndex]; const img = selectedOption.dataset.img; const value = selectedOption.value; jogador.style.background = `url(${img}) no-repeat center center`; jogador.style.backgroundSize = ‘cover’; select.style.display = ‘none’; let nameTag = jogador.querySelector(‘.nome-jogador’); if (!nameTag) { nameTag = document.createElement(‘div’); nameTag.className = ‘nome-jogador’; jogador.appendChild(nameTag); } nameTag.textContent = value; }); // Adiciona opções ao select jogadoresData[id].forEach(data => { const option = document.createElement(‘option’); option.value = data.value; option.textContent = data.value; option.dataset.img = data.img; select.appendChild(option); }); // Configura posição inicial jogador.style.top = jogador.dataset.initialTop; jogador.style.left = jogador.dataset.initialLeft; // Evento de clique para mostrar select jogador.addEventListener(‘click’, () => { const span = jogador.querySelector(‘span’); span.style.display = ‘none’; select.style.display = ‘block’; select.focus(); }); // Seleção de jogador select.addEventListener(‘change’, () => { const selectedOption = select.options[select.selectedIndex]; const img = selectedOption.dataset.img; const value = selectedOption.value; jogador.style.background = `url(${img}) no-repeat center center`; jogador.style.backgroundSize = ‘cover’; select.style.display = ‘none’; let nameTag = jogador.querySelector(‘.nome-jogador’); if (!nameTag) { nameTag = document.createElement(‘div’); nameTag.className = ‘nome-jogador’; jogador.appendChild(nameTag); } nameTag.textContent = value; }); // Drag and drop para desktop jogador.setAttribute(‘draggable’, true); jogador.addEventListener(‘dragstart’, (e) => { e.dataTransfer.setData(‘text/plain’, jogador.id); }); // Touch move para mobile jogador.addEventListener(‘touchstart’, (e) => { const touch = e.touches[0]; jogador.dataset.offsetX = touch.clientX – jogador.offsetLeft; jogador.dataset.offsetY = touch.clientY – jogador.offsetTop; }); jogador.addEventListener(‘touchmove’, (e) => { e.preventDefault(); const touch = e.touches[0]; const rect = campo.getBoundingClientRect(); const x = touch.clientX – rect.left – jogador.dataset.offsetX; const y = touch.clientY – rect.top – jogador.dataset.offsetY; jogador.style.left = `${Math.max(0, Math.min(campo.offsetWidth – jogador.offsetWidth, x))}px`; jogador.style.top = `${Math.max(0, Math.min(campo.offsetHeight – jogador.offsetHeight, y))}px`; }); }); campo.addEventListener(‘dragover’, (e) => e.preventDefault()); campo.addEventListener(‘drop’, (e) => { e.preventDefault(); const id = e.dataTransfer.getData(‘text/plain’); const jogador = document.getElementById(id); const rect = campo.getBoundingClientRect(); const x = e.clientX – rect.left – jogador.offsetWidth / 2; const y = e.clientY – rect.top – jogador.offsetHeight / 2; jogador.style.left = `${Math.max(0, Math.min(campo.offsetWidth – jogador.offsetWidth, x))}px`; jogador.style.top = `${Math.max(0, Math.min(campo.offsetHeight – jogador.offsetHeight, y))}px`; }); } // Configura jogadores para desktop e mobile setupJogadores(‘campo’); setupJogadores(‘campo-mobile’); // Função para capturar e salvar o campo como imagem document.getElementById(‘compartilhar’).addEventListener(‘click’, () => { // Verifica qual campo está visível (desktop ou mobile) const campoDesktop = document.getElementById(‘campo’); const campoMobile = document.getElementById(‘campo-mobile’); const campoVisivel = window.getComputedStyle(campoDesktop).display !== ‘none’ ? campoDesktop : campoMobile; html2canvas(campoVisivel).then(canvas => { const link = document.createElement(‘a’); link.download = ‘campo-tatico.jpg’; // Nome do arquivo link.href = canvas.toDataURL(‘image/jpeg’, 1.0); // Gera o link da imagem em JPG link.click(); // Simula o clique para download }).catch(err => { console.error(“Erro ao gerar a imagem:”, err); }); });