vankeer / blackjackery

A simplified multiplayer blackjack webgame written in ES6 using AngularJS and Express. Made as an exercise in rapid prototyping, WebSockets, and using the (M)EAN stack to create a functional MVP in hours.

Blackjackery

A simplified multiplayer blackjack webgame written in ES6 using AngularJS and Express.

Made as an exercise in rapid prototyping, WebSockets, and using the (M)EAN stack to create a functional MVP in hours.

Demo

Click here for a demo

(currently best played on desktop or tablet)

Installation and Use

This project was generated with the Angular Full-Stack Generator version 3.2.0.

Prerequisites

• Git
• Node.js and npm Node ^4.2.3, npm ^2.14.7
• Bower (npm install --global bower)
• Ruby and then gem install sass
• Grunt (npm install --global grunt-cli)

Developing

1. Run npm install to install server dependencies.
2. Run bower install to install front-end dependencies.
3. Run grunt serve to start the development server. It should automatically open the client in your browser when ready.

Build & development

Run grunt build for building and grunt serve for preview.

Testing

Running npm test will run the unit tests with karma.

Features

• 1 table
• 1 dealer with 1 standard deck
• up to 7 players
  • if the table is full, new players are put in a wait queue
• a new game is started as soon as there is at least 1 player connected
• losses and wins are counted (no betting)
• players can either hit or stick (no splitting)

Wireframe

Game flow

Player state

Implementation

I've opted to use a Yeoman generator to quickly scaffold a MEAN app: generator-angular-fullstack

Client-side is a simple Angular app and consists of just 1 view with a controller, a service for tracking the game state, and a service for the socket connections.

Server-side is an Express app. The game state is kept in memory with the Game module and is expressed using a simple model:

For every new client connected, there is a player.socket.js handler that deals with joining and other actions.

The dealer.socket.js handler checks the game state every X ms and changes the game & player states accordingly (see above).

Backlog

High prio

• Timer for actions (otherwise players can join and block the game)
• Customized dealer / end of game feedback per player
• Show timers realtime
• Show value of current hand
• Show stats: player and dealer scores
• Cards: responsive layout (not good in mobile)

Medium

• Better UI (flash changes to model)
• Card colors
• Show people in wait queue

Low prio

• Option to split cards
• Betting
• Multiple tables
• Card animations
• Store games and scores in a MongoDB database