Render characters by calling API

To render the characters, get character names and image locations from
the internal API and render them using an Underscore template.

1 files changed, 33 insertions, 5 deletions

diff --git a/public/javascripts/main.js b/public/javascripts/main.js
index 40a9fae..c06d9d6 100644
--- a/public/javascripts/main.js
+++ b/public/javascripts/main.js
@@ -1,9 +1,37 @@
+// CoverFlow
 (function() {
-	var cf = new ContentFlow('character-select', {
-		reflectionColor: "#000000",
+	var initialise_content_flow = function() {
+		var cf = new ContentFlow('character-select', {
+			reflectionColor: "#000000",
 		
-		onclickActiveItem: function(item) {
-			alert('hello');
+			onclickActiveItem: function(item) {
+				alert('hello');
+			}
+		});
+		
+		return cf;
+	};
+	initialise_content_flow();
+
+	// Populate characters
+	
+	// Change template settings to use {{}} delimiters
+	_.templateSettings = {
+		interpolate: /\{\{(.+?)\}\}/g
+	};
+	
+	var $character_container = $('#character-select .flow');
+	var character_template = _.template($('#character-image-template').html());
+	$.get(
+		'/character-images',
+		function(response) {
+			var r = JSON.parse(response);
+			
+			$character_container.empty()
+			
+			for (var i = 0; i < r.characters.length; i++) {
+				$character_container.append(character_template(r.characters[i]));
+			}
 		}
-	});
+	);
 })();
\ No newline at end of file