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

README.md

@@ -1,6 +1,6 @@
 # endless mines
 
-A game in the vein of Minesweeper, but cleared rows disappear akin to Tetris. 
+A game in the vein of Minesweeper, but cleared rows (and columns!) disappear akin to Tetris. 
 Rows with exploded mines cannot be cleared. See how far you can get!
 
 Left-click or tap to clear a tile. Right-click or hold to flag a mine. Click or tap a number to clear any non-flagged adjacent tiles.
@@ -12,9 +12,13 @@ possibly add way to remove clicked mines (powerup/clump clicked mines together t
 
 Need to test on mobile devices etc.
 
+add a nicer graphic for mines (& flags?)
+
 ## 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. 
 
 need a fallback for browsers that don't support CSS3 viewport sizing
 
+In IE8, blank tiles do not cascade after clicking, nor do mine counts update properly. I think this is a problem with callbacks on jquery animations. I don't plan to support IE8 but this could be indicative of problems in other browsers.
+
 colours used are not safe for red-green colourblindness. however, there is at least a visual distinction with the mines now

index.html

@@ -15,19 +15,28 @@
     			font-style: normal;
 			}
 
+			* {
+				font-family: Helsinki;
+			}
+
 			html {
 				background-color: #272822;
 				margin: 0;
+				height: 10em; /* fallback */
 				height: 100vh;
+				width: 10em; /* fallback */
 				width: 100vw;
 				overflow: hidden;
-				font-family: Helsinki;
+				-moz-user-select: none;
 				-webkit-user-select: none;
+				user-select: none;
 			}
 
 			body {
+				height: 10em; /* fallback */
 				height: 100vh;
 				margin: 0 auto;
+				width: 10em; /* fallback */
 				width: 100vmin;
 			}
 
@@ -35,11 +44,14 @@
 				background-color: #1b1c17;
 				float: left;
 				margin: 0 auto;
+				height: 9em; /* fallback */
 				height: 100vh - 10vmin;
 			}
 
 			#stats {
+				height: 1em; /* fallback */
 				height: 10vmin;
+				width: 10em; /* fallback */
 				width: 100vmin;
 				float: left;
 
@@ -54,12 +66,16 @@
 			}
 
 			#stats button {
+				margin: 0.1em; /* fallback */
 				margin: 1vmin;
 				float: right;
-				font-family: Helsinki;
+				font-size: 0.3em; /* fallback */
 				font-size: 3vmin;
+				border-radius: 0.2em; /* fallback */
 				border-radius: 2vmin;
+				padding: 0.175em; /* fallback */
 				padding: 1.75vmin;
+				box-shadow: 0.05em 0.05em 0 #000; /* fallback */
 				box-shadow: 0.5vmin 0.5vmin 0 #000;
 				border: 0.4vmin solid #454e52;
 				position: relative;
@@ -69,14 +85,18 @@
 
 			#stats div {
 				float: left;
+				font-size: 0.54em; /* fallback */
 				font-size: 5.4vmin;
+				margin: 0.2em; /* fallback */
 				margin: 2vmin;
 				width: auto;
 			}
 
 			#gameOver, #setup {
 				position: absolute;
+				width: 10em; /* fallback */
 				width: 100vmin;
+				height: 10em; /* fallback */
 				height: 100vh;
 				background-color: rgba(0,0,0,0.3);
 			}
@@ -87,14 +107,18 @@
 
 			#setup h2, 
 			#setup label {
+				margin: 0.4em 0.35em; /* fallback */
 				margin: 4vmin 3.5vmin;
+				font-size: 0.6em; /* fallback */
 				font-size: 6vmin;
 				color: #fe7ac6;
+				text-shadow: 0.05em 0.05em 0 #a4f4b4; /* fallback */
 				text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
 			}
 
 			#setup div.centre {
 				position: absolute;
+				left: 1em; /* fallback */
 				left: 10vmin;
 			}
 
@@ -104,22 +128,30 @@
 
 			/* after checked input */
 			input:checked + label {
+				border: 0.1em dotted #a4f4b4; /* fallback */
 				border: 1vmin dotted #a4f4b4;
+				border-radius: 0.2em; /* fallback */
 				border-radius: 2vmin;
+				padding: 0.1em 0.2em; /* fallback */
 				padding: 1vmin 2vmin;
 			}
 
 			button {
-				font-family: Helsinki;
+				font-size: 0.6em; /* fallback */
 				font-size: 6vmin;
+				border-radius: 0.2em; /* fallback */
 				border-radius: 2vmin;
+				padding: 0.2em; /* fallback */
 				padding: 2vmin;
 				margin: 0 auto;
+				box-shadow: 0.1em 0.1em 0 #000; /* fallback */
 				box-shadow: 1vmin 1vmin 0 #000;
 				border: none;
 
 				position: absolute;
+				left: 3.8em; /* fallback */
 				left: 38vmin;
+				top: 7.5em; /* fallback */
 				top: 75vmin;
 
 				background: #768087;
@@ -133,6 +165,7 @@
 			}
 
 			button.cancel {
+				right: 2em;
 				right: 20vmin;
 				left: auto;
 			}
@@ -143,9 +176,13 @@
 
 			h1 {
 				color: #a4f4b4;
+				font-size: 1.2em; /* fallback */
 				font-size: 12vmin;
+				margin-top: 0.6em; /* fallback */
 				margin-top: 6vmin;
+				margin-bottom: 0.6em; /* fallback */
 				margin-bottom: 6vmin;
+				text-shadow: 0.1em 0..1em 0 #fe7ac6; /* fallback */
 				text-shadow: 1vmin 1vmin 0 #fe7ac6; /* x y blur-radius colour */
 			}
 
@@ -159,16 +196,23 @@
 
 			li {
 				color: white;
+				font-size: 0.8em; /* fallback */
 				font-size: 8vmin;
+				padding: 0.1em; /* fallback */
 				padding: 1vmin;
+				padding-top: 0.05em; /* fallback */
 				padding-top: 0.5vmin;
+				padding-bottom: 0.15em; /* fallback */
 				padding-bottom: 1.5vmin;
 				text-align: center;
 				vertical-align: middle;
 				float: left;
+				height: 0.8em; /* fallback */
 				height: 8vmin;
+				width: 0.8em; /* fallback */
 				width: 8vmin;
 				background-color: #454e52;
+				border-radius: 0.2em; /* fallback */
 				border-radius: 2vmin;
 				cursor: default;
 			}
@@ -228,7 +272,9 @@
 
 			p {
 				color: #fff;
+				font-size: 0.43em; /* fallback */
 				font-size: 4.3vmin;
+				padding: 0 1em; /* fallback */
 				padding: 0 10vmin;
 			}
 
@@ -247,6 +293,7 @@
 			var clickholdMs		   = 200;
 			var timeout; //hold timer
 			var mouseHeld = false;
+			var viewportSizingAvailable = ($('#game').height == $(window).height()); // only run once
 
 			$(document).ready(function() {
 				function drawGameBoard() {
@@ -409,6 +456,12 @@
 					return $(window).width() / $(window).height();
 				}
 
+				function resizeToWindow() {
+					if (!viewportSizingAvailable) {
+						$('html').css('font-size', Math.min($(window).width(), $(window).height()) / 10);
+					}
+				}
+
 				function isPortrait() {
 					return getAspectRatio() > 1;
 				}
@@ -534,7 +587,6 @@
 					firstClick = true;
 
 					score = 0;
-					mines = 0;
 
 					updateScore();
 					updateMinesLeft();
@@ -661,6 +713,12 @@
 					updateMinesLeft();
 				});
 
+				$(window).resize(function() {
+					resizeToWindow();
+				});
+
+				resizeToWindow();
+
 				//instantiate the game
 				drawGameBoard();