Pra fazer isso adicionei o conceito de “rodada”. Basicamente, na primeira rodada vc começa no primeiro líder e vai avançando. Na segunda rodada, começa do último e vai voltando. Na terceira rodada faz igual à primeira, e assim por diante.
Só que precisei mudar a lógica geral. Também aproveitei pra mudar outras coisas. Por exemplo, não precisa ficar recriando o select de jogadores toda hora, basta remover a opção que foi escolhida. O mesmo vale para os div’s que vc recria toda hora, bastaria usar a mesma estrutura e só ir atualizando os valores.
Então no HTML adicionei as div’s dos resultados e sorteio, e deixei elas ocultas no início, e com vários elementos vazios, que serão preenchidos depois:
<h1>Sorteio Volei</h1>
<form id="sorteioForm">
<label for="numTeams">Quantidade de Times:</label>
<select id="numTeams" required>
<option value="1">1 Time</option>
<option value="2">2 Times</option>
<option value="3">3 Times</option>
</select>
<label for="players">Lista de Jogadores:</label>
<textarea id="players" rows="4" required></textarea>
<input type="submit" value="Sortear Times">
</form>
<div id="resultado" class="result" style="display: none">
<h2>Resultado</h2>
<div id="leaders"></div>
<div id="leaderSelect">
<h2>Vez do Líder: <span id="currentLeader"></span></h2>
<p>Escolha um jogador para o seu time:</p>
<select id="playersSelect"></select>
<button id="confirmButton">Confirmar</button>
</div>
</div>
E no JavaScript, alterei para usar esta estrutura, em vez de recriar toda hora:
var numTeams, players, teams, rodada, leaderIndex;
// os elementos podem ser buscados apenas uma vez no início, já que agora não são recriados toda hora
var resultadoDiv = document.getElementById("resultado");
var lideresDiv = document.getElementById('leaders');
var currentLeader = document.getElementById('currentLeader');
var playersSelect = document.getElementById('playersSelect');
var confirmButton = document.getElementById('confirmButton');
var leaderSelectDiv = document.getElementById("leaderSelect");
document.getElementById("sorteioForm").addEventListener("submit", function (event) {
event.preventDefault();
sortearTimes();
});
function sortearTimes() {
numTeams = parseInt(document.getElementById("numTeams").value);
players = document.getElementById("players").value.trim().split("\n").map(function (player) {
return player.trim();
});
if (players.length < numTeams) {
alert("Não há jogadores suficientes para formar os times.");
return;
}
shuffle(players);
teams = [];
// dá pra separar os times e remover do array players em um único loop
for (var i = 0; i < numTeams; i++) {
var randomIndex = Math.floor(Math.random() * players.length);
teams.push({ leader: players[randomIndex], players: [] });
players.splice(randomIndex, 1);
}
// divs de resultados e seleção ficam visíveis
resultadoDiv.style.display = 'block';
leaderSelectDiv.style.display = 'block';
// preenche os líderes
lideresDiv.innerHTML = '';
for (var i = 0; i < numTeams; i++) {
var team = teams[i];
var teamDiv = document.createElement("div");
teamDiv.id = `teamDiv${i}`;
teamDiv.classList.add("team");
teamDiv.innerHTML = `<span class="team-name">Time ${i + 1}</span>
<span class="leader">Líder: ${team.leader}</span>
<ul class="players"></ul>`;
lideresDiv.appendChild(teamDiv);
}
// preenche o select com os outros jogadores (mas primeiro limpa)
playersSelect.innerHTML = '';
for (var player of players) {
playersSelect.add(new Option(player, player));
}
// primeira rodada, começa no índice zero
rodada = leaderIndex = 0;
// atualiza o nome do líder atual
currentLeader.innerText = teams[0].leader;
}
// ao clicar no botão Confirmar
confirmButton.addEventListener('click', function () {
var selectedPlayer = playersSelect.value;
teams[leaderIndex].players.push(selectedPlayer);
players.splice(players.indexOf(selectedPlayer), 1);
// remove o jogador do select
playersSelect.remove(playersSelect.selectedIndex);
if (players.length == 0) { // já escolheu todos, mostra os times
leaderSelectDiv.style.display = 'none'; // não mostra mais o div para escolher jogadores
for (var i = 0; i < numTeams; i++) {
var team = teams[i];
var div = lideresDiv.querySelector(`#teamDiv${i}`);
var ul = div.querySelector('ul');
for (var player of teams[i].players) {
var playerItem = document.createElement("li");
playerItem.textContent = player;
ul.appendChild(playerItem);
}
}
} else {
// rodada par, vai pro próximo, rodada ímpar, vai pro anterior
if (rodada % 2 === 0) {
if (leaderIndex < numTeams - 1) { // ainda não terminou a rodada
leaderIndex++;
} else { // acabou a rodada, vai pra próxima
rodada++;
}
} else {
if (leaderIndex > 0) { // ainda não terminou a rodada
leaderIndex--;
} else { // acabou a rodada, vai pra próxima
rodada++;
}
}
// atualiza o nome do líder atual
currentLeader.innerText = teams[leaderIndex].leader;
}
});
function shuffle(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}