added language de, en support

package-lock.json

@@ -8,8 +8,11 @@
       "name": "dsa5e-character-sheet-symbiote",
       "version": "0.0.0",
       "dependencies": {
+        "i18next": "^25.2.1",
+        "i18next-browser-languagedetector": "^8.2.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-i18next": "^15.5.3",
         "react-icons": "^5.5.0"
       },
       "devDependencies": {
@@ -264,6 +267,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -2426,6 +2438,55 @@
         "node": ">=8"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "25.2.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.2.1.tgz",
+      "integrity": "sha512-+UoXK5wh+VlE1Zy5p6MjcvctHXAhRwQKCxiJD8noKZzIXmnAX8gdHX5fLPA3MEVxEN4vbZkQFy8N0LyD9tUqPw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.1"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+      "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2898,6 +2959,32 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.5.3.tgz",
+      "integrity": "sha512-ypYmOKOnjqPEJZO4m1BI0kS8kWqkBNsKYyhVUfij0gvjy9xJNoG/VcGkxq5dRlVwzmrmY1BQMAmpbbUBLwC4Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -3172,7 +3259,7 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -3349,6 +3436,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.2.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-i18next": "^15.5.3",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {

src/components/Attributes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import type {DSACharacter, DSAAttributes} from '../types/character';
 
 interface AttributesProps {
@@ -7,6 +8,7 @@ interface AttributesProps {
 }
 
 const Attributes: React.FC<AttributesProps> = ({ character, setCharacter }) => {
+    const { t } = useTranslation();
     const updateAttribute = (attr: keyof DSAAttributes, value: number) => {
         // Input validation - clamp between 1 and 20
         const clampedValue = Math.min(20, Math.max(1, value));
@@ -20,25 +22,18 @@ const Attributes: React.FC<AttributesProps> = ({ character, setCharacter }) => {
         }));
     };
 
-    const attributeDisplayNames: Record<keyof DSAAttributes, string> = {
+    const getAttributeDisplayName = (attr: keyof DSAAttributes): string => {
-        courage: "CO - Courage",
+        return t(`attributes.${attr}`);
-        cleverness: "CL - Cleverness",
-        intuition: "IN - Intuition",
-        charisma: "CH - Charisma",
-        dexterity: "DE - Dexterity",
-        agility: "AG - Agility",
-        constitution: "CN - Constitution",
-        strength: "ST - Strength"
     };
 
     return (
         <div className="attributes section">
-            <h2>Attributes</h2>
+            <h2>{t('attributes.title')}</h2>
             <div className="attributes-grid">
                 {Object.entries(character.attributes).map(([key, value]) => (
                     <div key={key} className="attribute">
                         <label htmlFor={key}>
-                            {attributeDisplayNames[key as keyof DSAAttributes]}
+                            {getAttributeDisplayName(key as keyof DSAAttributes)}
                         </label>
                         <input
                             id={key}

src/components/BasicInfo.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import type {DSACharacter} from '../types/character';
 
 interface BasicInfoProps {
@@ -7,6 +8,7 @@ interface BasicInfoProps {
 }
 
 const BasicInfo: React.FC<BasicInfoProps> = ({ character, setCharacter }) => {
+    const { t } = useTranslation();
     const updateField = (field: keyof DSACharacter, value: string) => {
         setCharacter(prev => ({
             ...prev,
@@ -16,50 +18,50 @@ const BasicInfo: React.FC<BasicInfoProps> = ({ character, setCharacter }) => {
 
     return (
         <div className="basic-info section">
-            <h2>Basic Information</h2>
+            <h2>{t('basicInfo.title')}</h2>
             <div className="form-grid">
                 <div className="form-group">
-                    <label htmlFor="name">Name</label>
+                    <label htmlFor="name">{t('basicInfo.name')}</label>
                     <input
                         id="name"
                         type="text"
                         value={character.name}
                         onChange={(e) => updateField('name', e.target.value)}
-                        placeholder="Enter character name"
+                        placeholder={t('basicInfo.namePlaceholder')}
                     />
                 </div>
                 <div className="form-group">
-                    <label htmlFor="species">Species</label>
+                    <label htmlFor="species">{t('basicInfo.species')}</label>
                     <input
                         id="species"
                         type="text"
                         value={character.species}
                         onChange={(e) => updateField('species', e.target.value)}
-                        placeholder="e.g., Human, Elf, Dwarf"
+                        placeholder={t('basicInfo.speciesPlaceholder')}
                     />
                 </div>
                 <div className="form-group">
-                    <label htmlFor="culture">Culture</label>
+                    <label htmlFor="culture">{t('basicInfo.culture')}</label>
                     <input
                         id="culture"
                         type="text"
                         value={character.culture}
                         onChange={(e) => updateField('culture', e.target.value)}
-                        placeholder="e.g., Middenrealmish, Thorwalian"
+                        placeholder={t('basicInfo.culturePlaceholder')}
                     />
                 </div>
                 <div className="form-group">
-                    <label htmlFor="profession">Profession</label>
+                    <label htmlFor="profession">{t('basicInfo.profession')}</label>
                     <input
                         id="profession"
                         type="text"
                         value={character.profession}
                         onChange={(e) => updateField('profession', e.target.value)}
-                        placeholder="e.g., Warrior, Mage, Scout"
+                        placeholder={t('basicInfo.professionPlaceholder')}
                     />
                 </div>
                 <div className="form-group">
-                    <label htmlFor="experience-level">Experience Level</label>
+                    <label htmlFor="experience-level">{t('basicInfo.experienceLevel')}</label>
                     <select
                         id="experience-level"
                         value={character.experienceLevel}

src/components/CharacterSheet.tsx

@@ -1,5 +1,6 @@
 // src/components/CharacterSheet.tsx
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { DSACharacter } from '../types/character';
 import BasicInfo from './BasicInfo';
 import Attributes from './Attributes';
@@ -7,6 +8,7 @@ import Skills from './Skills';
 import Spells from './Spells';
 import CombatValues from './CombatValues';
 import ThemeToggle from './ThemeToggle';
+import LanguageSelector from './LanguageSelector';
 import DSADiceRoller from "./DSADiceRoller.tsx";
 import iconUrl from '/icon.png';
 import './CharacterSheet.css';
@@ -48,6 +50,7 @@ const initialCharacter: DSACharacter = {
 };
 
 const CharacterSheet: React.FC = () => {
+    const { t } = useTranslation();
     const [character, setCharacter] = useState<DSACharacter>(initialCharacter);
 
     // Hilfsfunktion um zu prüfen ob Charakter Zauberer ist
@@ -56,14 +59,15 @@ const CharacterSheet: React.FC = () => {
     return (
         <div className="character-sheet">
             <ThemeToggle />
+            <LanguageSelector />
 
             <header className="character-sheet-header">
                 <img
                     src={iconUrl}
-                    alt="DSA 5e Character Sheet"
+                    alt={t('app.iconAlt')}
                     className="character-sheet-icon"
                 />
-                <h1>DSA 5 Character Sheet</h1>
+                <h1>{t('app.title')}</h1>
             </header>
 
             {/* Grundinformationen */}
@@ -96,7 +100,7 @@ const CharacterSheet: React.FC = () => {
                             astralEnergy: { max: 20, current: 20 }
                         }))}
                     >
-                        🪄 Zauberfähigkeiten hinzufügen
+                        {t('spells.addMagic')}
                     </button>
                 </div>
             )}

src/components/LanguageSelector.css

@@ -0,0 +1,29 @@
+.language-selector {
+  display: flex;
+  gap: 8px;
+  margin: 10px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.language-btn {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.language-btn:hover {
+  background-color: var(--bg-hover);
+}
+
+.language-btn.active {
+  background-color: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}

src/components/LanguageSelector.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import './LanguageSelector.css';
+
+const LanguageSelector: React.FC = () => {
+  const { i18n } = useTranslation();
+  
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <div className="language-selector">
+      <button 
+        className={`language-btn ${i18n.language === 'en' ? 'active' : ''}`}
+        onClick={() => changeLanguage('en')}
+      >
+        🇬🇧 EN
+      </button>
+      <button 
+        className={`language-btn ${i18n.language === 'de' ? 'active' : ''}`}
+        onClick={() => changeLanguage('de')}
+      >
+        🇩🇪 DE
+      </button>
+    </div>
+  );
+};
+
+export default LanguageSelector;

src/i18n/i18n.ts

@@ -0,0 +1,38 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// Import translations
+import enTranslation from './locales/en.json';
+import deTranslation from './locales/de.json';
+
+// Initialize i18next
+i18n
+  // Detect user language
+  .use(LanguageDetector)
+  // Pass the i18n instance to react-i18next
+  .use(initReactI18next)
+  // Initialize i18next
+  .init({
+    resources: {
+      en: enTranslation,
+      de: deTranslation
+    },
+    fallbackLng: 'en',
+    debug: import.meta.env.MODE === 'development',
+
+    interpolation: {
+      escapeValue: false, // React already escapes values
+    },
+
+    // Default namespace
+    defaultNS: 'translation',
+
+    // Detection options
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+    }
+  });
+
+export default i18n;

src/i18n/locales/de.json

@@ -0,0 +1,54 @@
+{
+  "translation": {
+    "app": {
+      "title": "DSA 5 Charakterbogen",
+      "iconAlt": "DSA 5 Charakterbogen"
+    },
+    "basicInfo": {
+      "title": "Grundinformationen",
+      "name": "Name",
+      "namePlaceholder": "Charaktername eingeben",
+      "species": "Spezies",
+      "speciesPlaceholder": "z.B. Mensch, Elf, Zwerg",
+      "culture": "Kultur",
+      "culturePlaceholder": "z.B. Mittelländisch, Thorwalsch",
+      "profession": "Profession",
+      "professionPlaceholder": "z.B. Krieger, Magier, Kundschafter",
+      "experienceLevel": "Erfahrungsstufe",
+      "experienceLevels": {
+        "inexperienced": "Unerfahren",
+        "average": "Durchschnittlich",
+        "experienced": "Erfahren",
+        "competent": "Kompetent",
+        "masterful": "Meisterhaft",
+        "brilliant": "Brillant",
+        "legendary": "Legendär"
+      }
+    },
+    "attributes": {
+      "title": "Eigenschaften",
+      "courage": "MU - Mut",
+      "cleverness": "KL - Klugheit",
+      "intuition": "IN - Intuition",
+      "charisma": "CH - Charisma",
+      "dexterity": "FF - Fingerfertigkeit",
+      "agility": "GE - Gewandtheit",
+      "constitution": "KO - Konstitution",
+      "strength": "KK - Körperkraft"
+    },
+    "combat": {
+      "title": "Kampfwerte",
+      "lifePoints": "Lebenspunkte",
+      "stamina": "Ausdauer",
+      "initiative": "Initiative",
+      "speed": "Geschwindigkeit"
+    },
+    "skills": {
+      "title": "Fertigkeiten"
+    },
+    "spells": {
+      "title": "Zauber",
+      "addMagic": "🪄 Zauberfähigkeiten hinzufügen"
+    }
+  }
+}

src/i18n/locales/en.json

@@ -0,0 +1,54 @@
+{
+  "translation": {
+    "app": {
+      "title": "DSA 5 Character Sheet",
+      "iconAlt": "DSA 5e Character Sheet"
+    },
+    "basicInfo": {
+      "title": "Basic Information",
+      "name": "Name",
+      "namePlaceholder": "Enter character name",
+      "species": "Species",
+      "speciesPlaceholder": "e.g., Human, Elf, Dwarf",
+      "culture": "Culture",
+      "culturePlaceholder": "e.g., Middenrealmish, Thorwalian",
+      "profession": "Profession",
+      "professionPlaceholder": "e.g., Warrior, Mage, Scout",
+      "experienceLevel": "Experience Level",
+      "experienceLevels": {
+        "inexperienced": "Inexperienced",
+        "average": "Average",
+        "experienced": "Experienced",
+        "competent": "Competent",
+        "masterful": "Masterful",
+        "brilliant": "Brilliant",
+        "legendary": "Legendary"
+      }
+    },
+    "attributes": {
+      "title": "Attributes",
+      "courage": "CO - Courage",
+      "cleverness": "CL - Cleverness",
+      "intuition": "IN - Intuition",
+      "charisma": "CH - Charisma",
+      "dexterity": "DE - Dexterity",
+      "agility": "AG - Agility",
+      "constitution": "CN - Constitution",
+      "strength": "ST - Strength"
+    },
+    "combat": {
+      "title": "Combat Values",
+      "lifePoints": "Life Points",
+      "stamina": "Stamina",
+      "initiative": "Initiative",
+      "speed": "Speed"
+    },
+    "skills": {
+      "title": "Skills"
+    },
+    "spells": {
+      "title": "Spells",
+      "addMagic": "🪄 Add Magic Abilities"
+    }
+  }
+}

src/main.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
+// Import i18n configuration
+import './i18n/i18n';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>