feat: i18n: start page

client/nuxt.config.js

@@ -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: {

client/src/components/CreateTeam.vue

@@ -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
     },

client/src/components/PlayButton.vue

@@ -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: '',

client/src/pages/index.vue

@@ -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';
 

client/src/plugins/engine/createTeam.js

@@ -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,
   })
 }

client/src/plugins/i18n.js

@@ -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,
+      }
+    },
+  })
+}

client/src/store/engine.js

@@ -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

server/data/users/ead6bcdb-347d-4613-96cc-661d435da986.json

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