I am building a small word chain turns-based game with Node.js, Express & Socket.io. The players and their scores are displayed, refreshed at every turn, through this function:
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('');
}
Here's the players array:
[
{
id: 'opYbiuXzExmymRPvAAAV',
name: 'Paul',
score: 0,
room: 'room',
playing: true
},
{
id: 'uvs4wxpZwsmaQ3G4AAAX',
name: 'Ezio',
score: 0,
room: 'room',
playing: true
}
]
Which works fine and displays this. The player's whose turn it is gets his name with a border. Here's a game with only two players but more can play.
In this idea, I want to strike the name of the players who lost during the game. Their name still gets displayed so everyone knows who's still in and who's out, but they can't play anymore obviously, just keep watching.
So I was thinking of an if statement inside the map function, adding a class .not-playing to the names of the players with playing: false (that's updated on the server side after each turn). But either way I am doing it wrong, or do I have to use something else? Here's the modified code, but then no more players get displayed, neither the playing nor the not playing ones. Not what I want, obviously.
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('');
I also tried with a forEach loop but got the same result.
In your modified code, you aren't returning anything from the map call. As long as you don't open curly braces, you implicitly return the value mapped to (this is some syntactic sugar JavaScript offers you), but once you open a block, you need to explicitly return from it:
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('');
You should return something when doing map.
I'm not sure what your forEach looked like but I think I got the functionality you're looking for with this:
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>`
}
})