started working on integrating talespire rolls

2025-06-20 02:49:59 +02:00
parent fc0a696157
commit 76f7ced8e9
11 changed files with 501 additions and 113 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1996,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",
@@ -2564,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",
@@ -2655,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",
@@ -2869,9 +3144,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.5.5",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.5.tgz",
-      "integrity": "sha512-d/jtm+rdNT8tpXuHY5MMtcbJFBkhXE6593XVR9UoGCH8jSFGci7jGvMGH5RYd5PBJW+00NZQt6gf7CbagJCrhg==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
      "dev": true,
      "funding": [
        {
--- a/src/components/CharacterSheet.tsx
+++ b/src/components/CharacterSheet.tsx
@@ -11,7 +11,7 @@ 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 = {
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import './LanguageSelector.css';
+import '../styles/LanguageSelector.css';

 const LanguageSelector: React.FC = () => {
  const { i18n } = useTranslation();
--- a/src/components/ThemeToggle.tsx
+++ b/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();
--- a/src/global.d.ts
+++ b/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 {};
--- a/src/hooks/useTaleSpireDice.ts
+++ b/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;
-    timestamp: number;
+    success: boolean;
+    qualityLevel: number;
+    remainingPoints: number;
+    rollId?: string;
 }

-interface TaleSpireAPI {
-    rollDice: (diceString: string, label?: string) => Promise<DiceRollResult>;
-    postToChat: (message: string) => void;
-}
-
-// TaleSpire API global verfügbar machen
-declare global {
-    interface Window {
-        TS: TaleSpireAPI;
-    }
+interface TrackedRoll {
+    type: 'dsa' | 'simple';
+    attributes?: [number, number, number];
+    skillValue?: number;
+    modifier?: number;
+    label: string;
+    bonus?: number;
 }

 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
-        setIsAvailable(!!window.TS);
+        // Check if TaleSpire API is available
+        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<{
-        dice: number[];
-        success: boolean;
-        qualityLevel: number;
-        remainingPoints: number;
-    }> => {
-        if (!window.TS) {
-            // Fallback für Development ohne TaleSpire
+    ): Promise<DSAResult> => {
+        if (!isAvailable) {
+            // Development fallback
            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 dsaResult = calculateDSAResult(result.dice, attributes, skillValue, modifier);
+            const rollData = [{
+                name: label,
+                roll: "3d20"
+            }];

-            // Ergebnis in TaleSpire Chat posten
-            const chatMessage = formatDSAChatMessage(dsaResult, attributes, skillValue, modifier, label);
-            window.TS.postToChat(chatMessage);
+            const rollId = await window.TS.dice.putDiceInTray(rollData, true);
+
+            // 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) {
-            // Fallback für Development
+        if (!isAvailable) {
+            // 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**'}`;
-};
--- a/src/components/CharacterSheet.css
+++ b/src/components/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;
--- a/src/components/LanguageSelector.css
+++ b/src/components/LanguageSelector.css
@@ -8,8 +8,8 @@
 }

 .language-btn {
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
+  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;
--- a/src/styles/ThemeToggle.css
+++ b/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);
+}
--- a/src/styles/talespire-variables.css
+++ b/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,
-}
--- a/vite.config.ts
+++ b/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