Nonograms

Controls

Control	Action
Left Click	⬛ / ⬜
Right Click	☒/⬜
Shift + Left Click	❔

 Description

Nonograms! We know them, and we love them. Play randomly generated nonogram puzzles through a simple minimalised UI...

And that's it. A simple web application made with react with big ideas coming ahead, speed run timer, difficulty slider, story mode?! 

Who knows what awaits this simple project, though what I can tell you I'm defiantly not done with it and have exciting ideas await it.

Guide to Nonogram puzzles

Here’s a simple guide to solving Nonograms:

1. Grid & Clues

• Grid has rows and columns.
• Clue numbers show groups of filled squares in each row/column.

2. Clue Meaning

• Numbers = groups of filled squares.
• Example: "3 1" means a group of 3 filled squares, then 1 filled square, with empty squares in between.

3. Start Simple

• If a row/column is mostly full, fill in what’s obvious.
• Example: "10" in a 10-square row means fill all squares.

4. Mark Squares

• Filled squares: Mark with an "X" or color.
• Empty squares: Leave blank or mark with a dot.

5. Use Logic

• Once some squares are filled, use them to help solve other rows/columns.

6. Cross-check

• Check rows and columns as you work.

7. Be Patient

• Keep solving step by step.

That’s it! The picture will emerge as you fill in the grid.

Features

• Interactive grid with clickable cells to reveal or hide parts of the picture.
• User-friendly interface with row and column clues.
• Option to set the size of the board.
• Option to reset the game and start over.

Credits

• React for providing the core functionality of the app.
• FontasomeV4 whom provided the icons used in the game.
• The game mechanics inspired from the well known puzzle genre Nonograms.