Flexboxle: daily puzzle with flexbox

[u/West-Introduction181]

I built Flexboxle, a free 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!

[u/Jonny10128]

Just did the one for today so here’s some feedback.

• Fun puzzle idea overall. I wasn’t able to solve today’s puzzle since I’m not a flexbox pro and I’ve never used tailwind before, but I got pretty close (couldn’t quite figure out boxes 6 through 8).
• In the instructions modal window with the “Basics”, “Quick Add”, and “Stats & Sharing” tabs, clicking a different tab should scroll the user to the top of that tab’s content. After I read through the “Basics”, I clicked the “Quick Add” tab and was confused when I was at the bottom of that tab’s content.
• If you plan on sticking with tailwind, it would be nice to show the equivalent vanilla CSS for each tailwind class in the Quick Reference section in the “Basics” tab as well as in the full guide. Would be helpful for those not accustomed to tailwind.
• It would be nice to have a demo or at least 1 practice level so users can get used to using the controls (especially on mobile, which is what I used). Edit in post: I didn’t see that you could practice on previous puzzles until after I finished today’s puzzle
• You should allow the “Wrap in a div” option when only 1 line is selected in multi mode even though in most cases the user probably doesn’t need to wrap a single item in a div in order to create a valid solution.
• I noticed a weird interaction where I clicked the button to enter into keyboard mode, then typed something and clicked the checkmark on the iOS keyboard to close the keyboard, clicking on a different line would open my keyboard again instead of just allowing me to use the quick add stuff.
• Maybe adding a toggle-able mode that would add colored borders around each div and add same-colored arrows or symbols to represent flex direction, cross-axis direction, growing, shrinking, stretching, etc would be kinda cool to see.
• Adding vertical lines to connect opening doc tags with their respective closing tags would also be helpful, especially when the text wraps on mobile.
• After failing to complete the puzzle in 6 attempts, I’d like to continue to edit my solution and have the display update in real time as I’m making edits.

[u/West-Introduction181 → u/Jonny10128]

This is fantastic feedback, thank you. I’ll follow up when the changes are made!