Estoy creando un juego basado en turnos de cadenas de palabras pequeñas con Node.js, Express y Socket.io. Los jugadores y sus puntajes se muestran, actualizados en cada turno, a través de esta función:
function updatePlayersList(players) { const players_list = document.getElementById('players_list'); players_list.innerHTML = players.map(player => `<li id="${player.id}">${player.name} - ${player.score}</li>`).join(''); } Aquí está la matriz de players :
[ { id: 'opYbiuXzExmymRPvAAAV', name: 'Paul', score: 0, room: 'room', playing: true }, { id: 'uvs4wxpZwsmaQ3G4AAAX', name: 'Ezio', score: 0, room: 'room', playing: true } ]Que funciona bien y muestra esto . El jugador al que le toca el turno recibe su nombre con un borde. Aquí hay un juego con solo dos jugadores, pero pueden jugar más.
En esta idea, quiero tachar el nombre de los jugadores que perdieron durante el juego. Su nombre aún se muestra para que todos sepan quién sigue dentro y quién no, pero obviamente ya no pueden jugar, solo sigan mirando.
Así que estaba pensando en una declaración if dentro de la función de mapa, agregando una clase .not-playing a los nombres de los jugadores con playing: false (que se actualiza en el lado del servidor después de cada turno). Pero de cualquier manera lo estoy haciendo mal, o tengo que usar algo más? Aquí está el código modificado, pero luego no se muestran más jugadores, ni los que juegan ni los que no juegan. No es lo que quiero, obviamente.
players_list.innerHTML = players.map(player => { if (player.playing) { `<li id="${player.id}">${player.name} - ${player.score}</li>` } else { `<li id="${player.id}" class="not-playing">${player.name} - ${player.score}</li>` } }).join(''); También probé con un bucle forEach pero obtuve el mismo resultado.
En su código modificado, no está devolviendo nada de la llamada de map . Siempre que no abra llaves, devuelve implícitamente el valor asignado (esto es algo de azúcar sintáctico que le ofrece JavaScript), pero una vez que abre un bloque, debe volver explícitamente desde él:
players_list.innerHTML = players.map(player => { if (player.playing) { return `<li id="${player.id}">${player.name} - ${player.score}</li>`; } else { return `<li id="${player.id}" class="not-playing">${player.name} - ${player.score}</li>`; } }).join('');Debe devolver algo al hacer el mapa.
No estoy seguro de cómo se veía su forEach, pero creo que obtuve la funcionalidad que está buscando con esto:
players.forEach(player => { if (player.playing) { players_list.innerHTML += `<li id="${player.id}">${player.name} - ${player.score}</li>` } else { players_list.innerHTML += `<li id="${player.id}" class="not-playing">${player.name} - ${player.score}</li>` } })