fixed merge conflict

index.html

@@ -84,7 +84,7 @@
 		<img id="openSideBar" class = 'helpText' src="./images/btn_help.svg" />
 		<div class="faded overlay"></div>
 		<img id="pauseBtn" src="./images/btn_pause.svg" />
-		<div id = 'restartBtn'><div id = 'restartBtnInner'><img src="./images/btn_restart.svg" /></div></div>
+		<img id = 'restartBtn' src="./images/btn_restart.svg" />
 		<div id="bottombar">
 			<div style="bottom:4px; padding-right:4px;" class="fb-like" data-href="http://hextris.github.io/hextris" data-width="20" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
 			<a onClick="tweetblock=true" href="https://twitter.com/intent/tweet?hashtags=hextris&original_referer=http%3A%2F%2F0.0.0.0%3A8080%2F&text=Play%20Hextris!%20-&tw_p=tweetbutton&url=http%3A%2F%2Fhextris.github.io%2F" class="twitter-share-button" data-url="http://hextris.github.io/" data-text="Play Hextris! -" data-hashtags="hextris">Tweet</a>

js_v9/input.js

@@ -79,7 +79,6 @@ function addKeyListeners() {
 
 	$("#pauseBtn").on('touchstart mousedown', function() {
 
-                alert("hey");
 		if (gameState != 1 && gameState != -1) {
 			return;
 		}

js_v9/render.js

@@ -71,30 +71,21 @@ function render() {
 }
 
 function renderBeginningText() {
-	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 208 * settings.scale, 35, '#2c3e50', 'Controls', '35px Roboto');
-	renderText((trueCanvas.width)/2 - 85 * settings.scale, (trueCanvas.height)/2 - 35 - 169 * settings.scale, 20, '#2c3e50', 'Rotation:', '20px Roboto');
-	renderText((trueCanvas.width)/2 - 21 * settings.scale, (trueCanvas.height)/2 - 35 - 141 * settings.scale, 12, '#2c3e50', 'Left', '12px Roboto');
-	renderText((trueCanvas.width)/2 + 25 * settings.scale, (trueCanvas.height)/2 - 35 - 141 * settings.scale, 12, '#2c3e50', 'Right', '12px Roboto');
-	drawKey("right",(trueCanvas.width)/2 + 23 * settings.scale - 35/2 * settings.scale, (trueCanvas.height)/2 - 35 - 195 * settings.scale);
-	drawKey("left",(trueCanvas.width)/2 - 23 * settings.scale - 35/2 * settings.scale, (trueCanvas.height)/2 - 35 - 195 * settings.scale);
-	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 125 * settings.scale, 20, '#2c3e50', 'Rotate the Hexagon to make combos of 3+ touching blocks!', '20px Roboto');
-	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 105 * settings.scale, 20, '#2c3e50', 'Make combos in a row to receive a score multiplier!', '20px Roboto');
-	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 85 * settings.scale, 20, '#2c3e50', 'Don\'t let the blocks stack outside of the gray Hexagon!', '20px Roboto');
-	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 65 * settings.scale, 20, '#2c3e50', (settings.platform == 'mobile' ? 'Tap the middle to toggle 2x speed!' : 'Hold the down arrow to toggle 2x speed!'), '20px Roboto');
+	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Tap on the left or the right of the screen', '20px Roboto');
+	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/3 - 35 - 105 * settings.scale, 20, '#2c3e50', 'to rotate the hexagon.', '20px Roboto');
+	drawKey("",(trueCanvas.width)/2 + 1.5 * settings.scale - 5 , (trueCanvas.height)/3 - 35 - 107 * settings.scale);
+	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height * 3.1)/3 - 35 - 135 * settings.scale, 20, '#2c3e50', 'Match 3+ blocks to score points.', '20px Roboto');
+	renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height * 3.1 )/3 - 35 -  105 * settings.scale, 20, '#2c3e50', 'Tap the center to double the speed.', '20px Roboto');
+	
+	//renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 35 - 65 * settings.scale, 20, '#2c3e50', (settings.platform == 'mobile' ? 'Tap the middle to toggle 2x speed!' : 'Hold the down arrow to toggle 2x speed!'), '20px Roboto');
 }
 
 function drawKey(key, x, y) {
 	ctx.save();
-	ctx.beginPath();
-	ctx.fillStyle = '#2c3e50';
-	ctx.strokeStyle = '#2c3e50';
-	ctx.lineWidth = 4 * settings.scale;
-	ctx.rect(x + 2.5 * settings.scale, y + 2.5 * settings.scale, 35 * settings.scale, 35 * settings.scale);
-	ctx.stroke();
 
 	switch (key) {
 		case "left":
-			ctx.translate(x + settings.scale * 28, y + settings.scale * 13);
+			ctx.translate(x, y + settings.scale * 13);
 			ctx.rotate(3.14159);
 			ctx.font = "20px Fontawesome";
 			ctx.scale(settings.scale, settings.scale);
@@ -102,16 +93,14 @@ function drawKey(key, x, y) {
 			break;
 		case "right":
 			ctx.font = "20px Fontawesome";
-			ctx.translate(x + settings.scale * 12.5, y + settings.scale * 27.5);
+			ctx.translate(x , y + settings.scale * 27.5);
 			ctx.scale(settings.scale, settings.scale);
 			ctx.fillText(String.fromCharCode("0xf04b"), 0, 0);
 			break;
 		
 		default:
-			ctx.font = "35px Roboto";
-			ctx.translate(x + settings.scale * 25 , y + settings.scale * 39.5);
-			ctx.scale(settings.scale, settings.scale);
-			ctx.fillText(key, 0, 0);
+			drawKey("left", x - 5, y);
+			drawKey("right", x + 5, y);
 	}
 
 	ctx.restore();

style/style.css

@@ -88,44 +88,45 @@ button:focus {
 }
 
 #openSideBar {
-	position: absolute;
-	width:60px;
-	height:60px;
-	top: 2px;
-	left: 4px;
-	z-index: 3002;
-	color:#232323;
-	cursor:pointer;
-}
-
-#pauseBtn {
-	position: absolute;
-	margin-bottom: 20px;
-	width:60px;
-	height:60px;
-	margin-right: 25px;
+	position: fixed;
+	margin-top: 10px;
+	width:72px;
+	height:72px;
+	margin-left: 15px;
+	z-index: 3000;
+	color:#232323;
+	cursor:pointer;
+	top:0;
+	left:0;
+	z-index:99;
+
+}
+
+#pauseBtn {
+	position: fixed;
+	margin-bottom: 10px;
+	width:72px;
+	height:72px;
+	margin-right: 15px;
 	z-index: 3000;
 	color:#232323;
 	cursor:pointer;
-	position:absolute;
 	right:0;
 	bottom:0;
 	z-index:99;
 }
 
 #restartBtn {
-	position:absolute;
-	left:0;
-	width:60px;
-	height:60px;
-	bottom:0;
-	z-index:99;
-	position: absolute;
-	margin-bottom: 18px;
-	margin-left: 10px;
-	z-index:99;
+	position: fixed;
+	margin-bottom: 10px;
+	width:72px;
+	height:72px;
+	margin-left: 15px;
+	z-index: 3000;
 	color:#232323;
 	cursor:pointer;
+	bottom:0;
+	z-index:99;
 }
 
 #helpScreen {
@@ -256,7 +257,12 @@ and (max-device-width : 580px) {
 	font-weight: 400;
 	src: local('Roboto Regular'), local('Roboto-Regular'), url("fonts/roboto.woff") format('woff');
 }
-
+@font-face {
+	font-family: 'icomoon';
+	font-style: normal;
+	font-weight: 400;
+	src: local('icomoon Regular'), url("fonts/icomoon.ttf"), format('ttf');
+}
 @font-face {
 	font-family: 'Q';
 	font-style: normal;