« back to all changes in this revision
Viewing changes to html/app.js
- browse files at revision 1
- compare with another revision
- download diff
- download tarball
- view history from revision 1
- Committer: daker
- Date: 2013-10-14 22:17:43 UTC
- Revision ID: adnane002@gmail.com-20131014221743-2oy7dj4xqcgwk0ir
Initial commit
added
removed
html/app.js
1
/*
2
* BytesJack <https://github.com/EtienneLem/bytesjack>
3
*
4
* Dev Etienne Lemay <http://twitter.com/#!/EtienneLem>
5
* Design Tristan L'abbé <http://twitter.com/#!/_Tristan>
6
*
7
* Special thanks to rafBM <http://twitter.com/#!/rafbm> for some JS tricks!
8
*/
9
10
// Static class hack (auto init)
11
$(document).ready(function(){ window.App = new App() });
12
13
// Class
14
var App = function() { this.initialize.apply(this, arguments) };
15
App.prototype = (function() { var pro = {};
16
17
// Contants
18
var ANIM_DELAY = 300,
19
KEY_SPACE = 32,
20
KEY_S = 83,
21
KEY_D = 68,
22
KEY_1 = 49,
23
KEY_2 = 50,
24
KEY_3 = 51,
25
PATTERNS = [
26
[{deg: 0, top: 0}],
27
[{deg: 5, top: 0}, {deg: -5, top: 0}],
28
[{deg: 5, top: 15}, {deg: -1, top: 0}, {deg: -5, top: 15}],
29
[{deg: 9, top: 20}, {deg: 4, top: 0}, {deg: -4, top: 0}, {deg: -9, top: 15}],
30
[{deg: 12, top: 50}, {deg: 8, top: 10}, {deg: -4, top: 0}, {deg: -12, top: 15}, {deg: -16, top: 40}],
31
[{deg: 14, top: 40}, {deg: 8, top: 10}, {deg: -2, top: 5}, {deg: -5, top: 15}, {deg: -8, top: 40}, {deg: -14, top: 70}],
32
[{deg: 14, top: 70}, {deg: 8, top: 30}, {deg: 4, top: 10}, {deg: 0, top: 5}, {deg: -4, top: 20}, {deg: -8, top: 40}, {deg: -16, top: 70}]
33
];
34
35
// Variables
36
var types = ['clubs', 'diamonds', 'hearts', 'spades'],
37
cards = [],
38
cardsIndex = 0,
39
isPlaying = false,
40
gameDealed = false,
41
dealNav = $('#deal'),
42
actionsNav = $('#actions'),
43
doubleBtn = $('#double'),
44
pCardsContainer = $('#player-cards'),
45
dCardsContainer = $('#dealer-cards'),
46
playerTotal = $('#player-total'),
47
playerCards = [],
48
playerAces = 0,
49
dealerTotal = $('#dealer-total'),
50
dealerCards = [],
51
dealerAces = 0,
52
chips = $('#chips'),
53
allChips = $('.chip'),
54
bank = 100,
55
bankroll = $('#bankroll'),
56
doubled = false,
57
currentBet = allChips.first().data('value'),
58
resizeTimer = null,
59
canDoAction = true,
60
isStanding = false,
61
gameEnded = false,
62
html = $('html');
63
64
// public
65
pro.initialize = function(opts) { initialize() };
66
pro.deal = function() { deal() };
67
pro.hit = function() { hit() };
68
pro.stand = function() { stand() };
69
pro.doubledown = function() { doubledown() };
70
71
// private
72
var initialize = function()
73
{
74
$('a[href="#"]').bind('click', function(e){ e.preventDefault(); });
75
initBet();
76
initResize();
77
initKeyboardKeys();
78
79
setTimeout(function(){
80
window.scrollTo(0, 1)
81
}, 500);
82
}
83
84
// Resize management
85
var initResize = function()
86
{
87
$(window).bind('resize', onWindowResize);
88
onWindowResize(null);
89
};
90
91
var onWindowResize = function ( e )
92
{
93
clearTimeout(resizeTimer);
94
resizeTimer = setTimeout(function(){
95
centerContainers();
96
}, 100);
97
};
98
99
// Keyboard managment
100
var initKeyboardKeys = function() {
101
$(document).bind('keydown', onKeyDown);
102
$(document).bind('keyup', onKeyUp);
103
};
104
105
var onKeyDown = function ( e )
106
{
107
switch ( e.keyCode ) {
108
case KEY_SPACE :
109
( isPlaying )
110
? actionsNav.children('li:first-child').children('a').addClass('active')
111
: dealNav.children('a').addClass('active');
112
break;
113
case KEY_S : actionsNav.children('li:nth-child(2)').children('a').addClass('active'); break;
114
case KEY_D : actionsNav.children('li:nth-child(3)').children('a').addClass('active'); break;
115
case KEY_1 : selectChip(0); break;
116
case KEY_2 : selectChip(1); break;
117
case KEY_3 : selectChip(2); break;
118
}
119
};
120
121
var onKeyUp = function ( e )
122
{
123
e.preventDefault();
124
125
switch ( e.keyCode ) {
126
case KEY_SPACE :
127
if ( isPlaying ) {
128
hit();
129
actionsNav.children('li:first-child').children('a').removeClass('active')
130
} else {
131
deal();
132
dealNav.children('a').removeClass('active');
133
}
134
case KEY_S :
135
stand();
136
actionsNav.children('li:nth-child(2)').children('a').removeClass('active');
137
break;
138
case KEY_D :
139
doubledown();
140
actionsNav.children('li:nth-child(3)').children('a').removeClass('active');
141
break;
142
case KEY_1 : selectChip(0); break;
143
case KEY_2 : selectChip(1); break;
144
case KEY_3 : selectChip(2); break;
145
}
146
};
147
148
var selectChip = function ( index )
149
{
150
if ( isPlaying || gameEnded ) return;
151
allChips.eq(index).trigger('click');
152
};
153
154
// Cards management
155
var initDeck = function()
156
{
157
for ( var i = 0; i < types.length; i++ ) {
158
for ( var j = 1; j <= 13; j++ ) {
159
var value = ( j > 10 ) ? 10 : j;
160
cards.push({ card:j, value: value, type: types[i] });
161
};
162
}
163
164
cards.shuffle();
165
};
166
167
var addCard = function ( side, player, callback )
168
{
169
var cardData = cards[cardsIndex],
170
container = ( player == 'player' ) ? pCardsContainer : dCardsContainer,
171
card = buildCard(cardsIndex, cardData.type, cardData.card, side),
172
zIndex = 0;
173
174
cardsIndex++;
175
canDoAction = false;
176
177
card.css({
178
'top' : '-150%',
179
'left' : '100%'
180
});
181
182
container.append(card);
183
zIndex = ( player == 'player' ) ? card.index() : 50-card.index();
184
card.css('z-index', zIndex);
185
186
setTimeout(function(){
187
card.css({
188
'top' : '0%',
189
'left' : 10 * card.index() + '%'
190
});
191
rotateCards(container, (player == 'player'));
192
193
194
setTimeout(function(){
195
centerContainer(container);
196
if ( player == 'player' ) addToPlayerTotal(cardData.value);
197
else addToDealerTotal(cardData.value);
198
199
canDoAction = true;
200
if ( callback != undefined ) callback.call();
201
}, ANIM_DELAY + 100);
202
}, 10);
203
};
204
205
var rotateCards = function ( container, isPlayer )
206
{
207
var cards = container.children('.card'),
208
numCards = cards.size() - 1,
209
increment = ( isPlayer ) ? -1 : 1,
210
pattern = ( PATTERNS[numCards] ) ? PATTERNS[numCards] : PATTERNS[PATTERNS.length-1];
211
212
cards.each(function(i){
213
var deg = ( i < pattern.length ) ? pattern[i].deg : pattern[pattern.length-1].deg,
214
offset = ( i < pattern.length ) ? pattern[i].top : pattern[pattern.length-1].top + (20 * (i - pattern.length + 1));
215
216
$(this).css({
217
'-webkit-transform' : 'rotate('+ deg * increment +'deg)',
218
'-khtml-transform' : 'rotate('+ deg * increment +'deg)',
219
'-moz-transform' : 'rotate('+ deg * increment +'deg)',
220
'-ms-transform' : 'rotate('+ deg * increment +'deg)',
221
'transform' : 'rotate('+ deg * increment +'deg)',
222
'top' : offset * -increment + 'px'
223
});
224
});
225
};
226
227
var centerContainers = function()
228
{
229
centerContainer(pCardsContainer);
230
centerContainer(dCardsContainer);
231
};
232
233
var centerContainer = function ( container )
234
{
235
var lastCard = container.children('.card:last-child'),
236
totalWidth = 0;
237
238
if ( lastCard.size() == 0 ) return;
239
240
totalWidth = lastCard.position().left + lastCard.width();
241
if ( html.attr('browser') == 'Safari' )
242
container.css('-webkit-transform', 'translate3d('+ -totalWidth / 2 +'px,0,0)');
243
else
244
container.css('margin-left', -totalWidth / 2 + 'px');
245
};
246
247
var buildCard = function (id, type, value, side)
248
{
249
var card;
250
if ( side == 'back' ) card = $('<div data-id="'+id+'" class="card back"></div>');
251
else {
252
var cardValue = ( value == 1 ) ? 'A' : ( value == 11 ) ? 'J' : ( value == 12 ) ? 'Q' : ( value == 13 ) ? 'K' : value,
253
cardIcon = ( type == 'hearts' ) ? '♥' : ( type == 'diamonds' ) ? '♦' : ( type == 'spades' ) ? '♠' : '♣',
254
corner = '<div><span>'+cardValue+'</span><span>'+cardIcon+'</span></div>',
255
icons = '';
256
257
if ( value <= 10 ) {
258
for ( var i=1, l=value; i <= l; i++ ) {
259
icons += '<span>'+cardIcon+'</span>';
260
}
261
} else icons = ( value == 11 ) ? '<span>♝</span>' : ( value == 12 ) ? '<span>♛</span>' : ( value == 13 ) ? '<span>♚</span>' : '';
262
263
card = $('<div data-id="'+id+'" class="card value'+cardValue+' '+type+'">'+corner+'<div class="icons">'+icons+'</div>'+corner+'</div>');
264
}
265
266
return card;
267
};
268
269
// Game management
270
var deal = function()
271
{
272
if ( isPlaying || !canDoAction || gameEnded ) return;
273
274
isPlaying = true;
275
276
if ( gameDealed ) {
277
doubleBtn.removeClass('desactivate');
278
playerTotal.html('');
279
dealerTotal.html('');
280
playerAces = 0;
281
dealerAces = 0;
282
playerCards = [];
283
dealerCards = [];
284
cards = [];
285
cardsIndex = 0;
286
doubled = false;
287
canDoAction = true;
288
isStanding = false;
289
$('#message').remove();
290
}
291
292
pCardsContainer.html('');
293
dCardsContainer.html('');
294
initDeck();
295
296
changeBankroll(-1);
297
ditributeCards();
298
gameDealed = true;
299
};
300
301
var hit = function()
302
{
303
if ( !isPlaying || !canDoAction || isStanding || gameEnded ) return;
304
305
doubleBtn.addClass('desactivate');
306
addCard('front', 'player', function(){
307
if ( playerCards.sum() > 21 ) lose('lose-busted');
308
});
309
};
310
311
var stand = function()
312
{
313
if ( !isPlaying || !canDoAction || isStanding || gameEnded ) return;
314
315
isStanding = true;
316
revealDealerCard();
317
318
setTimeout(function(){
319
if ( dealerCards.sum() < 17 ) dealerTurn();
320
else end();
321
}, ANIM_DELAY);
322
};
323
324
var dealerTurn = function()
325
{
326
addCard('front', 'dealer', function(){
327
dealerTotal.html(calculateDealerScore());
328
329
if ( dealerCards.sum() < 17 ) dealerTurn();
330
else end();
331
});
332
};
333
334
var doubledown = function()
335
{
336
if ( !isPlaying || !canDoAction || isStanding || doubleBtn.hasClass('desactivate') || gameEnded ) return;
337
338
changeBankroll(-1);
339
doubled = true;
340
addCard('front', 'player', function(){
341
if ( playerCards.sum() > 21 ) lose('lose-busted');
342
else stand();
343
});
344
};
345
346
var push = function ( msg )
347
{
348
showMessage(msg);
349
var increment = ( doubled ) ? 2 : 1;
350
changeBankroll(increment);
351
stopGame();
352
};
353
354
var win = function ( msg )
355
{
356
showMessage(msg);
357
var increment = ( doubled ) ? 4 : 2;
358
changeBankroll(increment);
359
stopGame();
360
};
361
362
var lose = function ( msg )
363
{
364
showMessage(msg);
365
changeBankroll(0);
366
stopGame();
367
};
368
369
var showMessage = function ( status )
370
{
371
var msg = document.createElement('div'),
372
content = '',
373
message = $('#message');
374
375
if ( message.size() > 0 ) message.remove();
376
377
msg.className = status;
378
msg.id = 'message';
379
380
switch ( status ) {
381
case 'win': content = 'You win'; break;
382
case 'win-blackjack': content = 'You win<span>Blackjack</span>'; break;
383
case 'win-dealer-busted': content = 'You win<span>Dealer busted</span>'; break;
384
case 'lose': content = 'You lose'; break;
385
case 'lose-blackjack': content = 'You lose<span>Blackjack</span>'; break;
386
case 'lose-busted': content = 'You lose<span>Busted</span>'; break;
387
case 'push': content = 'Push<span>No winner</span>'; break;
388
case 'game-over': content = 'Game over'; break;
389
default: content = '<span>Something broke, don’t know what happened...</span>'; break;
390
}
391
392
msg.innerHTML = content;
393
pCardsContainer.after(msg);
394
};
395
396
var end = function()
397
{
398
var pScore = playerCards.sum(),
399
dScore = dealerCards.sum();
400
401
if ( dScore > 21 ) win('win-dealer-busted');
402
else if ( dScore > pScore ) lose('lose');
403
else if ( pScore > dScore ) win('win');
404
else if ( pScore == dScore ) push('push');
405
};
406
407
var endGame = function()
408
{
409
showMessage('game-over');
410
gameEnded = true;
411
412
var overlay = document.createElement('div');
413
overlay.id = 'overlay';
414
415
$('body').append(overlay);
416
};
417
418
var stopGame = function()
419
{
420
isPlaying = false;
421
dealNav.show();
422
actionsNav.hide();
423
chips.removeClass('disabled');
424
425
allChips.each(function(i){
426
var chip = $(this);
427
if ( chip.data('value') > bank ) {
428
chip.addClass('desactivate');
429
430
var chipsAvailable = allChips.removeClass('bet').not('.desactivate');
431
if ( chipsAvailable.size() == 0 ) endGame();
432
else {
433
var newChip = chipsAvailable.last();
434
newChip.addClass('bet');
435
changeBet(newChip.data('value'));
436
chips.prepend(newChip);
437
}
438
439
} else if ( chip.hasClass('desactivate') ) chip.removeClass('desactivate');
440
});
441
};
442
443
var ditributeCards = function()
444
{
445
canDoAction = false;
446
447
addCard('front', 'player', function(){
448
addCard('front', 'dealer', function(){
449
addCard('front', 'player', function(){
450
addCard('back', 'dealer', function(){
451
checkBlackjack();
452
});
453
});
454
});
455
});
456
457
dealNav.hide();
458
actionsNav.show();
459
chips.addClass('disabled');
460
};
461
462
var checkBlackjack = function()
463
{
464
var pScore = playerCards.sum(),
465
dScore = dealerCards.sum();
466
467
if ( pScore == 21 && dScore == 21 ) push('Push - No winner');
468
else if ( pScore == 21 ) win('win-blackjack');
469
else if ( dScore == 21 ) {
470
lose('lose-blackjack');
471
revealDealerCard();
472
}
473
};
474
475
// Player management
476
var addToPlayerTotal = function ( value )
477
{
478
if ( value == 1 ) {
479
value = 11;
480
playerAces++;
481
}
482
483
playerCards.push(value);
484
playerTotal.html(calculatePlayerScore());
485
};
486
487
var calculatePlayerScore = function()
488
{
489
var score = playerCards.sum();
490
491
if ( score > 21 && playerAces > 0 ) {
492
playerCards.splice(playerCards.indexOf(11), 1, 1);
493
playerAces--;
494
score = calculatePlayerScore();
495
}
496
497
return score;
498
};
499
500
// Dealer management
501
var revealDealerCard = function()
502
{
503
var card = $('.back'),
504
id = card.data('id'),
505
data = cards[id],
506
newCard = buildCard(id, data.type, data.value, 'front');
507
508
newCard.css({
509
'left' : 10 * card.index() + '%',
510
'z-index' : 50-card.index()
511
});
512
513
card.after(newCard).remove();
514
dealerTotal.html(calculateDealerScore());
515
};
516
517
var addToDealerTotal = function ( value )
518
{
519
if ( value == 1 ) {
520
value = 11;
521
dealerAces++;
522
}
523
524
dealerCards.push(value);
525
};
526
527
var calculateDealerScore = function()
528
{
529
var score = dealerCards.sum();
530
531
if ( score > 21 && dealerAces > 0 ) {
532
dealerCards.splice(dealerCards.indexOf(11), 1, 1);
533
dealerAces--;
534
score = calculateDealerScore();
535
}
536
537
return score;
538
};
539
540
// Bet management
541
var initBet = function()
542
{
543
allChips.bind('click', function(e){
544
var chip = $(this);
545
if ( isPlaying || chip.hasClass('desactivate') ) return;
546
547
allChips.removeClass('bet');
548
chip.addClass('bet');
549
changeBet(chip.data('value'));
550
551
chips.prepend(chip);
552
});
553
};
554
555
var changeBet = function ( newValue ) {
556
if ( isPlaying ) return;
557
currentBet = newValue;
558
};
559
560
var changeBankroll = function ( increment ) {
561
bank += increment * currentBet;
562
bankroll.html((bank / 10) + 'k');
563
};
564
565
return pro })();
566
567
/*
568
* Array shuffle <http://snipplr.com/view/535>
569
* Array sum <http://snipplr.com/view/533>
570
*/
571
Array.prototype.shuffle = function() { for(var j, x, i = this.length; i; j = Math.floor(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x); }
572
Array.prototype.sum = function() { for(var s = 0, i = this.length; i; s += this[--i]); return s; };
573
574
/*
575
* Browser Detect <http://teev.io/blog/text/13423292>
576
*/
577
var BrowserDetect = {
578
init: function () {
579
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
580
this.version = this.searchVersion(navigator.userAgent)
581
|| this.searchVersion(navigator.appVersion)
582
|| "an unknown version";
583
this.OS = this.searchString(this.dataOS) || "an unknown OS";
584
585
var b = document.documentElement;
586
b.setAttribute('browser', this.browser);
587
b.setAttribute('version', this.version );
588
b.setAttribute('os', this.OS);
589
},
590
searchString: function (data) {
591
for (var i=0;i<data.length;i++) {
592
var dataString = data[i].string;
593
var dataProp = data[i].prop;
594
this.versionSearchString = data[i].versionSearch || data[i].identity;
595
if (dataString) {
596
if (dataString.indexOf(data[i].subString) != -1)
597
return data[i].identity;
598
}
599
else if (dataProp)
600
return data[i].identity;
601
}
602
},
603
searchVersion: function (dataString) {
604
var index = dataString.indexOf(this.versionSearchString);
605
if (index == -1) return;
606
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
607
},
608
dataBrowser: [
609
{
610
string: navigator.userAgent,
611
subString: "Chrome",
612
identity: "Chrome"
613
},
614
{ string: navigator.userAgent,
615
subString: "OmniWeb",
616
versionSearch: "OmniWeb/",
617
identity: "OmniWeb"
618
},
619
{
620
string: navigator.vendor,
621
subString: "Apple",
622
identity: "Safari",
623
versionSearch: "Version"
624
},
625
{
626
prop: window.opera,
627
identity: "Opera",
628
versionSearch: "Version"
629
},
630
{
631
string: navigator.vendor,
632
subString: "iCab",
633
identity: "iCab"
634
},
635
{
636
string: navigator.vendor,
637
subString: "KDE",
638
identity: "Konqueror"
639
},
640
{
641
string: navigator.userAgent,
642
subString: "Firefox",
643
identity: "Firefox"
644
},
645
{
646
string: navigator.vendor,
647
subString: "Camino",
648
identity: "Camino"
649
},
650
{ // for newer Netscapes (6+)
651
string: navigator.userAgent,
652
subString: "Netscape",
653
identity: "Netscape"
654
},
655
{
656
string: navigator.userAgent,
657
subString: "MSIE",
658
identity: "Explorer",
659
versionSearch: "MSIE"
660
},
661
{
662
string: navigator.userAgent,
663
subString: "Gecko",
664
identity: "Mozilla",
665
versionSearch: "rv"
666
},
667
{ // for older Netscapes (4-)
668
string: navigator.userAgent,
669
subString: "Mozilla",
670
identity: "Netscape",
671
versionSearch: "Mozilla"
672
}
673
],
674
dataOS : [
675
{
676
string: navigator.platform,
677
subString: "Win",
678
identity: "Windows"
679
},
680
{
681
string: navigator.platform,
682
subString: "Mac",
683
identity: "Mac"
684
},
685
{
686
string: navigator.userAgent,
687
subString: "iPhone",
688
identity: "iPhone/iPod"
689
},
690
{
691
string: navigator.platform,
692
subString: "Linux",
693
identity: "Linux"
694
}
695
]
696
};
697
BrowserDetect.init();
b'\\ No newline at end of file'
Loggerhead is a web-based interface for Breezy
Version: 2.0.1