More fixes

More styling for numbers

First click can no longer be a mine

index.html

@@ -84,9 +84,31 @@
 			li.mines3 {
 				color: #fe7ac6;
 			}
+
+			li.mines4 {
+				color: #b17afe;
+			}
+
+			li.mines5 {
+				color: #feb27a;
+			}
+
+			li.mines6 {
+				color: #7afeb2;
+			}
+
+			li.mines7 {
+				color: #d74600;
+			}
+
+			li.mines8 {
+				color: #8c4600;
+			}
 		</style>
 		<script src="jquery-2.1.3.min.js"></script>
 		<script>
+			var gameBoardWidth  = 10;
+			var gameBoardHeight = 10;
 			var gameBoard  		= [];
 			var score      		= 0;
 			var firstClick 		= true;
@@ -101,15 +123,19 @@
 					return tile;
 				}
 
-				function initGameBoard() {
-					for (var i = 0; i < 10; i++) {
-						var row = [];
+				function newRow() {
+					var newRow = [];
 
-						for (var j = 0; j < 10; j++) {
-							row.push(newTile());
+					for (var i = 0; i < gameBoardWidth; i++) {
+						newRow.push(newTile());
+					};
+
+					return newRow;
 				}
 
-						gameBoard.push(row);
+				function initGameBoard() {
+					for (var i = 0; i < gameBoardHeight; i++) {
+						gameBoard.push(newRow());
 					}
 				}
 
@@ -132,16 +158,20 @@
 				}
 
 				$.fn.checkRow = function() {
-					$(this).children('li').each(function() {
-						if ($(this).hasClass("mine")) {
+					//unclicked tiles
+					if ($(this).parent('ul').children('li:not(.revealed):not(.flagged)').length > 0) {
 						return false;
 					}
 
-						//unclicked
-						if (!$(this).hasClass("flagged") && !$(this).hasClass("mine") && !$(this).hasClass("revealed")) {
+					//incorrectly flagged tiles
+					if ($(this).parent('ul').children('li.flagged:not(.mine)').length > 0) {
+						return false;
+					}
+
+					//clicked mines
+					if ($(this).parent('ul').children('li.revealed.mine').length > 0) {
 						return false;
 					}
-					});
 
 					return true;
 				}
@@ -232,19 +262,20 @@
 				}
 
 				$.fn.leftClick = function() {
-					if ($(this).hasClass("flagged")) {
-						return;
-					}
-
 					//don't want first click to be a mine
 					if (firstClick && $(this).getGameboardPos().mine) {
 						$(this).getGameboardPos().mine = false;
+						$(this).removeClass("mine");
+					}
+
+					if ($(this).hasClass("flagged")) {
+						return;
 					}
 
 					$(this).getGameboardPos().revealed = true;
 					$(this).addClass("revealed");
 
-					if ($(this).getGameboardPos().mine && !firstClick) {
+					if ($(this).getGameboardPos().mine == true) {
 						//game over, or lose a life, or whatever
 						$(this).addClass("mine");
 					} else {
@@ -253,7 +284,6 @@
 						);
 
 						$(this).addClass("mines" + $(this).countMinesAdjacent());
-					}
 
 						//if no mines adjacent, cascade!
 						if ($(this).countMinesAdjacent() == 0) {
@@ -261,6 +291,38 @@
 						}
 					}
 
+					if (false && $(this).checkRow()) {
+						//hide this row and add a new one at the bottom
+
+						var x = $(this).getX();
+						var y = $(this).getY();
+
+						//remove row from game board
+						//gameBoard.splice(y, 1);
+						console.debug(gameBoard);
+
+						//add new row at bottom
+						gameBoard.push(newRow());
+
+						$(this).parent('ul').slideUp("slow", function() {$(this).remove();});
+
+						//redo the numbers on the rows above and below
+
+						//add new row on bottom
+						$('#game').append('<ul></ul>');
+
+						for (var i = 0; i < gameBoard[0].length; i++) {
+							if (gameBoard[gameBoardHeight][i].mine) {
+								$('#game ul:last-child').append('<li class="mine"></li>');
+							} else {
+								$('#game ul:last-child').append('<li></li>');
+							}
+						}
+					}
+
+					firstClick = false;
+				}
+
 				$.fn.middleClick = function() {
 					//number of flags matches number of adjacent mines
 					if ($(this).text() == $(this).getAdjacentTiles().filter('.flagged').length) {