Leaderboard

by mmalex

HTML

<div id="container" class="container">
</div>

CSS

.container {
    width: 300px;
    position: relative;
}

.row {
    width: 100%;
    height: 50px;
    position: absolute;
    border: 1px solid black;
    background: white;
    -webkit-transition: top 0.5s ease-out;
    -moz-transition: top 0.5s ease-out;
    -o-transition: top 0.5s ease-out;
    transition: top 0.5s ease-out;
    z-index: 1;
}
.row.me {
  color: blue;
  background: cyan;
  z-index: 2;
}

JavaScript

var updateRanks = function(items) {
    items.sort(function(a, b) {
        if (a.score === b.score) return 0;
        return a.score > b.score ? 1 : -1;
    });
    for (var i = 0; i < items.length; i++) {
        items[i].rank = i;
    }
};

var updateDivs = function(items, divs) {
    for (var i = 0; i < items.length; i++) {
        var div = divs[items[i].id];
        div.style.top = (items[i].rank * 51) + 'px';
        div.innerHTML = JSON.stringify(items[i]);
    }
};

var items = [{
    id: 1,
    score: 1,
    me: true
}, {
    id: 2,
    score: 2
}, {
    id: 3,
    score: 3
}, ];

updateRanks(items);

var divs = [];

var container = document.getElementById("container");

for (var i = 0; i < items.length; i++) {
    var div = document.createElement("div");
    div.classList.add('row');
    if (items[i].me) {
    	div.classList.add('me');
    }
    div.style.top = (i * 51) + 'px';
    div.id = i;
    div.innerHTML = JSON.stringify(items[i]);
    container.appendChild(div);
    divs[items[i].id] = div;
}

setInterval(function() {
    var r = Math.round(items.length * Math.random());
    for (var i = 0; i < items.length; i++) {
        if (items[i].id === r) {
            items[i].score = Math.round(100 * Math.random());
        }
    }
    updateRanks(items);
    updateDivs(items, divs);
}, 2000);