diff --git a/web/src/components/PlayerList.vue b/web/src/components/PlayerList.vue index 6ab57bd..483270a 100644 --- a/web/src/components/PlayerList.vue +++ b/web/src/components/PlayerList.vue @@ -2,13 +2,10 @@

Players:

{{ player.name }} - - ( {{ teamName(player.team) }} {{ roleName(player.role) }} ) -
@@ -22,7 +19,9 @@ export default { return this.$store.state.is_host; }, players() { - return this.$store.state.players; + return this.$store.state.players.filter( + p => p.role == null && p.team == null + ); }, gameCode() { return this.$store.state.game_code; diff --git a/web/src/components/TeamRoleSelect.vue b/web/src/components/TeamRoleSelect.vue index eb8ea41..c6cc8d1 100644 --- a/web/src/components/TeamRoleSelect.vue +++ b/web/src/components/TeamRoleSelect.vue @@ -7,12 +7,31 @@ > {{ $store.state.writer_name }} +
+
+ {{ player.name }} +
+
+
+
+
+ {{ player.name }} +
+
@@ -29,7 +48,17 @@ export default { computed: { teamName() { return this.$store.state[`team_${this.teamID}`].name; - } + }, + writers() { + return this.$store.state.players.filter( + p => p.team === this.teamID && p.role === `writer` + ); + }, + guessers() { + return this.$store.state.players.filter( + p => p.team === this.teamID && p.role === `guesser` + ); + }, }, methods: { joinRole(role) { @@ -81,6 +110,10 @@ export default { width: 25%; } +hr { + width: 90%; +} + button { background-color: var(--background3); color: var(--background3-text);