From 94f018bf6083b341fff8bdbdefb863bd8f14d7e8 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Tue, 12 Jan 2021 16:04:00 -0700
Subject: [PATCH] Update the lobby screen to move the player around the lists

---
 web/src/components/PlayerList.vue     |  9 +++----
 web/src/components/TeamRoleSelect.vue | 35 ++++++++++++++++++++++++++-
 2 files changed, 38 insertions(+), 6 deletions(-)

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 @@
 	<div id="player_list" class="centre">
 		<h2>Players:</h2>
 		<div
-			v-for="player in $store.state.players"
+			v-for="player in players"
 			:key="player.name"
 		>
 			{{ player.name }}
-			<span v-if="player.role" class="player-role">
-				( {{ teamName(player.team) }} {{ roleName(player.role) }} )
-			</span>
 		</div>
 	</div>
 </template>
@@ -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 }}
 		</button>
+		<div class="players">
+			<div
+				class="player"
+				v-for="player in writers"
+				:key="player.name"
+			>
+				{{ player.name }}
+			</div>
+		</div>
+		<hr>
 		<button
 			class="clickable"
 			@click.stop="joinRole(`guesser`)"
 		>
 			{{ $store.state.guesser_name }}
 		</button>
+		<div class="players">
+			<div
+				class="player"
+				v-for="player in guessers"
+				:key="player.name"
+			>
+				{{ player.name }}
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -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);