feat: i18n: start page

This commit is contained in:
Settel 2022-04-24 22:15:32 +02:00
parent 3a4a65b428
commit a828bb31e8
8 changed files with 95 additions and 17 deletions

View File

@ -25,6 +25,7 @@ export default {
plugins: [
{ src: '~/plugins/engine', mode: 'client' },
{ src: '~/plugins/formatter', mode: 'client' },
{ src: '~/plugins/i18n', mode: 'client' },
],
axios: { proxy: true },
publicRuntimeConfig: {

View File

@ -1,37 +1,43 @@
<template>
<div class="create-team">
<div v-if="!showModal" class="create-team__button" @click="openModal">
create team
{{ $t('create-team') }}
</div>
<template v-if="showModal">
<div class="create-team__backdrop" />
<div class="create-team__modal">
<template v-if="authcode">
<div class="create-team__modal-success-message">
<p>Deine PIN lautet:</p>
<p>{{ $t('your-pin-is') }}</p>
<div class="create-team__modal-pin">
{{ authcode}}
</div>
<p>Schreibe sie Dir am besten gleich auf und logge dich anschließend damit ein.</p>
<p>{{ $t('remember-pin-and-log-in') }}</p>
</div>
<PlayButton />
</template>
<template v-else>
<div class="create-team__modal-content">
<div class="create-team__modal-close" @click="closeModal" />
<p>
Erstellt eine neues Team und einen ersten Useraccount für Dich
als Gamemaster.
</p>
<p>{{ $t('create-team-explain') }}</p>
<table class="create-team__modal-content-table">
<tr>
<td>Dein Name</td>
<td>{{ $t('your-name') }}</td>
<td><input v-model="name" size="16" /></td>
</tr>
<tr>
<td>Teamname</td>
<td>{{ $t('team-name') }}</td>
<td><input v-model="teamname" size="16" /></td>
</tr>
<tr>
<td>{{ $t('lang') }}</td>
<td>
<select v-model="lang">
<option value="de">de</option>
<option value="en">en</option>
</select>
</td>
</tr>
</table>
</div>
<Button
@ -39,7 +45,7 @@
:disabled="name.length == 0 || teamname.length == 0"
@click="createTeam"
>
create team
{{ $t('create-team') }}
</Button>
</template>
</div>
@ -49,9 +55,31 @@
<script>
export default {
beforeMount() {
this.$i18n.map({
'create-team': { de: 'Team erstellen', en: 'create team' },
'your-name': { de: 'Dein Name', en: 'your name' },
'team-name': { de: 'Teamname', en: 'team name' },
'create-team-explain': {
de: 'Erstellt eine neues Team und einen ersten Useraccount für Dich als Gamemaster.',
en: 'Creates a new team and a first user account for you as a gamemaster.',
},
'lang': { de: 'Sprache', en: 'language' },
'your-pin-is': { de: 'Deine PIN lautet:', en: 'your pin code is:' },
'remember-pin-and-log-in': {
de: 'Schreibe sie Dir am besten gleich auf und logge dich anschließend damit ein.',
en: 'Write it down now, then log in with your pin code.',
},
})
},
data() {
let lang = navigator.language ? navigator.language.substr(0, 2) : ''
if (lang != 'de' && lang != 'en') {
lang = 'en'
}
return {
name: '',
lang,
teamname: '',
authcode: '',
showModal: false,
@ -67,7 +95,7 @@ export default {
},
async createTeam() {
this.showModal = false
const user = await this.$engine.createTeam(this.name, this.teamname)
const user = await this.$engine.createTeam(this.name, this.teamname, this.lang)
this.showModal = true
this.authcode = user.data.authcode
},

View File

@ -2,10 +2,13 @@
<div>
<div v-if="!$fetchState.pending" class="playbutton">
<template v-if="user && user.name">
<div class="playbutton__greeting">Hi {{ user.name }}!</div>
<Button @click="$router.push('/play')">Play!</Button>
<div class="playbutton__greeting">
{{ $t('hi') }}
{{ user.name }}!
</div>
<Button @click="$router.push('/play')">{{ $t('play-button') }}</Button>
<div class="playbutton__logout" @click="logout">
logout/switch session
{{ $t('logout') }}
</div>
</template>
<template v-else>
@ -28,6 +31,13 @@
<script>
export default {
beforeMount() {
this.$i18n.map({
'hi': { de: 'Hallo', en: 'Hi' },
'play-button': { de: 'Spielen!', en: 'Play!' },
'logout': { de: 'Ausloggen/Sitzung wechseln', en: 'logout/switch session' },
})
},
data() {
return {
authCode: '',

View File

@ -4,7 +4,7 @@
<PlayButton class="startpage__buttonline" />
<div class="startpage__video">
<a href="https://www.sirlab.de/knowyt/know-your-teammates-kurzanleitung.mp4" target="_blank">
🎬 Erklärvideo (3 min)
🎬 {{ $t('video-user') }}
</a>
</div>
<CreateTeam v-if="!$store.state.engine.user" class="startpage__creategame" />
@ -14,6 +14,16 @@
</div>
</template>
<script>
export default {
beforeMount() {
this.$i18n.map({
'video-user': { de: 'Erklärvideo (3min)', en: 'Video (3 mins)' },
})
},
}
</script>
<style lang="scss">
@import '~/assets/css/components';

View File

@ -1,6 +1,7 @@
export default async function(name, teamname) {
export default async function(name, teamname, lang) {
return await this.callApi('/api/createGame', {
name,
teamname,
lang,
})
}

View File

@ -0,0 +1,26 @@
let lang = 'DE'
let i18nMap = {}
let defaultLang = navigator.language ? navigator.language.substr(0, 2) : 'en'
export default (context, inject) => {
const translate = (key) => {
const t = i18nMap[key]
if (!t) {
return key
}
return t[lang] || t[defaultLang] || key
}
inject('t', translate)
inject('i18n', {
setLang: (_lang) => {
lang = _lang
},
map: (_map) => {
i18nMap = {
...i18nMap,
..._map,
}
},
})
}

View File

@ -16,6 +16,9 @@ export const mutations = {
},
setUser(state, user) {
state.user = user
if (user) {
this.$i18n.setLang(user.lang)
}
},
setGameInfo(state, gameinfo) {
state.gameinfo = gameinfo

View File

@ -1 +0,0 @@
{"authcode":"","name":"Crabbe","role":"player","game":"e24444aa-8a18-48aa-a36d-8f84620726f8","created":1649841804}