diff --git a/index.html b/index.html index 69c7789..a0a2139 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + DSA 5e Charakter Bogen diff --git a/src/App.tsx b/src/App.tsx index 3d7ded3..eccb581 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,12 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import CharacterSheet from './components/CharacterSheet'; +import './App.css'; function App() { - const [count, setCount] = useState(0) - - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) + return ( +
+ +
+ ); } -export default App +export default App; diff --git a/src/components/Attributes.tsx b/src/components/Attributes.tsx new file mode 100644 index 0000000..c3417fe --- /dev/null +++ b/src/components/Attributes.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import type {DSACharacter, DSAAttributes} from '../types/character'; + +interface AttributesProps { + character: DSACharacter; + setCharacter: React.Dispatch>; +} + +const Attributes: React.FC = ({ character, setCharacter }) => { + const updateAttribute = (attr: keyof DSAAttributes, value: number) => { + // Input validation - clamp between 1 and 20 + const clampedValue = Math.min(20, Math.max(1, value)); + + setCharacter(prev => ({ + ...prev, + attributes: { + ...prev.attributes, + [attr]: clampedValue + } + })); + }; + + const attributeDisplayNames: Record = { + courage: "CO - Courage", + cleverness: "CL - Cleverness", + intuition: "IN - Intuition", + charisma: "CH - Charisma", + dexterity: "DE - Dexterity", + agility: "AG - Agility", + constitution: "CN - Constitution", + strength: "ST - Strength" + }; + + return ( +
+

Attributes

+
+ {Object.entries(character.attributes).map(([key, value]) => ( +
+ + updateAttribute( + key as keyof DSAAttributes, + parseInt(e.target.value) || 8 + )} + min="1" + max="20" + className="attribute-input" + /> +
+ ))} +
+
+ ); +}; + +export default Attributes; diff --git a/src/components/BasicInfo.tsx b/src/components/BasicInfo.tsx new file mode 100644 index 0000000..ccefe8f --- /dev/null +++ b/src/components/BasicInfo.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import type {DSACharacter} from '../types/character'; + +interface BasicInfoProps { + character: DSACharacter; + setCharacter: React.Dispatch>; +} + +const BasicInfo: React.FC = ({ character, setCharacter }) => { + const updateField = (field: keyof DSACharacter, value: string) => { + setCharacter(prev => ({ + ...prev, + [field]: value + })); + }; + + return ( +
+

Basic Information

+
+
+ + updateField('name', e.target.value)} + placeholder="Enter character name" + /> +
+
+ + updateField('species', e.target.value)} + placeholder="e.g., Human, Elf, Dwarf" + /> +
+
+ + updateField('culture', e.target.value)} + placeholder="e.g., Middenrealmish, Thorwalian" + /> +
+
+ + updateField('profession', e.target.value)} + placeholder="e.g., Warrior, Mage, Scout" + /> +
+
+ + +
+
+
+ ); +}; + +export default BasicInfo; diff --git a/src/components/CharacterSheet.css b/src/components/CharacterSheet.css new file mode 100644 index 0000000..515aaa9 --- /dev/null +++ b/src/components/CharacterSheet.css @@ -0,0 +1,492 @@ +/* CSS Variables - TaleSpire Integration with Fallbacks */ +:root { + /* Fallback colors if TaleSpire variables aren't available */ + --text-color: #222; + --background-color: #f5f5f5; + --surface-color: #ffffff; + --surface-variant-color: #f9f9f9; + --primary-color: #7b2cbf; + --secondary-color: #3a0ca3; + --accent-color: #f72585; + --outline-color: #ccc; + --error-color: #ff4444; + --success-color: #4caf50; + --warning-color: #ff9800; +} + +/* Base Styles */ +* { + box-sizing: border-box; +} + +.character-sheet { + max-width: 900px; + margin: 0 auto; + padding: 20px; + font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; + color: var(--ts-color-on-surface, var(--text-color)); + background-color: var(--ts-color-surface, var(--surface-color)); + line-height: 1.6; +} + +.character-sheet h1 { + text-align: center; + margin-bottom: 30px; + color: var(--ts-color-primary, var(--primary-color)); + font-size: 2.5rem; + font-weight: 700; +} + +/* Section Styles */ +.section { + margin-bottom: 30px; + padding: 20px; + border-radius: 12px; + border: 2px solid var(--ts-color-outline, var(--outline-color)); + background: var(--ts-color-surface, var(--surface-color)); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.section h2 { + margin: 0 0 20px 0; + color: var(--ts-color-primary, var(--primary-color)); + font-size: 1.5rem; + font-weight: 600; + border-bottom: 2px solid var(--ts-color-primary, var(--primary-color)); + padding-bottom: 8px; +} + +.section h3 { + margin: 0 0 15px 0; + color: var(--ts-color-secondary, var(--secondary-color)); + font-size: 1.2rem; + font-weight: 500; +} + +/* Form Elements */ +.form-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 20px; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group label { + font-weight: 600; + margin-bottom: 5px; + color: var(--ts-color-on-surface, var(--text-color)); +} + +input, select, textarea { + width: 100%; + padding: 10px; + border: 2px solid var(--ts-color-outline, var(--outline-color)); + border-radius: 6px; + font-size: 1rem; + background: var(--ts-color-surface, var(--surface-color)); + color: var(--ts-color-on-surface, var(--text-color)); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +input:focus, select:focus, textarea:focus { + outline: none; + border-color: var(--ts-color-primary, var(--primary-color)); + box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.1); +} + +input::placeholder { + color: #888; + font-style: italic; +} + +/* Buttons */ +button { + padding: 10px 16px; + border: none; + border-radius: 6px; + font-size: 1rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +button:hover { + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +button:active { + transform: translateY(0); +} + +/* Attributes Section */ +.attributes-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 15px; +} + +.attribute { + display: flex; + flex-direction: column; + align-items: center; + padding: 15px; + background: var(--ts-color-surface-variant, var(--surface-variant-color)); + border-radius: 10px; + border: 1px solid var(--ts-color-outline, var(--outline-color)); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.attribute:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.attribute label { + font-weight: 700; + font-size: 0.9rem; + margin-bottom: 8px; + text-align: center; + color: var(--ts-color-primary, var(--primary-color)); +} + +.attribute-input { + width: 80px !important; + text-align: center; + font-size: 1.2rem; + font-weight: bold; +} + +/* Skills Section */ +.skills .common-skills { + margin-bottom: 25px; +} + +.skill-buttons { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 15px; +} + +.skill-add-button { + padding: 8px 14px; + background: var(--ts-color-primary, var(--primary-color)); + color: white; + border: none; + border-radius: 6px; + font-size: 0.9rem; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.skill-add-button:hover:not(:disabled) { + background: var(--ts-color-secondary, var(--secondary-color)); +} + +.skill-add-button:disabled { + background: #ccc; + cursor: not-allowed; + opacity: 0.6; +} + +.custom-skill-add { + margin-bottom: 25px; + padding: 15px; + background: var(--ts-color-surface-variant, var(--surface-variant-color)); + border-radius: 8px; +} + +.custom-skill-form { + display: flex; + gap: 12px; + align-items: center; + flex-wrap: wrap; + margin-top: 15px; +} + +.custom-skill-form button { + background: var(--ts-color-secondary, var(--secondary-color)); + color: white; + padding: 10px 20px; +} + +.custom-skill-form button:hover { + background: var(--ts-color-primary, var(--primary-color)); +} + +.skills-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; + margin-top: 20px; +} + +.skill-item { + border: 2px solid var(--ts-color-outline, var(--outline-color)); + border-radius: 10px; + padding: 18px; + background: var(--ts-color-surface-variant, var(--surface-variant-color)); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.skill-item:hover { + border-color: var(--ts-color-primary, var(--primary-color)); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.skill-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; +} + +.skill-header h4 { + margin: 0; + color: var(--ts-color-primary, var(--primary-color)); + font-size: 1.1rem; +} + +.remove-button { + background: var(--ts-color-error, var(--error-color)); + color: white; + border: none; + border-radius: 50%; + width: 28px; + height: 28px; + cursor: pointer; + font-size: 18px; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.remove-button:hover { + background: #cc0000; +} + +.skill-attributes { + font-size: 0.85rem; + color: #666; + margin-bottom: 12px; + font-weight: 500; +} + +.skill-value { + margin-bottom: 12px; +} + +.skill-value label { + display: block; + font-size: 0.9rem; + font-weight: 600; + margin-bottom: 5px; +} + +.skill-value input { + width: 80px; + text-align: center; + font-weight: bold; +} + +.skill-total { + text-align: center; + padding: 8px; + background: var(--ts-color-primary, var(--primary-color)); + color: white; + border-radius: 6px; + font-weight: 700; + font-size: 1rem; +} + +.no-skills { + text-align: center; + color: #666; + font-style: italic; + font-size: 1.1rem; + padding: 30px; + background: var(--ts-color-surface-variant, var(--surface-variant-color)); + border-radius: 8px; +} + +/* Combat Values Section */ +.combat-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; +} + +.combat-group { + padding: 15px; + background: var(--ts-color-surface-variant, var(--surface-variant-color)); + border-radius: 8px; + border: 1px solid var(--ts-color-outline, var(--outline-color)); +} + +.combat-group h3 { + margin: 0 0 15px 0; + color: var(--ts-color-secondary, var(--secondary-color)); + text-align: center; +} + +.value-pair { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.value-pair label { + font-size: 0.9rem; + font-weight: 600; +} + +.combat-simple { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.combat-simple > div { + padding: 15px; + background: var(--ts-color-surface-variant, var(--surface-variant-color)); + border-radius: 8px; + border: 1px solid var(--ts-color-outline, var(--outline-color)); + text-align: center; +} + +.combat-simple label { + display: block; + margin-bottom: 8px; + font-weight: 600; + color: var(--ts-color-secondary, var(--secondary-color)); +} + +.combat-simple input { + text-align: center; + font-weight: bold; + font-size: 1.1rem; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .character-sheet { + padding: 15px; + } + + .character-sheet h1 { + font-size: 2rem; + } + + .form-grid { + grid-template-columns: 1fr; + } + + .attributes-grid { + grid-template-columns: repeat(2, 1fr); + } + + .skills-grid { + grid-template-columns: 1fr; + } + + .combat-grid { + grid-template-columns: 1fr; + } + + .custom-skill-form { + flex-direction: column; + align-items: stretch; + } + + .skill-buttons { + justify-content: center; + } +} + +@media (max-width: 480px) { + .attributes-grid { + grid-template-columns: 1fr; + } + + .value-pair { + grid-template-columns: 1fr; + } + + .combat-simple { + grid-template-columns: 1fr; + } +} + +/* Utility Classes */ +.text-center { + text-align: center; +} + +.text-primary { + color: var(--ts-color-primary, var(--primary-color)); +} + +.text-secondary { + color: var(--ts-color-secondary, var(--secondary-color)); +} + +.mb-0 { margin-bottom: 0; } +.mb-1 { margin-bottom: 0.5rem; } +.mb-2 { margin-bottom: 1rem; } +.mb-3 { margin-bottom: 1.5rem; } + +.mt-0 { margin-top: 0; } +.mt-1 { margin-top: 0.5rem; } +.mt-2 { margin-top: 1rem; } +.mt-3 { margin-top: 1.5rem; } + +/* Header Styles */ +.character-sheet-header { + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + margin-bottom: 30px; + padding: 20px; + background: var(--ts-color-surface-variant, var(--surface-variant-color)); + border-radius: 12px; + border: 2px solid var(--ts-color-primary, var(--primary-color)); +} + +.character-sheet-icon { + width: 48px; + height: 48px; + object-fit: contain; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); +} + +.character-sheet-header h1 { + margin: 0; + color: var(--ts-color-primary, var(--primary-color)); + font-size: 2.5rem; + font-weight: 700; +} + +/* Responsive adjustment */ +@media (max-width: 768px) { + .character-sheet-header { + flex-direction: column; + gap: 10px; + } + + .character-sheet-icon { + width: 40px; + height: 40px; + } + + .character-sheet-header h1 { + font-size: 2rem; + text-align: center; + } +} \ No newline at end of file diff --git a/src/components/CharacterSheet.tsx b/src/components/CharacterSheet.tsx new file mode 100644 index 0000000..36bd316 --- /dev/null +++ b/src/components/CharacterSheet.tsx @@ -0,0 +1,55 @@ +import React, { useState } from 'react'; +import type {DSACharacter} from '../types/character'; +import BasicInfo from './BasicInfo'; +import Attributes from './Attributes'; +import Skills from './Skills'; +import CombatValues from './CombatValues'; +import './CharacterSheet.css'; + +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: {}, + combat: { + lifePoints: { max: 30, current: 30 }, + stamina: { max: 30, current: 30 }, + initiative: 10, + speed: 8 + }, + advantages: [], + disadvantages: [], + equipment: [] +}; + +const CharacterSheet: React.FC = () => { + const [character, setCharacter] = useState(initialCharacter); + + return ( +
+
+ DSA 5e Logo +

DSA 5 Character Sheet

+
+ + + + +
+ ); +}; + +export default CharacterSheet; diff --git a/src/components/CombatValues.tsx b/src/components/CombatValues.tsx new file mode 100644 index 0000000..5a1a125 --- /dev/null +++ b/src/components/CombatValues.tsx @@ -0,0 +1,118 @@ +import React from 'react'; +import type {DSACharacter} from '../types/character'; + +interface CombatValuesProps { + character: DSACharacter; + setCharacter: React.Dispatch>; +} + +const CombatValues: React.FC = ({ character, setCharacter }) => { + const updateCombatValue = (category: 'lifePoints' | 'stamina' | 'astralEnergy', + field: 'max' | 'current', + value: number) => { + setCharacter(prev => ({ + ...prev, + combat: { + ...prev.combat, + [category]: { + ...prev.combat[category], + [field]: Math.max(0, value) + } + } + })); + }; + + const updateSimpleCombatValue = (field: 'initiative' | 'speed', value: number) => { + setCharacter(prev => ({ + ...prev, + combat: { + ...prev.combat, + [field]: Math.max(0, value) + } + })); + }; + + return ( +
+

Combat Values

+
+
+

Life Points

+
+
+ + updateCombatValue('lifePoints', 'current', parseInt(e.target.value) || 0)} + min="0" + /> +
+
+ + updateCombatValue('lifePoints', 'max', parseInt(e.target.value) || 0)} + min="0" + /> +
+
+
+ +
+

Stamina

+
+
+ + updateCombatValue('stamina', 'current', parseInt(e.target.value) || 0)} + min="0" + /> +
+
+ + updateCombatValue('stamina', 'max', parseInt(e.target.value) || 0)} + min="0" + /> +
+
+
+ +
+
+ + updateSimpleCombatValue('initiative', parseInt(e.target.value) || 0)} + min="0" + /> +
+
+ + updateSimpleCombatValue('speed', parseInt(e.target.value) || 0)} + min="0" + /> +
+
+
+
+ ); +}; + +export default CombatValues; \ No newline at end of file diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx new file mode 100644 index 0000000..241241f --- /dev/null +++ b/src/components/Skills.tsx @@ -0,0 +1,181 @@ +import React, { useState } from 'react'; +import type { DSACharacter, DSASkill, DSAAttributes } from '../types/character'; + +interface SkillsProps { + character: DSACharacter; + setCharacter: React.Dispatch>; +} + +const Skills: React.FC = ({ character, setCharacter }) => { + const [newSkillName, setNewSkillName] = useState(''); + const [selectedAttributes, setSelectedAttributes] = useState<[keyof DSAAttributes, keyof DSAAttributes, keyof DSAAttributes]>(['courage', 'cleverness', 'intuition']); + + // Common DSA 5e skills with their attribute combinations + const commonSkills: Record = { + 'Athletics': ['agility', 'constitution', 'strength'], + 'Stealth': ['courage', 'intuition', 'agility'], + 'Perception': ['cleverness', 'intuition', 'intuition'], + 'Persuasion': ['cleverness', 'intuition', 'charisma'], + 'Intimidation': ['courage', 'intuition', 'charisma'], + 'Survival': ['courage', 'cleverness', 'constitution'], + 'Weapons Training': ['courage', 'agility', 'strength'], + 'Spell Casting': ['cleverness', 'intuition', 'charisma'], + }; + + const addSkill = (skillName: string, attributes: [keyof DSAAttributes, keyof DSAAttributes, keyof DSAAttributes]) => { + const newSkill: DSASkill = { + name: skillName, + attributes: attributes, + value: 0 + }; + + setCharacter(prev => ({ + ...prev, + skills: { + ...prev.skills, + [skillName]: newSkill + } + })); + }; + + const updateSkillValue = (skillName: string, value: number) => { + const clampedValue = Math.max(0, Math.min(20, value)); + + setCharacter(prev => ({ + ...prev, + skills: { + ...prev.skills, + [skillName]: { + ...prev.skills[skillName], + value: clampedValue + } + } + })); + }; + + const removeSkill = (skillName: string) => { + setCharacter(prev => { + const { [skillName]: removed, ...remainingSkills } = prev.skills; + return { + ...prev, + skills: remainingSkills + }; + }); + }; + + const addCustomSkill = () => { + if (newSkillName.trim() && !character.skills[newSkillName]) { + addSkill(newSkillName.trim(), selectedAttributes); + setNewSkillName(''); + } + }; + + const calculateSkillCheck = (skill: DSASkill): number => { + const [attr1, attr2, attr3] = skill.attributes; + return character.attributes[attr1] + character.attributes[attr2] + character.attributes[attr3] + skill.value; + }; + + return ( +
+

Skills & Talents

+ + {/* Quick Add Common Skills */} +
+

Add Common Skills

+
+ {Object.entries(commonSkills).map(([skillName, attributes]) => ( + + ))} +
+
+ + {/* Custom Skill Addition */} +
+

Add Custom Skill

+
+ setNewSkillName(e.target.value)} + /> + + + + +
+
+ + {/* Current Skills List */} +
+

Current Skills

+ {Object.keys(character.skills).length === 0 ? ( +

No skills added yet. Add some skills above!

+ ) : ( +
+ {Object.entries(character.skills).map(([skillName, skill]) => ( +
+
+

{skill.name}

+ +
+
+ {skill.attributes.map(attr => attr.substring(0, 2).toUpperCase()).join('/')} +
+
+ + updateSkillValue(skillName, parseInt(e.target.value) || 0)} + min="0" + max="20" + /> +
+
+ Total: {calculateSkillCheck(skill)} +
+
+ ))} +
+ )} +
+
+ ); +}; + +export default Skills; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index bef5202..02aecae 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,11 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +// src/main.tsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import './index.css'; -createRoot(document.getElementById('root')!).render( - - - , -) +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/src/styles/talespire-variables.css b/src/styles/talespire-variables.css new file mode 100644 index 0000000..81b8083 --- /dev/null +++ b/src/styles/talespire-variables.css @@ -0,0 +1,15 @@ +/* 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; +} diff --git a/src/types/character.ts b/src/types/character.ts new file mode 100644 index 0000000..ce3b1e1 --- /dev/null +++ b/src/types/character.ts @@ -0,0 +1,48 @@ +export interface DSAAttributes { + courage: number; // Mut + cleverness: number; // Klugheit + intuition: number; // Intuition + charisma: number; // Charisma + dexterity: number; // Fingerfertigkeit + agility: number; // Gewandtheit + constitution: number; // Konstitution + strength: number; // Körperkraft +} + +export interface DSASkill { + name: string; + attributes: [keyof DSAAttributes, keyof DSAAttributes, keyof DSAAttributes]; + value: number; +} + +export interface DSACombatValues { + lifePoints: { + max: number; + current: number; + }; + stamina: { + max: number; + current: number; + }; + astralEnergy?: { + max: number; + current: number; + }; + initiative: number; + speed: number; +} + +export interface DSACharacter { + id: string; + name: string; + species: string; // Spezies + culture: string; // Kultur + profession: string; // Profession + experienceLevel: string; // Erfahrungsgrad + attributes: DSAAttributes; + skills: Record; + combat: DSACombatValues; + advantages: string[]; // Vorteile + disadvantages: string[]; // Nachteile + equipment: string[]; // Ausrüstung +}