Show HN: Flexboxle – A Daily Puzzle with Flexbox

5 points by wluer a month ago · 1 comment · 1 min read

I built Flexboxle, a daily puzzle game where you use Flexbox to rearrange blocks to match a target goal state.

How it works:

* Your goal is to arrange a set of blocks into a specific pattern using Tailwind CSS Flexbox classes (and <divs>) * After every submission, every block is graded as perfect (green), close (yellow), or wrong (gray) * You have 6 attempts per puzzle * The game checks block positions, not your specific CSS so there can be multiple solutions that work * There is a new puzzle every day so come back tomorrow for a new challenge

The trickiest part of building this game was making it playable on mobile. Highlighting sections, navigating in an editor, and adding in common HTML characters like <, >, /, and = are easy on desktop but pretty annoying to do on mobile. I eventually settled on a quick add panel with all of the controls you need so you can easily apply classes, group elements together in a div, and see all of the supported classes.

Let me know if you have any feedback! Enjoy!