From 57dfa90b650ffa3b4424e846b4da26ec360f5fc8 Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Mon, 19 Sep 2022 12:44:24 +0200
Subject: [PATCH] feat: add explaination box to CollectQuotes

---
 client/src/components/CollectQuotes.vue        |  4 +++-
 client/src/components/QuoteExplainationBox.vue | 16 ++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/src/components/CollectQuotes.vue b/client/src/components/CollectQuotes.vue
index 18f24d3..63a4fca 100644
--- a/client/src/components/CollectQuotes.vue
+++ b/client/src/components/CollectQuotes.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="collect-quotes__container">
     <div class="collect-quotes__explaination-box">
-      <QuoteExplainationBox />
+      <QuoteExplainationBox :expand="expandExplainationBox" />
     </div>
     <div class="collect-quotes__quotes">
       <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 = () => {
   showNewQuoteCard.value = true
 }
diff --git a/client/src/components/QuoteExplainationBox.vue b/client/src/components/QuoteExplainationBox.vue
index 22c1dfc..5c4a8f4 100644
--- a/client/src/components/QuoteExplainationBox.vue
+++ b/client/src/components/QuoteExplainationBox.vue
@@ -1,5 +1,5 @@
 <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">
       <p class="quote-explaination-box__p">{{ $t('explain-game-p-1') }}</p>
       <p class="quote-explaination-box__p">{{ $t('explain-game-p-2') }}</p>
@@ -25,12 +25,16 @@
 import { ref, onBeforeUnmount } from 'vue'
 import useI18n from '@/composables/useI18n'
 
+const props = defineProps<{
+  expand?: boolean
+}>()
+
 const { $t } = useI18n({
   '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': {
-    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.',
-    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.',
+    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 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.' },
   'examples': { de: 'Beispiele', en: 'Examples' },
@@ -65,8 +69,8 @@ const { $t } = useI18n({
   },
 })
 
-const show = ref(true)
-const close = () => { show.value = false }
+const expandExplanationBox = ref(props.expand)
+const close = () => { expandExplanationBox.value = false }
 
 const quoteNr = ref(0)
 let lastUpdate = new Date().getTime()