This selector uses the 4d6 Drop Lowest method for selecting stats. Four d6 are rolled and the three highest are summed for each ability score.

The code is straightforward enough, with three levels of components.

• The dice component manages its own display based on its value prop.
• The stat component contains the logic for animation, randomization, and summing.
• The top level component just lays out the stats, and contains a button for rolling everything.

I wanted to have the stat component calculate the sum only when the animation timed out, which required useEffect. The values passed to the sum function outside of useEffect were the values at the start of the animation, which I’m guessing has to do with React optimization.