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 = $('');
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 = ''+cardValue+''+cardIcon+'
',
255 | icons = '';
256 |
257 | if ( value <= 10 ) {
258 | for ( var i=1, l=value; i <= l; i++ ) {
259 | icons += ''+cardIcon+'';
260 | }
261 | } else icons = ( value == 11 ) ? '♝' : ( value == 12 ) ? '♛' : ( value == 13 ) ? '♚' : '';
262 |
263 | card = $(''+corner+'
'+icons+'
'+corner+'
