61 lines
1.1 KiB
Vue
61 lines
1.1 KiB
Vue
|
<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>
|