Add hidden counter to imgur

+ 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.

modules/imgur/config.json

@@ -3,5 +3,6 @@
     "dependencies": [ "web", "api" ],
     "imagelength": 5,
     "nsfwwarn": true,
-    "apikey": "86fd3a8da348b65"
+    "apikey": "86fd3a8da348b65",
+    "highscore": "ricount"
 }

modules/imgur/pages.js

@@ -3,7 +3,9 @@ var _ = require('underscore')._;
 var pages = function(dbot) {
     return {
         '/imgur/random': function(req, res) {
-            res.render('imgurr', { });
+            var hs = dbot.db.quoteArrs[dbot.config.imgur.highscore];
+            hs = hs[hs.length-1];
+            res.render('imgurr', {"highscore" : hs });
         },
 
         '/imgur/stats': function(req, res) {

modules/stats

@@ -1 +1 @@
-Subproject commit 518fcccbe6503eb3ee02346d01005b67f16cce40
+Subproject commit e5519f353abf00e4ec25702f8e02231c9b1f5258

public/imgurr.css

@@ -38,7 +38,7 @@
     width:168px;
 }
 
-#history li,#loading {
+#history li,#loading,#count {
     display:block;
     font-family:monospace;
     font-size:10px;
@@ -65,18 +65,26 @@
     opacity:0.2;
 }
 
-#history,#loading,#details {
+#history,#loading,#details,#count {
     position:absolute;
 }
 
-#loading {
+#loading, #count {
     font-weight:500;
+}
+#loading {
+    top:95px;
     left:220px;
     min-width:95px;
-    top:95px;
 }
 
-#loading,#details,#history li {
+#count {
+    bottom:25px;
+    left:25px;
+    display:none;
+}
+
+#loading,#details,#history li,#count {
     background:rgba(43,43,43,0.8);
     border-radius:5px;
     color:#85bf25;

views/imgur/imgurr.jade

@@ -11,6 +11,9 @@ html(lang='en')
         $('<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;
@@ -22,6 +25,8 @@ html(lang='en')
         $.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) {
@@ -38,6 +43,10 @@ html(lang='en')
       $(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) {
@@ -48,6 +57,9 @@ html(lang='en')
               getNewImage();
             }
             break;
+          case 67:
+            $('#count').fadeToggle();
+            break;
           case 83: // s
             $('body').toggleClass('crop');
             giveMessage("Toggled scrollbars.")
@@ -56,6 +68,8 @@ html(lang='en')
   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