feat: i18n (#182)

* build: add vue-i18n dependency

* feat: add i18n plugin to vue project

* feat: use translations in play button

* feat: translate play view

* feat: translate menu items

* feat: translate local mods view

* feat: translate online mods view

* feat: translate mods menu

* feat: translate thunderstore mod card component

* fix: remove useless "this" keyword

* feat: translate settings view

* fix: remove leftover test invocation

* feat: add language selector component

* feat: using language selector updates interface's language

* feat: save language in persistent store on selector change

* feat: initialize lang on app launch

* refactor: move i18n code into App.mounted callback

* feat: update interface language on app launch

* feat: adjust language selection on language selector load

* fix: this.$root can't be null

* feat: translate store notifications

* fix: add missing parameter to english translation

* feat: translate "by" author keyword

* feat: translate repair window

* feat: translate repair window title

* docs: add some documentation regarding localization

* docs: explain how to add a new language

* feat: translate Northstar release canal selector elements

* docs: describe how to inject variable into translations

* feat: translate "info" word

* feat: translate popconfirm buttons

* fix: remove "this" keyword

* fix: save store when updating interface language

1 files changed, 7 insertions, 7 deletions

diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index beca6724..57d02904 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -34,27 +34,27 @@ export default defineComponent({
     <div class="fc_launch__container">
         <div class="fc_title">Northstar</div>
         <div class="fc_northstar__version__container">
-            {{ northstarVersion === '' ? 'Unknown version' : `v${northstarVersion}` }}
+            {{ northstarVersion === '' ? $t('play.unknown_version') : `v${northstarVersion}` }}
             <div v-if="northstarVersion !== ''" class="fc_changelog__link" @click="showChangelogPage">
-                (see patch notes)
+                ({{ $t('play.see_patch_notes') }})
             </div>
             <div v-if="playerCount >= 0" class="fc-stats__container">
-                {{ playerCount }} players,
-                {{ serverCount }} servers
+                {{ playerCount }} {{ $t('play.players') }},
+                {{ serverCount }} {{ $t('play.servers') }}
             </div>
             <div v-else="playerCount >= 0" class="fc-stats__container">
-                Unable to load playercount
+                {{ $t('play.unable_to_load_playercount') }}
             </div>
         </div>
         <div>
             <PlayButton />
             <div v-if="$store.state.developer_mode" id="fc_services__status">
                 <div>
-                    <div class="fc_version__line">Northstar is running: </div>
+                    <div class="fc_version__line">{{ $t('play.northstar_running') }}</div>
                     <div class="fc_version__line fc_version__line__boolean"> {{ northstarIsRunning }}</div>
                 </div>
                 <div>
-                    <div class="fc_version__line">Origin is running: </div>
+                    <div class="fc_version__line">{{ $t('play.origin_running') }}</div>
                     <div class="fc_version__line fc_version__line__boolean">{{ $store.state.origin_is_running }}</div>
                 </div>
             </div>