Puzzle Massive

Online jigsaw puzzles with uniquely shaped pieces.

• Website

With version 3 of Puzzle Massive I took a more iterative approach with building the application from the ground up. I first focused on the core features and isolated these into their own domains. Each of these can be developed on their own and I found this beneficial even though I was the only one working on this project. It allowed me to only focus on that one piece and get it functioning on its own. Once I had all the major pieces working it slowly started to come together much like assembling a real jigsaw puzzle.

I know there is a lot of other online jigsaw puzzle websites out there and so my focus is not necessarily to gain a bunch of players, but to have fun building something that is also satisfying to play.

Website that links to the in development version of Puzzle Massive: https://massive.xyz/puzzle/. More in-depth technical overview is on that page.

Goals

• Handle thousands of players moving thousands of pieces.
• Local-first; support offline capabilities and let users own their data.
• A fun project to hack on.
• A sustainable and cost-effective project.
• Learn something new and apply it.

Technology Stack

• Python for most server side applications.
• Web frameworks LiteStar and Chill.
• Database is SQLite for persistent storage.
• redict for active data.
• Client side makes use of Web Components, htmx, and lit-html from Lit.
• HTML canvas, and SVG for puzzle pieces interaction and rendering; based on the example from piecemaker, but uses three.js.
• NGINX as the web proxy server.
• Chillbox for keeping things cool.
• IndexedDB allows storing data in the web browser which is needed for offline support.
• Plain Javascript works quite well for this.
• A lot of other stuff... See https://massive.xyz/puzzle/ for more.

Media

The paper and stamps design for Puzzle Massive is done by myself with the goal of creating something unique and memorable. I took great care to maintain accessibility for users as well as using native browser elements like the dialog element. It was also refreshing to build something directly with my hands when I carved out each stamp used for the various icons; even when those icons were printed on paper from Phosphor so I could then transfer to the rubber stamp. Using an actual razor blade on cutting the pieces of paper gave a non-digital feel to the site that I happen to like.

Summary and Takeaways

• Puzzle Massive is a project that seems to have a never ending feature list that I want to implement.
• The HTML canvas element is very cool, but I'll continue using three.js when using it for any advanced things.
• I'm glad that I took piecemaker out of my old Puzzle Massive code and made it into a more generic Python application other people can benefit from. Puzzle Massive of course still drives innovation with piecemaker and I am still the only one developing it.
• I'm more aware of the browser limits when it comes to image size and trying to render puzzles with 40,000 pieces.
• Is an online puzzle with 40,000 pieces realistically doable? Maybe if there were lots of players all working together on it. That's the goal.

---