From 1565c4be14de2f6d363ad5813069999ad485bed0 Mon Sep 17 00:00:00 2001
From: Douglas Muth <dmuth@dmuth.org>
Date: Mon, 27 Apr 2015 21:34:14 -0400
Subject: [PATCH] Updated how the dice are shown--they're now shown one die at
 a time, and then the entire row fades out.

---
 dice.css   |  2 +-
 index.html | 14 +++++++-------
 main.js    | 44 +++++++++++++++++++++++++++++++++++---------
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/dice.css b/dice.css
index f779c36..da0aec9 100644
--- a/dice.css
+++ b/dice.css
@@ -1,5 +1,5 @@
 
-.side {
+.die {
     width: 100px;
     height: 100px;
     background: #ff2222;
diff --git a/index.html b/index.html
index 63ffba9..341f42f 100644
--- a/index.html
+++ b/index.html
@@ -41,29 +41,29 @@
 	<div class="row source" style="display: none; ">
 		<div class="col-md-12" style="height: 0px; ">
 
-      <div class="side dice1" style="float: left; ">
+      <div class="die dice1 dice_element" style="float: left; ">
         <div class="dot center"></div>
       </div>
 
-      <div class="side dice2" style="float: left; ">
+      <div class="die dice2 dice_element" 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="die dice3 dice_element" 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="die dice4 dice_element" 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="die dice5 dice_element" style="float: left; ">
         <div class="dot dtop dleft"></div>
         <div class="dot dtop dright"></div>
         <div class="dot center"></div>
@@ -71,7 +71,7 @@
         <div class="dot dbottom dright"></div>
       </div>
 
-      <div class="side dice6" style="float: left; ">
+      <div class="die dice6 dice_element" style="float: left; ">
         <div class="dot dtop dleft"></div>
         <div class="dot dtop dright"></div>
         <div class="dot center dleft"></div>
@@ -80,7 +80,7 @@
         <div class="dot dbottom dright"></div>
       </div>
 
-	<div class="dice_word" style="float: left; padding-left: 20px; padding-top: 25px; ">
+	<div class="dice_word dice_element" style="float: left; padding-left: 20px; padding-top: 25px; ">
 	</div>
 
 		<div class="results_words_key" >Your words are: </div>
diff --git a/main.js b/main.js
index 61e3d0a..b6d0d67 100644
--- a/main.js
+++ b/main.js
@@ -96,20 +96,40 @@ jQuery(".dice_button").on("click", function(e) {
 */
 function display_row(rows, cb) {
 
-	var duration = 250;
-	var fadeout_delay = 500;
+	var fadein_duration = 250;
+	var fadeout_delay = 750;
 
 	if (rows.length) {
 		//
-		// Display a row, then call ourselves again then done.
+		// Grab a row, and hide each of the dice and the word in it.
 		//
 		var row = rows.shift();
-		var tmp = row.hide().appendTo(".results")
-			.fadeIn(duration, function() {
+		var html = row.hide().appendTo(".results");
+		html.find(".dice_element").each(function(i, value) {
+			jQuery(value).hide();
+		});
 
-				jQuery(this).delay(fadeout_delay)
-					.fadeOut(fadeout_delay, function() {
-						display_row(rows, cb);
+		//
+		// Now show the row, and loop through each element, fading in
+		// the dice and the word in sequence.
+		//
+		html.show(fadein_duration, function() {
+
+			jQuery(this).find(".dice_element").each(function(i, value) {
+				var delay = i * 100;
+				setTimeout(function() {
+					jQuery(value).show();
+				}, delay);
+
+				});
+
+			//
+			// Now fade out the entire row, and call ourselves again
+			// so we can repeat with the next row.
+			//
+			jQuery(this).delay(fadeout_delay)
+				.fadeOut(fadeout_delay, function() {
+					display_row(rows, cb);
 				});
 
 			});
@@ -183,7 +203,7 @@ jQuery("#roll_dice").on("click", function(e) {
 
 	var target_height = 200;
 	if (is_mobile()) {
-		target_height = 300;
+		target_height = 400;
 	}
 
 	jQuery(".results").animate({height: target_height}, 400);
@@ -261,6 +281,10 @@ jQuery("#roll_dice").on("click", function(e) {
 	// Now display those rows.
 	//
 	display_row(rows, function() {
+
+		//
+		// And then display the results
+		//
 		display_results(function() {
 
 		//
@@ -290,10 +314,12 @@ if (!is_mobile()) {
 	jQuery("#github_ribbon").fadeIn(1000);
 }
 
+
 if (!i_can_has_good_crypto()) {
 	jQuery(".source .bad_crypto").clone().hide().fadeIn(800).appendTo(".message");
 }
 
+
 //
 // Load our wordlist.
 //