Bugfixes & styling

Middle-click support for clearing squares when all adjacent flags are
placed

Cascading when a tile with no adjacent mines is clicked

Different colours for different numbers of adjacent mines

index.html

@@ -41,6 +41,8 @@
 				font-size: 8vmin;
 				font-family: Helsinki;
 				padding: 1vmin;
+				padding-top: 0.5vmin;
+				padding-bottom: 1.5vmin;
 				text-align: center;
 				vertical-align: middle;
 				float: left;
@@ -49,7 +51,6 @@
 				background-color: #4e3c23;
 				border-radius: 2vmin;
 				cursor: default;
-				line-height: 10vmin;
 			}
 
 			li.revealed {
@@ -72,22 +73,23 @@
 				background-color: #d23000;
 			}
 
-			li.1mines {
+			li.mines1 {
-				color: green;
+				color: #c6fe7a;
 			}
 
-			li.2mines {
+			li.mines2 {
-				color: blue;
+				color: #7ac5fe;
 			}
 
-			li.3mines {
+			li.mines3 {
-				color: red;
+				color: #fe7ac6;
 			}
 		</style>
 		<script src="jquery-2.1.3.min.js"></script>
 		<script>
 			var gameBoard  = [];
 			var score      = 0;
+			var firstClick = true;
 
 			$( document ).ready(function() {
 				function newTile() {
@@ -185,55 +187,46 @@
 				}
 
 				$.fn.getAdjacentTiles = function() {
-					var adjacentTiles = [];
+					var adjacentTiles = $('');
 
 					//row above
 					if ($(this).getY() > 0) {
 						if ($(this).getX() > 0) {
-							adjacentTiles.push($(this).rowAbove().children().eq($(this).getX() - 1).toArray());
+							adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX() - 1).toArray());
 						}
 
-						adjacentTiles.push($(this).rowAbove().children().eq($(this).getX()).toArray());
+						adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX()).toArray());
 
 						if ($(this).getX() < (gameBoard[0].length - 1)) {
-							adjacentTiles.push($(this).rowAbove().children().eq($(this).getX() + 1).toArray());
+							adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX() + 1).toArray());
 						}
 					}
 
 					//this row
 					if ($(this).getX() > 0) {
-						adjacentTiles.push($(this).prev().toArray());
+						adjacentTiles = adjacentTiles.add($(this).prev().toArray());
 					}
 
 					if ($(this).getX() < (gameBoard[0].length - 1)) {
-						adjacentTiles.push($(this).next().toArray());
+						adjacentTiles = adjacentTiles.add($(this).next().toArray());
 					}
 
 					//row below
 					if ($(this).getY() < (gameBoard.length - 1)) {
 						if ($(this).getX() > 0) {
-							adjacentTiles.push($(this).rowBelow().children().eq($(this).getX() - 1).toArray());
+							adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX() - 1).toArray());
 						}
 
-						adjacentTiles.push($(this).rowBelow().children().eq($(this).getX()).toArray());
+						adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX()).toArray());
 
 						if ($(this).getX() < (gameBoard[0].length - 1)) {
-							adjacentTiles.push($(this).rowBelow().children().eq($(this).getX() + 1).toArray());
+							adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX() + 1).toArray());
 						}
 					}
 
 					return adjacentTiles;
 				}
 
-				$.fn.clickAdjacentTiles = function() {
-					$(this).getAdjacentTiles().each(function() {
-						$(this).addClass("cascade");
-					});
-
-					$('li.cascade').click();
-					$('li.cascade').removeClass("cascade");
-				}
-
 				$.fn.countMinesText = function() {
 					return $(this).countMinesAdjacent().toString().replace("0", "");
 				}
@@ -243,10 +236,15 @@
 						return;
 					}
 
+					//don't want first click to be a mine
+					if (firstClick && $(this).getGameboardPos().mine) {
+						$(this).getGameboardPos().mine = false;
+					}
+
 					$(this).getGameboardPos().revealed = true;
 					$(this).addClass("revealed");
 
-					if ($(this).getGameboardPos().mine) {
+					if ($(this).getGameboardPos().mine && !firstClick) {
 						//game over, or lose a life, or whatever
 						$(this).addClass("mine");
 					} else {
@@ -254,30 +252,43 @@
 							$(this).countMinesText()
 						);
 
-						$(this).addClass($(this).countMinesAdjacent() + "mines");
+						$(this).addClass("mines" + $(this).countMinesAdjacent());
 					}
 
 					//if no mines adjacent, cascade!
 					if ($(this).countMinesAdjacent() == 0) {
-						$(this).clickAdjacentTiles();
+						$(this).getAdjacentTiles().filter(':not(.revealed)').mousedown();
+					}
+				}
+
+				$.fn.middleClick = function() {
+					//number of flags matches number of adjacent mines
+					if ($(this).text() == $(this).getAdjacentTiles().filter('.flagged').length) {
+						$(this).getAdjacentTiles().filter(':not(.flagged)').each(function() {
+							$(this).mousedown();
+						});
 					}
 				}
 
 				$.fn.rightClick = function() {
-					$(this).addClass("flagged");
+					if (!$(this).hasClass("revealed")) {
+						$(this).toggleClass("flagged");
+					}
 				}
 
 				$(document).on("contextmenu", "li", function(event) {
-					$(this).rightClick();
 					event.preventDefault();
 				});
 
 				$(document).on("mousedown", "li", function(event) {
 					switch (event.which) {
-						case 3: //right click
+						case 3:
 							$(this).rightClick();
 							break;
-						case 1: //left click
+						case 2:
+							$(this).middleClick();
+							break;
+						case 1:
 						default:
 							$(this).leftClick();
 							break;