78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
Vue
<template>
|
|
<div class="play">
|
|
<div :class="['play__layout', { 'play__layout__fade-out': fadeOut }]">
|
|
<div class="play__layout-playground">
|
|
<QuoteContainer :text="quote" />
|
|
<Sources :sources="sources" :selectable="selectable" />
|
|
</div>
|
|
<div class="play__layout-right-column">
|
|
<PlayerList :players="players" />
|
|
<ConfirmButton v-if="selectable"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
computed: {
|
|
fadeOut() {
|
|
return this.$store.state.game.phase === 'round-end'
|
|
},
|
|
gamePhase() {
|
|
return this.$store.state.game.phase
|
|
},
|
|
quote() {
|
|
return this.$store.state.round.quote
|
|
},
|
|
sources() {
|
|
return this.$store.state.round.sources
|
|
},
|
|
players() {
|
|
return this.$store.state.players.players
|
|
},
|
|
selectable() {
|
|
const userId = this.$store.state.engine.user.id
|
|
const selection = this.$store.state.round.selections[userId]
|
|
|
|
if (this.$store.state.game.phase != 'select-quote') return false
|
|
if (typeof selection === 'undefined') return true
|
|
return !selection
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.play {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&__layout {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
perspective: 1200px;
|
|
|
|
&-playground {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&-right-column {
|
|
width: 200px;
|
|
margin: 16px 16px 0 0;
|
|
}
|
|
|
|
&__fade-out {
|
|
animation: play-fade-out 0.7s linear;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
}
|
|
}
|
|
@keyframes play-fade-out {
|
|
to { opacity: 0; }
|
|
}
|
|
</style>
|