When you pick a character, show a dialog

The dialog contains a message based on whether or not you had the
correct answer.

7 files changed, 133 insertions, 6 deletions

diff --git a/TODO b/TODO
index 88040af..331e12f 100644
--- a/TODO
+++ b/TODO
@@ -11,3 +11,4 @@ v Push to Heroku
 v Change Coverflow library
 - Make Leaderboard page
 - Make Rules page
+- Spinner until everything loads
diff --git a/public/javascripts/app.js b/public/javascripts/app.js
index c700880..759c5eb 100644
--- a/public/javascripts/app.js
+++ b/public/javascripts/app.js
@@ -5,6 +5,7 @@ var App = App || null;
 		this.characters = [];
 		this.answer = null;
 		this.answer_name = '';
+		this.answer_image_url = '';
 		this.playlist = []
 		
 		
@@ -21,7 +22,10 @@ var App = App || null;
 				this.on('click', function(e) {
 					if (the_other.playlist[e].title == the_other.answer_name) {
 						// Answered correctly
-						the_other.correct_answer();
+						the_other.pick_character({ correct: true });
+					}
+					else {
+						the_other.pick_character({ correct: false });
 					}
 				});
 			});
@@ -61,6 +65,7 @@ var App = App || null;
 						
 						if (params.answer_id == r.characters[i].tms_personId) {
 							that.answer_name = r.characters[i].name;
+							that.answer_image_url = r.characters[i].image
 						}
 					}
 					that.initialise_js_cover_flow(that.playlist);
@@ -68,8 +73,23 @@ var App = App || null;
 			);
 		};
 		
-		this.correct_answer = function() {
-			alert('chosen');
+		this.pick_character = function(params) {
+			var params = params || {
+				correct: false
+			};
+			
+			var $open_dialog_button = $('<a id="character-chosen-dialog-button" href="#" data-transition="slideup" style="display: none;"></a>');
+			$('body').append($open_dialog_button);
+			var $open_dialog_button_in_dom = $('#character-chosen-dialog-button');
+			
+			if (params.correct) {
+				$open_dialog_button_in_dom.attr('href', '/character-chosen/true');
+			}
+			else {
+				$open_dialog_button_in_dom.attr('href', '/character-chosen/false/?character_name=' + this.answer_name + '&character_image_url=' + this.answer_image_url);
+			}
+			
+			$open_dialog_button_in_dom.trigger('click');
 		};
 		
 		
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index b9d84e1..1c3215e 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -1,6 +1,11 @@
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
 
 
+b {
+	font-weight: bold;
+}
+
+
 section.video {
 	position: relative;
 	padding-bottom: 56.25%;
@@ -36,6 +41,33 @@ footer {
 }
 
 
+/* Character Chosen dialog */
+/*
+body.character-chosen-dialog .ui-body-c {
+	background-color: #ddd;
+}
+*/
+
+#character-chosen-content {
+	width: 95%;
+	margin: 0 auto;
+	position: relative;
+	top: 2em;
+}
+
+#character-chosen-content h1 {
+	font-size: 2em;
+	font-weight: bold;
+	line-height: 1.2em;
+	text-align: center;
+}
+
+#character-chosen-content p {
+	margin-top: 1em;
+	text-align: center;
+}
+
+
 /* jQuery Mobile overrides */
 
 .ui-body-c {
diff --git a/routes/character-chosen-dialog.js b/routes/character-chosen-dialog.js
new file mode 100644
index 0000000..db5a6c0
--- /dev/null
+++ b/routes/character-chosen-dialog.js
@@ -0,0 +1,11 @@
+module.exports = function(req, res) {
+	this.success = req.params.success;
+	
+	this.data = {
+		success: this.success,
+		character_name: req.query.character_name,
+		character_image_url: req.query.character_image_url
+	};
+	
+	res.render('character-chosen-dialog', this.data);
+};
\ No newline at end of file
diff --git a/routes/index.js b/routes/index.js
index f0d7c86..20333b5 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,7 +1,9 @@
 module.exports = function(app) {
 	var index = require('./home')
-	  , character_images = require('./character-images');
+	  , character_images = require('./character-images')
+	  , character_chosen_dialog = require('./character-chosen-dialog');
 	
 	app.get('/', index);
 	app.get('/character-images/:series_id', character_images);
+	app.get('/character-chosen/:success', character_chosen_dialog);
 };
\ No newline at end of file
diff --git a/views/character-chosen-dialog.ejs b/views/character-chosen-dialog.ejs
new file mode 100644
index 0000000..2d37ea4
--- /dev/null
+++ b/views/character-chosen-dialog.ejs
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+	<meta charset="utf-8">
+	<meta http-equiv="cache-control" content="no-cache" />
+	<title>Who Am I?</title>
+	<meta name="description" content="">
+
+	<meta name="viewport" content="width=device-width">
+	
+	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
+	<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" media="screen" />
+	
+	<script src="/javascripts/vendor/jquery-2.0.0.min.js"></script>
+	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
+	<script src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
+	<script src="/javascripts/vendor/underscore-min.js"></script>
+</head>
+<body class="character-chosen-dialog">
+	<div role="main">
+		<div data-role="header">
+			<a href="#" data-rel="back" data-icon="delete" data-transition="slidedown">Close</a>
+			<h1></h1>
+		</div>
+		
+		<section id="character-chosen-content">
+			<% if (success === 'true') { %>
+				<h1>Congratulations you're right! You just won 1 million Viggle points!</h1>
+			<% } else { %>
+				<h1>Sorry, that wasn't the right character. Keep watching and you'll get it next time.</h1>
+				
+				<p>
+					The right one was:
+				</p>
+				
+				<p>
+					<b><%= character_name %></b>
+				</p>
+				
+				<p>
+					<img src="<%= character_image_url %>" alt="<%= character_name %>" height="150" />
+				</p>
+			<% } %>
+		</section>
+	</div>
+	
+	<script>
+		(function() {
+			$('div[data-role="page"]').css('background-color', '#ddd');
+			$('div[data-role="page"]').on('pagehide', function() {
+				$(this).css('background-color', '#000');
+			});
+			
+			$('a[data-rel="back"]').on('click', function() {
+				$('#character-chosen-dialog-button').remove();
+			});
+		})();
+	</script>
+</body>
+</html>
diff --git a/views/index.ejs b/views/index.ejs
index fd5b454..de8c3f0 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -37,8 +37,8 @@
 			<div data-role="navbar">
 				<ul>
 					<li><a href="#" data-icon="home">Home</a></li>
-					<li><a href="leaderboard.html" data-icon="star" data-role="button" data-transition="slide" data-inline="true">Leaderboard</a></li>
-					<li><a href="rules.html" data-icon="grid" data-role="button" data-transition="slide" data-inline="true">Rules</a></li>
+					<li><a href="#" data-icon="star" data-role="button" data-transition="slide" data-inline="true">Leaderboard</a></li>
+					<li><a href="#" data-icon="grid" data-role="button" data-transition="slide" data-inline="true">Rules</a></li>
 				</ul>
 			</div>
 		</div>