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

Updated how the dice are shown--they're now shown one die at a time, and then the entire row fades out.

Browse source
This commit is contained in:
Douglas Muth 2015-04-27 21:34:14 -04:00
parent 8fdb7fd030
commit 1565c4be14
3 changed files with 43 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dice.css
View file

@ -1,5 +1,5 @@
.side {
.die {
width: 100px;
height: 100px;
background: #ff2222;

14
index.html
View file

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

38
main.js
View file

@ -96,17 +96,37 @@ 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();
});
//
// 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.
//