Show HN: Jigsaw Haiku

Posted by windowshopping 4 days ago

Hi HN! Jigsaw Haiku was originally designed with my puzzles site The Daily Baffle (https://dailybaffle.com) in mind. But once I had built it, I realized it just didn't quite fit with the aesthetic of the Baffle's other puzzles, so I decided to put it up separately.

While most of the puzzles on the Daily Baffle were intended to be rather challenging, for this one I really just wanted to make something somewhat beautiful and relaxing. It wasn't so much about coming up with a highly original idea or a difficult challenge as much as just combining a few familiar ideas in a pleasant way.

It was coded entirely by Claude, with me carefully prodding it on to achieve the look I wanted. I had hand-coded everything on the Daily Baffle, but those days are past now. I was pretty thrilled with the "window through the fog" effect that CC was able to achieve from my written design spec. I wasn't sure if that would come out right, but it did. It's just a static react app hosted on Render, no backend. The haikus are handwritten with the help of a massive list of generated nature concepts alongside possible metaphor angles. The art is generated by Gemini and ChatGPT. I wish it was hand-painted, but that would be prohibitively expensive and time-consuming and then this puzzle would likely not exist.

Happy to answer any questions, and encourage anyone to check out the Baffle if they like harder puzzles!

Comments

Comment by pimlottc 1 day ago

The borders on the pieces obscure the edge details that you need to help match the pieces up. Often there were pieces with letters that looked like they were needed another piece to complete them but actually they were whole but the border covered the edges.

It would also be nice if I could position pieces freely outside of the board so I could test out potential matches.

In the end, it became easier to just keep trying to place pieces on the board until they stuck together automatically.

Comment by shermantanktop 1 day ago

I was baffled by this because the rightmost square didn’t seem to have any pieces where the letter would fit vertically — the unplaced pieces had a border which made it impossible to see which might.

Comment by windowshopping 1 day ago

You're totally right about the edges, I just fixed it so that the letters overlap the tile edges, which should help a lot with that issue. Thanks for the feedback! It's a little less clean-looking, I think, but it's worth it for the practical benefit. If anyone has an idea for a better solution, I'd be interested to hear it.

I'll take a look at free positioning pieces outside the board too, but I just want to give that a little more thought.

Comment by reneherse 1 day ago

One small improvement IMO would be to display the pieces at the same scale as the board. It's more difficult to visualize potential positions while the pieces are at a smaller scale than the gaps they could potentially occupy.

BTW- This was really fun to solve! (And I rarely play games or solve puzzles.) Thanks for sharing it!

Comment by deckar01 1 day ago

That would make it very easy and less about the words. They gave you a whole day to finish it for a reason.

Comment by anigbrowl 1 day ago

The end state is aesthetically pleasing. The game, not so much, I found the cuts on the tiles unpleasant to deal with (especially the ones that shaved ~2 points of ~20 point text) although I solved it in the end. I did like that once you had connected two or more pieces correctly they stayed connected, but I think it would be better to mix the jigsaw aspect with individual monospace font letters and make it into more of a word game than one about trying to match font ligatures.

Comment by windowshopping 1 day ago

I fixed the text shaving. Thanks for the feedback!

I actually initially envisioned this the way you described with monospaced font and one-letter-per-square, but I found that it wasn't possible because the puzzle became prohibitively wide to such a disproportionate extent that it A. couldn't fit on a mobile screen, B. looked very odd, C. involved so many pieces that the challenge was elevated to a tedious level.

Comment by blobdole 1 day ago

That was a lot of fun!

It would be cool if I could kind of place things "wherever I want" because sometimes I want to test if this fits here or not, and the easiest way is to place the piece there and drop it. Because the borders are less distracting/smaller after dropping it. But if I do that in a place that is not valid, it snaps back to the original position.

I once had to drag two completed chunks sequentially to one side of the puzzle area before I could test a piece I was looking at and discover it was wrong.

Comment by matthew_payne 4 hours ago

Somewhat challenging and lots of fun. Great job

Comment by albert_e 1 day ago

When you place any piece on the board in any position, you can drag that piece all over the board to "reveal" the painting behind it whenver you move your piece.

Is that intentional or a sneak peek?

Comment by windowshopping 1 day ago

That is intentional. The painting isn't a secret, but seeing it all at once with its completed poem is the goal.

Comment by buyTheDip 1 day ago

Very nice. Challenging and fun. I was able to drop the pieces anywhere to test alignment. When I then moved them around got them next to the right neighbor, they glommed onto each other. No changed needed to have fun!

Comment by sssilver 1 day ago

Playing this on an iPhone 15 Pro, I was wondering — did the frame rate of dragging have to be so painfully low?

Comment by sssilver 1 day ago

Testing this on a Macbook Pro M4 Max, dragging is still so choppy that it makes the game significantly less fun.

Comment by windowshopping 1 day ago

Which browser are you playing in? For me I find it works smoothly in everything except firefox mobile, and I'm just on an M4 Air, so you've got way more compute.

Comment by sssilver 1 day ago

Latest Safari

Comment by windowshopping 20 hours ago

This should be fixed now.

Comment by sssilver 3 hours ago

Thanks -- much better now!

Comment by JKCalhoun 1 day ago

Would be interesting to see if it was logging hard to the Web Inspector console.

Comment by windowshopping 1 day ago

Which browser are you playing in? For me I find it works smoothly in everything except firefox mobile.

Comment by hamza_ali_shah 20 hours ago

Loved it. Adding a hint what the haiku is about might help. At the end credit who wrote the haiku too?

Comment by riddley 1 day ago

I found this very challenging. Thanks for making it.

Comment by inatreecrown2 1 day ago

I found it quite difficult to find fitting pieces, maybe add an option to also show the painted background?

Comment by dvt 1 day ago

Very fun and great "tactile" experience. Fantastic job!

Comment by phyzix5761 1 day ago

I loved it. Looking forward to playing again tomorrow.

Comment by alanbernstein 1 day ago

Neat. Doesn't work well in android Firefox for me.

Comment by windowshopping 1 day ago

Yeah I haven't been able to get it to perform smoothly in mobile firefox. It works well in mobile chrome or any desktop browser but mobile firefox specifically has been an issue I haven't had much luck resolving yet. Sorry about that! I use mobile FF too so I'd love to figure out the cause.

Comment by mid1221213 1 day ago

Nice, fun and poetic! GG I <3 it!

Comment by roshanabdullah1 16 hours ago

it was fun to play! I love how smooth the animations are when placing jigsaw block.