Connect4

App is no longer hosted at http://ec2-52-40-222-76.us-west-2.compute.amazonaws.com/

Features

Spectate

http://ec2-52-40-222-76.us-west-2.compute.amazonaws.com/spectate/{ROOM_ID} where {ROOM_ID} is an existing room to spectate.

Play

• User navigates to http://ec2-52-40-222-76.us-west-2.compute.amazonaws.com.
• User waits for another user to connect on play URL.
• If a player disconnects, the other player and the spectators are notified and the room is closed.
• If a player wins or the game draws, the other player and spectators are notified and the room is closed.
• Users are tracked by Session IDs, so two tabs == two users.
• Game is stored on room in server to prevent client manipulation.
• First turn is randomly selected and players are referred to as 1 or 2 depending on join order.

Storage

• Games are stored in a RDS PostgreSQL instance.
• Connect4Game model stores the following:

Schema:

Field	Type	Info
id	string
board	array(int)	Flattened array representation of board. Use width and height to recover shape.
player_1	string	Player 1 Session ID
player_2	string	Player 2 Session ID
width	int	Board width
height	int	Board height
winner	int	1 or 2 indicating Player 1 or 2.
draw	boolean	True or False, indicating if game ended in draw.
createdAt	date
updatedAt	date

• Game is only stored if at least 1 player joined the room.

Improvements if I were to spend more time on it

• Make interface responsive/fix mobile experience.
• Unit tests.
• Configure SSL using Let's Encrypt.
• Overall better UI (ex: more clear display of server updates).
• Add chat (it would be fairly simple with the existing server capabilities).
• Refactor both Node & React app structures to be more scalable.
• Possibly host static files in an S3 bucket.
• Refactor Connect4 & InfoPanel components.
• Check that some values aren't being synced. I have not used Colyseus before so I would like to do more testing to ensure that clients cannot manipulate game state.
• Set up babel & env configurations on server.

Local installation

git clone https://github.com/MazinZ/Connect4.git

from the backend directory:

$ npm install
$ npm install -g sequelize-cli
$ brew install postgres
$ pg_ctl -D /usr/local/var/postgres start
$ sequelize db:create tru_task
$ sequelize db:migrate
$ npm run start:dev

If there are any issues, you may need to upgrade your node version.

from the frontend directory:

$ npm install
$ npm start

NGINX config

map $http_upgrade $type {
default "web";
websocket "ws";
}
server {
listen 80;
server_name *.amazonaws.com;
index index.html;
root /home/mazin/Connect4/frontend/build;
location / {
try_files /nonexistent @$type;
}
location @ws {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location @web {
try_files $uri /index.html =404;
}
}

Screenshots

One Player joined

Both players

A Player disconnected



Game ended in a draw

DB entry