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

feat: add animation on end of round

Browse Source
This commit is contained in:
Settel 2022-09-17 12:14:15 +02:00
parent 1e261eb3ec
commit f52c0b707c
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
:disabled="disabledMap[source.id]" :index="index" :show="showMap[source.id] && showSources" /> :disabled="disabledMap[source.id]" :index="index" :show="showMap[source.id] && showSources" />
</div> </div>
<div class="playground__spacer" /> <div class="playground__spacer" />
<div class="playground__quote" :class="{ 'playground__quote__show': showQuote}"> <div class="playground__quote" :class="{ 'playground__quote__show': showQuote && showSources }">
<QuoteCard :quote="quote" /> <QuoteCard :quote="quote" />
</div> </div>
<div class="playground__skip" :class="{ 'playground__skip__show': showSkipButton }"> <div class="playground__skip" :class="{ 'playground__skip__show': showSkipButton }">
@ -28,7 +28,6 @@ import { useRoundStore } from '@/stores/RoundStore'
import useEngine from '@/composables/useEngine' import useEngine from '@/composables/useEngine'
import { useGameinfoStore } from "@/stores/GameinfoStore" import { useGameinfoStore } from "@/stores/GameinfoStore"
import { useUserinfoStore } from "@/stores/UserinfoStore" import { useUserinfoStore } from "@/stores/UserinfoStore"
import SkipButton from './SkipButton.vue'
const { round } = useRoundStore() const { round } = useRoundStore()
const quote = { quote: round.quote } as Quote const quote = { quote: round.quote } as Quote
@ -48,7 +47,8 @@ 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 showSources = computed(() => ['select-quote', 'reveal-show-count', 'reveal-source'].indexOf(game.phase) >= 0)
const showQuote = showSources const showQuote = ref(false)
window.setTimeout(() => { showQuote.value = true }, 100)
const showSkipButton = computed(() => game.phase === 'select-quote') const showSkipButton = computed(() => game.phase === 'select-quote')
const badgeMap = computed(() => { const badgeMap = computed(() => {
const badgeMap = {} as { [key: string]: number} const badgeMap = {} as { [key: string]: number}
@ -75,7 +75,7 @@ const showMap = ref({} as { [key: string]: boolean})
sources.forEach((source, index) => { sources.forEach((source, index) => {
window.setTimeout(() => { window.setTimeout(() => {
showMap.value[source.id] = true showMap.value[source.id] = true
}, 1000 + index * 250) }, 3000 + index * 250)
}) })
</script> </script>
@ -107,13 +107,13 @@ sources.forEach((source, index) => {
&__quote { &__quote {
display: flex; display: flex;
visibility: hidden;
justify-content: center; justify-content: center;
flex-grow: 4; flex-grow: 4;
opacity: 0;
transition: opacity 1s linear;
&__show { &__show {
visibility: visible; opacity: 100%;
animation: quote-show 1s linear;
} }
} }