djleeds/htb-css3-leaderboard-full-multiple.html

## htb-css3-leaderboard-full-multiple.html
<html>
<head><title>Animating a List with CSS3 Transitions - Multiple Lists</title></head>
<body>

<!-- Demonstrates one way to animate multiple lists -->

<style type="text/css">
	.leaderboard li {
		font-family: sans-serif;
		font-size: 12px;
		line-height: 12px;
	}
	.leaderboard .players li {
		display:block;
		clear: both;
		position: absolute;
		width: 350px;
		-moz-transition-duration: 1s;
		-webkit-transition-duration: 1s;
		-ms-transition-duration: 1s;
	}
	.leaderboard .players li.header {
		font-weight: bold;
		background-color: silver;
		background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
	}
	.leaderboard .players {
		padding: 0;
		width: 350px;
		position: relative;
		border: 1px solid #333;
		box-shadow: 2px 2px 5px gray;
		height: 132px;
		background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
	}
	.leaderboard .players div {
		display: block;
		float: left;
		overflow: hidden;
		padding: 5px;
	}
	.leaderboard .player {
		background: -moz-linear-gradient(top, #feffff 0%, #e0dace 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e0dace));
	}
	.leaderboard .rank {
		width: 50px;
	}
	.leaderboard .name {
		width: 150px;
	}
	.leaderboard .score {
		width: 100px;
	}
</style>

<div id="board1">
	<div class="leaderboard">
		<ul class="players">
			<li class="header">
				<div class="rank">Rank</div>
				<div class="name">Player</div>
				<div class="score">Score</div>
			</li>
		</ul>
	</div>
</div>

<div id="board2">
	<div class="leaderboard">
		<ul class="players">
			<li class="header">
				<div class="rank">Rank</div>
				<div class="name">Player</div>
				<div class="score">Score</div>
			</li>
		</ul>
	</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script language="javascript">
	var Leaderboard = function($board) {
		var self = this;
		var players;
		var timerId;
		var scoreToWin = 2000;
		var updateInterval = 2000;

		this.descending = function(a, b) { return a.score < b.score ? 1 : -1; }

		this.reposition = function() {
			var height = $board.find(".leaderboard .header").height();
			var y = height;
			for(var i = 0; i < players.length; i++) {
				players[i].$item.css("top", y + "px");
				y += height;
			}
		}

		this.updateBoard = function() {
			var player = self.getRandomPlayer();
			player.score += self.getRandomScoreIncrease();
			player.$item.find(".score").text(player.score);

			players.sort(self.descending);
			self.updateRanks(players);
			self.reposition();

			if(self.isGameOver(player.score)) {
				self.resetBoard();
			}
		}

		this.isGameOver = function(score) {
			return score >= scoreToWin;
		}

		this.getRandomPlayer = function() {
			var index = this.getRandomBetween(0, players.length);
			return players[index];
		}

		this.getRandomScoreIncrease = function() {
			return this.getRandomBetween(50, 150);
		}

		this.getRandomBetween = function(minimum, maximum) {
			 return Math.floor(Math.random() * maximum) + minimum;
		}

		this.updateRanks = function(players) {
			for(var i = 0; i < players.length; i++) {
				players[i].$item.find(".rank").text(i + 1);
			}
		}

		this.resetBoard = function() {
			var $lists = $board.find(".players");

			$lists.find("li.player").remove();
			if(timerId !== undefined) {
				clearInterval(timerId);
			}

			players = [
				{ name: "D35truXion", score: 500 },
				{ name: "Lithos", score: 400 },
				{ name: "baby.bumpkins", score: 300 },
				{ name: "SpreadsheetMan", score: 200 },
				{ name: "Eitz", score: 100 }
			];

			for(var i = 0; i < players.length; i++) {
				var $item = $(
					"<li class='player'>" +
						"<div class='rank'>" + (i + 1) + "</div>" +
						"<div class='name'>" + players[i].name + "</div>" +
						"<div class='score'>" + players[i].score + "</div>" +
					"</li>");
				players[i].$item = $item;
				$lists.append($item);
			}

			timerId = setInterval(this.updateBoard, updateInterval);

			this.reposition();
		}

		this.resetBoard();
	}

	var board1 = new Leaderboard($("#board1"));
	var board2 = new Leaderboard($("#board2"));

</script>
</body>
</html>
	<html>
	<head><title>Animating a List with CSS3 Transitions - Multiple Lists</title></head>
	<body>

	<!-- Demonstrates one way to animate multiple lists -->

	<style type="text/css">
	.leaderboard li {
	font-family: sans-serif;
	font-size: 12px;
	line-height: 12px;
	}
	.leaderboard .players li {
	display:block;
	clear: both;
	position: absolute;
	width: 350px;
	-moz-transition-duration: 1s;
	-webkit-transition-duration: 1s;
	-ms-transition-duration: 1s;
	}
	.leaderboard .players li.header {
	font-weight: bold;
	background-color: silver;
	background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
	}
	.leaderboard .players {
	padding: 0;
	width: 350px;
	position: relative;
	border: 1px solid #333;
	box-shadow: 2px 2px 5px gray;
	height: 132px;
	background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
	}
	.leaderboard .players div {
	display: block;
	float: left;
	overflow: hidden;
	padding: 5px;
	}
	.leaderboard .player {
	background: -moz-linear-gradient(top, #feffff 0%, #e0dace 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e0dace));
	}
	.leaderboard .rank {
	width: 50px;
	}
	.leaderboard .name {
	width: 150px;
	}
	.leaderboard .score {
	width: 100px;
	}
	</style>

	<div id="board1">
	<div class="leaderboard">
	<ul class="players">
	<li class="header">
	<div class="rank">Rank</div>
	<div class="name">Player</div>
	<div class="score">Score</div>
	</li>
	</ul>
	</div>
	</div>

	<div id="board2">
	<div class="leaderboard">
	<ul class="players">
	<li class="header">
	<div class="rank">Rank</div>
	<div class="name">Player</div>
	<div class="score">Score</div>
	</li>
	</ul>
	</div>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

	<script language="javascript">
	var Leaderboard = function($board) {
	var self = this;
	var players;
	var timerId;
	var scoreToWin = 2000;
	var updateInterval = 2000;

	this.descending = function(a, b) { return a.score < b.score ? 1 : -1; }

	this.reposition = function() {
	var height = $board.find(".leaderboard .header").height();
	var y = height;
	for(var i = 0; i < players.length; i++) {
	players[i].$item.css("top", y + "px");
	y += height;
	}
	}

	this.updateBoard = function() {
	var player = self.getRandomPlayer();
	player.score += self.getRandomScoreIncrease();
	player.$item.find(".score").text(player.score);

	players.sort(self.descending);
	self.updateRanks(players);
	self.reposition();

	if(self.isGameOver(player.score)) {
	self.resetBoard();
	}
	}

	this.isGameOver = function(score) {
	return score >= scoreToWin;
	}

	this.getRandomPlayer = function() {
	var index = this.getRandomBetween(0, players.length);
	return players[index];
	}

	this.getRandomScoreIncrease = function() {
	return this.getRandomBetween(50, 150);
	}

	this.getRandomBetween = function(minimum, maximum) {
	return Math.floor(Math.random() * maximum) + minimum;
	}

	this.updateRanks = function(players) {
	for(var i = 0; i < players.length; i++) {
	players[i].$item.find(".rank").text(i + 1);
	}
	}

	this.resetBoard = function() {
	var $lists = $board.find(".players");

	$lists.find("li.player").remove();
	if(timerId !== undefined) {
	clearInterval(timerId);
	}

	players = [
	{ name: "D35truXion", score: 500 },
	{ name: "Lithos", score: 400 },
	{ name: "baby.bumpkins", score: 300 },
	{ name: "SpreadsheetMan", score: 200 },
	{ name: "Eitz", score: 100 }
	];

	for(var i = 0; i < players.length; i++) {
	var $item = $(
	"<li class='player'>" +
	"<div class='rank'>" + (i + 1) + "</div>" +
	"<div class='name'>" + players[i].name + "</div>" +
	"<div class='score'>" + players[i].score + "</div>" +
	"</li>");
	players[i].$item = $item;
	$lists.append($item);
	}

	timerId = setInterval(this.updateBoard, updateInterval);

	this.reposition();
	}

	this.resetBoard();
	}

	var board1 = new Leaderboard($("#board1"));
	var board2 = new Leaderboard($("#board2"));

	</script>
	</body>
	</html>