seanmcp / dice-roller

🎲 A handy dice roller for table-top gaming

dice-roller

A handy dandy dice roller for table-top gaming. Live on GitHub Pages

About

Utilizing

• React

Features

• Create die with anywhere from two to 999,999,999 sides
• Create popular sets with one click
• Roll die individually or all at once
• Find the total (so you don't have to math!)
• Hear the authentic sound of a real die roll (or not)
• Select from nine die styles (including Settler's red and yellow)

Style guide

Spacing

All elements should be sized and positioned based on a 12px grid system. Acceptable fractions of one unit are 6px and 3px.

Colors

Use Google's Material color palette. The primary color is "Blue Gray" and the secondary "Blue." Errors should be "Orange."

Transition & Animation

Transitions and animations should last 150ms and use ease-in-out unless inappropriate. Use @keyframe animations whenever possible.

dice-roller's Issues

Treat state as immutable

You have mutated component state throughout the application. Refactor every reference to this.setState() to treat state as immutable.

Consider using prevState in some instances (see React documentation).

Create custom die on "enter"

As a Dice Roller user, I want to be able to create a custom die when I click "enter" so that I can use my mobile keyboard for the entire process.

Accessibility

This app is almost entirely inaccessible.

• main landmark
• html lang attribute
• Keyboard interactions
• Color contrast
• Aria labels