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. New features from Redis or ValKey are not needed.
• Client side makes use of Web Components, htmx, IndexedDB, and lit-html.
• HTML canvas, and SVG for puzzle pieces interaction and rendering; based on the example from piecemaker.
• 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 and Design

I opted to keep most of the website page text as actual paper pages that were done with a typewriter or hand-written. The goal was to create something unique and memorable. I took great care to maintain accessibility for users as well as using native browser elements like the dialog element. The different widgets in the user interface use icons from Phosphor since those were freely available and consistent. While strictly using actual a4 to a6 sized paper does mean that it breaks any automatic text flow; I worked around this by replacing the image of the scanned in paper with the OCR text when the width of the browser window was less than the paper size.

The website supports the preference for dark or light mode and allows the user to control that setting within the website via a toggle in the footer. The scanned in paper pages are automatically converted by ImageMagick to a light and dark version.

Summary and Takeaways

• Puzzle Massive is a project that seems to have a never ending feature list that I want to implement.
• I initially rendered the jigsaw puzzle pieces with three.js, but later switched to using standard HTML and SVG elements. This allowed easier development and implementing features that got a little tricky when working with three.js. Another benefit of not constantly drawing to the HTML canvas with three.js makes the site require less browser resources.
• 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 still drives innovation with piecemaker and I maintain it as an open source project.
• I'm more aware of the browser limits when 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.

---