0n0FF: A Flipping Puzzle in React

Welcome back to Let’s Reinvent the Wheel.

In this project we build a minimalist logic puzzle called 0n0FF using React and TypeScript. A 4x4 grid game where each move flips a row and column, and the goal is to turn all tiles green with as few moves as possible.

What You’ll Learn

By the end of this project you’ll understand how to:

• Model puzzle logic using a reducer based state machine in React.
• Design a grid based toggle mechanic that affects rows and columns.
• Leverage React Context for clean and reusable global state.
• Style interactive components with CSS for feedback and animations.

Whether you’re learning React, exploring puzzle mechanics, or just love brain teasers, this mini project packs a lot of value in a small footprint.

Project Code

You’ll find the complete source code here: 0n0ff-puzzle

How It Works

This project is written in React + TypeScript, styled with simple CSS Modules, and designed to be a compact and fun codebase to explore UI state management and puzzle logic.

We manage game state with a reducer (useReducer) and isolate logic in a GameContext to keep components clean and focused.

Game Mechanics

• A 4x4 grid of cells.
• Each cell is either green (on) or red (off).
• Clicking a cell toggles the entire row and the entire column
• Goal: Make every cell green.

Game Logic Breakdown

const toggleCell = (grid, row, column) => {
  const newGrid = structuredClone(grid);
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 4; c++) {
      if (r === row || c === column) {
        newGrid[r][c] = !newGrid[r][c];
      }
    }
  }
  return newGrid;
};

Each click affects the full row and column: a mechanic that quickly scrambles your carefully laid plans 😅

Why This Puzzle?

The challenge is subtle:

• It looks easy.
• But the interactions are non trivial.
• Requires planning, prediction, and experimentation.

It’s also a great starter puzzle if you want to learn state management in React beyond useState.

Future Improvements

• Add solver to calculate optimal moves count
• Track win history
• Support larger grid sizes (e.g. 5x5).
• Add sound or haptic feedback.

External Resources

• React: Scaling Up with Reducer and Context
• 2048 game - UI inspiration