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);