A modern, responsive digital character sheet designed specifically for the Heroes Guild Westmarches community at westmarches.games. Built with Vue.js 3 and optimized for both screen and print use.
This character sheet is tailored for the Heroes Guild community, providing:
- Westmarches-Optimized: Character management perfect for episodic adventures
- Community Features: Designed for the Heroes Guild player experience
- Session Ready: Quick character access for drop-in gameplay
Visit the Heroes Guild Westmarches to join our community!
- Mobile-Optimized: Touch-friendly interface with larger buttons and improved layouts
- Desktop-Enhanced: Clean, professional layout for larger screens
- Print-Ready: Optimized CSS for clean, professional printing
- Point Buy System: Interactive ability score allocation with visual feedback
- Background Integration: Automatic skill proficiency assignment from available backgrounds
- Class Features: Support for character classes with spellcasting integration
- Level Progression: Automatic proficiency bonus and HP calculation
- Prompt-to-Character: Generate full character sheets from natural language descriptions using Google Gemini
- Intelligent Creation: Automatically selects appropriate class, race, background, and features
- Rules Compliant: Generates characters adhering to 5e rules (2024 handbook compatible)
- Shareable Links: Generate unique URLs to share your characters with other players
- Cloud Snapshots: Character state is saved to Supabase for easy sharing via link
- Drag-and-Drop Reordering: Organize features, spells, and attacks by dragging
- Auto-Save: Character data persists locally in browser storage
- Import/Export: Share characters via JSON import/export
- Real-time Calculations: Automatic modifier and bonus calculations
- Smart Point Buy: Visual points remaining counter with animations
- Mobile-Friendly Buttons: Large, color-coded increase/decrease buttons
- Spell Slot Management: Automatic spell slot calculation by caster type
- Death Save Tracking: Quick checkbox interface for death saves
- Node.js 16+
- npm or yarn
# Clone the repository
git clone https://github.com/MelvinLoos/5e-character-sheet.git
cd 5e-character-sheet
# Install dependencies
npm install
# Configure Environment Variables (create .env or configure in Netlify)
# GEMINI_API_KEY=your_gemini_api_key
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview# Run Unit Tests
npm run test:unit
# Run End-to-End Tests
npm run test:e2e- AI Generation: Use the "AI Generate" button to create a character from a description (e.g., "A sneaky goblin rogue who loves shiny things")
- Edit Mode: Click the edit button to manually modify character details
- Point Buy: Allocate ability scores using the intuitive point buy system
- Background: Select a background to automatically assign skill proficiencies
- Features: Add class features, feats, and special abilities
- Spells: Add spells with automatic spell slot calculation
- Share Online: Click "Share" to generate a unique URL for your character via Supabase
- Drag to Reorder: In edit mode, drag handles appear on features, spells, and attacks
- Auto-Calculations: Modifiers, proficiency bonuses, and spell save DCs update automatically
- Print Layout: Use your browser's print function for clean character sheets
- Auto-Save: Changes are automatically saved to browser storage
- Cloud Save: Characters shared online are preserved in the database
- Export: Download character as JSON file
- Import: Upload previously exported character files
- Westmarches Ready: Perfect for episodic adventure sessions
- Community Optimized: Designed for Heroes Guild gameplay style
- Session Management: Quick character access for drop-in games
- Frontend: Vue.js 3 with Composition API
- State Management: Pinia
- Styling: Tailwind CSS with custom D&D theming
- Backend & Auth: Supabase
- AI Integration: Google Gemini via Netlify Functions
- Drag & Drop: Vue.draggable.next
- Icons: Feather Icons
- Build Tool: Vite
- Testing: Playwright (E2E), Vitest (Unit)
- Type Safety: TypeScript & JSDoc
This character sheet implements common tabletop RPG mechanics including:
- Standard ability score systems
- Background-based skill assignments
- Class feature organization
- Spell slot management
- Proficiency bonus scaling
The character sheet uses CSS custom properties for theming:
:root {
--sheet-bg: #f4f0e6;
--sheet-text: #3a2d21;
--sheet-accent: #c9b7a2;
--sheet-red: #8b4513;
}- Larger Touch Targets: 40px minimum for comfortable mobile interaction
- Responsive Layouts: Stacked layouts on mobile, side-by-side on desktop
- Stepper Controls: Mobile-specific +/- buttons for level adjustment
- Optimized Spacing: Increased padding and margins for touch interfaces
- Clean Layout: Removes UI chrome and navigation for printing
- Optimized Typography: Print-friendly fonts and sizing
- Page Breaks: Intelligent page breaks between sections
- Ink Efficient: Optimized colors and backgrounds for printing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow Vue.js 3 Composition API patterns
- Use Tailwind CSS for styling
- Ensure mobile responsiveness
- Test print layouts
- Maintain Heroes Guild compatibility
This project is licensed under the MIT License - see the LICENSE file for details.
- Icons: RPG icons created by mj - Flaticon
- Fonts: EB Garamond and Fell English fonts
- Community: Built for Heroes Guild Westmarches
- Some browsers may require HTTPS for local storage persistence
- Print layouts optimized for standard letter-size paper
- Very long character names may wrap in mobile layouts
- AI Character Generation
- Multiple character management
- Community character sharing (Online via Supabase)
- PDF export functionality
- Heroes Guild campaign integration
- Custom background creation
- Session tracking features
Built with ❤️ for the Heroes Guild Westmarches community