i18n: translate collect quotes
This commit is contained in:
Settel
parent
6b2f37a982
commit
f8420efb34
@ -3,7 +3,7 @@
|
||||
<div class="collect-quote__backdrop" />
|
||||
<div class="collect-quote__container">
|
||||
<div class="collect-quote__quote-container">
|
||||
<div class="collect-quote__title">Preview:</div>
|
||||
<div class="collect-quote__title">{{ $t('preview') }}</div>
|
||||
<div class="collect-quote__quote">
|
||||
<Quote :text="quote.quote" />
|
||||
</div>
|
||||
@ -15,11 +15,11 @@
|
||||
<textarea
|
||||
class="collect-quote__textinput"
|
||||
v-model="quote.quote"
|
||||
placeholder="hier eintragen ..."
|
||||
:placeholder="$t('enter-quote')"
|
||||
/>
|
||||
</form>
|
||||
<div class="collect-quote__cta-container">
|
||||
<button class="collect-quote__cta" @click="save">Save</button>
|
||||
<Button class="collect-quote__cta" @click="save">{{ $t('save') }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,6 +29,13 @@
|
||||
<script>
|
||||
export default {
|
||||
props: ['quote'],
|
||||
beforeMount() {
|
||||
this.$i18n.map({
|
||||
'preview': { de: 'Vorschau:', en: 'Preview:' },
|
||||
'enter-quote': { de: 'hier eintragen ...', en: 'enter here ...' },
|
||||
'save': { de: 'Speichern', en: 'save' },
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.$emit('saveQuote', this.quote)
|
||||
@ -151,21 +158,6 @@ export default {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 48px;
|
||||
background-color: $button-background-color;
|
||||
width: 80px;
|
||||
height: 48px;
|
||||
border: 4px solid $button-border-color;
|
||||
border-radius: 8px;
|
||||
color: $button-text-color;
|
||||
font-family: Dosis;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $button-hover-background-color;
|
||||
border-color: $button-hover-border-color;
|
||||
color: $button-hover-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -7,29 +7,22 @@
|
||||
</div>
|
||||
<div v-if="!explainOpen">
|
||||
<div class="collect-quotes-explain__explain" @click="toggleOpenClose">
|
||||
<p>Erklärung zum Spiel</p>
|
||||
<p>{{ $t('explain-game-closed') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="explainOpen">
|
||||
<div class="collect-quotes-explain__explain">
|
||||
<p>
|
||||
Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
|
||||
Mitspielenden Aussagen gesammelt. In der zweiten Phase versucht
|
||||
man, die Aussagen den richtigen Personen zuzuordnen. Wir befinden
|
||||
uns in der ersten Phase.
|
||||
</p>
|
||||
<p>
|
||||
Schreibe in 3-5 einzelnen Aussagen etwas über dich.
|
||||
</p>
|
||||
<p>{{ $t('explain-game-p-1') }}</p>
|
||||
<p>{{ $t('explain-game-p-2') }}</p>
|
||||
</div>
|
||||
<div class="collect-quotes-explain__example">
|
||||
<div class="collect-quotes-explain__example-title">Beispiel</div>
|
||||
<div class="collect-quotes-explain__example-subtitle">(anklicken für nächstes)</div>
|
||||
<div class="collect-quotes-explain__example-title">{{ $t('examples') }}</div>
|
||||
<div class="collect-quotes-explain__example-subtitle">{{ $t('click-for-next') }}</div>
|
||||
</div>
|
||||
<div class="collect-quotes-explain__example-container" @click="showNextExampleQuote">
|
||||
<transition name="collect-quotes-explain-fade" mode="out-in">
|
||||
<div class="collect-quotes-explain__example-text" :key="quoteNr">
|
||||
{{ exampleQuotes[quoteNr] }}
|
||||
{{ $t(`example-quote-${quoteNr}`) }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
@ -46,20 +39,11 @@ export default {
|
||||
quoteNr: 0,
|
||||
lastUpdate: new Date().getTime(),
|
||||
explainOpen: true,
|
||||
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 drei 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 eingeschlafen.',
|
||||
'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showNextExampleQuote() {
|
||||
this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
|
||||
this.quoteNr = (this.quoteNr + 1) % 7
|
||||
this.lastUpdate = new Date().getTime()
|
||||
},
|
||||
toggleOpenClose() {
|
||||
@ -67,7 +51,46 @@ export default {
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
|
||||
this.$i18n.map({
|
||||
'explain-game-closed': { de: 'Erklärung zum Spiel', en: 'about the game' },
|
||||
'explain-game-p-1': {
|
||||
de: 'Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den Mitspielenden Aussagen gesammelt. In der zweiten Phase versucht man, die Aussagen den richtigen Personen zuzuordnen. Wir befinden uns in der ersten Phase.',
|
||||
en: 'The game has two phases. During the first phase, all players are asked to enter quotes. During the second phase, players try to assign the quotes to the right source. This is the first phase.'
|
||||
},
|
||||
'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.',
|
||||
},
|
||||
})
|
||||
|
||||
this.quoteNr = Math.floor(Math.random() * 7),
|
||||
this.timer = window.setInterval(function() {
|
||||
if (new Date().getTime() > this.lastUpdate + 15000) {
|
||||
this.showNextExampleQuote()
|
||||
@ -144,5 +167,4 @@ export default {
|
||||
.collect-quotes-explain-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="no-quotes-yet">
|
||||
Klicke, um deine erste Aussage zu hinterlegen.
|
||||
{{ $t('click-to-add-first-quote') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
beforeMount() {
|
||||
this.$i18n.map({
|
||||
'click-to-add-first-quote': {
|
||||
de: 'Klicke, um deine erste Aussage zu hinterlegen.',
|
||||
en: 'Click to add your first quote.',
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.no-quotes-yet {
|
||||
width: 100%;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="page-play__area">
|
||||
<div v-if="gameState === 'idle'" class="page-play__waiting">
|
||||
<div class="page-play__teamname">{{ teamname }}</div>
|
||||
waiting for gamemaster to start game ...
|
||||
{{ $t('waiting-for-gamemaster') }}
|
||||
</div>
|
||||
<ReadySet v-if="gameState === 'ready-set'" :text="gamePhase" />
|
||||
<Play v-if="gameState === 'play'" />
|
||||
@ -17,8 +17,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="connectionLost" class="page-play__error-box">
|
||||
<div>connection to server lost</div>
|
||||
<button @click="reload">reload</button>
|
||||
<div>{{ $t('connection-lost') }}</div>
|
||||
<button @click="reload">{{ $t('reload') }}</button>
|
||||
</div>
|
||||
<div v-if="showDebugPanel" class="page-play__container-debug">
|
||||
<EngineDebug />
|
||||
@ -29,6 +29,19 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
beforeMount() {
|
||||
this.$i18n.map({
|
||||
'waiting-for-gamemaster': {
|
||||
de: 'bitte warten, bis das Spiel vom Gamemaster gestartet wird ...',
|
||||
en: 'waiting for gamemaster to start game ...',
|
||||
},
|
||||
'connection-lost': {
|
||||
de: 'Verbindung zum Server unterbrochen',
|
||||
en: 'connection to server lost',
|
||||
},
|
||||
'reload': { de: 'neu laden', en: 'reload' },
|
||||
})
|
||||
},
|
||||
async mounted() {
|
||||
await this.$engine.start()
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user