Building for Online and Social - HTML5 Mobile Game Development - page 399

<div id='show-top-ten'>See Top Ten</div>
<div id='hide-top-ten'>Back to game</div>
<ol id='top-ten'></ol>
</div>
<script>
$(function() {
var nextClick = <%= nextClick %>,
clickTimer = null;
function updateNextClick() {
$("#blob").text(nextClick >= 0 ?
Math.ceil(nextClick) + " seconds" :
"Click Now");
}
function setClickTimer() {
clearInterval(clickTimer);
clickTimer = setInterval(function() {
nextClick--;
updateNextClick();
},1000);
}
updateNextClick();
setClickTimer();
$("#blob").on("click",function() {
$.post("/click",function(data) {
if(data.clicked) {
$("#clicks").text(data.user.clicks);
nextClick = data.nextClick;
updateNextClick();
setClickTimer();
}
});
});
$("#show-top-ten").on("click",function() {
$("#show-top-ten,#blob").hide();
$.get("/top-ten",function(data) {
$("#hide-top-ten,#top-ten").show();
$("#top-ten").empty();
$(data.users).each(function(idx) {
$("#top-ten").append("<li> " + this[0] + ": " + this[1]);
});
});