started working on integrating talespire rolls

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",
@@ -1984,6 +1996,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.167",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.167.tgz",
@@ -2426,6 +2450,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",
@@ -2503,6 +2576,18 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2594,6 +2679,257 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2808,9 +3144,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.5",
+      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-d/jtm+rdNT8tpXuHY5MMtcbJFBkhXE6593XVR9UoGCH8jSFGci7jGvMGH5RYd5PBJW+00NZQt6gf7CbagJCrhg==",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {
@@ -2898,6 +3234,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 +3534,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 +3711,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,9 +8,10 @@ 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';
+import '../styles/CharacterSheet.css';
 
 // Erweiterte Initial-Daten mit Astralenergie und Zaubern
 const initialCharacter: DSACharacter = {
@@ -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.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import '../styles/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/components/ThemeToggle.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FaMoon, FaSun} from "react-icons/fa";
 import {useTheme} from '../contexts/ThemeContext';
+import '../styles/ThemeToggle.css';
 
 const ThemeToggle: React.FC = () => {
     const {theme, toggleTheme} = useTheme();

src/global.d.ts

@@ -0,0 +1,14 @@
+declare global {
+    interface Window {
+        TS: {
+            dice: {
+                putDiceInTray: (rollData: any[], showInTray: boolean) => Promise<string>;
+                onRollResults: (callback: (rollEvent: any) => void) => void;
+                sendDiceResult: (resultGroups: any[], rollId: string) => Promise<void>;
+                evaluateDiceResultsGroup: (group: any) => Promise<number>;
+            };
+        };
+    }
+}
+
+export {};

src/hooks/useTaleSpireDice.ts

@@ -1,44 +1,136 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
-interface DiceRollResult {
+interface DSAResult {
     dice: number[];
-    total: number;
+    success: boolean;
-    timestamp: number;
+    qualityLevel: number;
+    remainingPoints: number;
+    rollId?: string;
 }
 
-interface TaleSpireAPI {
+interface TrackedRoll {
-    rollDice: (diceString: string, label?: string) => Promise<DiceRollResult>;
+    type: 'dsa' | 'simple';
-    postToChat: (message: string) => void;
+    attributes?: [number, number, number];
-}
+    skillValue?: number;
-
+    modifier?: number;
-// TaleSpire API global verfügbar machen
+    label: string;
-declare global {
+    bonus?: number;
-    interface Window {
-        TS: TaleSpireAPI;
-    }
 }
 
 export const useTaleSpireDice = () => {
     const [isAvailable, setIsAvailable] = useState(false);
+    const [trackedRolls, setTrackedRolls] = useState<Record<string, TrackedRoll>>({});
+    const [rollResults, setRollResults] = useState<Record<string, any>>({});
 
     useEffect(() => {
-        // Prüfen ob TaleSpire API verfügbar ist
+        // Check if TaleSpire API is available
-        setIsAvailable(!!window.TS);
+        const available = typeof window !== 'undefined' &&
+            window.TS &&
+            window.TS.dice;
+        setIsAvailable(available);
+
+        if (available) {
+            // Set up event listener for roll results
+            window.TS.dice.onRollResults((rollEvent: any) => {
+                handleRollResult(rollEvent);
+            });
+        }
     }, []);
 
+    const handleRollResult = useCallback(async (rollEvent: any) => {
+        const rollId = rollEvent.payload.rollId;
+
+        if (!trackedRolls[rollId]) {
+            return; // Not our roll
+        }
+
+        if (rollEvent.kind === "rollResults") {
+            const roll = rollEvent.payload;
+            const rollData = trackedRolls[rollId];
+
+            let result;
+
+            if (rollData.type === 'dsa') {
+                result = await evaluateDSACheck(roll, rollData);
+            } else if (rollData.type === 'simple') {
+                result = await evaluateSimpleRoll(roll, rollData);
+            }
+
+            if (result) {
+                // Send result back to TaleSpire
+                await window.TS.dice.sendDiceResult([result.resultGroup], rollId);
+
+                // Store result locally
+                setRollResults(prev => ({
+                    ...prev,
+                    [rollId]: result
+                }));
+            }
+        } else if (rollEvent.kind === "rollRemoved") {
+            // Clean up when roll is removed
+            setTrackedRolls(prev => {
+                const updated = { ...prev };
+                delete updated[rollId];
+                return updated;
+            });
+        }
+    }, [trackedRolls]);
+
+    const evaluateDSACheck = async (roll: any, rollData: TrackedRoll) => {
+        if (!roll.resultsGroups || roll.resultsGroups.length < 1) {
+            return null;
+        }
+
+        const group = roll.resultsGroups[0];
+        const dice: number[] = [];
+
+        // Extract dice results
+        for (const result of group.results) {
+            for (const die of result.dice) {
+                dice.push(die.result);
+            }
+        }
+
+        // Calculate DSA result
+        const dsaResult = calculateDSAResult(
+            dice,
+            rollData.attributes!,
+            rollData.skillValue!,
+            rollData.modifier!
+        );
+
+        return {
+            ...dsaResult,
+            resultGroup: group,
+            type: 'dsa',
+            label: rollData.label
+        };
+    };
+
+    const evaluateSimpleRoll = async (roll: any, rollData: TrackedRoll) => {
+        if (!roll.resultsGroups || roll.resultsGroups.length < 1) {
+            return null;
+        }
+
+        const group = roll.resultsGroups[0];
+        const total = await window.TS.dice.evaluateDiceResultsGroup(group);
+
+        return {
+            resultGroup: group,
+            total: total + (rollData.bonus || 0),
+            type: 'simple',
+            label: rollData.label
+        };
+    };
+
     const rollDSACheck = async (
         attributes: [number, number, number],
         skillValue: number,
         modifier: number = 0,
         label: string = "DSA 5e Probe"
-    ): Promise<{
+    ): Promise<DSAResult> => {
-        dice: number[];
+        if (!isAvailable) {
-        success: boolean;
+            // Development fallback
-        qualityLevel: number;
-        remainingPoints: number;
-    }> => {
-        if (!window.TS) {
-            // Fallback für Development ohne TaleSpire
             const dice = [
                 Math.floor(Math.random() * 20) + 1,
                 Math.floor(Math.random() * 20) + 1,
@@ -48,40 +140,94 @@ export const useTaleSpireDice = () => {
         }
 
         try {
-            const result = await window.TS.rollDice("3d20", label);
+            const rollData = [{
-            const dsaResult = calculateDSAResult(result.dice, attributes, skillValue, modifier);
+                name: label,
+                roll: "3d20"
+            }];
 
-            // Ergebnis in TaleSpire Chat posten
+            const rollId = await window.TS.dice.putDiceInTray(rollData, true);
-            const chatMessage = formatDSAChatMessage(dsaResult, attributes, skillValue, modifier, label);
+
-            window.TS.postToChat(chatMessage);
+            // Track this roll
+            setTrackedRolls(prev => ({
+                ...prev,
+                [rollId]: {
+                    type: 'dsa',
+                    attributes,
+                    skillValue,
+                    modifier,
+                    label
+                }
+            }));
+
+            // Return a promise that resolves when we get the result
+            return new Promise((resolve) => {
+                const checkResult = () => {
+                    if (rollResults[rollId]) {
+                        resolve({ ...rollResults[rollId], rollId });
+                    } else {
+                        setTimeout(checkResult, 100);
+                    }
+                };
+                checkResult();
+            });
 
-            return dsaResult;
         } catch (error) {
-            console.error('TaleSpire Dice Roll failed:', error);
+            console.error('TaleSpire DSA roll failed:', error);
             throw error;
         }
     };
 
     const rollSimpleDice = async (diceString: string, label?: string) => {
-        if (!window.TS) {
+        if (!isAvailable) {
-            // Fallback für Development
+            // Development fallback
             const sides = parseInt(diceString.split('d')[1]) || 20;
             const count = parseInt(diceString.split('d')[0]) || 1;
             const dice = Array.from({ length: count }, () => Math.floor(Math.random() * sides) + 1);
             return { dice, total: dice.reduce((a, b) => a + b, 0), timestamp: Date.now() };
         }
 
-        return await window.TS.rollDice(diceString, label);
+        try {
+            const rollData = [{
+                name: label || 'Simple Roll',
+                roll: diceString
+            }];
+
+            const rollId = await window.TS.dice.putDiceInTray(rollData, true);
+
+            setTrackedRolls(prev => ({
+                ...prev,
+                [rollId]: {
+                    type: 'simple',
+                    label: label || 'Simple Roll'
+                }
+            }));
+
+            return new Promise((resolve) => {
+                const checkResult = () => {
+                    if (rollResults[rollId]) {
+                        resolve(rollResults[rollId]);
+                    } else {
+                        setTimeout(checkResult, 100);
+                    }
+                };
+                checkResult();
+            });
+
+        } catch (error) {
+            console.error('TaleSpire simple roll failed:', error);
+            throw error;
+        }
     };
 
     return {
         isAvailable,
         rollDSACheck,
-        rollSimpleDice
+        rollSimpleDice,
+        rollResults
     };
 };
 
-// DSA 5e Würfellogik
+// Keep your existing DSA calculation logic
 const calculateDSAResult = (
     dice: number[],
     attributes: [number, number, number],
@@ -91,7 +237,6 @@ const calculateDSAResult = (
     let remainingPoints = skillValue;
     const effectiveAttributes = attributes.map(attr => attr + modifier);
 
-    // Für jeden Würfel prüfen ob er das Attribut überschreitet
     dice.forEach((roll, index) => {
         if (roll > effectiveAttributes[index]) {
             remainingPoints -= (roll - effectiveAttributes[index]);
@@ -108,20 +253,3 @@ const calculateDSAResult = (
         remainingPoints: Math.max(0, remainingPoints)
     };
 };
-
-// Chat-Nachricht formatieren
-const formatDSAChatMessage = (
-    result: any,
-    attributes: [number, number, number],
-    skillValue: number,
-    modifier: number,
-    label: string
-) => {
-    const { dice, success, qualityLevel, remainingPoints } = result;
-    const modifierText = modifier !== 0 ? ` (${modifier > 0 ? '+' : ''}${modifier})` : '';
-
-    return `🎲 **${label}**
-📊 Würfel: ${dice.join(', ')} vs ${attributes.join('/')}${modifierText}
-⚔️ FW: ${skillValue} | Übrig: ${remainingPoints}
-${success ? `✅ **Erfolg** (QL ${qualityLevel})` : '❌ **Fehlschlag**'}`;
-};

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>

src/styles/CharacterSheet.css

@@ -20,10 +20,10 @@
 }
 
 .character-sheet {
-    max-width: 900px;
+    max-width: 599px;
     margin: 0 auto;
     padding: 20px;
-    font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: OptimusPrinceps;
     color: var(--ts-color-on-surface, var(--text-color));
     background-color: var(--ts-color-surface, var(--surface-color));
     line-height: 1.6;
@@ -519,39 +519,6 @@ button:active {
     --surface-variant-color: #f9f9f9;
 }
 
-/* Theme Toggle Button */
-.theme-toggle {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    width: 50px;
-    height: 50px;
-    border-radius: 25px;
-    background: var(--ts-color-primary);
-    color: white;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    transition: all 0.3s ease;
-    z-index: 1000;
-}
-
-.theme-toggle:hover {
-    transform: scale(1.1);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
-}
-
-.theme-icon {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 1.5rem;
-}
-
 body {
     background: var(--ts-background-primary, var(--background-color));
     transition: background-color 0.3s ease;

src/styles/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(--ts-color-primary, var(--primary-color));
+  color: var(--ts-color-on-primary, var(--on-primary-color));
+  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/styles/ThemeToggle.css

@@ -0,0 +1,17 @@
+.theme-toggle {
+    cursor: pointer;
+    display: flex;
+    position: fixed;
+    color: var(--ts-color-secondary);
+    background: var(--ts-background-tertiary);
+    bottom: 10px;
+    right: 10px;
+    padding: 10px;
+    border-radius: 50%;
+    z-index: 1000;
+}
+
+.theme-toggle:hover {
+    color: var(--ts-accent-hover);
+    background: var(--ts-accent-background);
+}

src/styles/talespire-variables.css

@@ -1,16 +0,0 @@
-/* src/styles/talespire-variables.css */
-:root {
-    /* TaleSpire Color Variables */
-    --ts-color-surface: #ffffff;
-    --ts-color-on-surface: #000000;
-    --ts-color-surface-variant: #f9f9f9;
-    --ts-color-primary: #7b2cbf;
-    --ts-color-secondary: #3a0ca3;
-    --ts-color-outline: #cccccc;
-    --ts-color-error: #ff4444;
-
-    /* Add other TaleSpire variables as you discover them */
-    --ts-color-background: #f5f5f5;
-    --ts-color-on-background: #222222;
-    --ts-background-primary: #1a1a1a,
-}

vite.config.ts

@@ -2,7 +2,9 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+      react(),
+  ],
   base: './',
   build: {
     minify: 'esbuild', // ← Statt terser