A BGG user has recently posted a new solitaire variant for Roads & Boats on BGG that aims to provide a more “full” solo experience than the normal 20-turn puzzles. It consists of two modules:
- A progressive map exploration
- Goals instead of just trying to beat a high score
This page contains a quick and dirty implementation of the second module (based on v3 of the variant) for those like me that don’t own a color printer and/or don’t want to print out and cut out the dozens and dozens of cards. Warning: the code does not persist your current goals! If your browser reloads the page, it will generate a new random set of goals. I might fix that and add options to have more or less goals and/or exclude the et cetera expansion content at a later stage if there is demand for it. For now, enjoy!
Technical Nitty Gritty
For those that are interested, this is a simple static ReactJS app using Tailwind CSS. The cards are stored in an array and when the page is loaded, a random draw is done by picking two cards from the end-game goals and 4 from the mid-game goals. The code is packages using Vite’s single file plugin into a single HTML file and add to this WordPress page via an iframe. It’s simple and quick, but seems to work okay. The only downside is that I couldn’t get the iframe to automatically adjust to the height of the content, hence the large gap above this section when viewed on desktop.
The actual card logic is super simple. Most time was spent getting the lay-outing to work right in various screen sizes, which was a giant pain-in-the-behind. It uses a combination of CSS flex boxes, grids, and media breakpoints.