github/diceware
1
0
Fork 0
mirror of https://github.com/dmuth/diceware.git synced 2024-11-21 08:26:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

Added dice and code to display the dice in the results

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

67
index.html
View file

@ -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 -->

98
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() {
var retval =
String(die_roll()) + String(die_roll())
+ String(die_roll()) + String(die_roll())
+ String(die_roll())
;
retval = parseInt(retval);
var retval = new Array();
retval.push(die_roll());
retval.push(die_roll());
retval.push(die_roll());
retval.push(die_roll());
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();
jQuery(".results_phrase_key").hide();
jQuery(".results_phrase_value").hide();
//
// Remove any old results
//
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() {
jQuery(".results_words_value").fadeIn(500, function() {
jQuery(".results_phrase_key").fadeIn(500, function() {
jQuery(".results_phrase_value").fadeIn(500);
});
});
});
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_value").fadeIn(500, function() {
jQuery(".results_phrase_key").fadeIn(500, function() {
jQuery(".results_phrase_value").fadeIn(500);
});
});
});
}
});