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

split CollectQuotes/CollectQuotesExplain

Browse Source
This commit is contained in:
Settel 2021-10-04 11:11:44 +02:00
parent 4cb657a93b
commit 957ef0f983
2 changed files with 109 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,6 @@
<template>
<div class="collect-quotes">
<div class="collect-quotes__explain">
<p>collecting ...</p>
</div>
<div class="collect-quotes__example-title">
Beispiel:
</div>
<div class="collect-quotes__example-container">
<transition name="collect-quotes-fade" mode="out-in">
<div class="collect-quotes__example-text" :key="quoteNr">
{{ exampleQuotes[quoteNr] }}
</div>
</transition>
</div>
<CollectQuotesExplain />
<div class="collect-quotes__list" v-for="quote in quotes" :key="quote.id">
<div class="collect-quotes__quote">
{{ quote.quote }}
@ -28,19 +16,6 @@
<script>
export default {
data() {
return {
quoteNr: 0,
exampleQuotes: [
'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur 3 Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
'Nach dem Abi habe ich fast ein Jahr lang in einer Tierarztpraxis gejobbt.',
'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei dabei eingeschlafen.',
'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
],
}
},
computed: {
quotes() {
return this.$store.state.myQuotes.quotes
@ -49,61 +24,11 @@ export default {
async fetch() {
await this.$engine.getMyQuotes()
},
beforeMount() {
this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
this.timer = window.setInterval(function() {
this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
}.bind(this), 15000)
},
beforeDestroy() {
window.clearInterval(this.timer)
},
}
</script>
<style lang="scss">
.collect-quotes {
&__example {
&-title {
margin: 20px 80px;
font-family: 'Wendy One';
color: #ffffff;
}
&-container {
display: flex;
margin: 20px 80px;
height: 120px;
padding: 0 20px;
border: 1px solid white;
border-radius: 20px;
background-color: #6040c0;
align-items: center;
}
&-text {
text-align: justify;
font-family: Dosis;
font-size: 24px;
color: #ffffff;
&:before {
content: '„';
}
&:after {
content: '“';
}
}
}
color: #ffc0c0;
}
.collect-quotes-fade-enter-active,
.collect-quotes-fade-leave-active {
transition: all 0.4s ease;
}
.collect-quotes-fade-enter,
.collect-quotes-fade-leave-to {
opacity: 0;
}
</style>

107
client/src/components/CollectQuotesExplain.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div class="collect-quotes-explain">
<div class="collect-quotes-explain__container">
<div class="collect-quotes-explain__explain">
<p>
Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
Mitspielenden Statements gesammelt. In der zweiten Phase versucht
man, die Statements den richtigen Personen zuzuordnen. Wir befinden
uns in der ersten Phase.
</p>
<p>
Schreibe in 3-5 einzelnen Statements etwas über dich.
</p>
</div>
<div class="collect-quotes-explain__example-title">
Beispiel:
</div>
<div class="collect-quotes-explain__example-container">
<transition name="collect-quotes-explain-fade" mode="out-in">
<div class="collect-quotes-explain__example-text" :key="quoteNr">
{{ exampleQuotes[quoteNr] }}
</div>
</transition>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
quoteNr: 0,
exampleQuotes: [
'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
'Etwa 5 Jahre lang habe ich Kontrabass im Jugendorchester gespielt.',
'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur 3 Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
'Nach dem Abi habe ich fast ein Jahr lang in einer Tierarztpraxis gejobbt.',
'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei dabei eingeschlafen.',
'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
],
}
},
beforeMount() {
this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
this.timer = window.setInterval(function() {
this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
}.bind(this), 15000)
},
beforeDestroy() {
window.clearInterval(this.timer)
},
}
</script>
<style lang="scss">
.collect-quotes-explain {
&__container {
margin: 20px 80px;
padding: 0 20px;
border: 1px solid white;
border-radius: 20px;
background-color: #6040c0;
}
&__explain {
font-size: 24px;
font-family: "Wendy One";
color: #ffffff;
}
&__example {
&-title {
font-family: "Wendy One";
color: #ffffff;
}
&-container {
height: 120px;
}
&-text {
font-family: Dosis;
font-size: 24px;
color: #ffffff;
&:before {
content: '„';
}
&:after {
content: '“';
}
}
}
}
.collect-quotes-explain-fade-enter-active,
.collect-quotes-explain-fade-leave-active {
transition: all 0.4s ease;
}
.collect-quotes-explain-fade-enter,
.collect-quotes-explain-fade-leave-to {
opacity: 0;
}
</style>