MineSweeper Party
Tags: pushercontest, angular, pusher, pwa
Published: 2018-05-24 23:10:56

---
title: MineSweeper Party
published: true
description: A multiplayer version of the classic MineSweeper submitted to the first-ever DEV Community contest. 
tags: pushercontest, angular, pusher, pwa
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ayeq0kqlpg4xif3bjxam.png
---

# What I built

Well, I built a MineSweeper game that allows multiple players to play the same game at the same time. No turns, no waiting. Just tap tap boom! 💥

<img src="https://thepracticaldev.s3.amazonaws.com/i/ayeq0kqlpg4xif3bjxam.png" alt="dotenv" width="300" align="right" />

Like the classic versions, the instructions are very simple:
- Tap/Click on a tile to reveal it;
- Tap/Click and Hold on a tile to lock it with a flag 🚩;
- Reveal all the safe tiles to win.

## How it works

The games are played on a channel, which is identified by a URL. Each channel allow infinite number of random games but only one at a time.

There are 4 pre-defined channels with increasing level of difficulty: easy/medium/hard/extreme.

Other channels can be created with a random id, much like YouTube does: https://minesweeper-party.herokuapp.com/dQw4w9WgXcQ

All these channels can be shared with other users. So let the games begin.

## How Pusher is used

When the user joins a game, the application subscribes to a Pusher channel to receive notifications of changes (reveal/flag) from other users playing the same game.

When the users reveals or flags a tile, a request is made to the server and a notification is sent to all the subscribers of the same game/channel. Since the client also have the game engine, the local state is updated optimistically before the responses from the server.

## Demo Link

https://minesweeper-party.herokuapp.com/

I'm using a free Heroku Dyno that goes to sleep after not being used for a while. It might take a few seconds to wake it up the first time.

## Link to Code

https://github.com/titonobre/minesweeper-party

# How I built it

This project was implemented in TypeScript, using Angular as the frontend framework and Express for the server. The frontend application is a [PWA](https://dev.to/t/pwa) and uses a ServiceWorker to cache assets on the client device.

The share button is using the [Web Share API](https://dev.to/philnash/the-web-share-api), only supported in recent versions of Google Chrome for Android.

## The Stack

**Application**
- [Angular](https://angular.io/)
- [TypeScript](https://www.typescriptlang.org/) 
- [RxJS](https://github.com/ReactiveX/rxjs)
- [Pusher Client](https://www.npmjs.com/package/pusher-js)

**Server**
- [Node.js](https://nodejs.org/en/)
- [Express](https://expressjs.com/)
- [Pusher](https://www.npmjs.com/package/pusher)
- [Heroku](https://heroku.com/)

**Other Noteworthy Tools**
- [Angular CLI](https://cli.angular.io/)
- [npm](https://www.npmjs.com/)
- [dotenv](https://github.com/motdotla/dotenv)
- [node-dev](https://github.com/fgnass/node-dev)
- [imagemin](https://github.com/imagemin/imagemin)
- [svgexport](https://github.com/shakiba/svgexport)
- [npm-run-all](https://github.com/mysticatea/npm-run-all)

## Issues

### The name of the project

> There are only two hard things in Computer Science: cache invalidation and naming things.
> _-- Phil Karlton_

No comments here! 🙄


# Additional Resources/Info 

It is worth to mention that the initial inspiration for the game engine was based on the work done by [Jurgen Van de Moere](https://www.jvandemo.com/how-to-build-minesweeper-using-angular-2-and-immutable-js/) and [Christian Johansen](https://github.com/cjohansen/react-sweeper).


# Future Work

- **Expandable Mine Field** - The Game engine supports configurable grid sizes but I think it would be a great challenge to support a kind of expandable grid (maybe "infinite").

- **Have Data Persistence** - Currently the games are not persisted and are lost if the server restarts or goes to sleep. Some kind of storage would be nice.

- **Allow Custom Difficulty** - Configurable grid sizes and number of mines could be a nice addition.

- **Add some kind of ranking** - It's not easy to finish a game with others playing the same game. Give points to the best players on a channel would make things more interesting.

- **P2P** - Pusher allows clients to send messages through the websocket to other clients. This could be nice to avoid the communication with the game server.

- **Share on all devices** - Although the Web Share API is awesome and very simple to use. It would be nice to use an alternative while other browsers don't support it.

- **Offline Mode** - Since the purpose of the contest was to use Pusher I removed the offline mode but it is very simple to add back.

---

Beware and don't step on a mine...


![land mine](https://thepracticaldev.s3.amazonaws.com/i/i4o6yt8f5ld2a1edezfs.png)