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 {
    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.

The scorecard.

Published July 25, 2020
Categorized as Other
Short URL: