[HN Gopher] Show HN: I built a jigsaw puzzle website
___________________________________________________________________
Show HN: I built a jigsaw puzzle website
Author : snake_case
Score : 79 points
Date : 2021-11-14 16:51 UTC (6 hours ago)
(HTM) web link (puzzlepanda.com)
(TXT) w3m dump (puzzlepanda.com)
| nitrix wrote:
| 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.
| lifthrasiir wrote:
| 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/
| soneca wrote:
| 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.
| snake_case wrote:
| 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.
| lifthrasiir wrote:
| 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.
| snake_case wrote:
| 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.
| dylan604 wrote:
| 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.
| lifthrasiir wrote:
| 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.
| gurchik wrote:
| 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.
| fareesh wrote:
| 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.
| snake_case wrote:
| 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.
| snake_case wrote:
| 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!
| jonsen wrote:
| Same experience on iPad Safari here.
| snake_case wrote:
| 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.
| michalbugno wrote:
| 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
| codetrotter wrote:
| 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.
| snake_case wrote:
| Great point! This has been something I've been meaning to do
| and forgot about. Thanks for the reminder.
| kuroguro wrote:
| There's something very satisfying when a piece clicks in place :)
| snake_case wrote:
| 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!
| beardyw wrote:
| 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.
| snake_case wrote:
| 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.
| TheDudeMan wrote:
| Great work!
| krrrh wrote:
| 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.
| snake_case wrote:
| Thanks! Glad to hear it worked well. I really need to add pinch
| to zoom to improve the experience on all touchscreen devices.
| jonwinstanley wrote:
| Works great on mobile, no need for the message on the Home
| Screen in my opinion
| mkoryak wrote:
| 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 :)
| snake_case wrote:
| 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!
| lifthrasiir wrote:
| 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
| snake_case wrote:
| 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.
| itake wrote:
| 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?
| dskloet wrote:
| In real life puzzles you can often see the correct orientation
| from the grain of the paper so it's not completely unrealistic.
| thih9 wrote:
| 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.
| nathell wrote:
| Exact same thing here.
| snake_case wrote:
| 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.
| saboot wrote:
| I agree, it takes out a large degree of freedom from the
| puzzle. I like the double click to rotate idea
| TheDudeMan wrote:
| 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.
| B1FF_PSUVM wrote:
| 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.
| tylercrompton wrote:
| 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
| 90deg 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.
| Hugsun wrote:
| 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.
| chrisdalke wrote:
| 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.
| wfme wrote:
| 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.
| globalise83 wrote:
| 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.
| jonwinstanley wrote:
| They seem to rotate to the correct position automatically
| natch wrote:
| 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."
___________________________________________________________________
(page generated 2021-11-14 23:00 UTC)