# TaleSpire DSA5 Character Sheet

A modern React-based character sheet application for TaleSpire, specifically designed for the DSA5 (Das Schwarze Auge 5) roleplaying game system. This digital character sheet helps players manage their DSA5 characters within the TaleSpire virtual tabletop environment.

## Features

- **Complete Character Management**: Track attributes, skills, combat stats, equipment, magic, religion, and more
- **Modern UI**: Clean, responsive interface built with React and TailwindCSS
- **TaleSpire Integration**: Optimized for seamless use with TaleSpire virtual tabletop
- **Import/Export**: Save and load character data (via the header component)
- **Modular Architecture**: Well-organized codebase with separation of concerns
- **Type Safety**: Built with TypeScript for enhanced code quality and developer experience
- **Fast Development**: Powered by Vite for quick iteration and hot module replacement

## Character Sheet Sections

- **Attributes**: Manage core character attributes
- **Skills**: Track character skills and abilities
- **Combat**: Handle combat-related stats and actions
- **Equipment**: Manage character inventory and items
- **Magic**: Track spells and magical abilities
- **Religion**: Manage religious aspects of your character
- **Notes**: Keep track of important character information

## Tech Stack

- **Frontend**: React 19.1.0 + TypeScript 5.8.3
- **Build Tool**: Vite 7.0.0
- **Styling**: TailwindCSS 4.1.11
- **Linting**: ESLint 9.29.0 with React hooks support
- **Package Manager**: npm

## Getting Started

### Prerequisites

- Node.js (LTS version recommended)
- npm package manager
- TaleSpire (for actual use in-game)

### Installation

```bash
# Clone the repository
git clone <repository-url>
cd talespire-dsa5-charactersheet

# Install dependencies
npm install

# Start development server
npm run dev
```

## Development

### Available Scripts

- `npm run dev` - Start the development server with hot reload
- `npm run build` - Build the application for production
- `npm run preview` - Preview the production build locally
- `npm run lint` - Run ESLint to check code quality

### Project Structure

```
src/
├── api/            # API interactions
├── assets/         # Static assets
├── configs/        # Configuration files
├── modules/        # Feature modules
│   ├── footer/     # Footer components
│   ├── header/     # Header components with import/export
│   └── main/       # Main content
│       ├── components/     # UI components
│       ├── design-system/  # Design tokens and UI primitives
│       ├── hooks/          # Custom React hooks
│       ├── modules/        # Feature sub-modules
│       │   ├── attributes/ # Character attributes
│       │   ├── combat/     # Combat features
│       │   ├── equipment/  # Inventory management
│       │   ├── magic/      # Magic and spells
│       │   ├── notes/      # Character notes
│       │   ├── religion/   # Religious aspects
│       │   └── skills/     # Character skills
│       ├── services/       # Service layer
│       ├── states/         # State management
│       └── utils/          # Utility functions
└── App.tsx         # Main application component
```

## Building for Production

To build the application for production:

```bash
npm run build
```

This will create a `dist` directory with the compiled assets ready for deployment.

To preview the production build locally:

```bash
npm run preview
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

This project currently does not specify a license. It is recommended to add a LICENSE file to clarify the terms under which the code can be used.

## Screenshots

*Coming soon*

---

Built with ❤️ for the DSA5 and TaleSpire communities
