feat: add explaination box to CollectVotes (WIP)

client/src/components/CollectQuotes.vue

@@ -38,7 +38,7 @@ const editEnd = () => {
 <style lang="scss">
 .collect-quotes {
   &__explaination-box {
-    margin: 32px;
+    margin: 16px;
   }
 
   &__quotes {

client/src/components/QuoteExplainationBox.vue

@@ -1,11 +1,61 @@
 <template>
-  <div class="quote-explaination-box__container">
+  <div v-if="show" class="quote-explaination-box__container">
-    Explain
+    <DialogBox :title="$t('how-to-play')" @close="close">
+      <p>{{ $t('explain-game-p-1') }}</p>
+      <p>{{ $t('explain-game-p-2') }}</p>
+      <template v-slot:footer>
+        <Button @click="close">{{ $t('dismiss') }}</Button>
+      </template>
+    </DialogBox>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import useI18n from '@/composables/useI18n'
 
+const { $t } = useI18n({
+  'how-to-play': { en: 'How to play', de: 'Spielanleitung' },
+  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.',
+  },
+  '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' },
+  'click-for-next': { de: ' (anklicken für nächstes)', en: '(click to proceed)' },
+  'example-quote-0': {
+    de: 'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
+    en: 'To raise money as a student, I did my taxi license. But I never actually worked as a taxi driver.',
+  },
+  'example-quote-1': {
+    de: 'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
+    en: 'I love all kinds of pasta but I can\'t stand spaghetti.',
+  },
+  'example-quote-2': {
+    de: 'Etwa 5 Jahre lang habe ich Kontrabass im Jugendorchester gespielt.',
+    en: 'For about 5 years, I\'ve been playing double bass in youth orchestra.',
+  },
+  'example-quote-3': {
+    de: 'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur drei Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
+    en: 'I started out to study building design and architectural history. But the course was so full that I switched to computer science instead.',
+  },
+  'example-quote-4': {
+    de: 'Nach dem Abi habe ich fast ein Jahr lang in einer Tierarztpraxis gejobbt.',
+    en: 'After highschool I had a temporary job at a veterinary clinic for almost a year.',
+  },
+  'example-quote-5': {
+    de: 'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei eingeschlafen.',
+    en: 'To please my friend, I tried to watch \'Lord of the rings\' three times but everytime I fell asleep.',
+  },
+  'example-quote-6': {
+    de: 'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
+    en: 'I\'ve got four Guinea pigs: Huey, Dewey, Louie and Alfred.',
+  },
+})
+
+const show = ref(true)
+const close = () => { show.value = false }
 </script>
 
 <style lang="scss">
@@ -14,6 +64,8 @@
 .quote-explaination-box {
   &__container {
     padding: 16px;
+    font-family: $font-secondary;
+    font-size: 18px;
   }
 }
 </style>