Splash screen and difficulty options

index.html

@@ -36,8 +36,6 @@
 				width: 100vmin;
 				float: left;
 
-				border-radius: 2vmin;
-
 				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));
@@ -55,6 +53,72 @@
 				width: auto;
 			}
 
+			#gameOver, #setup {
+				position: absolute;
+				width: 100vmin;
+				height: 90vmin;
+				background-color: rgba(0,0,0,0.3);
+			}
+
+			#setup {
+				height: 100vmin;
+			}
+
+			#setup h1 {
+				margin-top: 8vmin;
+				margin-bottom: 8vmin;
+			}
+
+			#setup h2 {
+				margin-top: 0;
+			}
+
+			#setup h2, 
+			#setup label {
+				font-size: 6vmin;
+				color: #fe7ac6;
+				text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
+			}
+
+			#setup div.centre {
+				position: absolute;
+				left: 10vmin;
+			}
+
+			button {
+				font-family: Helsinki;
+				font-size: 6vmin;
+				border-radius: 2vmin;
+				padding: 2vmin;
+				margin: 0 auto;
+				box-shadow: 1vmin 1vmin 0 #000;
+				border: none;
+
+				position: absolute;
+				left: 38vmin;
+				top: 59vmin;
+
+				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));
+				background: -webkit-linear-gradient(top,  #768087 0%,#53595e 100%);
+				background: -o-linear-gradient(top,  #768087 0%,#53595e 100%);
+				background: -ms-linear-gradient(top,  #768087 0%,#53595e 100%);
+				background: linear-gradient(to bottom,  #768087 0%,#53595e 100%);
+				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#768087', endColorstr='#53595e',GradientType=0 );
+			}
+
+			h1, h2 {
+				text-align: center;
+			}
+
+			h1 {
+				color: #a4f4b4;
+				font-size: 12vmin;
+				margin: 16vmin 0;
+				text-shadow: 1vmin 1vmin 0 #fe7ac6; /* x y blur-radius colour */
+			}
+
 			ul {
 				float: left;
 				clear: both;
@@ -252,6 +316,16 @@
 					$('#score').text("Score: " + score);
 				}
 
+				function isGameOver() {
+					return ($('ul').has('.mine.revealed').length == gameBoardHeight);
+				}
+
+				function checkGameOver() {
+					if (isGameOver()) {
+						$('#gameOver').show();
+					}
+				}
+
 				function updateMinesLeft() {
 					//unflagged mines - revealed mines - flagged not-mines
 					$('#mines').text(
@@ -347,6 +421,39 @@
 					return $(this).countMinesAdjacent().toString().replace("0", "");
 				}
 
+				$('input[type="radio"]').on("change", function() {
+					switch ($(this).val()) {
+						case "easy":
+							mineChance = 0.1;
+							break;
+						case "normal":
+							mineChance = 0.2;
+							break;
+						case "hard":
+							mineChance = 0.285;
+							break;
+					}
+				});
+
+				$('#gameOver button').on("click", function() {
+					//reset game board
+					drawGameBoard();
+
+					$('#gameOver').hide();
+					$('#setup').show();
+				});
+
+				$('#setup button').on("click", function() {
+					//reset stats
+					score = 0;
+					mines = 0;
+
+					updateScore();
+					updateMinesLeft();
+
+					$('#setup').hide();
+				});
+
 				$.fn.leftClick = function() {
 					//don't want first click to be a mine
 					if (firstClick && $(this).isMine()) {
@@ -431,11 +538,16 @@
 					}
 
 					removeClearedRows();
+					checkGameOver();
+
 					updateScore();
 					updateMinesLeft();
 				});
 
+				//instantiate the game
 				drawGameBoard();
+
+				$('#gameOver').hide();
 			});
 		</script>
 	</head>
@@ -446,5 +558,25 @@
 			<div id="bombs" style="display: none;">Bombs: 0</div>
 			<div id="mines">Mines left: 0</div>
 		</div>
+		<div id="gameOver">
+			<h1>game over</h1>
+			<button>reset</button>
+		</div>
+		<div id="setup">
+			<h1>endless mines</h1>
+
+			<h2>Difficulty</h2>
+
+			<div class="centre">
+				<input type="radio" name="difficulty" id="difficultyEasy" value="easy">
+				<label for="difficultyEasy">Easy</label>
+				<input type="radio" name="difficulty" id="difficultyNormal" value="normal" checked>
+				<label for="difficultyNormal">Normal</label>
+				<input type="radio" name="difficulty" id="difficultyHard" value="hard">
+				<label for="difficultyHard">Hard</label>
+			</div>
+
+			<button>start</button>
+		</div>
 	</body>
 </html>