From 63ce593a7a1ff95b0e18b549abbce937b80937ee Mon Sep 17 00:00:00 2001
From: s2 <s2@31337.it>
Date: Sat, 6 Apr 2013 01:54:47 +0200
Subject: [PATCH] times & game over page & other cool stuff

---
 app/js/index.js        | 78 +++++++++++++++++++++++++++++++++++-------
 app/views/gameover.ejs | 13 +++++++
 app/views/index.ejs    |  3 ++
 3 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 app/views/gameover.ejs

diff --git a/app/js/index.js b/app/js/index.js
index 008227c..10d6ca5 100644
--- a/app/js/index.js
+++ b/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);
 
diff --git a/app/views/gameover.ejs b/app/views/gameover.ejs
new file mode 100644
index 0000000..efb68ae
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/views/index.ejs b/app/views/index.ejs
index d499978..8411f4e 100644
--- a/app/views/index.ejs
+++ b/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 />