Lit Image Puzzle Component Demo
By Derek Moran 2023
This is a demo of a Lit component which turns images into drag and drop puzzles.
Please use the above options menu to select an image.
Drag one piece over another to swap them.
Continue until you solve the puzzle.
Note that this is only a proof of concept and uses simple rectangular pieces.
You'll be given a border to help you find the edges, but you'll still need to use an
image with suffient detail to distinguish inner pieces.
If it is hard to see the border on your image you can select new colours from the options menu.
Developed and tested for Chrome 114+, but also seems to work well in Firefox 114+ and Edge 114+.
In Safari 16.5+ the experience is degraded as there are no drag/drop ghost images, but it does seem to work otherwise.
Experienced best on non-mobile devices, but did seem to work ok on a Galaxy S22, so YMMV.