feat: add i18n support and translations

client/src/components/GameControls.vue

@@ -1,18 +1,27 @@
 <template>
   <div class="game-controls__container">
-    <Button class="game-controls__control" :border="!disabled.collect" :disabled="disabled.collect" @click="collect">Collect Quotes</Button>
+    <Button class="game-controls__control" :border="!disabled.collect" :disabled="disabled.collect" @click="collect">{{ $t('collect-quotes') }}</Button>
-    <Button class="game-controls__control" :border="!disabled.start" :disabled="disabled.start" @click="start">Start</Button>
+    <Button class="game-controls__control" :border="!disabled.start" :disabled="disabled.start" @click="start">{{ $t('start') }}</Button>
-    <Button class="game-controls__control" :border="!disabled.cont" :disabled="disabled.cont" @click="cont">Continue</Button>
+    <Button class="game-controls__control" :border="!disabled.cont" :disabled="disabled.cont" @click="cont">{{ $t('continue') }}</Button>
-    <Button class="game-controls__control" :border="!disabled.idle" :disabled="disabled.idle" @click="idle">Idle</Button>
+    <Button class="game-controls__control" :border="!disabled.idle" :disabled="disabled.idle" @click="idle">{{ $t('idle') }}</Button>
-    <Button class="game-controls__control" :border="!disabled.finish" :disabled="disabled.finish" @click="finish">Finish</Button>
+    <Button class="game-controls__control" :border="!disabled.finish" :disabled="disabled.finish" @click="finish">{{ $t('finish') }}</Button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import useEngine from '@/composables/useEngine'
+import useI18n from '@/composables/useI18n'
 import { useGameinfoStore } from "@/stores/GameinfoStore"
 
+const { $t } = useI18n({
+  'collect-quotes': { en: 'Collect Quotes', de: 'Aussagen sammeln' },
+  'start': { en: 'Start', de: 'Start' },
+  'continue': { en: 'Continue', de: 'Weiter' },
+  'idle': { en: 'Lobby', de: 'Lobby' },
+  'finish': { en: 'Highscores', de: 'Highscores' },
+})
+
 const game = useGameinfoStore()
 const engine = useEngine()
 const disabled = computed(() => {

client/src/components/Lobby.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="lobby__container">
     <div class="lobby__message">
-      waiting for gamemaster to start the game ...
+      {{ $t('waiting-for-gamemaster') }}
     </div>
     <div class="lobby__players-list">
       <PlayerList :players="players" :hide-scores="true" />
@@ -10,7 +10,13 @@
 </template>
 
 <script setup lang="ts">
+import useI18n from '@/composables/useI18n'
 import { usePlayersStore } from '@/stores/PlayersStore'
+
+const { $t } = useI18n({
+  'waiting-for-gamemaster': { en: 'waiting for gamemaster to start the game ...', de: 'warten, bis der/die Gamemaster:in das Spiel startet ...'},
+})
+
 const players = usePlayersStore().players
 </script>
 

client/src/components/LoginBox.vue

@@ -3,7 +3,7 @@
     <form class="login-box__container-inner" @submit.prevent="login">
       <input v-model="authCode" v-focus class="login-box__authinput" type="text" size="6" maxlength="6"
         placeholder="Code" />
-      <Button type="submit">Go!</Button>
+      <Button type="submit">{{ $t('login') }}</Button>
       <div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div>
     </form>
   </div>
@@ -13,6 +13,11 @@
 import { useRouter } from '#app'
 import { ref, Ref } from 'vue'
 import useAuth from '@/composables/useAuth';
+import useI18n from '@/composables/useI18n';
+
+const { $t } = useI18n({
+  'login': { en: 'log in', de: 'login'},
+})
 
 const vFocus = { mounted: (el: HTMLElement) => el.focus() }
 
@@ -36,7 +41,6 @@ const login = (): void => {
 .login-box {
   &__container-outer {
     display: flex;
-    width: 240px;
   }
 
   &__container-inner {

client/src/components/TopBar.vue

@@ -17,7 +17,7 @@
     </div>
     <div class="topbar__separator" />
     <div class="topbar__logout-button-container">
-      <Button class="topbar__logout-button" :border="false" @click="actionLogout">Logout</Button>
+      <Button class="topbar__logout-button" :border="false" @click="actionLogout">{{ $t('logout') }}</Button>
     </div>
   </div>
 </template>
@@ -25,9 +25,14 @@
 <script setup lang="ts">
 import { useRouter } from '#app'
 import useAuth from '@/composables/useAuth';
+import useI18n from '@/composables/useI18n';
 import { useUserinfoStore } from "@/stores/UserinfoStore"
 import { useGameinfoStore } from "@/stores/GameinfoStore"
 
+const { $t, setLang } = useI18n({
+  'logout': { en: 'Logout', de: 'abmelden' },
+})
+
 const user = useUserinfoStore()
 const game = useGameinfoStore()
 

client/src/composables/useI18n.ts

@@ -0,0 +1,30 @@
+export type i18nMap = {
+  [key: string]: {
+    en: string,
+    de: string,
+  },
+}
+
+let lang = 'de'
+const defaultLang = navigator.language ? navigator.language.substr(0, 2) : 'en'
+
+export interface useI18n {
+  setLang(lang: string): void
+  $t(key: string): string
+}
+
+export default (map: i18nMap): useI18n => {
+  return {
+    setLang: (_lang: string): void => {
+      lang = _lang
+    },
+    $t: (key: string): string => {
+      const t = map[key]
+      if (!t) {
+        return key
+      }
+
+      return t[lang] || t[defaultLang] || key
+    }
+  }
+}

client/src/pages/index.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="page-index__separator" />
       <div class="page-index__create-team">
-        <Button disabled>Create Team</Button>
+        <Button disabled>{{ $t('create-team') }}</Button>
       </div>
       <div class="page-index__space" />
     </div>
@@ -21,6 +21,11 @@
 <script setup lang="ts">
 import { useRuntimeConfig, navigateTo } from '#app'
 import useAuth from '@/composables/useAuth'
+import useI18n from '@/composables/useI18n'
+
+const { $t } = useI18n({
+  'create-team': { en: 'Create Team', de: 'Team erstellen' },
+})
 
 const config = useRuntimeConfig()
 
@@ -51,7 +56,7 @@ body {
 
   &__login,
   &__create-team {
-    width: 240px;
+    width: 320px;
     align-self: center;
   }
 

client/src/pages/play.vue

@@ -2,8 +2,8 @@
   <div class="page-play__container">
     <TopBar />
     <AlertBox v-if="!isConnected" mode="alert">
-      connection to server broken
+      {{ $t('connection-broken') }}
-      <div v-if="retry >= 0">retrying {{ '...'.slice(0, retry % 4) }}</div>
+      <div v-if="retry >= 0">{{ $t('retrying') }} {{ '...'.slice(0, retry % 4) }}</div>
     </AlertBox>
     <div class="page-play__playfield-container">
       <div class="page-play__playfield-content">
@@ -24,6 +24,13 @@ import { computed, onMounted, onBeforeUnmount } from 'vue';
 import useAuth from '@/composables/useAuth';
 import useEngine from '@/composables/useEngine';
 import { useGameinfoStore } from "@/stores/GameinfoStore"
+import useI18n from '@/composables/useI18n'
+
+const { $t } = useI18n({
+  'connection-broken': { en: 'connection to server broken.', de: 'Verbindung zum Server ist unterbrochen.' },
+  'retrying': { en: 'retrying', de: 'verbinde erneut'},
+})
+
 
 // ensure user is authenticated
 const { authenticateAndLoadUserInfo } = useAuth()