jafstar/deck1

## deck1
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Deck of Cards</title>
	<meta charset="UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>


<div id="table">
	<div id="drop"></div>
<div>

<div id="player1" class="player"></div>
<div id="player2" class="player"></div>
<div id="player3" class="player"></div>
<div id="player4" class="player"></div>

<script type="text/javascript">

	var suits =['C','S','H','D']
	var cards = ['2','3','4','5','6','7','8','9','10','J','Q','K','A'];
	var deck = [];
	var players = ['tom','dick','jane','sally'];

	//CREATE CARDS
	$.each(suits, function(index1, suit) {
		$.each(cards, function(index2, card) {
			deck.push("<div class='card'>"+card+"<div class='suit'>" + suit +"</div></div>");
		});
	});

	//SHUFFLE
	deck.sort(function() { return 0.5 - Math.random() });

	//SHOW CARDS
	$.each(deck, function(index, card) {
		//$('#table').append(card);
	});

	//COUNT PLAYERS
	var totalPlayers = players.length;

	//COUNT CARDS
	var totalCards = deck.length;

	//ROUNDS
	var rounds = totalCards/totalPlayers;

	var Tom = [];
	var Dick = [];
	var Jane = [];
	var Sally = [];

	//DEAL CARDS
	for(var i=0; i < totalCards; i+=4) {
		Tom.push(deck[i]);
		Dick.push(deck[i + 1]);
		Jane.push(deck[i + 2]);
		Sally.push(deck[i + 3]);
	}

	//DISPLAY PLAYER CARDS
	$.each(Tom, function(index, card) {
		$('#player1').append(card);
	});

	$.each(Dick, function(index, card) {
		$('#player2').append(card);
	});

	$.each(Jane, function(index, card) {
		$('#player3').append(card);
	});

	$.each(Sally, function(index, card) {
		$('#player4').append(card);
	});


</script>


<script type="text/javascript">
$(function() {
	$(".card").draggable({revert:"invalid"});
	$("#drop").droppable({
		accept: checkSuit,
		tolerance: "touch",
		drop:function(event,ui) {
			console.log('dropped');
			ui.draggable.fadeOut(500);
		}
	});

	function checkSuit(card) {
		var suit = $(card).find('.suit').html();
		console.log(suit);
		if(suit == 'H') {
			return true;
		}
	}

});

</script>
<style>
body {
	background: #333;
}

#table {
	width: 300px;
	height: 300px;
	background: #777;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -150px;
}

#drop {
	width: 200px;
	height: 200px;
	background: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
}

.card {
	width: 25px;
	height: 40px;
	background: #FFF;
	border-radius: 3px;
	margin: 5px 5px 10px 5px;
	float: left;
	cursor: pointer;
		font: .6em arial;
		color: #999;
}

.suit {
	font: .6em arial;
	color: #999;
	text-align: center;
	padding-top: 50%;
	cursor: pointer;
}


/***************PLAYERS************/
.player {
	background: #999;
		width: 250px;
	height: 120px;
}
#player1 {

	position: fixed;
	top: 0px;
}

#player2 {

	position: fixed;
	right: 0px;
}

#player3 {

	position: fixed;
	bottom: 0px;
}

#player4 {

	position: fixed;
	left: 0px;
}
</style>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Deck of Cards</title>
	<meta charset="UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	</head>
	<body>


	<div id="table">
	<div id="drop"></div>
	<div>

	<div id="player1" class="player"></div>
	<div id="player2" class="player"></div>
	<div id="player3" class="player"></div>
	<div id="player4" class="player"></div>

	<script type="text/javascript">

	var suits =['C','S','H','D']
	var cards = ['2','3','4','5','6','7','8','9','10','J','Q','K','A'];
	var deck = [];
	var players = ['tom','dick','jane','sally'];

	//CREATE CARDS
	$.each(suits, function(index1, suit) {
	$.each(cards, function(index2, card) {
	deck.push("<div class='card'>"+card+"<div class='suit'>" + suit +"</div></div>");
	});
	});

	//SHUFFLE
	deck.sort(function() { return 0.5 - Math.random() });

	//SHOW CARDS
	$.each(deck, function(index, card) {
	//$('#table').append(card);
	});

	//COUNT PLAYERS
	var totalPlayers = players.length;

	//COUNT CARDS
	var totalCards = deck.length;

	//ROUNDS
	var rounds = totalCards/totalPlayers;

	var Tom = [];
	var Dick = [];
	var Jane = [];
	var Sally = [];

	//DEAL CARDS
	for(var i=0; i < totalCards; i+=4) {
	Tom.push(deck[i]);
	Dick.push(deck[i + 1]);
	Jane.push(deck[i + 2]);
	Sally.push(deck[i + 3]);
	}

	//DISPLAY PLAYER CARDS
	$.each(Tom, function(index, card) {
	$('#player1').append(card);
	});

	$.each(Dick, function(index, card) {
	$('#player2').append(card);
	});

	$.each(Jane, function(index, card) {
	$('#player3').append(card);
	});

	$.each(Sally, function(index, card) {
	$('#player4').append(card);
	});


	</script>


	<script type="text/javascript">
	$(function() {
	$(".card").draggable({revert:"invalid"});
	$("#drop").droppable({
	accept: checkSuit,
	tolerance: "touch",
	drop:function(event,ui) {
	console.log('dropped');
	ui.draggable.fadeOut(500);
	}
	});

	function checkSuit(card) {
	var suit = $(card).find('.suit').html();
	console.log(suit);
	if(suit == 'H') {
	return true;
	}
	}

	});

	</script>
	<style>
	body {
	background: #333;
	}

	#table {
	width: 300px;
	height: 300px;
	background: #777;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -150px;
	}

	#drop {
	width: 200px;
	height: 200px;
	background: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
	}

	.card {
	width: 25px;
	height: 40px;
	background: #FFF;
	border-radius: 3px;
	margin: 5px 5px 10px 5px;
	float: left;
	cursor: pointer;
	font: .6em arial;
	color: #999;
	}

	.suit {
	font: .6em arial;
	color: #999;
	text-align: center;
	padding-top: 50%;
	cursor: pointer;
	}


	/*************PLAYERS**********/
	.player {
	background: #999;
	width: 250px;
	height: 120px;
	}
	#player1 {

	position: fixed;
	top: 0px;
	}

	#player2 {

	position: fixed;
	right: 0px;
	}

	#player3 {

	position: fixed;
	bottom: 0px;
	}

	#player4 {

	position: fixed;
	left: 0px;
	}
	</style>
	</body>
	</html>