I didn't have much success with the domino checker I transpiled from last month for a new AND gate Alex made, so I built another one. The main thing I wanted to address was the all-or-nothing aspect of the old checker.
Instead of an exhaustive checker, I wanted something that someone could work with, moving through different board states, or optionally jumping to a point in the tree.
I had a small UI project going for cgtjs, so I extended that. It's thrown together, mostly vibe-coded, and a bit rough around the edges but I think basically useful.
Check it out here: blokus-editor.
Here's a quick rundown of the UX choices I made:
Real-time updates
You can "paint" a board with either "blocks", squares where the player can't place dominos, or horizontal/vertical dominos.
NOTE: it's special-cased to dominos at the moment, since that's what I was working on, but it could easily be extended to include more polyominos, or even custom ones!
As the user paints, the moves from that board state update in real time. This is also a massive performance problem, but hey, it's just a first pass. I think I may try doing the board calculations asynchronously in a worker, and stream them back in the future. Pagination would be fantastic as well, but I'd have to modify cgtjs to do that.
Import / Export
In order to easily share findings, I wanted to make importing and exporting as easy as possible. There are two methods: URLs, for example here's a demo board. They encode base 64 JSON of the board state. Then there's image import/export, which I decided on since we've been using piskel up to this point to draw boards.
Searching the Tree
I'd like to include more utilities for searching down the game tree, but for now there are three methods:
- Every direct child board state links to itself. This allows you to click on a child board to see its children.
- The user can choose to see only "leaf" nodes, meaning descendant board states with no children of themselves. This lets you see what happens if all the peices are placed.
- "Cover Count" allows the user to specify how many squares should be covered by a polyomino. Since we've been developing circuit SAT gates which require a specific count each, this can be helpful for checking their correctness.
And that's pretty much it, I'm excited to play around more with the application. In particular, I'm looking forward to solving the performance problem.