Sudden death + misc fixes

Styling fixes
holding a click will now clear rows
Remove unnecessary css classes
Better checking of game over condition

index.html

@@ -16,6 +16,7 @@
 			}
 
 			* {
+				box-sizing: border-box;
 				font-family: Helsinki;
 			}
 
@@ -45,8 +46,8 @@
 				background-color: #1b1c17;
 				float: left;
 				margin: 0 auto;
-				height: 9em; /* fallback */
+				height: 100%;
-				height: 100vh - 10vmin;
+				overflow: hidden;
 			}
 
 			#stats {
@@ -118,9 +119,9 @@
 			}
 
 			#setup div.centre {
-				position: absolute;
+				text-align: center;
-				left: 1em; /* fallback */
+  				margin-top: 0.2em; /* fallback */
-				left: 10vmin;
+  				margin-top: 2vmin;
 			}
 
 			input[type="radio"] {
@@ -149,12 +150,6 @@
 				box-shadow: 1vmin 1vmin 0 #000;
 				border: none;
 
-				position: absolute;
-				left: 3.8em; /* fallback */
-				left: 38vmin;
-				top: 7.5em; /* fallback */
-				top: 75vmin;
-
 				background: #768087;
 				background: -moz-linear-gradient(top,  #768087 0%, #53595e 100%);
 				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#768087), color-stop(100%,#53595e));
@@ -193,6 +188,7 @@
 				list-style-type: none;
 				padding: 0;
 				margin: 0;
+				overflow: hidden;
 			}
 
 			li {
@@ -208,10 +204,10 @@
 				text-align: center;
 				vertical-align: middle;
 				float: left;
-				height: 0.8em; /* fallback */
+				height: 1em; /* fallback */
-				height: 8vmin;
+				height: 10vmin;
-				width: 0.8em; /* fallback */
+				width: 1em; /* fallback */
-				width: 8vmin;
+				width: 10vmin;
 				background-color: #454e52;
 				border-radius: 0.2em; /* fallback */
 				border-radius: 2vmin;
@@ -364,6 +360,10 @@
 						return $(this).checkRow();
 					});
 
+					if (rowsToRemove.length > 0) {
+						suddenDeath();
+					}
+
 					rowsToRemove.each(function() {
 						score += $(this).children('.mine').length;
 
@@ -388,15 +388,16 @@
 						return $(this).checkColumn();
 					});
 
+					if (columnsToRemove.length > 0) {
+						suddenDeath();
+					}
+
 					columnsToRemove.each(function() {
 						score += $(this).column().filter('.mine').length;
 
 						$(this).column().addClass("removing");
 
-						//animation for top row + deletion
+						//animation for top row + deletion of column
-						// then animation for others?
-						//...
-
 						$(this).animate({width: 0, borderRadius: 0, padding: 0}, "slow", function() {
 							$(this).column().remove();
 							$('ul').each(function() {
@@ -409,6 +410,7 @@
 							$('li.revealed:not(.mine, .removing):empty').mouseup();
 						});
 
+						//then just animation for others
 						$(this).column().animate({width: 0, borderRadius: 0, padding: 0}, "slow");
 					});
 				}
@@ -426,6 +428,8 @@
 								/mines[0-9]/, "mines" + mineCount
 							)
 						);
+
+						$(this).removeClass("mines mines0");
 					});
 				}
 
@@ -434,7 +438,10 @@
 				}
 
 				function isGameOver() {
-					return ($('ul').has('.mine.revealed').length == gameBoardHeight);
+					return $('ul').has('.mine.revealed').length == gameBoardHeight
+						&& $('ul').first().children().filter(function() {
+						return $(this).column().filter('.mine.revealed').length > 0;
+					}).length == gameBoardWidth;
 				}
 
 				function checkGameOver() {
@@ -497,6 +504,33 @@
 					return column;
 				}
 
+				window.oneColumnLeft = function() {
+					return $('ul').first().children().filter(function() {
+						return $(this).column().filter('.mine:not(.revealed, .flagged)').length == 0;
+					}).length >= (gameBoardWidth - 1)
+				}
+
+				window.oneRowLeft = function() {
+					return $('ul').filter(function() {
+						return $(this).children('.mine:not(.revealed, .flagged)').length == 0;
+					}).length >= (gameBoardHeight - 1);
+				}
+
+				window.isSuddenDeath = function() {
+					return oneRowLeft() && oneColumnLeft();
+				}
+
+				window.suddenDeath = function() {
+					if (isSuddenDeath()) {
+						mineChance += 0.01;
+
+						//don't want the chance to get to 100% because that's completely predictable
+						if (mineChance > 0.8) {
+							mineChance = 0.8;
+						}
+					}
+				}
+
 				$.fn.getX = function() {
 					return $(this).index();
 				}
@@ -587,6 +621,9 @@
 					//reset stats
 					firstClick = true;
 
+					//reset difficulty
+					$('input:checked').change();
+
 					score = 0;
 
 					updateScore();
@@ -688,22 +725,21 @@
 
 					if (mouseHeld) {
 						mouseHeld = false;
-						return;
+					} else {
-					}
+						switch (event.which) {
-
+							case 3:
-					switch (event.which) {
+								$(this).rightClick();
-						case 3:
+								break;
-							$(this).rightClick();
+							case 2:
-							break;
+								$(this).middleClick();
-						case 2:
+								break;
-							$(this).middleClick();
+							case 1:
-							break;
+								$(this).leftClick();
-						case 1:
+								break;
-							$(this).leftClick();
+							default:
-							break;
+								$(this).leftClick(true); //automated
-						default:
+								break;
-							$(this).leftClick(true); //automated
+						}
-							break;
 					}
 
 					removeClearedRows();
@@ -749,7 +785,6 @@
 			<p>a game by max bradbury</p>
 			<p>inspirations include minesweeper, tetris and 2048</p>
 			<p>tell your friends</p>
-			<p>stay in school</p>
 			<button>reset</button>
 		</div>
 		<div id="setup">
@@ -758,7 +793,7 @@
 			<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.
+				rows and columns with <strong>exploded mines</strong> cannot be cleared.
 			</p>
 
 			<h2>Difficulty</h2>
@@ -772,8 +807,10 @@
 				<label for="difficultyHard">Hard</label>
 			</div>
 
-			<button class="start">start</button>
+			<div class="centre">
-			<button class="cancel">cancel</button>
+				<button class="start">start</button>
+				<button class="cancel">cancel</button>
+			</div>
 		</div>
 	</body>
 </html>