Show HN: I built a jigsaw puzzle website | Hacker News Reader

Show HN: I built a jigsaw puzzle website

puzzlepanda.com

124 pointssnake_case73 comments

Hi HN!

I built this website last year for family members who enjoy playing jigsaw puzzles on their computers. I decided to build it because I frequently heard complaints about how slow some of the more popular jigsaw apps are and how they are filled with annoying advertisements.

The site is completely free to use. No advertisements and no selling of user data. However, I do offer a paid tier for users that want more jigsaw puzzles and difficulty options.

On the technical side, I'm using Svelte on the frontend with a tiny bit of wasm, and Rust for a few backend APIs. I hope the site feels snappy, it's one of the main reasons why I decided to build it.

There's a demo puzzle linked on the home page for anyone who doesn't want to sign up! I'd recommend trying it on a computer or tablet as mobile is still a little rough around the edges.

Happy to answer any questions about it!

I just did the demo puzzle on an iPhone (11 Pro running 15.1), and I found it worked surprisingly well for a phone screen, and I didn’t have any problems completing it. Nicely done.

Thanks! Glad to hear it worked well. I really need to add pinch to zoom to improve the experience on all touchscreen devices.

Works great on mobile, no need for the message on the Home Screen in my opinion

It works on Firefox on Android too.

The only complain is that autorotating pieces makes it too easy.

moving the pieces cause them to rotate (to the correct position). Doesn't that make the puzzle super easy if you know how everything is oriented?

Yeah, this is something I'm considering still. I've heard from a few users that they don't like the pieces being rotated at all, and some would rather have click-to-rotate to make it more difficult.

I might have to make this an option, but waiting to hear from more users on this before deciding.

I agree, it takes out a large degree of freedom from the puzzle. I like the double click to rotate idea

More game options is generally not great. Especially if you want to have things like leaderboards. I'd say implement double-click to rotate and have puzzle size be the single dimension of difficulty. And maybe add an even easier option, as the current easy setting still takes a while.

I'm not your target audience, I rarely try puzzles, but I went for the easy demo. With the auto-rotate I even finished it, probably would have quit without.

Perhaps five difficulty levels, have auto-rotate for the first two, and make the final two levels only available to winners of a third/fourth level puzzle.

It feels like the automatic rotation is a middle ground that isn't going to make either groups happy. It's not realistic enough for the folks who want manual rotation, and it's too realistic for people who just want to put the picture together (or are used to traditional digital jigsaw puzzles). So, I think either implementing the option to choose or sticking to one style would be the way to go.

Personally, I'd be happy with either method, but this middle ground hits an uncanny valley, and makes it too difficult to visually recognize which pieces have already been auto-rotated. It'll basically just encourage folks to click on every piece to start with, which is a lot of extra clicking.

Another suggestion: Tabletop Simulator has a Jigsaw Join 2 add-on that is really great for doing puzzles. They allow you to rotate the piece by scrolling the middle mouse wheel while "holding" it.

Scroll wheel only works for people with mice. Two finger rotating only works on mobile. I think something that could work for laptops (or anyone really) is a tap to rotate by 90°. The pieces only have 4 sides, so there's only 4 possible orientations, anyway. Should be a good option for people that want more of a challenge.

I would actually want the opposite, where all the pieces are rotated the right way from the start.

Perhaps this could be a simple button that the users can choose to click instead of a configuration?

Another suggestion: It can be a bit hard to see the shape of pieces with a dark colour, on a black background. Perhaps you could add an outline when you click on the piece to make it clearer? I know we can switch between light and dark background, but the white background on a large screen can be a bit too much

In real life puzzles you can often see the correct orientation from the grain of the paper so it's not completely unrealistic.

As a casual puzzle fan, I never relied on that and knowing the orientation of a piece changes the experience for me; sample size one.

Exact same thing here.

Nice work. One thing though, I completed the demo puzzle and created an account but then under completed puzzles in my account, the list is empty. I wish the puzzle I had just completed when it prompted me to create an account to play more puzzles, would be added to the list of completed puzzles.

Great point! This has been something I've been meaning to do and forgot about. Thanks for the reminder.

I really enjoyed that. Thank you. This is great! I have some suggestions, if you don't mind:

- Biggest feature that I'd like to see is a leaderboard. While it wouldn't be fair to allow me to get on the leaderboard after already seeing a certain puzzle.

- Allow users to upload their own pictures to use as puzzles. But for obvious reasons, don't make these public.

- The auto-rotation, though convenient, kinda took away from the jigsaw puzzle experience. Maybe make it rotate to a random perpendicular orientation on the first touch and allow manual 90° rotations afterward by tapping it. To make these operations mutually exclusive, add a spacial threshold and a temporal threshold such that if neither has been surpassed during an active operation, then handle the operation as a tap on release, and if either is surpassed during an operation, then handle the operation as a drag.

- Add a temporal leaderboard. Only allow times for first attempts. To deter cheating, maybe make it available to logged in users only. Though that's not a perfect solution for determent of cheating, it's at least something. The RNG would need to be seeded for fairness.

- I'm glad to see that you're planning on implementing multiplayer. That'll be exciting!

- Allow bulk movement of unconnected pieces—something like Photoshop's smudge tool. If you're unfamiliar with that, you essentially set the radius of the brush, and press and drag to push anything that intersects the brush circle in the direction that the cursor last moved. Or do something simpler like dragging a rectangle over some region to select all pieces that are contained within the region by some percentage (e.g. 50%) and then dragging the selection to the desired region. The current workaround is to zoom or pan and then move each piece individually to the desired region.

I did the demo puzzle on easy mode, so I apologize if some of this is already a thing.

All great points, thanks for the feedback! :)

The smudge tool radius idea was especially interesting and something I’ll need to think about further. Very curious how it would affect the UX for beginners vs power users. Could be a great improvement for touchscreen devices as well.

Pieces snap together when moving passed each other, even if they aren't both in front. I just had a lot of fun exploiting this by stacking all the pieces on top of each other and then just "printing" the puzzle by moving the connected pieced past the pile.

I’ve heard someone do exactly that before too! Always fun finding ways to break the rules :)

Others in here are suggesting snap on drop instead of auto snapping, which I’m strongly considering now.

i tried this trick, and saw a few interesting bugs. obviously this whole trick is an edge case, but i had some visual doubling of my large piece after certain clicks, and also i had an event happen where i heard the click sound stacked up 100 times then the app became unresponsive

Ha, yikes! I’ll have to try reproducing that, since that sounds like a bug that could happen even under normal circumstances.

The website looks nice and all, but I see you want to charge a $5/mo subscription for access to 200 puzzles (initially). Considering that there are websites like https://www.puzzlefactory.com or https://www.jigsawplanet.com that are free and have literally hundreds of thousands of jigsaw puzzles available I wonder what do you consider to be your added value in order to justify the subscription. Could you share some of your thoughts behind that?

That bring me a memory of building something very similar to this at work. So back in time I worked on an online game server framework and we needed some sort of technical demo, and it occurred to me that a multiplayer jigsaw puzzle would work. I quickly prototyped an JavaScript client and that eventually became a fully-blown online social game, but the project was shelved because we had other things to work on. A glimpse of that client can be seen in my website [1]. (The prototype was built in my spare time so I could release this in public. It was a mistake to build this on SVG, by the way.)

[1] https://s.mearie.org/jigsaw/

I clicked on the site just to check it out and ended up spending 15 minutes on your demo puzzle... well played.

Awesome job on all the user interactions. The dragging controls are pretty intuitive, it always did what I expected, and it's very smooth/seamless. The little touches like the autorotation are very helpful. I can imagine that having really great interactions differentiates this from many other similar sites so good job there.

Thank you! I’m aiming to provide a more polished and user-friendly experience than the alternatives out there, and I have many plans to differentiate ever further. Glad you had a good time playing.

Hi, firstly great job on the app - really nice. I tried to do the demo puzzle on my touchscreen laptop, but while the dragging worked very nicely, I wasn't sure how to actually rotate the pieces myself (seemed to happen randomly when tapping the piece), would be nice to have a clearer way to interact, e.g. double tap to rotate 90 degrees.

They seem to rotate to the correct position automatically

Thanks, glad you enjoyed it! As another reply mentioned, single click/tap on a piece auto rotates it to the correct orientation.

Many have pointed out the auto rotation is either too easy or annoying, so I am considering alternatives. I originally started with single click to rotate 90deg but was told by early users it was too hard. Reconsidering ways to introduce this that is friendly to all users.

This was cool but it's kind of cheating auto rotating the pieces to the correct orientation. Good work though. I never thought of doing a puzzle on a device but I guess sometimes I am listening to a podcast and just want to keep my hands active so that I can concentrate on the podcast.

Cool concept! Few ideas:

1. when you hover over puzzles, they could shuffle/rotate a bit, so that there's no easy option to just click puzzles and rotate them appropriately upfront

2. an option to select a group of puzzles and move them, just as you categorize and group puzzles in real life

I'm in the demo and trying to click and drag pieces and all it does is pan the screen. I'm using Chrome on Windows 10 if it helps. Also, I noticed that maybe 10% of pieces actually do let you move them around, but the other 90% only pan the screen.

Thanks for the report, that is very odd. It sounds like the mouse position might be offset. I haven't ran into this yet when testing Chrome on Windows 10, but I'll take another look. Sorry about that!

Same experience on iPad Safari here.

Sorry to hear that! I have an up-to-date iPad Air 2 and I've tested playing in Safari quite a bit. The touch accuracy is a little annoying and dragging the background unintentionally occasionally happens. I think I can improve this by increasing the touch area around pieces to be a bit more forgiving. Thank you for reporting.

Same on Brave Linux. EDIT: If I disable ad blocking, the sentry errors disappear and I am able to drag pieces. Maybe wrap the sentry code in something to account for ad-blockers.

Interesting, that's very odd. My ad blocker also blocks sentry, yet I can still drag pieces fine.

I'll need to test Brave to see if I can reproduce. Thanks for the details.

Possibly just for me, but joining pieces doesn't exactly feel right. Specifically the distance required for snap feels random. Also minor annoyance: it seems that you can't join more than two pieces at once.

Yeah, I think I need to tweak the snap distance a bit further. Sometimes pieces snap together unintentionally while dragging across the canvas, which surprises users.

Would you be able to clarify the second point? You can drag groups of pieces to connect to other groups. But I have a feeling you're talking about something slightly different.

Imagine that pieces A and C are positioned so that there is an exact amount of spacing for missing pieces B. Moving B between A and C however only joins with A or C, not both. This often happens around edges.

Came here to comment about this specifically. Being a little more generous on the drop zone would be nice. I could see the dragging around and pieces snapping in would be an odd behavior. Can you limit the "snap" test until a piece drop type of something to make it more of a concious effort than magic?

Another thing I missed was being able drag select multiple pieces to move them around the workspace. The large zoomability to increasing work area was nice.

Yeah, good point regarding snapping on drop which would allow making the drop zone a little larger.

Drag selecting multiple pieces is interesting. If I add that, I think I would need a modifier key like shift or cmd/ctrl to differentiate between this and a background drag.

Yours is the first one I ever saw that allowed for that kind of movement of the workspace, and I really liked it. I would be willing to use a modifier key to allow for both drag-select and panning of workspace. But I'm just some random on the interweb.

Congrats! I just completed the easy demo on an iPhone SE and it worked great. No issue at all with selecting and positioning the pieces. Great work!

The UX is not good only because of the screen size. Either you see too few of the pieces or the pieces are too small. But I think there is no software solution to that, just a matter of being a game better suited for larger screens.

Thanks! Yeah, it's been hard to decide what to do about mobile. The experience is not great with the high piece counts. I might consider offering puzzles with smaller piece counts if they are started on a mobile device, vs desktop. But this may affect my plans for adding (optional) leaderboards and making things a little more competitive.

I thought the UI was brilliant and enjoyed the example a lot (Android phone).

Having to tap the pieces to orient them correctly became a task to do before I started. But I wouldn't have wanted to try to do that myself either on a phone.

Sad that the picture was obscured at the end. I wanted to admire my work.

Glad you enjoyed it. Orienting the pieces up front does annoy others as well, so I'm considering options to make this a bit more friendly.

Good point regarding the picture being obscured at the end. I think this especially affects mobile.

Cool project! The site is pretty laggy on firefox. My resolution is 1440p and making the game fullscreen causes a noticable framerate drop. I don't notice the issue on Chromium.

Figured you might want to know.

Thanks for the report! Firefox was the browser I used during development and also needed the most work regarding performance. The image quality is heavily tied to rendering performance, so I’ll need to consider ways to improve this further.

I solved a hard puzzle on chromium and noticed a lag when picking pieces up but dragging them around was smooth.

Another tip is to make scrolling or some keyboard buttons rotate the pieces, snapping to 90° angles would be a good start. Making the pieces only snap when placed down instead of just when they are close to a compatible piece might also be good.

These things could be togglable or vary between the difficulty modes.

In any case, cool project and good luck with it!

Came here to say this also. Linux, 1200p, Firefox 94, amdgpu/radeonsi, webrender is enabled. It's laggy enough when moving pieces that I thought the page had locked up; a FF process jumps to 100% cpu usage and my cpu fan spins up any time I try to manipulate a piece.

There's something very satisfying when a piece clicks in place :)

Really slick demo, lots of fun. +1 to adding a leaderboard and then segregating by first attempts and multiple attempts. 1v1 could also be quite fun.

Thanks for the feedback! Looking forward to adding leaderboards.. still brainstorming the best way to introduce them.

Mhm... my suggestions:

A) Let the user find out the correct orientation.

B1) Make the snapping happen only on click/touch release.

B2) Make the snapping happen over a longer distance.

Yeah, only snapping on release would prevent random snaps when dragging, which happened to me a couple of times.

Good suggestions! I’m not sure why I hadn’t thought of that, but snapping on drop does sound like a better experience.

I would be surprised if anyone gives you money. There are many other free puzzle websites that exist that have those same features and are free.

One comes to mind that has multiplayer: https://jigsawpuzzles.io

But good luck, and have fun making the thing :)

You would be surprised then :)

Looking forward to adding multiplayer soon! I actually added websocket support last week and I'm currently running a test in the background to see how many I can handle concurrently.

Other than that, I have many ideas to make the paid plan more valuable too!

Based on my experience [1], you would definitely run into a situation where users would inadvertently hinder others and that feels really annoying. We have tried to solve this issue by introducing two major concepts:

- The corner slots that would fixate the final image. This also makes easier to move crowded pieces around. Note that edge pieces are not constrained (unlike, say, jigsawpuzzles.io mentioned above) because that would make guesswork easier.

- Any cursor can pick and hold a group of pieces only for a certain amount of time. The timer was designed so that doesn't reset and instead runs backwards when you are not holding pieces, and you can't pick new pieces when the timer hasn't passed some threshold.

Also synchronizing all the things would be very interesting if you haven't done that so far :-) We specifically used a combination of lag compensation and opportunistic state merger, but there are a lot of other valid strategies you can try.

[1] https://news.ycombinator.com/item?id=29218867

Good points! With my websocket test I'm currently experimenting with syncing micro actions rather than syncing the full puzzle state every time a user makes a move. For lag compensation I'm likely just going to lerp the mouse/piece position movements to make them appear smooth, but I'll see how well that works out.

Great site! Love the idea. I would love to see the ability to alter the background color. I may also suggest you never default the background to pure black.

https://gomakethings.com/design-tip-never-use-black/

You will now notice this on most websites you visit.

You may also consider adding more sound effects and/or royalty free light background music that can be toggled on/off.

Good luck!

click sounds great. winning screen should hide that big annoying banner and just let me enjoy my masterpiece instead

Pieces are missing! I scrolled around everywhere and couldn’t find them. Yes I differentiated between scrolling the canvas versus the pieces versus the completed portion. If this is how the demo works, it’s kind of off putting since it punishes you for just trying it out. Even if I was interested I would not sign up for a site that does this. At least there should be a warning up front before you waste time on the demo: “You will not be able to fully complete the demo puzzles.”

There was no missing pieces for me. Are you sure you weren't like me and your missing piece was under the board?

Pretty sure yes.

There shouldn’t be any missing pieces and the puzzle engine has been tested thoroughly, so this is surprising to hear. Unfortunately I can’t investigate since demo puzzles are not persisted. Sorry about this! My theory is that it got lost far off screen and I need to prevent that from happening.

As I tried pretty hard to make very clear, I scrolled around a lot, both the canvas and the assembled pieces, to rule out this possibility.

BTW, only tangentially related, I also tried pinch to zoom early on while solving (no joy) and I think it would be a nice feature.

Worked great on mobile.

Great work!

Reply on news.ycombinator.com