diff options
| author | Einar Egilsson <einar@einaregilsson.com> | 2012-05-16 23:53:18 +0200 |
|---|---|---|
| committer | Einar Egilsson <einar@einaregilsson.com> | 2012-05-16 23:53:18 +0200 |
| commit | d686ce6aa8c714fec88c6aa72e4d031454e351bd (patch) | |
| tree | ab5076d1f86fdc39652b7d51612ddce986f8fbd5 | |
| parent | 6462d02c4355adb8f7c963efb1bb89ca88c3d3b8 (diff) | |
Better demo
| -rw-r--r-- | cards.js | 58 | ||||
| -rw-r--r-- | demo.html | 33 |
2 files changed, 78 insertions, 13 deletions
@@ -73,7 +73,7 @@ var cards = (function() { "background-image":'url(img/cards.png)', position:'absolute', cursor:'pointer' - }).addClass('card').appendTo($(table)); + }).addClass('card').data('card', this).appendTo($(table)); this.showCard(); this.moveToFront(); }, @@ -197,11 +197,29 @@ var cards = (function() { } } Container.prototype.extend({ + addCard : function(card) { + this.addCards([card]); + }, + addCards : function(cards) { for (var i = 0; i < cards.length;i++) { - this.push(cards[i]); - cards[i].container = this; + var card = cards[i]; + if (card.container) { + card.container.removeCard(card); + } + this.push(card); + card.container = this; + } + }, + + removeCard : function(card) { + for (var i=0; i< this.length;i++) { + if (this[i] == card) { + this.splice(i, 1); + return true; + } } + return false; }, init : function(options) { @@ -211,6 +229,25 @@ var cards = (function() { this.faceUp = options.faceUp; }, + click : function(func, context) { + if (!this._click) { + this._click = []; + var me = this; + $('.card').click(function() { + var card = $(this).data('card'); + alert(card.container); + if (card.container === me) { + alert(1); + for (var i = 0; i < me._click; i++) { + var obj = me._click[i]; + obj.func.call(obj.context||window, card); + } + } + }); + } + this._click.push({callback:func, context:context}); + }, + render : function(options) { options = options || {}; var speed = options.speed || ANIMATION_SPEED; @@ -284,10 +321,19 @@ var cards = (function() { return 'Deck'; }, - deal : function(count, hands) { - if (!this.dealCounter) { - this.dealCounter = count * hands.length; + deal : function(count, hands, speed) { + var me = this; + var i = 0; + var totalCount = count*hands.length; + function dealOne() { + if (me.length == 0 || i > totalCount) { + return; + } + hands[i%hands.length].addCard(me.topCard()); + i++; + hands[i%hands.length].render({callback:dealOne, speed:speed}); } + dealOne(); } }); @@ -22,6 +22,7 @@ height:150px; white-space:pre; padding:4px; + display:none; } #card-table { @@ -41,19 +42,19 @@ <script src="jquery-1.7.min.js"></script> <script src="cards.js"></script> <script> + var exampleCounter = 1; function execute() { - var code = $('code').text(); + var code = $('code#ex' + exampleCounter).text(); eval(code); + $('code#ex' + exampleCounter).hide(); + exampleCounter++; + $('code#ex' + exampleCounter).css('display', 'block'); } </script> </head> <body> <h1>Cards.js</h1> - <div style="border:solid 1px black; width:90px; height:140px" > - <embed src="svg/c6.svg" type="image/svg+xml" /> - <embed src="svg/bluecardback.svg" type="image/svg+xml" /> - <div> - <code> + <code id="ex1" style="display:block"> //Start by initalizing the library cards.init({table:'#card-table'}); //Create a new deck of cards @@ -61,7 +62,25 @@ deck = new cards.Deck(); //cards.all contains all cards, put them all in the deck deck.addCards(cards.all); //No animation here, just get the deck onto the table. -deck.render({immediate:true}); +deck.render({immediate:true}); + </code> + <code id="ex2"> +//Now lets create a couple of hands, one face down, one face up. +upperhand = new cards.Hand({faceUp:false, y:50}); +lowerhand = new cards.Hand({faceUp:true, y:350}); +//Deck has a built in method to deal to hands. +deck.deal(5, [upperhand, lowerhand], 50) + </code> + <code id="ex3"> + lowerhand.click(function(card) { + alert(card); + }); + deck.click(function(card){ + if (card === deck.topCard()) { + lowerhand.addCard(deck.topCard()); + lowerhand.render(); + } + }); </code> <button onclick="execute()">Execute</button> <div id="card-table"> |