66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div :class="['player__row', { 'player__row__idle': player.isIdle }]">
|
||
|
|
<div class="player__status">
|
||
|
|
<span v-if="isPhaseSelectQuote">{{ hasSelected ? '☑' : '☐' }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="player__name">
|
||
|
|
{{ player.name }}
|
||
|
|
</div>
|
||
|
|
<div v-if="!hideScore" class="player__score">
|
||
|
|
{{ player.score || 0 }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { Player } from '@/stores/PlayersStore';
|
||
|
|
import { useGameinfoStore } from "@/stores/GameinfoStore"
|
||
|
|
|
||
|
|
defineProps<{
|
||
|
|
player: Player,
|
||
|
|
hideScore?: boolean,
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const game = useGameinfoStore()
|
||
|
|
const isPhaseSelectQuote = computed(() => game.state === 'play' && game.phase === 'select-quote')
|
||
|
|
const hasSelected = computed(() => false) // return this.$store.state.round.selections[this.player.id]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import '~/assets/css/components';
|
||
|
|
|
||
|
|
.player {
|
||
|
|
&__row {
|
||
|
|
display: flex;
|
||
|
|
background-color: $box-primary-background-color;
|
||
|
|
color: $box-primary-text-color;
|
||
|
|
font-family: $font-secondary;
|
||
|
|
font-size: 18px;
|
||
|
|
|
||
|
|
&__idle {
|
||
|
|
background-color: $box-primary-disabled-background-color;
|
||
|
|
color: $box-primary-disabled-text-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__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>
|