some merges

app/controllers/controllers.js

@@ -49,9 +49,10 @@ app.controller('januController', ['$scope','$http','$interval', function ($scope
       else
         $scope.timeLeft = 15;
       if (timeLeft <= 0) {
-        $('#album-cover').removeClass('animate-blur');
+        $scope.timeLeft = 0;
+      	$('#album-cover').removeClass('animate-blur');
         $('#album-cover').removeClass('no-blur');
-        if ($scope.roundActive) {
+        if ($scope.roundActive && !musicLoading()) {
           $scope.roundActive = false;
           checkAnswer();
         }
@@ -82,6 +83,9 @@ app.controller('januController', ['$scope','$http','$interval', function ($scope
   }
 
   $scope.placeMarker = function () {
+    if (!$scope.roundActive)
+      return;
+
     index = markerIndex();
 
     //if it's the final span, then represent as -1
@@ -154,7 +158,7 @@ app.controller('januController', ['$scope','$http','$interval', function ($scope
 		janu.timelineYears.sort();
   }
 
-  function checkAnswer() {
+  function checkAnswerInternal() {
     ans = $scope.currentAnswer ;
 
     if (ans === undefined || ans === null) {
@@ -180,6 +184,7 @@ app.controller('januController', ['$scope','$http','$interval', function ($scope
     //clear the selection
     $scope.currentAnswer = null;
 
+    // new song
     newSong = fetchNewSong();
     playSong(newSong);
     $scope.markerSet = false;
@@ -188,6 +193,15 @@ app.controller('januController', ['$scope','$http','$interval', function ($scope
 
   }
 
+  function checkAnswer() {
+    $scope.roundActive = false;
+    $("#song-details").fadeIn(500);
+    setTimeout(function () {
+      $("#song-details").fadeOut(500);
+      checkAnswerInternal();
+    }, 3000);
+  }
+
   function answerSuccess() {
     addSongToTimeline($scope.currentSong); 
     $scope.score.total += ($scope.score.round * $scope.comboplyer);

app/partials/game.html

@@ -32,4 +32,6 @@ <h2 id="question">Which timespan?</h2>
 </div>
 
 <div id="game-footer"><h2 id="score">SCORE <em>{{score.total}}</em><em class="emergency">{{(score.round!=0 && ' + ' + score.round + (' x ' + comboplyer)|| '')}}</em></h2><h2 id="round">CORRECT GUESSES {{timelineSongs.length}} / 10</h2></div>
+<img src="content/image/combo-icon.png" alt="COMBO" id="combo" />
+
 

app/partials/win.html

@@ -1,6 +1,7 @@
 <div id="win">
-	<img src="content/image/logo.png" alt="logo" id="logo" />
+	<img src="content/image/congratulation.png" alt="logo" />
 
-	<h2>YOU WON!</h2>
-	<p>Hope you had fun! Here are all the songs:</p>
+	<p>Hope you had fun!</p>
+
+	<a href="/game"><button>Play again!</button></a>
 </div>

content/style.css

@@ -325,7 +325,7 @@ label {
     float: right;
 }
 
-#start {
+#start, #win {
     background: rgba(255, 255, 255,0.9);
     width: 500px;
     margin: auto;
@@ -340,6 +340,11 @@ label {
     padding-bottom: 45px;
 }
 
+#win {
+    width: 800px;
+    top: 160px;
+}
+
 #start #logo, #win #logo {
     width: 250px;
     margin-bottom: 25px;
@@ -377,6 +382,13 @@ button {
     float: left;
 }
 
+#combo {
+    position: absolute;
+    bottom: 100px;
+    left: 65px;
+    opacity: 0.6;
+}
+
 .correct {
     border-color: #6fc076!important;
 } 

scripts/musicPlayer.js

@@ -1,9 +1,11 @@
 var audio = new Audio();
+audio.loading = false;
 var TIME_PER_SONG = 20.0;
 var TIME_BETWEEN_ROUNDS = 5.0;
 var TIME_PER_ROUND = TIME_PER_SONG - TIME_BETWEEN_ROUNDS;
 
 function playSong(song){
+  audio.loading = true;
   previewURL(song.song_id, function (preview_url) {
     audio.src = preview_url;
     var skipped = false;
@@ -14,6 +16,7 @@ function playSong(song){
       }
     });
     audio.play();
+    audio.loading = false;
   });
 }
 
@@ -38,9 +41,6 @@ function getTimeLeft() {
   }
 }
 
-function isPlaying() {
-  if (audio.duration)
-    return true;
-  else
-    return false;
+function musicLoading() {
+  return audio.loading;
 }