Skip to content

Instantly share code, notes, and snippets.

@djleeds
Last active February 24, 2022 21:21
Show Gist options
  • Save djleeds/33b8a81f9f7205fc6d2f to your computer and use it in GitHub Desktop.
Save djleeds/33b8a81f9f7205fc6d2f to your computer and use it in GitHub Desktop.
Hit the Bits! - CSS3 Leaderboard - Full
<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="leaderboard">
<ul id="players">
<li class="header">
<div class="rank">Rank</div>
<div class="name">Player</div>
<div class="score">Score</div>
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
var players;
var timerId;
var scoreToWin = 2000;
var updateInterval = 2000;
function descending(a, b) { return a.score < b.score ? 1 : -1; }
function reposition() {
var height = $("#leaderboard .header").height();
var y = height;
for(var i = 0; i < players.length; i++) {
players[i].$item.css("top", y + "px");
y += height;
}
}
function updateBoard() {
var player = getRandomPlayer();
player.score += getRandomScoreIncrease();
player.$item.find(".score").text(player.score);
players.sort(descending);
updateRanks(players);
reposition();
if(isGameOver(player.score)) {
resetBoard();
}
}
function isGameOver(score) {
return score >= scoreToWin;
}
function getRandomPlayer() {
var index = getRandomBetween(0, players.length);
return players[index];
}
function getRandomScoreIncrease() {
return getRandomBetween(50, 150);
}
function getRandomBetween(minimum, maximum) {
return Math.floor(Math.random() * maximum) + minimum;
}
function updateRanks(players) {
for(var i = 0; i < players.length; i++) {
players[i].$item.find(".rank").text(i + 1);
}
}
function resetBoard() {
var $list = $("#players");
$list.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;
$list.append($item);
}
timerId = setInterval("updateBoard();", updateInterval);
reposition();
}
resetBoard();
</script>
@djleeds
Copy link
Author

djleeds commented Aug 26, 2015

Also check out the similar gist that works with multiple lists.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment