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

feat: add explaination box to CollectQuotes

Browse Source
This commit is contained in:
Settel 2022-09-19 12:44:24 +02:00
parent 8cd29d024d
commit 57dfa90b65
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/CollectQuotes.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="collect-quotes__container"> <div class="collect-quotes__container">
<div class="collect-quotes__explaination-box"> <div class="collect-quotes__explaination-box">
<QuoteExplainationBox /> <QuoteExplainationBox :expand="expandExplainationBox" />
</div> </div>
<div class="collect-quotes__quotes"> <div class="collect-quotes__quotes">
<QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" /> <QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
@ -30,6 +30,8 @@ const createNewQuote = () => {
} }
} }
const expandExplainationBox = quotes.value.length === 0
const editEnd = () => { const editEnd = () => {
showNewQuoteCard.value = true showNewQuoteCard.value = true
} }

16
client/src/components/QuoteExplainationBox.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="show" class="quote-explaination-box__container"> <div v-if="expandExplanationBox" class="quote-explaination-box__container">
<DialogBox :title="$t('how-to-play')" @close="close"> <DialogBox :title="$t('how-to-play')" @close="close">
<p class="quote-explaination-box__p">{{ $t('explain-game-p-1') }}</p> <p class="quote-explaination-box__p">{{ $t('explain-game-p-1') }}</p>
<p class="quote-explaination-box__p">{{ $t('explain-game-p-2') }}</p> <p class="quote-explaination-box__p">{{ $t('explain-game-p-2') }}</p>
@ -25,12 +25,16 @@
import { ref, onBeforeUnmount } from 'vue' import { ref, onBeforeUnmount } from 'vue'
import useI18n from '@/composables/useI18n' import useI18n from '@/composables/useI18n'
const props = defineProps<{
expand?: boolean
}>()
const { $t } = useI18n({ const { $t } = useI18n({
'how-to-play': { en: 'How to play', de: 'Spielanleitung' }, 'how-to-play': { en: 'How to play', de: 'Spielanleitung' },
dismiss: { en: 'Dismiss', de: 'schließen' }, dismiss: { en: 'Dismiss', de: 'Schließen' },
'explain-game-p-1': { 'explain-game-p-1': {
en: 'The game has two phases. During the preparation phase, all players are asked to enter statements about themselves. During the second phase, players try to assign the statements to the right source. We\'re in preparation phase now.', en: 'The game has two phases. During the preparation phase, all players are asked to enter statements about themselves. During the play phase, players try to match the statements to the right source. We\'re in preparation phase now.',
de: 'Das Spiel besteht aus zwei Phasen. In der Vorbereitungsphase werden von den Mitspielenden Aussagen gesammelt. In der zweiten Phase versucht man, die Aussagen den richtigen Personen zuzuordnen. Wir befinden uns in der Vorbereitungsphase.', de: 'Das Spiel besteht aus zwei Phasen. In der Vorbereitungsphase werden von den Mitspielenden Aussagen gesammelt. In der Spielphase versucht man, die Aussagen den richtigen Personen zuzuordnen. Wir befinden uns in der Vorbereitungsphase.',
}, },
'explain-game-p-2': { de: 'Schreibe in 3-5 einzelnen Aussagen etwas über dich.', en: 'Please enter 3-5 statements about yourself.' }, 'explain-game-p-2': { de: 'Schreibe in 3-5 einzelnen Aussagen etwas über dich.', en: 'Please enter 3-5 statements about yourself.' },
'examples': { de: 'Beispiele', en: 'Examples' }, 'examples': { de: 'Beispiele', en: 'Examples' },
@ -65,8 +69,8 @@ const { $t } = useI18n({
}, },
}) })
const show = ref(true) const expandExplanationBox = ref(props.expand)
const close = () => { show.value = false } const close = () => { expandExplanationBox.value = false }
const quoteNr = ref(0) const quoteNr = ref(0)
let lastUpdate = new Date().getTime() let lastUpdate = new Date().getTime()