$(function() {
      var socket = io();
      var scores = [];

      var list = $('#scores ol');

  
      socket.emit('getScores');

      socket.on('scores', function(newScores) {
          scores = newScores;
          redrawScores();
      });
  

      socket.on('newScore', function addScore(obj) {
          scores.push(obj);
          redrawScores();
      });
  
      socket.on('msg', function(msg) {
          $('#sub').text(msg);
      });

  
      function redrawScores() {

          var sortable = [];
          scores.sort(function(b, a) {return a.score - b.score})

          var list = $('#scores ol');

          list.empty();

          for (i in scores) {

              if (i < 15) {
                  var obj = scores[i];
                  list.append($('<li>').text(obj.score + ' - ' + obj.name));
              }

          }
      }
  

      function rainbowColor(el) {
          var hue = Math.floor(Math.random()*360);
          el.css('filter', 'hue-rotate('+hue+'deg)');

      }
  

      var logo = $('#logo');
  
      setInterval(function rainbowLogo() {
          rainbowColor(logo);
      }, 500);
  
      (function anim() {
          var now = Date.now()/1000;
  
          // Logo
          var scale = (Math.sin(now*5) + 1)/5 + 0.7;
          var rot = Math.sin(now*10)/10;
          logo.css('transform', 'rotate(' + rot + 'rad) scale(' + scale + ')');
          requestAnimationFrame(anim);
  
      })();
  
  

  });