1
resposta

[Dúvida] Amigo secreto reforçado

Amigo secreto podendo esconder o segundo nome da pessoa exemplo: Nico --> ##### Só ira aparecer o nome ao clicar em cima e vai sumir em 1,5s para esconder das outras pessoas quem você tirou, também impossibilitando o click duplo em 2 nomes, só pode 1 por vez.

Neste código também foi feito para que o ciclo de amigos não se quebre, tipo Eu me tirar ou eu tirar maria e maria me tirar, isso não é possível, sempre vai ter um começo e terminara em quem começou.

Só não consegui resolver o problema de que aparece em sorteio a ordem então fica meio inútil esconder o 2º nome alguém sabe o problema?

Fica assim:

Clara --> Moth
Moth --> Rose
Rose --> Mage
Mage --> Eros
Eros --> Clara

JAVASCRIPT:

// Array para armazenar os nomes dos amigos
let amigos = [];

// Função para adicionar um amigo à lista
function adicionar() {
  const nome = document.getElementById('nome-amigo').value.trim();
  
  // Verifica se o campo não está vazio
  if (nome !== '') {
    // Verifica se o nome contém apenas números
    if (/^\d+$/.test(nome)) {
      alert('Por favor, digite um nome válido (não pode ser apenas números).');
    } else {
      // Verifica se o nome já está na lista
      if (amigos.includes(nome)) {
        alert('Este nome já foi adicionado à lista de amigos.');
      } else {
        amigos.push(nome);
        atualizarListaAmigos();
        document.getElementById('nome-amigo').value = ''; // Limpa o campo de entrada após adicionar
      }
    }
  } else {
    alert('Por favor, digite um nome de amigo válido.');
  }
}

// Função para atualizar a lista de amigos incluídos
function atualizarListaAmigos() {
  const listaAmigos = document.getElementById('lista-amigos');
  listaAmigos.textContent = amigos.join(', ');
}

// Função para embaralhar a ordem dos amigos
function embaralhar(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

// Função para sortear os amigos e exibir o resultado
function sortear() {
  if (amigos.length < 2) {
    alert('Você precisa adicionar pelo menos dois amigos para realizar o sorteio.');
    return;
  }

  // Clona o array de amigos para evitar alterações na lista original
  const listaSorteio = amigos.slice();
  embaralhar(listaSorteio);

  const listaSorteioHTML = listaSorteio.map((amigo, index) => {
    const proximoAmigo = index === listaSorteio.length - 1 ? listaSorteio[0] : listaSorteio[index + 1];
    return `<span class="amigo-nome" onclick="alternarNome(this)">${amigo} --> <span class="amigo-oculto" style="visibility: hidden">${proximoAmigo}</span></span>`;
  }).join('<br>');

  const listaSorteioElement = document.getElementById('lista-sorteio');
  listaSorteioElement.innerHTML = listaSorteioHTML;
}

// Variável para controlar se um nome está atualmente visível
let nomeVisivel = false;

// Função para alternar a visibilidade do nome oculto
function alternarNome(element) {
  if (!nomeVisivel) {
    const amigoOculto = element.querySelector('.amigo-oculto');
    if (amigoOculto.style.visibility === 'visible') {
      amigoOculto.style.visibility = 'hidden';
    } else {
      amigoOculto.style.visibility = 'visible';
      nomeVisivel = true;
      setTimeout(() => {
        amigoOculto.style.visibility = 'hidden';
        nomeVisivel = false;
      }, 1500); // 1500 milissegundos = 1,5 segundos
    }
  }
}

// Função para reiniciar o sorteio
function reiniciar() {
  amigos = [];
  document.getElementById('lista-amigos').textContent = '';
  document.getElementById('lista-sorteio').textContent = '';
}
1 resposta

Olá Eros, tudo bem?

Pelo que entendi, você gostaria de esconder a ordem do sorteio para que não seja possível identificar quem tirou quem, correto?

Uma solução possível seria embaralhar novamente a lista após a criação do sorteio. Desta forma, a ordem apresentada não corresponderá à ordem do sorteio, tornando impossível identificar quem tirou quem apenas olhando a lista.

Para fazer isso, você pode adicionar um novo embaralhamento após a criação da listaSorteioHTML, mas antes de atribuí-la ao listaSorteioElement. Aqui está o código modificado:

// Função para sortear os amigos e exibir o resultado
function sortear() {
  if (amigos.length < 2) {
    alert('Você precisa adicionar pelo menos dois amigos para realizar o sorteio.');
    return;
  }

  // Clona o array de amigos para evitar alterações na lista original
  const listaSorteio = amigos.slice();
  embaralhar(listaSorteio);

  const listaSorteioHTML = listaSorteio.map((amigo, index) => {
    const proximoAmigo = index === listaSorteio.length - 1 ? listaSorteio[0] : listaSorteio[index + 1];
    return `<span class="amigo-nome" onclick="alternarNome(this)">${amigo} --> <span class="amigo-oculto" style="visibility: hidden">${proximoAmigo}</span></span>`;
  });

  // Embaralha a lista novamente para esconder a ordem do sorteio
  embaralhar(listaSorteioHTML);

  const listaSorteioElement = document.getElementById('lista-sorteio');
  listaSorteioElement.innerHTML = listaSorteioHTML.join('<br>');
}

Com essa modificação, a ordem apresentada na lista não corresponderá à ordem do sorteio, tornando impossível identificar quem tirou quem apenas olhando a lista. Veja se faz sentido, e então aplica no seu código.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software