split CollectQuotes/CollectQuotesExplain
This commit is contained in:
Settel
parent
4cb657a93b
commit
957ef0f983
@ -1,18 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="collect-quotes">
|
<div class="collect-quotes">
|
||||||
<div class="collect-quotes__explain">
|
<CollectQuotesExplain />
|
||||||
<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>
|
|
||||||
<div class="collect-quotes__list" v-for="quote in quotes" :key="quote.id">
|
<div class="collect-quotes__list" v-for="quote in quotes" :key="quote.id">
|
||||||
<div class="collect-quotes__quote">
|
<div class="collect-quotes__quote">
|
||||||
{{ quote.quote }}
|
{{ quote.quote }}
|
||||||
@ -28,19 +16,6 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
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: {
|
computed: {
|
||||||
quotes() {
|
quotes() {
|
||||||
return this.$store.state.myQuotes.quotes
|
return this.$store.state.myQuotes.quotes
|
||||||
@ -49,61 +24,11 @@ export default {
|
|||||||
async fetch() {
|
async fetch() {
|
||||||
await this.$engine.getMyQuotes()
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.collect-quotes {
|
.collect-quotes {
|
||||||
|
color: #ffc0c0;
|
||||||
&__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: '“';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.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>
|
</style>
|
||||||
|
|||||||
107
client/src/components/CollectQuotesExplain.vue
Normal file
107
client/src/components/CollectQuotesExplain.vue
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user