kvcarido / dnd-stat-roll-helper

Rolling for your DnD character attributes with the click of a button!

🎲 DnD Stat Roll Helper

Okay so, the crazy thing is I don't even play DnD. However, a lot of my close friends and family do play, and every once in a while I'll be interested enough to spectate a campaign session.

Description

Although I barely know anything about the world of DnD, I do know that at the beginning of a campaign you must roll a 6-sided die to determine certain attributes for your character. This side project serves as a personal quest for learning in public, a fun and productive way to apply my knowledge of front-end technologies into a tool that can be useful for DnD enthusiasts who can't be bothered with the repetitious act of rolling for stats. Unless you're into that process, then don't let me stop you!

💭 Takeaways

Work in progress...

Resources

• The DND 5E Guide: How to Roll Stats
• NES.css

🚧 Roadmap

Layout & Styling

• Build out basic layout for attributes
• Apply CSS reset
• Utilize flexbox to make working with data a decent experience
• Disable button once clicked
• Set styles for .dropped-roll
• Create style guide
  • decide on NES.css to make life easier
• Refactor layout to be mobile-first
• Create credentials
  • Add copyright
  • Add links: Github, Twitter
• Figure out why Strength attribute has extra padding under Total on tablet/desktop view 😵‍💫

Functionality

v1

• Create 6-sided dice roll
• Select attribute buttons in the DOM
• Select all attribute lists in the DOM
• Add event listeners to all stat-roll buttons
  • Add roll functionality for each attribute
• Work on roll-total
  • Drop lowest roll value
  • Add remaining 3 values for total
• Find the lowest roll in the DOM
  • use indexToDrop to target li
• Update the DOM to show roll-total
  • target #attrTotal
  • append total

v2 – started 7/22

• Create reset button
• Create a new branch make-oop
  • Start working on refactoring functionality