Code Monkey home page Code Monkey logo

monster-mirror's Introduction

Monster Mirror Logo

Monster Mirror enhances your Gloomhaven journey by providing a convenient way to view monster ability cards. Designed as a companion app, it seamlessly integrates with the physical monster ability cards rather than serving as a replacement. This ensures a streamlined and complementary experience, preserving the tactile engagement of the original game components.

Preview

Select Party level and the scenario you want to play.

Home page

Then you can add / remove the monsters from the scenario and flip the corresponding ability cards. The Party level is taken into account when calculating the attack and range.

Scenario 1 overview

Why

In our group of 4, we distribute responsibilities for handling different aspects of the Gloomhaven board game. One person manages coins, another sorts initiative tokens, and someone else oversees monster ability cards and elemental tracking. Throughout our campaign, we observed an escalation in the complexity of monster abilities.

A pivotal moment arose when we failed a scenario due to a mishap โ€“ my friend unintentionally generated darkness, and we struggled to read the ability cards from across the table. This experience prompted me to develop this app.

The app simplifies the process of handling new monster abilities. With just the initiative information, we can easily select the appropriate card. Additionally, the app factors in the party level to calculate the final values for attack, movement, range, and more.

Development

This project is build with NextJS and hosted on Vercel, it can also be installed as a PWA and added to your homescreen. The app is optimized to work work on tablet size but can also be viewed on mobile or desktop.

  • npm run dev: Runs the dev server
  • npm run build:svg: Builds the SVG in an SVG Sprite
  • npm run build: Builds the Next.js project

Inspiration

This project was heavily inspired by Gloomy Companion especially the macro and logic for automatically calculating the ability cards.

I also want to thank the excellent Gloomhaven Card Browser which allowed me to easily verify and check the implementation.

License

This project is licensed MIT except for all artwork / thumbnails and images which are licensed under creative commons license BY-NC-SA 4.0.

monster-mirror's People

Contributors

dependabot[bot] avatar janstevens avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

monster-mirror's Issues

Add dialog to select correct monster ability with duplicate iniative

Currently when there are multiple ability cards with the same initiative its a bit of a hit and miss.

It would be better if we can detect the duplicate numbers, show one number and then a dialog that renders out all duplicate ability cards so we can easily pick the right one.

If sorting on initiative is one then the cards jump around making it hard to track

Screenshot 2024-04-27 at 19 32 46

Update readme

Update Readme so it better reflects what this project is about

Add action to start a new round

With multiple monsters active it's annoying to press all those close buttons. A new round button would remove all active ability cards

Add release management

Using something like release-it and a develop branch. Using PR feature development

Maybe use something fun like emoji commits ๐Ÿค”

Use fixed width for devider

The devider between the actions is now percentage based, probably should be fixed width for consistency reasons

Boss close icon and immunities ui

The ui looks a bit odd with the immunities of some bosses. Especially on mobile:

image

  • make the icons smaller and move them on a single line
  • make the header a bit bigger, this might cause issues displaying 6 cards on the ipad

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.