Game of Life with React, Hooks and Chakra-UI

Game of life game is a simple cellular automaton invented by the British mathematician John Horton Conway in 1970. Jonathan Horton Conway was a British mathematician, logician, cryptanalyst, and theoretical biologist. He was the first to introduce the concept of a finite state machine to a formal language. According to wikipedia, the rules of the game are:

1. Any live cell with fewer than two live neighbours dies, as if by underpopulation.
2. Any live cell with two or three live neighbours lives on to the next generation.
3. Any live cell with more than three live neighbours dies, as if by overpopulation.
4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

These rules, which compare the behavior of the automaton to real life, can be condensed into the following:

1. Any live cell with two or three live neighbours survives.
2. Any dead cell with three live neighbours becomes a live cell.
3. All other live cells die in the next generation. Similarly, all other dead cells stay dead.

Building Game of life with React#

I'm not going to explain here how to start React project and other basics. Instead, I will summarize the steps I've taken to build this project.

useGame hook that consists the following building blocks:

const { 
  grid, 
  steps, 
  initialize, 
  isRunning, 
  setIsRunning, 
  randomize, 
  handleCell, 
  handleNext 
} = useGame() 

Check the entire code here:
https://github.com/creotip/game-of-life-react/blob/master/src/hooks/useGame.tsx

• grid
  • 2D array that represents the current state of the game.
  • Each cell is either dead or alive.
• steps
  • Number of steps that have been taken.
• initialize
  • This function initializes the game.
  • Resets the game to the initial state.
• isRunning
  • Boolean that represents whether the game is running or not.
• setIsRunning
  • This function sets the state of the game.
  • It can be used to start or stop the game.
• randomize
  • This function randomizes the cells of the game.
• handleCell
  • This function handles the click event on the cell.
  • It can be used to toggle the state of the cell.
• handleNext
  • It can be used to advance the game by one step.

Building cells with css grid#

CSS grid is a layout system that allows you to create a grid of cells. In our case, it's perfect for building a game of life layout. Chakra-UI makes it even easier with their styled-system implementation.

<SimpleGrid
  data-testid="grid-wrapper"
  gridTemplateColumns={`repeat(${COLUMNS}, 20px)`}
  gridGap="2px"
  mb="4rem"
>
  {grid &&
    Object.keys(grid).map((column, index) => (
      <SimpleGrid key={index} className="column" data-testid="column" gridGap="2px">
        {grid[column].map((cell: boolean, rowIndex: number) => (
          <Box
            onClick={() => handleCell(+column, rowIndex, cell)}
            key={rowIndex}
            data-testid="cell"
            width="20px"
            height="20px"
            backgroundColor={cell ? 'black' : 'gray.300'}
            cursor="pointer"
          />
        ))}
      </SimpleGrid>
    ))}
</SimpleGrid>

Basically, That's it. We've created a hook that exposes states and methods to build the game. A CSS grid that represent the UI of the game. The entire source code is available on https://github.com/creotip/game-of-life-react

Demo:
https://game-of-life-app.netlify.app/