roll-for-init/roll-for-init

Roll For Init

A character creator and interactive character sheet web application for the 5e ruleset of the most popular TTRPG in the world. See it live at rollforinit.herokuapp.com! Due to the nature of the hosting, you may need to refresh a few minutes after the initial load to get the full site.

Demo

Want to see what it's all about? Please see the demo here!

Demo

To Run

To run this application, create a file secret.env in the root directory following the guide below. Ensure MONGODB_URI_RULESET is populated with the ruleset from the 5e-database. Then, in the root directory, simply run:

npm install
npm run start

Required Environment Variables

• JWT_SECRET
  • A secret code such as a uuid.
• REDIS_URL
  • Redis URI and protocol (similar to MONGODB_URI) for 5e-srd-api.
  • No need to run local redis-server.
• MONGODB_URI
  • Production database for user data
• MONGODB_URI_DEV
  • Development database for user data
• MONGODB_URI_RULESET
  • Database for ruleset data (read-only)

Additional Environment Variables

• PORT
  • Main port for the web application, defaults to 8080
• PORT_API
  • Separate port for the API, defaults to 3005
• NODE_ENV
  • Set to 'production' if you are building for deployment
  • Set to 'development' if you are developing
• LEGACY_WATCH=1
  • Try adding this flag if you cannot get nodemon to update on changes
• SILENCE_WEBPACK=1
  • Add this flag if you want to silence webpack output

GitHub Ettiquette

• Commit new features to SEPARATE BRANCHES. Never commit to master.
• Pull often and frequently.
• Ensure that your commits are frequent and descriptive.

Built With

• MongoDB - Database used.
• React - Frontend JavaScript library.
• Express -Server/routing API for web app.
• Node - Backend JS runtime.
• Webpack - JS bundler for performance and ease of deployment.
• Sass - Used for easier CSS styling.
• Bootstrap - Frontend framework for website elements and styling.
• Bagelbits' 5e SRD API - API of the 5e ruleset, minorly altered for this project.
• Bradley Windybank's MERN stack template - Starter project for the beginning of development.

roll-for-init's Issues

No warning on navigating away from page

Character creator should give you a warning if you try to leave (browser back button if possible, any click to an area outside character creation) to avoid mistakes

User cannot navigate to previous pages in the character creator without (seemingly) having to fill everything out again, and then the future pages are locked to them

Need to be able to:

1. navaigate to previous pages and see your choices (ie Race) and what you've selected (i.e. what proficiencies, spells, equipment...)
2. upon navigation to a previous page, click on the left sidebar buttons to get back to where you were--no clicking through each and every page until you get back to where you were before. the left sidebar buttons should NEVER go back to "disabled"

equipment card shortlist display issue

for the right sidebar, the shortlist will only include selections from cards with dropdowns if the dropdown is selected after the card is selected.

possible solutions: make the dropdown unselectable unless the card is selected

ranger spellcasting messed up, no fluff text

ranger spellcasting does not accurately display howm any spells it needs--is null or undefined. no fluff text appears

Mobile character creation submit/ok buttons aren't fixed position on safari

resistances not added programmatically in apiCaller

needs adjustment in database and then needs to get to character object -> character validation
resistances = dragonborn (based on type chosen), sorcerer (depending on type chosen)

&& cards issue in equipment

seems like cards with an item && a dropdown cause a problem during validation, i.e. shield and martial weapon dropdown

Refreshing breaks the application

Using local storage, ensure character creation and all other screens can continue seamlessly on refresh

no log out button

general styling

draconic ancestry dropdown (and only that one) for sorcerer has an extra 5px margin on the left and right for some reason
floating label text is on top of popover
dropdown title sits on top of popover
popover card casts shadow on its own arrow
class cards at top of page are uneven
description height/age/etc cards are not centered on mobile

User sign up flow is broken.

Displays "check form for errors" on sign up submission but does not indicate errors and no errors are seemingly made

Druid does not check for if they have level 1 spells

Druid prepares spells--they have no level 1 spells but can prepare them. include this use case

redux state containing all proficiency choices made by user

then passed to items in dropdown where it's filtered and removed
maybe each dropdown gets an object containing an array in the state, and that state is accessed via state key. the object inside the state array represents a single dropdown, and the array contains all of the choices for that given dropdown, and it's just updated wholesale any time a change is made, so we don't have to worry about removing individual deselections.

background currently does not give you your starting currency

in Pouch for acolyte, there is a monetary amount specified in the db call (not present in the base API, this is a change in our personal database). this should be added to some character.currency object with {unit: , amount:}

dice font doesn't work on ability score page (for roll dice results)

misc character creation ui issues

no hover change on race/class icon cards
racial trait card tables not spaced correctly
racial trait cards should use read more/less
saving throw proficiencies are listed twice on class page
ability card container is too narrow
spells page container label font size too small
no indication of equipment card being "inactive" due to the other one being chosen; copy spells page styling for that

sorcerer spells "choose" broken

likely because sorcerers don't work the same way as other spellcasters?

Password requirements, email validation are not in place.

Dropdowns on Race are unable to select more than one option when needed

Likely an issue with the parameters passed to the Dropdown component as multiselect is functional on all other pages. Probably an issue with the key format or something similar.

tool proficiciencies are not validated properly

they have the key proficiency-proficiency due to their type being proficiency in the db and having a very varied title style ('lute', 'brewer's supplies', 'boat', etc...)

Will need to handle tools as the "else" case and ensure that no proficiencies incorrectly fall in there

after logout from /dashboard, the logo of the site disappears but other ui (buttons) displays normally

Monk weapon tag shown for all classes

Holy relics appear twice for paladin in the equipment screen

most likely something wrong with the apicaller

Nothing stops you from continuing to the next character creation screen without filling out your choices

Good for debugging bad for final product
Some kind of lock on submit and visual indicator of what needs to be fixed (bootstrap should have something) necessary
Should apply to not only dropdowns but equipment/spell cards as well

expertise feature (rogue) is not locked to skills you already have proficiency in

Proficiencies you already have chosen are available for choosing on other screens

User should not be able to mark a proficiency in eg Dwarvish or Acrobatics more than once
Running state must keep track of what proficiencies have been chosen to restrict what is in the dropdowns

More dropdown errors

• equipment screen will display choose 2 but not allow you to choose 2 (is this meant to be choose 2 or choose 1?)
• alignment says choose 2 but should say choose 1

dragon ancestor feature appears twice in sorcerer

equipment's equipmentLoaded makes it impossible to navigate back to page

set equipmentLoaded = true when equipmentList and equipmentOptions have the format of having been through the api caller already. ensure that their initial states are from the character state if available.

{limit} is undefined on spells for classes with limit = 1

found issue on cleric, untested on other classes with choose limit of 1. the number doesn't show up in the title if the choose limit is one, it just says "cantrips - choose". for classes with non-1 limits, like bard, it works fine. if you switch the way limit is printed to {Choose ${limit}}, it instead prints "cantrips - choose undefined"

paladin spellcasting messed up

either it should not appear or needs special handling, spell slots is null or undefined

No duplicate email handling for user registration

Unexpected error: MongoError: E11000 duplicate key error collection: userSpecific.users index: email_1 dup key: { email: "[email protected]" }
[0] at Function.create (E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\core\error.js:57:12)
[0] at toError (E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\utils.js:123:22)
[0] at E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\operations\common_functions.js:258:39
[0] at handler (E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\core\sdam\topology.js:943:24)
[0] at E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\cmap\connection_pool.js:350:13
[0] at handleOperationResult (E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\core\sdam\server.js:558:5)
[0] at MessageStream.messageHandler (E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\cmap\connection.js:277:5)
[0] at MessageStream.emit (events.js:315:20)
[0] at processIncomingData (E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\cmap\message_stream.js:144:12)
[0] at MessageStream._write (E:\Users\Michaela\Documents\Roll-For-Init\Roll-For-Init\node_modules\mongodb\lib\cmap\message_stream.js:42:5)
[0] at writeOrBuffer (internal/streams/writable.js:358:12)
[0] at MessageStream.Writable.write (internal/streams/writable.js:303:10)
[0] at TLSSocket.ondata (internal/streams/readable.js:719:22)
[0] at TLSSocket.emit (events.js:315:20)
[0] at addChunk (internal/streams/readable.js:309:12)
[0] at readableAddChunk (internal/streams/readable.js:284:9) {
[0] driver: true,
[0] index: 0,
[0] code: 11000,
[0] keyPattern: { email: 1 },
[0] keyValue: { email: '[email protected]' }
[0] }