times & game over page & other cool stuff

app/js/index.js

@@ -7,15 +7,7 @@ if (typeof(sw) == 'undefined') {
 (function($) {
 	
 	
-	//helper functions
-	var pulse = function pulse(elem, duration, easing, props_to, props_from, until) {
-		elem.animate(props_to, duration, easing, function() {
-			if (until() == false) {
-				pulse(elem, duration, easing, props_from, props_to, until);
-			}
-		});
-	};
-	
+	//helper functions	
 	var shuffle = function(obj) {
 		return obj.sort( function() { return 0.5 - Math.random(); } );
 	};
@@ -51,6 +43,49 @@ if (typeof(sw) == 'undefined') {
 		$("#main").empty().html('views/index.ejs', selectWordsForGame());
 	};
 	
+	var gameOver = function() {
+		sw.gameover = true;
+		var result = 'Bravissimo!';
+
+		if (sw.wrongWords > 1 || sw.finaltime > 60) {
+			result = 'insomma...';
+		};
+		if (sw.wrongWords > 1 || sw.finaltime > 50) {
+			result = 'puoi fare meglio!';
+		};
+		if (sw.wrongWords > 1 && sw.finaltime < 40) {
+			result = 'sei velocissimo ma hai commesso errori';
+		};
+		
+		$("#main").empty().html('views/gameover.ejs', {result: result, time: sw.finaltime, wrong: sw.wrongWords, correct: sw.correctWords});
+	};
+	
+	var startNewGame = function() {
+		var playforwords = 10;
+		sw.correctWords = 0;
+		sw.wrongWords = 0;
+		sw.time = moment();
+		sw.gameover = false;
+		
+		var updateBadges = function() {
+			$('.num-of-words-wrong').html(sw.wrongWords + (sw.wrongWords == 1 ? ' word' : ' words'));
+			$('.num-of-words').html(sw.correctWords + (sw.correctWords == 1 ? ' word' : ' words'));
+			$('.time-words').html(moment.duration(moment() - sw.time).seconds());
+			
+			if(playforwords > sw.correctWords + sw.wrongWords) {
+				setTimeout(function() {
+					updateBadges();
+				}, 100);
+			} else {
+				sw.finaltime = moment.duration(moment() - sw.time).seconds();
+				sw.gameover = true;
+			}
+		};
+		updateBadges();
+		
+		startGame();
+	};
+	
 	//start app
 	var w = $.ajax({
 		url: sw.apiPrefix + "words.json",
@@ -71,29 +106,46 @@ if (typeof(sw) == 'undefined') {
 	
 	//events
 	$(document).on('click', '.start', function() {
-		startGame();
+		startNewGame();
 	});
 
 	$(document).on('click', '.word-button', function(ev, el) {
 		el = $(ev.currentTarget);
+		if (el.hasClass('disabled')) {
+			return;
+		}
+		$('.word-button').addClass('disabled');
 		if(sw.currentWord == el.html()) {
+			sw.correctWords = sw.correctWords + 1;
 			el.addClass('btn-success');
 		} else {
+			sw.wrongWords = sw.wrongWords + 1;
 			el.addClass('btn-danger');
 		}
 		
 		setTimeout(function() {
 			$('.word-button[data-word="' + sw.currentWord + '"]').addClass('btn-success');
 			
-			setTimeout(function() {
-				startGame();
-			}, 1000);
+			if(sw.gameover) {
+				setTimeout(function() {
+					gameOver();
+				}, 1000);
+			} else {
+				setTimeout(function() {
+					startGame();
+				}, 1000);
+			}
 		}, 1000);
 	});
 	
 	
 	//globals
 	sw.words = [];
+	sw.correctWords = 0;
+	sw.wrongWords = 0;
+	sw.time = 0;
+	sw.finaltime = 0;
+	sw.gameover = false;
 	sw.currentWord;
 })(jQuery);
 

app/views/gameover.ejs

@@ -0,0 +1,13 @@
+<div class="hero-unit" style="text-align: center;">
+	<h1 class="alert alert-block"><%= result %></h1>
+	<hr />
+	<p>
+		<h2 class="alert alert-info">You did it in <%= time %> seconds</h2>
+		<h2 class="alert alert-error">You failed <%= wrong + (wrong == 1 ? ' word' : ' words') %></h2>
+		<h2 class="alert alert-success">Ad did <%= correct + (correct == 1 ? ' word' : ' words') %> right!</h2>
+	</p>
+	<hr />
+	<p>
+		<a class="btn btn-primary btn-large start"> Play again! </a>
+	</p>
+</div>

app/views/index.ejs

@@ -1,3 +1,6 @@
+<span class="label label-important pull-right num-of-words-wrong"></span>
+<span class="label label-success pull-right num-of-words"></span>
+<span class="label label pull-right time-words"></span>
 <div class="hero-unit" style="text-align: center;">
 	<h1><%= word %></h1>
 	<hr />