I might have to make this an option, but waiting to hear from more users on this before deciding.
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.
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.
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
I'll need to test Brave to see if I can reproduce. Thanks for the details.
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.
The only complain is that autorotating pieces makes it too easy.
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.
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.
Figured you might want to know.
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!
Others in here are suggesting snap on drop instead of auto snapping, which I’m strongly considering now.
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.
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.
One comes to mind that has multiplayer: https://jigsawpuzzles.io
But good luck, and have fun making the thing :)
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!
- 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.
- 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.
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.
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.
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.
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.
Good point regarding the picture being obscured at the end. I think this especially affects mobile.
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!
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
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!
