help screen implemented

index.html

@@ -47,7 +47,7 @@
             }
 
             #title {
-                z-index:99999;
+                z-index:9000;
                 margin-top:20px;
                 color:#2c3e50;
             }
@@ -71,11 +71,35 @@
         <script type = 'text/javascript' src="js/Block.js"></script>
         <script type = 'text/javascript' src="js/Clock.js"></script>
         <script type = 'text/javascript' src="js/Text.js"></script>
-        <script type = 'text/javascript' src="js/input.js"></script>
         <script type = 'text/javascript' src="js/checking.js"></script>
         <script type = 'text/javascript' src='js/update.js'></script>
         <script type = 'text/javascript' src='js/render.js'></script>
         <script type = 'text/javascript' src="js/main.js"></script>
+        <script type = 'text/javascript' src="js/input.js"></script>
         <script type = 'text/javascript' src="js/analytics.js"></script>
+	<div id="helpScreen">
+		<h1 style="margin-left:5%;">Instructions</h1>
+		<br>
+		<p  style="margin-left:5%;">
+			The goal of Hextris is to keep your stacks managed and inside the outer gray hexagon.
+			<br>
+			<br>
+			You control the rotation of the inner hexagon with your arrow keys (or by tapping the left and right sides of the screen if you're so inclined)
+			<br>
+			<br>
+			Your score is based on the amount of blocks you clear in one combo, as well as the number of consecutive combos you can achieve
+			<br>
+			<br>
+			At any time you can pause by pressing p and restart by pressing enter.
+			<br>
+			<br>
+			If you want to report a bug you can press I and send it to ___@gmail.com with the text that pops up and the issue you've encountered
+			<br>
+			<br>
+
+		</p>
+	</div>
+	<div onClick="showHelp()" id="openSideBar">?</div>
+
     </body>
 </html>

js/input.js

@@ -1,4 +1,20 @@
 var prevGameState;
+function pause(x,o) {
+	if(x === undefined){x=true}
+        if (gameState == -1 ) {
+	    if(showingHelp && !o){return;}
+            gameState = prevGameState;
+            requestAnimFrame(animLoop);
+	    pauseText = true; 
+        }
+        else if(gameState != -2 && gameState != 0) {
+            prevGameState = gameState;
+            gameState = -1;
+	    pauseText = x; 
+        }
+    }
+
+
 
 keypress.register_combo({
     keys: "left",
@@ -20,16 +36,7 @@ keypress.register_combo({
 
 keypress.register_combo({
     keys: "p",
-    on_keydown: function() {
+    on_keydown: function(){pause();}
-        if (gameState == -1) {
-            gameState = prevGameState;
-            requestAnimFrame(animLoop);
-        }
-        else if(gameState != -2 && gameState != 0) {
-            prevGameState = gameState;
-            gameState = -1;
-        }
-    }
 });
 
 keypress.register_combo({

js/main.js

@@ -1,3 +1,5 @@
+pauseText = true;
+showingHelp = false;
 $(document).ready(scaleCanvas);
 $(window).resize(scaleCanvas);
 $(window).unload(function() {
@@ -262,7 +264,9 @@ function animLoop() {
 		render();
 	}
 	else if (gameState == -1) {
-		showModal('Paused!', 'Press "P" to continue.');
+		if(pauseText){
+			showModal('Paused!', 'Press "P" to continue.');
+		}
 	}
 	else if (gameState == 2) {
 		requestAnimFrame(animLoop);
@@ -311,11 +315,16 @@ function checkGameOver() {
 }
 
 window.onblur = function (e) {
-        if (gameState == -1) {
+	pause();
-            gameState = prevGameState;
-        }
-        else if(gameState == 1) {
-            prevGameState = gameState;
-            gameState = -1;
-        }
 };
+function showHelp(){
+	pause(false,true);
+	if(document.getElementById("helpScreen").style.display=="none" || document.getElementById("helpScreen").style.display == ""){
+		document.getElementById("helpScreen").style.display = "block";
+	}
+	else if(document.getElementById("helpScreen").style.display=="block" ){
+		document.getElementById("helpScreen").style.display = "none";
+		
+	}
+	showingHelp = !showingHelp;
+}

style.css

@@ -34,4 +34,26 @@ button {
 }
 button:focus {
 	outline: 0;
-}
+}
+#openSideBar {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	z-index: 20000;
+	color:#000;
+	cursor:hand;
+	cursor:pointer;
+}
+
+#helpScreen {
+	height:100%;
+	width:100%;
+	z-index:10000;
+	position:absolute;
+	top:0%;
+	left:0%;
+	display:none;
+	color:#000;
+	background-color:rgba(255,255,255,0.5);
+}
+