events.addEventListener("player-exit", event => {
const info = JSON.parse(event.data);
- window.game.remove_player(info);
+ window.game.disable_player(info);
});
events.addEventListener("player-update", event => {
if (! props.player.id)
return null;
- const all_players = [props.player, ...props.other_players];
+ const all_players = [{...props.player, active:true}, ...props.other_players];
const sorted_players = all_players.sort((a,b) => {
return b.score - a.score;
});
- const names_and_scores = sorted_players.map(player => {
- if (player.score)
- return `${player.name} (${player.score})`;
- else
- return player.name;
- }).join(', ');
+ /* Return a new array with the separator interspersed between
+ * each element of the array passed in as the argument.
+ */
+ function intersperse(arr, sep) {
+ return arr.reduce((acc, val) => [...acc, sep, val], []).slice(1);
+ }
+
+ let names_and_scores = sorted_players.map(player => {
+ if (player.score) {
+ return (
+ <span
+ key={player.name}
+ className={player.active ? "player-active" : "player-idle"}
+ >
+ {player.name} ({player.score})
+ </span>
+ );
+ } else {
+ if (player.active)
+ return player.name;
+ else
+ return null;
+ }
+ }).filter(component => component != null);
+
+ names_and_scores = intersperse(names_and_scores, ", ");
return (
<div className="player-info">
<span className="players-header">Players: </span>
- <span>{names_and_scores}</span>
+ {names_and_scores}
</div>
);
});
}
set_other_player_info(info) {
+ const player_object = {...info, active: true};
const other_players_copy = [...this.state.other_players];
const idx = other_players_copy.findIndex(o => o.id === info.id);
if (idx >= 0) {
- other_players_copy[idx] = info;
+ other_players_copy[idx] = player_object;
} else {
- other_players_copy.push(info);
+ other_players_copy.push(player_object);
}
this.setState({
other_players: other_players_copy
});
}
- remove_player(info) {
+ disable_player(info) {
+ const idx = this.state.other_players.findIndex(o => o.id === info.id);
+ if (idx < 0)
+ return;
+
+ const other_players_copy = [...this.state.other_players];
+ other_players_copy[idx].active = false;
+
this.setState({
- other_players: this.state.other_players.filter(o => o.id !== info.id)
+ other_players: other_players_copy
});
}
/>,
<LetsPlay
key="lets-play"
- num_players={1+state.other_players.length}
+ num_players={1+state.other_players.filter(p => p.active).length}
prompts={state.prompts}
/>,
<PromptOptions