Skip to content

Commit

Permalink
Random card generation
Browse files Browse the repository at this point in the history
  • Loading branch information
@kylemce
kylemce committed May 4, 2012
2 parents 42f9830 + 11b70e8 commit e360224
Show file tree
Hide file tree
Showing 4 changed files with 283 additions and 37 deletions.
6 changes: 3 additions & 3 deletions TODO
View file
Expand Up @@ -2,9 +2,6 @@ i'm starring items i think are truly must-dos by demo time

*- Flexible merchant logo area (support for no logo)
*- Flexible item image area (support for no logo)
*- Spinner? (Different design spinner?)
*- Transitions between buy button, 'processing' page, and receipt panel
*- Log in => New user => Single instrument => Multi instrument flow: fix on final step (single instrument to multi instrument)

[done]- Plus icon/image on "Add New" on multi-instrument selector
[done]- "X" close in top-right of main frame
Expand All @@ -24,6 +21,9 @@ i'm starring items i think are truly must-dos by demo time
[done]- Flexible left frame area (height, shadow, etc.)
[done]- Deal with item names that are longer than fits in the current box
[done]- Tax/Total area fitting to size of content within it (shrinking if no tax, e.g.)
[done]- Log in => New user => Single instrument => Multi instrument flow: fix on final step (single instrument to multi instrument)
[done]- Transitions between buy button, 'processing' page, and receipt panel
[done]- Spinner? (Different design spinner?)

- Find way to make change instrument button look more change-y
- A/B test toggle on "Buy Now" being full-size or having a ~5px margin (more button-y)
Expand Down
4 changes: 2 additions & 2 deletions css/style.css
View file
Expand Up @@ -118,7 +118,7 @@ body {
border: 1px solid #ccc;
float: left;
}
#sellerinfo, #receipt {
#sellerinfo, #receipt, #progress {
padding: 10px 15px 5px 15px;
border-bottom: 1px solid #ccc;
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
Expand Down Expand Up @@ -393,7 +393,7 @@ div.item_price {
margin-top: 4px;
}

#receipt {
#receipt, #progress {
display: none;
}

Expand Down
166 changes: 134 additions & 32 deletions index.html
View file
Expand Up @@ -6,6 +6,7 @@
<link rel="stylesheet" href="css/kd_components_google.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="loader.js"></script>
<script type="text/javascript">
$(function() {
$('#button').click(start);
Expand All @@ -23,34 +24,7 @@
slideToggle();
});

$('#buybutton').click(function() {
slideIn();
$('#basepanel').hide();
$('#receipt_total').text($('#total_price').text());
$('#receipt_seller').text('Rovio Mobile Gaming, Inc.');
var card_type = $('#cardchange').attr('card_type');
var card_type_name = "Card";
switch (card_type) {
case 'visa':
card_type_name = "Visa";
break;
case 'master':
card_type_name = "MC";
break;
case 'discover':
card_type_name = "Disc";
break;
case 'amex':
card_type_name = "AmEx";
break;
default:
break;
}
$('#receipt_instrument').html((card_type_name != "Card" ? "<img src='images/cc_" + card_type + ".png'>" : "") + "<span class='card_type_name'>" + card_type_name + ' ***-' + $('#cardchange').attr('card_num') + "</span>");
$('#receipt_date').text('Apr 30, 2012');
$('#closebutton').show();
$('#receipt').show();
})
$('#buybutton').click(handleBuy);

$('.instrument_list li').click(function() {
if ($(this).attr("class") == "expired") return;
Expand Down Expand Up @@ -146,6 +120,9 @@
if (state != 'logged_one' && state != 'logged_multi') {
slideOut();
$('#buybutton').addClass('disabled');
} else {
$('#cardchange').show();
$('#buybutton').removeClass('disabled');
}
if (state == 'logged_multi') {
var cloned = $('#big_list').clone(true);
Expand All @@ -160,9 +137,6 @@
if (state == 'logged_one') {
$('#showinstruments_one').show();
}
$('#cardchange').show();
$('#buybutton').removeClass('disabled');

});
}

Expand All @@ -184,12 +158,51 @@
$('#cardchange').addClass('active');
}

function handleBuy() {
slideIn();
$('#basepanel').hide();

$('#progress').slideDown('fast', function() {
var ai = new ActivityIndicator();
ai.start();
setTimeout(function() {
ai.stop();
$('#progress').hide();
$('#receipt_total').text($('#total_price').text());
$('#receipt_seller').text('Rovio Mobile Gaming, Inc.');
var card_type = $('#cardchange').attr('card_type');
var card_type_name = "Card";
switch (card_type) {
case 'visa':
card_type_name = "Visa";
break;
case 'master':
card_type_name = "MC";
break;
case 'discover':
card_type_name = "Disc";
break;
case 'amex':
card_type_name = "AmEx";
break;
default:
break;
}
$('#receipt_instrument').html((card_type_name != "Card" ? "<img src='images/cc_" + card_type + ".png'>" : "") + "<span class='card_type_name'>" + card_type_name + ' ***-' + $('#cardchange').attr('card_num') + "</span>");
$('#receipt_date').text('Apr 30, 2012');
$('#closebutton').show();
$('#receipt').slideDown();
}, 5000);
})
}

function addInstrumentDone() {
if ($('#showinstruments_one').is(':visible')) {
scrollTo($('#showinstruments_one'), $('#showinstruments_multi'), appendInstrument);
} else if ($('#newuser').is(':visible')) {
scrollTo($('#newuser'), $('#showinstruments_one'));
$('#buybutton').removeClass('disabled');
$('#cardchange').show();
} else {
appendInstrument();
}
Expand All @@ -198,6 +211,35 @@
function appendInstrument() {
var cloned = $('#clone_visa').clone();
cloned.attr('id', '');

var card_num = Math.floor(Math.random() * 8999) + 1000;
var exp_mon = Math.floor(Math.random() * 11) + 1;
if (exp_mon < 10) exp_mon = '0' + exp_mon;
var exp_year = Math.floor(Math.random() * 5) + 13;
var card_type = 'visa';
switch (Math.floor(Math.random() * 4)) {
case 0:
card_type = 'visa';
break;
case 1:
card_type = 'master';
break;
case 2:
card_type = 'amex';
break;
case 3:
card_type = 'discover';
break;
default:
break;
}

cloned.attr('card_num', card_num);
cloned.attr('card_type', card_type);
cloned.children('.card_details').text('***-' + card_num);
cloned.children('.card_expire').text(' (expires ' + exp_mon + '/' + exp_year + ')');
cloned.children('.card_image').html("<img src='images/cc_" + card_type + ".png' />");

$('#multi_instrument_list ul').prepend(cloned);
$('.instrument_list li').removeClass('card_line_selected');
cloned.addClass('card_line_selected');
Expand Down Expand Up @@ -359,8 +401,68 @@
</div>
<div style="clear:both"></div>
</div>

<a id="buybutton" class="kd-button kd-button-submit">Buy Now</a>
</div>

<div id="progress">
<div style="margin: 10px 0 10px 15px">
<div id="loader" style="float: left; margin-right: 15px">
<div class="circle initial">
<span class="mask">
<span class="mover"></span>
</span>
</div>

<div class="circle red">
<span class="mask first">
<span class="base"></span>
<span class="mover"></span>
</span>
<span class="mask second">
<span class="base"></span>
<span class="mover"></span>
</span>
</div>

<div class="circle yellow">
<span class="mask first">
<span class="base"></span>
<span class="mover"></span>
</span>
<span class="mask second">
<span class="base"></span>
<span class="mover"></span>
</span>
</div>

<div class="circle green">
<span class="mask first">
<span class="base"></span>
<span class="mover"></span>
</span>
<span class="mask second">
<span class="base"></span>
<span class="mover"></span>
</span>
</div>

<div class="circle blue">
<span class="mask first">
<span class="base"></span>
<span class="mover"></span>
</span>
<span class="mask second">
<span class="base"></span>
<span class="mover"></span>
</span>
</div>

<span class="bolt"></span>
</div><!--end loader-->
<h3>Processing your purchase...</h3>
</div>
</div>

<div id='receipt'>
<div id='receipt_summary'>
Expand Down Expand Up @@ -481,7 +583,7 @@ <h3>Security Check Required</h3>
<li class="card_line_selected" card_type='master' card_num='9998'>
<div class='card_image'><img src='images/cc_master.png' /></div>
<div class='card_details'>***-9998</div>
<div class='card_expire'>(expires 11/13)</div>
<div class='card_expire'>(expires 02/14)</div>
</li>
</ul>

Expand Down

0 comments on commit e360224

Please sign in to comment.