UI/UX Templating

[zacharylove]

Motivation

We need to define some frontend specifications and reusable components beyond what's offered in Chakra. By coming up with some highly reusable and extendable frontend components, we can more easily enforce a consistent UI/UX design and have a toolbox for creating new components or views.

The lovely @Apexal added Storybook, which enables the parallel and isolated development of frontend components.

• You can run it in the frontend folder with npm run storybook and view it at http://localhost:6006.
• You should create "stories" like in frontend/src/stories for these components.
• Check out the Storybook documentation for React for more info.

Example: A stat display component

For example, a simple component to display a string and a value could be reused to display information about the player's stats (in the character sheet), an enemy creature's stats, and much more:

These components can be non-functional at first, then extended to query or interact with the backend as needed. They would also serve as excellent tasks for contributors learning React and/or Chakra.

Potential Components

• Stat display: Shows an attribute and a value associated with it (e.g, Acrobatics level)
  • Optional: buttons to modify value (e.g, healing increases HP)
• Dice roll: Allows the user to roll a die (D4 to D20) by clicking a button
  • Optional: functionality for saving throws or ability checks, comparing against calling user's character stats
  • Related issue
• Modal: Window overlaid on top of current view
  • Would be good for actions such as rolling or perhaps selecting abilities/spells.

If you come up with any other components that would be useful, please make a comment in this thread.

[zacharylove]

I'll be working on this stuff for now, but if anyone wants to contribute on this front pls let me know!

[Apexal]

Good issue. Note that I added Storybook which lets us develop components in isolation. You can run it in the frontend folder with npm run storybook and view it at http://localhost:6006. You should create "stories" like in frontend/src/stories for these components.

[zacharylove]

Awesome, thanks for letting me know! Storybook looks perfect for developing components in parallel with the backend, which fits our use case quite well. I'll update the issue with that info and look into working with it.