Stat Selector Number Two uses a point buy system, implemented in React! In point buy, the player is given 8s in all stats, along with 27 points to allocate however they choose. Each stat level costs one point, up to level 13; levels 14 and 15 cost 2 points each. No stat can be raised above 15 - although perhaps I should make that adjustable.

I went back and forth on making the Stat component smart or dumb; all of the stat logic effects the total held in the parent component, which would be simpler if I put that logic in the parent, but I found the code much cleaner and easier to parse with the child maintaining its own logic.

I had one strange problem to do with how React queues setState calls. The button for resetting the whole form, the one labelled ‘Reset’, resides in the parent, and the simplest way to get it to reset the Stat components is to have it call the click method on their individual reset buttons. However, the resulting calls to adjust the remaining total don’t work properly.

Console logging reveals that the code is definitely making it to the adjustTotal function, but setTotal only runs once, for the last stat. It’s a simple enough problem to solve; line 50 of the code sets the total to 27 explicitly. This feels a little hacky, but performance isn’t a concern here, and it’s the most readable solution I could think of.

I put the code up here and there’s a Codepen of it here that you can play with!