ceva24 / havenplanner

A web application to create and share character builds for the popular tabletop and digital game Gloomhaven

HavenPlanner

👋 Introduction

A web application to create and share character builds for the popular tabletop and digital game Gloomhaven. Inspired by tools like Dark Souls Character Planner, WoW Armory and FFXIV Lodestone.

🗒️ Features

• Enter character details and select a personal quest
• Select perks, track battle goal progress and see the resulting attack modifier deck composition
• View and unlock character ability cards, create a saved hand, and select enhancements for cards
• Browse and select items
• Configure spoiler settings to show and hide locked classes and items
• Save and share characters with a shareable link

Not implemented

• Content from Forgotten Circles, Jaws of the Lion, Crimson Scales, Trail of Ashes and Frosthaven

💻 Development

Built with TypeScript, Next.js and MUI ❤️

Prerequisites

1. The version of Node.js listed in .nvmrc

2. A Google Chrome installation, to run Lighthouse locally

Tooling

Uses lint-staged and Husky for pre-commit hooks 🐶 woof!

Enforces conventional commits via commitlint, see Contribution guidelines for valid types.

Image hosting

Uses ceva24/worldhaven as a CDN for images, hosted at images.havenplanner.app.

Accessibility

This application is built for accessibility: it aims to meet at least WCAG 2.1 AA standards 😊

CI/CD

• 🌳 Cypress for end-to-end testing
• 🦔 Percy for visual testing
• 🚦 Lighthouse for performance checks

Reports and snapshots included on each PR ✔️

Continuously deployed to production using Vercel 🚀

📌 Notices

With thanks to the Worldhaven project, which makes this tool possible!

Gloomhaven and all related properties, images and text are owned by Cephalofair Games.

havenplanner's Issues

Add class icons

Add support for locked classes

Fix lighthouse issue: set explicit image width and height

Add close buttons to dialogs

Add favicon

Make personal quest image smaller on mobile devices

Order items

Name or item id

Separate out Percy commands

Show a "select class" placeholder in the character pane when a class is not selected

Responsive design

Move shared types to the files where they're used, or appropriately-named shared types files

Change characterClass type definition

Add card selections per level

Implement _app.tsx

Implement copy link button

Add card enhancements

Add warning when loading a shared link with spoilers

Add notes field

Update Cypress imports and rename className variable

Add shareable links

Show character fields as disabled when a class is not selected

Add level 2-9 decks

Center the character details form on medium screens

Add battle perks

Add level 1/x deck

Optimise SEO

Rework personal quest

Add spoiler toggle

Structure components folder by pane and tab

Character mat backs

Fix issue when rapidly increasing size of notes field

Add level 1 items selection

Add perks and attack modifier decks

Store data files in a more easily extensible file/folder structure

Remove api route

Add caching to github workflows

Create tabbed character pane

Add optional flippable personal quest

Add higher prosperity items

Configure lint-staged

Improve image loading speeds

image size and file size (compression)

Update documentation

Move README

Public repository changes

Things to do when making this repository public:

• add code coverage reports
• limit GitHub actions to specific SHAs
• enable branch protection
• add CodeQL analysis workflow

Clear character fields when changing class

Check functionality with different charsets

Accessibility - WAVE/eslint

Remove unused fonts

Move the class select to the character fields section

Rename constants file