├── .jshintrc ├── HISTORY.md ├── LICENSE ├── README.md ├── cards.ttf ├── img ├── JC.gif ├── JD.gif ├── JH.gif ├── JS.gif ├── KC.gif ├── KD.gif ├── KH.gif ├── KS.gif ├── N1.gif ├── N2.gif ├── QC.gif ├── QD.gif ├── QH.gif ├── QS.gif └── cardsuits.png ├── index.html ├── playingCards.js ├── playingCards.ui.css └── playingCards.ui.js /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "jquery":true 3 | } -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | # 1.0.0 2 | * adding slow layout effect 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010 Adam Eivy (antic | atomantic) 2 | Dual licensed under the MIT and GPL licenses: 3 | * http://www.opensource.org/licenses/mit-license.php 4 | * http://www.gnu.org/licenses/gpl.html 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to 8 | deal in the Software without restriction, including without limitation the 9 | rights to use, copy, modify, merge, publish, distribute, sublicense, and/or 10 | sell copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS 22 | IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # License 2 | JavaScript & CSS: 3 | @author Adam Eivy (antic | atomantic) 4 | @link [http://adameivy.com/JavaScript-Playing-Cards/](http://adameivy.com/JavaScript-Playing-Cards/) 5 | 6 | @license Copyright (c) 2010 Adam Eivy (antic | atomantic) Dual licensed under the MIT and GPL licenses: 7 | * [http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php) 8 | * [http://www.gnu.org/licenses/gpl.html](http://www.gnu.org/licenses/gpl.html) 9 | 10 | Card Face images: 11 | @author David Bellot 12 | @link [http://david.bellot.free.fr/svg-cards/](http://david.bellot.free.fr/svg-cards/) 13 | @license [http://creativecommons.org/licenses/by-sa/2.5/](http://creativecommons.org/licenses/by-sa/2.5/) 14 | 15 | # What it does 16 | 17 | The library comes in multiple parts. You can either just use the playingCard.js library, which has no UI rendering (just creates deck objects with the standard methods) or you can add on the playingCards.ui.js library, which adds the ability to render the cards to the page. 18 | 19 | Note: This library was really just something that I wanted to build for the sake of proving out that a deck of cards could be implemented in JavaScript and CSS. I had no real-world use-case for it. Since throwing this out on Github, several people have started using this as a foundation for making games. That's awesome--but I haven't been working on this. I welcome pull-requests, but I also am not actively updating this codebase. The code is pretty simple and could probably stand some updating with newer standards (as it is several years old). You might be better off using this as a reference point / proof-of-concept :) 20 | 21 | If I were to re-write this for a particular game/use-case, I'd probably change the API a bit. Additionally, I'd add methods for managing hands/players, which is not part of the existing library. 22 | 23 | On the flip-side, since you obviously like playing cards, you might be interested in my hand-painted, beetle-themed playing card deck, which I'll be releasing to Kickstarter ~Aug 1, 2015: http://bit.ly/beetledeck 24 | 25 | # Usage 26 | 27 | If you are only using playingCards.js: 28 | 29 | var cardDeck = new playingCards(); // will create a new deck object 30 | 31 | If you are including jQuery, the playingCards.ui.js and playingCards.ui.css: 32 | 33 | $('#cardTable').playingCards(); // will lay out a random deck on the cardTable element 34 | 35 | override defaults for playingCards() and for card() by adding new properties to the following objects: 36 | 37 | playingCards.defaults 38 | 39 | playingCards.card.defaults 40 | 41 | ## Example Implementation 42 | For a rough example of implementation, look at the code for the demo page: 43 | https://github.com/atomantic/JavaScript-Playing-Cards/blob/master/index.html 44 | 45 | # API Docs (simple version) 46 | 47 | * init() - builds the deck (and shuffles it), automatically called when initializing an instance 48 | * shuffle() - shuffle the deck 49 | * orderByRank() - orders the existin cards by rank 50 | * orderBySuit() - calls init() again (TODO: this should probably order the existing cards in the deck by suit, but I was lazy) 51 | * spread($destinationElement, slowly) - (ui only) lay out the cards in the DOM, optionally with a slow placement 52 | * count() - return the number of cards remaining in the deck 53 | * addCard() - return a card from the drawn pile back to the top of the deck 54 | * draw() - draw a card from the top of the deck (stored in the draw pile) 55 | 56 | # Demo 57 | 58 | The repository holds a demo in index.html, which is published on the github project page: 59 | [Demo](http://atomantic.github.com/JavaScript-Playing-Cards) 60 | -------------------------------------------------------------------------------- /cards.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/cards.ttf -------------------------------------------------------------------------------- /img/JC.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/JC.gif -------------------------------------------------------------------------------- /img/JD.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/JD.gif -------------------------------------------------------------------------------- /img/JH.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/JH.gif -------------------------------------------------------------------------------- /img/JS.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/JS.gif -------------------------------------------------------------------------------- /img/KC.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/KC.gif -------------------------------------------------------------------------------- /img/KD.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/KD.gif -------------------------------------------------------------------------------- /img/KH.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/KH.gif -------------------------------------------------------------------------------- /img/KS.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/KS.gif -------------------------------------------------------------------------------- /img/N1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/N1.gif -------------------------------------------------------------------------------- /img/N2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/N2.gif -------------------------------------------------------------------------------- /img/QC.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/QC.gif -------------------------------------------------------------------------------- /img/QD.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/QD.gif -------------------------------------------------------------------------------- /img/QH.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/QH.gif -------------------------------------------------------------------------------- /img/QS.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/QS.gif -------------------------------------------------------------------------------- /img/cardsuits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomantic/JavaScript-Playing-Cards/e1dce08e18f554c129657012bbcec8c8d2c1e649/img/cardsuits.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | atomantic/JavaScript-Playing-Cards @ GitHub 7 | 8 | 9 | 38 | 39 | 40 | 41 | 42 | Fork me on GitHub 43 | 44 |
45 | 46 |
47 | 48 | 49 | 50 | 51 |
52 | 53 |

JavaScript Playing Cards 54 | by Adam Eivy (antic | atomantic)

55 | 56 |
57 | A playing card JavaScript and CSS library for creating standard deck games. The library is wrapped to allow it to act as a plugin for jquery (or another framework) 58 |
59 | 60 |

This is really just a proof-of-concept that a deck of cards can be managed in JavaScript/CSS

61 |

You might be interested in my hand-painted, beetle-themed playing card deck, which I'll be releasing to Kickstarter ~Aug 1, 2015: http://bit.ly/beetledeck

62 |

License

63 |

MIT/GPL

64 |

65 | 66 | 67 |

Demo

68 |
69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |

Card Deck

77 |
78 |
79 |

Drawn Cards

80 |
81 | 82 | 83 | 84 | 166 | 167 |

Download

168 |

169 | You can download this project in either 170 | zip or 171 | tar formats. 172 |

173 |

You can also clone the project with Git 174 | by running: 175 | 

$ git clone git://github.com/atomantic/JavaScript-Playing-Cards
176 |

177 | 178 |
179 | get the source code on GitHub : atomantic/JavaScript-Playing-Cards 180 |
181 | 182 |
183 | 184 | 197 | 198 | 199 | ˝ 200 | -------------------------------------------------------------------------------- /playingCards.js: -------------------------------------------------------------------------------- 1 | /*jslint jquery:true */ 2 | /** 3 | * playingCards is a standard card deck library 4 | * This can be used to play standard card games (which will be additional rule modules attached to this set) 5 | * 6 | * usage: var cardDeck = new playingCards(conf); 7 | * override defaults for playingCards() and for card() with 8 | * playingCards.defaults 9 | * playingCards.card.defaults 10 | * 11 | * @author Copyright (c) 2010 Adam Eivy (antic | atomantic) 12 | * @license Dual licensed under the MIT and GPL licenses: 13 | * http://www.opensource.org/licenses/mit-license.php 14 | * http://www.gnu.org/licenses/gpl.html 15 | */ 16 | 17 | if (Array.indexOf === undefined) { 18 | // doens't exist in oldIE 19 | /* Finds the index of the first occurence of item in the array, or -1 if not found */ 20 | Array.prototype.indexOf = function(v) { 21 | for (var i = 0; i < this.length; ++i) { 22 | if (this[i] === v) { 23 | return i; 24 | } 25 | } 26 | return - 1; 27 | }; 28 | } 29 | (function(window,document,undefined){ 30 | 31 | /** 32 | * The playing card library core object 33 | * 34 | * @param obj conf Configuration option overrides 35 | * 36 | * @return obj an instance of the constructed library object (deck of cards) 37 | */ 38 | var playingCards = window.playingCards = function(conf) { 39 | var c = objExtend(playingCards.defaults, conf); 40 | if (! (this instanceof playingCards)) { 41 | // in jquery mode 42 | c.el = $(this); // capture the context (this will be the cardTable/Deck element) 43 | return new playingCards(c); 44 | } 45 | this.conf = c; 46 | this.init(); 47 | if (this.conf.startShuffled) { 48 | this.shuffle(5); 49 | } 50 | return this; 51 | }; 52 | /** 53 | * initializer - builds the deck 54 | */ 55 | playingCards.prototype.init = function() { 56 | this.cards = []; 57 | var o = this.conf, 58 | l,i,s,r,j; 59 | // populate draw pile 60 | for (i = 0; i < o.decks; i++) { 61 | // standard 62 | for (s in o.suits) { 63 | for (r in o.ranks) { 64 | l = this.cards.length; 65 | this.cards[l] = new playingCards.card(r, o.ranks[r], s, o.suits[s]); 66 | } 67 | } 68 | // jokers 69 | for (j = 0; j < o.jokers; j++) { 70 | l = this.cards.length; 71 | // suit will always be 1 or 2 72 | this.cards[l] = new playingCards.card("N", o.jokerText, (j % 2) + 1, ''); 73 | } 74 | } 75 | }; 76 | // TODO: create more methods: 77 | // playingCards.prototype.order (set to out-of-box ordering) 78 | // -- do we want other special formations (like trick deck ordering systems that deal perfect hands)? 79 | // -- probably going to leave this as an extension option 80 | /** 81 | * draw a card 82 | * @return mixed (object|null) A card object (if a card is available) 83 | */ 84 | playingCards.prototype.draw = function() { 85 | return this.cards.length > 0 ? this.cards.pop() : null; 86 | }; 87 | /** 88 | * add a card to the top of the deck 89 | */ 90 | playingCards.prototype.addCard = function(card) { 91 | this.cards.push(card); 92 | }; 93 | /** 94 | * get the number of cards remaining in the deck 95 | * (easy enough just to call cardObject.cards.length but hey) 96 | */ 97 | playingCards.prototype.count = function() { 98 | return this.cards.length; 99 | }; 100 | /** 101 | * shuffle the deck 102 | * 103 | * @param int n The number of times to shuffle (defaults to 5) 104 | */ 105 | playingCards.prototype.shuffle = function(n) { 106 | if (!n) { 107 | n = 5; 108 | } 109 | var l = this.cards.length, 110 | r,tmp,i,j; 111 | 112 | for (i = 0; i < n; i++) { 113 | for (j = 0; j < l; j++) { 114 | r = Math.floor(Math.random() * l); 115 | tmp = this.cards[j]; 116 | this.cards[j] = this.cards[r]; 117 | this.cards[r] = tmp; 118 | } 119 | } 120 | }; 121 | 122 | playingCards.prototype.orderByRank = function() { 123 | this.cards.sort(compareRank); 124 | } 125 | 126 | playingCards.prototype.orderBySuit = function() { 127 | this.init(); 128 | } 129 | 130 | /* 131 | * requires jquery (currently) 132 | * TODO: put this in a UI extension pack along with all the other demo methods 133 | */ 134 | playingCards.prototype.spread = function(dest) { 135 | if (!this.conf.el && !dest) { 136 | return false; 137 | } 138 | var to = this.conf.el || dest, 139 | l = this.cards.length, 140 | i; 141 | to.html(''); 142 | // clear (just a demo) 143 | for (i = 0; i < l; i++) { 144 | to.append(this.cards[i].getHTML()); 145 | } 146 | }; 147 | /** 148 | * configuration defaults 149 | */ 150 | playingCards.defaults = { 151 | "decks": 1, 152 | // TODO: enable 'font' option -- loading cards.ttf 153 | "renderMode": 'css', 154 | // For a coustom " of "-String 155 | "ofString": " of ", 156 | "startShuffled": true, 157 | "jokers": 2, 158 | "jokerText": "Joker", 159 | "ranks": { 160 | "2": "Two", 161 | "3": "Three", 162 | "4": "Four", 163 | "5": "Five", 164 | "6": "Six", 165 | "7": "Seven", 166 | "8": "Eight", 167 | "9": "Nine", 168 | "10": "Ten", 169 | "J": "Jack", 170 | "Q": "Queen", 171 | "K": "King", 172 | "A": "Ace" 173 | }, 174 | "suits": { 175 | "S": "Spades", 176 | "D": "Diamonds", 177 | "C": "Clubs", 178 | "H": "Hearts" 179 | } 180 | }; 181 | 182 | /** 183 | * create a playing card 184 | * 185 | * @param string rank The numeric or letter value of the card (short value) 186 | * @param string rankString The full text representation of the rank (localized) 187 | * @param string suit The letter value of the suite (short value) 188 | * @param string suitString The full text representation of the suit (localized) 189 | * @param obj conf Overriding configuration 190 | * 191 | * @return object The card object 192 | */ 193 | playingCards.card = function(rank, rankString, suit, suitString, conf) { 194 | if (! (this instanceof playingCards.card)) { 195 | return new playingCards.card(rank, rankString, suit, suitString, conf); 196 | } 197 | 198 | this.conf = objExtend(playingCards.card.defaults, conf); 199 | 200 | if (suit === undefined) { 201 | //Arguments are rank, suit 202 | suit = rankString; 203 | rankString = playingCards.defaults.ranks[rank]; 204 | suitString = playingCards.defaults.suits[suit]; 205 | } 206 | 207 | this.rank = rank; 208 | this.rankString = rankString; 209 | this.suit = suit; 210 | this.suitString = suitString; 211 | return this; 212 | }; 213 | /** 214 | * configuration defaults 215 | */ 216 | playingCards.card.defaults = { 217 | "singleFace": false 218 | // false will use a different image for each suit/face, true will use diamond image for all 219 | }; 220 | /** 221 | * get the text representation of the card 222 | */ 223 | playingCards.card.prototype.toString = function() { 224 | return this.suitString !== "" ? this.rankString + playingCards.defaults.ofString + this.suitString: this.rankString; 225 | }; 226 | 227 | /** 228 | * Simple object extend to override default settings 229 | */ 230 | function objExtend(o, ex) { 231 | if (!ex) { 232 | return o; 233 | } 234 | for (var p in ex) { 235 | o[p] = ex[p]; 236 | } 237 | return o; 238 | } 239 | 240 | /** 241 | * Compare functions 242 | */ 243 | function compareRank(a, b) { 244 | var intRegex = /^\d+$/; 245 | 246 | if (a.rank == b.rank) return 0; 247 | if (a.rank == "N") return 1; 248 | if (b.rank == "N") return -1; 249 | if (a.rank == "A") return 1; 250 | if (b.rank == "A") return -1; 251 | if (!isNaN(a.rank - b.rank)) return a.rank - b.rank; 252 | if (a.rank == "K" && b.rank == "J") return 1; 253 | if (a.rank == "J" && b.rank == "K") return -1; 254 | if (a.rank == "K" && b.rank == "Q") return 1; 255 | if (a.rank == "Q" && b.rank == "K") return -1; 256 | if (a.rank == "Q" && b.rank == "J") return 1; 257 | if (a.rank == "J" && b.rank == "Q") return -1; 258 | if (a.rank == "K" && intRegex.test(b.rank)) return 1; 259 | if (a.rank == "Q" && intRegex.test(b.rank)) return 1; 260 | if (a.rank == "J" && intRegex.test(b.rank)) return 1; 261 | if (intRegex.test(a.rank) && b.rank == "K") return -1; 262 | if (intRegex.test(a.rank) && b.rank == "Q") return -1; 263 | if (intRegex.test(a.rank) && b.rank == "J") return -1; 264 | } 265 | 266 | })(this,this.document); 267 | -------------------------------------------------------------------------------- /playingCards.ui.css: -------------------------------------------------------------------------------- 1 | /** 2 | * deck of cards. 3 | * This can be used to play standard card games (which could be additional rule modules attached to this set) 4 | * 5 | * @author Copyright (c) 2010 Adam Eivy (antic | atomantic) 6 | * @license Dual licensed under the MIT and GPL licenses: 7 | * http://www.opensource.org/licenses/mit-license.php 8 | * http://www.gnu.org/licenses/gpl.html 9 | */ 10 | .playingCard { /* to show the back of the card, hide the front */ 11 | position: relative; 12 | background-color:#036; 13 | border:1px solid #666; 14 | font-size: 20px; 15 | float: left; 16 | width: 3.8em; 17 | height: 5em; 18 | } 19 | 20 | .playingCard .front { 21 | background-color: #fff; 22 | color: #000; 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | } 27 | 28 | .playingCard .corner { 29 | position: absolute; 30 | font-size: .5em; 31 | left: 0.25em; 32 | top: 0.25em; 33 | } 34 | .playingCard .cornerBR { 35 | left: auto; 36 | top: auto; 37 | right: 0.25em; 38 | bottom: 0.25em; 39 | } 40 | 41 | .playingCard .flip { 42 | -webkit-transform: rotate(180deg); 43 | -moz-transform: rotate(180deg); 44 | /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);*/ 45 | writing-mode: tb-rl; 46 | } 47 | 48 | .playingCard .red { 49 | color: #f00; 50 | } 51 | 52 | .playingCard .suit { 53 | position: absolute; 54 | z-index:2; 55 | } 56 | /* large center Ace style suit */ 57 | .playingCard .suit0 { 58 | font-size: 3em; 59 | left: 0.3em; 60 | top: 0.3em; 61 | } 62 | 63 | .playingCard .face { 64 | position: absolute; 65 | z-index:1; 66 | border: 1px solid #000; 67 | left: 0.6em; 68 | top: 0.45em; 69 | width: 2.5em; 70 | height: 4.em; 71 | } 72 | /* 73 | .playingCard .J { 74 | background-image: url("img/J.gif"); 75 | } 76 | .playingCard .Q { 77 | background-image: url("img/Q.gif"); 78 | } 79 | .playingCard .K { 80 | background-image: url("img/K.gif"); 81 | } 82 | */ 83 | .playingCard .A1 { 84 | left: 0.7em; 85 | top: 0.5em; 86 | } 87 | .playingCard .A2 { 88 | left: 0.7em; 89 | top: 1.5em; 90 | } 91 | .playingCard .A3 { 92 | left: 0.7em; 93 | top: 2.0em; 94 | } 95 | .playingCard .A4 { 96 | left: 0.7em; 97 | top: 2.5em; 98 | } 99 | .playingCard .A5 { 100 | left: 0.7em; 101 | top: 3.5em; 102 | } 103 | .playingCard .B1 { 104 | left: 1.6em; 105 | top: 0.5em; 106 | } 107 | .playingCard .B2 { 108 | left: 1.6em; 109 | top: 1.0em; 110 | } 111 | .playingCard .B3 { 112 | left: 1.6em; 113 | top: 2.0em; 114 | } 115 | .playingCard .B4 { 116 | left: 1.6em; 117 | top: 3.0em; 118 | } 119 | .playingCard .B5 { 120 | left: 1.6em; 121 | top: 3.5em; 122 | } 123 | .playingCard .C1 { 124 | left: 2.45em; 125 | top: 0.5em; 126 | } 127 | .playingCard .C2 { 128 | left: 2.45em; 129 | top: 1.5em; 130 | } 131 | .playingCard .C3 { 132 | left: 2.45em; 133 | top: 2.0em; 134 | } 135 | .playingCard .C4 { 136 | left: 2.45em; 137 | top: 2.5em; 138 | } 139 | .playingCard .C5 { 140 | left: 2.45em; 141 | top: 3.5em; 142 | } 143 | -------------------------------------------------------------------------------- /playingCards.ui.js: -------------------------------------------------------------------------------- 1 | /*global playingCards*/ 2 | /*jslint jquery:true */ 3 | 4 | /** 5 | * playingCards.ui is a UI utility library extension of the playingCard.js library 6 | * This contains methods to render the cards and apply effects. 7 | * 8 | * @requires playingCards.js 9 | * @requires playingCards.ui.css 10 | * 11 | * @author Copyright (c) 2010 Adam Eivy (antic | atomantic) 12 | * @license Dual licensed under the MIT and GPL licenses: 13 | * http://www.opensource.org/licenses/mit-license.php 14 | * http://www.gnu.org/licenses/gpl.html 15 | */ 16 | 17 | (function($,window,document,undefined) { 18 | 19 | if ($.fn) { 20 | // we can use library methods 21 | // attach this as an extension to the library 22 | $.fn.playingCards = playingCards; 23 | } 24 | /* 25 | * requires jquery (currently) 26 | */ 27 | playingCards.prototype.spread = function(dest, slowly) { 28 | if (!this.conf.el && !dest) { 29 | return false; 30 | } 31 | var to = this.conf.el || dest, 32 | l = this.cards.length, 33 | i; 34 | to.html(''); 35 | // clear (just a demo) 36 | if (slowly) { 37 | var thisThis = this; 38 | var i = 0; 39 | var endinterval = setInterval(function() { 40 | to.append(thisThis.cards[i].getHTML()); 41 | i++; 42 | if (i >= l) { 43 | clearInterval(endinterval); 44 | } 45 | }, 130); 46 | } else { 47 | for (i = 0; i < l; i++) { 48 | to.append(this.cards[i].getHTML()); 49 | } 50 | } 51 | }; 52 | /** 53 | * generate (and cache) html for the card 54 | * 55 | * @return string The HTML block to show the card 56 | */ 57 | playingCards.card.prototype.getHTML = function() { 58 | if (this.html) { 59 | return this.html; 60 | } 61 | this.suitCode = " "; 62 | this.colorCls = ''; 63 | switch (this.suit) { 64 | case "S": 65 | this.suitCode = "♠"; 66 | break; 67 | case "D": 68 | this.colorCls = "red"; 69 | this.suitCode = "♦"; 70 | break; 71 | case "C": 72 | this.suitCode = "♣"; 73 | break; 74 | case "H": 75 | this.colorCls = "red"; 76 | this.suitCode = "♥"; 77 | break; 78 | } 79 | 80 | // concatenating strings with "+" is slow, using array join is faster: http://code.google.com/speed/articles/optimizing-javascript.html 81 | // TODO: run perf test to be sure that in this case we are getting better perf in IE 82 | var txt = this.rank; 83 | if (this.rank === "N") { 84 | txt = this.rankString.split('').join('
'); 85 | } 86 | var strBuild = ['
', txt, '
', this.suitCode, '
']; 87 | strBuild = strBuild.concat(this.buildIconHTML()); 88 | strBuild = strBuild.concat('
', txt, '
', this.suitCode, '
'); 89 | this.html = strBuild.join(''); 90 | return this.html; 91 | }; 92 | /** 93 | * build the middle of the playing card HTML 94 | * 95 | * @return string The HTML block for the middle of the card 96 | */ 97 | playingCards.card.prototype.buildIconHTML = function() { 98 | // TODO: could we optimize this with a for loop that breaks/continues to named positions? 99 | if (this.rank === "A") { 100 | return ['
', this.suitCode, '
']; 101 | } 102 | if (this.rank === "J" || this.rank === "Q" || this.rank === "K" || this.rank === "N") { 103 | var n = 'D'; 104 | var imgPrefix = this.conf.imgPrefix || ''; 105 | if (!this.conf.singleFace) { 106 | n = this.suit; 107 | } 108 | return [ 109 | '
', this.suitCode, '
', 110 | '', 111 | '
', this.suitCode, '
' 112 | ]; 113 | } 114 | var ret = [], 115 | list = ['4', '5', '6', '7', '8', '9', '10']; 116 | // all of these will have A1, A5, C1, C5 icons 117 | if (list.indexOf(this.rank) !== -1) { 118 | ret = ret.concat([ 119 | '
', this.suitCode, '
', 120 | '
', this.suitCode, '
', 121 | '
', this.suitCode, '
', 122 | '
', this.suitCode, '
' 123 | ]); 124 | } 125 | list = ['2', '3']; 126 | if (list.indexOf(this.rank) !== -1) { 127 | ret = ret.concat([ 128 | '
', this.suitCode, '
', 129 | '
', this.suitCode, '
' 130 | ]); 131 | } 132 | list = ['3', '5', '9']; 133 | if (list.indexOf(this.rank) !== -1) { 134 | ret = ret.concat([ 135 | '
', this.suitCode, '
' 136 | ]); 137 | } 138 | list = ['6', '7', '8']; 139 | if (list.indexOf(this.rank) !== -1) { 140 | ret = ret.concat([ 141 | '
', this.suitCode, '
', 142 | '
', this.suitCode, '
' 143 | ]); 144 | } 145 | list = ['7', '8', '10']; 146 | if (list.indexOf(this.rank) !== -1) { 147 | ret = ret.concat([ 148 | '
', this.suitCode, '
' 149 | ]); 150 | } 151 | list = ['8', '10']; 152 | if (list.indexOf(this.rank) !== -1) { 153 | ret = ret.concat([ 154 | '
', this.suitCode, '
' 155 | ]); 156 | } 157 | list = ['9', '10']; 158 | if (list.indexOf(this.rank) !== -1) { 159 | ret = ret.concat([ 160 | '
', this.suitCode, '
', 161 | '
', this.suitCode, '
', 162 | '
', this.suitCode, '
', 163 | '
', this.suitCode, '
' 164 | ]); 165 | } 166 | return ret; 167 | }; 168 | })(typeof(jQuery) !== 'undefined' ? jQuery: function(){},this,this.document); --------------------------------------------------------------------------------