diff --git a/README.md b/README.md index dcfcfcd..e62c88b 100644 --- a/README.md +++ b/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 +``` diff --git a/app/controllers/controllers.js b/app/controllers/controllers.js index aaa1e52..1d65790 100644 --- a/app/controllers/controllers.js +++ b/app/controllers/controllers.js @@ -26,6 +26,7 @@ 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; @@ -33,11 +34,20 @@ app.controller('januController', ['$scope','$http','$interval', function ($scope // 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() { diff --git a/app/partials/game.html b/app/partials/game.html index cff99e7..378fad7 100644 --- a/app/partials/game.html +++ b/app/partials/game.html @@ -1,7 +1,6 @@

Saturn

-
@@ -12,7 +11,7 @@

{{currentSong.year}}

- album cover + album cover

{{timeLeft}}

Which timespan?

@@ -32,5 +31,5 @@

Which timespan?

NOW
- + diff --git a/content/image/combo-icon.png b/content/image/combo-icon.png new file mode 100644 index 0000000..d29de85 Binary files /dev/null and b/content/image/combo-icon.png differ diff --git a/content/image/congratulation.png b/content/image/congratulation.png new file mode 100644 index 0000000..966cca7 Binary files /dev/null and b/content/image/congratulation.png differ diff --git a/content/image/correct-icon.png b/content/image/correct-icon.png new file mode 100644 index 0000000..3af06e9 Binary files /dev/null and b/content/image/correct-icon.png differ diff --git a/content/image/wrong-icon.png b/content/image/wrong-icon.png new file mode 100644 index 0000000..31f4607 Binary files /dev/null and b/content/image/wrong-icon.png differ diff --git a/content/style.css b/content/style.css index 7d29443..b6bbb4f 100644 --- a/content/style.css +++ b/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;} +}