ConGali Web Frontend

Overview

ConGaLi is an implementation of Conway's Game of Life Conway’s Game of Life is a famous simulation that demonstrates cellular automaton. This frontend it's meant to be used with an instance of https://github.com/miguel-isasmendi/ConGaLi-Backend-WebSocket

Disclaimer!!!!!!

ConGaLi is still in a proof of concept stage, so we don't advice it usage for other reasons than satisfy your own curiosity right now nor we will take any responsibility in any security risk you could be exposed. Nonetheless, we are working to get the architecture ready and deployed for be at alpha stage. For more information on this you can take a look at the roadmap wiki page, and also it will be useful to take a peek at the todo list.

This particular implementation is only the frontend for the WebSocket servers that will allow the game to run on it's initial stage (once the system begun to be distributed it will take a group of services to do that).

It begun as a project that I had to present as a code challenge, but I've decided to include it as part of my portfolio. We will make it scale as much as we can and we hope more people will unite and we will design a really interesting and solid system that we can be proud of.

Basic Rules

This game is modeled as a grid with 4 simple rules:

Any live cell with fewer than two live neighbours dies, as if caused by under-population.
Any live cell with two or three live neighbours lives on to the next generation.
Any live cell with more than three live neighbours dies, as if by overcrowding.
Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

This particular implementation creates a Multiplayer app version of Game of Life, with the following instructions as a foundational stone and premises (which are relevant the fronted):

The game should tick automatically at a predefined interval, at say, 1 step per second.
This server allows multiple clients to share the same, synchronized world view.
Each client is assigned a random color on initialization.
Creating a point on any grid will create a live cell on that grid with the client’s color. This change should be synchronized across all connected clients. (Using any mechanism to achieve this, such as polling, comet or WebSocket).
When a dead cell revives by rule #4 , it will be given a color that is the average of its neighbours (that revive it).

TODO list

There are lots of improvements and goals to take into account to build the overall system, and that data will be addressed on our wiki, of course. If interested on reviewing that, just check our TODO and Roadmap wiki page. We will be moving this information to a unified wiki page on the future, but for the time being these are the TODO items relevant for the frontend:

Extract canvas drawer code onto it's own module.
Implement some kind of users authentication.
Implement some kind of storage for users data.
Implement an acceptable Application Error handling mechanism Across the App.
Implement an acceptable logging mechanism across the App.
Implement test for Components.
Get to a coverage of at least 70%.

To find out more, please check out the Website and the Wiki.

ConGaLi technology 101

The repository structure follows the conceptual architecture of ConGaLi, which consists of loosely-coupled sub-systems connected:

UI Web servers This will serve all the specific implementation for interacting with the aforementioned backend.
WebSocket backend This will serve al the actual services that will execute the game's logic. Although, this will change in a not so distant future.

For more information on the current ConGaLi Architecture, please see the Technical Architecture Overview.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# run with production settings
npm start

# build the server to deploy
npm build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# runs the tests
npm test

# launchs the linter process
npm lint

# deploys the builded application to heroku
npm deploy

Heroku configuration/setup

The considerations wrote in the Heroku configuration Backend's wiki page remain, but with some differences, which I will describe next.

To avoid the a dependecy error upon build process on heroku, I've changed the configuration to abide this guide (the downside of this approach is that you have to build manually prior to deploy the application, and I would like to have a more elegant and secure way to do the build in the server.)

"npm run build"