Various changes

Added help text
Removed unused variables
Refactored "add new mine" functionality
Added funcionality for removing cleared columns (disabled for now)

index.html

@@ -66,8 +66,8 @@
 			}
 
 			#setup h1 {
-				margin-top: 8vmin;
+				margin-top: 6vmin;
-				margin-bottom: 8vmin;
+				margin-bottom: 6vmin;
 			}
 
 			#setup h2 {
@@ -109,7 +109,7 @@
 
 				position: absolute;
 				left: 38vmin;
-				top: 59vmin;
+				top: 75vmin;
 
 				background: #768087;
 				background: -moz-linear-gradient(top,  #768087 0%, #53595e 100%);
@@ -207,17 +207,25 @@
 			li.mines8 {
 				color: #8c4600;
 			}
+
+			p {
+				color: #fff;
+				font-size: 4.3vmin;
+				padding: 0 10vmin;
+			}
+
+			strong {
+				color: #fe7ac6;
+			}
 		</style>
 		<script src="jquery-2.1.3.min.js"></script>
 		<script>
 			var gameBoardWidth     = 10;
 			var gameBoardHeight    = 9;
 			var score      		   = 0;
-			var bombs              = 1;
 			var firstClick 		   = true;
 			var currentlyIterating = false;
 			var mineChance		   = 0.2;
-			var inputEnabled	   = true;
 			var clickholdMs		   = 200;
 			var timeout; //hold timer
 			var mouseHeld = false;
@@ -232,15 +240,20 @@
 
 					$('#game ul').each(function() {
 						for (var i = 0; i < gameBoardWidth; i++) {
-							if (Math.random() < mineChance) {
+							$(this).append(newTile());
-								$(this).append('<li class="mine"></li>');
-							} else {
-								$(this).append("<li></li>");
-							}
 						}
 					});
 				}
 
+				function newTile() {
+					if (Math.random() < mineChance) {
+						return '<li class="mine"></li>';
+					} else {
+						return '<li></li>';
+					}
+				}
+
+
 				$.fn.checkRow = function() {
 					//unclicked tiles
 					if ($(this).children('li:not(.revealed):not(.flagged)').length > 0) {
@@ -260,6 +273,25 @@
 					return true;
 				}
 
+				$.fn.checkColumn = function() {
+					//unclicked tiles
+					if ($(this).column().filter(':not(.revealed):not(.flagged)').length > 0) {
+						return false;
+					}
+
+					//incorrectly flagged tiles
+					if ($(this).column().filter('.flagged:not(.mine)').length > 0) {
+						return false;
+					}
+
+					//clicked mines
+					if ($(this).column().filter('.revealed.mine').length > 0) {
+						return false;
+					}
+
+					return true;
+				}
+
 				window.removeClearedRows = function() {
 					var rowsToRemove = $('#game ul:not(.removing)').filter(function() {
 						return $(this).checkRow();
@@ -273,55 +305,73 @@
 
 					rowsToRemove.each(function() {
 						score += $(this).children('.mine').length;
+					});
 
+					rowsToRemove.slideUp("slow", function() {
+						$(this).remove();
 						//add new row on bottom
 
 						$('#game').append('<ul></ul>');
 
 						for (var i = 0; i < gameBoardWidth; i++) {
-							if (Math.random() < mineChance) {
+							$('#game ul').last().append(newTile());
-								$('#game ul').last().append('<li class="mine"></li>');
-							} else {
-								$('#game ul').last().append('<li></li>');
-							}
 						}
-					});
 
-					inputEnabled = false;
+						refreshMineCounts();
-
-					rowsToRemove.slideUp("slow", function() {
-						$(this).remove();
-
-						$('li.revealed:not(.mine)').each(function() {
-							$(this).text(
-								$(this).countMinesText()
-							);
-
-							//remove "mines1" etc
-							
-							var mine = $(this).hasClass("mine");
-
-							$(this).removeAttr("class");
-
-							if (mine) {
-								$(this).addClass("mine");
-							} else {
-								$(this).addClass(
-									"mines" + $(this).countMinesText()
-								);
-							}
-
-							$(this).addClass("revealed");
-						});
-
-						//refresh last row to reflect new rows beneath
-						$('li.revealed').last().parent().children('li.revealed').mouseup();
 
 						//click blank tiles
 						$('li.revealed:not(.mine):empty').mouseup();
 					});
+				}
 
-					inputEnabled = true;
+				window.removeClearedColumns = function() {
+					var columnsToRemove = $('ul:not(.removing):eq(0) li:not(.removing)').filter(function() {
+						return $(this).checkColumn();
+					});
+
+					if (columnsToRemove.length == 0) return;
+
+					columnsToRemove.addClass("removing");
+
+					columnsToRemove.each(function() {
+						score += $(this).column().filter('.mine').length;
+					});
+
+					columnsToRemove.each(function() {
+						$(this).column().animate({width: 0, borderRadius: 0, padding: 0}, "slow", function() {
+							$(this).parent().append(newTile());
+							$(this).remove();
+
+							refreshMineCounts();
+
+							//click blank tiles
+							$('li.revealed:not(.mine):empty').mouseup();
+						});
+					});
+				}
+
+				function refreshMineCounts() {
+					$('li.revealed:not(.mine)').each(function() {
+						$(this).text(
+							$(this).countMinesText()
+						);
+
+						//remove "mines1" etc
+
+						var mine = $(this).hasClass("mine");
+
+						$(this).removeAttr("class");
+
+						if (mine) {
+							$(this).addClass("mine");
+						} else {
+							$(this).addClass(
+								"mines" + $(this).countMinesText()
+							);
+						}
+
+						$(this).addClass("revealed");
+					});
 				}
 
 				function updateScore() {
@@ -360,6 +410,18 @@
 					return $(this).parent('ul').next();
 				}
 
+				$.fn.column = function() {
+					var x = $(this).getX();
+
+					var column = $('');
+
+					$('ul').each(function() {
+						column = column.add($(this).children().eq(x));
+					});
+
+					return column;
+				}
+
 				$.fn.getX = function() {
 					return $(this).index();
 				}
@@ -528,10 +590,7 @@
 				}
 
 				$.fn.rightClick = function() {
-					if ($(this).hasClass("revealed")) {
+					if (!$(this).hasClass("revealed")) {
-						//deploy a bomb!
-						//...
-					} else {
 						$(this).toggleClass("flagged");
 					}
 
@@ -549,6 +608,7 @@
 
     				timeout = setTimeout(function() {
     					$('ul:eq(' + y + ') li:eq(' + x + ')').rightClick();
+
     					mouseHeld = true;
 					}, clickholdMs);
 				});
@@ -562,8 +622,6 @@
 
 					clearTimeout(timeout);
 
-					if (!inputEnabled) return;
-
 					if (mouseHeld) {
 						mouseHeld = false;
 						return;
@@ -585,6 +643,7 @@
 					}
 
 					removeClearedRows();
+					//removeClearedColumns();
 					checkGameOver();
 
 					updateScore();
@@ -602,7 +661,6 @@
 		<div id="game"></div>
 		<div id="stats">
 			<div id="score">Score: 0</div>
-			<div id="bombs" style="display: none;">Bombs: 0</div>
 			<div id="mines">Mines left: 0</div>
 		</div>
 		<div id="gameOver">
@@ -612,6 +670,12 @@
 		<div id="setup">
 			<h1>endless mines</h1>
 
+			<p>
+				<strong>left click</strong> or <strong>tap</strong> to clear a tile. <br>
+				<strong>right click</strong> or <strong>hold</strong> to flag a mine. <br>
+				rows with <strong>exploded mines</strong> cannot be cleared.
+			</p>
+
 			<h2>Difficulty</h2>
 
 			<div class="centre">