Added dice and code to display the dice in the results

This commit is contained in:
Douglas Muth 2015-04-26 02:08:58 -04:00
parent 34ce94dbac
commit 65f90ed4ec
2 changed files with 136 additions and 29 deletions

View file

@ -11,6 +11,8 @@
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="./starter-template.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 --> <!-- 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:// --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -49,6 +51,61 @@
</p> </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="row">
<div class="col-md-12"> <div class="col-md-12">
@ -77,17 +134,9 @@
<p/> <p/>
<div class="row"> <div class="row">
<div class="col-md-12" style="height: 100px; "> <div class="col-md-12" >
<div class="results" > <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> </div>
</div><!-- /row --> </div><!-- /row -->

84
main.js
View file

@ -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() { 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); return(retval);
} }
@ -58,22 +58,78 @@ jQuery(".dice_button").on("click", function(e) {
// //
jQuery("#roll_dice").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 num_dice = jQuery(".dice_button.active").html();
var passphrase = new Array(); var passphrase = new Array();
var rolls = new Array();
for (var i=0; i<num_dice; i++) { for (var i=0; i<num_dice; i++) {
var roll = roll_dice(); 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_words_value").html(passphrase.join(" "));
jQuery(".results_phrase_value").html(passphrase.join("")); jQuery(".results_phrase_value").html(passphrase.join(""));
var rows = new Array();
for (key in rolls) {
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_key").fadeIn(500, function() {
jQuery(".results_words_value").fadeIn(500, function() { jQuery(".results_words_value").fadeIn(500, function() {
jQuery(".results_phrase_key").fadeIn(500, function() { jQuery(".results_phrase_key").fadeIn(500, function() {
@ -82,6 +138,8 @@ jQuery("#roll_dice").on("click", function(e) {
}); });
}); });
}
}); });