collect quotes: show examples

This commit is contained in:
Settel 2021-10-04 08:46:36 +02:00
parent 48cd97ad5a
commit 4cb657a93b
5 changed files with 133 additions and 4 deletions

View File

@ -1,18 +1,109 @@
<template>
<div class="collect-quotes">
<p>collecting ...</p>
<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>
<div class="collect-quotes__list" v-for="quote in quotes" :key="quote.id">
<div class="collect-quotes__quote">
{{ quote.quote }}
</div>
<div class="collect-quotes__actions">
<div class="collect-quotes__icon collect-quotes__icon-edit" />
<div class="collect-quotes__icon collect-quotes__icon-delete" />
</div>
</div>
</div>
</template>
<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: {
quotes() {
return this.$store.state.myQuotes.quotes
},
},
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 {
font-family: 'Wendy One';
color: #ffffff;
&__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>

View File

@ -0,0 +1,12 @@
export default async function() {
const { store } = this.context
try {
const response = await this.callApi('/api/getQuotes', {
g: store.state.engine.user?.game,
})
store.commit('myQuotes/setQuotes', response.data.quotes)
} catch(e) {
store.commit('myQuotes/setQuotes', undefined)
}
}

View File

@ -10,6 +10,8 @@ import continueGame from './continueGame'
import finishGame from './finishGame'
import parseSyncData from './parseSyncData'
import saveSelection from './saveSelection'
import getMyQuotes from './getMyQuotes'
import saveQuote from './saveQuote'
export default (context, inject) => {
const engine = {
@ -24,6 +26,8 @@ export default (context, inject) => {
fetchUpdate,
fetchUserInfo,
collectQuotes,
getMyQuotes,
saveQuote,
startGame,
resetGame,
continueGame,

View File

@ -0,0 +1,9 @@
export default async function(id, quote) {
const { store } = this.context
await this.callApi('/api/saveQuote', {
g: store.state.engine.user?.game,
id,
quote,
})
}

View File

@ -0,0 +1,13 @@
export const state = () => ({
quotes: [],
})
export const mutations = {
setQuotes(state, list) {
if (typeof list === 'undefined') {
state.quotes = []
} else {
state.quotes = list
}
},
}