added multilanguage basics

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/package.json

@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
+    "pinia": "^2.3.0",
     "vue": "^3.5.13",
+    "vue-i18n": "^9.14.2",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

frontend/src/components/DatasheetView.vue

@@ -7,7 +7,7 @@
         </div>
         <div class="character-stats">
           <div class="stat">
-            <span>St</span>
+            <span>{{ $t('stats.strength') }}</span>
             <strong>{{ character.eigenschaften[6].value }}</strong>
           </div>
           <div class="stat">

frontend/src/components/LanguageSwitcher.vue

@@ -0,0 +1,24 @@
+<template>
+  <select v-model="selectedLanguage">
+    <option value="de">Deutsch</option>
+    <option value="en">English</option>
+  </select>
+</template>
+
+<script>
+import { useLanguageStore } from '../stores/languageStore'
+
+export default {
+  name: 'LanguageSwitcher',
+  computed: {
+    selectedLanguage: {
+      get() {
+        return useLanguageStore().currentLanguage
+      },
+      set(value) {
+        useLanguageStore().setLanguage(value)
+      }
+    }
+  }
+}
+</script>

frontend/src/components/Menu.vue

@@ -14,13 +14,20 @@
         <router-link to="/register" active-class="active">Register</router-link>
       </li>
     </ul>
+    <LanguageSwitcher />
   </nav>
 </template>
 
 <script>
 import { isLoggedIn, logout } from "../utils/auth";
+import LanguageSwitcher from "./LanguageSwitcher.vue";
+
 
 export default {
+  name: "Menu",
+  components: {
+    LanguageSwitcher,
+  },
   computed: {
     isLoggedIn() {
       return isLoggedIn();

frontend/src/locales/de

@@ -0,0 +1,25 @@
+export default {
+  stats: {
+    strength: 'Stärke',
+    dexterity: 'Gs', 
+    agility: 'Gw',
+    constitution: 'Ko',
+    intelligence: 'In',
+    toughness: 'Zt',
+    charisma: 'Au',
+    attackValue: 'pA',
+    willpower: 'Wk',
+    movement: 'B',
+    lifepoints: 'LP',
+    astralpoints: 'AP',
+    Datasheet:'Datenblatt',
+    Skill:'Fertigkeiten',
+    Weapon:'Waffen',
+    Spell:'Zauber',
+    Equipment:'Ausrüstung',
+    Experiance:'Erfahrung',
+    History:'Logbuch',
+    Notes:'Notizen',
+    Campagne:'Kampagne',
+  }
+}

frontend/src/locales/en

@@ -0,0 +1,25 @@
+export default {
+  stats: {
+    strength: 'Str',
+    dexterity: 'Dex',
+    agility: 'Agi', 
+    constitution: 'Con',
+    intelligence: 'Int',
+    toughness: 'Tou',
+    charisma: 'Cha',
+    attackValue: 'AV',
+    willpower: 'Will',
+    movement: 'Mov',
+    lifepoints: 'HP',
+    astralpoints: 'AP',
+    Datasheet:'Datasheet',
+    Skill:'Skills',
+    Weapon:'Weapons',
+    Spell:'Spells',
+    Equipment:'Equipment',
+    Experiance:'Experiance',
+    History:'History',
+    Notes:'Notes',
+    Campagne:'Campagne',
+  }
+}

frontend/src/main.js

@@ -1,9 +1,15 @@
 import './assets/main.css'
 
 import { createApp } from "vue";
+import { createPinia } from 'pinia'
 import App from "./App.vue";
 import router from "./router";
+import { i18n } from './stores/languageStore'
+
 
 const app = createApp(App);
+const pinia = createPinia();
+app.use(pinia)
 app.use(router);
+app.use(i18n);
 app.mount("#app");

frontend/src/stores/languageStore.js

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { createI18n } from 'vue-i18n'
+import de from '@/locales/de'
+import en from '@/locales/en'
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: localStorage.getItem('language') || 'de',
+  fallbackLocale: 'en',
+  messages: { de, en }
+})
+
+export const useLanguageStore = defineStore('language', {
+  state: () => ({
+    currentLanguage: localStorage.getItem('language') || 'de'
+  }),
+  actions: {
+    setLanguage(lang) {
+      this.currentLanguage = lang
+      i18n.global.locale.value = lang
+      localStorage.setItem('language', lang)
+    }
+  }
+})