forked from GitHub/dbot
eb1d12ec83
+ Add a counter to the random imgur page. + Added functionality to the ``c`` key to toggle the counter display. + Added functionality to the ``r`` key to reset the counter to default. + Added a new configuration option for a quote category to get the default 'highscore' from. This commit adds a small decreasing counter to the corner of the screen. Hidden by default, press ``c`` to toggle it. The counter will begin at highscore + 1, and will decrease with every new image. This is intended to be used during contests to see how many images one can cycle through before, for example, finding a picture of a cat. The counter can be reset using the ``r`` key. The highscore is automatically set at page load to the most recent quote added to the category specified in the configuration option. Therefore it is important that only numeric data is placed in that particular quote. The score will not reset to a new highscore automatically, and nor will a new highscore update the quote category.
77 lines
2.4 KiB
Plaintext
77 lines
2.4 KiB
Plaintext
!!! 5
|
|
html(lang='en')
|
|
head
|
|
meta(charset='utf-8')
|
|
script(type="text/javascript", src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
|
|
link(rel="stylesheet", href="/imgurr.css")
|
|
title random imgur
|
|
script
|
|
var count = 0;
|
|
function giveMessage(msg) {
|
|
$('<li>'+msg+'</li>').prependTo('#history').hide().slideDown();
|
|
}
|
|
var lock = false
|
|
var highscore = #{highscore} + 1;
|
|
var score = highscore;
|
|
$('#count').text(score);
|
|
function getNewImage() {
|
|
count += 1;
|
|
lock = true;
|
|
$('#loading').fadeIn();
|
|
$('#loading').text('Loading image ' + count + '...');
|
|
document.title = 'random imgur (' + count + ')';
|
|
$('#loading').fadeIn();
|
|
$('#image').load(function(){});
|
|
$.get("/api/imgur/getRandomImage", function(d) {
|
|
$('#image').attr('src', d.data[0]);
|
|
lock = false;
|
|
score -= 1;
|
|
$('#count').text(score);
|
|
$('#details').text("Fetching info...");
|
|
giveMessage('<a href="' + d.data[0] + '">' + d.data[0] + '</a>');
|
|
$.get("/api/imgur/getImageInfoString", { 'slug': d.data[1] }, function(info) {
|
|
if(info.data[0].indexOf('undefined') == -1) {
|
|
$("#details").text(count + ': ' + info.data[0]);
|
|
$('#details').show();
|
|
} else {
|
|
$("#details").hide();
|
|
}
|
|
$('#loading').fadeOut();
|
|
}, "json");
|
|
}, "json");
|
|
}
|
|
$(getNewImage());
|
|
$(document).on('keydown', function(e){
|
|
switch(e.which){
|
|
case 82: // r
|
|
score = highscore;
|
|
$('#count').text(highscore);
|
|
giveMessage("Score reset.");
|
|
case 13: // enter
|
|
case 32: // space
|
|
if (lock) {
|
|
$('#loading').text(function(index, text){
|
|
return text.replace(/\.(?=[^.]*$)/, "!");
|
|
});
|
|
} else {
|
|
getNewImage();
|
|
}
|
|
break;
|
|
case 67:
|
|
$('#count').fadeToggle();
|
|
break;
|
|
case 83: // s
|
|
$('body').toggleClass('crop');
|
|
giveMessage("Toggled scrollbars.")
|
|
};
|
|
});
|
|
body
|
|
div#loading Loading image 1...
|
|
div#details Press [SPACE] to load a new image
|
|
div#count
|
|
#{highscore}
|
|
ul#history
|
|
li Press [SPACE] for next
|
|
div#container
|
|
img#image
|