Build a Sudoku Game and Learn State Management in React

Game Rules

The Game

Game generation

Represent the Puzzle in 2D Array

with each cell’s object contains its current value as well as its notes.

The Overall Game State

  • determine the game’s progress: know whether the game is completed and how many numbers are left for each group of peers, cells belonging to the same column, row or square.
  • track possible conflicts within each peer group: know the number of times a number is used per peer group(a complete group is one with each number used exactly once)

The Cell Component

Computing the Cell Component’s Inputs

component methods for getting selected cell and setting the selected coordinates

The Number Control Component

The NumberControl component needs:

  • a callback that would update the selected cell’s value on user clicks
  • a computed value of the number’s progress
  1. Per column, row and square groups, get the number of groups already have the number filled
  2. Take the minimum of the three values as the progress for the number

The Tool Components

initialize the game state with a history array and historyOffset
For erase and hint, I created erasedSelected and filledSelectedWithSolution respecitively

Wrapping Things Up

Related Materials

--

--

--

Chasing great designs, delightful user experiences and happy developer experiences. Find me at https://www.sitianliu.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Nobody Is Working for 8 Hours a Day, Why?

Integrate Facebook Pixel and Fb Pixel Events in GatsbyJs

React Hooks: Memoization

Methods and Miscellaneous Pt. 2

Create a simple 3D Force Graph for Nextjs or CRA

Deploying React App to Github Pages.

ES6— Week 2

Implementation of createContext using custom hooks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sitian Liu

Sitian Liu

Chasing great designs, delightful user experiences and happy developer experiences. Find me at https://www.sitianliu.com/

More from Medium

React Life Cycle Hooks

What is a controlled component and why we use it in React

When learning about react, how useful is it to know about react hooks and components?

Handling Stale Closures and Accessing Latest State in React’s UseEffect.