How it works:
* Your goal is to arrange a set of blocks into a specific pattern using Tailwind CSS Flexbox classes (and ) * 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!
Show HN: Flexboxle – A Daily Puzzle with Flexbox
flexboxle.com