djleeds · August 26, 2015 23:30
diff --git a/htb-css3-leaderboard-full-multiple.html b/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>