Skip to content

dnsmith124/tempest-character-creator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

9 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Tempest Character Creator

A modern, interactive character creation tool for the Tempest tabletop roleplaying game. Built with Next.js and React, this application provides an intuitive step-by-step character creation process with real-time stat calculations and character management.

Next.js React TypeScript Tailwind CSS

โœจ Features

  • Multi-Stage Character Creation: Guided 8-stage character creation process
  • Real-Time Stat Calculations: Automatic computation of derived stats based on attributes and ancestry
  • Character Management: Save, load, and manage multiple characters locally
  • Rich Data Integration: Comprehensive ancestries, backgrounds, skills, abilities, and spells
  • Responsive Design: Modern UI that works on desktop and mobile devices
  • Local Storage: Characters persist between sessions using browser storage
  • Character Notes: Add and save notes for each character

๐ŸŽฏ Character Creation Stages

  1. Attributes - Assign STR, AGL, MND, VIG using standard or random methods
  2. Ancestry - Choose from 10 unique ancestries (Azure Elf, Amber Elf, Dwarf, Poliwok, Felesian, Goliath, Gnome, Human, Pluma, Orc)
  3. Background - Select from 40+ backgrounds (Acrobat, Alchemist, Aristocrat, etc.)
  4. Skills - Choose 5 skills including your background's automatic skill
  5. Kit - Select starting equipment and gear
  6. Abilities - Choose from martial, nimble, musical, deadeye, and passive abilities
  7. Traits - Select character traits and personality
  8. Summary - Review and finalize your character

๐Ÿš€ Getting Started

Prerequisites

  • Node.js 18+
  • npm, yarn, pnpm, or bun

Installation

  1. Clone the repository:
git clone https://github.com/dnsmith124/tempest-character-creator.git
  1. Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install
  1. Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
  1. Open http://localhost:3000 in your browser

๐Ÿ› ๏ธ Tech Stack

  • Framework: Next.js 15 with App Router
  • Language: TypeScript
  • Styling: Tailwind CSS 4
  • State Management: React hooks with localStorage persistence
  • Build Tool: Turbopack for fast development builds

๐Ÿ“ Project Structure

tempest/
โ”œโ”€โ”€ app/
โ”‚   โ”œโ”€โ”€ components/          # React components
โ”‚   โ”‚   โ”œโ”€โ”€ stages/         # Character creation stage components
โ”‚   โ”‚   โ””โ”€โ”€ ...             # Shared components
โ”‚   โ”œโ”€โ”€ data/               # Game data JSON files
โ”‚   โ”‚   โ”œโ”€โ”€ ancestries.json # Character ancestries
โ”‚   โ”‚   โ”œโ”€โ”€ backgrounds.json # Character backgrounds
โ”‚   โ”‚   โ”œโ”€โ”€ skills.json     # Available skills
โ”‚   โ”‚   โ”œโ”€โ”€ abilities-*.json # Different ability types
โ”‚   โ”‚   โ”œโ”€โ”€ spells-*.json   # Different spell schools
โ”‚   โ”‚   โ””โ”€โ”€ ...             # Other game data
โ”‚   โ”œโ”€โ”€ layout.tsx          # Root layout
โ”‚   โ””โ”€โ”€ page.tsx            # Main page
โ”œโ”€โ”€ public/                 # Static assets
โ””โ”€โ”€ ...                     # Configuration files

๐ŸŽฎ Game Data

The application includes comprehensive game data for the Tempest RPG:

  • 10 Ancestries with unique abilities and stat bonuses
  • 40+ Backgrounds with associated skills and starting benefits
  • Multiple Ability Types: Martial, Nimble, Musical, Deadeye, and Passive
  • 5 Spell Schools: Arcane, Druidic, Fleuromancy, Holy, and Shadow
  • Extensive Skill System with various categories
  • Character Traits for personality customization

๐Ÿ”ง Development

Available Scripts

  • npm run dev - Start development server with Turbopack
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run lint - Run ESLint

Key Components

  • CharacterCreationForm.tsx - Main form orchestrator
  • stages/ - Individual stage components for each creation step
  • CurrentSelection.tsx - Shows current character progress
  • SelectedCharacterDisplay.tsx - Character viewer and manager

๐ŸŽจ Customization

The application is designed to be easily customizable:

  • Game Data: Modify JSON files in app/data/ to add new ancestries, backgrounds, etc.
  • Styling: Uses Tailwind CSS for easy theme customization
  • Components: Modular design allows easy addition of new features

๐Ÿ“ฑ Browser Support

  • Chrome/Chromium (recommended)
  • Firefox
  • Safari
  • Edge

๐Ÿค Contributing

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

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ™ Acknowledgments

  • Built for the Tempest tabletop roleplaying game
  • Inspired by modern character creation tools
  • Uses Next.js and React for optimal performance and developer experience

Note: This is a character creation tool for the Tempest RPG. For game rules and mechanics, please refer to the official Tempest rulebook.

About

A character creator for my TTRPG system, Tempest.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages