settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

show player's checked status in playerlist

Browse Source
This commit is contained in:
Settel 2021-09-03 22:55:37 +02:00
parent 8213902159
commit dfbb4347e0
2 changed files with 63 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
client/src/components/Player.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="player">
<div :class="['player__row', { 'player__row__idle': this.player.isIdle }]">
<div class="player__status">
<span v-if="gamePhase === 'select-quote'">{{ hasSelected ? '☑' : '☐' }}</span>
</div>
<div class="player__name">
{{ player.name }}
</div>
<div class="player__score">
{{ player.score || 0 }}
</div>
</div>
</div>
</template>
<script>
export default {
props: ['player'],
computed: {
gamePhase() {
return this.$store.state.game.phase
},
hasSelected() {
return this.$store.state.round.selections[this.player.id]
},
},
}
</script>
<style lang="scss">
.player {
&__row {
display: flex;
color: #ffffff;
font-family: Dosis;
font-size: 18px;
&__idle {
color: #606060;
}
}
&__name {
display: inline;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__status {
width: 20px;
}
&__score {
width: 32px;
margin-left: 16px;
text-align: right;
}
}
</style>

38
client/src/components/PlayerList.vue
View File

@ -1,15 +1,7 @@
<template>
<div class="player-list">
<div class="player-list__player" v-for="player in players" :key="player.id">
<div class="player-list__player-status">
{{ player.isIdle ? '◯' : '⬤' }}
</div>
<div class="player-list__player-name">
{{ player.name }}
</div>
<div class="player-list__player-score">
{{ player.score || 0 }}
</div>
<div v-for="player in players" :key="player.id">
<Player :player="player" />
</div>
</div>
</template>
@ -22,33 +14,9 @@ export default {
<style lang="scss">
.player-list {
padding: 8px 16px;
padding: 8px;
border: 1px solid #ffffff;
border-radius: 10px;
background-color: rgba(64, 32, 128, 0.5);
&__player {
display: flex;
color: #ffffff;
font-family: Dosis;
font-size: 18px;
&-name {
display: inline;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-status {
margin-right: 8px;
font-size: 12px;
}
&-score {
width: 32px;
margin-left: 16px;
text-align: right;
}
}
}
</style>