Got basic demo working

3 files changed, 85 insertions, 40 deletions

diff --git a/cards.js b/cards.js
index 5200460..86a65e2 100644
--- a/cards.js
+++ b/cards.js
@@ -15,25 +15,32 @@ var cards = (function() {
 
 	var zIndexCounter = 1;
 	
+	var all = []; //All the cards created.
+	
 	function init(options) {
 		options = options || {};
-		this.all = [];
+		all = [];
 		var start = options.acesHigh ? 2 : 1;
 		var end = start + 12;
+		if (!options.table) {
+			alert('You must set the table id');
+		}
+		var table = $(options.table);
+		
 		for (var i = start; i <= end; i++) {
-			this.deck.push(new Card('h', i));
-			this.deck.push(new Card('s', i));
-			this.deck.push(new Card('d', i));
-			this.deck.push(new Card('c', i));
+			all.push(new Card('h', i, table));
+			all.push(new Card('s', i, table));
+			all.push(new Card('d', i, table));
+			all.push(new Card('c', i, table));
 		}
 		if (options.blackJoker) {
-			this.deck.push(new Card('bj', 0));
+			all.push(new Card('bj', 0, table));
 		}
 		if (options.redJoker) {
-			this.deck.push(new Card('rj', 0));
+			all.push(new Card('rj', 0, table));
 		}
-		shuffle(this.deck);
- 	}
+		shuffle(all);
+	}
 
     function shuffle(deck) {
         //Fisher yates shuffle
@@ -48,18 +55,26 @@ var cards = (function() {
         }
     }
 	
-	function Card(suit, rank) {
-		this.init(suit, rank);
+	function Card(suit, rank, table) {
+		this.init(suit, rank, table);
 	}
 	
 	Card.prototype = {
-		init: function (suit, rank) {
+		init: function (suit, rank, table) {
 			this.shortName = suit + rank;
 			this.suit = suit;
 			this.rank = rank;
 			this.name = suit.toUpperCase()+rank;
 			this.faceUp = false;
-			this.el = $('<div/>').addClass('card');
+			this.el = $('<div/>').css({
+				width:'71px',
+				height:'96px',
+				"background-image":'url(img/cards.png)',
+				position:'absolute',
+				cursor:'pointer'	
+			}).addClass('card').appendTo($(table));
+			this.showCard();
+			this.moveToFront();
 		},
 
 		toString: function () {
@@ -67,9 +82,8 @@ var cards = (function() {
 		},
 
 		moveTo : function(x, y, speed, callback) {
-			$(this.el).animate(
 			var props = {top:y-(CARD_SIZE.height/2),left:x-(CARD_SIZE.width/2)};
-			$(this.el).animate({props, speed || ANIMATION_SPEED, callback);
+			$(this.el).animate(props, speed || ANIMATION_SPEED, callback);
 		},
 		
 		rotate : function(angle) {
@@ -144,7 +158,7 @@ var cards = (function() {
 				}
 				this.rotate(0);
 			}
-			$(this.el).setBackground(xpos + 'px', ypos + 'px');
+			$(this.el).css('background-position', xpos + 'px ' + ypos + 'px');
 		},
 
 		hideCard : function(position) {
@@ -153,12 +167,12 @@ var cards = (function() {
 			}
 			var h = $(this.el).height(), w = $(this.el).width();
 			if (position == TOP || position == BOTTOM) {
-				$(this.el).setBackground(CARDBACK.x + 'px', CARDBACK.y + 'px');
+				$(this.el).css('background-position', CARDBACK.x + 'px ' + CARDBACK.y + 'px');
 				if (w>h) {
 					$(this.el).height(w).width(h);
 				}
 			} else {
-				$(this.el).setBackground(HCARDBACK.x + 'px', HCARDBACK.y + 'px');
+				$(this.el).css('background-position', HCARDBACK.x + 'px ' + HCARDBACK.y + 'px');
 				if (h>w) {
 					$(this.el).height(w).width(h);
 				}
@@ -173,22 +187,10 @@ var cards = (function() {
 
 	return {
 		init : init,
-		all : [],
-		SIZE = CARD_SIZE,,
+		all : all,
+		SIZE : CARD_SIZE,
 		Card : Card,
 		shuffle: shuffle
 	};
 })();
 
-
-cards.init({acesHigh:true,redJoker:true})
-var deck = new cards.Deck({faceUp:true, x:500, y:300});
-var pile = new cards.Pile({faceUp:true, x:500, y:300});
-var cell = new cards.Cell({faceUp:true});
-
-deck.render();
-pile.render();
-card.flip({immediate:true});
-deck.addCard(cards.all.drawCard());
-deck.render({immediate:true});
-
diff --git a/css/cards.css b/css/cards.css
deleted file mode 100644
index 4837588..0000000
--- a/css/cards.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.card {
-    width:71px;
-    height:96px;
-    background-image:url(../images/cards.png);
-    position:absolute;
-    cursor:pointer;
-}
-
diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..227577f
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>cards.js - Write card games in Javascript.</title>
+		<style>
+			html { background-color:#ddd; }
+			body { 
+				border-radius:3px; 
+				box-shadow:black 0px 0px 2px; 
+				width: 600px; 
+				background:white; 
+				margin:20px auto; 
+				border:solid 1px black; 
+				font-family: arial, sans-serif; 
+				padding:50px;  
+			}
+			
+			code {
+				border:solid 1px black;
+				width:600px;
+				display:block;
+				height:150px;
+			}
+			
+			#card-table {
+				background-color:green;
+				height:400px;
+				width:600px;
+			}
+			a:visited {color:blue;}
+		</style>
+		<script src="jquery-1.7.min.js"></script>
+		<script src="cards.js"></script>
+		<script>
+			function execute() {
+				var code = $('code').text();
+				eval(code);
+			}
+		</script>
+	</head>
+	<body>
+		<h1>Cards.js</h1>
+		<code>
+			cards.init({table:'#card-table'});
+		
+		</code>
+		<button onclick="execute()">Execute</button>
+		<div id="card-table">
+		</div>
+	</body>
+</html>
\ No newline at end of file