Merge branch 'master' of https://github.com/diversify/janu

# By Juntima Nawilaijaroen (2) and others
# Via scanniza (2) and Mattias Arrelid (1)
* 'master' of https://github.com/diversify/janu:
  Better description is better.
  combo icon
  resource for winning screen
  blur-animation
  pulsing score

Conflicts:
	app/partials/game.html

README.md

@@ -1,7 +1,11 @@
 # Diversify your music taste
 
+This is a game that will help you broaden your taste in music.
+
 # How to get started
 
-- Clone the repo
-- Start an HTTP server in the root of the repository. Some people like ``python -m SimpleHTTPServer``
-- Visit the server in your web browser of choice
+```bash
+git clone $THIS_REPO
+python -m SimpleHTTPServer
+# Visit the page served by the web server above
+```

app/controllers/controllers.js

@@ -26,18 +26,28 @@ app.controller('januController', ['$scope','$http','$interval', function ($scope
 
     // this is the first song the user guesses
     firstSong = fetchNewSong();
+    $('#album-cover').addClass('no-blur'); 
     playSong(firstSong);
 
     $scope.gameInSession = true;
 
     // start the timer
     $interval(function(){
       timeLeft = getTimeLeft();
-      	if(timeLeft<16)
+      	if(timeLeft<16){
     		$scope.timeLeft = timeLeft; 
+    		if(timeLeft==15){
+    			$('#album-cover').addClass('animate-blur');
+    		}
+    		if(timeLeft==14){
+    			$('#album-cover').addClass('no-blur');
+    		}
+      	}
     	else
     		$scope.timeLeft = 15;
       if (timeLeft <= 0) {
+      	$('#album-cover').removeClass('animate-blur');
+    	$('#album-cover').removeClass('no-blur');
         checkAnswer();
       }
     }, 1000);
@@ -158,9 +168,11 @@ app.controller('januController', ['$scope','$http','$interval', function ($scope
     //clear the selection
     $scope.currentAnswer = null;
 
-    newSong = fetchNewSong();  
+    newSong = fetchNewSong();
     playSong(newSong);
     $scope.markerSet = false;
+    $scope.score.round = 0;
+
   }
 
   function answerSuccess() {

app/partials/game.html

@@ -1,7 +1,6 @@
 
 
 <div id="game-header"><h2><a href="/"><img src="content/image/logo.png" alt="logo" id="logo" /> <h2>Saturn</h2></a></div>
-<!-- <input type="button" value = "Add Song" ng&#45;click="addSong()"> -->
 <div class="rings-in-back"></div>
 <div class="rings-in-front"></div>
 
@@ -12,7 +11,7 @@ <h2>{{currentSong.year}}</h2>
 </div>
 
 <div id="game-content" ng-init="init()">
-  <img src="content/image/audiowave-gif.gif" id="album-cover" alt="album cover" />
+  <img ng-src="{{currentSong.image_url !== null && currentSong.image_url || 'content/image/audiowave-gif.gif'}}" id="album-cover" alt="album cover" class="animate-blur"/>
   <div ng-if="gameInSession" class="question-and-timer">
   	<h2 id="timer"><strong>{{timeLeft}}</strong></h2>
     <h2 id="question">Which timespan?</h2>
@@ -32,5 +31,5 @@ <h2 id="question">Which timespan?</h2>
 	<div id="endpoint">NOW</div>
 </div>
 
-<div id="game-footer"><h2 id="score">SCORE <em>{{score.total}}</em></h2><h2 id="round">CORRECT GUESSES {{timelineSongs.length}} / 10</h2></div>
+<div id="game-footer"><h2 id="score">SCORE <em>{{score.total}}</em><em class="emergency">{{score.round!=0 && ' +' + score.round || ''}}</em></h2><h2 id="round">CORRECT GUESSES {{timelineSongs.length}} / 10</h2></div>
 

content/style.css

@@ -110,9 +110,19 @@ label {
     border-radius: 50%;
     position: relative;
     -webkit-filter: blur(10px);
+    -moz-filter: blur(10px);
     filter: blur(10px);
     z-index: 4;
 }
+.no-blur{
+    -webkit-filter: blur(0px)!important;
+    -moz-filter: blur(0px)!important;
+    filter: blur(0px)!important;
+}
+.animate-blur{
+    -webkit-transition:17s -webkit-filter linear!important;
+    transition:-webkit-filter 17s linear!important;
+}
 
 .rings-in-back { 
     padding: 15px;
@@ -374,3 +384,21 @@ button {
 .wrong {
     border-color: #da3e2f !important;
 }
+.emergency
+{
+ -webkit-animation: cc 1s ease-in 1s infinite alternate;
+ animation: cc 1s ease-in 1s infinite alternate;
+ color: #eee;
+}
+
+@-webkit-keyframes cc
+{
+ 0%   { color: #eee;}
+ 100% { color: #c66 ;}
+}
+
+@keyframes cc
+{
+ 0%   { color: #eee;}
+ 100% { color: #c66;}
+}