mirror of
https://github.com/dmuth/diceware.git
synced 2024-11-21 16:36:28 -05:00
Added dice and code to display the dice in the results
This commit is contained in:
Douglas Muth
parent
34ce94dbac
commit
65f90ed4ec
2 changed files with 136 additions and 29 deletions
67
index.html
67
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 -->
|
||||
|
|
|
|||
84
main.js
84
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 =
|
||||
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,22 +58,78 @@ 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(""));
|
||||
|
||||
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() {
|
||||
|
|
@ -82,6 +138,8 @@ jQuery("#roll_dice").on("click", function(e) {
|
|||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue