An Image Puzzle Web Component

I’ll soon have the opportunity to work on production Lit based web components. But I’ve never worked with Lit before, and have only briefly toyed with vanilla web components. So I wanted to create something that would help me ramp up in this domain. But what?

I like to combine goals when possible, and several things I’d like more experience with came together in a brainstorming session:

• CSS Image sprites: Image sprites break a single image into multiple smaller ones. Although traditionally used for efficient loading of icons, it occurred to me that they could also be used to make a puzzle.
• Drag and Drop: I’ve toyed with drag and drop in the past but have never done anything significant with it, and it seems like a neat way to put back together a bunch of puzzle pieces.
• Asynchronous JavaScript: I’ve worked a fair bit with traditional callbacks, but I really need more experience with today’s Promise based approaches. An image loaded for a puzzle will take some time to process, and could potentially not load properly at all, so some asynchronous handling would certainly be necessary.
• Custom JavaScript Events: Since I want this to be a component, users of the component will need a way to know when the state changes. Custom events seem like a nice way to avoid the user having to do polling.
• In Memory Uploads: I thought I could create a demo page and allow the user to use their own images. But I didn’t want to have server side processing either. Could I simulate a traditional client-server experience fully in memory with JavaScript? I wanted to find out!

So I decided on making a Lit component that would make use of CSS sprites to turn an image into a drag and drop puzzle. I had some problems with Safari as the ghost images for drag and drop wouldn’t work. There are some potential workarounds involving manually floating another image with reduced opacity, but that is beyond the scope of what I was looking to do with this project. There are probably some Lit best practices I’m not yet aware of that I’ve violated too. But as purely a learning and ramp up exercise I’m pleased with the outcome.

If you’re interested in seeing the source code I’ve posted it on my GitHub. If you’d like to see a demo of the final result I’ve posted it here.