game-of-life-react's Introduction

game-of-life-react

I've decided to attempt making the game of life in react/redux! I've decided to use react and redux mainly as a way to create a potential learning example for others, putting this stack to practical use. This stack includes:

React
Redux
- Duck Pattern
Webpack
- Path resolution
Immuatble JS
BlueprintJS (UI Component Library)
SASS Modules

Run the app

This app contains a yarn.lock file, if you wish you clone this repo and add dependencies, I recommend using yarn over npm. However, if you just wish to checkout the examples in the code, npm will do fine.

First clone the repository
Change directories: cd game-of-life-react
Install Dependencies: yarn or npm install
Start the dev server: yarn start or npm run start
go to http://localhost:8080/ in your browser

Logic

The large bulk of the base logic for solving "the game of life" is container in src/redux/modules/game.js. It should be noted that this repo uses Immutable.js for keeping state immutable (which is the redux way of life). The logic for solving this puzzle was the standard "2d array" solution.

Display

React/Redux are, honestly, a bit overkill for this puzzle. However as previously stated, I wanted to solve it using this stack (or rather import the logic into this stack) as a potential teaching tool for future use.

The display is using the <canvas> element, and thus there isn't much need for react to re-render the grid. However react re-renders the statistics used in the display as well as passes down state to the grid to provide new coordinates for re-drawing the <canvas>. Using <canvas> for this game was great, as it prevents us from rendering a large amount of DOM elements.

Issues

I plan on adding onto this app in the future, and will mark issues in the Issues section of this repo.

game-of-life-react's People

Contributors

Watchers

game-of-life-react's Issues

Setup initial tests

Use karma/jasmine or finally look into using mocha/jest along with enzyme for testing both the action/reducer logic, and shallow testing components. Look into if there's a clean way to test <canvas>

Setup CI

Setup circleCI to test/lint/flow on build.

Investigate Immutable List/Rendering Optimizations

At current, a grid over ~300 performs very slow. I've seen other examples online using <canvas> that perform extremely well with very large numbers of cells.

I think investigations should include:

analyze firecharts and determine hangups
look into potential canvas-react optimizations
scrutinize immutable list transformations

Cell Trailing

Provide a third state to cells, void that represents a dead cell that has never had life. We can then represent void cells with one color and dead cells (those that have died, but have had life at one point) with another color. This should create an effect where you can see the areas where cells have gone, and those areas on the grid that haven't been touched.

Recommend Projects