merged

index.html

@@ -59,5 +59,6 @@
         <div onClick="showHelp()" id="openSideBar">?</div>
         <div id="overlay" class="faded"></div>
         <div id = 'pauseBtn'><i class="fa fa-pause fa-2x"></i></div>
+        <div id = 'restartBtn'><i class="fa fa-refresh fa-2x"></i></div>
     </body>
 </html>

js/comboTimer.js

@@ -3,19 +3,21 @@ function drawTimer(){
         for(var i=0;i<6;i++){
             var done = (MainClock.ct -MainClock.lastCombo);
             if(done<(settings.comboMultiplier)*(5-i)*(1/6)){
-                drawSide(i,i+1,1);
+                drawSide(i,i+1,1,1);
+		drawSide(12-i,11-i,1,1);
             }
             else{
-                drawSide(i,i+1,1-((done*6)/settings.comboMultiplier)%(1));
+                drawSide(i,i+1,1-((done*6)/settings.comboMultiplier)%(1),1);
+		drawSide(12-i,11-i,1-((done*6)/settings.comboMultiplier)%(1),1);
                 break;
             }
         }
     }
 }
 
-function drawSide(startVertex,endVertex,fraction){
-    startVertex = startVertex%6;
-    endVertex = endVertex%6;
+function drawSide(startVertex,endVertex,fraction,offset){
+    startVertex = (startVertex+offset)%12;
+    endVertex = (endVertex+offset)%12;
     ctx.globalAlpha=1;
     ctx.beginPath();
     ctx.lineCap = "round";
@@ -28,7 +30,19 @@ function drawSide(startVertex,endVertex,fraction){
     var radius = (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth + 2;
     var halfRadius = radius/2;
     var triHeight = radius *(Math.sqrt(3)/2);
-    var Vertexes =[[halfRadius,triHeight],[radius,0],[halfRadius,-triHeight],[-halfRadius,-triHeight],[-radius,0],[-halfRadius,triHeight]].reverse();
+    var Vertexes =[
+	[(halfRadius*3)/2,triHeight/2],
+	[radius,0],
+	[(halfRadius*3)/2,-triHeight/2],
+	[halfRadius,-triHeight],
+	[0,-triHeight],
+	[-halfRadius,-triHeight],
+	[-(halfRadius*3)/2,-triHeight/2],
+	[-radius,0],
+	[-(halfRadius*3)/2,triHeight/2],
+	[-halfRadius,triHeight],
+	[0,triHeight],
+	[halfRadius,triHeight]].reverse();
     var startX =trueCanvas.width/2 + Vertexes[startVertex][0];
     var startY =trueCanvas.height/2 + Vertexes[startVertex][1];
     var endX = trueCanvas.width/2 + Vertexes[endVertex][0];
@@ -38,4 +52,4 @@ function drawSide(startVertex,endVertex,fraction){
     ctx.closePath();
     ctx.fill();
     ctx.stroke();
-}
+}

js/input.js

@@ -108,6 +108,16 @@ $(document).ready(function(){
 
         return false;
     });
+
+    $("#restartBtn").on('touchstart mousedown', function() {
+        if (gameState==2 || gameState==1 || importing == 1) {
+            init(1);
+        }
+        if (gameState===0) {
+            resumeGame();
+        }
+
+    });
 }, false);
 
 function handleClickTap(x) {

js/main.js

@@ -148,6 +148,7 @@ function resumeGame() {
 	gameState = 1;
 	hideUIElements();
 	$('#pauseBtn').show();
+	$('#restartBtn').show();
 	importing = 0;
 	startTime = Date.now();
 	waveone = saveState.wavegen || new waveGen(MainClock,Date.now(),[1,1,0],[1,1],[1,1]);
@@ -155,6 +156,7 @@ function resumeGame() {
 
 function hideUIElements() {
 	$('#pauseBtn').hide();
+	$('#restartBtn').hide();
 	$('#startBtn').hide();
 }
 
@@ -285,6 +287,7 @@ function stepInitialLoad() {
 		MainClock.y = (trueCanvas.height/2);
 		if (Date.now() - startTime - 500 > 1300) {
 			$('#pauseBtn').show();
+			$('#restartBtn').show();
 			gameState = 1;
 		}
 	} else {

style/style.css

@@ -67,6 +67,23 @@ button:focus {
 	z-index: 3000;
 	color:#000;
 	cursor:pointer;
+        position:absolute;
+        right:0;
+        bottom:0;
+        z-index:99;
+
+}
+#restartBtn {
+        position:absolute;
+        left:0;
+        bottom:0;
+        z-index:99;
+	position: absolute;
+	margin-bottom: 3px;
+	margin-left: 7px;
+	z-index: 3000;
+	color:#000;
+	cursor:pointer;
 }
 
 #helpScreen {
@@ -179,12 +196,6 @@ body {
     margin-top:20px;
     color:#2c3e50;
 }
-#pauseBtn {
-    position:absolute;
-    right:0;
-    bottom:0;
-    z-index:99;
-}
 
 .unselectable {
     -webkit-touch-callout: none;