104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
// src/components/CharacterSheet.tsx
|
|
import React, { useState } from 'react';
|
|
import type { DSACharacter } from '../types/character';
|
|
import BasicInfo from './BasicInfo';
|
|
import Attributes from './Attributes';
|
|
import Skills from './Skills';
|
|
import Spells from './Spells';
|
|
import CombatValues from './CombatValues';
|
|
import ThemeToggle from './ThemeToggle';
|
|
import iconUrl from '/icon.png';
|
|
import './CharacterSheet.css';
|
|
|
|
// Erweiterte Initial-Daten mit Astralenergie und Zaubern
|
|
const initialCharacter: DSACharacter = {
|
|
id: crypto.randomUUID(),
|
|
name: '',
|
|
species: '',
|
|
culture: '',
|
|
profession: '',
|
|
experienceLevel: 'Experienced',
|
|
attributes: {
|
|
courage: 8,
|
|
cleverness: 8,
|
|
intuition: 8,
|
|
charisma: 8,
|
|
dexterity: 8,
|
|
agility: 8,
|
|
constitution: 8,
|
|
strength: 8
|
|
},
|
|
skills: {},
|
|
spells: {}, // ← Neu hinzugefügt
|
|
combat: {
|
|
lifePoints: { max: 30, current: 30 },
|
|
stamina: { max: 30, current: 30 },
|
|
initiative: 10,
|
|
speed: 8
|
|
},
|
|
astralEnergy: { // ← Neu hinzugefügt für Zauberer
|
|
max: 0,
|
|
current: 0
|
|
},
|
|
magicalTraditions: [], // ← Neu hinzugefügt
|
|
advantages: [],
|
|
disadvantages: [],
|
|
equipment: []
|
|
};
|
|
|
|
const CharacterSheet: React.FC = () => {
|
|
const [character, setCharacter] = useState<DSACharacter>(initialCharacter);
|
|
|
|
// Hilfsfunktion um zu prüfen ob Charakter Zauberer ist
|
|
const isSpellcaster = character.astralEnergy && character.astralEnergy.max > 0;
|
|
|
|
return (
|
|
<div className="character-sheet">
|
|
<ThemeToggle />
|
|
|
|
<header className="character-sheet-header">
|
|
<img
|
|
src={iconUrl}
|
|
alt="DSA 5e Character Sheet"
|
|
className="character-sheet-icon"
|
|
/>
|
|
<h1>DSA 5 Character Sheet</h1>
|
|
</header>
|
|
|
|
{/* Grundinformationen */}
|
|
<BasicInfo character={character} setCharacter={setCharacter} />
|
|
|
|
{/* Eigenschaften */}
|
|
<Attributes character={character} setCharacter={setCharacter} />
|
|
|
|
{/* Kampfwerte */}
|
|
<CombatValues character={character} setCharacter={setCharacter} />
|
|
|
|
{/* Fertigkeiten */}
|
|
<Skills character={character} setCharacter={setCharacter} />
|
|
|
|
{/* Zauber - nur anzeigen wenn Astralenergie > 0 oder explizit gewünscht */}
|
|
{(isSpellcaster || Object.keys(character.spells).length > 0) && (
|
|
<Spells character={character} setCharacter={setCharacter} />
|
|
)}
|
|
|
|
{/* Button zum Hinzufügen von Zaubern falls noch kein Zauberer */}
|
|
{!isSpellcaster && Object.keys(character.spells).length === 0 && (
|
|
<div className="add-magic-section">
|
|
<button
|
|
className="add-magic-button"
|
|
onClick={() => setCharacter(prev => ({
|
|
...prev,
|
|
astralEnergy: { max: 20, current: 20 }
|
|
}))}
|
|
>
|
|
🪄 Zauberfähigkeiten hinzufügen
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CharacterSheet;
|