React Nonogram Component

Introduction

This is a React component to display a Nonogram grid from the solution. Hints are automatically computed, and updated depending on the player moves.

Demo: https://qrcode-nonogram.netlify.app/

Npm package: https://www.npmjs.com/package/react-nonogram-component

Usage

Install

npm install react-nonogram-component

Prerequisites

You need React > 17 in your dependencies.

Example

A simple nonogram grid of 3 rows / 4 columns: https://stackblitz.com/edit/react-ts-zftptv?file=index.tsx

import { NonogramGrid } from "react-nonogram-component"
const solution = [
  true, true, false, true, 
  true, false, true, true,
  false, false, true, false,
];

return <NonogramGrid rows={3} cols={4} solution={solution} /></div>;

A demo project is under the demo/ directory.

Style

CSS can be overriden via CSS variables.

Here are the default values:

--game-grid-color: #444;
--hint-font-family: monospace;
--hint-color: #000;
--hint-crossout-color: #bbb;
--hint-overflow-background: rgba(255, 0, 0, 0.1);
--game-board-background-color: #bbb;
--mouse-highlight-color: #f5e9e9;
--square-filled-background-color: #353235fa; # With transparency to display the mouse highlight
--square-empty-background-color: #fffffffa;
--square-marked-background-color: #fffffffa;
--square-marked-symbol-color: #bbb;
--square-marked-symbol: "\\2738";

Component parameters

rows: Number of rows of the grid

cols: Number of columns of the grid

solution: the solution for the grid (1D array)

type Solution = (boolean | SquareValue.EMPTY | SquareValue.FILLED)[] // 1D array with all square values

init: initial grid displayed to the player (1D array)

type Init = (SquareValue.EMPTY | SquareValue.FILLED | SquareValue.MARKED)[] // 1D array with all square values

onRefresh: Event function: called each time the nonogram is refreshed. It allows the developer to interact with the grid.

function onRefresh(action: NonogramActions): void

export interface NonogramActions {
  canUndo: boolean // true if user can undo its last move, else false
  canRedo: boolean // true if user can redo its last move, else false
  undo: () => void // undo the last move
  redo: () => void // redo the last move
  restart: () => void // restart the game
  setGridHidden: (hidden: boolean) => void // hide the borders of the grid
  nextState: (grid: SquareValue[]) => void // set  the next grid in history (1D array with all square values)
  getProgress: () => number // get the progress of the game in % (value from 0 to 100)
  getCurrentBoard: () => SquareValue[] // get the square values of the displayed board
}

Build the lib

yarn build # one shot build
yarn watch # build when a file is modified (dev mode)

Run the sample

cd sample/
yarn start