diff --git a/index.html b/index.html index deae344..2cff28b 100644 --- a/index.html +++ b/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(); }); @@ -446,5 +558,25 @@