THE STORY

When I get together with my partner's family we usually end up playing a few rounds of Yahtzee. It's a game where you roll dice and chase predefinied combinations of the dice, keeping score by seeing how many of these combinations you can capture inside a span of three rolls. The outcome boils down to who has the most fortune over the brief course of the game. So basically it's a game of chance with dice. And to tell you the truth, it's a pretty boring game. It lacks adornment. It's essential elements are really only six dice and a pencil to write down your score. You don't even need a scorecard, you can just google it. If you are reading this and you can get your hands on six dice, you have a working copy of Yahtzee.

So why build an application of Yahtzee?

Well, one reason is that the game is actually quite fun. Yes it's boring. Yes it's basic. But Yahtzee has this one maddening little hook: your brain cannot allow you to admit that it all comes down to luck. Go ahead and play a round or two. You'll see. This hook makes the game addictive. I can't tell you how many times I've ended a game by putting a zero in my Yahtzee row and vowing to never play again, only to find ten minutes later an irresistable desire to pick up the dice and try some more. There is something enduring about the game that keeps me playing it year after year.

Another reason to build a Yahtzee application is to learn a JavaScript framework. And that's why I built React Yahtzee. I had been learning how to code for about six months. Ruby was my chosen language. I was going to become a web developer. During those six months I was gloriously naive of JavaScript. I had learned some HTML and CSS and I had familiarized myself with the command line and I was off writing little programs in ruby and starting to feel like this dream of making a living writing software was actually realistic.

Then someone said, "You should learn React." Okay, what is React? "It's a JavaScript framework. Lots of employers want you to know it." Good enough for me. Time to learn React.

Though I didn't know it at the time, attempting to learn React before ever learning JavaScript -- before even knowing what a JavaScript framework was -- was actually a very funny thing to do. Sort of like getting on a ski lift before bothering to learn how to ski. Such a person is going to have a punishing trip down the mountain.

And it was punishing. But also, it was great. Yes, every step of building this application was agonizing. I didn't appreciate the ease and elegance of ruby as a language until I tried to muck my way through JavaScript. Yes, I could have covered ground quicker by learning the right things in the right order. I didn't know any better. I was doing the best I could with the knowledge I had. Yes, as more time passes and I look back at the code base it makes me cringe. I think that some pieces of this application might be held together by duct-tape. None of it matters. I still love this little Yahtzee app. It took me about three months to build the thing, in between all the other stuff I was trying to learn, but once I had it finished and deployed I felt a real sense of accomplishment. I could link to it in a job application. This is the app that made me feel like a real programmer.

When I look back at it now, it seems pretty simple. The layout and styling amount to about 150 lines of CSS, and yes I did use HTML <table> tags to build the scorecard. I had no idea what CSS grid was when I built this, and some day when I remake this app using Vue I vow to use grids to build a yummy scoretable that is *gasp* responsive as well.

The most interesting piece of the design puzzle was sharing state efficiently amongst all the components. There is no database or backend structure to the app, so all of the scores and turn information are held in memory in the stateful components. As the game got further along in development I made an effort to add Redux as a state management tool. I never succeeded. My knowledge of React as a framework was still so preliminary, I think that adding Redux to the mix broke my little brain. But on a design level, it was definitely the right instinct. As an example, take a look at the score table. That is the most complicated part of the app, as every cell in that score table has its own logic for evaluating its own scoring options. The <TableContainer> represents these options as an array of fourteen integers, which I cryptically named 'potential'. This array 'potential' is then passed through a <Row> component into a <Cell> component, which displays the potential score based on whether the cell is considered active (i.e. the user has not already entered a score there). Then, if the user clicks on the cell, the event is passed back through <Row> to <TableContainer> where a second array (called 'scores') records the value from the 'potential' array. Every cell on that table gets this array passed down to it through multiple layers. It would be so nice to let that array just relax in the store. Kick its feet up, enjoy a little refreshment, and wait around for an action to be dispatched. Oh well. It was not the right time for me to learn how to add Redux to a project mid-stream, so now my poor little arrays have to cover much more ground.

I wrote this program about 18 months ago, and it's encouraging to look at it after some time has passed and realize how far I've come. The app plays smoothly in the browser, and it's fun to fire it up and blast through a game real quick, but it's rudimentary and a little messy under the hood. Still, it stands as a cherished artifact of my journey as a software developer, and like I said it was the first program that made me feel like a real software developer. Thanks for reading!