Merge remote-tracking branch 'origin/master' into gh-pages

README.md

@@ -17,8 +17,6 @@ Need to test on mobile devices etc.
 ## bugs
 the player can cheat under certain conditions; if there is only one tile left on a row, the player can flag it and if it is a mine, the row will clear. if not, the player can unflag it and click it. not sure how big a deal this is really. 
 
-the game adds too many rows and then deletes the extra rows, instead of just adding the correct number of rows in the first place. this is due to the row clearing method nesting and adding the new rows several times as a result
+need a fallback for browsers that don't support CSS3 viewport sizing
 
-the scoring system is wrong due to the above problem; if any tiles cascade during removal of rows, the score is added again for each step of the cascade leading to vastly inflated scores
+colours used are not safe for red-green colourblindness
-
-game is apparently broken in Safari (not sure which version)

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">