Added dice and code to display the dice in the results

index.html

@@ -11,6 +11,8 @@
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
     <link href="./starter-template.css" rel="stylesheet">
 
+<!-- TEST -->
+    <link href="./dice.css" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -49,6 +51,61 @@
 	</p>
 
 
+	<!-- This row is completely hidden, but is used to hold elements 
+		that get cloned after a dice roll. -->
+	<div class="row source" style="display: none; ">
+		<div class="col-md-12" style="height: 0px; ">
+
+      <div class="side dice1" style="float: left; ">
+        <div class="dot center"></div>
+      </div>
+
+      <div class="side dice2" style="float: left; ">
+        <div class="dot dtop dleft"></div>
+        <div class="dot dbottom dright"></div>
+      </div>
+
+      <div class="side dice3" style="float: left; ">
+        <div class="dot dtop dleft"></div>
+        <div class="dot center"></div>
+        <div class="dot dbottom dright"></div>
+      </div>
+
+      <div class="side dice4" style="float: left; ">
+        <div class="dot dtop dleft"></div>
+        <div class="dot dtop dright"></div>
+        <div class="dot dbottom dleft"></div>
+        <div class="dot dbottom dright"></div>
+      </div>
+
+      <div class="side dice5" style="float: left; ">
+        <div class="dot dtop dleft"></div>
+        <div class="dot dtop dright"></div>
+        <div class="dot center"></div>
+        <div class="dot dbottom dleft"></div>
+        <div class="dot dbottom dright"></div>
+      </div>
+
+      <div class="side dice6" style="float: left; ">
+        <div class="dot dtop dleft"></div>
+        <div class="dot dtop dright"></div>
+        <div class="dot center dleft"></div>
+        <div class="dot center dright"></div>
+        <div class="dot dbottom dleft"></div>
+        <div class="dot dbottom dright"></div>
+      </div>
+
+			<span class="results_words_key" >Your words are: </span>
+			<span class="results_words_value" ></span>
+			<p/>
+
+			<span class="results_phrase_key" >Your passphrase is: </span>
+			<span class="results_phrase_value" ></span>
+			<p/>
+
+		</div>
+	</div>
+
 	<div class="row">
 		<div class="col-md-12">
 
@@ -77,17 +134,9 @@
 	<p/>
 
 	<div class="row">
-		<div class="col-md-12" style="height: 100px; ">
+		<div class="col-md-12" >
 		<div class="results" >
 
-			<span class="results_words_key" style="display: none; ">Your words are:</span>
-			<span class="results_words_value" style="display: none; "></span>
-			<p/>
-
-			<span class="results_phrase_key" style="display: none; ">Your passphrase is:</span>
-			<span class="results_phrase_value" style="display: none; "></span>
-			<p/>
-
 		</div>
 		</div>
 	</div><!-- /row -->

main.js

@@ -14,17 +14,17 @@ function die_roll() {
 
 
 /**
-* Roll a die n times.
+* Roll a die 5 times.
 *
-* @return integer a 5-digit integer representing 5 dice rolls.
+* @return array an Array of 5 dice rolls
 */
 function roll_dice() {
-	var retval = 
+	var retval = new Array();
-		String(die_roll()) + String(die_roll())
+	retval.push(die_roll());
-		+ String(die_roll()) + String(die_roll())
+	retval.push(die_roll());
-		+ String(die_roll())
+	retval.push(die_roll());
-		;
+	retval.push(die_roll());
-	retval = parseInt(retval);
+	retval.push(die_roll());
 	return(retval);
 }
 
@@ -58,29 +58,87 @@ jQuery(".dice_button").on("click", function(e) {
 //
 jQuery("#roll_dice").on("click", function(e) {
 
-	jQuery(".results_words_key").hide();
+	//
-	jQuery(".results_words_value").hide();
+	// Remove any old results
-	jQuery(".results_phrase_key").hide();
+	//
-	jQuery(".results_phrase_value").hide();
+	jQuery(".results").empty();
 
+	//
+	// Make our dice rolls
+	//
 	var num_dice = jQuery(".dice_button.active").html();
 	var passphrase = new Array();
 
+	var rolls = new Array();
 	for (var i=0; i<num_dice; i++) {
 		var roll = roll_dice();
-		passphrase.push(get_word(wordlist, roll));
+		rolls.push(roll);
+		passphrase.push(get_word(wordlist, roll.join("")));
 	}
 
+	//
+	// Populate our results
+	//
 	jQuery(".results_words_value").html(passphrase.join(" "));
 	jQuery(".results_phrase_value").html(passphrase.join(""));
 
-	jQuery(".results_words_key").fadeIn(500, function() {
+	var rows = new Array();
-		jQuery(".results_words_value").fadeIn(500, function() {
+	for (key in rolls) {
-		jQuery(".results_phrase_key").fadeIn(500, function() {
+
-		jQuery(".results_phrase_value").fadeIn(500);
+		var roll = rolls[key];
-		});
+		var row = jQuery("<div></div>");
-		});
+
-		});
+		for (key2 in roll) {
+			var die = roll[key2];
+			var classname = ".source .dice" + die;
+			jQuery(classname).clone().appendTo(row);
+		}
+
+		rows.push(row);
+
+	}
+
+	//
+	// This function goes through our rows, calling itself and 
+	// displaying each row after a delay.
+	//
+	function process_row(rows) {
+
+		if (rows.length) {
+			var row = rows.shift();
+			row.hide().appendTo(".results").fadeIn(500, function() {
+				jQuery(".results").append("<br clear=\"all\" />");
+				process_row(rows);
+				});
+
+		} else {
+			display_results();
+
+		}
+
+	}
+
+	process_row(rows);
+
+	//
+	// Display the actual results
+	//
+	function display_results() {
+		jQuery(".results_words_key").hide().clone().appendTo(".results");
+		jQuery(".results_words_value").hide().clone().appendTo(".results");
+		jQuery(".results").append("<br clear=\"all\" />");
+		jQuery(".results_phrase_key").hide().clone().appendTo(".results");
+		jQuery(".results_phrase_value").hide().clone().appendTo(".results");
+
+		jQuery(".results_words_key").fadeIn(500, function() {
+			jQuery(".results_words_value").fadeIn(500, function() {
+			jQuery(".results_phrase_key").fadeIn(500, function() {
+			jQuery(".results_phrase_value").fadeIn(500);
+			});
+			});
+			});
+
+	}
 
 });