Connect4Web

A Connect 4 implementation on a modern web stack

Demo

http://connect4web.azurewebsites.net/

Objective

To implement a lightweight algorithm of the classic Connect Four game satisfying unit and acceptance tests, exposed with a simple REST API and visualised in a SPA web front-end.

Technology Stack

.NET 4.6.1
C# 6.0
ASP.NET MVC5 / WEB API2
Owin
Autofac
Serilog/Seq
NUnit
Aurelia (routing, templating, binding)
ES6/2015
NPM and JSPM package managers
Gulp
Bootstrap
Animate.CSS
Backstretch

Notable Features

Single Page Application

The SPA design removes page reloads and helps makes API interactions fast and responsive.

Sessionful

ASP.NET sessions (tracked via cookies) retain the state of the player's board even with a full page refresh and single page application reboot. This elapses when the session times-out or the application pool is recycled. The board state is discarded when a game concludes via a win or a draw.

Diagnostics

Serilog has been added to the Owin middleware for Web API 2, with a sink to a configurable Seq instance (http://localhost:5341 by default). All API requests will be logged including any enrich properties.

In-memory board visualisations

To assist debugging and testing, the board can be visualised in a debug watch window:

Future Enhancements

Selectable board dimensions on landing page.
Integrate Swagger for API testing and self-documentation.
Front-end Javascript unit tests.
Responsive layout.
Port to ASP.NET Core.

Build Instructions

git clone https://github.com/Craigology/connect4web
Build solution in VS2015.
Run tests (requires ReSharper or other test runner support for NUnit).
Install NPM with NodeJS or Chocolatey.
From command prompt (assumes NPM is in %PATH%):
cd src/Connect4.Web
npm install
npm install -g jspm
jspm install -y
npm install -g gulp
gulp build
Debug/launch site in VS2015.

Craigology/connect4web