Nonogram time! These paint by number puzzles, (sometimes picross if you’re Nintendo) show up frequently in puzzle events, and there’s a sea of steam games with these drawings as the main mechanic. And now there’s one more way to play them, embedded in this website:

Nonogram viewer

You can select a local .non file for the site to render - then left click + right click will fill or X a square as you go. Click again to clear.

Where can I find nonogram files?

  • nonogram-db Here on github I found a simple file format with a few related samples.
  • Web Paint-By-Number also has a sea of puzzles and an export function.

A small set of nonograms I set for other events:

  • Must Resemble Blocks 1 2 3 4

Project notes

This project was tangentially combining a few interests.

  • local first apps - this runs on data you have locally, no need to upload or have any backing server at all.
  • React tutorial - the UI has not moved very from from the tic-tac-toe react tutorial. This is my first attempt at a javascript framework and it went ok. I expect I’ll have to double down on understanding the build process to feel very capable.

Learnings

  • CSS is still fun - want to highlight the current row? :hover makes this trivially easy. Want to highlight the current column? You’re on your own. I followed a stackoverflow suggestion for a clipped z-ordered background rectangle.

  • React I’m not confident in. I suspect the solving grid is still re-rending more than strictly necessary, and getting by because the app is so simple.