Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Update the lobby screen to move the player around the lists

Browse source
This commit is contained in:
Oliver-Akins 2021-01-12 16:04:00 -07:00
parent 911f25eb1d
commit 94f018bf60
2 changed files with 38 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
web/src/components/PlayerList.vue
View file

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

35
web/src/components/TeamRoleSelect.vue
View file

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