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

feat: hide sources and quote in round-end phase

Browse Source
This commit is contained in:
Settel 2022-08-31 21:20:21 +02:00
parent 71fce93da8
commit f29c2c07d2
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/Playground.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="playground__container"> <div class="playground__container">
<div class="playground__area"> <div class="playground__area">
<div class="playground__sources"> <div class="playground__sources" :class="{ 'playground__sources__show': showSources }">
<SourceCard v-for="source in sources" :key="source.id" :source="source" :selectable="selectable" <SourceCard v-for="source in sources" :key="source.id" :source="source" :selectable="selectable"
:selected="selection == source.id" @click="selectSource(source)" :badge="badgeMap[source.id]" :selected="selection == source.id" @click="selectSource(source)" :badge="badgeMap[source.id]"
:disabled="disabledMap[source.id]" /> :disabled="disabledMap[source.id]" />
</div> </div>
<div class="playground__spacer" /> <div class="playground__spacer" />
<div class="playground__quote"> <div class="playground__quote" :class="{ 'playground__quote__show': showQuote}">
<QuoteCard :quote="quote" /> <QuoteCard :quote="quote" />
</div> </div>
<div class="playground__skip"> <div class="playground__skip" :class="{ 'playground__skip__show': showSkipButton }">
<SkipButton :selectable="selectable" :disabled="!selectable" :selected="selection === '-'" <SkipButton :selectable="selectable" :disabled="!selectable" :selected="selection === '-'"
@click="selectSource({ id: '-', name: '' })" /> @click="selectSource({ id: '-', name: '' })" />
</div> </div>
@ -46,6 +46,9 @@ const selectSource = async (source: Source): Promise<void> => {
const game = useGameinfoStore() const game = useGameinfoStore()
const playerListShowCheckbox = computed(() => game.state === 'play' && game.phase === 'select-quote') const playerListShowCheckbox = computed(() => game.state === 'play' && game.phase === 'select-quote')
const showSources = computed(() => ['select-quote', 'reveal-show-count', 'reveal-source'].indexOf(game.phase) >= 0)
const showQuote = showSources
const showSkipButton = computed(() => game.phase === 'select-quote')
const badgeMap = computed(() => { const badgeMap = computed(() => {
const badgeMap = {} const badgeMap = {}
if (game.phase === 'reveal-show-count') { if (game.phase === 'reveal-show-count') {
@ -85,9 +88,14 @@ const disabledMap = computed(() => {
&__sources { &__sources {
display: flex; display: flex;
visibility: hidden;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
gap: 24px 36px; gap: 24px 36px;
&__show {
visibility: visible;
}
} }
&__spacer { &__spacer {
@ -96,12 +104,22 @@ const disabledMap = computed(() => {
&__quote { &__quote {
display: flex; display: flex;
visibility: hidden;
justify-content: center; justify-content: center;
flex-grow: 4; flex-grow: 4;
&__show {
visibility: visible;
}
} }
&__skip { &__skip {
visibility: hidden;
align-self: flex-end; align-self: flex-end;
&__show {
visibility: visible;
}
} }
&__players-list { &__players-list {