Show HN: Jigsaw Haiku | Hacker News Reader

Show HN: Jigsaw Haiku

jigsawhaiku.com

118 pointswindowshopping34 comments

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!

Open articleView on HN

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.

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.

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

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.

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!

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.

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.

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.

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!

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

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

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.

Latest Safari

This should be fixed now.

Thanks -- much better now!

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

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

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?

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

I found this very challenging. Thanks for making it.

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

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

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

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

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.

This should be fixed now.

Thanks!

Another suggestion: more feedback when two pieces click together - I'm currently dragging it around to check if they're connected. For example, they could lose the outline that separates them, or change outline color to be the same.

I loved it. Looking forward to playing again tomorrow.

Somewhat challenging and lots of fun. Great job

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

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

That was fun, thanks!

Very nice! Thanks!

it was funny tho

Reply on news.ycombinator.com