That’s Pretty Clever
I was over at my friend’s place—in the backyard, outside—playing some games. Thankful for the warm summer nights and not looking forward to a pandemic lasting through winter.
One of the games we played was a dice game called That’s Pretty Clever. We each had our own piece of paper and pen to mark off various items to be scored at the end. The scorecard is very specific to the game and I imagined the pad supplied with the game eventually running out. To which, I wondered, could I build an online version of the scorecard? Even handier would be if it could calculate the scores at the end of the game.
In another one of my personal challenges, I gave myself the goal of building this scorecard in under a week.
What did I learn?
With personal projects, the fun is often in the constraints we give ourselves. The first of which was time. I probably could’ve completed the task more quickly than the four days I had given myself. Many things, like scoring, turned out to be easier to do than expected. But Parkinson’s law comes into play: projects fill up all of the time allotted to them.
Progressive
Another constraint I gave myself was making this work progressively. If JavaScript is turned off, the page will continue to work as an equivalent of the paper version as all of the boxes are just HTML and CSS. It’s checkboxes, text fields, and radio buttons. Then you add up your score just as you would if you did it on paper.
If you do have JavaScript turned on, then a click of a button will give you your score.
All in One
Next up was deciding to do this as a single page. That meant embedding the CSS, JavaScript, and any assets—in this case, all SVGs—into the HTML. Not really a big deal but to keep size down, I used SVG <defs> and used them throughout the page. I needed to do inline SVGs so that I could easily change the colour based on what section they’re in.
I relied on simple text and CSS wherever I could, such as using a recycle icon in place of the circular arrows icon from the original game. I ended up with 3 SVGs: the fox, the starburst, and the meeples.
Keeping everything in one page meant saving time and bandwidth not having to make multiple requests. The page is only 5.44kb compressed which leaves most of the overhead in the initial handshake with the server versus actual delivery.
Scoring
I originally thought the scoring was going to be a sizeable part of the project. I projected the number of lines of code to exceed all of the HTML and CSS put together.
As I got into it, though, I noticed some patterns that I hadn’t seen in my cursory glance that allowed me to use a simple loop for a couple sections.
I could’ve cut down the size by a few lines but I would’ve lost clarity. I appreciate the simplicity, even if a couple forEach loops are repeated.
Sloppy
Unlike many of my other personal projects like my blog, this particular project is a one-off. I don’t expect to ever come back to this project to update it. As such, the idea of maintainability went completely out the window.
I think the HTML is reasonably decent—although, I do make some assumptions along the way and I really didn’t take accessibility under consideration. In my defence, the project was for me and not intended for a wider audience, so my apologies to those attempting to use my rather clunky development.
As I was writing the CSS, I’d say to myself, “you should probably name this differently,” but I didn’t listen. Honestly, I was surprised at how few issues I had putting it together. I attribute this to the small size of the project, preventing things from getting out of control.
And then in the final minutes of development, it happened. I needed to add !important. And then another one. And another one. Whoops. Guess I was getting a little too sure of myself.
Oh the things we do to get a job done knowing we’ll never have to deal with it again. (But will curse myself if I ever do.)
Grid
CSS Grid was quite handy. Much of this design was in a grid and it was great to just set up some repeat() declarations and have everything aligned.
Probably the biggest “trick” I used was using grid within a cell to layer all the positional elements within the center and then shifting them as needed.
This part of the game is just a checkbox. Click on it to mark it as “completed”. But the starburst, the badge at the bottom, and the greater-than rule are all relational to that checkbox.
.check {
display: grid;
place-items: center;
}
.check > * {
grid-row: 1;
grid-column: 1;
}
Anything that wasn’t the checkbox also got a pointer-events: none added to it so clicks could still get through to the checkbox.
Then, I’d use a bit of positioning to move things around.
.starburst {
position:relative;
top: -32px;
}
Anything else?
It’s easy to fall into a trap of scope creep. So many features I could add. This scorecard doesn’t stop you from making incorrect inputs. Where something is unlocked elsewhere on the board, it could highlight those moves. Where a move can automatically be made, it could make that move. I could set up the scorecard to be made available offline. I could even create a dice roller. Which leads to my final constraint…
I didn’t want to replicate the game entirely online. If people want to play the game, I hope they buy the game from the publisher and support their work. My project is intended to replicate the scorecard and just the scorecard.