github/diceware
1
0
Fork 0
mirror of https://github.com/dmuth/diceware.git synced 2024-11-25 02:06:33 -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; width: 100px;
height: 100px; height: 100px;
background: #ff2222; background: #ff2222;

14
index.html
View file

@ -41,29 +41,29 @@
<div class="row source" style="display: none; "> <div class="row source" style="display: none; ">
<div class="col-md-12" style="height: 0px; "> <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 class="dot center"></div>
</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 dtop dleft"></div>
<div class="dot dbottom dright"></div> <div class="dot dbottom dright"></div>
</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 dtop dleft"></div>
<div class="dot center"></div> <div class="dot center"></div>
<div class="dot dbottom dright"></div> <div class="dot dbottom dright"></div>
</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 dleft"></div>
<div class="dot dtop dright"></div> <div class="dot dtop dright"></div>
<div class="dot dbottom dleft"></div> <div class="dot dbottom dleft"></div>
<div class="dot dbottom dright"></div> <div class="dot dbottom dright"></div>
</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 dleft"></div>
<div class="dot dtop dright"></div> <div class="dot dtop dright"></div>
<div class="dot center"></div> <div class="dot center"></div>
@ -71,7 +71,7 @@
<div class="dot dbottom dright"></div> <div class="dot dbottom dright"></div>
</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 dleft"></div>
<div class="dot dtop dright"></div> <div class="dot dtop dright"></div>
<div class="dot center dleft"></div> <div class="dot center dleft"></div>
@ -80,7 +80,7 @@
<div class="dot dbottom dright"></div> <div class="dot dbottom dright"></div>
</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>
<div class="results_words_key" >Your words are: </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) { function display_row(rows, cb) {
var duration = 250; var fadein_duration = 250;
var fadeout_delay = 500; var fadeout_delay = 750;
if (rows.length) { 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 row = rows.shift();
var tmp = row.hide().appendTo(".results") var html = row.hide().appendTo(".results");
.fadeIn(duration, function() { 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) jQuery(this).delay(fadeout_delay)
.fadeOut(fadeout_delay, function() { .fadeOut(fadeout_delay, function() {
display_row(rows, cb); display_row(rows, cb);
@ -183,7 +203,7 @@ jQuery("#roll_dice").on("click", function(e) {
var target_height = 200; var target_height = 200;
if (is_mobile()) { if (is_mobile()) {
target_height = 300; target_height = 400;
} }
jQuery(".results").animate({height: 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. // Now display those rows.
// //
display_row(rows, function() { display_row(rows, function() {
//
// And then display the results
//
display_results(function() { display_results(function() {
// //
@ -290,10 +314,12 @@ if (!is_mobile()) {
jQuery("#github_ribbon").fadeIn(1000); jQuery("#github_ribbon").fadeIn(1000);
} }
if (!i_can_has_good_crypto()) { if (!i_can_has_good_crypto()) {
jQuery(".source .bad_crypto").clone().hide().fadeIn(800).appendTo(".message"); jQuery(".source .bad_crypto").clone().hide().fadeIn(800).appendTo(".message");
} }
// //
// Load our wordlist. // Load our wordlist.
// //