Created
March 23, 2015 15:51
-
-
Save shiftyp/c7d272a7276fb343e7ce to your computer and use it in GitHub Desktop.
pro-js presentation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*, | |
*:before, | |
*:after { | |
box-sizing: border-box; | |
} | |
.hand, | |
.deck { | |
overflow: hidden; | |
} | |
.card { | |
margin: 10px; | |
text-align: center; | |
padding: 10px; | |
width: 100px; | |
height: 150px; | |
float: left; | |
position: relative; | |
} | |
.diamonds, | |
.hearts { | |
background: #E74C3C; | |
} | |
.spades, | |
.clubs { | |
background: #2C3E50; | |
color: white; | |
} | |
.hearts:before, | |
.diamonds:before, | |
.spades:before, | |
.clubs:before { | |
display: block; | |
position: absolute; | |
bottom: 10px; | |
right: 25px; | |
font-size: 64px; | |
width: 50px; | |
} | |
.hearts:before { | |
content: '\2665'; | |
} | |
.diamonds:before { | |
content: '\2666'; | |
} | |
.clubs:before { | |
content: '\2663'; | |
color: white; | |
} | |
.spades:before { | |
content: '\2660'; | |
color: white; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('.blackjack').blackjack(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>jQuery Plugin</title> | |
<link href="./app.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="blackjack"> | |
<div class="controls"></div> | |
<div class="hand"></div> | |
<div class="deck"></div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> | |
<script src="./plugin.js"></script> | |
<script src="./app.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* jquery-boilerplate - v3.4.0 | |
* A jump-start for jQuery plugins development. | |
* http://jqueryboilerplate.com | |
* | |
* Made by Zeno Rocha | |
* Under MIT License | |
*/ | |
// the semi-colon before function invocation is a safety net against concatenated | |
// scripts and/or other plugins which may not be closed properly. | |
;(function ( $, window, document, undefined ) { | |
"use strict"; | |
var ranks = { | |
ACE: 1, | |
TWO: 2, | |
THREE: 3, | |
FOUR: 4, | |
FIVE: 5, | |
SIX: 6, | |
SEVEN: 7, | |
EIGHT: 8, | |
NINE: 9, | |
TEN: 10, | |
JACK: 10, | |
QUEEN: 10, | |
KING: 10 | |
}; | |
var suits = { | |
HEARTS: 'hearts', | |
CLUBS: 'clubs', | |
SPADES: 'spades', | |
DIAMONDS: 'diamonds' | |
}; | |
function makeDeck() { | |
var deck = []; | |
// { suit: 'HEARTS', rank: 'ACE' } | |
Object.keys(suits).forEach(function(suit) { | |
Object.keys(ranks).forEach(function(rank) { | |
deck.push({ suit: suit, rank: rank }); | |
}); | |
}); | |
return deck; | |
} | |
function shuffle(array) { | |
var m = array.length, t, i; | |
// While there remain elements to shuffle… | |
while (m) { | |
// Pick a remaining element… | |
i = Math.floor(Math.random() * m--); | |
// And swap it with the current element. | |
t = array[m]; | |
array[m] = array[i]; | |
array[i] = t; | |
} | |
return array; | |
} | |
// undefined is used here as the undefined global variable in ECMAScript 3 is | |
// mutable (ie. it can be changed by someone else). undefined isn't really being | |
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined | |
// can no longer be modified. | |
// window and document are passed through as local variable rather than global | |
// as this (slightly) quickens the resolution process and can be more efficiently | |
// minified (especially when both are regularly referenced in your plugin). | |
// Create the defaults once | |
var pluginName = "blackjack", | |
defaults = {}; | |
// The actual plugin constructor | |
function Plugin ( element, options ) { | |
this.element = element; | |
this.$element = $(element); | |
// jQuery has an extend method which merges the contents of two or | |
// more objects, storing the result in the first object. The first object | |
// is generally empty as we don't want to alter the default options for | |
// future instances of the plugin | |
this.settings = $.extend( {}, defaults, options ); | |
this._defaults = defaults; | |
this._name = pluginName; | |
this.deck = makeDeck(); | |
this.hand = []; | |
this.init(); | |
} | |
// Avoid Plugin.prototype conflicts | |
$.extend(Plugin.prototype, { | |
init: function () { | |
this.shuffle(); | |
// this.displayCard( this.deck[0] ) | |
var shuffleHTML = '<button class="shuffle">shuffle</button>'; | |
this.$element.find('.controls').append(shuffleHTML); | |
this.$element.find('.shuffle').on('click', function() { | |
this.shuffle(); | |
this.displayDeck(); | |
}.bind(this)); | |
this.deal(5); | |
this.displayHand(); | |
this.displayDeck(); | |
}, | |
shuffle: function() { | |
this.deck = shuffle( this.deck ); | |
}, | |
deal: function(howMany) { | |
if (howMany > this.deck.length) { | |
howMany = this.deck.length; | |
} | |
for(var i = 0; i < howMany; i++) { | |
this.hand.push( this.deck.pop() ); | |
} | |
// this.displayDeck(); | |
console.log(this.deck.length); | |
}, | |
displayCard: function(card, selector) { | |
var rank = card.rank; | |
var suit = card.suit; | |
var cardHTML = | |
'<div class="card ' + rank.toLowerCase() + ' ' + suit.toLowerCase() + '">' + | |
'<span class="rank">' + rank + '</span>' + | |
' of ' + | |
'<span class="suit">' + suit + '</span>' + | |
'</div>'; | |
this.$element.find(selector).append(cardHTML); | |
}, | |
displayCards: function(cards, selector) { | |
this.$element.find(selector).empty(); | |
cards.forEach(function(card) { | |
this.displayCard(card, selector); | |
}.bind(this)); | |
}, | |
displayDeck: function() { | |
this.displayCards(this.deck, '.deck'); | |
}, | |
displayHand: function() { | |
this.displayCards(this.hand, '.hand'); | |
} | |
}); | |
// A really lightweight plugin wrapper around the constructor, | |
// preventing against multiple instantiations | |
$.fn[ pluginName ] = function ( options ) { | |
return this.each(function() { | |
if ( !$.data( this, "plugin_" + pluginName ) ) { | |
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) ); | |
} | |
}); | |
}; | |
})( jQuery, window, document ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment